@react-aria/color 3.0.0-beta.21 → 3.0.0-beta.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/import.mjs +58 -58
  2. package/dist/main.js +57 -57
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +58 -58
  5. package/dist/module.js.map +1 -1
  6. package/dist/types.d.ts.map +1 -1
  7. package/package.json +11 -11
  8. package/src/useColorArea.ts +42 -41
  9. package/src/useColorWheel.ts +9 -12
package/dist/import.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import {useGlobalListeners as $7KHxM$useGlobalListeners, focusWithoutScrolling as $7KHxM$focusWithoutScrolling, mergeProps as $7KHxM$mergeProps, isIOS as $7KHxM$isIOS, isAndroid as $7KHxM$isAndroid, useLabels as $7KHxM$useLabels, useId as $7KHxM$useId} from "@react-aria/utils";
2
- import {useRef as $7KHxM$useRef, useCallback as $7KHxM$useCallback, useMemo as $7KHxM$useMemo, useState as $7KHxM$useState} from "react";
2
+ import {useState as $7KHxM$useState, useCallback as $7KHxM$useCallback, useRef as $7KHxM$useRef, useMemo as $7KHxM$useMemo} from "react";
3
3
  import {useKeyboard as $7KHxM$useKeyboard, useMove as $7KHxM$useMove, useFocusWithin as $7KHxM$useFocusWithin, useFocus as $7KHxM$useFocus, useScrollWheel as $7KHxM$useScrollWheel} from "@react-aria/interactions";
4
4
  import {useLocalizedStringFormatter as $7KHxM$useLocalizedStringFormatter, useLocale as $7KHxM$useLocale} from "@react-aria/i18n";
5
5
  import {useVisuallyHidden as $7KHxM$useVisuallyHidden} from "@react-aria/visually-hidden";
