draft-components 1.0.0-beta.14 → 1.0.0-beta.16

package/cjs/components/alert/alert.cjs

@@ -4,11 +4,11 @@ const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const reactHelpers = require('../../lib/react-helpers.cjs');
 
-const Alert = react.forwardRef(function Alert({ icon = null, heading = null, variant = 'default', appearance = 'default', className, children, ...props }) {
+const Alert = react.forwardRef(function Alert({ icon = null, heading = null, variant = 'default', appearance = 'default', className, children, ...props }, ref) {
     const shouldShowIcon = Boolean(icon);
     const shouldRenderHeading = Boolean(heading);
     const shouldRenderContent = Boolean(children);
-    return (jsxRuntime.jsxs("section", { ...props, className: reactHelpers.classNames(className, {
+    return (jsxRuntime.jsxs("div", { ...props, ref: ref, className: reactHelpers.classNames(className, {
             'dc-alert': true,
             'dc-alert_has_icon': shouldShowIcon,
             [`dc-alert_variant_${variant}`]: variant,

package/cjs/components/text-input/text-input.cjs

@@ -5,22 +5,38 @@ const react = require('react');
 const reactHelpers = require('../../lib/react-helpers.cjs');
 
 const TextInput = react.forwardRef(function TextInput({ hasError = false, isBlock = false, type = 'text', size = 'md', leftAddOn, rightAddOn, style, className, disabled, width, htmlSize, onChange, onChangeValue, ...props }, ref) {
-    const showLeftAddOn = Boolean(leftAddOn);
-    const showRightAddOn = Boolean(rightAddOn);
+    if (leftAddOn) {
+        const className = 'dc-text-input__left-addon';
+        if (typeof leftAddOn === 'function') {
+            leftAddOn = leftAddOn({ className });
+        }
+        else {
+            leftAddOn = jsxRuntime.jsx("div", { className: className, children: leftAddOn });
+        }
+    }
+    if (rightAddOn) {
+        const className = 'dc-text-input__right-addon';
+        if (typeof rightAddOn === 'function') {
+            rightAddOn = rightAddOn({ className });
+        }
+        else {
+            rightAddOn = jsxRuntime.jsx("div", { className: className, children: rightAddOn });
+        }
+    }
     return (jsxRuntime.jsxs("div", { style: style, className: reactHelpers.classNames(className, 'dc-text-input__container', {
             [`dc-text-input__container_${size}`]: size,
             'dc-text-input__container_block': isBlock,
             'dc-text-input__container_disabled': disabled,
-            'dc-text-input__container_has_error': hasError,
-            'dc-text-input__container_has_left-addon': showLeftAddOn,
-            'dc-text-input__container_has_right-addon': showRightAddOn,
-        }), children: [showLeftAddOn && (jsxRuntime.jsx("div", { className: "dc-text-input__left-addon", children: leftAddOn })), jsxRuntime.jsx("input", { ...props, className: reactHelpers.classNames({
+            'dc-text-input__container_invalid': hasError,
+            'dc-text-input__container_left-addon': leftAddOn,
+            'dc-text-input__container_right-addon': rightAddOn,
+        }), children: [leftAddOn, jsxRuntime.jsx("input", { ...props, className: reactHelpers.classNames({
                     'dc-text-input': true,
                     [`dc-text-input_width_${width}`]: width,
                 }), ref: ref, type: type, size: htmlSize, disabled: disabled, onChange: (event) => {
                     onChange?.(event);
                     onChangeValue?.(event.target.value);
-                } }), showRightAddOn && (jsxRuntime.jsx("div", { className: "dc-text-input__right-addon", children: rightAddOn }))] }));
+                } }), rightAddOn] }));
 });
 
 exports.TextInput = TextInput;

package/css/draft-components.css

@@ -1194,6 +1194,16 @@
   background: var(--dc-input-bg);
 }
 
+.dc-text-input__container > :first-child {
+  border-top-left-radius: calc(var(--dc-input-border-radius) - 1px);
+  border-bottom-left-radius: calc(var(--dc-input-border-radius) - 1px);
+}
+
+.dc-text-input__container > :last-child {
+  border-top-right-radius: calc(var(--dc-input-border-radius) - 1px);
+  border-bottom-right-radius: calc(var(--dc-input-border-radius) - 1px);
+}
+
 .dc-text-input__container:focus-within {
   border-color: var(--dc-input-focus-ring-color);
   box-shadow: 0 0 0 1px var(--dc-input-focus-ring-color);
@@ -1203,7 +1213,7 @@
   opacity: var(--dc-disabled-state-opacity);
 }
 
-.dc-text-input__container_has_error {
+.dc-text-input__container_invalid {
   border-color: var(--dc-input-border-color-error);
 }
 
@@ -1292,26 +1302,20 @@
 
 .dc-text-input__left-addon {
   color: var(--dc-input-prefix-color);
+  padding-left: var(--dc-input-padding-x);
 }
 
 .dc-text-input__right-addon {
   color: var(--dc-input-suffix-color);
+  padding-right: var(--dc-input-padding-x);
 }
 
-.dc-text-input__container_has_left-addon {
-  padding-left: var(--dc-input-padding-x);
-}
-
-.dc-text-input__container_has_left-addon .dc-text-input {
-  padding-left: calc(var(--dc-input-padding-x) * 0.5);
-}
-
-.dc-text-input__container_has_right-addon {
-  padding-right: var(--dc-input-padding-x);
+.dc-text-input__container_left-addon .dc-text-input {
+  padding-left: calc(var(--dc-input-padding-x) / 2);
 }
 
-.dc-text-input__container_has_right-addon .dc-text-input {
-  padding-right: calc(var(--dc-input-padding-x) * 0.5);
+.dc-text-input__container_right-addon .dc-text-input {
+  padding-right: calc(var(--dc-input-padding-x) / 2);
 }
 
 .dc-password-input {

package/esm/components/alert/alert.js

@@ -2,11 +2,11 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 
-const Alert = forwardRef(function Alert({ icon = null, heading = null, variant = 'default', appearance = 'default', className, children, ...props }) {
+const Alert = forwardRef(function Alert({ icon = null, heading = null, variant = 'default', appearance = 'default', className, children, ...props }, ref) {
     const shouldShowIcon = Boolean(icon);
     const shouldRenderHeading = Boolean(heading);
     const shouldRenderContent = Boolean(children);
-    return (jsxs("section", { ...props, className: classNames(className, {
+    return (jsxs("div", { ...props, ref: ref, className: classNames(className, {
             'dc-alert': true,
             'dc-alert_has_icon': shouldShowIcon,
             [`dc-alert_variant_${variant}`]: variant,

package/esm/components/text-input/text-input.js

@@ -1,24 +1,40 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 
 const TextInput = forwardRef(function TextInput({ hasError = false, isBlock = false, type = 'text', size = 'md', leftAddOn, rightAddOn, style, className, disabled, width, htmlSize, onChange, onChangeValue, ...props }, ref) {
-    const showLeftAddOn = Boolean(leftAddOn);
-    const showRightAddOn = Boolean(rightAddOn);
+    if (leftAddOn) {
+        const className = 'dc-text-input__left-addon';
+        if (typeof leftAddOn === 'function') {
+            leftAddOn = leftAddOn({ className });
+        }
+        else {
+            leftAddOn = jsx("div", { className: className, children: leftAddOn });
+        }
+    }
+    if (rightAddOn) {
+        const className = 'dc-text-input__right-addon';
+        if (typeof rightAddOn === 'function') {
+            rightAddOn = rightAddOn({ className });
+        }
+        else {
+            rightAddOn = jsx("div", { className: className, children: rightAddOn });
+        }
+    }
     return (jsxs("div", { style: style, className: classNames(className, 'dc-text-input__container', {
             [`dc-text-input__container_${size}`]: size,
             'dc-text-input__container_block': isBlock,
             'dc-text-input__container_disabled': disabled,
-            'dc-text-input__container_has_error': hasError,
-            'dc-text-input__container_has_left-addon': showLeftAddOn,
-            'dc-text-input__container_has_right-addon': showRightAddOn,
-        }), children: [showLeftAddOn && (jsx("div", { className: "dc-text-input__left-addon", children: leftAddOn })), jsx("input", { ...props, className: classNames({
+            'dc-text-input__container_invalid': hasError,
+            'dc-text-input__container_left-addon': leftAddOn,
+            'dc-text-input__container_right-addon': rightAddOn,
+        }), children: [leftAddOn, jsx("input", { ...props, className: classNames({
                     'dc-text-input': true,
                     [`dc-text-input_width_${width}`]: width,
                 }), ref: ref, type: type, size: htmlSize, disabled: disabled, onChange: (event) => {
                     onChange?.(event);
                     onChangeValue?.(event.target.value);
-                } }), showRightAddOn && (jsx("div", { className: "dc-text-input__right-addon", children: rightAddOn }))] }));
+                } }), rightAddOn] }));
 });
 
 export { TextInput };

package/package.json

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

package/types/components/alert/alert.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
-type AlertHTMLProps = ComponentPropsWithRef<'section'>;
+type AlertHTMLProps = ComponentPropsWithRef<'div'>;
 export type AlertAppearance = 'default' | 'info' | 'success' | 'warning' | 'error';
 export type AlertVariant = 'default' | 'full-width' | 'accent-border';
 export type AlertProps = {
@@ -8,5 +8,5 @@ export type AlertProps = {
     variant?: AlertVariant;
     appearance?: AlertAppearance;
 } & AlertHTMLProps;
-export declare const Alert: import("react").ForwardRefExoticComponent<Pick<AlertProps, "key" | keyof import("react").HTMLAttributes<HTMLElement> | "icon" | "heading" | "variant" | "appearance"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Alert: import("react").ForwardRefExoticComponent<Pick<AlertProps, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "icon" | "heading" | "variant" | "appearance"> & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/types/components/caption/caption.d.ts

@@ -4,4 +4,4 @@ export type CaptionProps = ComponentPropsWithRef<'div'> & {
     showIcon?: boolean;
     appearance?: CaptionAppearance;
 };
-export declare const Caption: import("react").ForwardRefExoticComponent<Pick<CaptionProps, "key" | "appearance" | keyof import("react").HTMLAttributes<HTMLDivElement> | "showIcon"> & import("react").RefAttributes<HTMLParagraphElement>>;
+export declare const Caption: import("react").ForwardRefExoticComponent<Pick<CaptionProps, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "appearance" | "showIcon"> & import("react").RefAttributes<HTMLParagraphElement>>;

package/types/components/text-input/text-input.d.ts

@@ -5,6 +5,9 @@ export type TextInputType = 'date' | 'datetime-local' | 'email' | 'number' | 'pa
 export type TextInputWidth = '2ch' | '3ch' | '4ch' | '5ch' | '10ch' | '20ch' | '40ch';
 export type TextInputSize = 'sm' | 'md' | 'lg';
 export type TextInputChangeValueHandler = (value: string) => void;
+export type TextInputRenderAddOn = (props: {
+    className: string;
+}) => ReactNode;
 export type TextInputProps = TextInputBaseProps & {
     hasError?: boolean;
     isBlock?: boolean;
@@ -12,8 +15,8 @@ export type TextInputProps = TextInputBaseProps & {
     width?: TextInputWidth;
     widthCh?: number;
     size?: TextInputSize;
-    leftAddOn?: ReactNode;
-    rightAddOn?: ReactNode;
+    leftAddOn?: ReactNode | TextInputRenderAddOn;
+    rightAddOn?: ReactNode | TextInputRenderAddOn;
     htmlSize?: TextInputHTMLProps['size'];
     onChangeValue?: TextInputChangeValueHandler;
 };