draft-components 1.2.2 → 1.4.0

package/cjs/components/button/button.cjs

@@ -5,17 +5,17 @@ const react = require('react');
 const reactHelpers = require('../../lib/react-helpers.cjs');
 const spinner = require('../spinner/spinner.cjs');
 
-const Button = react.forwardRef(function Button({ isBlock = false, disabled = false, loading = false, type = 'button', size = 'sm', variant = 'filled', appearance = 'default', iconLeft = null, iconRight = null, caption = null, renderAs, className, children, ...props }, ref) {
+const Button = react.forwardRef(function Button({ isBlock = false, disabled = false, loading = false, type = 'button', size = 'sm', variant = 'filled', appearance = 'default', leftIcon = null, rightIcon = null, caption = null, renderAs, className, children, ...props }, ref) {
     let addOnLeft = null;
     if (loading) {
         addOnLeft = (jsxRuntime.jsx("span", { "data-testid": "button-spinner", className: "dc-button__spinner", children: jsxRuntime.jsx(spinner.Spinner, { size: "1.15em" }) }));
     }
-    else if (iconLeft) {
-        addOnLeft = (jsxRuntime.jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: iconLeft }));
+    else if (leftIcon) {
+        addOnLeft = (jsxRuntime.jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: leftIcon }));
     }
     let addOnRight = null;
-    if (iconRight) {
-        addOnRight = (jsxRuntime.jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: iconRight }));
+    if (rightIcon) {
+        addOnRight = (jsxRuntime.jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: rightIcon }));
     }
     const shouldRenderLabel = Boolean(children);
     const shouldRenderCaption = Boolean(caption);

package/cjs/components/button/icon-button.cjs

@@ -6,7 +6,7 @@ const reactHelpers = require('../../lib/react-helpers.cjs');
 const button = require('./button.cjs');
 
 const IconButton = react.forwardRef(function IconButton({ className, icon, ...props }, ref) {
-    return jsxRuntime.jsx(button.Button, { ...props, ref: ref, iconLeft: icon, className: reactHelpers.classNames('dc-button_icon-only', className) });
+    return jsxRuntime.jsx(button.Button, { ...props, ref: ref, leftIcon: icon, className: reactHelpers.classNames('dc-button_icon-only', className) });
 });
 
 exports.IconButton = IconButton;

package/cjs/components/dialog/dialog-body.cjs

@@ -2,50 +2,10 @@
 
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
-const helpers = require('../../lib/helpers.cjs');
 const reactHelpers = require('../../lib/react-helpers.cjs');
 
