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

package/dist/main.js

@@ -4,12 +4,15 @@ var $kZqDi$reactariainteractions = require("@react-aria/interactions");
 var $kZqDi$reactariai18n = require("@react-aria/i18n");
 var $kZqDi$reactariavisuallyhidden = require("@react-aria/visually-hidden");
 var $kZqDi$reactariaslider = require("@react-aria/slider");
+var $kZqDi$reactstatelyform = require("@react-stately/form");
 var $kZqDi$reactariatextfield = require("@react-aria/textfield");
 var $kZqDi$reactariaspinbutton = require("@react-aria/spinbutton");
 
+
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
+
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
@@ -44,8 +47,8 @@ var $f141a15c3076a67b$exports = {};
 $f141a15c3076a67b$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`
 };
 
 
@@ -53,8 +56,8 @@ var $435ac2a9fdd2ae5e$exports = {};
 $435ac2a9fdd2ae5e$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}`
 };
 
 
@@ -62,8 +65,8 @@ var $6b29758b432284f5$exports = {};
 $6b29758b432284f5$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`
 };
 
 
@@ -71,7 +74,7 @@ var $357597bcf4afd6fb$exports = {};
 $357597bcf4afd6fb$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `Farvevælger`,
+    "colorPicker": `Farvev\xe6lger`,
     "twoDimensionalSlider": `2D-skyder`
 };
 
@@ -80,7 +83,7 @@ var $ddc6333960e2b591$exports = {};
 $ddc6333960e2b591$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `Farbwähler`,
+    "colorPicker": `Farbw\xe4hler`,
     "twoDimensionalSlider": `2D-Schieberegler`
 };
 
@@ -89,8 +92,8 @@ var $417ee93d3ca474c0$exports = {};
 $417ee93d3ca474c0$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`
 };
 
 
@@ -116,7 +119,7 @@ var $860f86d6eae22cba$exports = {};
 $860f86d6eae22cba$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `Värvivalija`,
+    "colorPicker": `V\xe4rvivalija`,
     "twoDimensionalSlider": `2D-liugur`
 };
 
@@ -125,17 +128,17 @@ var $8525d3c77b8a51b0$exports = {};
 $8525d3c77b8a51b0$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 $8240fe6825e900ec$exports = {};
 $8240fe6825e900ec$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`
 };
 
 
@@ -143,8 +146,8 @@ var $377849238307c673$exports = {};
 $377849238307c673$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}`
 };
 
 
@@ -153,7 +156,7 @@ $5a6f44e0ec14b083$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Odabir boje`,
-    "twoDimensionalSlider": `2D klizač`
+    "twoDimensionalSlider": `2D kliza\u{10D}`
 };
 
 
@@ -161,8 +164,8 @@ var $82327d6e71e3e273$exports = {};
 $82327d6e71e3e273$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`
 };
 
 
@@ -177,10 +180,10 @@ $b1e297275c248ab8$exports = {
 
 var $b39c9f2638b4d2b9$exports = {};
 $b39c9f2638b4d2b9$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}`
 };
 
 
@@ -188,8 +191,8 @@ var $2d2fbf4195848a62$exports = {};
 $2d2fbf4195848a62$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}`
 };
 
 
@@ -197,7 +200,7 @@ var $ea88350d0828fa2c$exports = {};
 $ea88350d0828fa2c$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `Spalvų parinkiklis`,
+    "colorPicker": `Spalv\u{173} parinkiklis`,
     "twoDimensionalSlider": `2D slankiklis`
 };
 
@@ -206,8 +209,8 @@ var $0e0acd541630120a$exports = {};
 $0e0acd541630120a$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`
 };
 
 
@@ -233,7 +236,7 @@ var $750d83f83c5f38d4$exports = {};
 $750d83f83c5f38d4$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`
 };
 
@@ -269,8 +272,8 @@ var $8849a15ecc435984$exports = {};
 $8849a15ecc435984$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`
 };
 
 
@@ -278,7 +281,7 @@ var $5192372f064be783$exports = {};
 $5192372f064be783$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `Výber farieb`,
+    "colorPicker": `V\xfdber farieb`,
     "twoDimensionalSlider": `2D jazdec`
 };
 
@@ -296,8 +299,8 @@ var $9795aa59b4ad40ed$exports = {};
 $9795aa59b4ad40ed$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}`
 };
 
 
@@ -305,7 +308,7 @@ var $9ebaa0b485f13e4d$exports = {};
 $9ebaa0b485f13e4d$exports = {
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
     "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
-    "colorPicker": `Färgväljaren`,
+    "colorPicker": `F\xe4rgv\xe4ljaren`,
     "twoDimensionalSlider": `2D-reglage`
 };
 
@@ -314,8 +317,8 @@ var $ad58e2e4e0f2e750$exports = {};
 $ad58e2e4e0f2e750$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`
 };
 
 
@@ -323,26 +326,26 @@ var $dafc19306f8b2dfc$exports = {};
 $dafc19306f8b2dfc$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 $d31a8b80af5acc16$exports = {};
 $d31a8b80af5acc16$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 $7377d28aec5fa200$exports = {};
 $7377d28aec5fa200$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}`
 };
 
 
@@ -676,9 +679,13 @@ function $47925bd68062ac17$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;
@@ -698,7 +705,7 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
             }
         },
         onMoveEnd () {
-            isOnColorArea.current = undefined;
+            isOnColorArea.current = false;
             state.setDragging(false);
             let input = focusedInput === "x" ? inputXRef : inputYRef;
             focusInput(input);
@@ -1106,7 +1113,7 @@ function $1d29bf243d4a9a53$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();
         }
@@ -1305,9 +1312,10 @@ function $1d29bf243d4a9a53$var$circlePath(cx, cy, r) {
 
 
 
+
 function $58c850037bc7a7ce$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, $kZqDi$reactariautils.useId)();
     let { spinButtonProps: spinButtonProps } = (0, $kZqDi$reactariaspinbutton.useSpinButton)({
         isDisabled: isDisabled,
@@ -1344,26 +1352,30 @@ function $58c850037bc7a7ce$export$77e32ca575a28fdf(props, state, ref) {
     let onChange = (value)=>{
         if (state.validate(value)) state.setInputValue(value);
     };
-    let { labelProps: labelProps, inputProps: inputProps } = (0, $kZqDi$reactariatextfield.useFormattedTextField)((0, $kZqDi$reactariautils.mergeProps)(props, {
+    let { inputProps: inputProps, ...otherProps } = (0, $kZqDi$reactariatextfield.useFormattedTextField)((0, $kZqDi$reactariautils.mergeProps)(props, {
         id: inputId,
         value: inputValue,
         defaultValue: undefined,
+        validate: undefined,
+        [(0, $kZqDi$reactstatelyform.privateValidationStateProp)]: state,
         type: "text",
         autoComplete: "off",
         onChange: onChange
     }), state, ref);
+    inputProps = (0, $kZqDi$reactariautils.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, $kZqDi$reactariautils.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
     };
 }