no-frills-ui 0.0.14-rc.2 → 0.0.14-rc.3

package/dist/index.js

@@ -326,35 +326,35 @@ const StyledCard = /*#__PURE__*/ styled("div", {
 const Card = /*#__PURE__*/ React.forwardRef(CardComponent);
 
 const Step$1 = /*#__PURE__*/ styled(Card, {
-    target: "e1l2mhfb0",
+    target: "ex87x7i0",
     label: "Step"
 })("transition:all 0.6s ease;overflow:visible;", (props)=>props.open && `margin: 20px 5px;`);
 const StepHeader = /*#__PURE__*/ styled("button", {
-    target: "e1l2mhfb1",
+    target: "ex87x7i1",
     label: "StepHeader"
 })("padding:20px 15px;display:flex;justify-content:space-between;background:none;border:none;border-radius:10px;width:100%;font-size:inherit;color:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";&:focus-visible{box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}& input{appearance:none;margin:0;}", (props)=>props.open && `border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};`, " ", (props)=>props.open && `border-radius: 10px 10px 0 0;`, " ", (props)=>props.disabled && `color: ${getThemeValue(THEME_NAME.DISABLED)};`);
 const HeaderContainer = /*#__PURE__*/ styled("div", {
-    target: "e1l2mhfb2",
+    target: "ex87x7i2",
     label: "HeaderContainer"
 })("display:flex;align-items:center;min-width:40px;& svg{vertical-align:top;margin-right:10px;fill:", (props)=>props.open ? getThemeValue(THEME_NAME.PRIMARY) : props.completed ? getThemeValue(THEME_NAME.SUCCESS) : getThemeValue(THEME_NAME.LIGHT_GREY), ";transform:", (props)=>props.open ? 'scale(0.8)' : 'scale(0.6)', ";transition:all 0.3s ease;min-width:24px;}");
 const ExpandContainer = /*#__PURE__*/ styled("div", {
-    target: "e1l2mhfb3",
+    target: "ex87x7i3",
     label: "ExpandContainer"
 })("display:flex;align-items:center;& svg{vertical-align:top;margin-right:10px;transition:all 0.6s ease;fill:currentColor;}", (props)=>props.open ? `& svg { transform: rotate(180deg); }` : '');
 const StepBody = /*#__PURE__*/ styled("div", {
-    target: "e1l2mhfb4",
+    target: "ex87x7i4",
     label: "StepBody"
 })("transition:all 0.6s ease;overflow:hidden;height:", (props)=>props.height || 0, "px;");
 const AccordionBadge = /*#__PURE__*/ styled(Badge, {
-    target: "e1l2mhfb5",
+    target: "ex87x7i5",
     label: "AccordionBadge"
 })("margin-right:15px;");
 const AccordionStepBody = /*#__PURE__*/ styled("div", {
-    target: "e1l2mhfb6",
+    target: "ex87x7i6",
     label: "AccordionStepBody"
 })("padding:20px 15px;");
 const AccordionStepFooter = /*#__PURE__*/ styled("div", {
-    target: "e1l2mhfb7",
+    target: "ex87x7i7",
     label: "AccordionStepFooter"
 })("display:flex;justify-content:flex-end;padding:10px 15px;border-top:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";");
 /**
@@ -384,6 +384,7 @@ const AccordionStepFooter = /*#__PURE__*/ styled("div", {
         completed: completed,
         children: [
             /*#__PURE__*/ jsxRuntime.jsxs(StepHeader, {
+                type: "button",
                 open: open,
                 disabled: disabled,
                 onClick: onStepClick,
@@ -522,12 +523,12 @@ const StyledIconButton = /*#__PURE__*/ styled("button", {
 }
 const IconButton = /*#__PURE__*/ React.forwardRef(IconButtonComponent);
 
-const Container$a = /*#__PURE__*/ styled("span", {
-    target: "eg8hsap0",
+const Container$b = /*#__PURE__*/ styled("span", {
+    target: "e3nd8sw0",
     label: "Container"
 })("padding:5px;padding-left:15px;border-radius:16px;background-color:", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";display:inline-flex;margin:5px;line-height:20px;align-items:center;");
 const Button$1 = /*#__PURE__*/ styled("button", {
-    target: "eg8hsap1",
+    target: "e3nd8sw1",
     label: "Button"
 })("color:", getThemeValue(THEME_NAME.BACKGROUND), ";background-color:", getThemeValue(THEME_NAME.DISABLED), ";border-radius:50%;border:none;padding:4px;display:inline-flex;margin-left:5px;&:focus-within{outline:4px solid ", getThemeValue(THEME_NAME.ERROR_LIGHT), ";}");
 /**
@@ -547,13 +548,14 @@ const Button$1 = /*#__PURE__*/ styled("button", {
             e.stopPropagation();
         }
     };
-    return /*#__PURE__*/ jsxRuntime.jsxs(Container$a, {
+    return /*#__PURE__*/ jsxRuntime.jsxs(Container$b, {
         ...rest,
         ref: ref,
         onKeyUp: keyUpHandler,
         children: [
             label,
             /*#__PURE__*/ jsxRuntime.jsx(Button$1, {
+                type: "button",
                 onClick: onCloseClick,
                 onKeyDown: buttonKeyDownHandler,
                 "aria-label": closeButtonAriaLabel ?? `Remove ${label}`,
@@ -582,7 +584,7 @@ const DragContext = React.createContext(null);
     target: "ertl9d71",
     label: "DragKnob"
 })("padding-top:8px;cursor:move;touch-action:none;color:", getThemeValue(THEME_NAME.DISABLED), ";");
-/** Container for the children */ const Container$9 = /*#__PURE__*/ styled("div", {
+/** Container for the children */ const Container$a = /*#__PURE__*/ styled("div", {
     target: "ertl9d72",
     label: "Container"
 })("flex:1;");
@@ -824,14 +826,14 @@ const DragContext = React.createContext(null);
                 tabIndex: -1,
                 children: /*#__PURE__*/ jsxRuntime.jsx(CheckCircle, {})
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(Container$9, {
+            /*#__PURE__*/ jsxRuntime.jsx(Container$a, {
                 children: children
             })
         ]
     });
 }
 
-/** Container Component */ const Container$8 = /*#__PURE__*/ styled("div", {
+/** Container Component */ const Container$9 = /*#__PURE__*/ styled("div", {
     target: "e18d6tqk0",
     label: "Container"
 })("flex:1;display:flex;position:relative;flex-wrap:wrap;flex-direction:", (props)=>props.orientation === ORIENTATION.HORIZONTAL ? 'row' : 'column', ";");
@@ -934,7 +936,7 @@ const DragContext = React.createContext(null);
                     setDragOver,
                     i18n
                 },
-                children: /*#__PURE__*/ jsxRuntime.jsx(Container$8, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(Container$9, {
                     ...rest,
                     ref: ref,
                     orientation: orientation,
@@ -961,11 +963,16 @@ const DragContext = React.createContext(null);
 }
 const DragAndDrop = /*#__PURE__*/ React.forwardRef(DragAndDropComponent);
 
+// Container for the ChipInput
+const Container$8 = /*#__PURE__*/ styled("div", {
+    target: "e7l19410",
+    label: "Container"
+})("margin:10px 5px;");
 // Label component for the ChipInput
 const Label$6 = /*#__PURE__*/ styled("label", {
-    target: "e1pr4bi70",
+    target: "e7l19411",
     label: "Label"
-})("display:inline-flex;flex-direction:column;flex:1;position:relative;margin:10px 5px;color:inherit;padding:0 8px;border-radius:3px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";width:", (props)=>typeof props.width === 'number' ? `${props.width}px` : props.width || '250px', ";max-width:100%;&:has(:focus),&:has(:active){border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:has(:focus) > span,&:has(:active) > span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:has(:disabled){border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";}&:has(:disabled) > span{color:", getThemeValue(THEME_NAME.DISABLED), ";}&:has(:focus:invalid){border-color:", getThemeValue(THEME_NAME.ERROR), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.ERROR_LIGHT), ";}", (props)=>props.touched ? `
+})("display:inline-flex;flex-direction:column;flex:1;position:relative;color:inherit;padding:0 8px;border-radius:3px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";width:", (props)=>typeof props.width === 'number' ? `${props.width}px` : props.width || '250px', ";max-width:100%;&:has(:focus),&:has(:active){border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:has(:focus) > span,&:has(:active) > span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:has(:disabled){border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";}&:has(:disabled) > span{color:", getThemeValue(THEME_NAME.DISABLED), ";}&:has(:focus:invalid){border-color:", getThemeValue(THEME_NAME.ERROR), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.ERROR_LIGHT), ";}", (props)=>props.touched ? `
         &:has(:invalid) {
             border-color: ${getThemeValue(THEME_NAME.ERROR)};
         }
@@ -993,12 +1000,12 @@ const Label$6 = /*#__PURE__*/ styled("label", {
     ` : '');
 // Error message container
 const ErrorContainer$6 = /*#__PURE__*/ styled("div", {
-    target: "e1pr4bi71",
+    target: "e7l19412",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";padding-top:3px;font-size:12px;line-height:14px;margin-left:3px;");
 // Visually hidden but accessible to screen readers
 const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
-    target: "e1pr4bi72",
+    target: "e7l19413",
     label: "VisuallyHidden"
 })("position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;& li{list-style:none;}");
 /**
@@ -1014,7 +1021,7 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
  * />
  * ```
  */ function ChipInputComponent(props, ref) {
-    const { value: propValue = [], closeButtonAriaLabel = `Remove {:label}`, addedAnnouncementTemplate = '{:label} was added', removedAnnouncementTemplate = '{:label} was removed' } = props;
+    const { value: propValue = [], onChange: onChangeCallback, label, errorText, closeButtonAriaLabel = `Remove {:label}`, addedAnnouncementTemplate = '{:label} was added', removedAnnouncementTemplate = '{:label} was removed', width, ...inputProps } = props;
     const [text, setText] = React.useState('');
     const [touched, setTouched] = React.useState(false);
     const [value, setValue] = React.useState(propValue || []);
@@ -1045,10 +1052,10 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
     ]);
     React.useEffect(()=>{
         if (InputRef.current) {
-            InputRef.current.setCustomValidity(props.errorText || '');
+            InputRef.current.setCustomValidity(errorText || '');
         }
     }, [
-        props.errorText
+        errorText
     ]);
     /**
      * Update the chip values and notify changes.
@@ -1056,15 +1063,15 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
      */ const updateValue = (newValue)=>{
         const deduped = Array.from(new Set(newValue));
         setValue(deduped);
-        props.onChange?.(deduped);
+        onChangeCallback?.(deduped);
     };
     /**
      * Marks the input as touched on focus.
      * @param e React focus event
      */ const handleFocus = (e)=>{
         setTouched(true);
-        if (props.onFocus) {
-            props.onFocus(e);
+        if (inputProps.onFocus) {
+            inputProps.onFocus(e);
         }
     };
     /**
@@ -1076,15 +1083,28 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
     /**
      * Adds a new chip on Enter key press.
      * @param e React keyboard event
-     */ const handleKeyUp = (e)=>{
-        if (e.key === 'Enter' && text.trim() !== '' && InputRef.current?.validity.valid) {
-            const newValue = [
-                ...value,
-                text.trim()
-            ];
-            updateValue(newValue);
-            setText('');
-            setAnnouncement(replacePlaceholder(addedAnnouncementTemplate, text.trim()));
+     */ const handleKeyDown = (e)=>{
+        if (e.key === 'Enter') {
+            // Check validity against HTML5 constraints only (ignore custom validity from errorText)
+            let isValid;
+            if (InputRef.current) {
+                InputRef.current.setCustomValidity('');
+                isValid = InputRef.current.checkValidity();
+                InputRef.current.setCustomValidity(errorText || '');
+            }
+            // Only prevent form submission if we have valid text to add as a chip
+            if (text.trim() !== '' && isValid) {
+                e.preventDefault();
+                e.stopPropagation();
+                const newValue = [
+                    ...value,
+                    text.trim()
+                ];
+                updateValue(newValue);
+                setText('');
+                setAnnouncement(replacePlaceholder(addedAnnouncementTemplate, text.trim()));
+            }
+        // Otherwise, allow form submission to proceed
         }
     };
     /**
@@ -1114,42 +1134,46 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
     // Render the component
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
-            /*#__PURE__*/ jsxRuntime.jsxs(Label$6, {
-                text: text,
-                touched: touched,
-                errorText: props.errorText,
-                required: props.required,
-                width: props.width,
+            /*#__PURE__*/ jsxRuntime.jsxs(Container$8, {
                 children: [
-                    /*#__PURE__*/ jsxRuntime.jsx("input", {
-                        ...props,
-                        ref: InputRef,
-                        value: text,
-                        onChange: handleChange,
-                        onFocus: handleFocus,
-                        onKeyUp: handleKeyUp,
-                        required: props.required && value.length === 0,
-                        "aria-required": props.required,
-                        "aria-invalid": !!props.errorText,
-                        "aria-describedby": props.errorText ? errorId : undefined
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        children: value?.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(DragAndDrop, {
-                            orientation: ORIENTATION.HORIZONTAL,
-                            onDrop: onDrop,
-                            children: value.map((chip)=>/*#__PURE__*/ jsxRuntime.jsx(Chip, {
-                                    label: chip,
-                                    onCloseClick: ()=>removeChip(chip),
-                                    closeButtonAriaLabel: replacePlaceholder(closeButtonAriaLabel, chip)
-                                }, chip))
-                        })
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx("span", {
-                        children: props.label
+                    /*#__PURE__*/ jsxRuntime.jsxs(Label$6, {
+                        text: text,
+                        touched: touched,
+                        errorText: errorText,
+                        required: inputProps.required,
+                        width: width,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("input", {
+                                ...inputProps,
+                                ref: InputRef,
+                                value: text,
+                                onChange: handleChange,
+                                onFocus: handleFocus,
+                                onKeyDown: handleKeyDown,
+                                required: inputProps.required && value.length === 0,
+                                "aria-required": inputProps.required,
+                                "aria-invalid": !!errorText,
+                                "aria-describedby": errorText ? errorId : undefined
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                children: value?.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(DragAndDrop, {
+                                    orientation: ORIENTATION.HORIZONTAL,
+                                    onDrop: onDrop,
+                                    children: value.map((chip)=>/*#__PURE__*/ jsxRuntime.jsx(Chip, {
+                                            label: chip,
+                                            onCloseClick: ()=>removeChip(chip),
+                                            closeButtonAriaLabel: replacePlaceholder(closeButtonAriaLabel, chip)
+                                        }, chip))
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                children: label
+                            })
+                        ]
                     }),
-                    props.errorText && /*#__PURE__*/ jsxRuntime.jsx(ErrorContainer$6, {
+                    errorText && /*#__PURE__*/ jsxRuntime.jsx(ErrorContainer$6, {
                         id: errorId,
-                        children: props.errorText
+                        children: errorText
                     })
                 ]
             }),
@@ -3560,6 +3584,7 @@ const DEFAULT_DURATION$1 = 5000;
                                     ]
                                 }),
                                 /*#__PURE__*/ jsxRuntime.jsx(CloseButton, {
+                                    type: "button",
                                     onClick: this.closeClickHandler(id),
                                     "aria-label": closeButtonAriaLabel || 'Close notification',
                                     tabIndex: 0,