-function DialogBody({ scrollShadowTop = false, scrollShadowBottom = false, className, children, }) {
+function DialogBody({ className, children, }) {
     const ref = react.useRef(null);
-    react.useEffect(() => {
-        if (!scrollShadowTop && !scrollShadowBottom) {
-            return;
-        }
-        const el = ref.current;
-        helpers.assertIfNullable(el, 'DialogBody ref was not set');
-        const topShadowClass = 'dc-dialog-body_scroll-shadow-top';
-        const bottomShadowClass = 'dc-dialog-body_scroll-shadow-bottom';
-        const changeShadowsVisibility = () => {
-            const scrollTop = el.scrollTop;
-            const scrollHeight = el.scrollHeight;
-            const clientHeight = el.clientHeight;
-            if (scrollShadowTop) {
-                if (scrollTop > 0) {
-                    el.classList.add(topShadowClass);
-                }
-                else {
-                    el.classList.remove(topShadowClass);
-                }
-            }
-            if (scrollShadowBottom) {
-                if (scrollTop + clientHeight < scrollHeight) {
-                    el.classList.add(bottomShadowClass);
-                }
-                else {
-                    el.classList.remove(bottomShadowClass);
-                }
-            }
-        };
-        const resizeObserver = typeof ResizeObserver === 'undefined'
-            ? null
-            : new ResizeObserver(changeShadowsVisibility);
-        resizeObserver?.observe(el);
-        el.addEventListener('scroll', changeShadowsVisibility);
-        return () => {
-            resizeObserver?.unobserve(el);
-            el.removeEventListener('scroll', changeShadowsVisibility);
-        };
-    }, [scrollShadowTop, scrollShadowBottom]);
     return (jsxRuntime.jsx("div", { ref: ref, className: reactHelpers.classNames('dc-dialog-body', className), children: children }));
 }
 

package/cjs/components/dialog/dialog-footer.cjs

@@ -3,8 +3,11 @@
 const jsxRuntime = require('react/jsx-runtime');
 const reactHelpers = require('../../lib/react-helpers.cjs');
 
-function DialogFooter({ className, children, }) {
-    return (jsxRuntime.jsx("div", { className: reactHelpers.classNames('dc-dialog-footer', className), children: children }));
+function DialogFooter({ hasBorder, className, children, }) {
+    return (jsxRuntime.jsx("div", { className: reactHelpers.classNames(className, {
+            'dc-dialog-footer': true,
+            'dc-dialog-footer_has_border': hasBorder,
+        }), children: children }));
 }
 
 exports.DialogFooter = DialogFooter;

package/cjs/components/dialog/dialog-header.cjs

@@ -7,12 +7,15 @@ require('../button/button.cjs');
 const iconButton = require('../button/icon-button.cjs');
 const xMarkIcon = require('./x-mark-icon.cjs');
 
-function DialogHeader({ heading, subheading, className, children, }) {
+function DialogHeader({ hasBorder, heading, subheading, className, children, }) {
     const { titleId, descriptionId, onClose, } = dialogContext.useDialogContext();
     const shouldRenderHeading = Boolean(heading);
     const shouldRenderDescription = Boolean(subheading);
     const shouldRenderChildren = Boolean(children);
-    return (jsxRuntime.jsxs("div", { className: reactHelpers.classNames(className, 'dc-dialog-header'), children: [jsxRuntime.jsxs("div", { className: "dc-dialog-header__title-bar", children: [shouldRenderHeading && (jsxRuntime.jsx("h2", { id: titleId, className: "dc-dialog-header__heading", children: heading })), jsxRuntime.jsx(iconButton.IconButton, { icon: jsxRuntime.jsx(xMarkIcon.XMarkIcon, { width: 18, height: 18, strokeWidth: 2 }), variant: "plain", className: "dc-dialog-header__close-btn", onClick: () => onClose() })] }), shouldRenderDescription && (jsxRuntime.jsx("div", { id: descriptionId, className: "dc-dialog-header__subheading", children: subheading })), shouldRenderChildren && (jsxRuntime.jsx("div", { className: "dc-dialog-header__body", children: children }))] }));
+    return (jsxRuntime.jsxs("div", { className: reactHelpers.classNames(className, {
+            'dc-dialog-header': true,
+            'dc-dialog-header_has_border': hasBorder,
+        }), children: [jsxRuntime.jsxs("div", { className: "dc-dialog-header__title-bar", children: [shouldRenderHeading && (jsxRuntime.jsx("h2", { id: titleId, className: "dc-dialog-header__heading", children: heading })), jsxRuntime.jsx(iconButton.IconButton, { icon: jsxRuntime.jsx(xMarkIcon.XMarkIcon, { width: 18, height: 18, strokeWidth: 2 }), variant: "plain", className: "dc-dialog-header__close-btn", onClick: () => onClose() })] }), shouldRenderDescription && (jsxRuntime.jsx("div", { id: descriptionId, className: "dc-dialog-header__subheading", children: subheading })), shouldRenderChildren && (jsxRuntime.jsx("div", { className: "dc-dialog-header__body", children: children }))] }));
 }
 
 exports.DialogHeader = DialogHeader;

package/cjs/components/menu/menu-item.cjs

@@ -4,18 +4,18 @@ const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const reactHelpers = require('../../lib/react-helpers.cjs');
 
-const MenuItem = react.forwardRef(function MenuItem({ role = 'menuitem', appearance = 'default', iconLeft = null, iconRight = null, className, children, ...props }, ref) {
+const MenuItem = react.forwardRef(function MenuItem({ role = 'menuitem', appearance = 'default', leftIcon = null, rightIcon = null, className, children, ...props }, ref) {
     let label = children;
-    if (iconLeft || iconRight) {
+    if (leftIcon || rightIcon) {
         const className = reactHelpers.classNames('dc-menu-btn__label', {
-            'dc-menu-btn__label_gap_left': iconLeft,
-            'dc-menu-btn__label_gap_right': iconRight,
+            'dc-menu-btn__label_gap_left': leftIcon,
+            'dc-menu-btn__label_gap_right': rightIcon,
         });
         label = jsxRuntime.jsx("span", { className: className, children: label });
     }
     return (jsxRuntime.jsx("li", { role: "presentation", children: jsxRuntime.jsxs("button", { ...props, ref: ref, className: reactHelpers.classNames(className, 'dc-menu-btn', {
                 [`dc-menu-btn_${appearance}`]: appearance,
-            }), type: "button", role: role, tabIndex: -1, children: [iconLeft, label, iconRight] }) }));
+            }), type: "button", role: role, tabIndex: -1, children: [leftIcon, label, rightIcon] }) }));
 });
 
 exports.MenuItem = MenuItem;

