@react-spectrum/color 3.0.0-beta.15 → 3.0.0-beta.17

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 (11) hide show
  1. package/dist/main.css +1 -1
  2. package/dist/main.js +28 -20
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +29 -21
  5. package/dist/module.js.map +1 -1
  6. package/dist/types.d.ts.map +1 -1
  7. package/package.json +18 -18
  8. package/src/ColorArea.tsx +2 -2
  9. package/src/ColorField.tsx +3 -3
  10. package/src/ColorSlider.tsx +21 -19
  11. package/src/ColorWheel.tsx +2 -2
package/dist/main.css CHANGED
@@ -1 +1 @@
1
- .spectrum-ColorHandle_5a9f41.is-focused_5a9f41,.spectrum-ColorHandle_5a9f41.focus-ring_5a9f41{width:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);height:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);margin-left:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)))}.spectrum-ColorHandle_5a9f41{z-index:1;box-sizing:border-box;width:var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200));height:var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200));margin-left:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))/2);margin-top:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))/2);border-width:var(--spectrum-colorhandle-inner-border-size,var(--spectrum-global-dimension-static-size-25));background-size:var(--spectrum-global-dimension-static-size-200,16px)var(--spectrum-global-dimension-static-size-200,16px);background-position:calc(-1*var(--spectrum-global-dimension-static-size-25,2px))calc(-1*var(--spectrum-global-dimension-static-size-25,2px)),calc(-1*var(--spectrum-global-dimension-static-size-25,2px))calc(var(--spectrum-global-dimension-static-size-100,8px) + -1*var(--spectrum-global-dimension-static-size-25,2px)),calc(var(--spectrum-global-dimension-static-size-100,8px) + -1*var(--spectrum-global-dimension-static-size-25,2px))calc(-1*var(--spectrum-global-dimension-static-size-100,8px) + -1*var(--spectrum-global-dimension-static-size-25,2px)),calc(-1*var(--spectrum-global-dimension-static-size-100,8px) + -1*var(--spectrum-global-dimension-static-size-25,2px))calc(-1*var(--spectrum-global-dimension-static-size-25,2px));transition:width var(--spectrum-global-animation-duration-100,130ms)ease-in-out,height var(--spectrum-global-animation-duration-100,130ms)ease-in-out,border-width var(--spectrum-global-animation-duration-100,130ms)ease-in-out,margin-left var(--spectrum-global-animation-duration-100,130ms)ease-in-out,margin-top var(--spectrum-global-animation-duration-100,130ms)ease-in-out;border-style:solid;display:block;position:absolute}.spectrum-ColorHandle_5a9f41,.spectrum-ColorHandle_5a9f41:after{border-radius:100%}.spectrum-ColorHandle_5a9f41:after{content:"";left:calc(50% - var(--spectrum-global-dimension-size-300)/2);top:calc(50% - var(--spectrum-global-dimension-size-300)/2);width:var(--spectrum-global-dimension-size-300);height:var(--spectrum-global-dimension-size-300);display:block;position:absolute}.spectrum-ColorHandle_5a9f41.is-disabled_5a9f41{pointer-events:none}.spectrum-ColorHandle-color_5a9f41{width:100%;height:100%;border-radius:100%}.spectrum-ColorHandle_5a9f41{border-color:var(--spectrum-colorhandle-inner-border-color,var(--spectrum-global-color-static-white));box-shadow:0 0 0 var(--spectrum-colorhandle-outer-border-size,var(--spectrum-global-dimension-static-size-10))#0000006b;background-color:var(--spectrum-global-color-static-white,#fff);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc)75.5%),linear-gradient(45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc)75.5%),linear-gradient(-45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc)25.5%,transparent 25.5%),linear-gradient(45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc)25.5%,transparent 25.5%)}.spectrum-ColorHandle_5a9f41.is-disabled_5a9f41{border-color:var(--spectrum-colorhandle-inner-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-colorhandle-fill-color-disabled,var(--spectrum-global-color-gray-300));box-shadow:none}.spectrum-ColorHandle_5a9f41.is-disabled_5a9f41 .spectrum-ColorHandle-color_5a9f41{display:none}.spectrum-ColorHandle-color_5a9f41{box-shadow:inset 0 0 0 var(--spectrum-colorhandle-outer-border-size,var(--spectrum-global-dimension-static-size-10))#0000006b}@media (forced-colors:active){.spectrum-ColorHandle_5a9f41{forced-color-adjust:none;--spectrum-colorhandle-inner-border-color-disabled:GrayText;--spectrum-colorhandle-fill-color-disabled:GrayText;--spectrum-colorhandle-inner-border-color:ButtonText;--spectrum-colorhandle-outer-border-color:ButtonFace}}.spectrum-ColorLoupe_c818a8{width:calc(var(--spectrum-colorloupe-width,var(--spectrum-global-dimension-static-size-600)) + var(--spectrum-colorhandle-inner-border-size,var(--spectrum-global-dimension-static-size-25))*2);height:calc(var(--spectrum-colorloupe-height,var(--spectrum-global-dimension-static-size-800)) + var(--spectrum-colorhandle-inner-border-size,var(--spectrum-global-dimension-static-size-25))*2);transform:translate(0,var(--spectrum-global-dimension-static-size-100,8px));opacity:0;transform-origin:bottom;bottom:calc(50% + var(--spectrum-global-dimension-static-size-200,16px));left:calc(50% - (var(--spectrum-colorloupe-width,var(--spectrum-global-dimension-static-size-600)) + var(--spectrum-colorhandle-inner-border-size,var(--spectrum-global-dimension-static-size-25))*2)/2);pointer-events:none;transition:transform .1s ease-in-out,opacity .125s ease-in-out;position:absolute}.spectrum-ColorLoupe_c818a8.is-open_c818a8{opacity:1;z-index:2;transform:translate(0)}.spectrum-ColorLoupe-outer_c818a8{stroke-width:var(--spectrum-colorloupe-outer-border-size,var(--spectrum-global-dimension-static-size-10));fill:var(--spectrum-colorloupe-inner-border-color,var(--spectrum-global-color-static-white));stroke:var(--spectrum-colorloupe-outer-border-color,#3232321a)}.spectrum-ColorLoupe-inner-background_c818a8{fill:var(--spectrum-global-color-static-white,#fff)}.spectrum-ColorLoupe-inner-checker_c818a8{fill:var(--spectrum-global-color-static-gray-500,#bcbcbc)}@media (forced-colors:active){.spectrum-ColorLoupe_c818a8{forced-color-adjust:none;--spectrum-colorloupe-inner-border-color:ButtonText;--spectrum-colorloupe-outer-border-color:ButtonFace}}.spectrum-ColorArea_35e2c0{width:var(--spectrum-colorarea-default-width,var(--spectrum-global-dimension-size-2400));height:var(--spectrum-colorarea-default-height,var(--spectrum-global-dimension-size-2400));min-width:var(--spectrum-colorarea-min-width,var(--spectrum-global-dimension-size-800));min-height:var(--spectrum-colorarea-min-height,var(--spectrum-global-dimension-size-800));border-radius:var(--spectrum-colorarea-border-radius,var(--spectrum-alias-border-radius-regular));cursor:default;-webkit-user-select:none;user-select:none;display:inline-block;position:relative}.spectrum-ColorArea_35e2c0.is-focused_35e2c0,.spectrum-ColorArea_35e2c0.focus-ring_35e2c0{z-index:2}.spectrum-ColorArea_35e2c0.is-focused_35e2c0 .spectrum-ColorArea-handle_35e2c0,.spectrum-ColorArea_35e2c0.focus-ring_35e2c0 .spectrum-ColorArea-handle_35e2c0{width:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);height:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);margin-left:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)))}.spectrum-ColorArea_35e2c0.is-disabled_35e2c0{pointer-events:none}.spectrum-ColorArea_35e2c0:before{content:"";z-index:1;border-radius:var(--spectrum-colorarea-border-radius,var(--spectrum-alias-border-radius-regular));position:absolute;top:0;bottom:0;left:0;right:0}.spectrum-ColorArea-handle_35e2c0{top:0;left:0}.spectrum-ColorArea-handle_35e2c0:focus-within{z-index:2}.spectrum-ColorArea-gradient_35e2c0{width:100%;height:100%;border-radius:var(--spectrum-colorarea-border-radius,var(--spectrum-alias-border-radius-regular))}.spectrum-ColorArea-slider_35e2c0{opacity:.0001;width:100%;height:100%;z-index:0;pointer-events:none;margin:0;position:absolute;top:0;left:0}.spectrum-ColorArea_35e2c0:before{box-shadow:inset 0 0 0 var(--spectrum-colorarea-border-size,var(--spectrum-alias-border-size-thin))var(--spectrum-colorarea-border-color)}.spectrum-ColorArea-gradient_35e2c0,.spectrum-ColorHandle-color_35e2c0{forced-color-adjust:none}.spectrum-ColorArea_35e2c0.is-disabled_35e2c0{background:var(--spectrum-colorarea-fill-color-disabled,var(--spectrum-global-color-gray-300))}.spectrum-ColorArea_35e2c0.is-disabled_35e2c0:before{box-shadow:inset 0 0 0 var(--spectrum-colorarea-border-size,var(--spectrum-alias-border-size-thin))var(--spectrum-colorarea-border-color-disabled,var(--spectrum-global-color-gray-300))}.spectrum-ColorArea_35e2c0.is-disabled_35e2c0 .spectrum-ColorArea-gradient_35e2c0{display:none}@media (forced-colors:active){.spectrum-ColorArea_35e2c0{--spectrum-colorarea-fill-color-disabled:GrayText;forced-color-adjust:none}.spectrum-ColorArea_35e2c0.is-disabled_35e2c0{forced-color-adjust:none}}.spectrum-ColorWheel_31462a.is-focused_31462a .spectrum-ColorWheel-handle_31462a{width:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);height:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);margin-left:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)))}.spectrum-ColorWheel-slider_31462a{opacity:.0001;width:100%;height:100%;z-index:0;pointer-events:none;margin:0;position:absolute;top:0;left:0}.spectrum-ColorWheel_31462a{width:calc(var(--spectrum-global-dimension-size-125)*16);height:calc(var(--spectrum-global-dimension-size-125)*16);--spectrum-colorwheel-track-thickness:var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300));-webkit-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;cursor:default;border-radius:100%;display:block;position:relative}.spectrum-ColorWheel_31462a .spectrum-ColorWheel-handle_31462a{margin:0}.spectrum-ColorWheel_31462a.is-focused_31462a{z-index:2}.spectrum-ColorWheel_31462a.is-disabled_31462a{pointer-events:none}.spectrum-ColorWheel_31462a.is-dragged_31462a{z-index:2}.spectrum-ColorWheel-gradient_31462a{z-index:0;width:calc(var(--spectrum-global-dimension-size-125)*16);height:calc(var(--spectrum-global-dimension-size-125)*16);position:relative}.spectrum-ColorWheel-gradient_31462a:before,.spectrum-ColorWheel-gradient_31462a:after{content:"";border-width:var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin));border-radius:100%;border-style:solid;position:absolute}.spectrum-ColorWheel-gradient_31462a:before{top:0;bottom:0;left:0;right:0}.spectrum-ColorWheel-gradient_31462a:after{top:calc(var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)));left:calc(var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)));bottom:calc(var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)));right:calc(var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)))}.spectrum-ColorWheel_31462a.is-disabled_31462a .spectrum-ColorWheel-gradient_31462a{background:var(--spectrum-colorwheel-fill-color-disabled,var(--spectrum-global-color-gray-300))!important}.spectrum-ColorWheel_31462a.is-disabled_31462a .spectrum-ColorWheel-gradient_31462a:before,.spectrum-ColorWheel_31462a.is-disabled_31462a .spectrum-ColorWheel-gradient_31462a:after{border-color:var(--spectrum-colorwheel-border-color-disabled,var(--spectrum-global-color-gray-300))}.spectrum-ColorWheel_31462a.is-disabled_31462a .spectrum-ColorWheel-segment_31462a{display:none}.spectrum-ColorWheel-gradient_31462a:before,.spectrum-ColorWheel-gradient_31462a:after{border-color:var(--spectrum-colorarea-border-color)}@media (forced-colors:active){.spectrum-ColorWheel_31462a{forced-color-adjust:none;--spectrum-colorwheel-fill-color-disabled:GrayText;--spectrum-colorwheel-border-color-disabled:GrayText;--spectrum-colorwheel-border-color:ButtonText;--spectrum-colorarea-border-color:ButtonText}}.spectrum-ColorSlider_a5bb06.is-focused_a5bb06 .spectrum-ColorSlider-handle_a5bb06{width:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);height:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);margin-left:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)))}.spectrum-ColorSlider-slider_a5bb06{opacity:.0001;width:100%;height:100%;z-index:0;pointer-events:none;margin:0;position:absolute;top:0;left:0}.spectrum-ColorSlider-container--horizontal_a5bb06{width:var(--spectrum-colorslider-default-length,var(--spectrum-global-dimension-size-2400))}.spectrum-ColorSlider-container--vertical_a5bb06{height:var(--spectrum-colorslider-default-length,var(--spectrum-global-dimension-size-2400));flex-direction:column;display:flex}.spectrum-ColorSlider_a5bb06{width:100%;height:var(--spectrum-colorslider-height,var(--spectrum-global-dimension-size-300));border-radius:var(--spectrum-colorslider-border-radius,var(--spectrum-alias-border-radius-regular));-webkit-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;cursor:default;display:block;position:relative}.spectrum-ColorSlider_a5bb06:before{content:"";z-index:-1;border-radius:var(--spectrum-colorslider-border-radius,var(--spectrum-alias-border-radius-regular));background-size:var(--spectrum-global-dimension-static-size-200,16px)var(--spectrum-global-dimension-static-size-200,16px);background-position:0 0,0 var(--spectrum-global-dimension-static-size-100,8px),var(--spectrum-global-dimension-static-size-100,8px)calc(-1*var(--spectrum-global-dimension-static-size-100,8px)),calc(-1*var(--spectrum-global-dimension-static-size-100,8px))0;position:absolute;top:0;bottom:0;left:0;right:0}.spectrum-ColorSlider_a5bb06.is-focused_a5bb06{z-index:2}.spectrum-ColorSlider_a5bb06.is-disabled_a5bb06{pointer-events:none}.spectrum-ColorSlider--vertical_a5bb06{width:var(--spectrum-colorslider-vertical-width,var(--spectrum-global-dimension-size-300));flex:1;display:inline-block}.spectrum-ColorSlider--vertical_a5bb06 .spectrum-ColorSlider-handle_a5bb06{top:0;left:50%}.spectrum-ColorSlider-handle_a5bb06{top:50%;left:0}.spectrum-ColorSlider-handle_a5bb06:after{width:var(--spectrum-global-dimension-size-300);height:var(--spectrum-global-dimension-size-300);border-radius:0%}.spectrum-ColorSlider_a5bb06{background-color:var(--spectrum-global-color-static-white,#fff);box-shadow:inset 0 0 0 var(--spectrum-colorslider-border-size,var(--spectrum-alias-border-size-thin))var(--spectrum-colorarea-border-color)}.spectrum-ColorSlider_a5bb06:before{background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc)75.5%),linear-gradient(45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc)75.5%),linear-gradient(-45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc)25.5%,transparent 25.5%),linear-gradient(45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc)25.5%,transparent 25.5%)}.spectrum-ColorSlider_a5bb06.is-disabled_a5bb06{box-shadow:inset 0 0 0 var(--spectrum-colorslider-border-size,var(--spectrum-alias-border-size-thin))var(--spectrum-colorslider-border-color-disabled,var(--spectrum-global-color-gray-300));background:var(--spectrum-colorslider-fill-color-disabled,var(--spectrum-global-color-gray-300))!important}.spectrum-ColorSlider_a5bb06 .spectrum-ColorSlider-handle_a5bb06{margin:0}@media (forced-colors:active){.spectrum-ColorSlider_a5bb06{forced-color-adjust:none;--spectrum-colorslider-fill-color-disabled:GrayText;--spectrum-colorslider-border-color-disabled:GrayText;--spectrum-colorslider-border-color:ButtonText;--spectrum-colorarea-border-color:ButtonText}}[dir=ltr] .react-spectrum-ColorField-input_7bde3a{text-align:left}[dir=rtl] .react-spectrum-ColorField-input_7bde3a{text-align:right}.react-spectrum-ColorField-input_7bde3a{direction:ltr}
1
+ .spectrum-ColorHandle_5a9f41.is-focused_5a9f41,.spectrum-ColorHandle_5a9f41.focus-ring_5a9f41{width:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);height:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);margin-left:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)))}.spectrum-ColorHandle_5a9f41{z-index:1;box-sizing:border-box;width:var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200));height:var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200));margin-left:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))/2);margin-top:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))/2);border-width:var(--spectrum-colorhandle-inner-border-size,var(--spectrum-global-dimension-static-size-25));background-size:var(--spectrum-global-dimension-static-size-200,16px)var(--spectrum-global-dimension-static-size-200,16px);background-position:calc(-1*var(--spectrum-global-dimension-static-size-25,2px))calc(-1*var(--spectrum-global-dimension-static-size-25,2px)),calc(-1*var(--spectrum-global-dimension-static-size-25,2px))calc(var(--spectrum-global-dimension-static-size-100,8px) + -1*var(--spectrum-global-dimension-static-size-25,2px)),calc(var(--spectrum-global-dimension-static-size-100,8px) + -1*var(--spectrum-global-dimension-static-size-25,2px))calc(-1*var(--spectrum-global-dimension-static-size-100,8px) + -1*var(--spectrum-global-dimension-static-size-25,2px)),calc(-1*var(--spectrum-global-dimension-static-size-100,8px) + -1*var(--spectrum-global-dimension-static-size-25,2px))calc(-1*var(--spectrum-global-dimension-static-size-25,2px));transition:width var(--spectrum-global-animation-duration-100,130ms)ease-in-out,height var(--spectrum-global-animation-duration-100,130ms)ease-in-out,border-width var(--spectrum-global-animation-duration-100,130ms)ease-in-out,margin-left var(--spectrum-global-animation-duration-100,130ms)ease-in-out,margin-top var(--spectrum-global-animation-duration-100,130ms)ease-in-out;border-style:solid;display:block;position:absolute}.spectrum-ColorHandle_5a9f41,.spectrum-ColorHandle_5a9f41:after{border-radius:100%}.spectrum-ColorHandle_5a9f41:after{content:"";left:calc(50% - var(--spectrum-global-dimension-size-300)/2);top:calc(50% - var(--spectrum-global-dimension-size-300)/2);width:var(--spectrum-global-dimension-size-300);height:var(--spectrum-global-dimension-size-300);display:block;position:absolute}.spectrum-ColorHandle_5a9f41.is-disabled_5a9f41{pointer-events:none}.spectrum-ColorHandle-color_5a9f41{width:100%;height:100%;border-radius:100%}.spectrum-ColorHandle_5a9f41{border-color:var(--spectrum-colorhandle-inner-border-color,var(--spectrum-global-color-static-white));box-shadow:0 0 0 var(--spectrum-colorhandle-outer-border-size,var(--spectrum-global-dimension-static-size-10))#0000006b;background-color:var(--spectrum-global-color-static-white,#fff);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc)75.5%),linear-gradient(45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc)75.5%),linear-gradient(-45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc)25.5%,transparent 25.5%),linear-gradient(45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc)25.5%,transparent 25.5%)}.spectrum-ColorHandle_5a9f41.is-disabled_5a9f41{border-color:var(--spectrum-colorhandle-inner-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-colorhandle-fill-color-disabled,var(--spectrum-global-color-gray-300));box-shadow:none}.spectrum-ColorHandle_5a9f41.is-disabled_5a9f41 .spectrum-ColorHandle-color_5a9f41{display:none}.spectrum-ColorHandle-color_5a9f41{box-shadow:inset 0 0 0 var(--spectrum-colorhandle-outer-border-size,var(--spectrum-global-dimension-static-size-10))#0000006b}@media (forced-colors:active){.spectrum-ColorHandle_5a9f41{forced-color-adjust:none;--spectrum-colorhandle-inner-border-color-disabled:GrayText;--spectrum-colorhandle-fill-color-disabled:GrayText;--spectrum-colorhandle-inner-border-color:ButtonText;--spectrum-colorhandle-outer-border-color:ButtonFace}}.spectrum-ColorLoupe_c818a8{width:calc(var(--spectrum-colorloupe-width,var(--spectrum-global-dimension-static-size-600)) + var(--spectrum-colorhandle-inner-border-size,var(--spectrum-global-dimension-static-size-25))*2);height:calc(var(--spectrum-colorloupe-height,var(--spectrum-global-dimension-static-size-800)) + var(--spectrum-colorhandle-inner-border-size,var(--spectrum-global-dimension-static-size-25))*2);transform:translate(0,var(--spectrum-global-dimension-static-size-100,8px));opacity:0;transform-origin:bottom;bottom:calc(50% + var(--spectrum-global-dimension-static-size-200,16px));left:calc(50% - (var(--spectrum-colorloupe-width,var(--spectrum-global-dimension-static-size-600)) + var(--spectrum-colorhandle-inner-border-size,var(--spectrum-global-dimension-static-size-25))*2)/2);pointer-events:none;transition:transform .1s ease-in-out,opacity .125s ease-in-out;position:absolute}.spectrum-ColorLoupe_c818a8.is-open_c818a8{opacity:1;z-index:2;transform:translate(0)}.spectrum-ColorLoupe-outer_c818a8{stroke-width:var(--spectrum-colorloupe-outer-border-size,var(--spectrum-global-dimension-static-size-10));fill:var(--spectrum-colorloupe-inner-border-color,var(--spectrum-global-color-static-white));stroke:var(--spectrum-colorloupe-outer-border-color,#3232321a)}.spectrum-ColorLoupe-inner-background_c818a8{fill:var(--spectrum-global-color-static-white,#fff)}.spectrum-ColorLoupe-inner-checker_c818a8{fill:var(--spectrum-global-color-static-gray-500,#bcbcbc)}@media (forced-colors:active){.spectrum-ColorLoupe_c818a8{forced-color-adjust:none;--spectrum-colorloupe-inner-border-color:ButtonText;--spectrum-colorloupe-outer-border-color:ButtonFace}}.spectrum-ColorArea_35e2c0{width:var(--spectrum-colorarea-default-width,var(--spectrum-global-dimension-size-2400));height:var(--spectrum-colorarea-default-height,var(--spectrum-global-dimension-size-2400));min-width:var(--spectrum-colorarea-min-width,var(--spectrum-global-dimension-size-800));min-height:var(--spectrum-colorarea-min-height,var(--spectrum-global-dimension-size-800));border-radius:var(--spectrum-colorarea-border-radius,var(--spectrum-alias-border-radius-regular));cursor:default;-webkit-user-select:none;user-select:none;display:inline-block;position:relative}.spectrum-ColorArea_35e2c0.is-focused_35e2c0,.spectrum-ColorArea_35e2c0.focus-ring_35e2c0{z-index:2}.spectrum-ColorArea_35e2c0.is-focused_35e2c0 .spectrum-ColorArea-handle_35e2c0,.spectrum-ColorArea_35e2c0.focus-ring_35e2c0 .spectrum-ColorArea-handle_35e2c0{width:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);height:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);margin-left:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)))}.spectrum-ColorArea_35e2c0.is-disabled_35e2c0{pointer-events:none}.spectrum-ColorArea_35e2c0:before{content:"";z-index:1;border-radius:var(--spectrum-colorarea-border-radius,var(--spectrum-alias-border-radius-regular));position:absolute;top:0;bottom:0;left:0;right:0}.spectrum-ColorArea-handle_35e2c0{top:0;left:0}.spectrum-ColorArea-handle_35e2c0:focus-within{z-index:2}.spectrum-ColorArea-gradient_35e2c0{width:100%;height:100%;border-radius:var(--spectrum-colorarea-border-radius,var(--spectrum-alias-border-radius-regular))}.spectrum-ColorArea-slider_35e2c0{opacity:.0001;width:100%;height:100%;z-index:0;pointer-events:none;margin:0;position:absolute;top:0;left:0}.spectrum-ColorArea_35e2c0:before{box-shadow:inset 0 0 0 var(--spectrum-colorarea-border-size,var(--spectrum-alias-border-size-thin))var(--spectrum-colorarea-border-color)}.spectrum-ColorArea-gradient_35e2c0,.spectrum-ColorHandle-color_35e2c0{forced-color-adjust:none}.spectrum-ColorArea_35e2c0.is-disabled_35e2c0{background:var(--spectrum-colorarea-fill-color-disabled,var(--spectrum-global-color-gray-300))}.spectrum-ColorArea_35e2c0.is-disabled_35e2c0:before{box-shadow:inset 0 0 0 var(--spectrum-colorarea-border-size,var(--spectrum-alias-border-size-thin))var(--spectrum-colorarea-border-color-disabled,var(--spectrum-global-color-gray-300))}.spectrum-ColorArea_35e2c0.is-disabled_35e2c0 .spectrum-ColorArea-gradient_35e2c0{display:none}@media (forced-colors:active){.spectrum-ColorArea_35e2c0{--spectrum-colorarea-fill-color-disabled:GrayText;forced-color-adjust:none}.spectrum-ColorArea_35e2c0.is-disabled_35e2c0{forced-color-adjust:none}}.spectrum-ColorWheel_31462a.spectrum-ColorWheel_31462a.is-focused_31462a .spectrum-ColorWheel-handle_31462a{width:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);height:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);margin-left:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)))}.spectrum-ColorWheel-slider_31462a{opacity:.0001;width:100%;height:100%;z-index:0;pointer-events:none;margin:0;position:absolute;top:0;left:0}.spectrum-ColorWheel_31462a.spectrum-ColorWheel_31462a{width:calc(var(--spectrum-global-dimension-size-125)*16);height:calc(var(--spectrum-global-dimension-size-125)*16);--spectrum-colorwheel-track-thickness:var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300));-webkit-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;cursor:default;border-radius:100%;display:block;position:relative}.spectrum-ColorWheel_31462a.spectrum-ColorWheel_31462a .spectrum-ColorWheel-handle_31462a{margin:0}.spectrum-ColorWheel_31462a.spectrum-ColorWheel_31462a.is-focused_31462a{z-index:2}.spectrum-ColorWheel_31462a.spectrum-ColorWheel_31462a.is-disabled_31462a{pointer-events:none}.spectrum-ColorWheel_31462a.spectrum-ColorWheel_31462a.is-dragged_31462a{z-index:2}.spectrum-ColorWheel-gradient_31462a{z-index:0;width:calc(var(--spectrum-global-dimension-size-125)*16);height:calc(var(--spectrum-global-dimension-size-125)*16);position:relative}.spectrum-ColorWheel-gradient_31462a:before,.spectrum-ColorWheel-gradient_31462a:after{content:"";border-width:var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin));border-radius:100%;border-style:solid;position:absolute}.spectrum-ColorWheel-gradient_31462a:before{top:0;bottom:0;left:0;right:0}.spectrum-ColorWheel-gradient_31462a:after{top:calc(var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)));left:calc(var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)));bottom:calc(var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)));right:calc(var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)))}.spectrum-ColorWheel_31462a.is-disabled_31462a .spectrum-ColorWheel-gradient_31462a{background:var(--spectrum-colorwheel-fill-color-disabled,var(--spectrum-global-color-gray-300))!important}.spectrum-ColorWheel_31462a.is-disabled_31462a .spectrum-ColorWheel-gradient_31462a:before,.spectrum-ColorWheel_31462a.is-disabled_31462a .spectrum-ColorWheel-gradient_31462a:after{border-color:var(--spectrum-colorwheel-border-color-disabled,var(--spectrum-global-color-gray-300))}.spectrum-ColorWheel_31462a.is-disabled_31462a .spectrum-ColorWheel-segment_31462a{display:none}.spectrum-ColorWheel-gradient_31462a:before,.spectrum-ColorWheel-gradient_31462a:after{border-color:var(--spectrum-colorarea-border-color)}@media (forced-colors:active){.spectrum-ColorWheel_31462a{forced-color-adjust:none;--spectrum-colorwheel-fill-color-disabled:GrayText;--spectrum-colorwheel-border-color-disabled:GrayText;--spectrum-colorwheel-border-color:ButtonText;--spectrum-colorarea-border-color:ButtonText}}.spectrum-ColorSlider_a5bb06.is-focused_a5bb06 .spectrum-ColorSlider-handle_a5bb06{width:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);height:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);margin-left:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)))}.spectrum-ColorSlider-slider_a5bb06{opacity:.0001;width:100%;height:100%;z-index:0;pointer-events:none;margin:0;position:absolute;top:0;left:0}.spectrum-ColorSlider-container--horizontal_a5bb06{width:var(--spectrum-colorslider-default-length,var(--spectrum-global-dimension-size-2400))}.spectrum-ColorSlider-container--vertical_a5bb06{height:var(--spectrum-colorslider-default-length,var(--spectrum-global-dimension-size-2400));flex-direction:column;display:flex}.spectrum-ColorSlider_a5bb06{width:100%;height:var(--spectrum-colorslider-height,var(--spectrum-global-dimension-size-300));border-radius:var(--spectrum-colorslider-border-radius,var(--spectrum-alias-border-radius-regular));-webkit-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;cursor:default;display:block;position:relative}.spectrum-ColorSlider_a5bb06:before{content:"";z-index:-1;border-radius:var(--spectrum-colorslider-border-radius,var(--spectrum-alias-border-radius-regular));background-size:var(--spectrum-global-dimension-static-size-200,16px)var(--spectrum-global-dimension-static-size-200,16px);background-position:0 0,0 var(--spectrum-global-dimension-static-size-100,8px),var(--spectrum-global-dimension-static-size-100,8px)calc(-1*var(--spectrum-global-dimension-static-size-100,8px)),calc(-1*var(--spectrum-global-dimension-static-size-100,8px))0;position:absolute;top:0;bottom:0;left:0;right:0}.spectrum-ColorSlider_a5bb06.is-focused_a5bb06{z-index:2}.spectrum-ColorSlider_a5bb06.is-disabled_a5bb06{pointer-events:none}.spectrum-ColorSlider--vertical_a5bb06{width:var(--spectrum-colorslider-vertical-width,var(--spectrum-global-dimension-size-300));flex:1;display:inline-block}.spectrum-ColorSlider--vertical_a5bb06 .spectrum-ColorSlider-handle_a5bb06{top:0;left:50%}.spectrum-ColorSlider-handle_a5bb06{top:50%;left:0}.spectrum-ColorSlider-handle_a5bb06:after{width:var(--spectrum-global-dimension-size-300);height:var(--spectrum-global-dimension-size-300);border-radius:0%}.spectrum-ColorSlider-labelContainer_a5bb06{display:-ms-grid;-ms-grid-columns:auto 1fr auto;-ms-grid-column-align:start;grid-template-columns:auto 1fr auto;grid-template-areas:"label contextualHelp value";justify-items:start;display:grid}[dir=ltr] .spectrum-ColorSlider-contextualHelp_a5bb06{margin-left:var(--spectrum-global-dimension-size-50)}[dir=rtl] .spectrum-ColorSlider-contextualHelp_a5bb06{margin-right:var(--spectrum-global-dimension-size-50)}.spectrum-ColorSlider-contextualHelp_a5bb06{margin-top:var(--spectrum-global-dimension-size-25);grid-area:contextualHelp}[dir=ltr] .spectrum-ColorSlider-valueLabel_a5bb06{margin-left:var(--spectrum-global-dimension-size-50)}[dir=rtl] .spectrum-ColorSlider-valueLabel_a5bb06{margin-right:var(--spectrum-global-dimension-size-50)}.spectrum-ColorSlider-valueLabel_a5bb06{grid-area:value}.spectrum-ColorSlider_a5bb06{background-color:var(--spectrum-global-color-static-white,#fff);box-shadow:inset 0 0 0 var(--spectrum-colorslider-border-size,var(--spectrum-alias-border-size-thin))var(--spectrum-colorarea-border-color)}.spectrum-ColorSlider_a5bb06:before{background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc)75.5%),linear-gradient(45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc)75.5%),linear-gradient(-45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc)25.5%,transparent 25.5%),linear-gradient(45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc)25.5%,transparent 25.5%)}.spectrum-ColorSlider_a5bb06.is-disabled_a5bb06{box-shadow:inset 0 0 0 var(--spectrum-colorslider-border-size,var(--spectrum-alias-border-size-thin))var(--spectrum-colorslider-border-color-disabled,var(--spectrum-global-color-gray-300));background:var(--spectrum-colorslider-fill-color-disabled,var(--spectrum-global-color-gray-300))!important}.spectrum-ColorSlider_a5bb06 .spectrum-ColorSlider-handle_a5bb06{margin:0}@media (forced-colors:active){.spectrum-ColorSlider_a5bb06{forced-color-adjust:none;--spectrum-colorslider-fill-color-disabled:GrayText;--spectrum-colorslider-border-color-disabled:GrayText;--spectrum-colorslider-border-color:ButtonText;--spectrum-colorarea-border-color:ButtonText}}[dir=ltr] .react-spectrum-ColorField-input_7bde3a{text-align:left}[dir=rtl] .react-spectrum-ColorField-input_7bde3a{text-align:right}.react-spectrum-ColorField-input_7bde3a{direction:ltr}
package/dist/main.js CHANGED
@@ -6,7 +6,6 @@ var $aAzec$reactariacolor = require("@react-aria/color");
6
6
  var $aAzec$reactstatelycolor = require("@react-stately/color");
7
7
  var $aAzec$reactariafocus = require("@react-aria/focus");
8
8
  var $aAzec$reactspectrumprovider = require("@react-spectrum/provider");
9
- var $aAzec$reactspectrumlayout = require("@react-spectrum/layout");
10
9
  var $aAzec$reactspectrumlabel = require("@react-spectrum/label");
11
10
  var $aAzec$reactariainteractions = require("@react-aria/interactions");
12
11
  var $aAzec$reactariai18n = require("@react-aria/i18n");
@@ -164,8 +163,8 @@ function $5f016e950c2dc3a6$var$ColorArea(props, ref) {
164
163
  let { isDisabled: isDisabled } = props;
165
164
  let size = props.size && $aAzec$reactspectrumutils.dimensionValue(props.size);
166
165
  let { styleProps: styleProps } = $aAzec$reactspectrumutils.useStyleProps(props);
167
- let inputXRef = $aAzec$react.useRef();
168
- let inputYRef = $aAzec$react.useRef();
166
+ let inputXRef = $aAzec$react.useRef(null);
167
+ let inputYRef = $aAzec$react.useRef(null);
169
168
  let containerRef = $aAzec$reactspectrumutils.useFocusableRef(ref, inputXRef);
170
169
  let state = $aAzec$reactstatelycolor.useColorAreaState(props);
171
170
  let { colorAreaProps: colorAreaProps , gradientProps: gradientProps , xInputProps: xInputProps , yInputProps: yInputProps , thumbProps: thumbProps } = $aAzec$reactariacolor.useColorArea({
@@ -259,7 +258,7 @@ function $63a2864687444ae1$var$ColorWheel(props, ref) {
259
258
  let { styleProps: styleProps } = $aAzec$reactspectrumutils.useStyleProps(props);
260
259
  let inputRef = $aAzec$react.useRef(null);
261
260
  let containerRef = $aAzec$reactspectrumutils.useFocusableRef(ref, inputRef);
262
- let [wheelRadius, setWheelRadius] = $aAzec$react.useState(null);
261
+ let [wheelRadius, setWheelRadius] = $aAzec$react.useState(0);
263
262
  let [wheelThickness, setWheelThickness] = $aAzec$react.useState($63a2864687444ae1$var$WHEEL_THICKNESS);
264
263
  let resizeHandler = $aAzec$react.useCallback(()=>{
265
264
  if (containerRef.current) {
@@ -274,7 +273,7 @@ function $63a2864687444ae1$var$ColorWheel(props, ref) {
274
273
  ]);
275
274
  $aAzec$react.useEffect(()=>{
276
275
  // the size observer's fallback to the window resize event doesn't fire on mount
277
- if (wheelRadius == null) resizeHandler();
276
+ if (wheelRadius === 0) resizeHandler();
278
277
  }, [
279
278
  wheelRadius,
280
279
  resizeHandler
@@ -328,7 +327,6 @@ function $63a2864687444ae1$var$ColorWheel(props, ref) {
328
327
 
329
328
 
330
329
 
331
-
332
330
  var $28060baf29cc5ac7$exports = {};
333
331
 
334
332
  $parcel$export($28060baf29cc5ac7$exports, "spectrum-ColorSlider", () => $28060baf29cc5ac7$export$a5f8b0989b27a604, (v) => $28060baf29cc5ac7$export$a5f8b0989b27a604 = v);
@@ -339,6 +337,9 @@ $parcel$export($28060baf29cc5ac7$exports, "spectrum-ColorSlider-container--horiz
339
337
  $parcel$export($28060baf29cc5ac7$exports, "spectrum-ColorSlider-container--vertical", () => $28060baf29cc5ac7$export$cd1c093289104c66, (v) => $28060baf29cc5ac7$export$cd1c093289104c66 = v);
340
338
  $parcel$export($28060baf29cc5ac7$exports, "is-disabled", () => $28060baf29cc5ac7$export$d35bc1e505d1ebbf, (v) => $28060baf29cc5ac7$export$d35bc1e505d1ebbf = v);
341
339
  $parcel$export($28060baf29cc5ac7$exports, "spectrum-ColorSlider--vertical", () => $28060baf29cc5ac7$export$83dcf61b398bfaf1, (v) => $28060baf29cc5ac7$export$83dcf61b398bfaf1 = v);
340
+ $parcel$export($28060baf29cc5ac7$exports, "spectrum-ColorSlider-labelContainer", () => $28060baf29cc5ac7$export$65139e62047f0361, (v) => $28060baf29cc5ac7$export$65139e62047f0361 = v);
341
+ $parcel$export($28060baf29cc5ac7$exports, "spectrum-ColorSlider-contextualHelp", () => $28060baf29cc5ac7$export$26ffe4cf5a5aa53c, (v) => $28060baf29cc5ac7$export$26ffe4cf5a5aa53c = v);
342
+ $parcel$export($28060baf29cc5ac7$exports, "spectrum-ColorSlider-valueLabel", () => $28060baf29cc5ac7$export$c2fbec5a538c1f81, (v) => $28060baf29cc5ac7$export$c2fbec5a538c1f81 = v);
342
343
  var $28060baf29cc5ac7$export$a5f8b0989b27a604;
343
344
  var $28060baf29cc5ac7$export$e7dc768d35940237;
344
345
  var $28060baf29cc5ac7$export$8c273ba92fabe1f1;
@@ -347,6 +348,9 @@ var $28060baf29cc5ac7$export$33e97914f6746614;
347
348
  var $28060baf29cc5ac7$export$cd1c093289104c66;
348
349
  var $28060baf29cc5ac7$export$d35bc1e505d1ebbf;
349
350
  var $28060baf29cc5ac7$export$83dcf61b398bfaf1;
351
+ var $28060baf29cc5ac7$export$65139e62047f0361;
352
+ var $28060baf29cc5ac7$export$26ffe4cf5a5aa53c;
353
+ var $28060baf29cc5ac7$export$c2fbec5a538c1f81;
350
354
  $28060baf29cc5ac7$export$a5f8b0989b27a604 = "spectrum-ColorSlider_a5bb06";
351
355
  $28060baf29cc5ac7$export$e7dc768d35940237 = "is-focused_a5bb06";
352
356
  $28060baf29cc5ac7$export$8c273ba92fabe1f1 = "spectrum-ColorSlider-handle_a5bb06";
@@ -355,6 +359,9 @@ $28060baf29cc5ac7$export$33e97914f6746614 = "spectrum-ColorSlider-container--hor
355
359
  $28060baf29cc5ac7$export$cd1c093289104c66 = "spectrum-ColorSlider-container--vertical_a5bb06";
356
360
  $28060baf29cc5ac7$export$d35bc1e505d1ebbf = "is-disabled_a5bb06";
357
361
  $28060baf29cc5ac7$export$83dcf61b398bfaf1 = "spectrum-ColorSlider--vertical_a5bb06";
362
+ $28060baf29cc5ac7$export$65139e62047f0361 = "spectrum-ColorSlider-labelContainer_a5bb06";
363
+ $28060baf29cc5ac7$export$26ffe4cf5a5aa53c = "spectrum-ColorSlider-contextualHelp_a5bb06";
364
+ $28060baf29cc5ac7$export$c2fbec5a538c1f81 = "spectrum-ColorSlider-valueLabel_a5bb06";
358
365
 
359
366
 
360
367
 
@@ -368,8 +375,8 @@ function $4537dec0de08c277$var$ColorSlider(props, ref) {
368
375
  let vertical = orientation === 'vertical';
369
376
  let { styleProps: styleProps } = $aAzec$reactspectrumutils.useStyleProps(props);
370
377
  let { locale: locale } = $aAzec$reactariai18n.useLocale();
371
- let inputRef = $aAzec$react.useRef();
372
- let trackRef = $aAzec$react.useRef();
378
+ let inputRef = $aAzec$react.useRef(null);
379
+ let trackRef = $aAzec$react.useRef(null);
373
380
  let domRef = $aAzec$reactspectrumutils.useFocusableRef(ref, inputRef);
374
381
  let state = $aAzec$reactstatelycolor.useColorSliderState({
375
382
  ...props,
@@ -377,7 +384,7 @@ function $4537dec0de08c277$var$ColorSlider(props, ref) {
377
384
  });
378
385
  // If vertical and a label is provided, use it as an aria-label instead.
379
386
  if (vertical && label) {
380
- ariaLabel = ariaLabel || (typeof label === 'string' ? label : null);
387
+ ariaLabel = ariaLabel || (typeof label === 'string' ? label : undefined);
381
388
  label = null;
382
389
  }
383
390
  // If no external label, aria-label or aria-labelledby is provided,
@@ -400,11 +407,6 @@ function $4537dec0de08c277$var$ColorSlider(props, ref) {
400
407
  isDisabled: isDisabled,
401
408
  onFocusChange: setIsFocused
402
409
  });
403
- let alignLabel;
404
- if (vertical) alignLabel = 'center';
405
- else if (label != null && showValueLabel) alignLabel = 'space-between';
406
- else if (label != null) alignLabel = 'flex-start';
407
- else if (showValueLabel) alignLabel = 'flex-end';
408
410
  return(/*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("div", {
409
411
  ref: domRef,
410
412
  ...styleProps,
@@ -412,11 +414,17 @@ function $4537dec0de08c277$var$ColorSlider(props, ref) {
412
414
  'spectrum-ColorSlider-container--horizontal': !vertical,
413
415
  'spectrum-ColorSlider-container--vertical': vertical
414
416
  })
415
- }, label && /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement($aAzec$reactspectrumlayout.Flex, {
416
- direction: "row",
417
- justifyContent: alignLabel
418
- }, /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement($aAzec$reactspectrumlabel.Label, labelProps, label), showValueLabel && /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement($aAzec$reactspectrumlabel.Label, {
419
- elementType: "span"
417
+ }, label && /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("div", {
418
+ className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($28060baf29cc5ac7$exports)), 'spectrum-ColorSlider-labelContainer')
419
+ }, /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement($aAzec$reactspectrumlabel.Label, labelProps, label), props.contextualHelp && /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement($aAzec$reactspectrumutils.SlotProvider, {
420
+ slots: {
421
+ actionButton: {
422
+ UNSAFE_className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($28060baf29cc5ac7$exports)), 'spectrum-ColorSlider-contextualHelp')
423
+ }
424
+ }
425
+ }, props.contextualHelp), showValueLabel && /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement($aAzec$reactspectrumlabel.Label, {
426
+ elementType: "span",
427
+ UNSAFE_className: $aAzec$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($28060baf29cc5ac7$exports)), 'spectrum-ColorSlider-valueLabel')
420
428
  }, /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("output", outputProps, state.value.formatChannelValue(channel, locale)))), /*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement("div", {
421
429
  ...trackProps,
422
430
  ref: trackRef,
@@ -461,7 +469,7 @@ function $8bdb9bc27ff3debb$var$ColorField(props, ref) {
461
469
  let { value: // These disabled props are handled by the state hook
462
470
  value , defaultValue: defaultValue , onChange: onChange , ...otherProps } = props;
463
471
  let state = $aAzec$reactstatelycolor.useColorFieldState(props);
464
- let inputRef = $aAzec$react.useRef();
472
+ let inputRef = $aAzec$react.useRef(null);
465
473
  let { labelProps: labelProps , inputProps: inputProps } = $aAzec$reactariacolor.useColorField(otherProps, state, inputRef);
466
474
  if (props.placeholder) console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');
467
475
  return(/*#__PURE__*/ ($parcel$interopDefault($aAzec$react)).createElement($aAzec$reactspectrumtextfield.TextFieldBase, {
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/color/src/index.ts","packages/@react-spectrum/color/src/ColorArea.tsx","packages/@react-spectrum/color/src/ColorThumb.tsx","packages/@adobe/spectrum-css-temp/components/colorhandle/vars.css","packages/@adobe/spectrum-css-temp/components/colorloupe/vars.css","packages/@adobe/spectrum-css-temp/components/colorarea/vars.css","packages/@react-spectrum/color/src/ColorWheel.tsx","packages/@adobe/spectrum-css-temp/components/colorwheel/vars.css","packages/@react-spectrum/color/src/ColorSlider.tsx","packages/@adobe/spectrum-css-temp/components/colorslider/vars.css","packages/@react-spectrum/color/src/ColorField.tsx","packages/@react-spectrum/color/src/colorfield.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\nexport {ColorArea} from './ColorArea';\nexport {ColorWheel} from './ColorWheel';\nexport {ColorSlider} from './ColorSlider';\nexport {ColorField} from './ColorField';\nexport type {SpectrumColorAreaProps, SpectrumColorFieldProps, SpectrumColorSliderProps, SpectrumColorWheelProps} from '@react-types/color';\n","/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumColorAreaProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorarea/vars.css';\nimport {useColorArea} from '@react-aria/color';\nimport {useColorAreaState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n let inputXRef = useRef();\n let inputYRef = useRef();\n let containerRef = useFocusableRef(ref, inputXRef);\n\n let state = useColorAreaState(props);\n\n let {\n colorAreaProps,\n gradientProps,\n xInputProps,\n yInputProps,\n thumbProps\n } = useColorArea({...props, inputXRef, inputYRef, containerRef}, state);\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n {...colorAreaProps}\n className={\n classNames(\n styles,\n 'spectrum-ColorArea',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\n ref={containerRef}\n style={{\n ...colorAreaProps.style,\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n width: size,\n height: size\n }}>\n <div {...gradientProps} className={classNames(styles, 'spectrum-ColorArea-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n className={classNames(styles, 'spectrum-ColorArea-handle')}\n {...thumbProps}>\n <div role=\"presentation\">\n <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(xInputProps, focusProps)} ref={inputXRef} />\n <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(yInputProps, focusProps)} ref={inputYRef} />\n </div>\n </ColorThumb>\n </div>\n );\n}\n\n/**\n * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nlet _ColorArea = React.forwardRef(ColorArea) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;\nexport {_ColorArea as ColorArea};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport {Color} from '@react-types/color';\nimport {DOMProps} from '@react-types/shared';\nimport React, {ReactElement} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId} from '@react-aria/utils';\n\ninterface ColorThumbProps extends DOMProps {\n value: Color,\n isDisabled?: boolean,\n isDragging?: boolean, // shows the color loupe\n isFocused?: boolean, // makes the circle larger\n className?: string,\n children?: ReactElement\n}\n\nfunction ColorThumb(props: ColorThumbProps) {\n let {value, isDisabled, isDragging, isFocused, children, className = '', ...otherProps} = props;\n\n let patternId = useId();\n\n let valueCSS = value.toString('css');\n\n return (\n <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} {...otherProps}>\n <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />\n <svg className={classNames(stylesLoupe, 'spectrum-ColorLoupe', {'is-open': isDragging})} aria-hidden=\"true\">\n <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n </pattern>\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n fill={`url(#${patternId})`} />\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n fill={valueCSS} />\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n d=\"M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\" />\n </svg>\n {children}\n </div>\n );\n}\n\nexport {ColorThumb};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport React, {useCallback, useEffect, useRef, useState} from 'react';\nimport {SpectrumColorWheelProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheel} from '@react-aria/color';\nimport {useColorWheelState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useResizeObserver} from '@react-aria/utils';\n\nconst WHEEL_THICKNESS = 24;\n\nfunction ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n let inputRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputRef);\n\n let [wheelRadius, setWheelRadius] = useState<number | null>(null);\n let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n let resizeHandler = useCallback(() => {\n if (containerRef.current) {\n setWheelRadius(containerRef.current.offsetWidth / 2);\n let thickness = window.getComputedStyle(containerRef.current)\n .getPropertyValue('--spectrum-colorwheel-track-thickness');\n if (thickness) {\n setWheelThickness(parseInt(thickness, 10));\n }\n }\n }, [containerRef, setWheelRadius, setWheelThickness]);\n\n useEffect(() => {\n // the size observer's fallback to the window resize event doesn't fire on mount\n if (wheelRadius == null) {\n resizeHandler();\n }\n }, [wheelRadius, resizeHandler]);\n\n useResizeObserver({\n ref: containerRef,\n onResize: resizeHandler\n });\n\n let state = useColorWheelState(props);\n\n let {trackProps, inputProps, thumbProps} = useColorWheel({\n ...props,\n innerRadius: wheelRadius - wheelThickness,\n outerRadius: wheelRadius\n }, state, inputRef);\n\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n className={\n classNames(\n styles,\n 'spectrum-ColorWheel',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\n ref={containerRef}\n style={{\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n // @ts-ignore\n 'width': size,\n 'height': size\n }}>\n <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n className={classNames(styles, 'spectrum-ColorWheel-handle')}\n {...thumbProps}>\n <input {...focusProps} className={classNames(styles, 'spectrum-ColorWheel-slider')} {...inputProps} ref={inputRef} />\n </ColorThumb>\n </div>\n );\n}\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nlet _ColorWheel = React.forwardRef(ColorWheel);\nexport {_ColorWheel as ColorWheel};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {Flex} from '@react-spectrum/layout';\nimport {FocusableRef} from '@react-types/shared';\nimport {Label} from '@react-spectrum/label';\nimport React, {useRef, useState} from 'react';\nimport {SpectrumColorSliderProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css';\nimport {useColorSlider} from '@react-aria/color';\nimport {useColorSliderState} from '@react-stately/color';\nimport {useFocus, useFocusVisible} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {\n isDisabled,\n channel,\n orientation,\n label,\n showValueLabel,\n 'aria-label': ariaLabel\n } = props;\n let vertical = orientation === 'vertical';\n\n let {styleProps} = useStyleProps(props);\n let {locale} = useLocale();\n\n let inputRef = useRef();\n let trackRef = useRef();\n let domRef = useFocusableRef(ref, inputRef);\n\n let state = useColorSliderState({...props, locale});\n\n // If vertical and a label is provided, use it as an aria-label instead.\n if (vertical && label) {\n ariaLabel = ariaLabel || (typeof label === 'string' ? label : null);\n label = null;\n }\n\n // If no external label, aria-label or aria-labelledby is provided,\n // default to displaying the localized channel value.\n // Specifically check if label is undefined. If label is `null` then display no visible label.\n // A default aria-label is provided by useColorSlider in that case.\n if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) {\n label = state.value.getChannelName(channel, locale);\n }\n\n // Show the value label by default if there is a visible label\n if (showValueLabel == null) {\n showValueLabel = !!label;\n }\n\n let {inputProps, thumbProps, trackProps, labelProps, outputProps} = useColorSlider({\n ...props,\n label,\n 'aria-label': ariaLabel,\n trackRef,\n inputRef\n }, state);\n\n let {isFocusVisible} = useFocusVisible();\n let [isFocused, setIsFocused] = useState(false);\n let {focusProps} = useFocus({\n isDisabled,\n onFocusChange: setIsFocused\n });\n\n let alignLabel;\n if (vertical) {\n alignLabel = 'center';\n } else if (label != null && showValueLabel) {\n alignLabel = 'space-between';\n } else if (label != null) {\n alignLabel = 'flex-start';\n } else if (showValueLabel) {\n alignLabel = 'flex-end';\n }\n\n return (\n <div\n ref={domRef}\n {...styleProps}\n className={classNames(\n styles,\n {\n 'spectrum-ColorSlider-container--horizontal': !vertical,\n 'spectrum-ColorSlider-container--vertical': vertical\n }\n )}>\n {label &&\n <Flex direction=\"row\" justifyContent={alignLabel}>\n <Label {...labelProps}>{label}</Label>\n {showValueLabel && <Label elementType=\"span\"><output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output></Label>}\n </Flex>\n }\n <div\n {...trackProps}\n ref={trackRef}\n className={classNames(\n styles,\n 'spectrum-ColorSlider', {\n 'is-disabled': isDisabled,\n 'spectrum-ColorSlider--vertical': vertical\n }\n )\n }>\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocused && isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isThumbDragging(0)}\n className={classNames(styles, 'spectrum-ColorSlider-handle')}\n {...thumbProps}>\n <input {...inputProps} {...focusProps} ref={inputRef} className={classNames(styles, 'spectrum-ColorSlider-slider')} />\n </ColorThumb>\n </div>\n </div>\n );\n}\n\n/**\n * ColorSliders allow users to adjust an individual channel of a color value.\n */\nlet _ColorSlider = React.forwardRef(ColorSlider);\nexport {_ColorSlider as ColorSlider};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport React, {RefObject, useRef} from 'react';\nimport {SpectrumColorFieldProps} from '@react-types/color';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorField} from '@react-aria/color';\nimport {useColorFieldState} from '@react-stately/color';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorField(props: SpectrumColorFieldProps, ref: RefObject<TextFieldRef>) {\n props = useProviderProps(props);\n let {\n // These disabled props are handled by the state hook\n value, // eslint-disable-line @typescript-eslint/no-unused-vars\n defaultValue, // eslint-disable-line @typescript-eslint/no-unused-vars\n onChange, // eslint-disable-line @typescript-eslint/no-unused-vars\n ...otherProps\n } = props;\n let state = useColorFieldState(props);\n let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>();\n let {\n labelProps,\n inputProps\n } = useColorField(otherProps, state, inputRef);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');\n }\n\n return (\n <TextFieldBase\n {...otherProps}\n ref={ref}\n inputRef={inputRef}\n labelProps={labelProps}\n inputProps={inputProps}\n inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n );\n}\n\n/**\n * ColorFields allow users to enter a color in #rrggbb hexadecimal format.\n */\nconst _ColorField = React.forwardRef(ColorField);\nexport {_ColorField as ColorField};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n.react-spectrum-ColorField-input {\n direction: ltr;\n text-align: start;\n}\n"],"names":[],"version":3,"file":"main.js.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AGAA,GAAsC;AACtC,GAA4B;AAC5B,GAA4B;AAC5B,GAA6B;AAC7B,GAA4C;AAJ5C,yCAAsC,GAAG,CAA6B;AACtE,yCAA4B,GAAG,CAAmB;AAClD,yCAA4B,GAAG,CAAmB;AAClD,yCAA6B,GAAG,CAAoB;AACpD,yCAA4C,GAAG,CAAmC;;;;;;;;;;ACJlF,GAAqC;AACrC,GAAyB;AACzB,GAA2C;AAC3C,GAAsD;AACtD,GAAmD;AAJnD,yCAAqC,GAAG,CAA4B;AACpE,yCAAyB,GAAG,CAAgB;AAC5C,yCAA2C,GAAG,CAAkC;AAChF,yCAAsD,GAAG,CAA6C;AACtG,yCAAmD,GAAG,CAA0C;;;;SFyBvF,wCAAU,CAAC,KAAsB,EAAE,CAAC;IAC3C,GAAG,CAAC,CAAC,QAAA,KAAK,eAAE,UAAU,eAAE,UAAU,cAAE,SAAS,aAAE,QAAQ,cAAE,SAAS,GAAG,CAAE,OAAK,UAAU,CAAA,CAAC,GAAG,KAAK;IAE/F,GAAG,CAAC,SAAS,GAAG,2BAAK;IAErB,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAK;IAEnC,MAAM,oEACH,CAAG;QAAC,SAAS,EAAE,oCAAU,CAAC,gEAAY,EAAE,CAAsB,uBAAE,CAAC;YAAA,CAAY,aAAE,SAAS;YAAE,CAAa,cAAE,UAAU;QAAA,CAAC,IAAI,CAAG,KAAG,SAAS;WAAM,UAAU;0EACrJ,CAAG;QAAC,SAAS,EAAE,oCAAU,CAAC,gEAAY,EAAE,CAA4B;QAAG,KAAK,EAAE,CAAC;YAAA,eAAe,EAAE,QAAQ;QAAA,CAAC;2EACzG,CAAG;QAAC,SAAS,EAAE,oCAAU,CAAC,gEAAW,EAAE,CAAqB,sBAAG,CAAC;YAAA,CAAS,UAAE,UAAU;QAAA,CAAC;QAAG,CAAW,cAAC,CAAM;0EACzG,CAAO;QAAC,EAAE,EAAE,SAAS;QAAE,CAAC,EAAC,CAAG;QAAC,CAAC,EAAC,CAAG;QAAC,KAAK,EAAC,CAAI;QAAC,MAAM,EAAC,CAAI;QAAC,YAAY,EAAC,CAAgB;0EACrF,CAAI;QAAC,SAAS,EAAE,oCAAU,CAAC,gEAAW,EAAE,CAAsC;QAAG,CAAC,EAAC,CAAG;QAAC,CAAC,EAAC,CAAG;QAAC,KAAK,EAAC,CAAI;QAAC,MAAM,EAAC,CAAI;2EACnH,CAAI;QAAC,SAAS,EAAE,oCAAU,CAAC,gEAAW,EAAE,CAAmC;QAAG,CAAC,EAAC,CAAG;QAAC,CAAC,EAAC,CAAG;QAAC,KAAK,EAAC,CAAG;QAAC,MAAM,EAAC,CAAG;2EAC9G,CAAI;QAAC,SAAS,EAAE,oCAAU,CAAC,gEAAW,EAAE,CAAmC;QAAG,CAAC,EAAC,CAAG;QAAC,CAAC,EAAC,CAAG;QAAC,KAAK,EAAC,CAAG;QAAC,MAAM,EAAC,CAAG;4EAEhH,CAAI;QACH,SAAS,EAAE,oCAAU,CAAC,gEAAW,EAAE,CAA2B;QAC9D,CAAC,EAAC,CAA0E;QAC5E,IAAI,GAAG,KAAK,EAAE,SAAS,CAAC,CAAC;2EAC1B,CAAI;QACH,SAAS,EAAE,oCAAU,CAAC,gEAAW,EAAE,CAA2B;QAC9D,CAAC,EAAC,CAA0E;QAC5E,IAAI,EAAE,QAAQ;2EACf,CAAI;QACH,SAAS,EAAE,oCAAU,CAAC,gEAAW,EAAE,CAA2B;QAC9D,CAAC,EAAC,CAAgP;SAErP,QAAQ;AAGf,CAAC;;;;;;;;;;;;;;;AG5DD,GAAoC;AACpC,GAA4B;AAC5B,GAA4B;AAC5B,GAA2C;AAC3C,GAA6B;AAC7B,GAA6C;AAC7C,GAA2C;AAC3C,GAA4C;AAP5C,yCAAoC,GAAG,CAA2B;AAClE,yCAA4B,GAAG,CAAmB;AAClD,yCAA4B,GAAG,CAAmB;AAClD,wCAA2C,GAAG,CAAkC;AAChF,yCAA6B,GAAG,CAAoB;AACpD,yCAA6C,GAAG,CAAoC;AACpF,yCAA2C,GAAG,CAAkC;AAChF,yCAA4C,GAAG,CAAmC;;;;;;;SJiBzE,+BAAS,CAAC,KAA6B,EAAE,GAAiC,EAAE,CAAC;IACpF,KAAK,GAAG,6CAAgB,CAAC,KAAK;IAE9B,GAAG,CAAC,CAAC,aAAA,UAAU,EAAA,CAAC,GAAG,KAAK;IACxB,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,wCAAc,CAAC,KAAK,CAAC,IAAI;IAClD,GAAG,CAAC,CAAC,aAAA,UAAU,EAAA,CAAC,GAAG,uCAAa,CAAC,KAAK;IAEtC,GAAG,CAAC,SAAS,GAAG,mBAAM,CAAC,IAAI;IAC3B,GAAG,CAAC,SAAS,GAAG,mBAAM,CAAC,IAAI;IAC3B,GAAG,CAAC,YAAY,GAAG,yCAAe,CAAC,GAAG,EAAE,SAAS;IAEjD,GAAG,CAAC,KAAK,GAAG,0CAAiB,CAAC,KAAK;IAEnC,GAAG,CAAC,CAAC,iBACH,cAAc,kBACd,aAAa,gBACb,WAAW,gBACX,WAAW,eACX,UAAU,EACZ,CAAC,GAAG,kCAAY,CAAC,CAAC;WAAG,KAAK;mBAAE,SAAS;mBAAE,SAAS;sBAAE,YAAY;IAAA,CAAC,EAAE,KAAK;IACtE,GAAG,CAAC,CAAC,aAAA,UAAU,mBAAE,cAAc,EAAA,CAAC,GAAG,kCAAY;IAE/C,MAAM,oEACH,CAAG;WACE,cAAc;QAClB,SAAS,EACP,oCAAU,CACR,gEAAM,EACN,CAAoB,qBACpB,CAAC;YACC,CAAa,cAAE,UAAU;QAC3B,CAAC,EACD,UAAU,CAAC,SAAS;QAGxB,GAAG,EAAE,YAAY;QACjB,KAAK,EAAE,CAAC;eACH,cAAc,CAAC,KAAK;eACpB,UAAU,CAAC,KAAK;YACnB,EAAsE,AAAtE,oEAAsE;YACtE,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,IAAI;QACd,CAAC;0EACA,CAAG;WAAK,aAAa;QAAE,SAAS,EAAE,oCAAU,CAAC,gEAAM,EAAE,CAA6B;2EAClF,wCAAU;QACT,KAAK,EAAE,KAAK,CAAC,eAAe;QAC5B,SAAS,EAAE,cAAc;QACzB,UAAU,EAAE,UAAU;QACtB,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,SAAS,EAAE,oCAAU,CAAC,gEAAM,EAAE,CAA2B;WACrD,UAAU;0EACb,CAAG;QAAC,IAAI,EAAC,CAAc;0EACrB,CAAK;QAAC,SAAS,EAAE,oCAAU,CAAC,gEAAM,EAAE,CAA2B;WAAO,gCAAU,CAAC,WAAW,EAAE,UAAU;QAAG,GAAG,EAAE,SAAS;2EACzH,CAAK;QAAC,SAAS,EAAE,oCAAU,CAAC,gEAAM,EAAE,CAA2B;WAAO,gCAAU,CAAC,WAAW,EAAE,UAAU;QAAG,GAAG,EAAE,SAAS;;AAKpI,CAAC;AAED,EAEG,AAFH;;CAEG,AAFH,EAEG,CACH,GAAG,CAAC,yCAAU,iBAAG,sCAAK,CAAC,UAAU,CAAC,+BAAS;;;;;;;;;;;;;;;;AMvF3C,GAAqC;AACrC,GAA4B;AAC5B,GAA4C;AAC5C,GAA4C;AAC5C,GAA6B;AAC7B,GAA4B;AAC5B,GAA8C;AAC9C,GAA6C;AAP7C,yCAAqC,GAAG,CAA4B;AACpE,yCAA4B,GAAG,CAAmB;AAClD,yCAA4C,GAAG,CAAmC;AAClF,wCAA4C,GAAG,CAAmC;AAClF,yCAA6B,GAAG,CAAoB;AACpD,yCAA4B,GAAG,CAAmB;AAClD,yCAA8C,GAAG,CAAqC;AACtF,wCAA6C,GAAG,CAAoC;;;;;;;;ADiBpF,KAAK,CAAC,qCAAe,GAAG,EAAE;SAEjB,gCAAU,CAAC,KAA8B,EAAE,GAAiC,EAAE,CAAC;IACtF,KAAK,GAAG,6CAAgB,CAAC,KAAK;IAE9B,GAAG,CAAC,CAAC,aAAA,UAAU,EAAA,CAAC,GAAG,KAAK;IACxB,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,wCAAc,CAAC,KAAK,CAAC,IAAI;IAClD,GAAG,CAAC,CAAC,aAAA,UAAU,EAAA,CAAC,GAAG,uCAAa,CAAC,KAAK;IAEtC,GAAG,CAAC,QAAQ,GAAG,mBAAM,CAAC,IAAI;IAC1B,GAAG,CAAC,YAAY,GAAG,yCAAe,CAAC,GAAG,EAAE,QAAQ;IAEhD,GAAG,EAAE,WAAW,EAAE,cAAc,IAAI,qBAAQ,CAAS,CAAC;IACtD,GAAG,EAAE,cAAc,EAAE,iBAAiB,IAAI,qBAAQ,CAAC,qCAAe;IAElE,GAAG,CAAC,aAAa,GAAG,wBAAW,KAAO,CAAC;QACrC,EAAE,EAAE,YAAY,CAAC,OAAO,EAAE,CAAC;YACzB,cAAc,CAAC,YAAY,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC;YACnD,GAAG,CAAC,SAAS,GAAG,MAAM,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,EACzD,gBAAgB,CAAC,CAAuC;YAC3D,EAAE,EAAE,SAAS,EACX,iBAAiB,CAAC,QAAQ,CAAC,SAAS,EAAE,EAAE;QAE5C,CAAC;IACH,CAAC,EAAE,CAAC;QAAA,YAAY;QAAE,cAAc;QAAE,iBAAiB;IAAA,CAAC;IAEpD,sBAAS,KAAO,CAAC;QACf,EAAgF,AAAhF,8EAAgF;QAChF,EAAE,EAAE,WAAW,KAAK,CAAC,EACnB,aAAa;IAEjB,CAAC,EAAE,CAAC;QAAA,WAAW;QAAE,aAAa;IAAA,CAAC;IAE/B,uCAAiB,CAAC,CAAC;QACjB,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,aAAa;IACzB,CAAC;IAED,GAAG,CAAC,KAAK,GAAG,2CAAkB,CAAC,KAAK;IAEpC,GAAG,CAAC,CAAC,aAAA,UAAU,eAAE,UAAU,eAAE,UAAU,EAAA,CAAC,GAAG,mCAAa,CAAC,CAAC;WACrD,KAAK;QACR,WAAW,EAAE,WAAW,GAAG,cAAc;QACzC,WAAW,EAAE,WAAW;IAC1B,CAAC,EAAE,KAAK,EAAE,QAAQ;IAElB,GAAG,CAAC,CAAC,aAAA,UAAU,mBAAE,cAAc,EAAA,CAAC,GAAG,kCAAY;IAE/C,MAAM,oEACH,CAAG;QACF,SAAS,EACP,oCAAU,CACR,gEAAM,EACN,CAAqB,sBACrB,CAAC;YACC,CAAa,cAAE,UAAU;QAC3B,CAAC,EACD,UAAU,CAAC,SAAS;QAGxB,GAAG,EAAE,YAAY;QACjB,KAAK,EAAE,CAAC;eACH,UAAU,CAAC,KAAK;YACnB,EAAsE,AAAtE,oEAAsE;YACtE,EAAa,AAAb,WAAa;YACb,CAAO,QAAE,IAAI;YACb,CAAQ,SAAE,IAAI;QAChB,CAAC;0EACA,CAAG;WAAK,UAAU;QAAE,SAAS,EAAE,oCAAU,CAAC,gEAAM,EAAE,CAA8B;2EAChF,wCAAU;QACT,KAAK,EAAE,KAAK,CAAC,eAAe;QAC5B,SAAS,EAAE,cAAc;QACzB,UAAU,EAAE,UAAU;QACtB,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,SAAS,EAAE,oCAAU,CAAC,gEAAM,EAAE,CAA4B;WACtD,UAAU;0EACb,CAAK;WAAK,UAAU;QAAE,SAAS,EAAE,oCAAU,CAAC,gEAAM,EAAE,CAA4B;WAAO,UAAU;QAAE,GAAG,EAAE,QAAQ;;AAIzH,CAAC;AAED,EAEG,AAFH;;CAEG,AAFH,EAEG,CACH,GAAG,CAAC,yCAAW,iBAAG,sCAAK,CAAC,UAAU,CAAC,gCAAU;;;;;;;;;;;;;;;;;;;;AG7G7C,GAAsC;AACtC,GAA4B;AAC5B,GAA6C;AAC7C,GAA6C;AAC7C,GAA4D;AAC5D,GAA0D;AAC1D,GAA6B;AAC7B,GAAgD;AAChD,GAAqD;AACrD,GAAqD;AACrD,GAAiD;AAVjD,yCAAsC,GAAG,CAA6B;AACtE,yCAA4B,GAAG,CAAmB;AAClD,yCAA6C,GAAG,CAAoC;AACpF,wCAA6C,GAAG,CAAoC;AACpF,yCAA4D,GAAG,CAAmD;AAClH,yCAA0D,GAAG,CAAiD;AAC9G,yCAA6B,GAAG,CAAoB;AACpD,yCAAgD,GAAG,CAAuC;AAC1F,yCAAqD,GAAG,CAA4C;AACpG,yCAAqD,GAAG,CAA4C;AACpG,yCAAiD,GAAG,CAAwC;;;;;;;;SDenF,iCAAW,CAAC,KAA+B,EAAE,GAAiC,EAAE,CAAC;IACxF,KAAK,GAAG,6CAAgB,CAAC,KAAK;IAE9B,GAAG,CAAC,CAAC,aACH,UAAU,YACV,OAAO,gBACP,WAAW,UACX,KAAK,mBACL,cAAc,GACd,CAAY,aAAE,SAAS,EACzB,CAAC,GAAG,KAAK;IACT,GAAG,CAAC,QAAQ,GAAG,WAAW,KAAK,CAAU;IAEzC,GAAG,CAAC,CAAC,aAAA,UAAU,EAAA,CAAC,GAAG,uCAAa,CAAC,KAAK;IACtC,GAAG,CAAC,CAAC,SAAA,MAAM,EAAA,CAAC,GAAG,8BAAS;IAExB,GAAG,CAAC,QAAQ,GAAG,mBAAM,CAAC,IAAI;IAC1B,GAAG,CAAC,QAAQ,GAAG,mBAAM,CAAC,IAAI;IAC1B,GAAG,CAAC,MAAM,GAAG,yCAAe,CAAC,GAAG,EAAE,QAAQ;IAE1C,GAAG,CAAC,KAAK,GAAG,4CAAmB,CAAC,CAAC;WAAG,KAAK;gBAAE,MAAM;IAAA,CAAC;IAElD,EAAwE,AAAxE,sEAAwE;IACxE,EAAE,EAAE,QAAQ,IAAI,KAAK,EAAE,CAAC;QACtB,SAAS,GAAG,SAAS,KAAK,MAAM,CAAC,KAAK,KAAK,CAAQ,UAAG,KAAK,GAAG,SAAS;QACvE,KAAK,GAAG,IAAI;IACd,CAAC;IAED,EAAmE,AAAnE,iEAAmE;IACnE,EAAqD,AAArD,mDAAqD;IACrD,EAA8F,AAA9F,4FAA8F;IAC9F,EAAmE,AAAnE,iEAAmE;IACnE,EAAE,EAAE,KAAK,KAAK,SAAS,KAAK,SAAS,KAAK,KAAK,CAAC,CAAiB,sBAAM,QAAQ,EAC7E,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,MAAM;IAGpD,EAA8D,AAA9D,4DAA8D;IAC9D,EAAE,EAAE,cAAc,IAAI,IAAI,EACxB,cAAc,KAAK,KAAK;IAG1B,GAAG,CAAC,CAAC,aAAA,UAAU,eAAE,UAAU,eAAE,UAAU,eAAE,UAAU,gBAAE,WAAW,EAAA,CAAC,GAAG,oCAAc,CAAC,CAAC;WAC/E,KAAK;eACR,KAAK;QACL,CAAY,aAAE,SAAS;kBACvB,QAAQ;kBACR,QAAQ;IACV,CAAC,EAAE,KAAK;IAER,GAAG,CAAC,CAAC,iBAAA,cAAc,EAAA,CAAC,GAAG,4CAAe;IACtC,GAAG,EAAE,SAAS,EAAE,YAAY,IAAI,qBAAQ,CAAC,KAAK;IAC9C,GAAG,CAAC,CAAC,aAAA,UAAU,EAAA,CAAC,GAAG,qCAAQ,CAAC,CAAC;oBAC3B,UAAU;QACV,aAAa,EAAE,YAAY;IAC7B,CAAC;IAED,MAAM,oEACH,CAAG;QACF,GAAG,EAAE,MAAM;WACP,UAAU;QACd,SAAS,EAAE,oCAAU,CACnB,gEAAM,EACN,CAAC;YACC,CAA4C,8CAAG,QAAQ;YACvD,CAA0C,2CAAE,QAAQ;QACtD,CAAC;OAEF,KAAK,uEACH,CAAG;QAAC,SAAS,EAAE,oCAAU,CAAC,gEAAM,EAAE,CAAqC;0EACrE,+BAAK,EAAK,UAAU,EAAG,KAAK,GAC5B,KAAK,CAAC,cAAc,uEAClB,sCAAY;QACX,KAAK,EAAE,CAAC;YACN,YAAY,EAAE,CAAC;gBACb,gBAAgB,EAAE,oCAAU,CAAC,gEAAM,EAAE,CAAqC;YAC5E,CAAC;QACH,CAAC;OACA,KAAK,CAAC,cAAc,GAGxB,cAAc,uEACZ,+BAAK;QAAC,WAAW,EAAC,CAAM;QAAC,gBAAgB,EAAE,oCAAU,CAAC,gEAAM,EAAE,CAAiC;0EAC7F,CAAM,SAAK,WAAW,EAAG,KAAK,CAAC,KAAK,CAAC,kBAAkB,CAAC,OAAO,EAAE,MAAM,yEAK/E,CAAG;WACE,UAAU;QACd,GAAG,EAAE,QAAQ;QACb,SAAS,EAAE,oCAAU,CACnB,gEAAM,EACN,CAAsB,uBAAE,CAAC;YACvB,CAAa,cAAE,UAAU;YACzB,CAAgC,iCAAE,QAAQ;QAC5C,CAAC;0EAGF,wCAAU;QACT,KAAK,EAAE,KAAK,CAAC,eAAe;QAC5B,SAAS,EAAE,SAAS,IAAI,cAAc;QACtC,UAAU,EAAE,UAAU;QACtB,UAAU,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC;QACnC,SAAS,EAAE,oCAAU,CAAC,gEAAM,EAAE,CAA6B;WACvD,UAAU;0EACb,CAAK;WAAK,UAAU;WAAM,UAAU;QAAE,GAAG,EAAE,QAAQ;QAAE,SAAS,EAAE,oCAAU,CAAC,gEAAM,EAAE,CAA6B;;AAK3H,CAAC;AAED,EAEG,AAFH;;CAEG,AAFH,EAEG,CACH,GAAG,CAAC,yCAAY,iBAAG,sCAAK,CAAC,UAAU,CAAC,iCAAW;;;;;;;;AG5I/C,GAAiD;AAAjD,wCAAiD,GAAG,CAAwC;;;;;;;SDsBnF,gCAAU,CAAC,KAA8B,EAAE,GAAsB,EAAE,CAAC;IAC3E,KAAK,GAAG,6CAAgB,CAAC,KAAK;IAC9B,GAAG,CAAC,CAAC,QACH,EAAqD,AAArD,mDAAqD;IACrD,KAAK,iBACL,YAAY,aACZ,QAAQ,MACL,UAAU,CACf,CAAC,GAAG,KAAK;IACT,GAAG,CAAC,KAAK,GAAG,2CAAkB,CAAC,KAAK;IACpC,GAAG,CAAC,QAAQ,GAAG,mBAAM,CAAyC,IAAI;IAClE,GAAG,CAAC,CAAC,aACH,UAAU,eACV,UAAU,EACZ,CAAC,GAAG,mCAAa,CAAC,UAAU,EAAE,KAAK,EAAE,QAAQ;IAE7C,EAAE,EAAE,KAAK,CAAC,WAAW,EACnB,OAAO,CAAC,IAAI,CAAC,CAA4L;IAG3M,MAAM,oEACH,2CAAa;WACR,UAAU;QACd,GAAG,EAAE,GAAG;QACR,QAAQ,EAAE,QAAQ;QAClB,UAAU,EAAE,UAAU;QACtB,UAAU,EAAE,UAAU;QACtB,cAAc,EAAE,oCAAU,CAAC,gEAAM,EAAE,CAAiC;;AAE1E,CAAC;AAED,EAEG,AAFH;;CAEG,AAFH,EAEG,CACH,KAAK,CAAC,yCAAW,iBAAG,sCAAK,CAAC,UAAU,CAAC,gCAAU;;","sources":["packages/@react-spectrum/color/src/index.ts","packages/@react-spectrum/color/src/ColorArea.tsx","packages/@react-spectrum/color/src/ColorThumb.tsx","packages/@adobe/spectrum-css-temp/components/colorhandle/vars.css","packages/@adobe/spectrum-css-temp/components/colorloupe/vars.css","packages/@adobe/spectrum-css-temp/components/colorarea/vars.css","packages/@react-spectrum/color/src/ColorWheel.tsx","packages/@adobe/spectrum-css-temp/components/colorwheel/vars.css","packages/@react-spectrum/color/src/ColorSlider.tsx","packages/@adobe/spectrum-css-temp/components/colorslider/vars.css","packages/@react-spectrum/color/src/ColorField.tsx","packages/@react-spectrum/color/src/colorfield.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\nexport {ColorArea} from './ColorArea';\nexport {ColorWheel} from './ColorWheel';\nexport {ColorSlider} from './ColorSlider';\nexport {ColorField} from './ColorField';\nexport type {SpectrumColorAreaProps, SpectrumColorFieldProps, SpectrumColorSliderProps, SpectrumColorWheelProps} from '@react-types/color';\n","/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumColorAreaProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorarea/vars.css';\nimport {useColorArea} from '@react-aria/color';\nimport {useColorAreaState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n let inputXRef = useRef(null);\n let inputYRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputXRef);\n\n let state = useColorAreaState(props);\n\n let {\n colorAreaProps,\n gradientProps,\n xInputProps,\n yInputProps,\n thumbProps\n } = useColorArea({...props, inputXRef, inputYRef, containerRef}, state);\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n {...colorAreaProps}\n className={\n classNames(\n styles,\n 'spectrum-ColorArea',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\n ref={containerRef}\n style={{\n ...colorAreaProps.style,\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n width: size,\n height: size\n }}>\n <div {...gradientProps} className={classNames(styles, 'spectrum-ColorArea-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n className={classNames(styles, 'spectrum-ColorArea-handle')}\n {...thumbProps}>\n <div role=\"presentation\">\n <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(xInputProps, focusProps)} ref={inputXRef} />\n <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(yInputProps, focusProps)} ref={inputYRef} />\n </div>\n </ColorThumb>\n </div>\n );\n}\n\n/**\n * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nlet _ColorArea = React.forwardRef(ColorArea) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;\nexport {_ColorArea as ColorArea};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport {Color} from '@react-types/color';\nimport {DOMProps} from '@react-types/shared';\nimport React, {ReactElement} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId} from '@react-aria/utils';\n\ninterface ColorThumbProps extends DOMProps {\n value: Color,\n isDisabled?: boolean,\n isDragging?: boolean, // shows the color loupe\n isFocused?: boolean, // makes the circle larger\n className?: string,\n children?: ReactElement\n}\n\nfunction ColorThumb(props: ColorThumbProps) {\n let {value, isDisabled, isDragging, isFocused, children, className = '', ...otherProps} = props;\n\n let patternId = useId();\n\n let valueCSS = value.toString('css');\n\n return (\n <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} {...otherProps}>\n <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />\n <svg className={classNames(stylesLoupe, 'spectrum-ColorLoupe', {'is-open': isDragging})} aria-hidden=\"true\">\n <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n </pattern>\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n fill={`url(#${patternId})`} />\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n fill={valueCSS} />\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n d=\"M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\" />\n </svg>\n {children}\n </div>\n );\n}\n\nexport {ColorThumb};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport React, {useCallback, useEffect, useRef, useState} from 'react';\nimport {SpectrumColorWheelProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheel} from '@react-aria/color';\nimport {useColorWheelState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useResizeObserver} from '@react-aria/utils';\n\nconst WHEEL_THICKNESS = 24;\n\nfunction ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n let inputRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputRef);\n\n let [wheelRadius, setWheelRadius] = useState<number>(0);\n let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n let resizeHandler = useCallback(() => {\n if (containerRef.current) {\n setWheelRadius(containerRef.current.offsetWidth / 2);\n let thickness = window.getComputedStyle(containerRef.current)\n .getPropertyValue('--spectrum-colorwheel-track-thickness');\n if (thickness) {\n setWheelThickness(parseInt(thickness, 10));\n }\n }\n }, [containerRef, setWheelRadius, setWheelThickness]);\n\n useEffect(() => {\n // the size observer's fallback to the window resize event doesn't fire on mount\n if (wheelRadius === 0) {\n resizeHandler();\n }\n }, [wheelRadius, resizeHandler]);\n\n useResizeObserver({\n ref: containerRef,\n onResize: resizeHandler\n });\n\n let state = useColorWheelState(props);\n\n let {trackProps, inputProps, thumbProps} = useColorWheel({\n ...props,\n innerRadius: wheelRadius - wheelThickness,\n outerRadius: wheelRadius\n }, state, inputRef);\n\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n className={\n classNames(\n styles,\n 'spectrum-ColorWheel',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\n ref={containerRef}\n style={{\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n // @ts-ignore\n 'width': size,\n 'height': size\n }}>\n <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n className={classNames(styles, 'spectrum-ColorWheel-handle')}\n {...thumbProps}>\n <input {...focusProps} className={classNames(styles, 'spectrum-ColorWheel-slider')} {...inputProps} ref={inputRef} />\n </ColorThumb>\n </div>\n );\n}\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nlet _ColorWheel = React.forwardRef(ColorWheel);\nexport {_ColorWheel as ColorWheel};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {Label} from '@react-spectrum/label';\nimport React, {useRef, useState} from 'react';\nimport {SpectrumColorSliderProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css';\nimport {useColorSlider} from '@react-aria/color';\nimport {useColorSliderState} from '@react-stately/color';\nimport {useFocus, useFocusVisible} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {\n isDisabled,\n channel,\n orientation,\n label,\n showValueLabel,\n 'aria-label': ariaLabel\n } = props;\n let vertical = orientation === 'vertical';\n\n let {styleProps} = useStyleProps(props);\n let {locale} = useLocale();\n\n let inputRef = useRef(null);\n let trackRef = useRef(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let state = useColorSliderState({...props, locale});\n\n // If vertical and a label is provided, use it as an aria-label instead.\n if (vertical && label) {\n ariaLabel = ariaLabel || (typeof label === 'string' ? label : undefined);\n label = null;\n }\n\n // If no external label, aria-label or aria-labelledby is provided,\n // default to displaying the localized channel value.\n // Specifically check if label is undefined. If label is `null` then display no visible label.\n // A default aria-label is provided by useColorSlider in that case.\n if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) {\n label = state.value.getChannelName(channel, locale);\n }\n\n // Show the value label by default if there is a visible label\n if (showValueLabel == null) {\n showValueLabel = !!label;\n }\n\n let {inputProps, thumbProps, trackProps, labelProps, outputProps} = useColorSlider({\n ...props,\n label,\n 'aria-label': ariaLabel,\n trackRef,\n inputRef\n }, state);\n\n let {isFocusVisible} = useFocusVisible();\n let [isFocused, setIsFocused] = useState(false);\n let {focusProps} = useFocus({\n isDisabled,\n onFocusChange: setIsFocused\n });\n\n return (\n <div\n ref={domRef}\n {...styleProps}\n className={classNames(\n styles,\n {\n 'spectrum-ColorSlider-container--horizontal': !vertical,\n 'spectrum-ColorSlider-container--vertical': vertical\n }\n )}>\n {label &&\n <div className={classNames(styles, 'spectrum-ColorSlider-labelContainer')}>\n <Label {...labelProps}>{label}</Label>\n {props.contextualHelp &&\n <SlotProvider\n slots={{\n actionButton: {\n UNSAFE_className: classNames(styles, 'spectrum-ColorSlider-contextualHelp')\n }\n }}>\n {props.contextualHelp}\n </SlotProvider>\n }\n {showValueLabel && (\n <Label elementType=\"span\" UNSAFE_className={classNames(styles, 'spectrum-ColorSlider-valueLabel')}>\n <output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output>\n </Label>\n )}\n </div>\n }\n <div\n {...trackProps}\n ref={trackRef}\n className={classNames(\n styles,\n 'spectrum-ColorSlider', {\n 'is-disabled': isDisabled,\n 'spectrum-ColorSlider--vertical': vertical\n }\n )\n }>\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocused && isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isThumbDragging(0)}\n className={classNames(styles, 'spectrum-ColorSlider-handle')}\n {...thumbProps}>\n <input {...inputProps} {...focusProps} ref={inputRef} className={classNames(styles, 'spectrum-ColorSlider-slider')} />\n </ColorThumb>\n </div>\n </div>\n );\n}\n\n/**\n * ColorSliders allow users to adjust an individual channel of a color value.\n */\nlet _ColorSlider = React.forwardRef(ColorSlider);\nexport {_ColorSlider as ColorSlider};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport React, {Ref, useRef} from 'react';\nimport {SpectrumColorFieldProps} from '@react-types/color';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorField} from '@react-aria/color';\nimport {useColorFieldState} from '@react-stately/color';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {\n props = useProviderProps(props);\n let {\n // These disabled props are handled by the state hook\n value, // eslint-disable-line @typescript-eslint/no-unused-vars\n defaultValue, // eslint-disable-line @typescript-eslint/no-unused-vars\n onChange, // eslint-disable-line @typescript-eslint/no-unused-vars\n ...otherProps\n } = props;\n let state = useColorFieldState(props);\n let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n let {\n labelProps,\n inputProps\n } = useColorField(otherProps, state, inputRef);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');\n }\n\n return (\n <TextFieldBase\n {...otherProps}\n ref={ref}\n inputRef={inputRef}\n labelProps={labelProps}\n inputProps={inputProps}\n inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n );\n}\n\n/**\n * ColorFields allow users to enter a color in #rrggbb hexadecimal format.\n */\nconst _ColorField = React.forwardRef(ColorField);\nexport {_ColorField as ColorField};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n.react-spectrum-ColorField-input {\n direction: ltr;\n text-align: start;\n}\n"],"names":[],"version":3,"file":"main.js.map"}
package/dist/module.js CHANGED
@@ -1,12 +1,11 @@
1
1
  import "./main.css";
2
- import {dimensionValue as $kF0Zw$dimensionValue, useStyleProps as $kF0Zw$useStyleProps, useFocusableRef as $kF0Zw$useFocusableRef, classNames as $kF0Zw$classNames} from "@react-spectrum/utils";
2
+ import {dimensionValue as $kF0Zw$dimensionValue, useStyleProps as $kF0Zw$useStyleProps, useFocusableRef as $kF0Zw$useFocusableRef, classNames as $kF0Zw$classNames, SlotProvider as $kF0Zw$SlotProvider} from "@react-spectrum/utils";
3
3
  import {mergeProps as $kF0Zw$mergeProps, useId as $kF0Zw$useId, useResizeObserver as $kF0Zw$useResizeObserver} from "@react-aria/utils";
4
4
  import $kF0Zw$react, {useRef as $kF0Zw$useRef, useState as $kF0Zw$useState, useCallback as $kF0Zw$useCallback, useEffect as $kF0Zw$useEffect} from "react";
5
5
  import {useColorArea as $kF0Zw$useColorArea, useColorWheel as $kF0Zw$useColorWheel, useColorSlider as $kF0Zw$useColorSlider, useColorField as $kF0Zw$useColorField} from "@react-aria/color";
6
6
  import {useColorAreaState as $kF0Zw$useColorAreaState, useColorWheelState as $kF0Zw$useColorWheelState, useColorSliderState as $kF0Zw$useColorSliderState, useColorFieldState as $kF0Zw$useColorFieldState} from "@react-stately/color";
7
7
  import {useFocusRing as $kF0Zw$useFocusRing} from "@react-aria/focus";
8
8
  import {useProviderProps as $kF0Zw$useProviderProps} from "@react-spectrum/provider";
9
- import {Flex as $kF0Zw$Flex} from "@react-spectrum/layout";
10
9
  import {Label as $kF0Zw$Label} from "@react-spectrum/label";
11
10
  import {useFocusVisible as $kF0Zw$useFocusVisible, useFocus as $kF0Zw$useFocus} from "@react-aria/interactions";
12
11
  import {useLocale as $kF0Zw$useLocale} from "@react-aria/i18n";
@@ -159,8 +158,8 @@ function $40046aa1a7ccb226$var$ColorArea(props, ref) {
159
158
  let { isDisabled: isDisabled } = props;
160
159
  let size = props.size && $kF0Zw$dimensionValue(props.size);
161
160
  let { styleProps: styleProps } = $kF0Zw$useStyleProps(props);
162
- let inputXRef = $kF0Zw$useRef();
163
- let inputYRef = $kF0Zw$useRef();
161
+ let inputXRef = $kF0Zw$useRef(null);
162
+ let inputYRef = $kF0Zw$useRef(null);
164
163
  let containerRef = $kF0Zw$useFocusableRef(ref, inputXRef);
165
164
  let state = $kF0Zw$useColorAreaState(props);
166
165
  let { colorAreaProps: colorAreaProps , gradientProps: gradientProps , xInputProps: xInputProps , yInputProps: yInputProps , thumbProps: thumbProps } = $kF0Zw$useColorArea({
@@ -254,7 +253,7 @@ function $3aac1c27203f04b5$var$ColorWheel(props, ref) {
254
253
  let { styleProps: styleProps } = $kF0Zw$useStyleProps(props);
255
254
  let inputRef = $kF0Zw$useRef(null);
256
255
  let containerRef = $kF0Zw$useFocusableRef(ref, inputRef);
257
- let [wheelRadius, setWheelRadius] = $kF0Zw$useState(null);
256
+ let [wheelRadius, setWheelRadius] = $kF0Zw$useState(0);
258
257
  let [wheelThickness, setWheelThickness] = $kF0Zw$useState($3aac1c27203f04b5$var$WHEEL_THICKNESS);
259
258
  let resizeHandler = $kF0Zw$useCallback(()=>{
260
259
  if (containerRef.current) {
@@ -269,7 +268,7 @@ function $3aac1c27203f04b5$var$ColorWheel(props, ref) {
269
268
  ]);
270
269
  $kF0Zw$useEffect(()=>{
271
270
  // the size observer's fallback to the window resize event doesn't fire on mount
272
- if (wheelRadius == null) resizeHandler();
271
+ if (wheelRadius === 0) resizeHandler();
273
272
  }, [
274
273
  wheelRadius,
275
274
  resizeHandler
@@ -323,7 +322,6 @@ function $3aac1c27203f04b5$var$ColorWheel(props, ref) {
323
322
 
324
323
 
325
324
 
326
-
327
325
  var $670e80c7e5915fb5$exports = {};
328
326
 
329
327
  $parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider", () => $670e80c7e5915fb5$export$a5f8b0989b27a604, (v) => $670e80c7e5915fb5$export$a5f8b0989b27a604 = v);
@@ -334,6 +332,9 @@ $parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-container--horiz
334
332
  $parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-container--vertical", () => $670e80c7e5915fb5$export$cd1c093289104c66, (v) => $670e80c7e5915fb5$export$cd1c093289104c66 = v);
335
333
  $parcel$export($670e80c7e5915fb5$exports, "is-disabled", () => $670e80c7e5915fb5$export$d35bc1e505d1ebbf, (v) => $670e80c7e5915fb5$export$d35bc1e505d1ebbf = v);
336
334
  $parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider--vertical", () => $670e80c7e5915fb5$export$83dcf61b398bfaf1, (v) => $670e80c7e5915fb5$export$83dcf61b398bfaf1 = v);
335
+ $parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-labelContainer", () => $670e80c7e5915fb5$export$65139e62047f0361, (v) => $670e80c7e5915fb5$export$65139e62047f0361 = v);
336
+ $parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-contextualHelp", () => $670e80c7e5915fb5$export$26ffe4cf5a5aa53c, (v) => $670e80c7e5915fb5$export$26ffe4cf5a5aa53c = v);
337
+ $parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-valueLabel", () => $670e80c7e5915fb5$export$c2fbec5a538c1f81, (v) => $670e80c7e5915fb5$export$c2fbec5a538c1f81 = v);
337
338
  var $670e80c7e5915fb5$export$a5f8b0989b27a604;
338
339
  var $670e80c7e5915fb5$export$e7dc768d35940237;
339
340
  var $670e80c7e5915fb5$export$8c273ba92fabe1f1;
@@ -342,6 +343,9 @@ var $670e80c7e5915fb5$export$33e97914f6746614;
342
343
  var $670e80c7e5915fb5$export$cd1c093289104c66;
343
344
  var $670e80c7e5915fb5$export$d35bc1e505d1ebbf;
344
345
  var $670e80c7e5915fb5$export$83dcf61b398bfaf1;
346
+ var $670e80c7e5915fb5$export$65139e62047f0361;
347
+ var $670e80c7e5915fb5$export$26ffe4cf5a5aa53c;
348
+ var $670e80c7e5915fb5$export$c2fbec5a538c1f81;
345
349
  $670e80c7e5915fb5$export$a5f8b0989b27a604 = "spectrum-ColorSlider_a5bb06";
346
350
  $670e80c7e5915fb5$export$e7dc768d35940237 = "is-focused_a5bb06";
347
351
  $670e80c7e5915fb5$export$8c273ba92fabe1f1 = "spectrum-ColorSlider-handle_a5bb06";
@@ -350,6 +354,9 @@ $670e80c7e5915fb5$export$33e97914f6746614 = "spectrum-ColorSlider-container--hor
350
354
  $670e80c7e5915fb5$export$cd1c093289104c66 = "spectrum-ColorSlider-container--vertical_a5bb06";
351
355
  $670e80c7e5915fb5$export$d35bc1e505d1ebbf = "is-disabled_a5bb06";
352
356
  $670e80c7e5915fb5$export$83dcf61b398bfaf1 = "spectrum-ColorSlider--vertical_a5bb06";
357
+ $670e80c7e5915fb5$export$65139e62047f0361 = "spectrum-ColorSlider-labelContainer_a5bb06";
358
+ $670e80c7e5915fb5$export$26ffe4cf5a5aa53c = "spectrum-ColorSlider-contextualHelp_a5bb06";
359
+ $670e80c7e5915fb5$export$c2fbec5a538c1f81 = "spectrum-ColorSlider-valueLabel_a5bb06";
353
360
 
354
361
 
355
362
 
@@ -363,8 +370,8 @@ function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
363
370
  let vertical = orientation === 'vertical';
364
371
  let { styleProps: styleProps } = $kF0Zw$useStyleProps(props);
365
372
  let { locale: locale } = $kF0Zw$useLocale();
366
- let inputRef = $kF0Zw$useRef();
367
- let trackRef = $kF0Zw$useRef();
373
+ let inputRef = $kF0Zw$useRef(null);
374
+ let trackRef = $kF0Zw$useRef(null);
368
375
  let domRef = $kF0Zw$useFocusableRef(ref, inputRef);
369
376
  let state = $kF0Zw$useColorSliderState({
370
377
  ...props,
@@ -372,7 +379,7 @@ function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
372
379
  });
373
380
  // If vertical and a label is provided, use it as an aria-label instead.
374
381
  if (vertical && label) {
375
- ariaLabel = ariaLabel || (typeof label === 'string' ? label : null);
382
+ ariaLabel = ariaLabel || (typeof label === 'string' ? label : undefined);
376
383
  label = null;
377
384
  }
378
385
  // If no external label, aria-label or aria-labelledby is provided,
@@ -395,11 +402,6 @@ function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
395
402
  isDisabled: isDisabled,
396
403
  onFocusChange: setIsFocused
397
404
  });
398
- let alignLabel;
399
- if (vertical) alignLabel = 'center';
400
- else if (label != null && showValueLabel) alignLabel = 'space-between';
401
- else if (label != null) alignLabel = 'flex-start';
402
- else if (showValueLabel) alignLabel = 'flex-end';
403
405
  return(/*#__PURE__*/ $kF0Zw$react.createElement("div", {
404
406
  ref: domRef,
405
407
  ...styleProps,
@@ -407,11 +409,17 @@ function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
407
409
  'spectrum-ColorSlider-container--horizontal': !vertical,
408
410
  'spectrum-ColorSlider-container--vertical': vertical
409
411
  })
410
- }, label && /*#__PURE__*/ $kF0Zw$react.createElement($kF0Zw$Flex, {
411
- direction: "row",
412
- justifyContent: alignLabel
413
- }, /*#__PURE__*/ $kF0Zw$react.createElement($kF0Zw$Label, labelProps, label), showValueLabel && /*#__PURE__*/ $kF0Zw$react.createElement($kF0Zw$Label, {
414
- elementType: "span"
412
+ }, label && /*#__PURE__*/ $kF0Zw$react.createElement("div", {
413
+ className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports)), 'spectrum-ColorSlider-labelContainer')
414
+ }, /*#__PURE__*/ $kF0Zw$react.createElement($kF0Zw$Label, labelProps, label), props.contextualHelp && /*#__PURE__*/ $kF0Zw$react.createElement($kF0Zw$SlotProvider, {
415
+ slots: {
416
+ actionButton: {
417
+ UNSAFE_className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports)), 'spectrum-ColorSlider-contextualHelp')
418
+ }
419
+ }
420
+ }, props.contextualHelp), showValueLabel && /*#__PURE__*/ $kF0Zw$react.createElement($kF0Zw$Label, {
421
+ elementType: "span",
422
+ UNSAFE_className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports)), 'spectrum-ColorSlider-valueLabel')
415
423
  }, /*#__PURE__*/ $kF0Zw$react.createElement("output", outputProps, state.value.formatChannelValue(channel, locale)))), /*#__PURE__*/ $kF0Zw$react.createElement("div", {
416
424
  ...trackProps,
417
425
  ref: trackRef,
@@ -456,7 +464,7 @@ function $0077d47e004328f0$var$ColorField(props, ref) {
456
464
  let { value: // These disabled props are handled by the state hook
457
465
  value , defaultValue: defaultValue , onChange: onChange , ...otherProps } = props;
458
466
  let state = $kF0Zw$useColorFieldState(props);
459
- let inputRef = $kF0Zw$useRef();
467
+ let inputRef = $kF0Zw$useRef(null);
460
468
  let { labelProps: labelProps , inputProps: inputProps } = $kF0Zw$useColorField(otherProps, state, inputRef);
461
469
  if (props.placeholder) console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');
462
470
  return(/*#__PURE__*/ $kF0Zw$react.createElement($kF0Zw$TextFieldBase, {
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/color/src/index.ts","packages/@react-spectrum/color/src/ColorArea.tsx","packages/@react-spectrum/color/src/ColorThumb.tsx","packages/@adobe/spectrum-css-temp/components/colorhandle/vars.css","packages/@adobe/spectrum-css-temp/components/colorloupe/vars.css","packages/@adobe/spectrum-css-temp/components/colorarea/vars.css","packages/@react-spectrum/color/src/ColorWheel.tsx","packages/@adobe/spectrum-css-temp/components/colorwheel/vars.css","packages/@react-spectrum/color/src/ColorSlider.tsx","packages/@adobe/spectrum-css-temp/components/colorslider/vars.css","packages/@react-spectrum/color/src/ColorField.tsx","packages/@react-spectrum/color/src/colorfield.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\nexport {ColorArea} from './ColorArea';\nexport {ColorWheel} from './ColorWheel';\nexport {ColorSlider} from './ColorSlider';\nexport {ColorField} from './ColorField';\nexport type {SpectrumColorAreaProps, SpectrumColorFieldProps, SpectrumColorSliderProps, SpectrumColorWheelProps} from '@react-types/color';\n","/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumColorAreaProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorarea/vars.css';\nimport {useColorArea} from '@react-aria/color';\nimport {useColorAreaState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n let inputXRef = useRef();\n let inputYRef = useRef();\n let containerRef = useFocusableRef(ref, inputXRef);\n\n let state = useColorAreaState(props);\n\n let {\n colorAreaProps,\n gradientProps,\n xInputProps,\n yInputProps,\n thumbProps\n } = useColorArea({...props, inputXRef, inputYRef, containerRef}, state);\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n {...colorAreaProps}\n className={\n classNames(\n styles,\n 'spectrum-ColorArea',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\n ref={containerRef}\n style={{\n ...colorAreaProps.style,\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n width: size,\n height: size\n }}>\n <div {...gradientProps} className={classNames(styles, 'spectrum-ColorArea-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n className={classNames(styles, 'spectrum-ColorArea-handle')}\n {...thumbProps}>\n <div role=\"presentation\">\n <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(xInputProps, focusProps)} ref={inputXRef} />\n <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(yInputProps, focusProps)} ref={inputYRef} />\n </div>\n </ColorThumb>\n </div>\n );\n}\n\n/**\n * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nlet _ColorArea = React.forwardRef(ColorArea) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;\nexport {_ColorArea as ColorArea};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport {Color} from '@react-types/color';\nimport {DOMProps} from '@react-types/shared';\nimport React, {ReactElement} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId} from '@react-aria/utils';\n\ninterface ColorThumbProps extends DOMProps {\n value: Color,\n isDisabled?: boolean,\n isDragging?: boolean, // shows the color loupe\n isFocused?: boolean, // makes the circle larger\n className?: string,\n children?: ReactElement\n}\n\nfunction ColorThumb(props: ColorThumbProps) {\n let {value, isDisabled, isDragging, isFocused, children, className = '', ...otherProps} = props;\n\n let patternId = useId();\n\n let valueCSS = value.toString('css');\n\n return (\n <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} {...otherProps}>\n <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />\n <svg className={classNames(stylesLoupe, 'spectrum-ColorLoupe', {'is-open': isDragging})} aria-hidden=\"true\">\n <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n </pattern>\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n fill={`url(#${patternId})`} />\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n fill={valueCSS} />\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n d=\"M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\" />\n </svg>\n {children}\n </div>\n );\n}\n\nexport {ColorThumb};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport React, {useCallback, useEffect, useRef, useState} from 'react';\nimport {SpectrumColorWheelProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheel} from '@react-aria/color';\nimport {useColorWheelState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useResizeObserver} from '@react-aria/utils';\n\nconst WHEEL_THICKNESS = 24;\n\nfunction ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n let inputRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputRef);\n\n let [wheelRadius, setWheelRadius] = useState<number | null>(null);\n let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n let resizeHandler = useCallback(() => {\n if (containerRef.current) {\n setWheelRadius(containerRef.current.offsetWidth / 2);\n let thickness = window.getComputedStyle(containerRef.current)\n .getPropertyValue('--spectrum-colorwheel-track-thickness');\n if (thickness) {\n setWheelThickness(parseInt(thickness, 10));\n }\n }\n }, [containerRef, setWheelRadius, setWheelThickness]);\n\n useEffect(() => {\n // the size observer's fallback to the window resize event doesn't fire on mount\n if (wheelRadius == null) {\n resizeHandler();\n }\n }, [wheelRadius, resizeHandler]);\n\n useResizeObserver({\n ref: containerRef,\n onResize: resizeHandler\n });\n\n let state = useColorWheelState(props);\n\n let {trackProps, inputProps, thumbProps} = useColorWheel({\n ...props,\n innerRadius: wheelRadius - wheelThickness,\n outerRadius: wheelRadius\n }, state, inputRef);\n\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n className={\n classNames(\n styles,\n 'spectrum-ColorWheel',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\n ref={containerRef}\n style={{\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n // @ts-ignore\n 'width': size,\n 'height': size\n }}>\n <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n className={classNames(styles, 'spectrum-ColorWheel-handle')}\n {...thumbProps}>\n <input {...focusProps} className={classNames(styles, 'spectrum-ColorWheel-slider')} {...inputProps} ref={inputRef} />\n </ColorThumb>\n </div>\n );\n}\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nlet _ColorWheel = React.forwardRef(ColorWheel);\nexport {_ColorWheel as ColorWheel};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {Flex} from '@react-spectrum/layout';\nimport {FocusableRef} from '@react-types/shared';\nimport {Label} from '@react-spectrum/label';\nimport React, {useRef, useState} from 'react';\nimport {SpectrumColorSliderProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css';\nimport {useColorSlider} from '@react-aria/color';\nimport {useColorSliderState} from '@react-stately/color';\nimport {useFocus, useFocusVisible} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {\n isDisabled,\n channel,\n orientation,\n label,\n showValueLabel,\n 'aria-label': ariaLabel\n } = props;\n let vertical = orientation === 'vertical';\n\n let {styleProps} = useStyleProps(props);\n let {locale} = useLocale();\n\n let inputRef = useRef();\n let trackRef = useRef();\n let domRef = useFocusableRef(ref, inputRef);\n\n let state = useColorSliderState({...props, locale});\n\n // If vertical and a label is provided, use it as an aria-label instead.\n if (vertical && label) {\n ariaLabel = ariaLabel || (typeof label === 'string' ? label : null);\n label = null;\n }\n\n // If no external label, aria-label or aria-labelledby is provided,\n // default to displaying the localized channel value.\n // Specifically check if label is undefined. If label is `null` then display no visible label.\n // A default aria-label is provided by useColorSlider in that case.\n if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) {\n label = state.value.getChannelName(channel, locale);\n }\n\n // Show the value label by default if there is a visible label\n if (showValueLabel == null) {\n showValueLabel = !!label;\n }\n\n let {inputProps, thumbProps, trackProps, labelProps, outputProps} = useColorSlider({\n ...props,\n label,\n 'aria-label': ariaLabel,\n trackRef,\n inputRef\n }, state);\n\n let {isFocusVisible} = useFocusVisible();\n let [isFocused, setIsFocused] = useState(false);\n let {focusProps} = useFocus({\n isDisabled,\n onFocusChange: setIsFocused\n });\n\n let alignLabel;\n if (vertical) {\n alignLabel = 'center';\n } else if (label != null && showValueLabel) {\n alignLabel = 'space-between';\n } else if (label != null) {\n alignLabel = 'flex-start';\n } else if (showValueLabel) {\n alignLabel = 'flex-end';\n }\n\n return (\n <div\n ref={domRef}\n {...styleProps}\n className={classNames(\n styles,\n {\n 'spectrum-ColorSlider-container--horizontal': !vertical,\n 'spectrum-ColorSlider-container--vertical': vertical\n }\n )}>\n {label &&\n <Flex direction=\"row\" justifyContent={alignLabel}>\n <Label {...labelProps}>{label}</Label>\n {showValueLabel && <Label elementType=\"span\"><output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output></Label>}\n </Flex>\n }\n <div\n {...trackProps}\n ref={trackRef}\n className={classNames(\n styles,\n 'spectrum-ColorSlider', {\n 'is-disabled': isDisabled,\n 'spectrum-ColorSlider--vertical': vertical\n }\n )\n }>\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocused && isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isThumbDragging(0)}\n className={classNames(styles, 'spectrum-ColorSlider-handle')}\n {...thumbProps}>\n <input {...inputProps} {...focusProps} ref={inputRef} className={classNames(styles, 'spectrum-ColorSlider-slider')} />\n </ColorThumb>\n </div>\n </div>\n );\n}\n\n/**\n * ColorSliders allow users to adjust an individual channel of a color value.\n */\nlet _ColorSlider = React.forwardRef(ColorSlider);\nexport {_ColorSlider as ColorSlider};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport React, {RefObject, useRef} from 'react';\nimport {SpectrumColorFieldProps} from '@react-types/color';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorField} from '@react-aria/color';\nimport {useColorFieldState} from '@react-stately/color';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorField(props: SpectrumColorFieldProps, ref: RefObject<TextFieldRef>) {\n props = useProviderProps(props);\n let {\n // These disabled props are handled by the state hook\n value, // eslint-disable-line @typescript-eslint/no-unused-vars\n defaultValue, // eslint-disable-line @typescript-eslint/no-unused-vars\n onChange, // eslint-disable-line @typescript-eslint/no-unused-vars\n ...otherProps\n } = props;\n let state = useColorFieldState(props);\n let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>();\n let {\n labelProps,\n inputProps\n } = useColorField(otherProps, state, inputRef);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');\n }\n\n return (\n <TextFieldBase\n {...otherProps}\n ref={ref}\n inputRef={inputRef}\n labelProps={labelProps}\n inputProps={inputProps}\n inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n );\n}\n\n/**\n * ColorFields allow users to enter a color in #rrggbb hexadecimal format.\n */\nconst _ColorField = React.forwardRef(ColorField);\nexport {_ColorField as ColorField};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n.react-spectrum-ColorField-input {\n direction: ltr;\n text-align: start;\n}\n"],"names":[],"version":3,"file":"module.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/color/src/index.ts","packages/@react-spectrum/color/src/ColorArea.tsx","packages/@react-spectrum/color/src/ColorThumb.tsx","packages/@adobe/spectrum-css-temp/components/colorhandle/vars.css","packages/@adobe/spectrum-css-temp/components/colorloupe/vars.css","packages/@adobe/spectrum-css-temp/components/colorarea/vars.css","packages/@react-spectrum/color/src/ColorWheel.tsx","packages/@adobe/spectrum-css-temp/components/colorwheel/vars.css","packages/@react-spectrum/color/src/ColorSlider.tsx","packages/@adobe/spectrum-css-temp/components/colorslider/vars.css","packages/@react-spectrum/color/src/ColorField.tsx","packages/@react-spectrum/color/src/colorfield.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\nexport {ColorArea} from './ColorArea';\nexport {ColorWheel} from './ColorWheel';\nexport {ColorSlider} from './ColorSlider';\nexport {ColorField} from './ColorField';\nexport type {SpectrumColorAreaProps, SpectrumColorFieldProps, SpectrumColorSliderProps, SpectrumColorWheelProps} from '@react-types/color';\n","/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumColorAreaProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorarea/vars.css';\nimport {useColorArea} from '@react-aria/color';\nimport {useColorAreaState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n let inputXRef = useRef(null);\n let inputYRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputXRef);\n\n let state = useColorAreaState(props);\n\n let {\n colorAreaProps,\n gradientProps,\n xInputProps,\n yInputProps,\n thumbProps\n } = useColorArea({...props, inputXRef, inputYRef, containerRef}, state);\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n {...colorAreaProps}\n className={\n classNames(\n styles,\n 'spectrum-ColorArea',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\n ref={containerRef}\n style={{\n ...colorAreaProps.style,\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n width: size,\n height: size\n }}>\n <div {...gradientProps} className={classNames(styles, 'spectrum-ColorArea-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n className={classNames(styles, 'spectrum-ColorArea-handle')}\n {...thumbProps}>\n <div role=\"presentation\">\n <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(xInputProps, focusProps)} ref={inputXRef} />\n <input className={classNames(styles, 'spectrum-ColorArea-slider')} {...mergeProps(yInputProps, focusProps)} ref={inputYRef} />\n </div>\n </ColorThumb>\n </div>\n );\n}\n\n/**\n * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.\n */\nlet _ColorArea = React.forwardRef(ColorArea) as (props: SpectrumColorAreaProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;\nexport {_ColorArea as ColorArea};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport {Color} from '@react-types/color';\nimport {DOMProps} from '@react-types/shared';\nimport React, {ReactElement} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId} from '@react-aria/utils';\n\ninterface ColorThumbProps extends DOMProps {\n value: Color,\n isDisabled?: boolean,\n isDragging?: boolean, // shows the color loupe\n isFocused?: boolean, // makes the circle larger\n className?: string,\n children?: ReactElement\n}\n\nfunction ColorThumb(props: ColorThumbProps) {\n let {value, isDisabled, isDragging, isFocused, children, className = '', ...otherProps} = props;\n\n let patternId = useId();\n\n let valueCSS = value.toString('css');\n\n return (\n <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} {...otherProps}>\n <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />\n <svg className={classNames(stylesLoupe, 'spectrum-ColorLoupe', {'is-open': isDragging})} aria-hidden=\"true\">\n <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n </pattern>\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n fill={`url(#${patternId})`} />\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n fill={valueCSS} />\n <path\n className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n d=\"M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\" />\n </svg>\n {children}\n </div>\n );\n}\n\nexport {ColorThumb};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport React, {useCallback, useEffect, useRef, useState} from 'react';\nimport {SpectrumColorWheelProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheel} from '@react-aria/color';\nimport {useColorWheelState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useResizeObserver} from '@react-aria/utils';\n\nconst WHEEL_THICKNESS = 24;\n\nfunction ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n let inputRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputRef);\n\n let [wheelRadius, setWheelRadius] = useState<number>(0);\n let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n let resizeHandler = useCallback(() => {\n if (containerRef.current) {\n setWheelRadius(containerRef.current.offsetWidth / 2);\n let thickness = window.getComputedStyle(containerRef.current)\n .getPropertyValue('--spectrum-colorwheel-track-thickness');\n if (thickness) {\n setWheelThickness(parseInt(thickness, 10));\n }\n }\n }, [containerRef, setWheelRadius, setWheelThickness]);\n\n useEffect(() => {\n // the size observer's fallback to the window resize event doesn't fire on mount\n if (wheelRadius === 0) {\n resizeHandler();\n }\n }, [wheelRadius, resizeHandler]);\n\n useResizeObserver({\n ref: containerRef,\n onResize: resizeHandler\n });\n\n let state = useColorWheelState(props);\n\n let {trackProps, inputProps, thumbProps} = useColorWheel({\n ...props,\n innerRadius: wheelRadius - wheelThickness,\n outerRadius: wheelRadius\n }, state, inputRef);\n\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n className={\n classNames(\n styles,\n 'spectrum-ColorWheel',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\n ref={containerRef}\n style={{\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n // @ts-ignore\n 'width': size,\n 'height': size\n }}>\n <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n className={classNames(styles, 'spectrum-ColorWheel-handle')}\n {...thumbProps}>\n <input {...focusProps} className={classNames(styles, 'spectrum-ColorWheel-slider')} {...inputProps} ref={inputRef} />\n </ColorThumb>\n </div>\n );\n}\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nlet _ColorWheel = React.forwardRef(ColorWheel);\nexport {_ColorWheel as ColorWheel};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {Label} from '@react-spectrum/label';\nimport React, {useRef, useState} from 'react';\nimport {SpectrumColorSliderProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css';\nimport {useColorSlider} from '@react-aria/color';\nimport {useColorSliderState} from '@react-stately/color';\nimport {useFocus, useFocusVisible} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n\n let {\n isDisabled,\n channel,\n orientation,\n label,\n showValueLabel,\n 'aria-label': ariaLabel\n } = props;\n let vertical = orientation === 'vertical';\n\n let {styleProps} = useStyleProps(props);\n let {locale} = useLocale();\n\n let inputRef = useRef(null);\n let trackRef = useRef(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let state = useColorSliderState({...props, locale});\n\n // If vertical and a label is provided, use it as an aria-label instead.\n if (vertical && label) {\n ariaLabel = ariaLabel || (typeof label === 'string' ? label : undefined);\n label = null;\n }\n\n // If no external label, aria-label or aria-labelledby is provided,\n // default to displaying the localized channel value.\n // Specifically check if label is undefined. If label is `null` then display no visible label.\n // A default aria-label is provided by useColorSlider in that case.\n if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) {\n label = state.value.getChannelName(channel, locale);\n }\n\n // Show the value label by default if there is a visible label\n if (showValueLabel == null) {\n showValueLabel = !!label;\n }\n\n let {inputProps, thumbProps, trackProps, labelProps, outputProps} = useColorSlider({\n ...props,\n label,\n 'aria-label': ariaLabel,\n trackRef,\n inputRef\n }, state);\n\n let {isFocusVisible} = useFocusVisible();\n let [isFocused, setIsFocused] = useState(false);\n let {focusProps} = useFocus({\n isDisabled,\n onFocusChange: setIsFocused\n });\n\n return (\n <div\n ref={domRef}\n {...styleProps}\n className={classNames(\n styles,\n {\n 'spectrum-ColorSlider-container--horizontal': !vertical,\n 'spectrum-ColorSlider-container--vertical': vertical\n }\n )}>\n {label &&\n <div className={classNames(styles, 'spectrum-ColorSlider-labelContainer')}>\n <Label {...labelProps}>{label}</Label>\n {props.contextualHelp &&\n <SlotProvider\n slots={{\n actionButton: {\n UNSAFE_className: classNames(styles, 'spectrum-ColorSlider-contextualHelp')\n }\n }}>\n {props.contextualHelp}\n </SlotProvider>\n }\n {showValueLabel && (\n <Label elementType=\"span\" UNSAFE_className={classNames(styles, 'spectrum-ColorSlider-valueLabel')}>\n <output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output>\n </Label>\n )}\n </div>\n }\n <div\n {...trackProps}\n ref={trackRef}\n className={classNames(\n styles,\n 'spectrum-ColorSlider', {\n 'is-disabled': isDisabled,\n 'spectrum-ColorSlider--vertical': vertical\n }\n )\n }>\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocused && isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isThumbDragging(0)}\n className={classNames(styles, 'spectrum-ColorSlider-handle')}\n {...thumbProps}>\n <input {...inputProps} {...focusProps} ref={inputRef} className={classNames(styles, 'spectrum-ColorSlider-slider')} />\n </ColorThumb>\n </div>\n </div>\n );\n}\n\n/**\n * ColorSliders allow users to adjust an individual channel of a color value.\n */\nlet _ColorSlider = React.forwardRef(ColorSlider);\nexport {_ColorSlider as ColorSlider};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport React, {Ref, useRef} from 'react';\nimport {SpectrumColorFieldProps} from '@react-types/color';\nimport styles from './colorfield.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useColorField} from '@react-aria/color';\nimport {useColorFieldState} from '@react-stately/color';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {\n props = useProviderProps(props);\n let {\n // These disabled props are handled by the state hook\n value, // eslint-disable-line @typescript-eslint/no-unused-vars\n defaultValue, // eslint-disable-line @typescript-eslint/no-unused-vars\n onChange, // eslint-disable-line @typescript-eslint/no-unused-vars\n ...otherProps\n } = props;\n let state = useColorFieldState(props);\n let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);\n let {\n labelProps,\n inputProps\n } = useColorField(otherProps, state, inputRef);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');\n }\n\n return (\n <TextFieldBase\n {...otherProps}\n ref={ref}\n inputRef={inputRef}\n labelProps={labelProps}\n inputProps={inputProps}\n inputClassName={classNames(styles, 'react-spectrum-ColorField-input')} />\n );\n}\n\n/**\n * ColorFields allow users to enter a color in #rrggbb hexadecimal format.\n */\nconst _ColorField = React.forwardRef(ColorField);\nexport {_ColorField as ColorField};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n.react-spectrum-ColorField-input {\n direction: ltr;\n text-align: start;\n}\n"],"names":[],"version":3,"file":"module.js.map"}
package/dist/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;ACoFA;;GAEG;AACH,OAAA,IAAI,mBAAoD,sBAAsB,GAAG;IAAC,GAAG,CAAC,EAAE,aAAa,cAAc,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;ACmBvI;;GAEG;AACH,OAAA,IAAI,2KAA0C,CAAC;AC0B/C;;GAEG;AACH,OAAA,IAAI,6KAA4C,CAAC;ACrFjD;;GAEG;AACH,OAAA,MAAM,wGAA0C,CAAC;ACvCjD,YAAY,EAAC,sBAAsB,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,EAAC,MAAM,oBAAoB,CAAC","sources":["packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorThumb.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorArea.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorWheel.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorSlider.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorField.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/index.ts","packages/@react-spectrum/color/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\nexport {ColorArea} from './ColorArea';\nexport {ColorWheel} from './ColorWheel';\nexport {ColorSlider} from './ColorSlider';\nexport {ColorField} from './ColorField';\nexport type {SpectrumColorAreaProps, SpectrumColorFieldProps, SpectrumColorSliderProps, SpectrumColorWheelProps} from '@react-types/color';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
1
+ {"mappings":";;;;ACoFA;;GAEG;AACH,OAAA,IAAI,mBAAoD,sBAAsB,GAAG;IAAC,GAAG,CAAC,EAAE,aAAa,cAAc,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;ACmBvI;;GAEG;AACH,OAAA,IAAI,2KAA0C,CAAC;AC4B/C;;GAEG;AACH,OAAA,IAAI,6KAA4C,CAAC;ACvFjD;;GAEG;AACH,OAAA,MAAM,wGAA0C,CAAC;ACvCjD,YAAY,EAAC,sBAAsB,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,EAAC,MAAM,oBAAoB,CAAC","sources":["packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorThumb.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorArea.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorWheel.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorSlider.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorField.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/index.ts","packages/@react-spectrum/color/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\nexport {ColorArea} from './ColorArea';\nexport {ColorWheel} from './ColorWheel';\nexport {ColorSlider} from './ColorSlider';\nexport {ColorField} from './ColorField';\nexport type {SpectrumColorAreaProps, SpectrumColorFieldProps, SpectrumColorSliderProps, SpectrumColorWheelProps} from '@react-types/color';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-spectrum/color",
3
- "version": "3.0.0-beta.15",
3
+ "version": "3.0.0-beta.17",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -32,23 +32,23 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@babel/runtime": "^7.6.2",
35
- "@react-aria/color": "3.0.0-beta.15",
36
- "@react-aria/focus": "^3.8.0",
37
- "@react-aria/i18n": "^3.6.0",
38
- "@react-aria/interactions": "^3.11.0",
39
- "@react-aria/slider": "^3.2.1",
40
- "@react-aria/utils": "^3.13.3",
41
- "@react-spectrum/label": "^3.7.1",
42
- "@react-spectrum/layout": "^3.4.1",
43
- "@react-spectrum/textfield": "^3.7.0",
44
- "@react-spectrum/utils": "^3.7.3",
45
- "@react-stately/color": "^3.1.1",
46
- "@react-stately/slider": "^3.2.1",
35
+ "@react-aria/color": "3.0.0-beta.17",
36
+ "@react-aria/focus": "^3.10.0",
37
+ "@react-aria/i18n": "^3.6.2",
38
+ "@react-aria/interactions": "^3.13.0",
39
+ "@react-aria/slider": "^3.2.3",
40
+ "@react-aria/utils": "^3.14.1",
41
+ "@react-spectrum/label": "^3.9.0",
42
+ "@react-spectrum/layout": "^3.4.3",
43
+ "@react-spectrum/textfield": "^3.9.0",
44
+ "@react-spectrum/utils": "^3.8.0",
45
+ "@react-stately/color": "^3.2.1",
46
+ "@react-stately/slider": "^3.2.3",
47
47
  "@react-stately/utils": "^3.5.1",
48
- "@react-types/color": "3.0.0-beta.12",
49
- "@react-types/shared": "^3.14.1",
50
- "@react-types/slider": "^3.2.1",
51
- "@react-types/textfield": "^3.5.3"
48
+ "@react-types/color": "3.0.0-beta.14",
49
+ "@react-types/shared": "^3.16.0",
50
+ "@react-types/slider": "^3.3.1",
51
+ "@react-types/textfield": "^3.6.1"
52
52
  },
53
53
  "devDependencies": {
54
54
  "@adobe/spectrum-css-temp": "3.0.0-alpha.1"
@@ -61,5 +61,5 @@
61
61
  "publishConfig": {
62
62
  "access": "public"
63
63
  },
64
- "gitHead": "b03ef51e6317547dd0a840f151e59d039b1e1fd3"
64
+ "gitHead": "2954307ddbefe149241685440c81f80ece6b2c83"
65
65
  }
package/src/ColorArea.tsx CHANGED
@@ -29,8 +29,8 @@ function ColorArea(props: SpectrumColorAreaProps, ref: FocusableRef<HTMLDivEleme
29
29
  let size = props.size && dimensionValue(props.size);
30
30
  let {styleProps} = useStyleProps(props);
31
31
 
32
- let inputXRef = useRef();
33
- let inputYRef = useRef();
32
+ let inputXRef = useRef(null);
33
+ let inputYRef = useRef(null);
34
34
  let containerRef = useFocusableRef(ref, inputXRef);
35
35
 
36
36
  let state = useColorAreaState(props);
package/src/ColorField.tsx CHANGED
@@ -11,7 +11,7 @@
11
11
  */
12
12
 
13
13
  import {classNames} from '@react-spectrum/utils';
14
- import React, {RefObject, useRef} from 'react';
14
+ import React, {Ref, useRef} from 'react';
15
15
  import {SpectrumColorFieldProps} from '@react-types/color';
16
16
  import styles from './colorfield.css';
17
17
  import {TextFieldBase} from '@react-spectrum/textfield';
@@ -20,7 +20,7 @@ import {useColorField} from '@react-aria/color';
20
20
  import {useColorFieldState} from '@react-stately/color';
21
21
  import {useProviderProps} from '@react-spectrum/provider';
22
22
 
23
- function ColorField(props: SpectrumColorFieldProps, ref: RefObject<TextFieldRef>) {
23
+ function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {
24
24
  props = useProviderProps(props);
25
25
  let {
26
26
  // These disabled props are handled by the state hook
@@ -30,7 +30,7 @@ function ColorField(props: SpectrumColorFieldProps, ref: RefObject<TextFieldRef>
30
30
  ...otherProps
31
31
  } = props;
32
32
  let state = useColorFieldState(props);
33
- let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>();
33
+ let inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);
34
34
  let {
35
35
  labelProps,
36
36
  inputProps
package/src/ColorSlider.tsx CHANGED
@@ -10,9 +10,8 @@
10
10
  * governing permissions and limitations under the License.
11
11
  */
12
12
 
13
- import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
13
+ import {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
14
14
  import {ColorThumb} from './ColorThumb';
15
- import {Flex} from '@react-spectrum/layout';
16
15
  import {FocusableRef} from '@react-types/shared';
17
16
  import {Label} from '@react-spectrum/label';
18
17
  import React, {useRef, useState} from 'react';
@@ -40,15 +39,15 @@ function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivE
40
39
  let {styleProps} = useStyleProps(props);
41
40
  let {locale} = useLocale();
42
41
 
43
- let inputRef = useRef();
44
- let trackRef = useRef();
42
+ let inputRef = useRef(null);
43
+ let trackRef = useRef(null);
45
44
  let domRef = useFocusableRef(ref, inputRef);
46
45
 
47
46
  let state = useColorSliderState({...props, locale});
48
47
 
49
48
  // If vertical and a label is provided, use it as an aria-label instead.
50
49
  if (vertical && label) {
51
- ariaLabel = ariaLabel || (typeof label === 'string' ? label : null);
50
+ ariaLabel = ariaLabel || (typeof label === 'string' ? label : undefined);
52
51
  label = null;
53
52
  }
54
53
 
@@ -80,17 +79,6 @@ function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivE
80
79
  onFocusChange: setIsFocused
81
80
  });
82
81
 
83
- let alignLabel;
84
- if (vertical) {
85
- alignLabel = 'center';
86
- } else if (label != null && showValueLabel) {
87
- alignLabel = 'space-between';
88
- } else if (label != null) {
89
- alignLabel = 'flex-start';
90
- } else if (showValueLabel) {
91
- alignLabel = 'flex-end';
92
- }
93
-
94
82
  return (
95
83
  <div
96
84
  ref={domRef}
@@ -103,10 +91,24 @@ function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivE
103
91
  }
104
92
  )}>
105
93
  {label &&
106
- <Flex direction="row" justifyContent={alignLabel}>
94
+ <div className={classNames(styles, 'spectrum-ColorSlider-labelContainer')}>
107
95
  <Label {...labelProps}>{label}</Label>
108
- {showValueLabel && <Label elementType="span"><output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output></Label>}
109
- </Flex>
96
+ {props.contextualHelp &&
97
+ <SlotProvider
98
+ slots={{
99
+ actionButton: {
100
+ UNSAFE_className: classNames(styles, 'spectrum-ColorSlider-contextualHelp')
101
+ }
102
+ }}>
103
+ {props.contextualHelp}
104
+ </SlotProvider>
105
+ }
106
+ {showValueLabel && (
107
+ <Label elementType="span" UNSAFE_className={classNames(styles, 'spectrum-ColorSlider-valueLabel')}>
108
+ <output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output>
109
+ </Label>
110
+ )}
111
+ </div>
110
112
  }
111
113
  <div
112
114
  {...trackProps}
package/src/ColorWheel.tsx CHANGED
@@ -34,7 +34,7 @@ function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivEle
34
34
  let inputRef = useRef(null);
35
35
  let containerRef = useFocusableRef(ref, inputRef);
36
36
 
37
- let [wheelRadius, setWheelRadius] = useState<number | null>(null);
37
+ let [wheelRadius, setWheelRadius] = useState<number>(0);
38
38
  let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);
39
39
 
40
40
  let resizeHandler = useCallback(() => {
@@ -50,7 +50,7 @@ function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivEle
50
50
 
51
51
  useEffect(() => {
52
52
  // the size observer's fallback to the window resize event doesn't fire on mount
53
- if (wheelRadius == null) {
53
+ if (wheelRadius === 0) {
54
54
  resizeHandler();
55
55
  }
56
56
  }, [wheelRadius, resizeHandler]);