@proyecto-viviana/solid-stately 0.5.1 → 0.6.0-rc.1

package/src/color/createColorSliderState.ts

@@ -1,11 +1,27 @@
+/*
+ * 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/color/useColorSliderState.ts
+
 /**
  * ColorSlider state management.
  * Based on @react-stately/color useColorSliderState.
  */
 
-import { createSignal, createMemo, type Accessor } from "solid-js";
+import { createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
 import type { Color, ColorChannel, ColorSpace } from "./types";
 import { normalizeColor } from "./Color";
+import { createInternalSignal, readNow } from "../utils";
 
 export type ColorSliderOrientation = "horizontal" | "vertical";
 
@@ -49,6 +65,8 @@ export interface ColorSliderState {
   readonly maxValue: number;
   /** Whether the slider is disabled. */
   readonly isDisabled: boolean;
+  /** The channel number a native form reset restores. */
+  readonly defaultThumbValue: number;
 
   /** Get the current channel value. */
   getThumbValue(): number;
@@ -89,8 +107,8 @@ export function createColorSliderState(
   };
 
   // Internal value state
-  const [internalValue, setInternalValue] = createSignal<Color | null>(null);
-  const [isDragging, setIsDragging] = createSignal(false);
+  const [internalValue, setInternalValue] = createInternalSignal<Color | null>(null);
+  const [isDragging, setIsDragging] = createInternalSignal(false);
 
   // Initialize internal value
   const initValue = () => {
@@ -109,6 +127,22 @@ export function createColorSliderState(
     }
   }
 
+  // Form reset restores the first defaultValue's channel, or the first
+  // controlled color's channel when that default was omitted. An explicit
+  // null default falls through.
+  const initialOptions = getOptions();
+  const resetColor = (color: Color | string) => {
+    const normalized = normalizeColor(color);
+    return initialOptions.colorSpace ? normalized.toFormat(initialOptions.colorSpace) : normalized;
+  };
+  const initialDefault = initialOptions.defaultValue
+    ? resetColor(initialOptions.defaultValue)
+    : undefined;
+  const firstColor =
+    initialOptions.value !== undefined ? resetColor(initialOptions.value) : undefined;
+  const defaultColor = initialDefault ?? firstColor ?? resetColor("#ff0000");
+  const defaultThumbValue = defaultColor.getChannelValue(initialOptions.channel);
+
   // Controlled vs uncontrolled value
   const value = createMemo(() => {
     const opts = getOptions();
@@ -134,10 +168,15 @@ export function createColorSliderState(
   const minValue = createMemo(() => channelRange().minValue);
   const maxValue = createMemo(() => channelRange().maxValue);
 
+  // Same-turn color for chained writes (keyboard increment then onChangeEnd).
+  // `value()` is a memo and stays stale until flush() in Solid 2.
+  let lastValue: Color | null = internalValue();
+
   // Update value
   const updateValue = (newColor: Color) => {
     const opts = getOptions();
     const nextColor = opts.colorSpace ? newColor.toFormat(opts.colorSpace) : newColor;
+    lastValue = nextColor;
 
     // Controlled mode
     if (opts.value !== undefined) {
@@ -150,9 +189,11 @@ export function createColorSliderState(
     opts.onChange?.(nextColor);
   };
 
+  const liveColor = () => lastValue ?? internalValue() ?? value();
+
   // Get thumb value
   const getThumbValue = () => {
-    return value().getChannelValue(channel());
+    return liveColor().getChannelValue(channel());
   };
 
   // Get min/max values
@@ -177,7 +218,7 @@ export function createColorSliderState(
     const rounded = Number(
       (Math.round((clamped - min) / stepValue) * stepValue + min).toFixed(precision),
     );
-    const newColor = value().withChannelValue(channel(), rounded);
+    const newColor = liveColor().withChannelValue(channel(), rounded);
     updateValue(newColor);
   };
 
@@ -203,21 +244,31 @@ export function createColorSliderState(
 
   // Set dragging
   const setDraggingState = (dragging: boolean) => {
-    const wasDragging = isDragging();
+    const wasDragging = readNow(isDragging);
     setIsDragging(dragging);
 
     // Call onChangeEnd when dragging ends
     if (wasDragging && !dragging) {
-      getOptions().onChangeEnd?.(value());
+      const opts = getOptions();
+      const current =
+        lastValue ??
+        (opts.value !== undefined ? normalizeValue(opts.value) : null) ??
+        internalValue() ??
+        value();
+      opts.onChangeEnd?.(current);
     }
   };
 
-  // Get display color (alpha = 1)
+  // Hue paints a pure color. Alpha keeps its alpha. Other channels paint opaque.
   const getDisplayColor = () => {
     const v = value();
-    if (channel() === "hue") {
+    const current = channel();
+    if (current === "hue") {
       return normalizeColor(`hsl(${v.getChannelValue("hue")}, 100%, 50%)`);
     }
+    if (current === "alpha") {
+      return v;
+    }
     return v.withChannelValue("alpha", 1);
   };
 
@@ -257,6 +308,7 @@ export function createColorSliderState(
     get isDisabled() {
       return isDisabled();
     },
+    defaultThumbValue,
     getThumbValue,
     getThumbMinValue,
     getThumbMaxValue,

package/src/color/createColorWheelState.ts

@@ -1,11 +1,27 @@
+/*
+ * 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/color/useColorWheelState.ts
+
 /**
  * ColorWheel state management.
  * Based on @react-stately/color useColorWheelState.
  */
 
-import { createSignal, createMemo, type Accessor } from "solid-js";
+import { createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
 import type { Color } from "./types";
 import { createHSLColor, normalizeColor } from "./Color";
+import { createInternalSignal, readNow } from "../utils";
 
 export interface ColorWheelStateOptions {
   /** The current color value (controlled). */
@@ -70,9 +86,15 @@ export function createColorWheelState(options: Accessor<ColorWheelStateOptions>)
     return value.toFormat(value.getColorSpace() === "hsb" ? "hsb" : "hsl");
   };
 
-  const initialValue = normalizeWheelValue(getOptions().defaultValue ?? defaultColor);
-  const [internalValue, setInternalValue] = createSignal<Color>(initialValue);
-  const [isDragging, setIsDragging] = createSignal(false);
+  // Pin useColorWheelState returns the first controlled color as defaultValue
+  // so a native form reset restores that hue. The built-in red is only used
+  // when the wheel is uncontrolled and no defaultValue was passed.
+  const firstOptions = getOptions();
+  const controlledInitial =
+    firstOptions.value !== undefined ? normalizeWheelValue(firstOptions.value) : undefined;
+  const initialValue = normalizeWheelValue(firstOptions.defaultValue ?? defaultColor);
+  const [internalValue, setInternalValue] = createInternalSignal<Color>(initialValue);
+  const [isDragging, setIsDragging] = createInternalSignal(false);
   let valueRef = initialValue;
 
   // Controlled vs uncontrolled value
@@ -131,9 +153,7 @@ export function createColorWheelState(options: Accessor<ColorWheelStateOptions>)
   const degToRad = (deg: number) => (deg * Math.PI) / 180;
 
   const cartesianToAngle = (x: number, y: number, radius: number) => {
-    const clampedX = Math.max(-radius, Math.min(radius, x));
-    const clampedY = Math.max(-radius, Math.min(radius, y));
-    return mod(radToDeg(Math.atan2(clampedY, clampedX)), 360);
+    return mod(radToDeg(Math.atan2(y / radius, x / radius)), 360);
   };
 
   const angleToCartesian = (angle: number, radius: number) => ({
@@ -196,7 +216,7 @@ export function createColorWheelState(options: Accessor<ColorWheelStateOptions>)
 
   // Set dragging state
   const setDraggingState = (dragging: boolean) => {
-    const wasDragging = isDragging();
+    const wasDragging = readNow(isDragging);
     setIsDragging(dragging);
 
     // Call onChangeEnd when dragging ends
@@ -219,7 +239,7 @@ export function createColorWheelState(options: Accessor<ColorWheelStateOptions>)
       return value();
     },
     get defaultValue() {
-      return initialValue;
+      return controlledInitial ?? initialValue;
     },
     get isDragging() {
       return isDragging();

package/src/color/getColorChannels.ts

@@ -1,7 +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/color/Color.ts
+
 /**
  * getColorChannels - Standalone function to get color channels for a color space.
  *
  * Returns the three channels for a given color space.
+ *
+ * Ported from packages/react-stately/src/color/Color.ts.
  */
 
 import type { ColorChannel, ColorSpace } from "./types";

package/src/color/index.ts

@@ -14,6 +14,7 @@ export type {
 export {
   parseColor,
   normalizeColor,
+  normalizeHue,
   createRGBColor,
   createHSLColor,
   createHSBColor,

package/src/color/intl/index.ts

@@ -1,6 +1,41 @@
-// Color-name / channel-name intl catalog, ported verbatim from
-// @react-stately/color's intl/color/*.json (34 locales). Keep in sync
-// with the vendored react-spectrum source on every pin bump.
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/ar-AE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/bg-BG.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/cs-CZ.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/da-DK.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/de-DE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/el-GR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/en-US.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/es-ES.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/et-EE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/fi-FI.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/fr-FR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/he-IL.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/hr-HR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/hu-HU.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/it-IT.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/ja-JP.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/ko-KR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/lt-LT.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/lv-LV.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/nb-NO.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/nl-NL.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/pl-PL.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/pt-BR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/pt-PT.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/ro-RO.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/ru-RU.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/sk-SK.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/sl-SI.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/sr-SP.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/sv-SE.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/tr-TR.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/uk-UA.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/zh-CN.json
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/intl/color/zh-TW.json
+
+// Color names and channel names. Ported from the @react-stately/color intl catalog.
+// The catalog has 34 locales. Keep it in sync with the vendored react-spectrum source on every
+// pin bump.
 
 export type ColorStringKey =
   | "hue"

package/src/color/types.ts

@@ -1,6 +1,6 @@
 /**
  * Color types for color picker components.
- * Based on @react-stately/color.
+ * Ported from packages/react-stately/src/color/types.ts.
  */
 
 /**