draft-components 1.0.0 → 1.1.1

package/cjs/components/color-picker/color-picker-button.cjs

@@ -3,14 +3,14 @@
 const jsxRuntime = require('react/jsx-runtime');
 const reactHelpers = require('../../lib/react-helpers.cjs');
 
-function ColorPickerButton({ style, className, label, name, color, value, checked, onChangeValue, }) {
+function ColorPickerButton({ style, className, label, name, color, value, checked, defaultChecked, onChange, onChangeValue, }) {
     const customProperties = {
         '--dc-color-picker-btn-color': color,
     };
-    return (jsxRuntime.jsxs("label", { style: { ...customProperties, ...style }, className: reactHelpers.classNames(className, {
-            'dc-color-picker__btn': true,
-            'dc-color-picker__btn_checked': checked,
-        }), children: [jsxRuntime.jsx("input", { type: "radio", name: name, value: value, checked: checked, onChange: () => onChangeValue(value) }), label] }));
+    return (jsxRuntime.jsxs("label", { style: { ...customProperties, ...style }, className: reactHelpers.classNames('dc-color-picker__btn', className), children: [jsxRuntime.jsx("input", { type: "radio", name: name, value: value, checked: checked, defaultChecked: defaultChecked, onChange: (event) => {
+                    onChange?.(event);
+                    onChangeValue?.(value);
+                } }), jsxRuntime.jsx("span", { className: "dc-color-picker__btn-check", "aria-hidden": true }), label] }));
 }
 
 exports.ColorPickerButton = ColorPickerButton;

package/cjs/components/color-picker/color-picker.cjs

@@ -4,11 +4,21 @@ const jsxRuntime = require('react/jsx-runtime');
 const reactHelpers = require('../../lib/react-helpers.cjs');
 const colorPickerButton = require('./color-picker-button.cjs');
 
-function ColorPicker({ className, name, options, value, disabled, onChangeValue, ...props }) {
+function ColorPicker({ className, name, disabled, options, value, defaultValue, onChange, onChangeValue, ...props }) {
     return (jsxRuntime.jsx("fieldset", { ...props, disabled: disabled, className: reactHelpers.classNames(className, {
             'dc-color-picker': true,
             'dc-color-picker_disabled': disabled,
-        }), children: options.map((option) => (jsxRuntime.jsx(colorPickerButton.ColorPickerButton, { name: name, label: option.label, color: option.color, value: option.value, checked: option.value === value, onChangeValue: onChangeValue }, option.value))) }));
+        }), children: options.map((option) => {
+            let checked;
+            let defaultChecked;
+            if (value !== undefined) {
+                checked = option.value === value;
+            }
+            else if (defaultValue !== undefined) {
+                defaultChecked = option.value === defaultValue;
+            }
+            return (jsxRuntime.jsx(colorPickerButton.ColorPickerButton, { name: name, label: option.label, color: option.color, value: option.value, checked: checked, defaultChecked: defaultChecked, onChange: onChange, onChangeValue: onChangeValue }, option.value));
+        }) }));
 }
 
 exports.ColorPicker = ColorPicker;

package/css/draft-components.css

@@ -1438,6 +1438,8 @@
   color: var(--dc-textarea-text-color);
   min-width: 192px;
   min-height: var(--dc-textarea-leading);
+  margin-top: 0;
+  margin-bottom: 0;
   padding: var(--dc-textarea-padding-y) var(--dc-textarea-padding-x);
   border: none;
   background: none;
@@ -2519,11 +2521,18 @@
   clip: rect(0 0 0 0);
 }
 