@@ -31,7 +31,7 @@ function $parcel$interopDefault(a) {
31
31
  * OF ANY KIND, either express or implied. See the License for the specific language
32
32
  * governing permissions and limitations under the License.
33
33
  */
34
- var $052cfdf4c32eb7c3$exports = {};
34
+ var $3493a52097159720$exports = {};
35
35
  var $eccab2b0118aef08$exports = {};
36
36
  $eccab2b0118aef08$exports = {
37
37
  "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
@@ -338,7 +338,7 @@ $b0fef28529309aa6$exports = {
338
338
  };
339
339
 
340
340
 
341
- $052cfdf4c32eb7c3$exports = {
341
+ $3493a52097159720$exports = {
342
342
  "ar-AE": $eccab2b0118aef08$exports,
343
343
  "bg-BG": $bf2b4507594e3d45$exports,
344
344
  "cs-CZ": $01c08487af7ecd14$exports,
@@ -602,20 +602,19 @@ function $40297c24c53588e6$export$dd62420467d245ca({ direction: direction , stat
602
602
 
603
603
  function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
604
604
  let { isDisabled: isDisabled , inputXRef: inputXRef , inputYRef: inputYRef , containerRef: containerRef , "aria-label": ariaLabel } = props;
605
- let stringFormatter = (0, $7KHxM$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($052cfdf4c32eb7c3$exports))));
605
+ let stringFormatter = (0, $7KHxM$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($3493a52097159720$exports))));
606
606
  let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener } = (0, $7KHxM$useGlobalListeners)();
607
607
  let { direction: direction , locale: locale } = (0, $7KHxM$useLocale)();
608
- let focusedInputRef = (0, $7KHxM$useRef)(null);
608
+ let [focusedInput, setFocusedInput] = (0, $7KHxM$useState)(null);
609
609
  let focusInput = (0, $7KHxM$useCallback)((inputRef = inputXRef)=>{
610
610
  if (inputRef.current) (0, $7KHxM$focusWithoutScrolling)(inputRef.current);
611
611
  }, [
612
612
  inputXRef
613
613
  ]);
614
- let stateRef = (0, $7KHxM$useRef)(null);
615
- stateRef.current = state;
616
- let { xChannel: xChannel , yChannel: yChannel , zChannel: zChannel } = stateRef.current.channels;
617
- let xChannelStep = stateRef.current.xChannelStep;
618
- let yChannelStep = stateRef.current.yChannelStep;
614
+ let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = (0, $7KHxM$useState)(false);
615
+ let { xChannel: xChannel , yChannel: yChannel , zChannel: zChannel } = state.channels;
616
+ let xChannelStep = state.xChannelStep;
617
+ let yChannelStep = state.yChannelStep;
619
618
  let currentPosition = (0, $7KHxM$useRef)(null);
620
619
  let { keyboardProps: keyboardProps } = (0, $7KHxM$useKeyboard)({
621
620
  onKeyDown (e) {
@@ -627,37 +626,42 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
627
626
  // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us
628
627
  e.preventDefault();
629
628
  // remember to set this and unset it so that onChangeEnd is fired
630
- stateRef.current.setDragging(true);
631
- valueChangedViaKeyboard.current = true;
629
+ state.setDragging(true);
630
+ setValueChangedViaKeyboard(true);
631
+ let dir;
632
632
  switch(e.key){
633
633
  case "PageUp":
634
- stateRef.current.incrementY(stateRef.current.yChannelPageStep);
635
- focusedInputRef.current = inputYRef.current;
634
+ state.incrementY(state.yChannelPageStep);
635
+ dir = "y";
636
636
  break;
637
637
  case "PageDown":
638
- stateRef.current.decrementY(stateRef.current.yChannelPageStep);
639
- focusedInputRef.current = inputYRef.current;
638
+ state.decrementY(state.yChannelPageStep);
639
+ dir = "y";
640
640
  break;
641
641
  case "Home":
642
- direction === "rtl" ? stateRef.current.incrementX(stateRef.current.xChannelPageStep) : stateRef.current.decrementX(stateRef.current.xChannelPageStep);
643
- focusedInputRef.current = inputXRef.current;
642
+ direction === "rtl" ? state.incrementX(state.xChannelPageStep) : state.decrementX(state.xChannelPageStep);
643
+ dir = "x";
644
644
  break;
645
645
  case "End":
646
- direction === "rtl" ? stateRef.current.decrementX(stateRef.current.xChannelPageStep) : stateRef.current.incrementX(stateRef.current.xChannelPageStep);
647
- focusedInputRef.current = inputXRef.current;
646
+ direction === "rtl" ? state.decrementX(state.xChannelPageStep) : state.incrementX(state.xChannelPageStep);
647
+ dir = "x";
648
648
  break;
649
649
  }
650
- stateRef.current.setDragging(false);
651
- if (focusedInputRef.current) focusInput(focusedInputRef.current ? focusedInputRef : inputXRef);
650
+ state.setDragging(false);
651
+ if (dir) {
652
+ let input = dir === "x" ? inputXRef : inputYRef;
653
+ focusInput(input);
654
+ setFocusedInput(dir);
655
+ }
652
656
  }
653
657
  });
654
658
  let moveHandler = {
655
659
  onMoveStart () {
656
660
  currentPosition.current = null;
657
- stateRef.current.setDragging(true);
661
+ state.setDragging(true);
658
662
  },
659
663
  onMove ({ deltaX: deltaX , deltaY: deltaY , pointerType: pointerType , shiftKey: shiftKey }) {
660
- let { incrementX: incrementX , decrementX: decrementX , incrementY: incrementY , decrementY: decrementY , xChannelPageStep: xChannelPageStep , xChannelStep: xChannelStep , yChannelPageStep: yChannelPageStep , yChannelStep: yChannelStep , getThumbPosition: getThumbPosition , setColorFromPoint: setColorFromPoint } = stateRef.current;
664
+ let { incrementX: incrementX , decrementX: decrementX , incrementY: incrementY , decrementY: decrementY , xChannelPageStep: xChannelPageStep , xChannelStep: xChannelStep , yChannelPageStep: yChannelPageStep , yChannelStep: yChannelStep , getThumbPosition: getThumbPosition , setColorFromPoint: setColorFromPoint } = state;
661
665
  if (currentPosition.current == null) currentPosition.current = getThumbPosition();
662
666
  let { width: width , height: height } = containerRef.current.getBoundingClientRect();
663
667
  let valueChanged = deltaX !== 0 || deltaY !== 0;
@@ -668,9 +672,10 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
668
672
  else if (deltaX < 0 && direction === "ltr" || deltaX > 0 && direction === "rtl") decrementX(deltaXValue);
669
673
  else if (deltaY > 0) decrementY(deltaYValue);
670
674
  else if (deltaY < 0) incrementY(deltaYValue);
671
- valueChangedViaKeyboard.current = valueChanged;
675
+ setValueChangedViaKeyboard(valueChanged);
672
676
  // set the focused input based on which axis has the greater delta
673
- focusedInputRef.current = valueChanged && Math.abs(deltaY) > Math.abs(deltaX) ? inputYRef.current : inputXRef.current;
677
+ focusedInput = valueChanged && Math.abs(deltaY) > Math.abs(deltaX) ? "y" : "x";
678
+ setFocusedInput(focusedInput);
674
679
  } else {
675
680
  currentPosition.current.x += (direction === "rtl" ? -1 : 1) * deltaX / width;
676
681
  currentPosition.current.y += deltaY / height;
@@ -679,18 +684,15 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
679
684
  },
680
685
  onMoveEnd () {
681
686
  isOnColorArea.current = undefined;
682
- stateRef.current.setDragging(false);
683
- focusInput(focusedInputRef.current ? focusedInputRef : inputXRef);
687
+ state.setDragging(false);
688
+ let input = focusedInput === "x" ? inputXRef : inputYRef;
689
+ focusInput(input);
684
690
  }
685
691
  };
686
692
  let { moveProps: movePropsThumb } = (0, $7KHxM$useMove)(moveHandler);
687
- let valueChangedViaKeyboard = (0, $7KHxM$useRef)(false);
688
693
  let { focusWithinProps: focusWithinProps } = (0, $7KHxM$useFocusWithin)({
689
694
  onFocusWithinChange: (focusWithin)=>{
690
- if (!focusWithin) {
691
- valueChangedViaKeyboard.current = false;
692
- focusedInputRef.current;
693
- }
695
+ if (!focusWithin) setValueChangedViaKeyboard(false);
694
696
  }
695
697
  });
696
698
  let currentPointer = (0, $7KHxM$useRef)(undefined);
@@ -709,7 +711,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
709
711
  let onThumbDown = (id)=>{
710
712
  if (!state.isDragging) {
711
713
  currentPointer.current = id;
712
- valueChangedViaKeyboard.current = false;
714
+ setValueChangedViaKeyboard(false);
713
715
  focusInput();
714
716
  state.setDragging(true);
715
717
  if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onThumbUp, false);
@@ -724,7 +726,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
724
726
  var _e_pointerId;
725
727
  let id = (_e_pointerId = e.pointerId) !== null && _e_pointerId !== void 0 ? _e_pointerId : (_e_changedTouches = e.changedTouches) === null || _e_changedTouches === void 0 ? void 0 : _e_changedTouches[0].identifier;
726
728
  if (id === currentPointer.current) {
727
- valueChangedViaKeyboard.current = false;
729
+ setValueChangedViaKeyboard(false);
728
730
  focusInput();
729
731
  state.setDragging(false);
730
732
  currentPointer.current = undefined;
@@ -744,7 +746,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
744
746
  if (direction === "rtl") x = 1 - x;
745
747
  if (x >= 0 && x <= 1 && y >= 0 && y <= 1 && !state.isDragging && currentPointer.current === undefined) {
746
748
  isOnColorArea.current = true;
747
- valueChangedViaKeyboard.current = false;
749
+ setValueChangedViaKeyboard(false);
748
750
  currentPointer.current = id;
749
751
  state.setColorFromPoint(x, y);
750
752
  focusInput();
@@ -762,7 +764,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
762
764
  let id = (_e_pointerId = e.pointerId) !== null && _e_pointerId !== void 0 ? _e_pointerId : (_e_changedTouches = e.changedTouches) === null || _e_changedTouches === void 0 ? void 0 : _e_changedTouches[0].identifier;
763
765
  if (isOnColorArea.current && id === currentPointer.current) {
764
766
  isOnColorArea.current = false;
765
- valueChangedViaKeyboard.current = false;
767
+ setValueChangedViaKeyboard(false);
766
768
  currentPointer.current = undefined;
767
769
  state.setDragging(false);
768
770
  focusInput();
@@ -807,17 +809,17 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
807
809
  }, focusWithinProps, keyboardProps, movePropsThumb);
808
810
  let { focusProps: xInputFocusProps } = (0, $7KHxM$useFocus)({
809
811
  onFocus: ()=>{
810
- focusedInputRef.current = inputXRef.current;
812
+ setFocusedInput("x");
811
813
  }
812
814
  });
813
815
  let { focusProps: yInputFocusProps } = (0, $7KHxM$useFocus)({
814
816
  onFocus: ()=>{
815
- focusedInputRef.current = inputYRef.current;
817
+ setFocusedInput("y");
816
818
  }
817
819
  });
818
820
  let isMobile = (0, $7KHxM$isIOS)() || (0, $7KHxM$isAndroid)();
819
821
  function getAriaValueTextForChannel(channel) {
820
- return valueChangedViaKeyboard.current ? stringFormatter.format("colorNameAndValue", {
822
+ return valueChangedViaKeyboard ? stringFormatter.format("colorNameAndValue", {
821
823
  name: state.value.getChannelName(channel, locale),
822
824
  value: state.value.formatChannelValue(channel, locale)
823
825
  }) : [
@@ -894,12 +896,12 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
894
896
  "aria-valuetext": getAriaValueTextForChannel(xChannel),
895
897
  disabled: isDisabled,
896
898
  value: state.value.getChannelValue(xChannel),
897
- tabIndex: isMobile || !focusedInputRef.current || focusedInputRef.current === inputXRef.current ? undefined : -1,
899
+ tabIndex: isMobile || !focusedInput || focusedInput === "x" ? undefined : -1,
898
900
  /*
899
901
  So that only a single "2d slider" control shows up when listing form elements for screen readers,
900
902
  add aria-hidden="true" to the unfocused control when the value has not changed via the keyboard,
901
903
  but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.
902
- */ "aria-hidden": isMobile || !focusedInputRef.current || focusedInputRef.current === inputXRef.current || valueChangedViaKeyboard.current ? undefined : "true",
904
+ */ "aria-hidden": isMobile || !focusedInput || focusedInput === "x" || valueChangedViaKeyboard ? undefined : "true",
903
905
  onChange: (e)=>{
904
906
  state.setXValue(parseFloat(e.target.value));
905
907
  }
@@ -917,12 +919,12 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
917
919
  "aria-orientation": "vertical",
918
920
  disabled: isDisabled,
919
921
  value: state.value.getChannelValue(yChannel),
920
- tabIndex: isMobile || focusedInputRef.current && focusedInputRef.current === inputYRef.current ? undefined : -1,
922
+ tabIndex: isMobile || focusedInput === "y" ? undefined : -1,
921
923
  /*
922
924
  So that only a single "2d slider" control shows up when listing form elements for screen readers,
923
925
  add aria-hidden="true" to the unfocused input when the value has not changed via the keyboard,
924
926
  but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.
925
- */ "aria-hidden": isMobile || focusedInputRef.current && focusedInputRef.current === inputYRef.current || valueChangedViaKeyboard.current ? undefined : "true",
927
+ */ "aria-hidden": isMobile || focusedInput === "y" || valueChangedViaKeyboard ? undefined : "true",
926
928
  onChange: (e)=>{
927
929
  state.setYValue(parseFloat(e.target.value));
928
930
  }
@@ -988,9 +990,9 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
988
990
  case "blue":
989
991
  case "alpha":
990
992
  {
991
- let start1 = value.withChannelValue(channel, state.getThumbMinValue(0)).toString("css");
992
- let end1 = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString("css");
993
- return `linear-gradient(to ${to}, ${start1}, ${end1})`;
993
+ let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString("css");
994
+ let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString("css");
995
+ return `linear-gradient(to ${to}, ${start}, ${end})`;
994
996
  }
995
997
  default:
996
998
  throw new Error("Unknown color channel: " + channel);
@@ -1045,8 +1047,6 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
1045
1047
  }, [
1046
1048
  inputRef
1047
1049
  ]);
1048
- let stateRef = (0, $7KHxM$useRef)(null);
1049
- stateRef.current = state;
1050
1050
  let currentPosition = (0, $7KHxM$useRef)(null);
1051
1051
  let { keyboardProps: keyboardProps } = (0, $7KHxM$useKeyboard)({
1052
1052
  onKeyDown (e) {
@@ -1058,18 +1058,18 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
1058
1058
  // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us
1059
1059
  e.preventDefault();
1060
1060
  // remember to set this and unset it so that onChangeEnd is fired
1061
- stateRef.current.setDragging(true);
1061
+ state.setDragging(true);
1062
1062
  switch(e.key){
1063
1063
  case "PageUp":
1064
1064
  e.preventDefault();
1065
- state.increment(stateRef.current.pageStep);
1065
+ state.increment(state.pageStep);
1066
1066
  break;
1067
1067
  case "PageDown":
1068
1068
  e.preventDefault();
1069
- state.decrement(stateRef.current.pageStep);
1069
+ state.decrement(state.pageStep);
1070
1070
  break;
1071
1071
  }
1072
- stateRef.current.setDragging(false);
1072
+ state.setDragging(false);
1073
1073
  }
1074
1074
  });
1075
1075
  let moveHandler = {
@@ -1078,13 +1078,13 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
1078
1078
  state.setDragging(true);
1079
1079
  },
1080
1080
  onMove ({ deltaX: deltaX , deltaY: deltaY , pointerType: pointerType , shiftKey: shiftKey }) {
1081
- if (currentPosition.current == null) currentPosition.current = stateRef.current.getThumbPosition(thumbRadius);
1081
+ if (currentPosition.current == null) currentPosition.current = state.getThumbPosition(thumbRadius);
1082
1082
  currentPosition.current.x += deltaX;
1083
1083
  currentPosition.current.y += deltaY;
1084
1084
  if (pointerType === "keyboard") {
1085
- if (deltaX > 0 || deltaY < 0) state.increment(shiftKey ? stateRef.current.pageStep : stateRef.current.step);
1086
- else if (deltaX < 0 || deltaY > 0) state.decrement(shiftKey ? stateRef.current.pageStep : stateRef.current.step);
1087
- } else stateRef.current.setHueFromPoint(currentPosition.current.x, currentPosition.current.y, thumbRadius);
1085
+ if (deltaX > 0 || deltaY < 0) state.increment(shiftKey ? state.pageStep : state.step);
1086
+ else if (deltaX < 0 || deltaY > 0) state.decrement(shiftKey ? state.pageStep : state.step);
1087
+ } else state.setHueFromPoint(currentPosition.current.x, currentPosition.current.y, thumbRadius);
1088
1088
  },
1089
1089
  onMoveEnd () {
1090
1090
  isOnTrack.current = undefined;
@@ -1142,7 +1142,7 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
1142
1142
  if (innerRadius < radius && radius < outerRadius && !state.isDragging && currentPointer.current === undefined) {
1143
1143
  isOnTrack.current = true;
1144
1144
  currentPointer.current = id;
1145
- stateRef.current.setHueFromPoint(x, y, radius);
1145
+ state.setHueFromPoint(x, y, radius);
1146
1146
  focusInput();
1147
1147
  state.setDragging(true);
1148
1148
  if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onTrackUp, false);
package/dist/main.js CHANGED
@@ -39,7 +39,7 @@ $parcel$export(module.exports, "useColorField", () => $58c850037bc7a7ce$export$7
39
39
  * OF ANY KIND, either express or implied. See the License for the specific language
40
40
  * governing permissions and limitations under the License.
41
41
  */
42
- var $4f97b428b4cbcd4e$exports = {};
42
+ var $4a33e168940636d5$exports = {};
43
43
  var $f141a15c3076a67b$exports = {};
44
44
  $f141a15c3076a67b$exports = {
45
45
  "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
@@ -346,7 +346,7 @@ $7377d28aec5fa200$exports = {
346
346
  };
347
347
 
348
348
 
349
- $4f97b428b4cbcd4e$exports = {
349
+ $4a33e168940636d5$exports = {
350
350
  "ar-AE": $f141a15c3076a67b$exports,
351
351
  "bg-BG": $435ac2a9fdd2ae5e$exports,
352
352
  "cs-CZ": $6b29758b432284f5$exports,
@@ -610,20 +610,19 @@ function $99936ad0bf67c8c4$export$dd62420467d245ca({ direction: direction , stat
610
610
 
611
611
  function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
612
612
  let { isDisabled: isDisabled , inputXRef: inputXRef , inputYRef: inputYRef , containerRef: containerRef , "aria-label": ariaLabel } = props;
613
- let stringFormatter = (0, $kZqDi$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($4f97b428b4cbcd4e$exports))));
613
+ let stringFormatter = (0, $kZqDi$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($4a33e168940636d5$exports))));
614
614
  let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener } = (0, $kZqDi$reactariautils.useGlobalListeners)();
615
615
  let { direction: direction , locale: locale } = (0, $kZqDi$reactariai18n.useLocale)();
616
- let focusedInputRef = (0, $kZqDi$react.useRef)(null);
616
+ let [focusedInput, setFocusedInput] = (0, $kZqDi$react.useState)(null);
617
617
  let focusInput = (0, $kZqDi$react.useCallback)((inputRef = inputXRef)=>{
618
618
  if (inputRef.current) (0, $kZqDi$reactariautils.focusWithoutScrolling)(inputRef.current);
619
619
  }, [
620
620
  inputXRef
621
621
  ]);
622
- let stateRef = (0, $kZqDi$react.useRef)(null);
623
- stateRef.current = state;
624
- let { xChannel: xChannel , yChannel: yChannel , zChannel: zChannel } = stateRef.current.channels;
625
- let xChannelStep = stateRef.current.xChannelStep;
626
- let yChannelStep = stateRef.current.yChannelStep;
622
+ let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = (0, $kZqDi$react.useState)(false);
623
+ let { xChannel: xChannel , yChannel: yChannel , zChannel: zChannel } = state.channels;
624
+ let xChannelStep = state.xChannelStep;
625
+ let yChannelStep = state.yChannelStep;
627
626
  let currentPosition = (0, $kZqDi$react.useRef)(null);
628
627
  let { keyboardProps: keyboardProps } = (0, $kZqDi$reactariainteractions.useKeyboard)({
629
628
  onKeyDown (e) {
@@ -635,37 +634,42 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
635
634
  // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us
636
635
  e.preventDefault();
637
636
  // remember to set this and unset it so that onChangeEnd is fired
638
- stateRef.current.setDragging(true);
639
- valueChangedViaKeyboard.current = true;
637
+ state.setDragging(true);
638
+ setValueChangedViaKeyboard(true);
639
+ let dir;
640
640
  switch(e.key){
641
641
  case "PageUp":
642
- stateRef.current.incrementY(stateRef.current.yChannelPageStep);
643
- focusedInputRef.current = inputYRef.current;
642
+ state.incrementY(state.yChannelPageStep);
643
+ dir = "y";
644
644
  break;
645
645
  case "PageDown":
646
- stateRef.current.decrementY(stateRef.current.yChannelPageStep);
647
- focusedInputRef.current = inputYRef.current;
646
+ state.decrementY(state.yChannelPageStep);
647
+ dir = "y";
648
648
  break;
649
649
  case "Home":
650
- direction === "rtl" ? stateRef.current.incrementX(stateRef.current.xChannelPageStep) : stateRef.current.decrementX(stateRef.current.xChannelPageStep);
651
- focusedInputRef.current = inputXRef.current;
650
+ direction === "rtl" ? state.incrementX(state.xChannelPageStep) : state.decrementX(state.xChannelPageStep);
651
+ dir = "x";
652
652
  break;
653
653
  case "End":
654
- direction === "rtl" ? stateRef.current.decrementX(stateRef.current.xChannelPageStep) : stateRef.current.incrementX(stateRef.current.xChannelPageStep);
655
- focusedInputRef.current = inputXRef.current;
654
+ direction === "rtl" ? state.decrementX(state.xChannelPageStep) : state.incrementX(state.xChannelPageStep);
655
+ dir = "x";
656
656
  break;
657
657
  }
658
- stateRef.current.setDragging(false);
659
- if (focusedInputRef.current) focusInput(focusedInputRef.current ? focusedInputRef : inputXRef);
658
+ state.setDragging(false);
659
+ if (dir) {
660
+ let input = dir === "x" ? inputXRef : inputYRef;
661
+ focusInput(input);
662
+ setFocusedInput(dir);
663
+ }
660
664
  }
661
665
  });
662
666
  let moveHandler = {
663
667
  onMoveStart () {
664
668
  currentPosition.current = null;
665
- stateRef.current.setDragging(true);
669
+ state.setDragging(true);
666
670
  },
667
671
  onMove ({ deltaX: deltaX , deltaY: deltaY , pointerType: pointerType , shiftKey: shiftKey }) {
668
- let { incrementX: incrementX , decrementX: decrementX , incrementY: incrementY , decrementY: decrementY , xChannelPageStep: xChannelPageStep , xChannelStep: xChannelStep , yChannelPageStep: yChannelPageStep , yChannelStep: yChannelStep , getThumbPosition: getThumbPosition , setColorFromPoint: setColorFromPoint } = stateRef.current;
672
+ let { incrementX: incrementX , decrementX: decrementX , incrementY: incrementY , decrementY: decrementY , xChannelPageStep: xChannelPageStep , xChannelStep: xChannelStep , yChannelPageStep: yChannelPageStep , yChannelStep: yChannelStep , getThumbPosition: getThumbPosition , setColorFromPoint: setColorFromPoint } = state;
669
673
  if (currentPosition.current == null) currentPosition.current = getThumbPosition();
670
674
  let { width: width , height: height } = containerRef.current.getBoundingClientRect();
671
675
  let valueChanged = deltaX !== 0 || deltaY !== 0;
@@ -676,9 +680,10 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
676
680
  else if (deltaX < 0 && direction === "ltr" || deltaX > 0 && direction === "rtl") decrementX(deltaXValue);
677
681
  else if (deltaY > 0) decrementY(deltaYValue);
678
682
  else if (deltaY < 0) incrementY(deltaYValue);
679
- valueChangedViaKeyboard.current = valueChanged;
683
+ setValueChangedViaKeyboard(valueChanged);
680
684
  // set the focused input based on which axis has the greater delta
681
- focusedInputRef.current = valueChanged && Math.abs(deltaY) > Math.abs(deltaX) ? inputYRef.current : inputXRef.current;
685
+ focusedInput = valueChanged && Math.abs(deltaY) > Math.abs(deltaX) ? "y" : "x";
686
+ setFocusedInput(focusedInput);
682
687
  } else {
683
688
  currentPosition.current.x += (direction === "rtl" ? -1 : 1) * deltaX / width;
684
689
  currentPosition.current.y += deltaY / height;
@@ -687,18 +692,15 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
687
692
  },
688
693
  onMoveEnd () {
689
694
  isOnColorArea.current = undefined;
690
- stateRef.current.setDragging(false);
691
- focusInput(focusedInputRef.current ? focusedInputRef : inputXRef);
695
+ state.setDragging(false);
696
+ let input = focusedInput === "x" ? inputXRef : inputYRef;
697
+ focusInput(input);
692
698
  }
693
699
  };
694
700
  let { moveProps: movePropsThumb } = (0, $kZqDi$reactariainteractions.useMove)(moveHandler);
695
- let valueChangedViaKeyboard = (0, $kZqDi$react.useRef)(false);
696
701
  let { focusWithinProps: focusWithinProps } = (0, $kZqDi$reactariainteractions.useFocusWithin)({
697
702
  onFocusWithinChange: (focusWithin)=>{
698
- if (!focusWithin) {
699
- valueChangedViaKeyboard.current = false;
700
- focusedInputRef.current;
701
- }
703
+ if (!focusWithin) setValueChangedViaKeyboard(false);
702
704
  }
703
705
  });
704
706
  let currentPointer = (0, $kZqDi$react.useRef)(undefined);
@@ -717,7 +719,7 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
717
719
  let onThumbDown = (id)=>{
718
720
  if (!state.isDragging) {
719
721
  currentPointer.current = id;
720
- valueChangedViaKeyboard.current = false;
722
+ setValueChangedViaKeyboard(false);
721
723
  focusInput();
722
724
  state.setDragging(true);
723
725
  if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onThumbUp, false);
@@ -732,7 +734,7 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
732
734
  var _e_pointerId;
733
735
  let id = (_e_pointerId = e.pointerId) !== null && _e_pointerId !== void 0 ? _e_pointerId : (_e_changedTouches = e.changedTouches) === null || _e_changedTouches === void 0 ? void 0 : _e_changedTouches[0].identifier;
734
736
  if (id === currentPointer.current) {
735
- valueChangedViaKeyboard.current = false;
737
+ setValueChangedViaKeyboard(false);
736
738
  focusInput();
737
739
  state.setDragging(false);
738
740
  currentPointer.current = undefined;
@@ -752,7 +754,7 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
752
754
  if (direction === "rtl") x = 1 - x;
753
755
  if (x >= 0 && x <= 1 && y >= 0 && y <= 1 && !state.isDragging && currentPointer.current === undefined) {
754
756
  isOnColorArea.current = true;
755
- valueChangedViaKeyboard.current = false;
757
+ setValueChangedViaKeyboard(false);
756
758
  currentPointer.current = id;
757
759
  state.setColorFromPoint(x, y);
758
760
  focusInput();
@@ -770,7 +772,7 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
770
772
  let id = (_e_pointerId = e.pointerId) !== null && _e_pointerId !== void 0 ? _e_pointerId : (_e_changedTouches = e.changedTouches) === null || _e_changedTouches === void 0 ? void 0 : _e_changedTouches[0].identifier;
771
773
  if (isOnColorArea.current && id === currentPointer.current) {
772
774
  isOnColorArea.current = false;
773
- valueChangedViaKeyboard.current = false;
775
+ setValueChangedViaKeyboard(false);
774
776
  currentPointer.current = undefined;
775
777
  state.setDragging(false);
776
778
  focusInput();
@@ -815,17 +817,17 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
815
817
  }, focusWithinProps, keyboardProps, movePropsThumb);
816
818
  let { focusProps: xInputFocusProps } = (0, $kZqDi$reactariainteractions.useFocus)({
817
819
  onFocus: ()=>{
818
- focusedInputRef.current = inputXRef.current;
820
+ setFocusedInput("x");
819
821
  }
820
822
  });
821
823
  let { focusProps: yInputFocusProps } = (0, $kZqDi$reactariainteractions.useFocus)({
822
824
  onFocus: ()=>{
823
- focusedInputRef.current = inputYRef.current;
825
+ setFocusedInput("y");
824
826
  }
825
827
  });
826
828
  let isMobile = (0, $kZqDi$reactariautils.isIOS)() || (0, $kZqDi$reactariautils.isAndroid)();
827
829
  function getAriaValueTextForChannel(channel) {
828
- return valueChangedViaKeyboard.current ? stringFormatter.format("colorNameAndValue", {
830
+ return valueChangedViaKeyboard ? stringFormatter.format("colorNameAndValue", {
829
831
  name: state.value.getChannelName(channel, locale),
830
832
  value: state.value.formatChannelValue(channel, locale)
831
833
  }) : [
@@ -902,12 +904,12 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
902
904
  "aria-valuetext": getAriaValueTextForChannel(xChannel),
903
905
  disabled: isDisabled,
904
906
  value: state.value.getChannelValue(xChannel),
905
- tabIndex: isMobile || !focusedInputRef.current || focusedInputRef.current === inputXRef.current ? undefined : -1,
907
+ tabIndex: isMobile || !focusedInput || focusedInput === "x" ? undefined : -1,
906
908
  /*
907
909
  So that only a single "2d slider" control shows up when listing form elements for screen readers,
908
910
  add aria-hidden="true" to the unfocused control when the value has not changed via the keyboard,
909
911
  but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.
910
- */ "aria-hidden": isMobile || !focusedInputRef.current || focusedInputRef.current === inputXRef.current || valueChangedViaKeyboard.current ? undefined : "true",
912
+ */ "aria-hidden": isMobile || !focusedInput || focusedInput === "x" || valueChangedViaKeyboard ? undefined : "true",
911
913
  onChange: (e)=>{
912
914
  state.setXValue(parseFloat(e.target.value));
913
915
  }
@@ -925,12 +927,12 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
925
927
  "aria-orientation": "vertical",
926
928
  disabled: isDisabled,
927
929
  value: state.value.getChannelValue(yChannel),
928
- tabIndex: isMobile || focusedInputRef.current && focusedInputRef.current === inputYRef.current ? undefined : -1,
930
+ tabIndex: isMobile || focusedInput === "y" ? undefined : -1,
929
931
  /*
930
932
  So that only a single "2d slider" control shows up when listing form elements for screen readers,
931
933
  add aria-hidden="true" to the unfocused input when the value has not changed via the keyboard,
932
934
  but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.
933
- */ "aria-hidden": isMobile || focusedInputRef.current && focusedInputRef.current === inputYRef.current || valueChangedViaKeyboard.current ? undefined : "true",
935
+ */ "aria-hidden": isMobile || focusedInput === "y" || valueChangedViaKeyboard ? undefined : "true",
934
936
  onChange: (e)=>{
935
937
  state.setYValue(parseFloat(e.target.value));
936
938
  }
@@ -996,9 +998,9 @@ function $afbb9647440a7f5b$export$106b7a4e66508f66(props, state) {
996
998
  case "blue":
997
999
  case "alpha":
998
1000
  {
999
- let start1 = value.withChannelValue(channel, state.getThumbMinValue(0)).toString("css");
1000
- let end1 = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString("css");
1001
- return `linear-gradient(to ${to}, ${start1}, ${end1})`;
1001
+ let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString("css");
1002
+ let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString("css");
1003
+ return `linear-gradient(to ${to}, ${start}, ${end})`;
1002
1004
  }
1003
1005
  default:
1004
1006
  throw new Error("Unknown color channel: " + channel);
@@ -1053,8 +1055,6 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
1053
1055
  }, [
1054
1056
  inputRef
1055
1057
  ]);
1056
- let stateRef = (0, $kZqDi$react.useRef)(null);
1057
- stateRef.current = state;
1058
1058
  let currentPosition = (0, $kZqDi$react.useRef)(null);
1059
1059
  let { keyboardProps: keyboardProps } = (0, $kZqDi$reactariainteractions.useKeyboard)({
1060
1060
  onKeyDown (e) {
@@ -1066,18 +1066,18 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
1066
1066
  // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us
1067
1067
  e.preventDefault();
1068
1068
  // remember to set this and unset it so that onChangeEnd is fired
1069
- stateRef.current.setDragging(true);
1069
+ state.setDragging(true);
1070
1070
  switch(e.key){
1071
1071
  case "PageUp":
1072
1072
  e.preventDefault();
1073
- state.increment(stateRef.current.pageStep);
1073
+ state.increment(state.pageStep);
1074
1074
  break;
1075
1075
  case "PageDown":
1076
1076
  e.preventDefault();
1077
- state.decrement(stateRef.current.pageStep);
1077
+ state.decrement(state.pageStep);
1078
1078
  break;
1079
1079
  }
1080
- stateRef.current.setDragging(false);
1080
+ state.setDragging(false);
1081
1081
  }
1082
1082
  });
1083
1083
  let moveHandler = {
@@ -1086,13 +1086,13 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
1086
1086
  state.setDragging(true);
1087
1087
  },
1088
1088
  onMove ({ deltaX: deltaX , deltaY: deltaY , pointerType: pointerType , shiftKey: shiftKey }) {
1089
- if (currentPosition.current == null) currentPosition.current = stateRef.current.getThumbPosition(thumbRadius);
1089
+ if (currentPosition.current == null) currentPosition.current = state.getThumbPosition(thumbRadius);
1090
1090
  currentPosition.current.x += deltaX;
1091
1091
  currentPosition.current.y += deltaY;
1092
1092
  if (pointerType === "keyboard") {
1093
- if (deltaX > 0 || deltaY < 0) state.increment(shiftKey ? stateRef.current.pageStep : stateRef.current.step);
1094
- else if (deltaX < 0 || deltaY > 0) state.decrement(shiftKey ? stateRef.current.pageStep : stateRef.current.step);
1095
- } else stateRef.current.setHueFromPoint(currentPosition.current.x, currentPosition.current.y, thumbRadius);
1093
+ if (deltaX > 0 || deltaY < 0) state.increment(shiftKey ? state.pageStep : state.step);
1094
+ else if (deltaX < 0 || deltaY > 0) state.decrement(shiftKey ? state.pageStep : state.step);
1095
+ } else state.setHueFromPoint(currentPosition.current.x, currentPosition.current.y, thumbRadius);
1096
1096
  },
1097
1097
  onMoveEnd () {
1098
1098
  isOnTrack.current = undefined;
@@ -1150,7 +1150,7 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
1150
1150
  if (innerRadius < radius && radius < outerRadius && !state.isDragging && currentPointer.current === undefined) {
1151
1151
  isOnTrack.current = true;
1152
1152
  currentPointer.current = id;
1153
- stateRef.current.setHueFromPoint(x, y, radius);
1153
+ state.setHueFromPoint(x, y, radius);
1154
1154
  focusInput();
1155
1155
  state.setDragging(true);
1156
1156
  if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onTrackUp, false);