package/cjs/components/select/select.cjs

@@ -3,25 +3,37 @@
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const reactHelpers = require('../../lib/react-helpers.cjs');
+const spinner = require('../spinner/spinner.cjs');
 
-const Select = react.forwardRef(function Select({ hasError, isBlock, size = 'md', style, className, disabled, multiple, htmlSize, children, onChange, onChangeValue, ...props }, ref) {
+const Select = react.forwardRef(function Select({ hasError, isBlock, size = 'md', style, className, loading, disabled, multiple, htmlSize, children, onChange, onChangeValue, ...props }, ref) {
+    const onValueChanged = (event) => {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+        if (typeof onChangeValue === 'function') {
+            if (multiple === true) {
+                const values = Array.from(event.target.options)
+                    .filter((option) => option.selected)
+                    .map((option) => option.value);
+                onChangeValue(values);
+            }
+            else {
+                onChangeValue(event.target.value);
+            }
+        }
+    };
+    let addOn = (jsxRuntime.jsx("svg", { className: "dc-select__arrow", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": true, children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" }) }));
+    if (loading) {
+        addOn = (jsxRuntime.jsx(spinner.Spinner, { className: "dc-select__spinner", color: "currentColor", size: 16 }));
+    }
     return (jsxRuntime.jsxs("div", { style: style, className: reactHelpers.classNames(className, 'dc-select__container', {
             [`dc-select__container_${size}`]: size !== undefined,
             'dc-select__container_multiple': multiple,
+            'dc-select__container_loading': loading,
             'dc-select__container_disabled': disabled,
             'dc-select__container_has_error': hasError,
             'dc-select__container_block': isBlock,
-        }), children: [jsxRuntime.jsx("select", { ...props, ref: ref, className: "dc-select", size: htmlSize, multiple: multiple, disabled: disabled, onChange: (event) => {
-                    onChange?.(event);
-                    if (multiple === true) {
-                        onChangeValue?.(Array.from(event.target.options)
-                            .filter((option) => option.selected)
-                            .map((option) => option.value));
-                    }
-                    else {
-                        onChangeValue?.(event.target.value);
-                    }
-                }, children: children }), jsxRuntime.jsx("svg", { className: "dc-select__icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": true, children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" }) })] }));
+        }), children: [jsxRuntime.jsx("select", { ...props, ref: ref, className: "dc-select", size: htmlSize, multiple: multiple, disabled: disabled || loading, onChange: onValueChanged, children: children }), jsxRuntime.jsx("span", { className: "dc-select__add-on", "aria-hidden": true, children: addOn })] }));
 });
 
 exports.Select = Select;

package/css/draft-components-utilities.css

@@ -42,20 +42,20 @@
 
 /* Text style */
 
-.text-italic {
-  font-style: italic !important;
+.text-no-decoration {
+  text-decoration: none !important;
 }
 
-.text-not-italic {
+.text-no-style {
   font-style: normal !important;
 }
 
-.text-underline {
-  text-decoration: underline !important;
+.text-italic {
+  font-style: italic !important;
 }
 
-.text-not-underline {
-  text-decoration: none !important;
+.text-underline {
+  text-decoration: underline !important;
 }
 
 .text-uppercase {