@react-aria/color 3.0.0-beta.25 → 3.0.0-beta.27

package/dist/import.mjs

@@ -4,9 +4,11 @@ import {useKeyboard as $7KHxM$useKeyboard, useMove as $7KHxM$useMove, useFocusWi
 import {useLocalizedStringFormatter as $7KHxM$useLocalizedStringFormatter, useLocale as $7KHxM$useLocale} from "@react-aria/i18n";
 import {useVisuallyHidden as $7KHxM$useVisuallyHidden} from "@react-aria/visually-hidden";
 import {useSlider as $7KHxM$useSlider, useSliderThumb as $7KHxM$useSliderThumb} from "@react-aria/slider";
+import {privateValidationStateProp as $7KHxM$privateValidationStateProp} from "@react-stately/form";
 import {useFormattedTextField as $7KHxM$useFormattedTextField} from "@react-aria/textfield";
 import {useSpinButton as $7KHxM$useSpinButton} from "@react-aria/spinbutton";
 
+
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
@@ -36,8 +38,8 @@ var $eccab2b0118aef08$exports = {};
 $eccab2b0118aef08$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `أداة انتقاء اللون`,
-    "twoDimensionalSlider": `مُنزلق 2D`
+    "colorPicker": `\u{623}\u{62F}\u{627}\u{629} \u{627}\u{646}\u{62A}\u{642}\u{627}\u{621} \u{627}\u{644}\u{644}\u{648}\u{646}`,
+    "twoDimensionalSlider": `\u{645}\u{64F}\u{646}\u{632}\u{644}\u{642} 2D`
 };
 
 
@@ -45,8 +47,8 @@ var $bf2b4507594e3d45$exports = {};
 $bf2b4507594e3d45$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `Средство за избиране на цвят`,
-    "twoDimensionalSlider": `2D плъзгач`
+    "colorPicker": `\u{421}\u{440}\u{435}\u{434}\u{441}\u{442}\u{432}\u{43E} \u{437}\u{430} \u{438}\u{437}\u{431}\u{438}\u{440}\u{430}\u{43D}\u{435} \u{43D}\u{430} \u{446}\u{432}\u{44F}\u{442}`,
+    "twoDimensionalSlider": `2D \u{43F}\u{43B}\u{44A}\u{437}\u{433}\u{430}\u{447}`
 };
 
 
@@ -54,8 +56,8 @@ var $01c08487af7ecd14$exports = {};
 $01c08487af7ecd14$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `Výběr barvy`,
-    "twoDimensionalSlider": `2D posuvník`
+    "colorPicker": `V\xfdb\u{11B}r barvy`,
+    "twoDimensionalSlider": `2D posuvn\xedk`
 };
 
 
@@ -63,7 +65,7 @@ var $5e997db6ea0d10f6$exports = {};
 $5e997db6ea0d10f6$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `Farvevælger`,
+    "colorPicker": `Farvev\xe6lger`,
     "twoDimensionalSlider": `2D-skyder`
 };
 
@@ -72,7 +74,7 @@ var $fe5998f640a79fd2$exports = {};
 $fe5998f640a79fd2$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `Farbwähler`,
+    "colorPicker": `Farbw\xe4hler`,
     "twoDimensionalSlider": `2D-Schieberegler`
 };
 
@@ -81,8 +83,8 @@ var $18e4d1d5b500a9ee$exports = {};
 $18e4d1d5b500a9ee$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `Επιλογέας χρωμάτων`,
-    "twoDimensionalSlider": `Ρυθμιστικό 2D`
+    "colorPicker": `\u{395}\u{3C0}\u{3B9}\u{3BB}\u{3BF}\u{3B3}\u{3AD}\u{3B1}\u{3C2} \u{3C7}\u{3C1}\u{3C9}\u{3BC}\u{3AC}\u{3C4}\u{3C9}\u{3BD}`,
+    "twoDimensionalSlider": `\u{3A1}\u{3C5}\u{3B8}\u{3BC}\u{3B9}\u{3C3}\u{3C4}\u{3B9}\u{3BA}\u{3CC} 2D`
 };
 
 
@@ -108,7 +110,7 @@ var $d950967017e3485b$exports = {};
 $d950967017e3485b$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `Värvivalija`,
