no-frills-ui 0.0.14-alpha.1 → 0.0.14-alpha.10

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AASpC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;kDAIsB,SAAS,CAAC,kBAAkB;;;;;;;kDAO5B,SAAS,CAAC,aAAa;;CAExE,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;;+CAEmB,SAAS,CAAC,eAAe;;;;;;CAMvE,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAgB;IACzC,MAAM,EAAE,KAAK,EAAE,YAAY,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAxC,yBAAgC,CAAQ,CAAC;IAE/C,MAAM,YAAY,GAA8C,CAAC,CAAC,EAAE,EAAE;QAClE,IAAI,CAAC,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,EAAE,EAAE,CAAC;YACtC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,EAAI,CAAC;QACrB,CAAC;IACL,CAAC,CAAA;IAED,OAAO,CACH,MAAC,SAAS,oBAAK,IAAI,IAAE,OAAO,EAAE,YAAY,aACrC,KAAK,EACN,KAAC,MAAM,IAAC,OAAO,EAAE,YAAY,gBAAc,UAAU,KAAK,EAAE,YACxD,KAAC,KAAK,IAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,GAAI,GAC3B,KACD,CACf,CAAC;AACN,CAAC"}
+{"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\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,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;;;;"}

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

@@ -1,33 +1,31 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-type ChipInputProps = PropTypes.InferProps<typeof ChipInput.propTypes>;
-/**
- * A chip input component that allows users to add and remove chips (tags) by typing and pressing Enter.
- * @component
- * @example
- * ```tsx
- * <ChipInput
- *   value={['tag1', 'tag2']}
- *   onChange={(newTags) => console.log(newTags)}
- *   label="Add tags"
- *   errorText="At least one tag is required"
- * />
- * ```
- */
-declare function ChipInput(props: ChipInputProps & React.AllHTMLAttributes<HTMLInputElement>): import("@emotion/react/jsx-runtime").JSX.Element;
-declare namespace ChipInput {
-    var propTypes: {
-        /** Label for the field */
-        label: PropTypes.Validator<string>;
-        /** Error message for the field */
-        errorText: PropTypes.Requireable<string>;
-        /** Values to display as chips */
-        value: PropTypes.Requireable<string[]>;
-        /** Callback when chips change */
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    var defaultProps: {
-        value: any[];
-    };
+interface ChipInputProps {
+    /** Label for the field */
+    label: string;
+    /** Error message for the field */
+    errorText?: string;
+    /**
+     * Values to display as chips
+     * @default []
+     */
+    value?: string[];
+    /** Callback when chips change */
+    onChange?: (newValue: string[]) => void;
+    /**
+     * Aria label for the close button on chip. Defaults to "Remove {label}"
+     * @default "Remove {:label}"
+     */
+    closeButtonAriaLabel?: string;
+    /**
+     * Announcement text when a chip is added. Defaults to "{label} was added"
+     * @default "{:label} was added"
+     */
+    addedAnnouncementTemplate?: string;
+    /**
+     * Announcement text when a chip is removed. Defaults to "{label} was removed"
+     * @default "{:label} was removed"
+     */
+    removedAnnouncementTemplate?: string;
 }
+declare const ChipInput: React.ForwardRefExoticComponent<ChipInputProps & React.AllHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
 export default ChipInput;

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

@@ -1,119 +1,51 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import React, { useState, useId, useImperativeHandle, useEffect } from 'react';
 import styled from '@emotion/styled';
-import constants from '../../shared/constants';
-import Chip from '../Chip/Chip';
-import { DragAndDrop, ORIENTATION } from '../DragAndDrop';
-// Label component for the ChipInput
-const Label = styled.label `
-    display: inline-flex;
-    flex-direction: column;
-    flex: 1;
-    position: relative;
-    margin: 10px 5px;
-    color: inherit;
-    padding: 0 8px;
-    width: 250px;
-    border-radius: 3px;
-    border: 1px solid var(--border-color, ${constants.BORDER_COLOR});
-    background-color: var(--background, ${constants.BACKGROUND});
-
-    /** Focused */
-    &:has(:focus), &:has(:active) {
-        border-color: var(--primary, ${constants.PRIMARY});
-        box-shadow: 0 0 0 4px var(--primary-light, ${constants.PRIMARY_LIGHT});
-    }
-
-    &:has(:focus) > span, &:has(:active) > span {
-        color: var(--primary, ${constants.PRIMARY});
-    }
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
+import Chip from '../Chip/Chip.js';
+import DragAndDrop from '../DragAndDrop/DragAndDrop.js';
+import { ORIENTATION } from '../DragAndDrop/types.js';
 
-    /** Disabled */
-    &:has(:disabled) {
-        border-color: var(--disabled-border, ${constants.DISABLED_BORDER});
-        background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
-    }
-    
-    &:has(:disabled) > span {
-        color: #777;
-    }
-
-    /** Invalid */
-    &:has(:focus:invalid) {
-        border-color: var(--error, ${constants.ERROR});
-        box-shadow: 0 0 0 4px var(--error-light, ${constants.ERROR_LIGHT});
-    }
-
-    ${props => props.touched ? `
+// Label component for the ChipInput
+const Label$6 = /*#__PURE__*/ styled("label", {
+    target: "e1fb0gvp0",
+    label: "Label"
+})("display:inline-flex;flex-direction:column;flex:1;position:relative;margin:10px 5px;color:inherit;padding:0 8px;width:250px;border-radius:3px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";&: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: var(--error, ${constants.ERROR});
+            border-color: ${getThemeValue(THEME_NAME.ERROR)};
         }
     
         &:has(:invalid) > span {
-            color: var(--error, ${constants.ERROR});
+            color: ${getThemeValue(THEME_NAME.ERROR)};
         }
-        ` : ''}
-    
-    /** Error */
-    ${props => props.errorText ? `
-        border-color: var(--error, ${constants.ERROR});
+        ` : '', "    \n    ", (props)=>props.errorText ? `
+        border-color: ${getThemeValue(THEME_NAME.ERROR)};
 
         & > span {
-            color: var(--error, ${constants.ERROR});
+            color: ${getThemeValue(THEME_NAME.ERROR)};
         }
-        ` : ''}
-
-    /** Required */
-    &:has(:required) > span:after {
-        content: '*';
-        margin-left: 2px;
-        color: var(--error, ${constants.ERROR});
-    }
-
-    & > input {
-        border: none;
-        outline: none;
-        width: 100%;
-        line-height: 30px;
-        min-height: 30px;
-    }
-
-    /** Label Animation */
+        ` : '', "    \n    ", (props)=>props.required ? `& > span:after {
+                content: '*';
+                margin-left: 2px;
+                color: ${getThemeValue(THEME_NAME.ERROR)};
+            }` : '', "    \n\n    & > input{border:none;outline:none;line-height:30px;min-height:30px;max-width:95%;}& > span{position:absolute;padding:0 5px;top:0px;left:4px;font-size:14px;line-height:32px;transition:all 300ms ease;}&:has(:focus) > span,&:has(:placeholder-shown) > span{top:-8px;background:", getThemeValue(THEME_NAME.BACKGROUND), ";font-size:12px;line-height:14px;}", (props)=>props.text !== '' ? `
     & > span {
-        position: absolute;
-        padding: 0 5px;
-        top: 0px;
-        left: 4px;
-        font-size: 14px;
-        line-height: 32px;
-        transition: all 300ms ease;
-    }
-
-    &:has(:focus) > span, &:has(:placeholder-shown) > span {
         top: -8px;
-        background: var(--background, ${constants.BACKGROUND});
+        background: ${getThemeValue(THEME_NAME.BACKGROUND)};
         font-size: 12px;
         line-height: 14px;
     }
-
-    ${props => props.text !== '' ? `
-    & > span {
-        top: -8px;
-        background: var(--background, ${constants.BACKGROUND});
-        font-size: 12px;
-        line-height: 14px;
-    }
-    ` : ''}
-`;
+    ` : '');
 // Error message container
-const ErrorContainer = styled.div `
-    color: var(--error, ${constants.ERROR});
-    padding-top: 3px;
-    font-size: 12px;
-    line-height: 14px;
-    margin-left: 3px;
-`;
+const ErrorContainer$4 = /*#__PURE__*/ styled("div", {
+    target: "e1fb0gvp1",
+    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: "e1fb0gvp2",
+    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;}");
 /**
  * A chip input component that allows users to add and remove chips (tags) by typing and pressing Enter.
  * @component
@@ -126,31 +58,42 @@ const ErrorContainer = styled.div `
  *   errorText="At least one tag is required"
  * />
  * ```
- */
-export default function ChipInput(props) {
+ */ function ChipInputComponent(props, ref) {
+    const { value: propValue = [], closeButtonAriaLabel = `Remove {:label}`, addedAnnouncementTemplate = '{:label} was added', removedAnnouncementTemplate = '{:label} was removed' } = props;
     const [text, setText] = useState('');
     const [touched, setTouched] = useState(false);
-    const [value, setValue] = useState(props.value);
+    const [value, setValue] = useState(propValue || []);
     const InputRef = React.useRef(null);
+    const [announcement, setAnnouncement] = useState('');
+    const errorId = useId();
+    // Forward the underlying input element.
+    useImperativeHandle(ref, ()=>InputRef.current);
+    /**
+     * Replace {:label} placeholder in template string
+     */ const replacePlaceholder = (template, label)=>{
+        if (!template) return undefined;
+        return template.replace(/\{:label\}/g, label);
+    };
     // Sync internal value with props.value
-    useEffect(() => {
-        setValue(props.value);
-    }, [props.value]);
+    useEffect(()=>{
+        if (Array.isArray(propValue)) {
+            setValue(propValue);
+        }
+    }, [
+        propValue
+    ]);
     /**
      * Update the chip values and notify changes.
      * @param newValue The new array of chip values
-     */
-    const updateValue = (newValue) => {
-        var _a;
+     */ const updateValue = (newValue)=>{
         const deduped = Array.from(new Set(newValue));
         setValue(deduped);
-        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, deduped);
+        props.onChange?.(deduped);
     };
     /**
      * Marks the input as touched on focus.
      * @param e React focus event
-     */
-    const handleFocus = (e) => {
+     */ const handleFocus = (e)=>{
         setTouched(true);
         if (props.onFocus) {
             props.onFocus(e);
@@ -159,37 +102,40 @@ export default function ChipInput(props) {
     /**
      * Change handler for the input field.
      * @param e React change event
-     */
-    const handleChange = (e) => {
+     */ const handleChange = (e)=>{
         setText(e.target.value);
     };
     /**
      * Adds a new chip on Enter key press.
      * @param e React keyboard event
-     */
-    const handleKeyUp = (e) => {
-        if (e.key === 'Enter' && text.trim() !== '') {
-            const newValue = [...value, text.trim()];
+     */ 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()));
         }
     };
     /**
      * Removes a chip from the list.
      * @param chipToRemove The chip value to remove
-     */
-    const removeChip = (chipToRemove) => {
-        const newValue = value.filter(chip => chip !== chipToRemove);
+     */ const removeChip = (chipToRemove)=>{
+        const newValue = value.filter((chip)=>chip !== chipToRemove);
         updateValue(newValue);
+        setAnnouncement(replacePlaceholder(removedAnnouncementTemplate, chipToRemove));
     };
     /**
      * Moves a chip from one position to another.
      * @param start The starting index of the item to move
      * @param end The ending index where the item should be placed
-     */
-    const onDrop = (start, end) => {
+     */ const onDrop = (start, end)=>{
         // Clone existing elements
-        const newItems = [...value];
+        const newItems = [
+            ...value
+        ];
         // Remove the element to be moved
         const item = newItems.splice(start, 1);
         // Add it back at the required position
@@ -198,19 +144,55 @@ export default function ChipInput(props) {
         updateValue(newItems);
     };
     // Render the component
-    return (_jsxs(Label, { text: text, touched: touched, errorText: props.errorText, children: [_jsx("input", Object.assign({}, props, { ref: InputRef, type: "text", value: text, onChange: handleChange, onFocus: handleFocus, onKeyUp: handleKeyUp, required: props.required && value.length === 0 })), _jsx("div", { children: (value === null || value === void 0 ? void 0 : value.length) > 0 && (_jsx(DragAndDrop, { orientation: ORIENTATION.HORIZONTAL, onDrop: onDrop, children: value.map((chip) => (_jsx(Chip, { label: chip, onCloseClick: () => removeChip(chip) }, chip))) })) }), _jsx("span", { children: props.label }), props.errorText && _jsx(ErrorContainer, { children: props.errorText })] }));
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(Label$6, {
+                text: text,
+                touched: touched,
+                errorText: props.errorText,
+                required: props.required,
+                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
+                    }),
+                    props.errorText && /*#__PURE__*/ jsx(ErrorContainer$4, {
+                        id: errorId,
+                        children: props.errorText
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(VisuallyHidden$1, {
+                "aria-live": "polite",
+                "aria-atomic": "true",
+                children: announcement
+            })
+        ]
+    });
 }
-ChipInput.propTypes = {
-    /** Label for the field */
-    label: PropTypes.string.isRequired,
-    /** Error message for the field */
-    errorText: PropTypes.string,
-    /** Values to display as chips */
-    value: PropTypes.arrayOf(PropTypes.string),
-    /** Callback when chips change */
-    onChange: PropTypes.func,
-};
-ChipInput.defaultProps = {
-    value: [],
-};
-//# sourceMappingURL=ChipInput.js.map
+const ChipInput = /*#__PURE__*/ React.forwardRef(ChipInputComponent);
+
+export { ChipInput as default };
+//# sourceMappingURL=ChipInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChipInput.js","sourceRoot":"","sources":["../../../src/components/ChipInput/ChipInput.tsx"],"names":[],"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}>`\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    ${(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 & React.AllHTMLAttributes<HTMLInputElement>,\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);\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(propValue)) {\n            setValue(propValue);\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            >\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 & React.AllHTMLAttributes<HTMLInputElement>\n>(ChipInputComponent);\n\nexport default ChipInput;\n"],"names":["Label","styled","getThemeValue","THEME_NAME","BORDER_COLOR","BACKGROUND","PRIMARY","PRIMARY_LIGHT","DISABLED_BORDER","DISABLED_BACKGROUND","DISABLED","ERROR","ERROR_LIGHT","props","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","useEffect","Array","isArray","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","length","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/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,36 +1,52 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 import React, { createRef } from 'react';
-import PropTypes from 'prop-types';
-import Dialog, { DialogBody, DialogFooter, DialogHeader } from './Dialog';
-import { Button } from '../Button';
+import Dialog from './Dialog.js';
+import { Header, Body, Footer } from '../../shared/styles.js';
+import Button from '../Button/Button.js';
+
+let dialogCounter = 0;
 class AlertDialog extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.dialog = createRef();
-        this.show = () => {
-            return new Promise(resolve => {
-                const onClose = () => resolve(null);
-                this.dialog.current.open(onClose);
-            });
-        };
-        this.close = () => this.dialog.current.close();
-    }
     render() {
-        return (_jsxs(Dialog, Object.assign({}, this.props.dialogProps, { ref: this.dialog, closeOnEsc: false, closeOnOverlayClick: false, children: [this.props.header && _jsx(DialogHeader, { children: this.props.header }), _jsx(DialogBody, { children: this.props.body }), _jsx(DialogFooter, { children: _jsx(Button, { onClick: this.close, children: this.props.buttonText }) })] })));
+        const titleId = `nfui-alert-dialog-${dialogCounter++}-title`;
+        const descriptionId = `nfui-alert-dialog-${dialogCounter++}-description`;
+        return /*#__PURE__*/ jsxs(Dialog, {
+            ...this.props.dialogProps,
+            role: "alertdialog",
+            "aria-labelledby": titleId,
+            "aria-describedby": descriptionId,
+            ref: this.dialog,
+            closeOnEsc: false,
+            closeOnOverlayClick: false,
+            children: [
+                this.props.header && /*#__PURE__*/ jsx(Header, {
+                    id: titleId,
+                    children: this.props.header
+                }),
+                /*#__PURE__*/ jsx(Body, {
+                    id: descriptionId,
+                    children: this.props.body
+                }),
+                /*#__PURE__*/ jsx(Footer, {
+                    children: /*#__PURE__*/ jsx(Button, {
+                        onClick: this.close,
+                        children: this.props.buttonText
+                    })
+                })
+            ]
+        });
+    }
+    constructor(...args){
+        super(...args), this.dialog = /*#__PURE__*/ createRef(), this.show = ()=>{
+            return new Promise((resolve)=>{
+                const onClose = ()=>resolve(null);
+                this.dialog.current?.open(onClose);
+            });
+        }, 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'
 };
-export default AlertDialog;
-//# sourceMappingURL=AlertDialog.js.map
+
+export { AlertDialog as default };
+//# sourceMappingURL=AlertDialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/AlertDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAInC,MAAqB,WAAY,SAAQ,KAAK,CAAC,SAAsB;IAArE;;QACY,WAAM,GAAG,SAAS,EAAU,CAAC;QAiB9B,SAAI,GAAG,GAAG,EAAE;YACf,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;gBACzB,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;gBACpC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACtC,CAAC,CAAC,CAAC;QACP,CAAC,CAAA;QAEO,UAAK,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAWtD,CAAC;IATG,MAAM;QACF,OAAO,CACH,MAAC,MAAM,oBAAK,IAAI,CAAC,KAAK,CAAC,WAAW,IAAE,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,mBAAmB,EAAE,KAAK,aAC7F,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,KAAC,YAAY,cAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAgB,EACvE,KAAC,UAAU,cAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAc,EAC1C,KAAC,YAAY,cAAC,KAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,KAAK,YAAG,IAAI,CAAC,KAAK,CAAC,UAAU,GAAU,GAAe,KACrF,CACZ,CAAC;IACN,CAAC;;AAhCM,qBAAS,GAAG;IACf,oCAAoC;IACpC,MAAM,EAAE,SAAS,CAAC,MAAM;IACxB,4BAA4B;IAC5B,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,UAAU;IAC9B,gDAAgD;IAChD,UAAU,EAAE,SAAS,CAAC,MAAM;IAC5B,2BAA2B;IAC3B,WAAW,EAAE,SAAS,CAAC,MAAM;CAChC,AATe,CASf;AAEM,wBAAY,GAAG;IAClB,UAAU,EAAE,IAAI;CACnB,AAFkB,CAElB;eAhBgB,WAAW"}
+{"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;