no-frills-ui 0.0.14-alpha.8 → 0.0.14-rc.1

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

@@ -1 +1 @@
-{"version":3,"file":"ChipInput.js","sources":["../../../src/components/ChipInput/ChipInput.tsx"],"sourcesContent":["import React, { useEffect, useId, useState } from 'react';\nimport PropTypes from 'prop-types';\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\ntype ChipInputProps = PropTypes.InferProps<typeof ChipInput.propTypes>;\n\n// Label component for the ChipInput\nconst Label = styled.label<{\n    text: string;\n    touched?: boolean;\n    errorText?: string;\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    width: 250px;\n    border-radius: 3px;\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\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    &:has(:required) > span:after {\n        content: '*';\n        margin-left: 2px;\n        color: ${getThemeValue(THEME_NAME.ERROR)};\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 */\nexport default function ChipInput(\n    props: ChipInputProps & React.AllHTMLAttributes<HTMLInputElement>,\n) {\n    const [text, setText] = useState('');\n    const [touched, setTouched] = useState(false);\n    const [value, setValue] = useState<string[]>(props.value || []);\n    const InputRef = React.useRef<HTMLInputElement>(null);\n    const [announcement, setAnnouncement] = useState('');\n    const errorId = useId();\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    // Sync internal value with props.value\n    useEffect(() => {\n        if (Array.isArray(props.value)) {\n            setValue(props.value);\n        }\n    }, [props.value]);\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(props.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(props.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 text={text} touched={touched} errorText={props.errorText}>\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                                        props.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\nChipInput.propTypes = {\n    /** Label for the field */\n    label: PropTypes.string.isRequired,\n    /** Error message for the field */\n    errorText: PropTypes.string,\n    /** Values to display as chips */\n    value: PropTypes.arrayOf(PropTypes.string),\n    /** Callback when chips change */\n    onChange: PropTypes.func,\n    /** Aria label for the close button on chip. Defaults to \"Remove {label}\" */\n    closeButtonAriaLabel: PropTypes.string,\n    /** Announcement text when a chip is added. Defaults to \"{label} was added\" */\n    addedAnnouncementTemplate: PropTypes.string,\n    /** Announcement text when a chip is removed. Defaults to \"{label} was removed\" */\n    removedAnnouncementTemplate: PropTypes.string,\n};\n\nChipInput.defaultProps = {\n    value: [],\n    closeButtonAriaLabel: 'Remove {:label}',\n    addedAnnouncementTemplate: '{:label} was added',\n    removedAnnouncementTemplate: '{:label} was removed',\n};\n"],"names":["Label","styled","getThemeValue","THEME_NAME","BORDER_COLOR","BACKGROUND","PRIMARY","PRIMARY_LIGHT","DISABLED_BORDER","DISABLED_BACKGROUND","DISABLED","ERROR","ERROR_LIGHT","props","touched","errorText","text","ErrorContainer","VisuallyHidden","ChipInput","setText","useState","setTouched","value","setValue","InputRef","React","useRef","announcement","setAnnouncement","errorId","useId","replacePlaceholder","template","label","undefined","replace","useEffect","Array","isArray","updateValue","newValue","deduped","from","Set","onChange","handleFocus","e","onFocus","handleChange","target","handleKeyUp","key","trim","current","validity","valid","addedAnnouncementTemplate","removeChip","chipToRemove","filter","chip","removedAnnouncementTemplate","onDrop","start","end","newItems","item","splice","_jsxs","_Fragment","_jsx","input","ref","onKeyUp","required","length","aria-required","aria-invalid","aria-describedby","div","DragAndDrop","orientation","ORIENTATION","HORIZONTAL","map","Chip","onCloseClick","closeButtonAriaLabel","span","id","aria-live","aria-atomic","propTypes","PropTypes","string","isRequired","arrayOf","func","defaultProps"],"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// 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    /**\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","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":";;;;;;;;AAoCA;AACA,MAAMA,OAAAA,iBAAQC,MAAAA,CAAAA,OAAAA,EAAAA;;;AAeUC,CAAAA,CAAAA,CAAAA,oJAAAA,EAAAA,aAAAA,CAAcC,UAAAA,CAAWC,YAAY,CAAA,EAAA,oBAAA,EACrCF,aAAAA,CAAcC,UAAAA,CAAWE,UAAU,CAAA,EAAA,SAAA,EAC9C,CAACC,KAAAA,GACN,OAAOA,KAAAA,CAAMC,KAAK,KAAK,QAAA,GAAW,CAAA,EAAGD,KAAAA,CAAMC,KAAK,CAAC,EAAE,CAAC,GAAGD,KAAAA,CAAMC,KAAK,IAAI,OAAA,EAAA,4DAAA,EAMtDL,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,6BACxBN,aAAAA,CAAcC,UAAAA,CAAWM,aAAa,CAAA,EAAA,qDAAA,EAKrDP,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,CAAA,EAAA,kCAAA,EAKzBN,aAAAA,CAAcC,UAAAA,CAAWO,eAAe,CAAA,EAAA,oBAAA,EACpCR,aAAAA,CAAcC,UAAAA,CAAWQ,mBAAmB,CAAA,EAAA,kCAAA,EAIvDT,aAAAA,CAAcC,UAAAA,CAAWS,QAAQ,CAAA,EAAA,uCAAA,EAK1BV,aAAAA,CAAcC,UAAAA,CAAWU,KAAK,CAAA,EAAA,wBAAA,EACtBX,aAAAA,CAAcC,UAAAA,CAAWW,WAAW,CAAA,EAAA,IAAA,EAG9D,CAACR,KAAAA,GACCA,KAAAA,CAAMS,OAAO,GACP;;0BAEY,EAAEb,aAAAA,CAAcC,UAAAA,CAAWU,KAAK,CAAA,CAAE;;;;mBAIzC,EAAEX,aAAAA,CAAcC,UAAAA,CAAWU,KAAK,CAAA,CAAE;;AAE7C,QAAA,CAAC,GACK,EAAA,EAAA,YAAA,EAGR,CAACP,QACCA,KAAAA,CAAMU,SAAS,GACT;sBACQ,EAAEd,aAAAA,CAAcC,UAAAA,CAAWU,KAAK,CAAA,CAAE;;;mBAGrC,EAAEX,aAAAA,CAAcC,UAAAA,CAAWU,KAAK,CAAA,CAAE;;AAE7C,QAAA,CAAC,GACK,EAAA,EAAA,YAAA,EAGR,CAACP,QACCA,KAAAA,CAAMW,QAAQ,GACR,CAAC;;;uBAGQ,EAAEf,aAAAA,CAAcC,UAAAA,CAAWU,KAAK,CAAA,CAAE;AAC5C,aAAA,CAAC,GACA,EAAA,EAAA,gSAAA,EAyBQX,aAAAA,CAAcC,UAAAA,CAAWE,UAAU,CAAA,EAAA,oCAAA,EAKnD,CAACC,KAAAA,GACCA,KAAAA,CAAMY,IAAI,KAAK,EAAA,GACT;;;oBAGM,EAAEhB,aAAAA,CAAcC,UAAAA,CAAWE,UAAU,CAAA,CAAE;;;;AAIvD,IAAA,CAAC,GACS,EAAA,CAAA;AAGd;AACA,MAAMc,gBAAAA,iBAAiBlB,MAAAA,CAAAA,KAAAA,EAAAA;;;AACVC,CAAAA,CAAAA,CAAAA,QAAAA,EAAAA,aAAAA,CAAcC,WAAWU,KAAK,CAAA,EAAA,mEAAA,CAAA;AAO3C;AACA,MAAMO,gBAAAA,iBAAiBnB,MAAAA,CAAAA,IAAAA,EAAAA;;;;AAgBvB;;;;;;;;;;;;AAYC,IACD,SAASoB,kBAAAA,CACLf,KAA6F,EAC7FgB,GAAuC,EAAA;AAEvC,IAAA,MAAM,EACFC,KAAAA,EAAOC,SAAAA,GAAY,EAAE,EACrBC,uBAAuB,CAAC,eAAe,CAAC,EACxCC,4BAA4B,oBAAoB,EAChDC,2BAAAA,GAA8B,sBAAsB,EACvD,GAAGrB,KAAAA;AAEJ,IAAA,MAAM,CAACY,IAAAA,EAAMU,OAAAA,CAAQ,GAAGC,QAAAA,CAAS,EAAA,CAAA;AACjC,IAAA,MAAM,CAACd,OAAAA,EAASe,UAAAA,CAAW,GAAGD,QAAAA,CAAS,KAAA,CAAA;AACvC,IAAA,MAAM,CAACN,KAAAA,EAAOQ,QAAAA,CAAS,GAAGF,QAAAA,CAAmBL,aAAa,EAAE,CAAA;IAC5D,MAAMQ,QAAAA,GAAWC,KAAAA,CAAMC,MAAM,CAAmB,IAAA,CAAA;AAChD,IAAA,MAAM,CAACC,YAAAA,EAAcC,eAAAA,CAAgB,GAAGP,QAAAA,CAAS,EAAA,CAAA;AACjD,IAAA,MAAMQ,OAAAA,GAAUC,KAAAA,EAAAA;;IAGhBC,mBAAAA,CAAoBjB,GAAAA,EAAK,IAAMU,QAAAA,CAASQ,OAAO,CAAA;AAE/C;;QAGA,MAAMC,kBAAAA,GAAqB,CACvBC,QAAAA,EACAC,KAAAA,GAAAA;QAEA,IAAI,CAACD,UAAU,OAAOE,SAAAA;QACtB,OAAOF,QAAAA,CAASG,OAAO,CAAC,aAAA,EAAeF,KAAAA,CAAAA;AAC3C,IAAA,CAAA;IAEA,MAAMG,gBAAAA,GAAmBb,KAAAA,CAAMC,MAAM,CAAWU,SAAAA,CAAAA;;IAGhDG,SAAAA,CAAU,IAAA;QACN,IAAIC,KAAAA,CAAMC,OAAO,CAACzB,SAAAA,CAAAA,EAAY;YAC1B,MAAM0B,SAAAA,GAAYJ,iBAAiBN,OAAO;AAC1C,YAAA,MAAMW,UACFD,SAAAA,IACA1B,SAAAA,CAAU4B,MAAM,KAAKF,UAAUE,MAAM,IACrC5B,SAAAA,CAAU6B,KAAK,CAAC,CAACC,GAAAA,EAAKC,QAAUD,GAAAA,KAAQJ,SAAS,CAACK,KAAAA,CAAM,CAAA;AAC5D,YAAA,IAAI,CAACJ,OAAAA,EAAS;gBACVpB,QAAAA,CAASP,SAAAA,CAAAA;AACTsB,gBAAAA,gBAAAA,CAAiBN,OAAO,GAAGhB,SAAAA;AAC/B,YAAA;AACJ,QAAA;IACJ,CAAA,EAAG;AAACA,QAAAA;AAAU,KAAA,CAAA;AAEd;;;QAIA,MAAMgC,cAAc,CAACC,QAAAA,GAAAA;AACjB,QAAA,MAAMC,OAAAA,GAAUV,KAAAA,CAAMW,IAAI,CAAC,IAAIC,GAAAA,CAAIH,QAAAA,CAAAA,CAAAA;QACnC1B,QAAAA,CAAS2B,OAAAA,CAAAA;AACTpD,QAAAA,KAAAA,CAAMuD,QAAQ,GAAGH,OAAAA,CAAAA;AACrB,IAAA,CAAA;AAEA;;;QAIA,MAAMI,cAAc,CAACC,CAAAA,GAAAA;QACjBjC,UAAAA,CAAW,IAAA,CAAA;QACX,IAAIxB,KAAAA,CAAM0D,OAAO,EAAE;AACf1D,YAAAA,KAAAA,CAAM0D,OAAO,CAACD,CAAAA,CAAAA;AAClB,QAAA;AACJ,IAAA,CAAA;AAEA;;;QAIA,MAAME,eAA2D,CAACF,CAAAA,GAAAA;QAC9DnC,OAAAA,CAAQmC,CAAAA,CAAEG,MAAM,CAAC3C,KAAK,CAAA;AAC1B,IAAA,CAAA;AAEA;;;QAIA,MAAM4C,cAA4D,CAACJ,CAAAA,GAAAA;AAC/D,QAAA,IAAIA,CAAAA,CAAEK,GAAG,KAAK,OAAA,IAAWlD,IAAAA,CAAKmD,IAAI,EAAA,KAAO,EAAA,IAAMrC,QAAAA,CAASQ,OAAO,EAAE8B,QAAAA,CAASC,KAAAA,EAAO;AAC7E,YAAA,MAAMd,QAAAA,GAAW;AAAIlC,gBAAAA,GAAAA,KAAAA;AAAOL,gBAAAA,IAAAA,CAAKmD,IAAI;AAAG,aAAA;YACxCb,WAAAA,CAAYC,QAAAA,CAAAA;YACZ7B,OAAAA,CAAQ,EAAA,CAAA;YACRQ,eAAAA,CAAgBK,kBAAAA,CAAmBf,yBAAAA,EAA2BR,IAAAA,CAAKmD,IAAI,EAAA,CAAA,CAAA;AAC3E,QAAA;AACJ,IAAA,CAAA;AAEA;;;QAIA,MAAMG,aAAa,CAACC,YAAAA,GAAAA;AAChB,QAAA,MAAMhB,WAAWlC,KAAAA,CAAMmD,MAAM,CAAC,CAACC,OAASA,IAAAA,KAASF,YAAAA,CAAAA;QACjDjB,WAAAA,CAAYC,QAAAA,CAAAA;AACZrB,QAAAA,eAAAA,CAAgBK,mBAAmBd,2BAAAA,EAA6B8C,YAAAA,CAAAA,CAAAA;AACpE,IAAA,CAAA;AAEA;;;;QAKA,MAAMG,MAAAA,GAAS,CAACC,KAAAA,EAAeC,GAAAA,GAAAA;;AAE3B,QAAA,MAAMC,QAAAA,GAAW;AAAIxD,YAAAA,GAAAA;AAAM,SAAA;;AAE3B,QAAA,MAAMyD,IAAAA,GAAOD,QAAAA,CAASE,MAAM,CAACJ,KAAAA,EAAO,CAAA,CAAA;;AAEpCE,QAAAA,QAAAA,CAASE,MAAM,CAACH,GAAAA,EAAK,CAAA,EAAGE,IAAI,CAAC,CAAA,CAAE,CAAA;;QAE/BxB,WAAAA,CAAYuB,QAAAA,CAAAA;AAChB,IAAA,CAAA;;IAGA,qBACIG,IAAA,CAAAC,QAAA,EAAA;;0BACID,IAAA,CAAClF,OAAAA,EAAAA;gBACGkB,IAAAA,EAAMA,IAAAA;gBACNH,OAAAA,EAASA,OAAAA;AACTC,gBAAAA,SAAAA,EAAWV,MAAMU,SAAS;AAC1BC,gBAAAA,QAAAA,EAAUX,MAAMW,QAAQ;AACxBV,gBAAAA,KAAAA,EAAOD,MAAMC,KAAK;;kCAElB6E,GAAA,CAACC,OAAAA,EAAAA;AACI,wBAAA,GAAG/E,KAAK;wBACTgB,GAAAA,EAAKU,QAAAA;wBACLT,KAAAA,EAAOL,IAAAA;wBACP2C,QAAAA,EAAUI,YAAAA;wBACVD,OAAAA,EAASF,WAAAA;wBACTwB,OAAAA,EAASnB,WAAAA;AACTlD,wBAAAA,QAAAA,EAAUX,KAAAA,CAAMW,QAAQ,IAAIM,KAAAA,CAAM6B,MAAM,KAAK,CAAA;AAC7CmC,wBAAAA,eAAAA,EAAejF,MAAMW,QAAQ;wBAC7BuE,cAAAA,EAAc,CAAC,CAAClF,KAAAA,CAAMU,SAAS;wBAC/ByE,kBAAAA,EAAkBnF,KAAAA,CAAMU,SAAS,GAAGqB,OAAAA,GAAUO;;kCAElDwC,GAAA,CAACM,KAAAA,EAAAA;kCACInE,KAAAA,EAAO6B,MAAAA,GAAS,mBACbgC,GAAA,CAACO,WAAAA,EAAAA;AAAYC,4BAAAA,WAAAA,EAAaC,YAAYC,UAAU;4BAAElB,MAAAA,EAAQA,MAAAA;AACrDrD,4BAAAA,QAAAA,EAAAA,KAAAA,CAAMwE,GAAG,CAAC,CAACpB,IAAAA,iBACRS,GAAA,CAACY,IAAAA,EAAAA;oCAEGrD,KAAAA,EAAOgC,IAAAA;AACPsB,oCAAAA,YAAAA,EAAc,IAAMzB,UAAAA,CAAWG,IAAAA,CAAAA;AAC/BlD,oCAAAA,oBAAAA,EAAsBgB,mBAClBhB,oBAAAA,EACAkD,IAAAA;AALCA,iCAAAA,EAAAA,IAAAA,CAAAA;;;kCAYzBS,GAAA,CAACc,MAAAA,EAAAA;AAAM5F,wBAAAA,QAAAA,EAAAA,KAAAA,CAAMqC;;oBACZrC,KAAAA,CAAMU,SAAS,kBAAIoE,GAAA,CAACjE,gBAAAA,EAAAA;wBAAegF,EAAAA,EAAI9D,OAAAA;AAAU/B,wBAAAA,QAAAA,EAAAA,KAAAA,CAAMU;;;;0BAE5DoE,GAAA,CAAChE,gBAAAA,EAAAA;gBAAegF,WAAAA,EAAU,QAAA;gBAASC,aAAAA,EAAY,MAAA;AAC1ClE,gBAAAA,QAAAA,EAAAA;;;;AAIjB;AAEA,MAAMmE,SAAAA,iBAAYrE,KAAAA,CAAMsE,UAAU,CAGhClF,kBAAAA;;;;"}

