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

package/lib-esm/components/Accordion/AccordionStep.js

@@ -9,35 +9,35 @@ import ExpandMore from '../../icons/ExpandMore.js';
 import Card from '../Card/Card.js';
 
 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), ";");
 /**
@@ -67,6 +67,7 @@ const AccordionStepFooter = /*#__PURE__*/ styled("div", {
         completed: completed,
         children: [
             /*#__PURE__*/ jsxs(StepHeader, {
+                type: "button",
                 open: open,
                 disabled: disabled,
                 onClick: onStepClick,

package/lib-esm/components/Accordion/AccordionStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionStep.js","sources":["../../../src/components/Accordion/AccordionStep.tsx"],"sourcesContent":["import React, { useState, useId, useRef, useEffect } from 'react';\nimport styled from '@emotion/styled';\nimport { FiberManualRecord, ExpandMore } from '../../icons';\nimport { THEME_NAME, getThemeValue } from '../../shared/constants';\nimport { Ellipsis } from '../../shared/styles';\nimport { Badge, BADGE_TYPE } from '../Badge';\nimport { Card } from '../Card';\n\nconst Step = styled(Card)<{ open?: boolean; completed?: boolean }>`\n    transition: all 0.6s ease;\n    overflow: visible;\n\n    ${(props) => props.open && `margin: 20px 5px;`}\n`;\n\nconst StepHeader = styled.button<{ open?: boolean; disabled?: boolean }>`\n    padding: 20px 15px;\n    display: flex;\n    justify-content: space-between;\n    background: none;\n    border: none;\n    border-radius: 10px;\n    width: 100%;\n    font-size: inherit;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n\n    &:focus-visible {\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    & input {\n        appearance: none;\n        margin: 0;\n    }\n\n    ${(props) =>\n        props.open && `border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};`}\n    ${(props) => props.open && `border-radius: 10px 10px 0 0;`}\n\n    ${(props) => props.disabled && `color: ${getThemeValue(THEME_NAME.DISABLED)};`}\n`;\n\nconst HeaderContainer = styled.div<{ open?: boolean; completed?: boolean }>`\n    display: flex;\n    align-items: center;\n    min-width: 40px;\n\n    & svg {\n        vertical-align: top;\n        margin-right: 10px;\n        fill: ${(props) =>\n            props.open\n                ? getThemeValue(THEME_NAME.PRIMARY)\n                : props.completed\n                  ? getThemeValue(THEME_NAME.SUCCESS)\n                  : getThemeValue(THEME_NAME.LIGHT_GREY)};\n        transform: ${(props) => (props.open ? 'scale(0.8)' : 'scale(0.6)')};\n        transition: all 0.3s ease;\n        min-width: 24px;\n    }\n`;\n\nconst ExpandContainer = styled.div<{ open?: boolean }>`\n    display: flex;\n    align-items: center;\n\n    & svg {\n        vertical-align: top;\n        margin-right: 10px;\n        transition: all 0.6s ease;\n        fill: currentColor;\n    }\n\n    ${(props) => (props.open ? `& svg { transform: rotate(180deg); }` : '')}\n`;\n\nconst StepBody = styled.div<{ height: number }>`\n    transition: all 0.6s ease;\n    overflow: hidden;\n    height: ${(props) => props.height || 0}px;\n`;\n\nconst AccordionBadge = styled(Badge)`\n    margin-right: 15px;\n`;\n\nexport const AccordionStepBody = styled.div`\n    padding: 20px 15px;\n`;\n\nexport const AccordionStepFooter = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    padding: 10px 15px;\n    border-top: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n`;\n\n/** Props for `AccordionStep` component */\ninterface AccordionStepProps {\n    /**\n     * If the step has been marked as completed\n     * @default false\n     */\n    completed?: boolean;\n    /** If the step is disabled\n     * @default false\n     */\n    disabled?: boolean;\n    /** Header content for the step */\n    header: React.ReactNode;\n    /** Error text to display as a badge in the header */\n    errorText?: React.ReactNode;\n    /** If the step is expanded */\n    open?: boolean;\n    /** Click handler for the step header */\n    onStepClick?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\n/**\n * AccordionStep Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction AccordionStepComponent(\n    props: React.PropsWithChildren<AccordionStepProps> & React.HTMLAttributes<HTMLDivElement>,\n    ref: React.Ref<HTMLDivElement>,\n) {\n    const [height, setHeight] = useState(0);\n    const {\n        open,\n        disabled = false,\n        header,\n        errorText,\n        completed = false,\n        onStepClick,\n        children,\n        ...restProps\n    } = props;\n\n    // Generate unique IDs for ARIA relationships\n    const headerId = useId();\n    const regionId = useId();\n\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    // Measure content height when `open` or children change.\n    useEffect(() => {\n        const el = contentRef.current;\n        setHeight(el?.scrollHeight || 0);\n    }, [open, children]);\n\n    return (\n        <Step {...restProps} ref={ref} open={open} elevated={open} completed={completed}>\n            <StepHeader\n                open={open}\n                disabled={disabled}\n                onClick={onStepClick}\n                aria-expanded={open ? 'true' : 'false'}\n                aria-controls={regionId}\n                id={headerId}\n            >\n                <HeaderContainer open={open} completed={completed}>\n                    <FiberManualRecord aria-hidden=\"true\" />\n                    <Ellipsis>{header}</Ellipsis>\n                </HeaderContainer>\n                <ExpandContainer open={open}>\n                    {errorText && (\n                        <AccordionBadge inline type={BADGE_TYPE.DANGER}>\n                            {errorText}\n                        </AccordionBadge>\n                    )}\n                    <ExpandMore aria-hidden=\"true\" />\n                </ExpandContainer>\n            </StepHeader>\n            <StepBody\n                ref={contentRef}\n                height={open ? height : 0}\n                role=\"region\"\n                id={regionId}\n                aria-labelledby={headerId}\n                aria-hidden={open ? 'false' : 'true'}\n            >\n                {open && children}\n            </StepBody>\n        </Step>\n    );\n}\n\nconst AccordionStep = React.forwardRef<\n    HTMLDivElement,\n    React.PropsWithChildren<AccordionStepProps> & React.HTMLAttributes<HTMLDivElement>\n>(AccordionStepComponent);\n\nexport default AccordionStep;\n"],"names":["Step","styled","Card","props","open","StepHeader","getThemeValue","THEME_NAME","TEXT_COLOR_DARK","PRIMARY_LIGHT","BORDER_LIGHT_COLOR","disabled","DISABLED","HeaderContainer","PRIMARY","completed","SUCCESS","LIGHT_GREY","ExpandContainer","StepBody","height","AccordionBadge","Badge","AccordionStepBody","AccordionStepFooter","AccordionStepComponent","ref","setHeight","useState","header","errorText","onStepClick","children","restProps","headerId","useId","regionId","contentRef","useRef","useEffect","el","current","scrollHeight","_jsxs","elevated","onClick","aria-expanded","aria-controls","id","_jsx","FiberManualRecord","aria-hidden","Ellipsis","inline","type","BADGE_TYPE","DANGER","ExpandMore","role","aria-labelledby","AccordionStep","React","forwardRef"],"mappings":"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"}
+{"version":3,"file":"AccordionStep.js","sources":["../../../src/components/Accordion/AccordionStep.tsx"],"sourcesContent":["import React, { useState, useId, useRef, useEffect } from 'react';\nimport styled from '@emotion/styled';\nimport { FiberManualRecord, ExpandMore } from '../../icons';\nimport { THEME_NAME, getThemeValue } from '../../shared/constants';\nimport { Ellipsis } from '../../shared/styles';\nimport { Badge, BADGE_TYPE } from '../Badge';\nimport { Card } from '../Card';\n\nconst Step = styled(Card)<{ open?: boolean; completed?: boolean }>`\n    transition: all 0.6s ease;\n    overflow: visible;\n\n    ${(props) => props.open && `margin: 20px 5px;`}\n`;\n\nconst StepHeader = styled.button<{ open?: boolean; disabled?: boolean }>`\n    padding: 20px 15px;\n    display: flex;\n    justify-content: space-between;\n    background: none;\n    border: none;\n    border-radius: 10px;\n    width: 100%;\n    font-size: inherit;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n\n    &:focus-visible {\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    & input {\n        appearance: none;\n        margin: 0;\n    }\n\n    ${(props) =>\n        props.open && `border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};`}\n    ${(props) => props.open && `border-radius: 10px 10px 0 0;`}\n\n    ${(props) => props.disabled && `color: ${getThemeValue(THEME_NAME.DISABLED)};`}\n`;\n\nconst HeaderContainer = styled.div<{ open?: boolean; completed?: boolean }>`\n    display: flex;\n    align-items: center;\n    min-width: 40px;\n\n    & svg {\n        vertical-align: top;\n        margin-right: 10px;\n        fill: ${(props) =>\n            props.open\n                ? getThemeValue(THEME_NAME.PRIMARY)\n                : props.completed\n                  ? getThemeValue(THEME_NAME.SUCCESS)\n                  : getThemeValue(THEME_NAME.LIGHT_GREY)};\n        transform: ${(props) => (props.open ? 'scale(0.8)' : 'scale(0.6)')};\n        transition: all 0.3s ease;\n        min-width: 24px;\n    }\n`;\n\nconst ExpandContainer = styled.div<{ open?: boolean }>`\n    display: flex;\n    align-items: center;\n\n    & svg {\n        vertical-align: top;\n        margin-right: 10px;\n        transition: all 0.6s ease;\n        fill: currentColor;\n    }\n\n    ${(props) => (props.open ? `& svg { transform: rotate(180deg); }` : '')}\n`;\n\nconst StepBody = styled.div<{ height: number }>`\n    transition: all 0.6s ease;\n    overflow: hidden;\n    height: ${(props) => props.height || 0}px;\n`;\n\nconst AccordionBadge = styled(Badge)`\n    margin-right: 15px;\n`;\n\nexport const AccordionStepBody = styled.div`\n    padding: 20px 15px;\n`;\n\nexport const AccordionStepFooter = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    padding: 10px 15px;\n    border-top: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n`;\n\n/** Props for `AccordionStep` component */\ninterface AccordionStepProps {\n    /**\n     * If the step has been marked as completed\n     * @default false\n     */\n    completed?: boolean;\n    /** If the step is disabled\n     * @default false\n     */\n    disabled?: boolean;\n    /** Header content for the step */\n    header: React.ReactNode;\n    /** Error text to display as a badge in the header */\n    errorText?: React.ReactNode;\n    /** If the step is expanded */\n    open?: boolean;\n    /** Click handler for the step header */\n    onStepClick?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\n/**\n * AccordionStep Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction AccordionStepComponent(\n    props: React.PropsWithChildren<AccordionStepProps> & React.HTMLAttributes<HTMLDivElement>,\n    ref: React.Ref<HTMLDivElement>,\n) {\n    const [height, setHeight] = useState(0);\n    const {\n        open,\n        disabled = false,\n        header,\n        errorText,\n        completed = false,\n        onStepClick,\n        children,\n        ...restProps\n    } = props;\n\n    // Generate unique IDs for ARIA relationships\n    const headerId = useId();\n    const regionId = useId();\n\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    // Measure content height when `open` or children change.\n    useEffect(() => {\n        const el = contentRef.current;\n        setHeight(el?.scrollHeight || 0);\n    }, [open, children]);\n\n    return (\n        <Step {...restProps} ref={ref} open={open} elevated={open} completed={completed}>\n            <StepHeader\n                type=\"button\"\n                open={open}\n                disabled={disabled}\n                onClick={onStepClick}\n                aria-expanded={open ? 'true' : 'false'}\n                aria-controls={regionId}\n                id={headerId}\n            >\n                <HeaderContainer open={open} completed={completed}>\n                    <FiberManualRecord aria-hidden=\"true\" />\n                    <Ellipsis>{header}</Ellipsis>\n                </HeaderContainer>\n                <ExpandContainer open={open}>\n                    {errorText && (\n                        <AccordionBadge inline type={BADGE_TYPE.DANGER}>\n                            {errorText}\n                        </AccordionBadge>\n                    )}\n                    <ExpandMore aria-hidden=\"true\" />\n                </ExpandContainer>\n            </StepHeader>\n            <StepBody\n                ref={contentRef}\n                height={open ? height : 0}\n                role=\"region\"\n                id={regionId}\n                aria-labelledby={headerId}\n                aria-hidden={open ? 'false' : 'true'}\n            >\n                {open && children}\n            </StepBody>\n        </Step>\n    );\n}\n\nconst AccordionStep = React.forwardRef<\n    HTMLDivElement,\n    React.PropsWithChildren<AccordionStepProps> & React.HTMLAttributes<HTMLDivElement>\n>(AccordionStepComponent);\n\nexport default AccordionStep;\n"],"names":["Step","styled","Card","props","open","StepHeader","getThemeValue","THEME_NAME","TEXT_COLOR_DARK","PRIMARY_LIGHT","BORDER_LIGHT_COLOR","disabled","DISABLED","HeaderContainer","PRIMARY","completed","SUCCESS","LIGHT_GREY","ExpandContainer","StepBody","height","AccordionBadge","Badge","AccordionStepBody","AccordionStepFooter","AccordionStepComponent","ref","setHeight","useState","header","errorText","onStepClick","children","restProps","headerId","useId","regionId","contentRef","useRef","useEffect","el","current","scrollHeight","_jsxs","elevated","type","onClick","aria-expanded","aria-controls","id","_jsx","FiberManualRecord","aria-hidden","Ellipsis","inline","BADGE_TYPE","DANGER","ExpandMore","role","aria-labelledby","AccordionStep","React","forwardRef"],"mappings":"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"}

package/lib-esm/components/Chip/Chip.js

@@ -4,12 +4,12 @@ import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 import Close from '../../icons/Close.js';
 
-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), ";}");
 /**
@@ -29,13 +29,14 @@ const Button$1 = /*#__PURE__*/ styled("button", {
             e.stopPropagation();
         }
     };
-    return /*#__PURE__*/ jsxs(Container$a, {
+    return /*#__PURE__*/ jsxs(Container$b, {
         ...rest,
         ref: ref,
         onKeyUp: keyUpHandler,
         children: [
             label,
             /*#__PURE__*/ jsx(Button$1, {
+                type: "button",
                 onClick: onCloseClick,
                 onKeyDown: buttonKeyDownHandler,
                 "aria-label": closeButtonAriaLabel ?? `Remove ${label}`,

package/lib-esm/components/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { Close } from '../../icons';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\ninterface ChipProps {\n    /** Label for the chip */\n    label: string;\n    /** Callback when the close button is clicked */\n    onCloseClick?: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    /** Aria label for the close button. Defaults to \"Remove {label}\" */\n    closeButtonAriaLabel?: string;\n}\n\nconst Container = styled.span`\n    padding: 5px;\n    padding-left: 15px;\n    border-radius: 16px;\n    background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n    display: inline-flex;\n    margin: 5px;\n    line-height: 20px;\n    align-items: center;\n`;\n\nconst Button = styled.button`\n    color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    background-color: ${getThemeValue(THEME_NAME.DISABLED)};\n    border-radius: 50%;\n    border: none;\n    padding: 4px;\n    display: inline-flex;\n    margin-left: 5px;\n\n    &:focus-within {\n        outline: 4px solid ${getThemeValue(THEME_NAME.ERROR_LIGHT)};\n    }\n`;\n\n/**\n * Chip Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLSpanElement\n */\nfunction ChipComponent(\n    props: ChipProps & React.HTMLAttributes<HTMLSpanElement>,\n    ref: React.Ref<HTMLSpanElement>,\n) {\n    const { label, onCloseClick, closeButtonAriaLabel, ...rest } = props;\n\n    const keyUpHandler: React.KeyboardEventHandler<HTMLSpanElement> = (e) => {\n        if (e.key === 'Backspace' || e.key === 'Delete') {\n            onCloseClick?.(e);\n        }\n    };\n\n    const buttonKeyDownHandler: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {\n        // Stop propagation to prevent DragAndDrop from capturing Space/Enter\n        if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'Enter') {\n            e.stopPropagation();\n        }\n    };\n\n    return (\n        <Container {...rest} ref={ref} onKeyUp={keyUpHandler}>\n            {label}\n            <Button\n                onClick={onCloseClick}\n                onKeyDown={buttonKeyDownHandler}\n                aria-label={closeButtonAriaLabel ?? `Remove ${label}`}\n            >\n                <Close height={16} width={16} />\n            </Button>\n        </Container>\n    );\n}\n\nconst Chip = React.forwardRef(ChipComponent);\nexport default Chip;\n"],"names":["Container","styled","getThemeValue","THEME_NAME","BORDER_LIGHT_COLOR","Button","BACKGROUND","DISABLED","ERROR_LIGHT","ChipComponent","props","ref","label","onCloseClick","closeButtonAriaLabel","rest","keyUpHandler","e","key","buttonKeyDownHandler","stopPropagation","_jsxs","onKeyUp","_jsx","onClick","onKeyDown","aria-label","Close","height","width","Chip","React","forwardRef"],"mappings":";;;;;;AAcA,MAAMA,WAAAA,iBAAYC,MAAAA,CAAAA,MAAAA,EAAAA;;;AAIMC,CAAAA,CAAAA,CAAAA,oEAAAA,EAAAA,aAAAA,CAAcC,WAAWC,kBAAkB,CAAA,EAAA,sEAAA,CAAA;AAOnE,MAAMC,QAAAA,iBAASJ,MAAAA,CAAAA,QAAAA,EAAAA;;;aACFC,aAAAA,CAAcC,UAAAA,CAAWG,UAAU,CAAA,EAAA,oBAAA,EACxBJ,aAAAA,CAAcC,WAAWI,QAAQ,CAAA,EAAA,kHAAA,EAQ5BL,aAAAA,CAAcC,UAAAA,CAAWK,WAAW,CAAA,EAAA,IAAA,CAAA;AAIjE;;;;AAIC,IACD,SAASC,aAAAA,CACLC,KAAwD,EACxDC,GAA+B,EAAA;IAE/B,MAAM,EAAEC,KAAK,EAAEC,YAAY,EAAEC,oBAAoB,EAAE,GAAGC,IAAAA,EAAM,GAAGL,KAAAA;AAE/D,IAAA,MAAMM,eAA4D,CAACC,CAAAA,GAAAA;AAC/D,QAAA,IAAIA,EAAEC,GAAG,KAAK,eAAeD,CAAAA,CAAEC,GAAG,KAAK,QAAA,EAAU;YAC7CL,YAAAA,GAAeI,CAAAA,CAAAA;AACnB,QAAA;AACJ,IAAA,CAAA;AAEA,IAAA,MAAME,uBAAsE,CAACF,CAAAA,GAAAA;;QAEzE,IAAIA,CAAAA,CAAEC,GAAG,KAAK,GAAA,IAAOD,CAAAA,CAAEC,GAAG,KAAK,UAAA,IAAcD,CAAAA,CAAEC,GAAG,KAAK,OAAA,EAAS;AAC5DD,YAAAA,CAAAA,CAAEG,eAAe,EAAA;AACrB,QAAA;AACJ,IAAA,CAAA;AAEA,IAAA,qBACIC,IAAA,CAACrB,WAAAA,EAAAA;AAAW,QAAA,GAAGe,IAAI;QAAEJ,GAAAA,EAAKA,GAAAA;QAAKW,OAAAA,EAASN,YAAAA;;AACnCJ,YAAAA,KAAAA;0BACDW,GAAA,CAAClB,QAAAA,EAAAA;gBACGmB,OAAAA,EAASX,YAAAA;gBACTY,SAAAA,EAAWN,oBAAAA;AACXO,gBAAAA,YAAAA,EAAYZ,oBAAAA,IAAwB,CAAC,OAAO,EAAEF,KAAAA,CAAAA,CAAO;AAErD,gBAAA,QAAA,gBAAAW,GAAA,CAACI,KAAAA,EAAAA;oBAAMC,MAAAA,EAAQ,EAAA;oBAAIC,KAAAA,EAAO;;;;;AAI1C;AAEA,MAAMC,IAAAA,iBAAOC,KAAAA,CAAMC,UAAU,CAACvB,aAAAA;;;;"}
+{"version":3,"file":"Chip.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { Close } from '../../icons';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\ninterface ChipProps {\n    /** Label for the chip */\n    label: string;\n    /** Callback when the close button is clicked */\n    onCloseClick?: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    /** Aria label for the close button. Defaults to \"Remove {label}\" */\n    closeButtonAriaLabel?: string;\n}\n\nconst Container = styled.span`\n    padding: 5px;\n    padding-left: 15px;\n    border-radius: 16px;\n    background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n    display: inline-flex;\n    margin: 5px;\n    line-height: 20px;\n    align-items: center;\n`;\n\nconst Button = styled.button`\n    color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    background-color: ${getThemeValue(THEME_NAME.DISABLED)};\n    border-radius: 50%;\n    border: none;\n    padding: 4px;\n    display: inline-flex;\n    margin-left: 5px;\n\n    &:focus-within {\n        outline: 4px solid ${getThemeValue(THEME_NAME.ERROR_LIGHT)};\n    }\n`;\n\n/**\n * Chip Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLSpanElement\n */\nfunction ChipComponent(\n    props: ChipProps & React.HTMLAttributes<HTMLSpanElement>,\n    ref: React.Ref<HTMLSpanElement>,\n) {\n    const { label, onCloseClick, closeButtonAriaLabel, ...rest } = props;\n\n    const keyUpHandler: React.KeyboardEventHandler<HTMLSpanElement> = (e) => {\n        if (e.key === 'Backspace' || e.key === 'Delete') {\n            onCloseClick?.(e);\n        }\n    };\n\n    const buttonKeyDownHandler: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {\n        // Stop propagation to prevent DragAndDrop from capturing Space/Enter\n        if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'Enter') {\n            e.stopPropagation();\n        }\n    };\n\n    return (\n        <Container {...rest} ref={ref} onKeyUp={keyUpHandler}>\n            {label}\n            <Button\n                type=\"button\"\n                onClick={onCloseClick}\n                onKeyDown={buttonKeyDownHandler}\n                aria-label={closeButtonAriaLabel ?? `Remove ${label}`}\n            >\n                <Close height={16} width={16} />\n            </Button>\n        </Container>\n    );\n}\n\nconst Chip = React.forwardRef(ChipComponent);\nexport default Chip;\n"],"names":["Container","styled","getThemeValue","THEME_NAME","BORDER_LIGHT_COLOR","Button","BACKGROUND","DISABLED","ERROR_LIGHT","ChipComponent","props","ref","label","onCloseClick","closeButtonAriaLabel","rest","keyUpHandler","e","key","buttonKeyDownHandler","stopPropagation","_jsxs","onKeyUp","_jsx","type","onClick","onKeyDown","aria-label","Close","height","width","Chip","React","forwardRef"],"mappings":";;;;;;AAcA,MAAMA,WAAAA,iBAAYC,MAAAA,CAAAA,MAAAA,EAAAA;;;AAIMC,CAAAA,CAAAA,CAAAA,oEAAAA,EAAAA,aAAAA,CAAcC,WAAWC,kBAAkB,CAAA,EAAA,sEAAA,CAAA;AAOnE,MAAMC,QAAAA,iBAASJ,MAAAA,CAAAA,QAAAA,EAAAA;;;aACFC,aAAAA,CAAcC,UAAAA,CAAWG,UAAU,CAAA,EAAA,oBAAA,EACxBJ,aAAAA,CAAcC,WAAWI,QAAQ,CAAA,EAAA,kHAAA,EAQ5BL,aAAAA,CAAcC,UAAAA,CAAWK,WAAW,CAAA,EAAA,IAAA,CAAA;AAIjE;;;;AAIC,IACD,SAASC,aAAAA,CACLC,KAAwD,EACxDC,GAA+B,EAAA;IAE/B,MAAM,EAAEC,KAAK,EAAEC,YAAY,EAAEC,oBAAoB,EAAE,GAAGC,IAAAA,EAAM,GAAGL,KAAAA;AAE/D,IAAA,MAAMM,eAA4D,CAACC,CAAAA,GAAAA;AAC/D,QAAA,IAAIA,EAAEC,GAAG,KAAK,eAAeD,CAAAA,CAAEC,GAAG,KAAK,QAAA,EAAU;YAC7CL,YAAAA,GAAeI,CAAAA,CAAAA;AACnB,QAAA;AACJ,IAAA,CAAA;AAEA,IAAA,MAAME,uBAAsE,CAACF,CAAAA,GAAAA;;QAEzE,IAAIA,CAAAA,CAAEC,GAAG,KAAK,GAAA,IAAOD,CAAAA,CAAEC,GAAG,KAAK,UAAA,IAAcD,CAAAA,CAAEC,GAAG,KAAK,OAAA,EAAS;AAC5DD,YAAAA,CAAAA,CAAEG,eAAe,EAAA;AACrB,QAAA;AACJ,IAAA,CAAA;AAEA,IAAA,qBACIC,IAAA,CAACrB,WAAAA,EAAAA;AAAW,QAAA,GAAGe,IAAI;QAAEJ,GAAAA,EAAKA,GAAAA;QAAKW,OAAAA,EAASN,YAAAA;;AACnCJ,YAAAA,KAAAA;0BACDW,GAAA,CAAClB,QAAAA,EAAAA;gBACGmB,IAAAA,EAAK,QAAA;gBACLC,OAAAA,EAASZ,YAAAA;gBACTa,SAAAA,EAAWP,oBAAAA;AACXQ,gBAAAA,YAAAA,EAAYb,oBAAAA,IAAwB,CAAC,OAAO,EAAEF,KAAAA,CAAAA,CAAO;AAErD,gBAAA,QAAA,gBAAAW,GAAA,CAACK,KAAAA,EAAAA;oBAAMC,MAAAA,EAAQ,EAAA;oBAAIC,KAAAA,EAAO;;;;;AAI1C;AAEA,MAAMC,IAAAA,iBAAOC,KAAAA,CAAMC,UAAU,CAACxB,aAAAA;;;;"}

package/lib-esm/components/ChipInput/ChipInput.js

@@ -6,11 +6,16 @@ import Chip from '../Chip/Chip.js';
 import DragAndDrop from '../DragAndDrop/DragAndDrop.js';
 import { ORIENTATION } from '../DragAndDrop/types.js';
 
+// 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)};
         }
@@ -38,12 +43,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;}");
 /**
@@ -59,7 +64,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] = useState('');
     const [touched, setTouched] = useState(false);
     const [value, setValue] = useState(propValue || []);
@@ -90,10 +95,10 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
     ]);
     useEffect(()=>{
         if (InputRef.current) {
-            InputRef.current.setCustomValidity(props.errorText || '');
+            InputRef.current.setCustomValidity(errorText || '');
         }
     }, [
-        props.errorText
+        errorText
     ]);
     /**
      * Update the chip values and notify changes.
@@ -101,15 +106,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);
         }
     };
     /**
@@ -121,15 +126,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
         }
     };
     /**
@@ -159,42 +177,46 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
     // Render the component
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsxs(Label$6, {
-                text: text,
-                touched: touched,
-                errorText: props.errorText,
-                required: props.required,
-                width: props.width,
+            /*#__PURE__*/ jsxs(Container$8, {
                 children: [
-                    /*#__PURE__*/ 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__*/ jsx("div", {
-                        children: value?.length > 0 && /*#__PURE__*/ jsx(DragAndDrop, {
-                            orientation: ORIENTATION.HORIZONTAL,
-                            onDrop: onDrop,
-                            children: value.map((chip)=>/*#__PURE__*/ jsx(Chip, {
-                                    label: chip,
-                                    onCloseClick: ()=>removeChip(chip),
-                                    closeButtonAriaLabel: replacePlaceholder(closeButtonAriaLabel, chip)
-                                }, chip))
-                        })
-                    }),
-                    /*#__PURE__*/ jsx("span", {
-                        children: props.label
+                    /*#__PURE__*/ jsxs(Label$6, {
+                        text: text,
+                        touched: touched,
+                        errorText: errorText,
+                        required: inputProps.required,
+                        width: width,
+                        children: [
+                            /*#__PURE__*/ 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__*/ jsx("div", {
+                                children: value?.length > 0 && /*#__PURE__*/ jsx(DragAndDrop, {
+                                    orientation: ORIENTATION.HORIZONTAL,
+                                    onDrop: onDrop,
+                                    children: value.map((chip)=>/*#__PURE__*/ jsx(Chip, {
+                                            label: chip,
+                                            onCloseClick: ()=>removeChip(chip),
+                                            closeButtonAriaLabel: replacePlaceholder(closeButtonAriaLabel, chip)
+                                        }, chip))
+                                })
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                children: label
+                            })
+                        ]
                     }),
-                    props.errorText && /*#__PURE__*/ jsx(ErrorContainer$6, {
+                    errorText && /*#__PURE__*/ jsx(ErrorContainer$6, {
                         id: errorId,
-                        children: props.errorText
+                        children: errorText
                     })
                 ]
             }),

package/lib-esm/components/ChipInput/ChipInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipInput.js","sources":["../../../src/components/ChipInput/ChipInput.tsx"],"sourcesContent":["import React, { useImperativeHandle, useEffect, useId, useState } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport Chip from '../Chip/Chip';\nimport { DragAndDrop, ORIENTATION } from '../DragAndDrop';\n\n// Prop types definition\ninterface ChipInputProps {\n    /** Label for the field */\n    label: string;\n    /** Error message for the field */\n    errorText?: string;\n    /**\n     * Values to display as chips\n     * @default []\n     */\n    value?: string[];\n    /** Callback when chips change */\n    onChange?: (newValue: string[]) => void;\n    /**\n     * Aria label for the close button on chip. Defaults to \"Remove {:label}\"\n     * @default \"Remove {:label}\"\n     */\n    closeButtonAriaLabel?: string;\n    /**\n     * Announcement text when a chip is added. Defaults to \"{:label} was added\"\n     * @default \"{:label} was added\"\n     */\n    addedAnnouncementTemplate?: string;\n    /**\n     * Announcement text when a chip is removed. Defaults to \"{:label} was removed\"\n     * @default \"{:label} was removed\"\n     */\n    removedAnnouncementTemplate?: string;\n}\n\n// Label component for the ChipInput\nconst Label = styled.label<{\n    text: string;\n    touched?: boolean;\n    errorText?: string;\n    required?: boolean;\n    width?: string | number;\n}>`\n    display: inline-flex;\n    flex-direction: column;\n    flex: 1;\n    position: relative;\n    margin: 10px 5px;\n    color: inherit;\n    padding: 0 8px;\n    border-radius: 3px;\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    width: ${(props) =>\n        typeof props.width === 'number' ? `${props.width}px` : props.width || '250px'};\n    max-width: 100%;\n\n    /** Focused */\n    &:has(:focus),\n    &:has(:active) {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:has(:focus) > span,\n    &:has(:active) > span {\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /** Disabled */\n    &:has(:disabled) {\n        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n    }\n\n    &:has(:disabled) > span {\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n\n    /** Invalid */\n    &:has(:focus:invalid) {\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.ERROR_LIGHT)};\n    }\n\n    ${(props) =>\n        props.touched\n            ? `\n        &:has(:invalid) {\n            border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n    \n        &:has(:invalid) > span {\n            color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n        `\n            : ''}\n\n    /** Error */\n    ${(props) =>\n        props.errorText\n            ? `\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n\n        & > span {\n            color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n        `\n            : ''}\n\n    /** Required */\n    ${(props) =>\n        props.required\n            ? `& > span:after {\n                content: '*';\n                margin-left: 2px;\n                color: ${getThemeValue(THEME_NAME.ERROR)};\n            }`\n            : ''}\n    \n\n    & > input {\n        border: none;\n        outline: none;\n        line-height: 30px;\n        min-height: 30px;\n        max-width: 95%;\n    }\n\n    /** Label Animation */\n    & > span {\n        position: absolute;\n        padding: 0 5px;\n        top: 0px;\n        left: 4px;\n        font-size: 14px;\n        line-height: 32px;\n        transition: all 300ms ease;\n    }\n\n    &:has(:focus) > span,\n    &:has(:placeholder-shown) > span {\n        top: -8px;\n        background: ${getThemeValue(THEME_NAME.BACKGROUND)};\n        font-size: 12px;\n        line-height: 14px;\n    }\n\n    ${(props) =>\n        props.text !== ''\n            ? `\n    & > span {\n        top: -8px;\n        background: ${getThemeValue(THEME_NAME.BACKGROUND)};\n        font-size: 12px;\n        line-height: 14px;\n    }\n    `\n            : ''}\n`;\n\n// Error message container\nconst ErrorContainer = styled.div`\n    color: ${getThemeValue(THEME_NAME.ERROR)};\n    padding-top: 3px;\n    font-size: 12px;\n    line-height: 14px;\n    margin-left: 3px;\n`;\n\n// Visually hidden but accessible to screen readers\nconst VisuallyHidden = styled.ul`\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n\n    & li {\n        list-style: none;\n    }\n`;\n\n/**\n * A chip input component that allows users to add and remove chips (tags) by typing and pressing Enter.\n * @component\n * @example\n * ```tsx\n * <ChipInput\n *   value={['tag1', 'tag2']}\n *   onChange={(newTags) => console.log(newTags)}\n *   label=\"Add tags\"\n *   errorText=\"At least one tag is required\"\n * />\n * ```\n */\nfunction ChipInputComponent(\n    props: ChipInputProps & Omit<React.AllHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>,\n    ref: React.Ref<HTMLInputElement | null>,\n) {\n    const {\n        value: propValue = [],\n        closeButtonAriaLabel = `Remove {:label}`,\n        addedAnnouncementTemplate = '{:label} was added',\n        removedAnnouncementTemplate = '{:label} was removed',\n    } = props;\n\n    const [text, setText] = useState('');\n    const [touched, setTouched] = useState(false);\n    const [value, setValue] = useState<string[]>(propValue || []);\n    const InputRef = React.useRef<HTMLInputElement>(null);\n    const [announcement, setAnnouncement] = useState('');\n    const errorId = useId();\n\n    // Forward the underlying input element.\n    useImperativeHandle(ref, () => InputRef.current as HTMLInputElement);\n\n    /**\n     * Replace {:label} placeholder in template string\n     */\n    const replacePlaceholder = (\n        template: string | undefined,\n        label: string,\n    ): string | undefined => {\n        if (!template) return undefined;\n        return template.replace(/\\{:label\\}/g, label);\n    };\n\n    const prevPropValueRef = React.useRef<string[]>(undefined);\n\n    // Sync internal value with props.value\n    useEffect(() => {\n        if (Array.isArray(propValue)) {\n            const prevValue = prevPropValueRef.current;\n            const isEqual =\n                prevValue &&\n                propValue.length === prevValue.length &&\n                propValue.every((val, index) => val === prevValue[index]);\n            if (!isEqual) {\n                setValue(propValue);\n                prevPropValueRef.current = propValue;\n            }\n        }\n    }, [propValue]);\n\n    useEffect(() => {\n        if (InputRef.current) {\n            InputRef.current.setCustomValidity(props.errorText || '');\n        }\n    }, [props.errorText]);\n\n    /**\n     * Update the chip values and notify changes.\n     * @param newValue The new array of chip values\n     */\n    const updateValue = (newValue: string[]) => {\n        const deduped = Array.from(new Set(newValue));\n        setValue(deduped);\n        props.onChange?.(deduped);\n    };\n\n    /**\n     * Marks the input as touched on focus.\n     * @param e React focus event\n     */\n    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n        setTouched(true);\n        if (props.onFocus) {\n            props.onFocus(e);\n        }\n    };\n\n    /**\n     * Change handler for the input field.\n     * @param e React change event\n     */\n    const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n        setText(e.target.value);\n    };\n\n    /**\n     * Adds a new chip on Enter key press.\n     * @param e React keyboard event\n     */\n    const handleKeyUp: React.KeyboardEventHandler<HTMLInputElement> = (e) => {\n        if (e.key === 'Enter' && text.trim() !== '' && InputRef.current?.validity.valid) {\n            const newValue = [...value, text.trim()];\n            updateValue(newValue);\n            setText('');\n            setAnnouncement(replacePlaceholder(addedAnnouncementTemplate, text.trim())!);\n        }\n    };\n\n    /**\n     * Removes a chip from the list.\n     * @param chipToRemove The chip value to remove\n     */\n    const removeChip = (chipToRemove: string) => {\n        const newValue = value.filter((chip) => chip !== chipToRemove);\n        updateValue(newValue);\n        setAnnouncement(replacePlaceholder(removedAnnouncementTemplate, chipToRemove)!);\n    };\n\n    /**\n     * Moves a chip from one position to another.\n     * @param start The starting index of the item to move\n     * @param end The ending index where the item should be placed\n     */\n    const onDrop = (start: number, end: number) => {\n        // Clone existing elements\n        const newItems = [...value];\n        // Remove the element to be moved\n        const item = newItems.splice(start, 1);\n        // Add it back at the required position\n        newItems.splice(end, 0, item[0]);\n        // Update\n        updateValue(newItems);\n    };\n\n    // Render the component\n    return (\n        <>\n            <Label\n                text={text}\n                touched={touched}\n                errorText={props.errorText}\n                required={props.required}\n                width={props.width}\n            >\n                <input\n                    {...props}\n                    ref={InputRef}\n                    value={text}\n                    onChange={handleChange}\n                    onFocus={handleFocus}\n                    onKeyUp={handleKeyUp}\n                    required={props.required && value.length === 0}\n                    aria-required={props.required}\n                    aria-invalid={!!props.errorText}\n                    aria-describedby={props.errorText ? errorId : undefined}\n                />\n                <div>\n                    {value?.length > 0 && (\n                        <DragAndDrop orientation={ORIENTATION.HORIZONTAL} onDrop={onDrop}>\n                            {value.map((chip) => (\n                                <Chip\n                                    key={chip}\n                                    label={chip}\n                                    onCloseClick={() => removeChip(chip)}\n                                    closeButtonAriaLabel={replacePlaceholder(\n                                        closeButtonAriaLabel,\n                                        chip,\n                                    )}\n                                />\n                            ))}\n                        </DragAndDrop>\n                    )}\n                </div>\n                <span>{props.label}</span>\n                {props.errorText && <ErrorContainer id={errorId}>{props.errorText}</ErrorContainer>}\n            </Label>\n            <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n                {announcement}\n            </VisuallyHidden>\n        </>\n    );\n}\n\nconst ChipInput = React.forwardRef<\n    HTMLInputElement,\n    ChipInputProps & Omit<React.AllHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>\n>(ChipInputComponent);\n\nexport default ChipInput;\n"],"names":["Label","styled","getThemeValue","THEME_NAME","BORDER_COLOR","BACKGROUND","props","width","PRIMARY","PRIMARY_LIGHT","DISABLED_BORDER","DISABLED_BACKGROUND","DISABLED","ERROR","ERROR_LIGHT","touched","errorText","required","text","ErrorContainer","VisuallyHidden","ChipInputComponent","ref","value","propValue","closeButtonAriaLabel","addedAnnouncementTemplate","removedAnnouncementTemplate","setText","useState","setTouched","setValue","InputRef","React","useRef","announcement","setAnnouncement","errorId","useId","useImperativeHandle","current","replacePlaceholder","template","label","undefined","replace","prevPropValueRef","useEffect","Array","isArray","prevValue","isEqual","length","every","val","index","setCustomValidity","updateValue","newValue","deduped","from","Set","onChange","handleFocus","e","onFocus","handleChange","target","handleKeyUp","key","trim","validity","valid","removeChip","chipToRemove","filter","chip","onDrop","start","end","newItems","item","splice","_jsxs","_Fragment","_jsx","input","onKeyUp","aria-required","aria-invalid","aria-describedby","div","DragAndDrop","orientation","ORIENTATION","HORIZONTAL","map","Chip","onCloseClick","span","id","aria-live","aria-atomic","ChipInput","forwardRef"],"mappings":"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"}
+{"version":3,"file":"ChipInput.js","sources":["../../../src/components/ChipInput/ChipInput.tsx"],"sourcesContent":["import React, { useImperativeHandle, useEffect, useId, useState } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport Chip from '../Chip/Chip';\nimport { DragAndDrop, ORIENTATION } from '../DragAndDrop';\n\n// Prop types definition\ninterface ChipInputProps {\n    /** Label for the field */\n    label: string;\n    /** Error message for the field */\n    errorText?: string;\n    /**\n     * Values to display as chips\n     * @default []\n     */\n    value?: string[];\n    /** Callback when chips change */\n    onChange?: (newValue: string[]) => void;\n    /**\n     * Aria label for the close button on chip. Defaults to \"Remove {:label}\"\n     * @default \"Remove {:label}\"\n     */\n    closeButtonAriaLabel?: string;\n    /**\n     * Announcement text when a chip is added. Defaults to \"{:label} was added\"\n     * @default \"{:label} was added\"\n     */\n    addedAnnouncementTemplate?: string;\n    /**\n     * Announcement text when a chip is removed. Defaults to \"{:label} was removed\"\n     * @default \"{:label} was removed\"\n     */\n    removedAnnouncementTemplate?: string;\n}\n\n// Container for the ChipInput\nconst Container = styled.div`\n    margin: 10px 5px;\n`;\n\n// Label component for the ChipInput\nconst Label = styled.label<{\n    text: string;\n    touched?: boolean;\n    errorText?: string;\n    required?: boolean;\n    width?: string | number;\n}>`\n    display: inline-flex;\n    flex-direction: column;\n    flex: 1;\n    position: relative;\n    color: inherit;\n    padding: 0 8px;\n    border-radius: 3px;\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    width: ${(props) =>\n        typeof props.width === 'number' ? `${props.width}px` : props.width || '250px'};\n    max-width: 100%;\n\n    /** Focused */\n    &:has(:focus),\n    &:has(:active) {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:has(:focus) > span,\n    &:has(:active) > span {\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /** Disabled */\n    &:has(:disabled) {\n        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n    }\n\n    &:has(:disabled) > span {\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n\n    /** Invalid */\n    &:has(:focus:invalid) {\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.ERROR_LIGHT)};\n    }\n\n    ${(props) =>\n        props.touched\n            ? `\n        &:has(:invalid) {\n            border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n    \n        &:has(:invalid) > span {\n            color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n        `\n            : ''}\n\n    /** Error */\n    ${(props) =>\n        props.errorText\n            ? `\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n\n        & > span {\n            color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n        `\n            : ''}\n\n    /** Required */\n    ${(props) =>\n        props.required\n            ? `& > span:after {\n                content: '*';\n                margin-left: 2px;\n                color: ${getThemeValue(THEME_NAME.ERROR)};\n            }`\n            : ''}\n    \n\n    & > input {\n        border: none;\n        outline: none;\n        line-height: 30px;\n        min-height: 30px;\n        max-width: 95%;\n    }\n\n    /** Label Animation */\n    & > span {\n        position: absolute;\n        padding: 0 5px;\n        top: 0px;\n        left: 4px;\n        font-size: 14px;\n        line-height: 32px;\n        transition: all 300ms ease;\n    }\n\n    &:has(:focus) > span,\n    &:has(:placeholder-shown) > span {\n        top: -8px;\n        background: ${getThemeValue(THEME_NAME.BACKGROUND)};\n        font-size: 12px;\n        line-height: 14px;\n    }\n\n    ${(props) =>\n        props.text !== ''\n            ? `\n    & > span {\n        top: -8px;\n        background: ${getThemeValue(THEME_NAME.BACKGROUND)};\n        font-size: 12px;\n        line-height: 14px;\n    }\n    `\n            : ''}\n`;\n\n// Error message container\nconst ErrorContainer = styled.div`\n    color: ${getThemeValue(THEME_NAME.ERROR)};\n    padding-top: 3px;\n    font-size: 12px;\n    line-height: 14px;\n    margin-left: 3px;\n`;\n\n// Visually hidden but accessible to screen readers\nconst VisuallyHidden = styled.ul`\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n\n    & li {\n        list-style: none;\n    }\n`;\n\n/**\n * A chip input component that allows users to add and remove chips (tags) by typing and pressing Enter.\n * @component\n * @example\n * ```tsx\n * <ChipInput\n *   value={['tag1', 'tag2']}\n *   onChange={(newTags) => console.log(newTags)}\n *   label=\"Add tags\"\n *   errorText=\"At least one tag is required\"\n * />\n * ```\n */\nfunction ChipInputComponent(\n    props: ChipInputProps & Omit<React.AllHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>,\n    ref: React.Ref<HTMLInputElement | null>,\n) {\n    const {\n        value: propValue = [],\n        onChange: onChangeCallback,\n        label,\n        errorText,\n        closeButtonAriaLabel = `Remove {:label}`,\n        addedAnnouncementTemplate = '{:label} was added',\n        removedAnnouncementTemplate = '{:label} was removed',\n        width,\n        ...inputProps\n    } = props;\n\n    const [text, setText] = useState('');\n    const [touched, setTouched] = useState(false);\n    const [value, setValue] = useState<string[]>(propValue || []);\n    const InputRef = React.useRef<HTMLInputElement>(null);\n    const [announcement, setAnnouncement] = useState('');\n    const errorId = useId();\n\n    // Forward the underlying input element.\n    useImperativeHandle(ref, () => InputRef.current as HTMLInputElement);\n\n    /**\n     * Replace {:label} placeholder in template string\n     */\n    const replacePlaceholder = (\n        template: string | undefined,\n        label: string,\n    ): string | undefined => {\n        if (!template) return undefined;\n        return template.replace(/\\{:label\\}/g, label);\n    };\n\n    const prevPropValueRef = React.useRef<string[]>(undefined);\n\n    // Sync internal value with props.value\n    useEffect(() => {\n        if (Array.isArray(propValue)) {\n            const prevValue = prevPropValueRef.current;\n            const isEqual =\n                prevValue &&\n                propValue.length === prevValue.length &&\n                propValue.every((val, index) => val === prevValue[index]);\n            if (!isEqual) {\n                setValue(propValue);\n                prevPropValueRef.current = propValue;\n            }\n        }\n    }, [propValue]);\n\n    useEffect(() => {\n        if (InputRef.current) {\n            InputRef.current.setCustomValidity(errorText || '');\n        }\n    }, [errorText]);\n\n    /**\n     * Update the chip values and notify changes.\n     * @param newValue The new array of chip values\n     */\n    const updateValue = (newValue: string[]) => {\n        const deduped = Array.from(new Set(newValue));\n        setValue(deduped);\n        onChangeCallback?.(deduped);\n    };\n\n    /**\n     * Marks the input as touched on focus.\n     * @param e React focus event\n     */\n    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n        setTouched(true);\n        if (inputProps.onFocus) {\n            inputProps.onFocus(e);\n        }\n    };\n\n    /**\n     * Change handler for the input field.\n     * @param e React change event\n     */\n    const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n        setText(e.target.value);\n    };\n\n    /**\n     * Adds a new chip on Enter key press.\n     * @param e React keyboard event\n     */\n    const handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {\n        if (e.key === 'Enter') {\n            // Check validity against HTML5 constraints only (ignore custom validity from errorText)\n            let isValid;\n            if (InputRef.current) {\n                InputRef.current.setCustomValidity('');\n                isValid = InputRef.current.checkValidity();\n                InputRef.current.setCustomValidity(errorText || '');\n            }\n\n            // Only prevent form submission if we have valid text to add as a chip\n            if (text.trim() !== '' && isValid) {\n                e.preventDefault();\n                e.stopPropagation();\n                const newValue = [...value, text.trim()];\n                updateValue(newValue);\n                setText('');\n                setAnnouncement(replacePlaceholder(addedAnnouncementTemplate, text.trim())!);\n            }\n            // Otherwise, allow form submission to proceed\n        }\n    };\n\n    /**\n     * Removes a chip from the list.\n     * @param chipToRemove The chip value to remove\n     */\n    const removeChip = (chipToRemove: string) => {\n        const newValue = value.filter((chip) => chip !== chipToRemove);\n        updateValue(newValue);\n        setAnnouncement(replacePlaceholder(removedAnnouncementTemplate, chipToRemove)!);\n    };\n\n    /**\n     * Moves a chip from one position to another.\n     * @param start The starting index of the item to move\n     * @param end The ending index where the item should be placed\n     */\n    const onDrop = (start: number, end: number) => {\n        // Clone existing elements\n        const newItems = [...value];\n        // Remove the element to be moved\n        const item = newItems.splice(start, 1);\n        // Add it back at the required position\n        newItems.splice(end, 0, item[0]);\n        // Update\n        updateValue(newItems);\n    };\n\n    // Render the component\n    return (\n        <>\n            <Container>\n                <Label\n                    text={text}\n                    touched={touched}\n                    errorText={errorText}\n                    required={inputProps.required}\n                    width={width}\n                >\n                    <input\n                        {...inputProps}\n                        ref={InputRef}\n                        value={text}\n                        onChange={handleChange}\n                        onFocus={handleFocus}\n                        onKeyDown={handleKeyDown}\n                        required={inputProps.required && value.length === 0}\n                        aria-required={inputProps.required}\n                        aria-invalid={!!errorText}\n                        aria-describedby={errorText ? errorId : undefined}\n                    />\n                    <div>\n                        {value?.length > 0 && (\n                            <DragAndDrop orientation={ORIENTATION.HORIZONTAL} onDrop={onDrop}>\n                                {value.map((chip) => (\n                                    <Chip\n                                        key={chip}\n                                        label={chip}\n                                        onCloseClick={() => removeChip(chip)}\n                                        closeButtonAriaLabel={replacePlaceholder(\n                                            closeButtonAriaLabel,\n                                            chip,\n                                        )}\n                                    />\n                                ))}\n                            </DragAndDrop>\n                        )}\n                    </div>\n                    <span>{label}</span>\n                </Label>\n                {errorText && <ErrorContainer id={errorId}>{errorText}</ErrorContainer>}\n            </Container>\n            <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n                {announcement}\n            </VisuallyHidden>\n        </>\n    );\n}\n\nconst ChipInput = React.forwardRef<\n    HTMLInputElement,\n    ChipInputProps & Omit<React.AllHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>\n>(ChipInputComponent);\n\nexport default ChipInput;\n"],"names":["Container","styled","Label","getThemeValue","THEME_NAME","BORDER_COLOR","BACKGROUND","props","width","PRIMARY","PRIMARY_LIGHT","DISABLED_BORDER","DISABLED_BACKGROUND","DISABLED","ERROR","ERROR_LIGHT","touched","errorText","required","text","ErrorContainer","VisuallyHidden","ChipInputComponent","ref","value","propValue","onChange","onChangeCallback","label","closeButtonAriaLabel","addedAnnouncementTemplate","removedAnnouncementTemplate","inputProps","setText","useState","setTouched","setValue","InputRef","React","useRef","announcement","setAnnouncement","errorId","useId","useImperativeHandle","current","replacePlaceholder","template","undefined","replace","prevPropValueRef","useEffect","Array","isArray","prevValue","isEqual","length","every","val","index","setCustomValidity","updateValue","newValue","deduped","from","Set","handleFocus","e","onFocus","handleChange","target","handleKeyDown","key","isValid","checkValidity","trim","preventDefault","stopPropagation","removeChip","chipToRemove","filter","chip","onDrop","start","end","newItems","item","splice","_jsxs","_Fragment","_jsx","input","onKeyDown","aria-required","aria-invalid","aria-describedby","div","DragAndDrop","orientation","ORIENTATION","HORIZONTAL","map","Chip","onCloseClick","span","id","aria-live","aria-atomic","ChipInput","forwardRef"],"mappings":"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"}

package/lib-esm/components/DragAndDrop/DragAndDrop.js

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import DragItem from './DragItem.js';
 import { ORIENTATION, DragContext } from './types.js';
 
-/** 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', ";");
@@ -107,7 +107,7 @@ import { ORIENTATION, DragContext } from './types.js';
                     setDragOver,
                     i18n
                 },
-                children: /*#__PURE__*/ jsx(Container$8, {
+                children: /*#__PURE__*/ jsx(Container$9, {
                     ...rest,
                     ref: ref,
                     orientation: orientation,

package/lib-esm/components/DragAndDrop/DragItem.js

@@ -13,7 +13,7 @@ import CheckCircle from '../../icons/DragIndicator.js';
     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;");
@@ -255,7 +255,7 @@ import CheckCircle from '../../icons/DragIndicator.js';
                 tabIndex: -1,
                 children: /*#__PURE__*/ jsx(CheckCircle, {})
             }),
-            /*#__PURE__*/ jsx(Container$9, {
+            /*#__PURE__*/ jsx(Container$a, {
                 children: children
             })
         ]

package/lib-esm/components/Notification/NotificationManager.js

@@ -83,6 +83,7 @@ const DEFAULT_DURATION$1 = 5000;
                                     ]
                                 }),
                                 /*#__PURE__*/ jsx(CloseButton, {
+                                    type: "button",
                                     onClick: this.closeClickHandler(id),
                                     "aria-label": closeButtonAriaLabel || 'Close notification',
                                     tabIndex: 0,

package/lib-esm/components/Notification/NotificationManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationManager.js","sources":["../../../src/components/Notification/NotificationManager.tsx"],"sourcesContent":["import React from 'react';\nimport { Close, Info, ReportProblem, ErrorOutline, CheckCircle } from '../../icons';\nimport { ActionButton } from '../Button';\nimport {\n    Container,\n    Notice,\n    Title,\n    IconContainer,\n    FillParent,\n    Body,\n    CloseButton,\n    Footer,\n    VisuallyHidden,\n} from './style';\nimport { NOTIFICATION_POSITION, NOTIFICATION_TYPE, NotificationOptions } from './types';\n\ninterface NotificationManagerProps {\n    // Notification Position\n    position: NOTIFICATION_POSITION;\n    // Callback for when stack is emptied\n    onEmpty: () => void;\n    // Aria label for the notification list\n    ariaLabel?: string;\n}\n\n// Notice prop\ninterface NoticeProp extends NotificationOptions {\n    leaving?: boolean;\n}\n\n// Manager state\ninterface NotificationManagerState {\n    notices: NoticeProp[];\n}\n\ntype timeouts = {\n    [id: string]: NodeJS.Timeout;\n};\n\nconst DEFAULT_DURATION = 5000;\n\n/**\n * Notification Manager class\n */\nclass NotificationManager extends React.Component<\n    NotificationManagerProps,\n    NotificationManagerState\n> {\n    state: NotificationManagerState = {\n        notices: [],\n    };\n\n    // bookkeeping for timeouts\n    private timeouts: timeouts = {};\n\n    // Set of notification ids\n    private set = new Set<string>();\n\n    // Refs for live regions to ensure they exist before updates\n    private politeRegionRef = React.createRef<HTMLDivElement>();\n    private assertiveRegionRef = React.createRef<HTMLDivElement>();\n\n    /**\n     * Removes a notification from stack if the notification with the given id is found.\n     *\n     * @param id\n     */\n    public remove = (id?: string) => {\n        if (!id) return;\n\n        // Trigger leaving animation.\n        this.setState({\n            notices: this.state.notices.map((notice) => ({\n                ...notice,\n                leaving: notice.id === id ? true : notice.leaving,\n            })),\n        });\n        this.set.delete(id);\n\n        // Remove notification on animation completion.\n        setTimeout(() => {\n            const notice = this.state.notices.find((notice) => notice.id === id);\n            if (notice) {\n                // call close callback, ignore any errors in callback.\n                if (notice.onClose) {\n                    try {\n                        notice.onClose();\n                    } catch (e: unknown) {\n                        console.warn('Error in notification close callback', (e as Error).message);\n                    }\n                }\n\n                // Remove the notification\n                this.setState(\n                    {\n                        notices: this.state.notices.filter((notice) => notice.id !== id),\n                    },\n                    () => {\n                        // Check if the stack is empty and then call the\n                        // empty callback function.\n                        if (this.state.notices.length === 0) {\n                            this.props.onEmpty();\n                        }\n                    },\n                );\n            }\n        }, 550);\n    };\n\n    /**\n     * Adds a notification to stack.\n     *\n     * @param notice\n     */\n    public add = async (notice: NotificationOptions) => {\n        // Generate unique id if not provided.\n        const id = notice.id || (Math.random() * 10 ** 7).toFixed(0);\n\n        // De-dupe on id\n        if (!this.set.has(id)) {\n            const type = notice.type || NOTIFICATION_TYPE.INFO;\n            const isUrgent =\n                type === NOTIFICATION_TYPE.WARNING || type === NOTIFICATION_TYPE.DANGER;\n\n            // Add notice to the top of stack.\n            this.setState(\n                (prevState) => ({\n                    notices: [\n                        {\n                            ...notice,\n                            id,\n                        },\n                        ...prevState.notices,\n                    ],\n                }),\n                () => {\n                    // Update live region after state update\n                    const announcement = `${notice.title} ${notice.description}`;\n                    this.updateLiveRegion(announcement, isUrgent);\n                },\n            );\n\n            // set timeout for closing the notification.\n            if (!notice.sticky) {\n                this.timeouts[id] = setTimeout(\n                    () => this.remove(id),\n                    notice.duration || DEFAULT_DURATION,\n                );\n            }\n\n            // Add id to the set.\n            this.set.add(id);\n        }\n\n        return id;\n    };\n\n    /**\n     * Update live region content with clear-then-set pattern for reliable VoiceOver announcements.\n     *\n     * @param content - The text content to announce\n     * @param isAssertive - Whether to use assertive (alert) or polite (log) live region\n     */\n    private updateLiveRegion = (content: string, isAssertive: boolean) => {\n        const region = isAssertive ? this.assertiveRegionRef.current : this.politeRegionRef.current;\n\n        if (region) {\n            // Add content after delay\n            setTimeout(() => {\n                if (region) {\n                    region.textContent = content;\n                }\n            }, 150);\n        }\n    };\n\n    /**\n     * Handler for close button click.\n     *\n     * @param id\n     */\n    public closeClickHandler = (id?: string) => () => {\n        this.remove(id);\n    };\n\n    /**\n     * Pause notification when user is hovering over it.\n     *\n     * @param id\n     */\n    public pause = (id?: string) => () => {\n        if (id && this.timeouts[id]) {\n            clearTimeout(this.timeouts[id]);\n            delete this.timeouts[id];\n        }\n    };\n\n    /**\n     * Restart the removal of notification.\n     *\n     * @param id\n     */\n    public resume = (id?: string) => () => {\n        const notice = this.state.notices.find((notice) => notice.id === id);\n        if (!notice?.sticky && id && !this.timeouts[id]) {\n            this.timeouts[id] = setTimeout(() => this.remove(id), DEFAULT_DURATION);\n        }\n    };\n\n    /**\n     * Clean up all pending timeouts when component unmounts\n     */\n    componentWillUnmount() {\n        // Clear all pending timeouts\n        Object.keys(this.timeouts).forEach((id) => {\n            clearTimeout(this.timeouts[id]);\n        });\n        this.timeouts = {};\n        this.set.clear();\n    }\n\n    render() {\n        return (\n            <Container position={this.props.position}>\n                {/* Polite live region - uses role=\"log\" for better VoiceOver compatibility */}\n                <VisuallyHidden\n                    ref={this.politeRegionRef}\n                    role=\"log\"\n                    aria-live=\"polite\"\n                    aria-atomic=\"false\"\n                    aria-relevant=\"additions text\"\n                />\n\n                {/* Assertive live region - pre-rendered and persistent */}\n                <VisuallyHidden\n                    ref={this.assertiveRegionRef}\n                    role=\"alert\"\n                    aria-live=\"assertive\"\n                    aria-atomic=\"true\"\n                />\n\n                {/* Visual notifications with list semantics */}\n                <div role=\"list\" aria-label={this.props.ariaLabel}>\n                    {this.state.notices.map((notice) => {\n                        const {\n                            id,\n                            title,\n                            description,\n                            leaving,\n                            type = NOTIFICATION_TYPE.INFO,\n                            buttonText,\n                            buttonClick,\n                            closeButtonAriaLabel,\n                        } = notice;\n\n                        return (\n                            <Notice\n                                key={id}\n                                {...notice}\n                                position={this.props.position}\n                                className={leaving ? 'leave' : ''}\n                                onMouseEnter={this.pause(id)}\n                                onMouseLeave={this.resume(id)}\n                                role=\"listitem\"\n                            >\n                                <IconContainer type={type} aria-hidden=\"true\">\n                                    {type === NOTIFICATION_TYPE.INFO && <Info />}\n                                    {type === NOTIFICATION_TYPE.SUCCESS && <CheckCircle />}\n                                    {type === NOTIFICATION_TYPE.WARNING && <ReportProblem />}\n                                    {type === NOTIFICATION_TYPE.DANGER && <ErrorOutline />}\n                                </IconContainer>\n                                <FillParent>\n                                    <Title type={type}>{title}</Title>\n                                    <Body>{description}</Body>\n                                    {buttonText && (\n                                        <Footer>\n                                            <ActionButton\n                                                onClick={() => {\n                                                    buttonClick?.();\n                                                }}\n                                            >\n                                                {buttonText}\n                                            </ActionButton>\n                                        </Footer>\n                                    )}\n                                </FillParent>\n                                <CloseButton\n                                    onClick={this.closeClickHandler(id)}\n                                    aria-label={closeButtonAriaLabel || 'Close notification'}\n                                    tabIndex={0}\n                                >\n                                    <Close />\n                                </CloseButton>\n                            </Notice>\n                        );\n                    })}\n                </div>\n            </Container>\n        );\n    }\n}\n\nexport default NotificationManager;\n"],"names":["DEFAULT_DURATION","NotificationManager","React","Component","componentWillUnmount","Object","keys","timeouts","forEach","id","clearTimeout","set","clear","render","_jsxs","Container","position","props","_jsx","VisuallyHidden","ref","politeRegionRef","role","aria-live","aria-atomic","aria-relevant","assertiveRegionRef","div","aria-label","ariaLabel","state","notices","map","notice","title","description","leaving","type","NOTIFICATION_TYPE","INFO","buttonText","buttonClick","closeButtonAriaLabel","Notice","className","onMouseEnter","pause","onMouseLeave","resume","IconContainer","aria-hidden","Info","SUCCESS","CheckCircle","WARNING","ReportProblem","DANGER","ErrorOutline","FillParent","Title","Body","Footer","ActionButton","onClick","CloseButton","closeClickHandler","tabIndex","Close","Set","createRef","remove","setState","delete","setTimeout","find","onClose","e","console","warn","message","filter","length","onEmpty","add","Math","random","toFixed","has","isUrgent","prevState","announcement","updateLiveRegion","sticky","duration","content","isAssertive","region","current","textContent"],"mappings":"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"}
+{"version":3,"file":"NotificationManager.js","sources":["../../../src/components/Notification/NotificationManager.tsx"],"sourcesContent":["import React from 'react';\nimport { Close, Info, ReportProblem, ErrorOutline, CheckCircle } from '../../icons';\nimport { ActionButton } from '../Button';\nimport {\n    Container,\n    Notice,\n    Title,\n    IconContainer,\n    FillParent,\n    Body,\n    CloseButton,\n    Footer,\n    VisuallyHidden,\n} from './style';\nimport { NOTIFICATION_POSITION, NOTIFICATION_TYPE, NotificationOptions } from './types';\n\ninterface NotificationManagerProps {\n    // Notification Position\n    position: NOTIFICATION_POSITION;\n    // Callback for when stack is emptied\n    onEmpty: () => void;\n    // Aria label for the notification list\n    ariaLabel?: string;\n}\n\n// Notice prop\ninterface NoticeProp extends NotificationOptions {\n    leaving?: boolean;\n}\n\n// Manager state\ninterface NotificationManagerState {\n    notices: NoticeProp[];\n}\n\ntype timeouts = {\n    [id: string]: NodeJS.Timeout;\n};\n\nconst DEFAULT_DURATION = 5000;\n\n/**\n * Notification Manager class\n */\nclass NotificationManager extends React.Component<\n    NotificationManagerProps,\n    NotificationManagerState\n> {\n    state: NotificationManagerState = {\n        notices: [],\n    };\n\n    // bookkeeping for timeouts\n    private timeouts: timeouts = {};\n\n    // Set of notification ids\n    private set = new Set<string>();\n\n    // Refs for live regions to ensure they exist before updates\n    private politeRegionRef = React.createRef<HTMLDivElement>();\n    private assertiveRegionRef = React.createRef<HTMLDivElement>();\n\n    /**\n     * Removes a notification from stack if the notification with the given id is found.\n     *\n     * @param id\n     */\n    public remove = (id?: string) => {\n        if (!id) return;\n\n        // Trigger leaving animation.\n        this.setState({\n            notices: this.state.notices.map((notice) => ({\n                ...notice,\n                leaving: notice.id === id ? true : notice.leaving,\n            })),\n        });\n        this.set.delete(id);\n\n        // Remove notification on animation completion.\n        setTimeout(() => {\n            const notice = this.state.notices.find((notice) => notice.id === id);\n            if (notice) {\n                // call close callback, ignore any errors in callback.\n                if (notice.onClose) {\n                    try {\n                        notice.onClose();\n                    } catch (e: unknown) {\n                        console.warn('Error in notification close callback', (e as Error).message);\n                    }\n                }\n\n                // Remove the notification\n                this.setState(\n                    {\n                        notices: this.state.notices.filter((notice) => notice.id !== id),\n                    },\n                    () => {\n                        // Check if the stack is empty and then call the\n                        // empty callback function.\n                        if (this.state.notices.length === 0) {\n                            this.props.onEmpty();\n                        }\n                    },\n                );\n            }\n        }, 550);\n    };\n\n    /**\n     * Adds a notification to stack.\n     *\n     * @param notice\n     */\n    public add = async (notice: NotificationOptions) => {\n        // Generate unique id if not provided.\n        const id = notice.id || (Math.random() * 10 ** 7).toFixed(0);\n\n        // De-dupe on id\n        if (!this.set.has(id)) {\n            const type = notice.type || NOTIFICATION_TYPE.INFO;\n            const isUrgent =\n                type === NOTIFICATION_TYPE.WARNING || type === NOTIFICATION_TYPE.DANGER;\n\n            // Add notice to the top of stack.\n            this.setState(\n                (prevState) => ({\n                    notices: [\n                        {\n                            ...notice,\n                            id,\n                        },\n                        ...prevState.notices,\n                    ],\n                }),\n                () => {\n                    // Update live region after state update\n                    const announcement = `${notice.title} ${notice.description}`;\n                    this.updateLiveRegion(announcement, isUrgent);\n                },\n            );\n\n            // set timeout for closing the notification.\n            if (!notice.sticky) {\n                this.timeouts[id] = setTimeout(\n                    () => this.remove(id),\n                    notice.duration || DEFAULT_DURATION,\n                );\n            }\n\n            // Add id to the set.\n            this.set.add(id);\n        }\n\n        return id;\n    };\n\n    /**\n     * Update live region content with clear-then-set pattern for reliable VoiceOver announcements.\n     *\n     * @param content - The text content to announce\n     * @param isAssertive - Whether to use assertive (alert) or polite (log) live region\n     */\n    private updateLiveRegion = (content: string, isAssertive: boolean) => {\n        const region = isAssertive ? this.assertiveRegionRef.current : this.politeRegionRef.current;\n\n        if (region) {\n            // Add content after delay\n            setTimeout(() => {\n                if (region) {\n                    region.textContent = content;\n                }\n            }, 150);\n        }\n    };\n\n    /**\n     * Handler for close button click.\n     *\n     * @param id\n     */\n    public closeClickHandler = (id?: string) => () => {\n        this.remove(id);\n    };\n\n    /**\n     * Pause notification when user is hovering over it.\n     *\n     * @param id\n     */\n    public pause = (id?: string) => () => {\n        if (id && this.timeouts[id]) {\n            clearTimeout(this.timeouts[id]);\n            delete this.timeouts[id];\n        }\n    };\n\n    /**\n     * Restart the removal of notification.\n     *\n     * @param id\n     */\n    public resume = (id?: string) => () => {\n        const notice = this.state.notices.find((notice) => notice.id === id);\n        if (!notice?.sticky && id && !this.timeouts[id]) {\n            this.timeouts[id] = setTimeout(() => this.remove(id), DEFAULT_DURATION);\n        }\n    };\n\n    /**\n     * Clean up all pending timeouts when component unmounts\n     */\n    componentWillUnmount() {\n        // Clear all pending timeouts\n        Object.keys(this.timeouts).forEach((id) => {\n            clearTimeout(this.timeouts[id]);\n        });\n        this.timeouts = {};\n        this.set.clear();\n    }\n\n    render() {\n        return (\n            <Container position={this.props.position}>\n                {/* Polite live region - uses role=\"log\" for better VoiceOver compatibility */}\n                <VisuallyHidden\n                    ref={this.politeRegionRef}\n                    role=\"log\"\n                    aria-live=\"polite\"\n                    aria-atomic=\"false\"\n                    aria-relevant=\"additions text\"\n                />\n\n                {/* Assertive live region - pre-rendered and persistent */}\n                <VisuallyHidden\n                    ref={this.assertiveRegionRef}\n                    role=\"alert\"\n                    aria-live=\"assertive\"\n                    aria-atomic=\"true\"\n                />\n\n                {/* Visual notifications with list semantics */}\n                <div role=\"list\" aria-label={this.props.ariaLabel}>\n                    {this.state.notices.map((notice) => {\n                        const {\n                            id,\n                            title,\n                            description,\n                            leaving,\n                            type = NOTIFICATION_TYPE.INFO,\n                            buttonText,\n                            buttonClick,\n                            closeButtonAriaLabel,\n                        } = notice;\n\n                        return (\n                            <Notice\n                                key={id}\n                                {...notice}\n                                position={this.props.position}\n                                className={leaving ? 'leave' : ''}\n                                onMouseEnter={this.pause(id)}\n                                onMouseLeave={this.resume(id)}\n                                role=\"listitem\"\n                            >\n                                <IconContainer type={type} aria-hidden=\"true\">\n                                    {type === NOTIFICATION_TYPE.INFO && <Info />}\n                                    {type === NOTIFICATION_TYPE.SUCCESS && <CheckCircle />}\n                                    {type === NOTIFICATION_TYPE.WARNING && <ReportProblem />}\n                                    {type === NOTIFICATION_TYPE.DANGER && <ErrorOutline />}\n                                </IconContainer>\n                                <FillParent>\n                                    <Title type={type}>{title}</Title>\n                                    <Body>{description}</Body>\n                                    {buttonText && (\n                                        <Footer>\n                                            <ActionButton\n                                                onClick={() => {\n                                                    buttonClick?.();\n                                                }}\n                                            >\n                                                {buttonText}\n                                            </ActionButton>\n                                        </Footer>\n                                    )}\n                                </FillParent>\n                                <CloseButton\n                                    type=\"button\"\n                                    onClick={this.closeClickHandler(id)}\n                                    aria-label={closeButtonAriaLabel || 'Close notification'}\n                                    tabIndex={0}\n                                >\n                                    <Close />\n                                </CloseButton>\n                            </Notice>\n                        );\n                    })}\n                </div>\n            </Container>\n        );\n    }\n}\n\nexport default NotificationManager;\n"],"names":["DEFAULT_DURATION","NotificationManager","React","Component","componentWillUnmount","Object","keys","timeouts","forEach","id","clearTimeout","set","clear","render","_jsxs","Container","position","props","_jsx","VisuallyHidden","ref","politeRegionRef","role","aria-live","aria-atomic","aria-relevant","assertiveRegionRef","div","aria-label","ariaLabel","state","notices","map","notice","title","description","leaving","type","NOTIFICATION_TYPE","INFO","buttonText","buttonClick","closeButtonAriaLabel","Notice","className","onMouseEnter","pause","onMouseLeave","resume","IconContainer","aria-hidden","Info","SUCCESS","CheckCircle","WARNING","ReportProblem","DANGER","ErrorOutline","FillParent","Title","Body","Footer","ActionButton","onClick","CloseButton","closeClickHandler","tabIndex","Close","Set","createRef","remove","setState","delete","setTimeout","find","onClose","e","console","warn","message","filter","length","onEmpty","add","Math","random","toFixed","has","isUrgent","prevState","announcement","updateLiveRegion","sticky","duration","content","isAssertive","region","current","textContent"],"mappings":"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"}