-.dc-color-picker__btn_checked::after {
-  content: "";
+.dc-color-picker__btn > input + .dc-color-picker__btn-check {
+  display: none;
+}
+
+.dc-color-picker__btn > input:checked + .dc-color-picker__btn-check {
+  position: absolute;
+  top: 50%;
+  left: 50%;
   display: inline-block;
   width: 38%;
   height: 38%;
+  transform: translate(-50%, -50%);
   border-radius: 50%;
   background: var(--dc-color-picker-btn-check-color);
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

package/esm/components/color-picker/color-picker-button.js

@@ -1,14 +1,14 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { classNames } from '../../lib/react-helpers.js';
 
-function ColorPickerButton({ style, className, label, name, color, value, checked, onChangeValue, }) {
+function ColorPickerButton({ style, className, label, name, color, value, checked, defaultChecked, onChange, onChangeValue, }) {
     const customProperties = {
         '--dc-color-picker-btn-color': color,
     };
-    return (jsxs("label", { style: { ...customProperties, ...style }, className: classNames(className, {
-            'dc-color-picker__btn': true,
-            'dc-color-picker__btn_checked': checked,
-        }), children: [jsx("input", { type: "radio", name: name, value: value, checked: checked, onChange: () => onChangeValue(value) }), label] }));
+    return (jsxs("label", { style: { ...customProperties, ...style }, className: classNames('dc-color-picker__btn', className), children: [jsx("input", { type: "radio", name: name, value: value, checked: checked, defaultChecked: defaultChecked, onChange: (event) => {
+                    onChange?.(event);
+                    onChangeValue?.(value);
+                } }), jsx("span", { className: "dc-color-picker__btn-check", "aria-hidden": true }), label] }));
 }
 
 export { ColorPickerButton };

package/esm/components/color-picker/color-picker.js

@@ -2,11 +2,21 @@ import { jsx } from 'react/jsx-runtime';
 import { classNames } from '../../lib/react-helpers.js';
 import { ColorPickerButton } from './color-picker-button.js';
 
-function ColorPicker({ className, name, options, value, disabled, onChangeValue, ...props }) {
+function ColorPicker({ className, name, disabled, options, value, defaultValue, onChange, onChangeValue, ...props }) {
     return (jsx("fieldset", { ...props, disabled: disabled, className: classNames(className, {
             'dc-color-picker': true,
             'dc-color-picker_disabled': disabled,
-        }), children: options.map((option) => (jsx(ColorPickerButton, { name: name, label: option.label, color: option.color, value: option.value, checked: option.value === value, onChangeValue: onChangeValue }, option.value))) }));
+        }), children: options.map((option) => {
+            let checked;
+            let defaultChecked;
+            if (value !== undefined) {
+                checked = option.value === value;
+            }
+            else if (defaultValue !== undefined) {
+                defaultChecked = option.value === defaultValue;
+            }
+            return (jsx(ColorPickerButton, { name: name, label: option.label, color: option.color, value: option.value, checked: checked, defaultChecked: defaultChecked, onChange: onChange, onChangeValue: onChangeValue }, option.value));
+        }) }));
 }
 
 export { ColorPicker };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {

package/types/components/color-picker/color-picker-button.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, ReactNode } from 'react';
+import { type CSSProperties, type ChangeEventHandler, type ReactNode } from 'react';
 export type ColorPickerButtonProps<T extends string | number> = {
     style?: CSSProperties;
     className?: string;
@@ -6,7 +6,9 @@ export type ColorPickerButtonProps<T extends string | number> = {
     name: string;
     color: string;
     value: T;
-    checked: boolean;
-    onChangeValue: (value: T) => void;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onChangeValue?: (value: T) => void;
 };
-export declare function ColorPickerButton<T extends string | number>({ style, className, label, name, color, value, checked, onChangeValue, }: ColorPickerButtonProps<T>): JSX.Element;
+export declare function ColorPickerButton<T extends string | number>({ style, className, label, name, color, value, checked, defaultChecked, onChange, onChangeValue, }: ColorPickerButtonProps<T>): JSX.Element;

package/types/components/color-picker/color-picker.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, ReactNode } from 'react';
+import { type ChangeEventHandler, type ComponentPropsWithoutRef, type ReactNode } from 'react';
 export type ColorPickerOption<T extends string | number> = {
     value: T;
     color: string;
@@ -6,8 +6,10 @@ export type ColorPickerOption<T extends string | number> = {
 };
 export type ColorPickerProps<T extends string | number> = {
     name: string;
-    value?: T;
     options: ColorPickerOption<T>[] | Readonly<ColorPickerOption<T>[]>;
-    onChangeValue: (value: T) => void;
+    value?: T;
+    defaultValue?: T;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onChangeValue?: (value: T) => void;
 } & ComponentPropsWithoutRef<'fieldset'>;
-export declare function ColorPicker<T extends string | number>({ className, name, options, value, disabled, onChangeValue, ...props }: ColorPickerProps<T>): JSX.Element;
+export declare function ColorPicker<T extends string | number>({ className, name, disabled, options, value, defaultValue, onChange, onChangeValue, ...props }: ColorPickerProps<T>): JSX.Element;