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

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,

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.
  */
 
 /**