Merge branch 'master' into fix/rgba-calc-error

Author: t-hamano

CHANGELOG.md

@@ -1,3 +1,9 @@
+### 5.6.0
+
+- Add new `HexAlphaColorPicker` component (via #186)
+- Fix types export for TYpeScript 4.7. Thanks to @AnotherHermit (via #189)
+- Improve ARIA attribute values for sliders. Thanks to @aitchiss (via #177)
+
 ### 5.5.1
 
 - Fix embedding into `<iframe>`. The component is rendered correctly by libraries like `react-frame-component`. Thanks to @leoc4e (via #166)

README.md

@@ -89,6 +89,7 @@ We provide 12 additional color picker components for different color models, unl
 | Import                      | Value example                      |
 | --------------------------- | ---------------------------------- |
 | `{ HexColorPicker }`        | `"#ffffff"`                        |
+| `{ HexAlphaColorPicker }`   | `"#ffffff88"`                      |
 | `{ RgbColorPicker }`        | `{ r: 255, g: 255, b: 255 }`       |
 | `{ RgbaColorPicker }`       | `{ r: 255, g: 255, b: 255, a: 1 }` |
 | `{ RgbStringColorPicker }`  | `"rgb(255, 255, 255)"`             |

demo/src/components/DevTools.tsx

@@ -3,6 +3,7 @@ import { PickerPreview } from "./PickerPreview";
 import {
   // HEX
   HexColorPicker,
+  HexAlphaColorPicker,
   // RGB
   RgbColor,
   RgbColorPicker,
@@ -33,6 +34,11 @@ export const DevTools = (): JSX.Element => {
   return (
     <div>
       <PickerPreview<string> title="HEX" PickerComponent={HexColorPicker} initialColor="#406090" />
+      <PickerPreview<string>
+        title="HEX Alpha"
+        PickerComponent={HexAlphaColorPicker}
+        initialColor="#40609088"
+      />
       <PickerPreview<RgbColor>
         title="RGB"
         PickerComponent={RgbColorPicker}

demo/src/components/PickerPreview.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import React, { useState } from "react";
 import Frame from "react-frame-component";
 import { HexColorInput } from "../../../src";
@@ -33,9 +34,10 @@ export function PickerPreview<T extends AnyColor>({
         <Wrapper>
           <PickerComponent color={color} onChange={handleChange} />
         </Wrapper>
-        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-        {/* @ts-ignore */}
-        {title === "HEX" && <HexColorInput color={color} onChange={handleChange} prefixed alpha />}
+        {title.startsWith("HEX") && (
+          // @ts-ignore
+          <HexColorInput color={color} onChange={handleChange} prefixed alpha />
+        )}
       </PreviewDemo>
       <PreviewOutput>{JSON.stringify(color)}</PreviewOutput>
     </PreviewContainer>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-colorful",
-  "version": "5.5.1",
+  "version": "5.6.0",
   "description": "🎨 A tiny (2,8 KB) color picker component for React and Preact apps. Fast, well-tested, dependency-free, mobile-friendly and accessible",
   "source": "src/index.ts",
   "main": "dist/index.js",
@@ -14,7 +14,8 @@
       "umd": "./dist/index.umd.js",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js",
-      "default": "./dist/index.module.js"
+      "default": "./dist/index.module.js",
+      "types": "./dist/index.d.ts"
     }
   },
   "scripts": {
@@ -108,7 +109,7 @@
       "path": "dist/index.module.js",
       "name": "RgbaStringColorPicker",
       "import": "{ RgbaStringColorPicker }",
-      "limit": "3 KB"
+      "limit": "3.1 KB"
     },
     {
       "path": "dist/index.module.js",

package.json

@@ -0,0 +1,17 @@
+import React from "react";
+
+import { AlphaColorPicker } from "./common/AlphaColorPicker";
+import { ColorModel, ColorPickerBaseProps } from "../types";
+import { equalHex } from "../utils/compare";
+import { hexToHsva, hsvaToHex } from "../utils/convert";
+
+const colorModel: ColorModel<string> = {
+  defaultColor: "0001",
+  toHsva: hexToHsva,
+  fromHsva: hsvaToHex,
+  equal: equalHex,
+};
+
+export const HexAlphaColorPicker = (props: Partial<ColorPickerBaseProps<string>>): JSX.Element => (
+  <AlphaColorPicker {...props} colorModel={colorModel} />
+);

src/components/HexAlphaColorPicker.tsx

@@ -19,7 +19,7 @@ export const HexColorInput = (props: HexColorInputProps): JSX.Element => {
 
   /** Escapes all non-hexadecimal characters including "#" */
   const escape = useCallback(
-    (value: string) => value.replace(/([^0-9A-F]+)/gi, "").substr(0, alpha ? 8 : 6),
+    (value: string) => value.replace(/([^0-9A-F]+)/gi, "").substring(0, alpha ? 8 : 6),
     [alpha]
   );
 

src/components/HexColorInput.tsx

@@ -8,7 +8,7 @@ import { hexToHsva, hsvaToHex } from "../utils/convert";
 const colorModel: ColorModel<string> = {
   defaultColor: "000",
   toHsva: hexToHsva,
-  fromHsva: hsvaToHex,
+  fromHsva: ({ h, s, v }) => hsvaToHex({ h, s, v, a: 1 }),
   equal: equalHex,
 };
 

src/components/HexColorPicker.tsx

@@ -35,6 +35,7 @@ export const Alpha = ({ className, hsva, onChange }: Props): JSX.Element => {
   };
 
   const nodeClassName = formatClassName(["react-colorful__alpha", className]);
+  const ariaValue = round(hsva.a * 100);
 
   return (
     <div className={nodeClassName}>
@@ -43,7 +44,10 @@ export const Alpha = ({ className, hsva, onChange }: Props): JSX.Element => {
         onMove={handleMove}
         onKey={handleKey}
         aria-label="Alpha"
-        aria-valuetext={`${round(hsva.a * 100)}%`}
+        aria-valuetext={`${ariaValue}%`}
+        aria-valuenow={ariaValue}
+        aria-valuemin="0"
+        aria-valuemax="100"
       >
         <Pointer
           className="react-colorful__alpha-pointer"