package/lib-esm/components/Dialog/AlertDialog.d.ts

@@ -1,18 +1,17 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-type AlertOption = PropTypes.InferProps<typeof AlertDialog.propTypes>;
+import Dialog from './Dialog';
+type AlertOption = {
+    /** Shown as header of the dialog */
+    header: string;
+    /** Rendered in the body. */
+    body: React.ReactNode;
+    /** Accept button text */
+    buttonText?: string;
+    /** props for the dialog */
+    dialogProps?: React.ComponentProps<typeof Dialog>;
+};
 export default class AlertDialog extends React.Component<AlertOption> {
     private dialog;
-    static propTypes: {
-        /** Shown as header of the dialog */
-        header: PropTypes.Requireable<string>;
-        /** Rendered in the body. */
-        body: PropTypes.Validator<any>;
-        /** Accept button text, default value is `OK` */
-        buttonText: PropTypes.Requireable<string>;
-        /** props for the dialog */
-        dialogProps: PropTypes.Requireable<object>;
-    };
     static defaultProps: {
         buttonText: string;
     };

package/lib-esm/components/Dialog/AlertDialog.js

@@ -1,9 +1,8 @@
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 import React, { createRef } from 'react';
-import PropTypes from 'prop-types';
 import Dialog from './Dialog.js';
 import { Header, Body, Footer } from '../../shared/styles.js';
-import StyledButton from '../Button/Button.js';
+import Button from '../Button/Button.js';
 
 let dialogCounter = 0;
 class AlertDialog extends React.Component {
@@ -28,7 +27,7 @@ class AlertDialog extends React.Component {
                     children: this.props.body
                 }),
                 /*#__PURE__*/ jsx(Footer, {
-                    children: /*#__PURE__*/ jsx(StyledButton, {
+                    children: /*#__PURE__*/ jsx(Button, {
                         onClick: this.close,
                         children: this.props.buttonText
                     })
@@ -40,17 +39,11 @@ class AlertDialog extends React.Component {
         super(...args), this.dialog = /*#__PURE__*/ createRef(), this.show = ()=>{
             return new Promise((resolve)=>{
                 const onClose = ()=>resolve(null);
-                this.dialog.current.open(onClose);
+                this.dialog.current?.open(onClose);
             });
-        }, this.close = ()=>this.dialog.current.close();
+        }, this.close = ()=>this.dialog.current?.close();
     }
 }
-AlertDialog.propTypes = {
-    /** Shown as header of the dialog */ header: PropTypes.string,
-    /** Rendered in the body. */ body: PropTypes.any.isRequired,
-    /** Accept button text, default value is `OK` */ buttonText: PropTypes.string,
-    /** props for the dialog */ dialogProps: PropTypes.object
-};
 AlertDialog.defaultProps = {
     buttonText: 'OK'
 };

package/lib-esm/components/Dialog/AlertDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.js","sources":["../../../src/components/Dialog/AlertDialog.tsx"],"sourcesContent":["import React, { createRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { Button } from '../Button';\nimport Dialog, { DialogBody, DialogFooter, DialogHeader } from './Dialog';\n\ntype AlertOption = PropTypes.InferProps<typeof AlertDialog.propTypes>;\n\nlet dialogCounter = 0;\n\nexport default class AlertDialog extends React.Component<AlertOption> {\n    private dialog = createRef<Dialog>();\n\n    static propTypes = {\n        /** Shown as header of the dialog */\n        header: PropTypes.string,\n        /** Rendered in the body. */\n        body: PropTypes.any.isRequired,\n        /** Accept button text, default value is `OK` */\n        buttonText: PropTypes.string,\n        /** props for the dialog */\n        dialogProps: PropTypes.object,\n    };\n\n    static defaultProps = {\n        buttonText: 'OK',\n    };\n\n    public show = () => {\n        return new Promise((resolve) => {\n            const onClose = () => resolve(null);\n            this.dialog.current.open(onClose);\n        });\n    };\n\n    private close = () => this.dialog.current.close();\n\n    render() {\n        const titleId = `nfui-alert-dialog-${dialogCounter++}-title`;\n        const descriptionId = `nfui-alert-dialog-${dialogCounter++}-description`;\n\n        return (\n            <Dialog\n                {...this.props.dialogProps}\n                role=\"alertdialog\"\n                aria-labelledby={titleId}\n                aria-describedby={descriptionId}\n                ref={this.dialog}\n                closeOnEsc={false}\n                closeOnOverlayClick={false}\n            >\n                {this.props.header && <DialogHeader id={titleId}>{this.props.header}</DialogHeader>}\n                <DialogBody id={descriptionId}>{this.props.body}</DialogBody>\n                <DialogFooter>\n                    <Button onClick={this.close}>{this.props.buttonText}</Button>\n                </DialogFooter>\n            </Dialog>\n        );\n    }\n}\n"],"names":["dialogCounter","AlertDialog","React","Component","render","titleId","descriptionId","_jsxs","Dialog","props","dialogProps","role","aria-labelledby","aria-describedby","ref","dialog","closeOnEsc","closeOnOverlayClick","header","_jsx","DialogHeader","id","DialogBody","body","DialogFooter","Button","onClick","close","buttonText","createRef","show","Promise","resolve","onClose","current","open","propTypes","PropTypes","string","any","isRequired","object","defaultProps"],"mappings":";;;;;;;AAOA,IAAIA,aAAAA,GAAgB,CAAA;AAEL,MAAMC,WAAAA,SAAoBC,MAAMC,SAAS,CAAA;IA2BpDC,MAAAA,GAAS;AACL,QAAA,MAAMC,UAAU,CAAC,kBAAkB,EAAEL,aAAAA,EAAAA,CAAgB,MAAM,CAAC;AAC5D,QAAA,MAAMM,gBAAgB,CAAC,kBAAkB,EAAEN,aAAAA,EAAAA,CAAgB,YAAY,CAAC;AAExE,QAAA,qBACIO,IAAA,CAACC,MAAAA,EAAAA;AACI,YAAA,GAAG,IAAI,CAACC,KAAK,CAACC,WAAW;YAC1BC,IAAAA,EAAK,aAAA;YACLC,iBAAAA,EAAiBP,OAAAA;YACjBQ,kBAAAA,EAAkBP,aAAAA;YAClBQ,GAAAA,EAAK,IAAI,CAACC,MAAM;YAChBC,UAAAA,EAAY,KAAA;YACZC,mBAAAA,EAAqB,KAAA;;AAEpB,gBAAA,IAAI,CAACR,KAAK,CAACS,MAAM,kBAAIC,GAAA,CAACC,MAAAA,EAAAA;oBAAaC,EAAAA,EAAIhB,OAAAA;8BAAU,IAAI,CAACI,KAAK,CAACS;;8BAC7DC,GAAA,CAACG,IAAAA,EAAAA;oBAAWD,EAAAA,EAAIf,aAAAA;8BAAgB,IAAI,CAACG,KAAK,CAACc;;8BAC3CJ,GAAA,CAACK,MAAAA,EAAAA;AACG,oBAAA,QAAA,gBAAAL,GAAA,CAACM,YAAAA,EAAAA;wBAAOC,OAAAA,EAAS,IAAI,CAACC,KAAK;kCAAG,IAAI,CAAClB,KAAK,CAACmB;;;;;AAIzD,IAAA;;QAhDW,KAAA,CAAA,GAAA,IAAA,CAAA,EAAA,IAAA,CACHb,MAAAA,iBAASc,kBAiBVC,IAAAA,GAAO,IAAA;YACV,OAAO,IAAIC,QAAQ,CAACC,OAAAA,GAAAA;gBAChB,MAAMC,OAAAA,GAAU,IAAMD,OAAAA,CAAQ,IAAA,CAAA;AAC9B,gBAAA,IAAI,CAACjB,MAAM,CAACmB,OAAO,CAACC,IAAI,CAACF,OAAAA,CAAAA;AAC7B,YAAA,CAAA,CAAA;QACJ,CAAA,EAAA,IAAA,CAEQN,KAAAA,GAAQ,IAAM,IAAI,CAACZ,MAAM,CAACmB,OAAO,CAACP,KAAK,EAAA;;AAwBnD;AAjDqB1B,WAAAA,CAGVmC,SAAAA,GAAY;yCAEflB,MAAAA,EAAQmB,SAAAA,CAAUC,MAAM;AACxB,iCACAf,IAAAA,EAAMc,SAAAA,CAAUE,GAAG,CAACC,UAAU;qDAE9BZ,UAAAA,EAAYS,SAAAA,CAAUC,MAAM;gCAE5B5B,WAAAA,EAAa2B,SAAAA,CAAUI;AAC3B,CAAA;AAZiBxC,WAAAA,CAcVyC,YAAAA,GAAe;IAClBd,UAAAA,EAAY;AAChB,CAAA;;;;"}
+{"version":3,"file":"AlertDialog.js","sources":["../../../src/components/Dialog/AlertDialog.tsx"],"sourcesContent":["import React, { createRef } from 'react';\nimport { Button } from '../Button';\nimport Dialog, { DialogBody, DialogFooter, DialogHeader } from './Dialog';\n\ntype AlertOption = {\n    /** Shown as header of the dialog */\n    header: string;\n    /** Rendered in the body. */\n    body: React.ReactNode;\n    /** Accept button text */\n    buttonText?: string;\n    /** props for the dialog */\n    dialogProps?: React.ComponentProps<typeof Dialog>;\n};\n\nlet dialogCounter = 0;\n\nexport default class AlertDialog extends React.Component<AlertOption> {\n    private dialog = createRef<Dialog>();\n\n    static defaultProps = {\n        buttonText: 'OK',\n    };\n\n    public show = () => {\n        return new Promise((resolve) => {\n            const onClose = () => resolve(null);\n            this.dialog.current?.open(onClose);\n        });\n    };\n\n    private close = () => this.dialog.current?.close();\n\n    render() {\n        const titleId = `nfui-alert-dialog-${dialogCounter++}-title`;\n        const descriptionId = `nfui-alert-dialog-${dialogCounter++}-description`;\n\n        return (\n            <Dialog\n                {...this.props.dialogProps}\n                role=\"alertdialog\"\n                aria-labelledby={titleId}\n                aria-describedby={descriptionId}\n                ref={this.dialog}\n                closeOnEsc={false}\n                closeOnOverlayClick={false}\n            >\n                {this.props.header && <DialogHeader id={titleId}>{this.props.header}</DialogHeader>}\n                <DialogBody id={descriptionId}>{this.props.body}</DialogBody>\n                <DialogFooter>\n                    <Button onClick={this.close}>{this.props.buttonText}</Button>\n                </DialogFooter>\n            </Dialog>\n        );\n    }\n}\n"],"names":["dialogCounter","AlertDialog","React","Component","render","titleId","descriptionId","_jsxs","Dialog","props","dialogProps","role","aria-labelledby","aria-describedby","ref","dialog","closeOnEsc","closeOnOverlayClick","header","_jsx","DialogHeader","id","DialogBody","body","DialogFooter","Button","onClick","close","buttonText","createRef","show","Promise","resolve","onClose","current","open","defaultProps"],"mappings":";;;;;;AAeA,IAAIA,aAAAA,GAAgB,CAAA;AAEL,MAAMC,WAAAA,SAAoBC,MAAMC,SAAS,CAAA;IAgBpDC,MAAAA,GAAS;AACL,QAAA,MAAMC,UAAU,CAAC,kBAAkB,EAAEL,aAAAA,EAAAA,CAAgB,MAAM,CAAC;AAC5D,QAAA,MAAMM,gBAAgB,CAAC,kBAAkB,EAAEN,aAAAA,EAAAA,CAAgB,YAAY,CAAC;AAExE,QAAA,qBACIO,IAAA,CAACC,MAAAA,EAAAA;AACI,YAAA,GAAG,IAAI,CAACC,KAAK,CAACC,WAAW;YAC1BC,IAAAA,EAAK,aAAA;YACLC,iBAAAA,EAAiBP,OAAAA;YACjBQ,kBAAAA,EAAkBP,aAAAA;YAClBQ,GAAAA,EAAK,IAAI,CAACC,MAAM;YAChBC,UAAAA,EAAY,KAAA;YACZC,mBAAAA,EAAqB,KAAA;;AAEpB,gBAAA,IAAI,CAACR,KAAK,CAACS,MAAM,kBAAIC,GAAA,CAACC,MAAAA,EAAAA;oBAAaC,EAAAA,EAAIhB,OAAAA;8BAAU,IAAI,CAACI,KAAK,CAACS;;8BAC7DC,GAAA,CAACG,IAAAA,EAAAA;oBAAWD,EAAAA,EAAIf,aAAAA;8BAAgB,IAAI,CAACG,KAAK,CAACc;;8BAC3CJ,GAAA,CAACK,MAAAA,EAAAA;AACG,oBAAA,QAAA,gBAAAL,GAAA,CAACM,MAAAA,EAAAA;wBAAOC,OAAAA,EAAS,IAAI,CAACC,KAAK;kCAAG,IAAI,CAAClB,KAAK,CAACmB;;;;;AAIzD,IAAA;;QArCW,KAAA,CAAA,GAAA,IAAA,CAAA,EAAA,IAAA,CACHb,MAAAA,iBAASc,kBAMVC,IAAAA,GAAO,IAAA;YACV,OAAO,IAAIC,QAAQ,CAACC,OAAAA,GAAAA;gBAChB,MAAMC,OAAAA,GAAU,IAAMD,OAAAA,CAAQ,IAAA,CAAA;AAC9B,gBAAA,IAAI,CAACjB,MAAM,CAACmB,OAAO,EAAEC,IAAAA,CAAKF,OAAAA,CAAAA;AAC9B,YAAA,CAAA,CAAA;AACJ,QAAA,CAAA,EAAA,IAAA,CAEQN,QAAQ,IAAM,IAAI,CAACZ,MAAM,CAACmB,OAAO,EAAEP,KAAAA,EAAAA;;AAwB/C;AAtCqB1B,WAAAA,CAGVmC,YAAAA,GAAe;IAClBR,UAAAA,EAAY;AAChB,CAAA;;;;"}

package/lib-esm/components/Dialog/ConfirmDialog.d.ts

@@ -1,20 +1,19 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-type ConfirmOption = PropTypes.InferProps<typeof ConfirmDialog.propTypes>;
+import Dialog from './Dialog';
+type ConfirmOption = {
+    /** Shown as header of the dialog */
+    header: string;
+    /** Rendered as body of the dialog */
+    body: string;
+    /** Accept button text */
+    yesText?: string;
+    /** Reject button text */
+    noText?: string;
+    /** Props for the dialog */
+    dialogProps?: React.ComponentProps<typeof Dialog>;
+};
 export default class ConfirmDialog extends React.Component<ConfirmOption> {
     private dialog;
-    static propTypes: {
-        /** Shown as header of the dialog */
-        header: PropTypes.Requireable<string>;
-        /** Rendered as body of the dialog */
-        body: PropTypes.Validator<string>;
-        /** Accept button text */
-        yesText: PropTypes.Requireable<string>;
-        /** Reject button text */
-        noText: PropTypes.Requireable<string>;
-        /** Props for the dialog */
-        dialogProps: PropTypes.Requireable<object>;
-    };
     static defaultProps: {
         yesText: string;
         noText: string;

package/lib-esm/components/Dialog/ConfirmDialog.js

@@ -1,9 +1,8 @@
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 import React, { createRef } from 'react';
-import PropTypes from 'prop-types';
 import Dialog from './Dialog.js';
 import { Header, Body, Footer } from '../../shared/styles.js';
-import StyledButton from '../Button/Button.js';
+import Button from '../Button/Button.js';
 import ActionButton from '../Button/ActionButton.js';
 
 class ConfirmDialog extends React.Component {
@@ -23,7 +22,7 @@ class ConfirmDialog extends React.Component {
                 }),
                 /*#__PURE__*/ jsxs(Footer, {
                     children: [
-                        /*#__PURE__*/ jsx(StyledButton, {
+                        /*#__PURE__*/ jsx(Button, {
                             onClick: this.cancel,
                             children: noText
                         }),
@@ -46,18 +45,11 @@ class ConfirmDialog extends React.Component {
                         reject();
                     }
                 };
-                this.dialog.current.open(onClose);
+                this.dialog.current?.open(onClose);
             });
-        }, this.cancel = ()=>this.dialog.current.close(false), this.confirm = ()=>this.dialog.current.close(true);
+        }, this.cancel = ()=>this.dialog.current?.close(false), this.confirm = ()=>this.dialog.current?.close(true);
     }
 }
-ConfirmDialog.propTypes = {
-    /** Shown as header of the dialog */ header: PropTypes.string,
-    /** Rendered as body of the dialog */ body: PropTypes.string.isRequired,
-    /** Accept button text */ yesText: PropTypes.string,
-    /** Reject button text */ noText: PropTypes.string,
-    /** Props for the dialog */ dialogProps: PropTypes.object
-};
 ConfirmDialog.defaultProps = {
     yesText: 'Yes',
     noText: 'No'

package/lib-esm/components/Dialog/ConfirmDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialog.js","sources":["../../../src/components/Dialog/ConfirmDialog.tsx"],"sourcesContent":["import React, { createRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { Button, ActionButton } from '../Button';\nimport Dialog, { DialogBody, DialogFooter, DialogHeader } from './Dialog';\n\ntype ConfirmOption = PropTypes.InferProps<typeof ConfirmDialog.propTypes>;\n\nexport default class ConfirmDialog extends React.Component<ConfirmOption> {\n    private dialog = createRef<Dialog>();\n\n    static propTypes = {\n        /** Shown as header of the dialog */\n        header: PropTypes.string,\n        /** Rendered as body of the dialog */\n        body: PropTypes.string.isRequired,\n        /** Accept button text */\n        yesText: PropTypes.string,\n        /** Reject button text */\n        noText: PropTypes.string,\n        /** Props for the dialog */\n        dialogProps: PropTypes.object,\n    };\n\n    static defaultProps = {\n        yesText: 'Yes',\n        noText: 'No',\n    };\n\n    public show = () => {\n        return new Promise((resolve, reject) => {\n            const onClose = (resp: boolean) => {\n                if (resp) {\n                    resolve(null);\n                } else {\n                    reject();\n                }\n            };\n            this.dialog.current.open(onClose);\n        });\n    };\n\n    private cancel = () => this.dialog.current.close(false);\n    private confirm = () => this.dialog.current.close(true);\n\n    render() {\n        const { header, body, yesText, noText, dialogProps } = this.props;\n        return (\n            <Dialog\n                {...dialogProps}\n                ref={this.dialog}\n                closeOnEsc={false}\n                closeOnOverlayClick={false}\n            >\n                {header && <DialogHeader>{header}</DialogHeader>}\n                <DialogBody>{body}</DialogBody>\n                <DialogFooter>\n                    <Button onClick={this.cancel}>{noText}</Button>\n                    <ActionButton onClick={this.confirm}>{yesText}</ActionButton>\n                </DialogFooter>\n            </Dialog>\n        );\n    }\n}\n"],"names":["ConfirmDialog","React","Component","render","header","body","yesText","noText","dialogProps","props","_jsxs","Dialog","ref","dialog","closeOnEsc","closeOnOverlayClick","_jsx","DialogHeader","DialogBody","DialogFooter","Button","onClick","cancel","ActionButton","confirm","createRef","show","Promise","resolve","reject","onClose","resp","current","open","close","propTypes","PropTypes","string","isRequired","object","defaultProps"],"mappings":";;;;;;;;AAOe,MAAMA,aAAAA,SAAsBC,MAAMC,SAAS,CAAA;IAqCtDC,MAAAA,GAAS;AACL,QAAA,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAEC,MAAM,EAAEC,WAAW,EAAE,GAAG,IAAI,CAACC,KAAK;AACjE,QAAA,qBACIC,IAAA,CAACC,MAAAA,EAAAA;AACI,YAAA,GAAGH,WAAW;YACfI,GAAAA,EAAK,IAAI,CAACC,MAAM;YAChBC,UAAAA,EAAY,KAAA;YACZC,mBAAAA,EAAqB,KAAA;;AAEpBX,gBAAAA,MAAAA,kBAAUY,GAAA,CAACC,MAAAA,EAAAA;AAAcb,oBAAAA,QAAAA,EAAAA;;8BAC1BY,GAAA,CAACE,IAAAA,EAAAA;AAAYb,oBAAAA,QAAAA,EAAAA;;8BACbK,IAAA,CAACS,MAAAA,EAAAA;;sCACGH,GAAA,CAACI,YAAAA,EAAAA;4BAAOC,OAAAA,EAAS,IAAI,CAACC,MAAM;AAAGf,4BAAAA,QAAAA,EAAAA;;sCAC/BS,GAAA,CAACO,YAAAA,EAAAA;4BAAaF,OAAAA,EAAS,IAAI,CAACG,OAAO;AAAGlB,4BAAAA,QAAAA,EAAAA;;;;;;AAItD,IAAA;;QAtDW,KAAA,CAAA,GAAA,IAAA,CAAA,EAAA,IAAA,CACHO,MAAAA,iBAASY,kBAoBVC,IAAAA,GAAO,IAAA;YACV,OAAO,IAAIC,OAAAA,CAAQ,CAACC,OAAAA,EAASC,MAAAA,GAAAA;AACzB,gBAAA,MAAMC,UAAU,CAACC,IAAAA,GAAAA;AACb,oBAAA,IAAIA,IAAAA,EAAM;wBACNH,OAAAA,CAAQ,IAAA,CAAA;oBACZ,CAAA,MAAO;AACHC,wBAAAA,MAAAA,EAAAA;AACJ,oBAAA;AACJ,gBAAA,CAAA;AACA,gBAAA,IAAI,CAAChB,MAAM,CAACmB,OAAO,CAACC,IAAI,CAACH,OAAAA,CAAAA;AAC7B,YAAA,CAAA,CAAA;QACJ,CAAA,EAAA,IAAA,CAEQR,MAAAA,GAAS,IAAM,IAAI,CAACT,MAAM,CAACmB,OAAO,CAACE,KAAK,CAAC,aACzCV,OAAAA,GAAU,IAAM,IAAI,CAACX,MAAM,CAACmB,OAAO,CAACE,KAAK,CAAC,IAAA,CAAA;;AAoBtD;AAvDqBlC,aAAAA,CAGVmC,SAAAA,GAAY;yCAEf/B,MAAAA,EAAQgC,SAAAA,CAAUC,MAAM;AACxB,0CACAhC,IAAAA,EAAM+B,SAAAA,CAAUC,MAAM,CAACC,UAAU;8BAEjChC,OAAAA,EAAS8B,SAAAA,CAAUC,MAAM;8BAEzB9B,MAAAA,EAAQ6B,SAAAA,CAAUC,MAAM;gCAExB7B,WAAAA,EAAa4B,SAAAA,CAAUG;AAC3B,CAAA;AAdiBvC,aAAAA,CAgBVwC,YAAAA,GAAe;IAClBlC,OAAAA,EAAS,KAAA;IACTC,MAAAA,EAAQ;AACZ,CAAA;;;;"}
+{"version":3,"file":"ConfirmDialog.js","sources":["../../../src/components/Dialog/ConfirmDialog.tsx"],"sourcesContent":["import React, { createRef } from 'react';\nimport { Button, ActionButton } from '../Button';\nimport Dialog, { DialogBody, DialogFooter, DialogHeader } from './Dialog';\n\ntype ConfirmOption = {\n    /** Shown as header of the dialog */\n    header: string;\n    /** Rendered as body of the dialog */\n    body: string;\n    /** Accept button text */\n    yesText?: string;\n    /** Reject button text */\n    noText?: string;\n    /** Props for the dialog */\n    dialogProps?: React.ComponentProps<typeof Dialog>;\n};\n\nexport default class ConfirmDialog extends React.Component<ConfirmOption> {\n    private dialog = createRef<Dialog>();\n\n    static defaultProps = {\n        yesText: 'Yes',\n        noText: 'No',\n    };\n\n    public show = () => {\n        return new Promise((resolve, reject) => {\n            const onClose = (resp: unknown) => {\n                if (resp) {\n                    resolve(null);\n                } else {\n                    reject();\n                }\n            };\n            this.dialog.current?.open(onClose);\n        });\n    };\n\n    private cancel = () => this.dialog.current?.close(false);\n    private confirm = () => this.dialog.current?.close(true);\n\n    render() {\n        const { header, body, yesText, noText, dialogProps } = this.props;\n        return (\n            <Dialog\n                {...dialogProps}\n                ref={this.dialog}\n                closeOnEsc={false}\n                closeOnOverlayClick={false}\n            >\n                {header && <DialogHeader>{header}</DialogHeader>}\n                <DialogBody>{body}</DialogBody>\n                <DialogFooter>\n                    <Button onClick={this.cancel}>{noText}</Button>\n                    <ActionButton onClick={this.confirm}>{yesText}</ActionButton>\n                </DialogFooter>\n            </Dialog>\n        );\n    }\n}\n"],"names":["ConfirmDialog","React","Component","render","header","body","yesText","noText","dialogProps","props","_jsxs","Dialog","ref","dialog","closeOnEsc","closeOnOverlayClick","_jsx","DialogHeader","DialogBody","DialogFooter","Button","onClick","cancel","ActionButton","confirm","createRef","show","Promise","resolve","reject","onClose","resp","current","open","close","defaultProps"],"mappings":";;;;;;;AAiBe,MAAMA,aAAAA,SAAsBC,MAAMC,SAAS,CAAA;IAwBtDC,MAAAA,GAAS;AACL,QAAA,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAEC,MAAM,EAAEC,WAAW,EAAE,GAAG,IAAI,CAACC,KAAK;AACjE,QAAA,qBACIC,IAAA,CAACC,MAAAA,EAAAA;AACI,YAAA,GAAGH,WAAW;YACfI,GAAAA,EAAK,IAAI,CAACC,MAAM;YAChBC,UAAAA,EAAY,KAAA;YACZC,mBAAAA,EAAqB,KAAA;;AAEpBX,gBAAAA,MAAAA,kBAAUY,GAAA,CAACC,MAAAA,EAAAA;AAAcb,oBAAAA,QAAAA,EAAAA;;8BAC1BY,GAAA,CAACE,IAAAA,EAAAA;AAAYb,oBAAAA,QAAAA,EAAAA;;8BACbK,IAAA,CAACS,MAAAA,EAAAA;;sCACGH,GAAA,CAACI,MAAAA,EAAAA;4BAAOC,OAAAA,EAAS,IAAI,CAACC,MAAM;AAAGf,4BAAAA,QAAAA,EAAAA;;sCAC/BS,GAAA,CAACO,YAAAA,EAAAA;4BAAaF,OAAAA,EAAS,IAAI,CAACG,OAAO;AAAGlB,4BAAAA,QAAAA,EAAAA;;;;;;AAItD,IAAA;;QAzCW,KAAA,CAAA,GAAA,IAAA,CAAA,EAAA,IAAA,CACHO,MAAAA,iBAASY,kBAOVC,IAAAA,GAAO,IAAA;YACV,OAAO,IAAIC,OAAAA,CAAQ,CAACC,OAAAA,EAASC,MAAAA,GAAAA;AACzB,gBAAA,MAAMC,UAAU,CAACC,IAAAA,GAAAA;AACb,oBAAA,IAAIA,IAAAA,EAAM;wBACNH,OAAAA,CAAQ,IAAA,CAAA;oBACZ,CAAA,MAAO;AACHC,wBAAAA,MAAAA,EAAAA;AACJ,oBAAA;AACJ,gBAAA,CAAA;AACA,gBAAA,IAAI,CAAChB,MAAM,CAACmB,OAAO,EAAEC,IAAAA,CAAKH,OAAAA,CAAAA;AAC9B,YAAA,CAAA,CAAA;AACJ,QAAA,CAAA,EAAA,IAAA,CAEQR,SAAS,IAAM,IAAI,CAACT,MAAM,CAACmB,OAAO,EAAEE,KAAAA,CAAM,KAAA,CAAA,EAAA,IAAA,CAC1CV,OAAAA,GAAU,IAAM,IAAI,CAACX,MAAM,CAACmB,OAAO,EAAEE,KAAAA,CAAM,IAAA,CAAA;;AAoBvD;AA1CqBlC,aAAAA,CAGVmC,YAAAA,GAAe;IAClB7B,OAAAA,EAAS,KAAA;IACTC,MAAAA,EAAQ;AACZ,CAAA;;;;"}

package/lib-esm/components/Dialog/Dialog.d.ts

@@ -1,9 +1,7 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 export declare const DialogContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & import("../Card/Card").CardExtraProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    elevated?: boolean;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export { Header as DialogHeader, Body as DialogBody, Footer as DialogFooter, } from '../../shared/styles';
@@ -12,18 +10,14 @@ interface DialogOptions {
     closeOnEsc?: boolean;
     /** Close layer overlay is clicked. Default value is true. */
     closeOnOverlayClick?: boolean;
+    /** Ref forwarded to the underlying HTMLDivElement of the dialog container */
+    forwardRef?: React.Ref<HTMLDivElement>;
 }
 interface DialogState {
     show: boolean;
-    LayerComponent?: () => React.ReactPortal | null;
+    LayerComponent?: React.ComponentType | null;
 }
-declare class Dialog extends React.Component<React.PropsWithChildren<DialogOptions> & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>, DialogState> {
-    static propTypes: {
-        /** Flag to close dialog on `esc` click. Default value is true. */
-        closeOnEsc: PropTypes.Requireable<boolean>;
-        /** Close layer overlay is clicked. Default value is true. */
-        closeOnOverlayClick: PropTypes.Requireable<boolean>;
-    };
+declare class Dialog extends React.Component<React.PropsWithChildren<DialogOptions> & React.HTMLAttributes<HTMLDivElement>, DialogState> {
     static defaultProps: {
         closeOnEsc: boolean;
         closeOnOverlayClick: boolean;
@@ -58,9 +52,9 @@ declare class Dialog extends React.Component<React.PropsWithChildren<DialogOptio
     private setInitialFocus;
     shouldComponentUpdate(nextProps: DialogOptions, nextState: DialogState): boolean;
     componentWillUnmount(): void;
-    open: (closeCallback?: (resp: unknown) => void) => void;
+    open: (closeCallback?: (resp?: unknown) => void) => void;
     close: (resp?: unknown) => void;
     private closeCallback;
-    render(): import("@emotion/react/jsx-runtime").JSX.Element;
+    render(): import("@emotion/react/jsx-runtime").JSX.Element | null;
 }
 export default Dialog;

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

@@ -1,12 +1,11 @@
 import { jsx } from '@emotion/react/jsx-runtime';
 import React from 'react';
-import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import LayerManager, { LAYER_POSITION } from '../../shared/LayerManager.js';
 import Card from '../Card/Card.js';
 
 const DialogContainer = /*#__PURE__*/ styled(Card, {
-    target: "ej4fpry0",
+    target: "e1sxvvof0",
     label: "DialogContainer"
 })("max-width:768px;max-height:80vh;transform:scale(0);opacity:0;transition:all 0.3s ease;.nf-layer-enter &{opacity:1;transform:scale(1);}.nf-layer-exit &{opacity:0;transform:scale(0);}");
 class Dialog extends React.Component {
@@ -31,7 +30,7 @@ class Dialog extends React.Component {
         }
     }
     constructor(...args){
-        super(...args), this.lastFocusedElement = null, this.dialogRef = /*#__PURE__*/ React.createRef(), this.state = {
+        super(...args), this.closeDialog = null, this.onCloseFn = null, this.lastFocusedElement = null, this.dialogRef = /*#__PURE__*/ React.createRef(), this.state = {
             show: false,
             LayerComponent: undefined
         }, /**
@@ -80,6 +79,13 @@ class Dialog extends React.Component {
             if (node) {
                 this.setInitialFocus(node);
             }
+            if (this.props.forwardRef) {
+                if (typeof this.props.forwardRef === 'function') {
+                    this.props.forwardRef(node);
+                } else {
+                    this.props.forwardRef.current = node;
+                }
+            }
         }, /**
      * Sets initial focus within the dialog.
      * Tries to focus the header first, then the first interactive element, or falls back to the container.
@@ -110,9 +116,9 @@ class Dialog extends React.Component {
                 closeOnOverlayClick,
                 position: LAYER_POSITION.DIALOG,
                 component: /*#__PURE__*/ jsx(DialogContainer, {
+                    role: "dialog",
                     ...rest,
                     ref: this.setDialogRef,
-                    role: "dialog",
                     "aria-modal": "true",
                     tabIndex: -1,
                     onKeyDown: this.handleKeyDown,
@@ -126,7 +132,7 @@ class Dialog extends React.Component {
                 show: true,
                 LayerComponent: Component
             });
-            this.onCloseFn = closeCallback;
+            this.onCloseFn = closeCallback ?? null;
         }, this.close = (resp)=>{
             this.closeDialog?.(resp);
         }, this.closeCallback = (resp)=>{
@@ -139,10 +145,6 @@ class Dialog extends React.Component {
         };
     }
 }
-Dialog.propTypes = {
-    /** Flag to close dialog on `esc` click. Default value is true. */ closeOnEsc: PropTypes.bool,
-    /** Close layer overlay is clicked. Default value is true. */ closeOnOverlayClick: PropTypes.bool
-};
 Dialog.defaultProps = {
     closeOnEsc: true,
     closeOnOverlayClick: true

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';\nimport { Card } from '../Card';\n\nexport const DialogContainer = styled(Card)`\n    max-width: 768px;\n    max-height: 80vh;\n    transform: scale(0);\n    opacity: 0;\n    transition: all 0.3s ease;\n\n    .nf-layer-enter & {\n        opacity: 1;\n        transform: scale(1);\n    }\n\n    .nf-layer-exit & {\n        opacity: 0;\n        transform: scale(0);\n    }\n`;\n\nexport {\n    Header as DialogHeader,\n    Body as DialogBody,\n    Footer as DialogFooter,\n} from '../../shared/styles';\n\ninterface DialogOptions {\n    /** Flag to close dialog on `esc` click. Default value is true. */\n    closeOnEsc?: boolean;\n    /** Close layer overlay is clicked. Default value is true. */\n    closeOnOverlayClick?: boolean;\n}\n\ninterface DialogState {\n    show: boolean;\n    LayerComponent?: () => React.ReactPortal | null;\n}\n\nclass Dialog extends React.Component<\n    React.PropsWithChildren<DialogOptions> & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,\n    DialogState\n> {\n    static propTypes = {\n        /** Flag to close dialog on `esc` click. Default value is true. */\n        closeOnEsc: PropTypes.bool,\n        /** Close layer overlay is clicked. Default value is true. */\n        closeOnOverlayClick: PropTypes.bool,\n    };\n\n    static defaultProps = {\n        closeOnEsc: true,\n        closeOnOverlayClick: true,\n    };\n\n    private closeDialog: (resp?: unknown) => void;\n    private onCloseFn: (resp?: unknown) => void;\n    private lastFocusedElement: HTMLElement | null = null;\n    private dialogRef = React.createRef<HTMLDivElement>();\n\n    state: DialogState = {\n        show: false,\n        LayerComponent: undefined,\n    };\n\n    /**\n     * Retrieves all focusable elements within the dialog.\n     */\n    private getFocusableElements = (): HTMLElement[] => {\n        if (!this.dialogRef.current) return [];\n        return Array.from(\n            this.dialogRef.current.querySelectorAll(\n                'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n            ),\n        ) as HTMLElement[];\n    };\n\n    /**\n     * Handles keydown events to implement the focus trap.\n     * Traps Tab and Shift+Tab within the dialog.\n     */\n    private handleKeyDown = (e: React.KeyboardEvent) => {\n        if (e.key === 'Tab') {\n            const focusableElements = this.getFocusableElements();\n            if (focusableElements.length === 0) return;\n\n            const firstElement = focusableElements[0];\n            const lastElement = focusableElements[focusableElements.length - 1];\n\n            if (e.shiftKey) {\n                if (document.activeElement === firstElement) {\n                    lastElement.focus();\n                    e.preventDefault();\n                }\n            } else {\n                if (document.activeElement === lastElement) {\n                    firstElement.focus();\n                    e.preventDefault();\n                }\n            }\n        }\n    };\n\n    /**\n     * Restores focus to the element that was focused before the dialog opened.\n     */\n    private restoreFocus = () => {\n        if (this.lastFocusedElement) {\n            const elementToBeFocused = this.lastFocusedElement;\n            this.lastFocusedElement = null;\n            setTimeout(() => {\n                if (document.body.contains(elementToBeFocused)) {\n                    elementToBeFocused.focus();\n                }\n            }, 100);\n        }\n    };\n\n    /**\n     * Callback ref to capture the Dialog DOM element.\n     * Triggers initial focus setting when the element mounts.\n     */\n    private setDialogRef = (node: HTMLDivElement | null) => {\n        (this.dialogRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n\n        if (node) {\n            this.setInitialFocus(node);\n        }\n    };\n\n    /**\n     * Sets initial focus within the dialog.\n     * Tries to focus the header first, then the first interactive element, or falls back to the container.\n     */\n    private setInitialFocus = (root: HTMLElement) => {\n        const firstChild = root.firstElementChild as HTMLElement;\n        if (firstChild) {\n            if (firstChild.getAttribute('tabindex') === null) {\n                firstChild.setAttribute('tabindex', '-1');\n            }\n            firstChild.focus();\n            return;\n        }\n\n        const focusableElements = this.getFocusableElements();\n        if (focusableElements.length > 0) {\n            focusableElements[0].focus();\n        } else {\n            root.focus();\n        }\n    };\n\n    shouldComponentUpdate(nextProps: DialogOptions, nextState: DialogState) {\n        return this.state.show !== nextState.show;\n    }\n\n    componentWillUnmount() {\n        // Clean up if component unmounts while dialog is open\n        if (this.state.show && this.closeDialog) {\n            this.closeDialog();\n        }\n        this.restoreFocus();\n        this.closeDialog = null;\n        this.onCloseFn = null;\n    }\n\n    public open = (closeCallback?: (resp: unknown) => void) => {\n        const { closeOnEsc, closeOnOverlayClick, children, ...rest } = this.props;\n\n        // Save current focus\n        this.lastFocusedElement = document.activeElement as HTMLElement;\n\n        const [Component, closeFn] = LayerManager.renderLayer({\n            exitDelay: 300,\n            overlay: true,\n            closeOnEsc,\n            closeCallback: this.closeCallback,\n            closeOnOverlayClick,\n            position: LAYER_POSITION.DIALOG,\n            component: (\n                <DialogContainer\n                    {...rest}\n                    ref={this.setDialogRef}\n                    role=\"dialog\"\n                    aria-modal=\"true\"\n                    tabIndex={-1}\n                    onKeyDown={this.handleKeyDown}\n                    onClick={(e) => e.stopPropagation()}\n                    elevated\n                >\n                    {children}\n                </DialogContainer>\n            ),\n        });\n\n        this.closeDialog = closeFn;\n\n        this.setState({\n            show: true,\n            LayerComponent: Component,\n        });\n        this.onCloseFn = closeCallback;\n    };\n\n    public close = (resp?: unknown) => {\n        this.closeDialog?.(resp);\n    };\n\n    private closeCallback = (resp?: unknown) => {\n        this.restoreFocus();\n        this.setState({\n            show: false,\n            LayerComponent: undefined,\n        });\n        this.onCloseFn?.(resp);\n    };\n\n    render() {\n        const { LayerComponent } = this.state;\n\n        if (this.state.show && LayerComponent) {\n            return <LayerComponent />;\n        } else {\n            return null;\n        }\n    }\n}\n\nexport default Dialog;\n"],"names":["DialogContainer","styled","Card","Dialog","React","Component","shouldComponentUpdate","nextProps","nextState","state","show","componentWillUnmount","closeDialog","restoreFocus","onCloseFn","render","LayerComponent","_jsx","lastFocusedElement","dialogRef","createRef","undefined","getFocusableElements","current","Array","from","querySelectorAll","handleKeyDown","e","key","focusableElements","length","firstElement","lastElement","shiftKey","document","activeElement","focus","preventDefault","elementToBeFocused","setTimeout","body","contains","setDialogRef","node","setInitialFocus","root","firstChild","firstElementChild","getAttribute","setAttribute","open","closeCallback","closeOnEsc","closeOnOverlayClick","children","rest","props","closeFn","LayerManager","renderLayer","exitDelay","overlay","position","LAYER_POSITION","DIALOG","component","ref","role","aria-modal","tabIndex","onKeyDown","onClick","stopPropagation","elevated","setState","close","resp","propTypes","PropTypes","bool","defaultProps"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';\nimport { Card } from '../Card';\n\nexport const DialogContainer = styled(Card)`\n    max-width: 768px;\n    max-height: 80vh;\n    transform: scale(0);\n    opacity: 0;\n    transition: all 0.3s ease;\n\n    .nf-layer-enter & {\n        opacity: 1;\n        transform: scale(1);\n    }\n\n    .nf-layer-exit & {\n        opacity: 0;\n        transform: scale(0);\n    }\n`;\n\nexport {\n    Header as DialogHeader,\n    Body as DialogBody,\n    Footer as DialogFooter,\n} from '../../shared/styles';\n\ninterface DialogOptions {\n    /** Flag to close dialog on `esc` click. Default value is true. */\n    closeOnEsc?: boolean;\n    /** Close layer overlay is clicked. Default value is true. */\n    closeOnOverlayClick?: boolean;\n    /** Ref forwarded to the underlying HTMLDivElement of the dialog container */\n    forwardRef?: React.Ref<HTMLDivElement>;\n}\n\ninterface DialogState {\n    show: boolean;\n    LayerComponent?: React.ComponentType | null;\n}\n\nclass Dialog extends React.Component<\n    React.PropsWithChildren<DialogOptions> & React.HTMLAttributes<HTMLDivElement>,\n    DialogState\n> {\n    static defaultProps = {\n        closeOnEsc: true,\n        closeOnOverlayClick: true,\n    };\n\n    private closeDialog: ((resp?: unknown) => void) | null = null;\n    private onCloseFn: ((resp?: unknown) => void) | null = null;\n    private lastFocusedElement: HTMLElement | null = null;\n    private dialogRef = React.createRef<HTMLDivElement>();\n\n    state: DialogState = {\n        show: false,\n        LayerComponent: undefined,\n    };\n\n    /**\n     * Retrieves all focusable elements within the dialog.\n     */\n    private getFocusableElements = (): HTMLElement[] => {\n        if (!this.dialogRef.current) return [];\n        return Array.from(\n            this.dialogRef.current.querySelectorAll(\n                'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n            ),\n        ) as HTMLElement[];\n    };\n\n    /**\n     * Handles keydown events to implement the focus trap.\n     * Traps Tab and Shift+Tab within the dialog.\n     */\n    private handleKeyDown = (e: React.KeyboardEvent) => {\n        if (e.key === 'Tab') {\n            const focusableElements = this.getFocusableElements();\n            if (focusableElements.length === 0) return;\n\n            const firstElement = focusableElements[0];\n            const lastElement = focusableElements[focusableElements.length - 1];\n\n            if (e.shiftKey) {\n                if (document.activeElement === firstElement) {\n                    lastElement.focus();\n                    e.preventDefault();\n                }\n            } else {\n                if (document.activeElement === lastElement) {\n                    firstElement.focus();\n                    e.preventDefault();\n                }\n            }\n        }\n    };\n\n    /**\n     * Restores focus to the element that was focused before the dialog opened.\n     */\n    private restoreFocus = () => {\n        if (this.lastFocusedElement) {\n            const elementToBeFocused = this.lastFocusedElement;\n            this.lastFocusedElement = null;\n            setTimeout(() => {\n                if (document.body.contains(elementToBeFocused)) {\n                    elementToBeFocused.focus();\n                }\n            }, 100);\n        }\n    };\n\n    /**\n     * Callback ref to capture the Dialog DOM element.\n     * Triggers initial focus setting when the element mounts.\n     */\n    private setDialogRef = (node: HTMLDivElement | null) => {\n        (this.dialogRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n\n        if (node) {\n            this.setInitialFocus(node);\n        }\n\n        if (this.props.forwardRef) {\n            if (typeof this.props.forwardRef === 'function') {\n                this.props.forwardRef(node);\n            } else {\n                (this.props.forwardRef as React.MutableRefObject<HTMLDivElement | null>).current =\n                    node;\n            }\n        }\n    };\n\n    /**\n     * Sets initial focus within the dialog.\n     * Tries to focus the header first, then the first interactive element, or falls back to the container.\n     */\n    private setInitialFocus = (root: HTMLElement) => {\n        const firstChild = root.firstElementChild as HTMLElement;\n        if (firstChild) {\n            if (firstChild.getAttribute('tabindex') === null) {\n                firstChild.setAttribute('tabindex', '-1');\n            }\n            firstChild.focus();\n            return;\n        }\n\n        const focusableElements = this.getFocusableElements();\n        if (focusableElements.length > 0) {\n            focusableElements[0].focus();\n        } else {\n            root.focus();\n        }\n    };\n\n    shouldComponentUpdate(nextProps: DialogOptions, nextState: DialogState) {\n        return this.state.show !== nextState.show;\n    }\n\n    componentWillUnmount() {\n        // Clean up if component unmounts while dialog is open\n        if (this.state.show && this.closeDialog) {\n            this.closeDialog();\n        }\n        this.restoreFocus();\n        this.closeDialog = null;\n        this.onCloseFn = null;\n    }\n\n    public open = (closeCallback?: (resp?: unknown) => void) => {\n        const { closeOnEsc, closeOnOverlayClick, children, ...rest } = this.props;\n\n        // Save current focus\n        this.lastFocusedElement = document.activeElement as HTMLElement;\n\n        const [Component, closeFn] = LayerManager.renderLayer({\n            exitDelay: 300,\n            overlay: true,\n            closeOnEsc,\n            closeCallback: this.closeCallback,\n            closeOnOverlayClick,\n            position: LAYER_POSITION.DIALOG,\n            component: (\n                <DialogContainer\n                    role=\"dialog\"\n                    {...rest}\n                    ref={this.setDialogRef}\n                    aria-modal=\"true\"\n                    tabIndex={-1}\n                    onKeyDown={this.handleKeyDown}\n                    onClick={(e) => e.stopPropagation()}\n                    elevated\n                >\n                    {children}\n                </DialogContainer>\n            ),\n        });\n\n        this.closeDialog = closeFn;\n\n        this.setState({\n            show: true,\n            LayerComponent: Component,\n        });\n        this.onCloseFn = closeCallback ?? null;\n    };\n\n    public close = (resp?: unknown) => {\n        this.closeDialog?.(resp);\n    };\n\n    private closeCallback = (resp?: unknown) => {\n        this.restoreFocus();\n        this.setState({\n            show: false,\n            LayerComponent: undefined,\n        });\n        this.onCloseFn?.(resp);\n    };\n\n    render() {\n        const { LayerComponent } = this.state;\n\n        if (this.state.show && LayerComponent) {\n            return <LayerComponent />;\n        } else {\n            return null;\n        }\n    }\n}\n\nexport default Dialog;\n"],"names":["DialogContainer","styled","Card","Dialog","React","Component","shouldComponentUpdate","nextProps","nextState","state","show","componentWillUnmount","closeDialog","restoreFocus","onCloseFn","render","LayerComponent","_jsx","lastFocusedElement","dialogRef","createRef","undefined","getFocusableElements","current","Array","from","querySelectorAll","handleKeyDown","e","key","focusableElements","length","firstElement","lastElement","shiftKey","document","activeElement","focus","preventDefault","elementToBeFocused","setTimeout","body","contains","setDialogRef","node","setInitialFocus","props","forwardRef","root","firstChild","firstElementChild","getAttribute","setAttribute","open","closeCallback","closeOnEsc","closeOnOverlayClick","children","rest","closeFn","LayerManager","renderLayer","exitDelay","overlay","position","LAYER_POSITION","DIALOG","component","role","ref","aria-modal","tabIndex","onKeyDown","onClick","stopPropagation","elevated","setState","close","resp","defaultProps"],"mappings":"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"}

package/lib-esm/components/Dialog/PromptDialog.d.ts

@@ -1,25 +1,24 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-type PromptOption = PropTypes.InferProps<typeof PromptDialog.propTypes>;
+import Dialog from './Dialog';
+type PromptOption = {
+    /** Shown as header of the dialog */
+    header: string;
+    /** Rendered as the body of the dialog */
+    body: string;
+    /** Default value for the input. */
+    defaultValue?: string;
+    /** Submit button text. Default value is 'Submit' */
+    submitText?: string;
+    /** Cancel button text. Default value is 'Cancel' */
+    cancelText?: string;
+    /** Props for the input. */
+    inputProps?: React.HTMLProps<HTMLInputElement>;
+    /** Additional props for the dialog. */
+    dialogProps?: React.ComponentProps<typeof Dialog>;
+};
 export default class PromptDialog extends React.Component<PromptOption, {
-    value: string;
+    value?: string;
 }> {
-    static propTypes: {
-        /** Shown as header of the dialog */
-        header: PropTypes.Requireable<string>;
-        /** Rendered as the body of the dialog */
-        body: PropTypes.Requireable<string>;
-        /** Default value for the input. */
-        defaultValue: PropTypes.Requireable<string>;
-        /** Submit button text. Default value is 'Submit' */
-        submitText: PropTypes.Requireable<string>;
-        /** Cancel button text. Default value is 'Cancel' */
-        cancelText: PropTypes.Requireable<string>;
-        /** Props for the input. */
-        inputProps: PropTypes.Requireable<object>;
-        /** Additional props for the dialog. */
-        dialogProps: PropTypes.Requireable<object>;
-    };
     static defaultProps: {
         cancelText: string;
         submitText: string;

package/lib-esm/components/Dialog/PromptDialog.js

@@ -1,23 +1,22 @@
 import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 import React, { createRef } from 'react';
-import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import Dialog from './Dialog.js';
 import { Header, Body, Footer } from '../../shared/styles.js';
-import StyledButton from '../Button/Button.js';
+import Button from '../Button/Button.js';
 import ActionButton from '../Button/ActionButton.js';
 import Input from '../Input/Input.js';
 
 const BodyText = /*#__PURE__*/ styled("p", {
-    target: "ecd5j070",
+    target: "e18k0mlw0",
     label: "BodyText"
 })("margin-top:0;");
 const InputContainer = /*#__PURE__*/ styled("div", {
-    target: "ecd5j071",
+    target: "e18k0mlw1",
     label: "InputContainer"
 })("display:flex;flex:1;margin-top:10px;& > label{flex:1;width:100%;padding:0;& > input{width:100%;padding:0 8px;box-sizing:border-box;}}");
 const StyledInput = /*#__PURE__*/ styled(Input, {
-    target: "ecd5j072",
+    target: "e18k0mlw2",
     label: "StyledInput"
 })("flex:1;padding:0;");
 class PromptDialog extends React.Component {
@@ -50,12 +49,13 @@ class PromptDialog extends React.Component {
                     }),
                     /*#__PURE__*/ jsxs(Footer, {
                         children: [
-                            /*#__PURE__*/ jsx(StyledButton, {
+                            /*#__PURE__*/ jsx(Button, {
                                 type: "button",
                                 onClick: this.cancel,
                                 children: cancelText
                             }),
                             /*#__PURE__*/ jsx(ActionButton, {
+                                onClick: this.submit,
                                 children: submitText
                             })
                         ]
@@ -69,9 +69,10 @@ class PromptDialog extends React.Component {
             this.setState({
                 value: e.target.value
             });
-        }, this.cancel = ()=>this.dialog.current.close(), this.submit = (e)=>{
+        }, this.cancel = ()=>this.dialog.current?.close(), this.submit = (e)=>{
             e.preventDefault();
-            this.dialog.current.close(this.state.value);
+            if (!this.state.value) return;
+            this.dialog.current?.close(this.state.value);
         }, this.show = ()=>{
             return new Promise((resolve, reject)=>{
                 const onClose = (value)=>{
@@ -84,7 +85,7 @@ class PromptDialog extends React.Component {
                         value: this.props.defaultValue
                     });
                 };
-                this.dialog.current.open(onClose);
+                this.dialog.current?.open(onClose);
             });
         };
         this.state = {
@@ -92,15 +93,6 @@ class PromptDialog extends React.Component {
         };
     }
 }
-PromptDialog.propTypes = {
-    /** Shown as header of the dialog */ header: PropTypes.string,
-    /** Rendered as the body of the dialog */ body: PropTypes.string,
-    /** Default value for the input. */ defaultValue: PropTypes.string,
-    /** Submit button text. Default value is 'Submit' */ submitText: PropTypes.string,
-    /** Cancel button text. Default value is 'Cancel' */ cancelText: PropTypes.string,
-    /** Props for the input. */ inputProps: PropTypes.object,
-    /** Additional props for the dialog. */ dialogProps: PropTypes.object
-};
 PromptDialog.defaultProps = {
     cancelText: 'Cancel',
     submitText: 'Submit',