+    "colorPicker": `V\xe4rvivalija`,
     "twoDimensionalSlider": `2D-liugur`
 };
 
@@ -117,17 +119,17 @@ var $00a415a3f0ab315a$exports = {};
 $00a415a3f0ab315a$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `Värimuokkain`,
-    "twoDimensionalSlider": `2D-liukusäädin`
+    "colorPicker": `V\xe4rimuokkain`,
+    "twoDimensionalSlider": `2D-liukus\xe4\xe4din`
 };
 
 
 var $d80f30fe86c95741$exports = {};
 $d80f30fe86c95741$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
-    "colorNameAndValue": (args)=>`${args.name} : ${args.value}`,
-    "colorPicker": `Sélecteur de couleurs`,
-    "twoDimensionalSlider": `Curseur 2D`
+    "colorNameAndValue": (args)=>`${args.name}\xa0: ${args.value}`,
+    "colorPicker": `S\xe9lecteur de couleurs`,
+    "twoDimensionalSlider": `Curseur\xa02D`
 };
 
 
@@ -135,8 +137,8 @@ var $6912afb584340a2e$exports = {};
 $6912afb584340a2e$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `בוחר הצבעים`,
-    "twoDimensionalSlider": `מחוון דו מימדי`
+    "colorPicker": `\u{5D1}\u{5D5}\u{5D7}\u{5E8} \u{5D4}\u{5E6}\u{5D1}\u{5E2}\u{5D9}\u{5DD}`,
+    "twoDimensionalSlider": `\u{5DE}\u{5D7}\u{5D5}\u{5D5}\u{5DF} \u{5D3}\u{5D5} \u{5DE}\u{5D9}\u{5DE}\u{5D3}\u{5D9}`
 };
 
 
