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

package/src/color/createColorFieldState.ts

@@ -1,11 +1,28 @@
+/*
+ * 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/useColorChannelFieldState.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/color/useColorFieldState.ts
+
 /**
  * ColorField state management.
  * Based on @react-stately/color useColorFieldState and useColorChannelFieldState.
  */
 
-import { createEffect, createMemo, createSignal, type Accessor } from "solid-js";
+import { createEffect, createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
 import type { Color, ColorChannel, ColorChannelRange, ColorFormat, ColorSpace } from "./types";
 import { createRGBColor, normalizeColor, parseColor } from "./Color";
+import { createInternalSignal, readNow } from "../utils";
 
 const HEX_COLOR_MAX = 0xffffff;
 const PARTIAL_HEX_PATTERN = /^#?[0-9a-f]{0,6}$/i;
@@ -145,7 +162,13 @@ function formatColorValue(
     return displayColor.formatChannelValue(channel, locale);
   }
 
-  return displayColor.toString(format ?? "hex");
+  const formatted = displayColor.toString(format ?? "hex");
+  const resolvedFormat = format ?? "hex";
+  if (resolvedFormat === "hex" || resolvedFormat === "hexa") {
+    return formatted.toUpperCase();
+  }
+
+  return formatted;
 }
 
 function normalizeHexInput(value: string): string {
@@ -190,8 +213,8 @@ export function createColorFieldState(options: Accessor<ColorFieldStateOptions>)
   const initialOptions = getOptions();
   const initialValue = getDefaultValue(initialOptions);
 
-  const [internalValue, setInternalValue] = createSignal<Color | null>(initialValue);
-  const [inputValue, setInputValueInternal] = createSignal(
+  const [internalValue, setInternalValue] = createInternalSignal<Color | null>(initialValue);
+  const [inputValue, setInputValueInternal] = createInternalSignal(
     formatColorValue(
       initialValue,
       initialOptions.channel,
@@ -200,7 +223,7 @@ export function createColorFieldState(options: Accessor<ColorFieldStateOptions>)
       initialOptions.locale ?? "en-US",
     ),
   );
-  const [invalidInput, setInvalidInput] = createSignal(false);
+  const [invalidInput, setInvalidInput] = createInternalSignal(false);
 
   const channel = createMemo(() => getOptions().channel);
   const colorSpace = createMemo(() => getOptions().colorSpace);
@@ -223,10 +246,13 @@ export function createColorFieldState(options: Accessor<ColorFieldStateOptions>)
   const formatCurrentValue = (color: Color | null = value()) =>
     formatColorValue(color, channel(), colorSpace(), getOptions().colorFormat, locale());
 
-  createEffect(() => {
-    setInputValueInternal(formatCurrentValue());
-    setInvalidInput(false);
-  });
+  createEffect(
+    () => formatCurrentValue(),
+    (formatted) => {
+      setInputValueInternal(formatted);
+      setInvalidInput(false);
+    },
+  );
 
   const updateValue = (newColor: Color | null) => {
     const opts = getOptions();
@@ -250,7 +276,7 @@ export function createColorFieldState(options: Accessor<ColorFieldStateOptions>)
   };
 
   const commit = () => {
-    const text = inputValue().trim();
+    const text = readNow(inputValue).trim();
     const opts = getOptions();
     const chan = channel();
 
@@ -350,7 +376,7 @@ export function createColorFieldState(options: Accessor<ColorFieldStateOptions>)
   };
 
   const validate = (candidate?: string) => {
-    const text = (candidate ?? inputValue()).trim();
+    const text = (candidate ?? readNow(inputValue)).trim();
     const chan = channel();
 
     if (!text) {

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";
 
@@ -89,8 +105,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 = () => {
@@ -134,10 +150,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 +171,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 +200,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,12 +226,18 @@ 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);
     }
   };
 

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). */
@@ -71,8 +87,8 @@ export function createColorWheelState(options: Accessor<ColorWheelStateOptions>)
   };
 
   const initialValue = normalizeWheelValue(getOptions().defaultValue ?? defaultColor);
-  const [internalValue, setInternalValue] = createSignal<Color>(initialValue);
-  const [isDragging, setIsDragging] = createSignal(false);
+  const [internalValue, setInternalValue] = createInternalSignal<Color>(initialValue);
+  const [isDragging, setIsDragging] = createInternalSignal(false);
   let valueRef = initialValue;
 
   // Controlled vs uncontrolled value
@@ -196,7 +212,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

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,