@@ -145,7 +147,7 @@ $7b97fcacd84ec90f$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Odabir boje`,
-    "twoDimensionalSlider": `2D klizač`
+    "twoDimensionalSlider": `2D kliza\u{10D}`
 };
 
 
@@ -153,8 +155,8 @@ var $da9b443e89eebc6b$exports = {};
 $da9b443e89eebc6b$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `Színválasztó`,
-    "twoDimensionalSlider": `2D-csúszka`
+    "colorPicker": `Sz\xednv\xe1laszt\xf3`,
+    "twoDimensionalSlider": `2D-cs\xfaszka`
 };
 
 
@@ -169,10 +171,10 @@ $35f135b45eb4d95b$exports = {
 
 var $760b09448e39c6cd$exports = {};
 $760b09448e39c6cd$exports = {
-    "colorInputLabel": (args)=>`${args.label}、${args.channelLabel}`,
+    "colorInputLabel": (args)=>`${args.label}\u{3001}${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name} : ${args.value}`,
-    "colorPicker": `カラーピッカー`,
-    "twoDimensionalSlider": `2D スライダー`
+    "colorPicker": `\u{30AB}\u{30E9}\u{30FC}\u{30D4}\u{30C3}\u{30AB}\u{30FC}`,
+    "twoDimensionalSlider": `2D \u{30B9}\u{30E9}\u{30A4}\u{30C0}\u{30FC}`
 };
 
 
@@ -180,8 +182,8 @@ var $fc7b7d43be9703ec$exports = {};
 $fc7b7d43be9703ec$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `색상 피커`,
-    "twoDimensionalSlider": `2D 슬라이더`
+    "colorPicker": `\u{C0C9}\u{C0C1} \u{D53C}\u{CEE4}`,
+    "twoDimensionalSlider": `2D \u{C2AC}\u{B77C}\u{C774}\u{B354}`
 };
 
 
@@ -189,7 +191,7 @@ var $74918a1664156912$exports = {};
 $74918a1664156912$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `Spalvų parinkiklis`,
+    "colorPicker": `Spalv\u{173} parinkiklis`,
     "twoDimensionalSlider": `2D slankiklis`
 };
 
@@ -198,8 +200,8 @@ var $4e6cde11c2bc9840$exports = {};
 $4e6cde11c2bc9840$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `Krāsu atlasītājs`,
-    "twoDimensionalSlider": `2D slīdnis`
+    "colorPicker": `Kr\u{101}su atlas\u{12B}t\u{101}js`,
+    "twoDimensionalSlider": `2D sl\u{12B}dnis`
 };
 
 
@@ -225,7 +227,7 @@ var $1be8b0ee8841f1e7$exports = {};
 $1be8b0ee8841f1e7$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `Próbnik kolorów`,
+    "colorPicker": `Pr\xf3bnik kolor\xf3w`,
     "twoDimensionalSlider": `Suwak 2D`
 };
 
@@ -261,8 +263,8 @@ var $f1107d94c09df9b8$exports = {};
 $f1107d94c09df9b8$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `Палитра цветов`,
-    "twoDimensionalSlider": `Ползунок 2D`
+    "colorPicker": `\u{41F}\u{430}\u{43B}\u{438}\u{442}\u{440}\u{430} \u{446}\u{432}\u{435}\u{442}\u{43E}\u{432}`,
+    "twoDimensionalSlider": `\u{41F}\u{43E}\u{43B}\u{437}\u{443}\u{43D}\u{43E}\u{43A} 2D`
 };
 
 
@@ -270,7 +272,7 @@ var $b61325f242fafc7c$exports = {};
 $b61325f242fafc7c$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `Výber farieb`,
+    "colorPicker": `V\xfdber farieb`,
     "twoDimensionalSlider": `2D jazdec`
 };
 
@@ -288,8 +290,8 @@ var $aa8cd83fc8d4982b$exports = {};
 $aa8cd83fc8d4982b$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `Birač boja`,
-    "twoDimensionalSlider": `2D klizač`
+    "colorPicker": `Bira\u{10D} boja`,
+    "twoDimensionalSlider": `2D kliza\u{10D}`
 };
 
 
@@ -297,7 +299,7 @@ var $7c4f4e5bb7c06f1e$exports = {};
 $7c4f4e5bb7c06f1e$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `Färgväljaren`,
+    "colorPicker": `F\xe4rgv\xe4ljaren`,
     "twoDimensionalSlider": `2D-reglage`
 };
 
@@ -306,8 +308,8 @@ var $8045cf930ef745aa$exports = {};
 $8045cf930ef745aa$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `Renk Seçici`,
-    "twoDimensionalSlider": `2D sürgü`
+    "colorPicker": `Renk Se\xe7ici`,
+    "twoDimensionalSlider": `2D s\xfcrg\xfc`
 };
 
 
@@ -315,26 +317,26 @@ var $ee2044a77f24b118$exports = {};
 $ee2044a77f24b118$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `Палітра кольорів`,
-    "twoDimensionalSlider": `Повзунок 2D`
+    "colorPicker": `\u{41F}\u{430}\u{43B}\u{456}\u{442}\u{440}\u{430} \u{43A}\u{43E}\u{43B}\u{44C}\u{43E}\u{440}\u{456}\u{432}`,
+    "twoDimensionalSlider": `\u{41F}\u{43E}\u{432}\u{437}\u{443}\u{43D}\u{43E}\u{43A} 2D`
 };
 
 
 var $4e1dbc65a687dd93$exports = {};
 $4e1dbc65a687dd93$exports = {
-    "colorInputLabel": (args)=>`${args.label}、${args.channelLabel}`,
-    "colorNameAndValue": (args)=>`${args.name}：${args.value}`,
-    "colorPicker": `拾色器`,
-    "twoDimensionalSlider": `2D 滑块`
+    "colorInputLabel": (args)=>`${args.label}\u{3001}${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}\u{FF1A}${args.value}`,
+    "colorPicker": `\u{62FE}\u{8272}\u{5668}`,
+    "twoDimensionalSlider": `2D \u{6ED1}\u{5757}`
 };
 
 
 var $b0fef28529309aa6$exports = {};
 $b0fef28529309aa6$exports = {
-    "colorInputLabel": (args)=>`${args.label}，${args.channelLabel}`,
-    "colorNameAndValue": (args)=>`${args.name}：${args.value}`,
-    "colorPicker": `檢色器`,
-    "twoDimensionalSlider": `2D 滑桿`
+    "colorInputLabel": (args)=>`${args.label}\u{FF0C}${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}\u{FF1A}${args.value}`,
+    "colorPicker": `\u{6AA2}\u{8272}\u{5668}`,
+    "twoDimensionalSlider": `2D \u{6ED1}\u{687F}`
 };
 
 
@@ -668,9 +670,13 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
             state.setDragging(true);
         },
         onMove ({ deltaX: deltaX, deltaY: deltaY, pointerType: pointerType, shiftKey: shiftKey }) {
+            var _containerRef_current;
             let { incrementX: incrementX, decrementX: decrementX, incrementY: incrementY, decrementY: decrementY, xChannelPageStep: xChannelPageStep, xChannelStep: xChannelStep, yChannelPageStep: yChannelPageStep, yChannelStep: yChannelStep, getThumbPosition: getThumbPosition, setColorFromPoint: setColorFromPoint } = state;
             if (currentPosition.current == null) currentPosition.current = getThumbPosition();
-            let { width: width, height: height } = containerRef.current.getBoundingClientRect();
+            let { width: width, height: height } = ((_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.getBoundingClientRect()) || {
+                width: 0,
+                height: 0
+            };
             let valueChanged = deltaX !== 0 || deltaY !== 0;
             if (pointerType === "keyboard") {
                 let deltaXValue = shiftKey && xChannelPageStep > xChannelStep ? xChannelPageStep : xChannelStep;
@@ -690,7 +696,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
             }
         },
         onMoveEnd () {
-            isOnColorArea.current = undefined;
+            isOnColorArea.current = false;
             state.setDragging(false);
             let input = focusedInput === "x" ? inputXRef : inputYRef;
             focusInput(input);
@@ -1098,7 +1104,7 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
             } else state.setHueFromPoint(currentPosition.current.x, currentPosition.current.y, thumbRadius);
         },
         onMoveEnd () {
-            isOnTrack.current = undefined;
+            isOnTrack.current = false;
             state.setDragging(false);
             focusInput();
         }
@@ -1297,9 +1303,10 @@ function $b4a0a4fdc900495e$var$circlePath(cx, cy, r) {
 
 
 
+
 function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
-    let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired } = props;
-    let { colorValue: colorValue, inputValue: inputValue, commit: commit, increment: increment, decrement: decrement, incrementToMax: incrementToMax, decrementToMin: decrementToMin } = state;
+    let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, validationBehavior: validationBehavior = "aria" } = props;
+    let { colorValue: colorValue, inputValue: inputValue, increment: increment, decrement: decrement, incrementToMax: incrementToMax, decrementToMin: decrementToMin, commit: commit } = state;
     let inputId = (0, $7KHxM$useId)();
     let { spinButtonProps: spinButtonProps } = (0, $7KHxM$useSpinButton)({
         isDisabled: isDisabled,
@@ -1336,26 +1343,30 @@ function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
     let onChange = (value)=>{
         if (state.validate(value)) state.setInputValue(value);
     };
-    let { labelProps: labelProps, inputProps: inputProps } = (0, $7KHxM$useFormattedTextField)((0, $7KHxM$mergeProps)(props, {
+    let { inputProps: inputProps, ...otherProps } = (0, $7KHxM$useFormattedTextField)((0, $7KHxM$mergeProps)(props, {
         id: inputId,
         value: inputValue,
         defaultValue: undefined,
+        validate: undefined,
+        [(0, $7KHxM$privateValidationStateProp)]: state,
         type: "text",
         autoComplete: "off",
         onChange: onChange
     }), state, ref);
+    inputProps = (0, $7KHxM$mergeProps)(inputProps, spinButtonProps, focusWithinProps, {
+        role: "textbox",
+        "aria-valuemax": null,
+        "aria-valuemin": null,
+        "aria-valuenow": null,
+        "aria-valuetext": null,
+        autoCorrect: "off",
+        spellCheck: "false",
+        onBlur: commit
+    });
+    if (validationBehavior === "native") inputProps["aria-required"] = undefined;
     return {
-        labelProps: labelProps,
-        inputProps: (0, $7KHxM$mergeProps)(inputProps, spinButtonProps, focusWithinProps, {
-            role: "textbox",
-            "aria-valuemax": null,
-            "aria-valuemin": null,
-            "aria-valuenow": null,
-            "aria-valuetext": null,
-            autoCorrect: "off",
-            spellCheck: "false",
-            onBlur: commit
-        })
+        inputProps: inputProps,
+        ...otherProps
     };
 }