npm - no-frills-ui - Versions diffs - 0.0.14-alpha.2 → 0.0.14-alpha.4 - Mend

no-frills-ui 0.0.14-alpha.2 → 0.0.14-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (260) hide show

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

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import React, { useEffect, useId, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import constants from '../../shared/constants';
@@ -123,6 +123,22 @@ const ErrorContainer = styled.div `
     line-height: 14px;
     margin-left: 3px;
 `;
+// Visually hidden but accessible to screen readers
+const VisuallyHidden = styled.ul `
+    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
@@ -141,9 +157,21 @@ export default function ChipInput(props) {
     const [touched, setTouched] = useState(false);
     const [value, setValue] = useState(props.value);
     const InputRef = React.useRef(null);
+    const [announcement, setAnnouncement] = useState('');
+    const errorId = useId();
+    /**
+     * 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);
+        if (Array.isArray(props.value)) {
+            setValue(props.value);
+        }
     }, [props.value]);
     /**
      * Update the chip values and notify changes.
@@ -181,6 +209,7 @@ export default function ChipInput(props) {
             const newValue = [...value, text.trim()];
             updateValue(newValue);
             setText('');
+            setAnnouncement(replacePlaceholder(props.addedAnnouncementTemplate, text.trim()));
         }
     };
     /**
@@ -190,6 +219,7 @@ export default function ChipInput(props) {
     const removeChip = (chipToRemove) => {
         const newValue = value.filter((chip) => chip !== chipToRemove);
         updateValue(newValue);
+        setAnnouncement(replacePlaceholder(props.removedAnnouncementTemplate, chipToRemove));
     };
     /**
      * Moves a chip from one position to another.
@@ -207,7 +237,7 @@ 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 (_jsxs(_Fragment, { children: [_jsxs(Label, { text: text, touched: touched, errorText: props.errorText, children: [_jsx("input", Object.assign({}, 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 })), _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), closeButtonAriaLabel: replacePlaceholder(props.closeButtonAriaLabel, chip) }, chip))) })) }), _jsx("span", { children: props.label }), props.errorText && _jsx(ErrorContainer, { id: errorId, children: props.errorText })] }), _jsx(VisuallyHidden, { "aria-live": "polite", "aria-atomic": "true", children: announcement })] }));
 }
 ChipInput.propTypes = {
     /** Label for the field */
@@ -218,8 +248,17 @@ ChipInput.propTypes = {
     value: PropTypes.arrayOf(PropTypes.string),
     /** Callback when chips change */
     onChange: PropTypes.func,
+    /** Aria label for the close button on chip. Defaults to "Remove {label}" */
+    closeButtonAriaLabel: PropTypes.string,
+    /** Announcement text when a chip is added. Defaults to "{label} was added" */
+    addedAnnouncementTemplate: PropTypes.string,
+    /** Announcement text when a chip is removed. Defaults to "{label} was removed" */
+    removedAnnouncementTemplate: PropTypes.string,
 };
 ChipInput.defaultProps = {
     value: [],
+    closeButtonAriaLabel: 'Remove {:label}',
+    addedAnnouncementTemplate: '{:label} was added',
+    removedAnnouncementTemplate: '{:label} was removed',
 };
 //# sourceMappingURL=ChipInput.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChipInput.js","sourceRoot":"","sources":["../../../src/components/ChipInput/ChipInput.tsx"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ChipInput.js","sourceRoot":"","sources":["../../../src/components/ChipInput/ChipInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useId, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport constants 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 var(--border-color, ${constants.BORDER_COLOR});\n background-color: var(--background, ${constants.BACKGROUND});\n\n /** Focused /\n &:has(:focus),\n &:has(:active) {\n border-color: var(--primary, ${constants.PRIMARY});\n box-shadow: 0 0 0 4px var(--primary-light, ${constants.PRIMARY_LIGHT});\n }\n\n &:has(:focus) > span,\n &:has(:active) > span {\n color: var(--primary, ${constants.PRIMARY});\n }\n\n /* Disabled /\n &:has(:disabled) {\n border-color: var(--disabled-border, ${constants.DISABLED_BORDER});\n background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});\n }\n\n &:has(:disabled) > span {\n color: #777;\n }\n\n /* Invalid /\n &:has(:focus:invalid) {\n border-color: var(--error, ${constants.ERROR});\n box-shadow: 0 0 0 4px var(--error-light, ${constants.ERROR_LIGHT});\n }\n\n ${(props) =>\n props.touched\n ? `\n &:has(:invalid) {\n border-color: var(--error, ${constants.ERROR});\n }\n \n &:has(:invalid) > span {\n color: var(--error, ${constants.ERROR});\n }\n `\n : ''}\n\n /* Error /\n ${(props) =>\n props.errorText\n ? `\n border-color: var(--error, ${constants.ERROR});\n\n & > span {\n color: var(--error, ${constants.ERROR});\n }\n `\n : ''}\n\n /* Required /\n &:has(:required) > span:after {\n content: '';\n margin-left: 2px;\n color: var(--error, ${constants.ERROR});\n }\n\n & > input {\n border: none;\n outline: none;\n width: 100%;\n line-height: 30px;\n min-height: 30px;\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: var(--background, ${constants.BACKGROUND});\n font-size: 12px;\n line-height: 14px;\n }\n\n ${(props) =>\n props.text !== ''\n ? `\n & > span {\n top: -8px;\n background: var(--background, ${constants.BACKGROUND});\n font-size: 12px;\n line-height: 14px;\n }\n `\n : ''}\n`;\n\n// Error message container\nconst ErrorContainer = styled.div`\n color: var(--error, ${constants.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() !== '') {\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"]}

package/lib-esm/components/ChipInput/index.d.ts CHANGED Viewed

	@@ -1 +1,2 @@
1 1	export { default as ChipInput } from './ChipInput';
2	+ //# sourceMappingURL=index.d.ts.map

package/lib-esm/components/ChipInput/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ChipInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/lib-esm/components/ChipInput/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ChipInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC"}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ChipInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { default as ChipInput } from './ChipInput';\n"]}

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

@@ -21,3 +21,4 @@ export default class AlertDialog extends React.Component<AlertOption> {
     render(): import("@emotion/react/jsx-runtime").JSX.Element;
 }
 export {};
+//# sourceMappingURL=AlertDialog.d.ts.map

package/lib-esm/components/Dialog/AlertDialog.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/AlertDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,KAAK,WAAW,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,WAAW,CAAC,SAAS,CAAC,CAAC;AAEtE,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;IACjE,OAAO,CAAC,MAAM,CAAuB;IAErC,MAAM,CAAC,SAAS;QACZ,oCAAoC;;QAEpC,4BAA4B;;QAE5B,gDAAgD;;QAEhD,2BAA2B;;MAE7B;IAEF,MAAM,CAAC,YAAY;;MAEjB;IAEK,IAAI,yBAKT;IAEF,OAAO,CAAC,KAAK,CAAqC;IAElD,MAAM;CAgBT"}

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

	@@ -1 +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,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,MAAM,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI1E,MAAqB,WAAY,SAAQ,KAAK,CAAC,SAAsB;IAArE;;QACY,WAAM,GAAG,SAAS,EAAU,CAAC;QAiB9B,SAAI,GAAG,GAAG,EAAE;YACf,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;gBAC3B,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,CAAC;QAEM,UAAK,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAkBtD,CAAC;IAhBG,MAAM;QACF,OAAO,CACH,MAAC,MAAM,oBACC,IAAI,CAAC,KAAK,CAAC,WAAW,IAC1B,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,UAAU,EAAE,KAAK,EACjB,mBAAmB,EAAE,KAAK,aAEzB,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,KAAC,YAAY,cAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAgB,EACtE,KAAC,UAAU,cAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAc,EAC1C,KAAC,YAAY,cACT,KAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,KAAK,YAAG,IAAI,CAAC,KAAK,CAAC,UAAU,GAAU,GAClD,KACV,CACZ,CAAC;IACN,CAAC;;AAvCM,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,CASd;AAEK,wBAAY,GAAG;IAClB,UAAU,EAAE,IAAI;CACnB,AAFkB,CAEjB;eAhBe,WAAW"}
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,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,MAAM,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI1E,MAAqB,WAAY,SAAQ,KAAK,CAAC,SAAsB;IAArE;;QACY,WAAM,GAAG,SAAS,EAAU,CAAC;QAiB9B,SAAI,GAAG,GAAG,EAAE;YACf,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;gBAC3B,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,CAAC;QAEM,UAAK,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAkBtD,CAAC;IAhBG,MAAM;QACF,OAAO,CACH,MAAC,MAAM,oBACC,IAAI,CAAC,KAAK,CAAC,WAAW,IAC1B,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,UAAU,EAAE,KAAK,EACjB,mBAAmB,EAAE,KAAK,aAEzB,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,KAAC,YAAY,cAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAgB,EACtE,KAAC,UAAU,cAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAc,EAC1C,KAAC,YAAY,cACT,KAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,KAAK,YAAG,IAAI,CAAC,KAAK,CAAC,UAAU,GAAU,GAClD,KACV,CACZ,CAAC;IACN,CAAC;;AAvCM,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,CASd;AAEK,wBAAY,GAAG;IAClB,UAAU,EAAE,IAAI;CACnB,AAFkB,CAEjB;eAhBe,WAAW","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\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 return (\n <Dialog\n {...this.props.dialogProps}\n ref={this.dialog}\n closeOnEsc={false}\n closeOnOverlayClick={false}\n >\n {this.props.header && <DialogHeader>{this.props.header}</DialogHeader>}\n <DialogBody>{this.props.body}</DialogBody>\n <DialogFooter>\n <Button onClick={this.close}>{this.props.buttonText}</Button>\n </DialogFooter>\n </Dialog>\n );\n }\n}\n"]}

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

@@ -25,3 +25,4 @@ export default class ConfirmDialog extends React.Component<ConfirmOption> {
     render(): import("@emotion/react/jsx-runtime").JSX.Element;
 }
 export {};
+//# sourceMappingURL=ConfirmDialog.d.ts.map

package/lib-esm/components/Dialog/ConfirmDialog.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,KAAK,aAAa,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,aAAa,CAAC,SAAS,CAAC,CAAC;AAE1E,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IACrE,OAAO,CAAC,MAAM,CAAuB;IAErC,MAAM,CAAC,SAAS;QACZ,oCAAoC;;QAEpC,qCAAqC;;QAErC,yBAAyB;;QAEzB,yBAAyB;;QAEzB,2BAA2B;;MAE7B;IAEF,MAAM,CAAC,YAAY;;;MAGjB;IAEK,IAAI,yBAWT;IAEF,OAAO,CAAC,MAAM,CAA0C;IACxD,OAAO,CAAC,OAAO,CAAyC;IAExD,MAAM;CAkBT"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/ConfirmDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,MAAM,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI1E,MAAqB,aAAc,SAAQ,KAAK,CAAC,SAAwB;IAAzE;;QACY,WAAM,GAAG,SAAS,EAAU,CAAC;QAoB9B,SAAI,GAAG,GAAG,EAAE;YACf,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;gBACnC,MAAM,OAAO,GAAG,CAAC,IAAa,EAAE,EAAE;oBAC9B,IAAI,IAAI,EAAE,CAAC;wBACP,OAAO,CAAC,IAAI,CAAC,CAAC;oBAClB,CAAC;yBAAM,CAAC;wBACJ,MAAM,EAAE,CAAC;oBACb,CAAC;gBACL,CAAC,CAAC;gBACF,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACtC,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;QAEM,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAChD,YAAO,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAoB5D,CAAC;IAlBG,MAAM;QACF,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAClE,OAAO,CACH,MAAC,MAAM,oBACC,WAAW,IACf,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,UAAU,EAAE,KAAK,EACjB,mBAAmB,EAAE,KAAK,aAEzB,MAAM,IAAI,KAAC,YAAY,cAAE,MAAM,GAAgB,EAChD,KAAC,UAAU,cAAE,IAAI,GAAc,EAC/B,MAAC,YAAY,eACT,KAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,MAAM,YAAG,MAAM,GAAU,EAC/C,KAAC,YAAY,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,YAAG,OAAO,GAAgB,IAClD,KACV,CACZ,CAAC;IACN,CAAC;;AAnDM,uBAAS,GAAG;IACf,oCAAoC;IACpC,MAAM,EAAE,SAAS,CAAC,MAAM;IACxB,qCAAqC;IACrC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IACjC,yBAAyB;IACzB,OAAO,EAAE,SAAS,CAAC,MAAM;IACzB,yBAAyB;IACzB,MAAM,EAAE,SAAS,CAAC,MAAM;IACxB,2BAA2B;IAC3B,WAAW,EAAE,SAAS,CAAC,MAAM;CAChC,AAXe,CAWd;AAEK,0BAAY,GAAG;IAClB,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,IAAI;CACf,AAHkB,CAGjB;eAnBe,aAAa"}
1	+ {"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/ConfirmDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,MAAM,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI1E,MAAqB,aAAc,SAAQ,KAAK,CAAC,SAAwB;IAAzE;;QACY,WAAM,GAAG,SAAS,EAAU,CAAC;QAoB9B,SAAI,GAAG,GAAG,EAAE;YACf,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;gBACnC,MAAM,OAAO,GAAG,CAAC,IAAa,EAAE,EAAE;oBAC9B,IAAI,IAAI,EAAE,CAAC;wBACP,OAAO,CAAC,IAAI,CAAC,CAAC;oBAClB,CAAC;yBAAM,CAAC;wBACJ,MAAM,EAAE,CAAC;oBACb,CAAC;gBACL,CAAC,CAAC;gBACF,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACtC,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;QAEM,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAChD,YAAO,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAoB5D,CAAC;IAlBG,MAAM;QACF,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAClE,OAAO,CACH,MAAC,MAAM,oBACC,WAAW,IACf,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,UAAU,EAAE,KAAK,EACjB,mBAAmB,EAAE,KAAK,aAEzB,MAAM,IAAI,KAAC,YAAY,cAAE,MAAM,GAAgB,EAChD,KAAC,UAAU,cAAE,IAAI,GAAc,EAC/B,MAAC,YAAY,eACT,KAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,MAAM,YAAG,MAAM,GAAU,EAC/C,KAAC,YAAY,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,YAAG,OAAO,GAAgB,IAClD,KACV,CACZ,CAAC;IACN,CAAC;;AAnDM,uBAAS,GAAG;IACf,oCAAoC;IACpC,MAAM,EAAE,SAAS,CAAC,MAAM;IACxB,qCAAqC;IACrC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IACjC,yBAAyB;IACzB,OAAO,EAAE,SAAS,CAAC,MAAM;IACzB,yBAAyB;IACzB,MAAM,EAAE,SAAS,CAAC,MAAM;IACxB,2BAA2B;IAC3B,WAAW,EAAE,SAAS,CAAC,MAAM;CAChC,AAXe,CAWd;AAEK,0BAAY,GAAG;IAClB,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,IAAI;CACf,AAHkB,CAGjB;eAnBe,aAAa","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"]}

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

@@ -7,9 +7,15 @@ export declare const DialogContainer: import("@emotion/styled").StyledComponent<
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export { Header as DialogHeader, Body as DialogBody, Footer as DialogFooter, } from '../../shared/styles';
-type DialogOptions = PropTypes.InferProps<typeof Dialog.propTypes>;
+interface DialogOptions {
+    /** Flag to close dialog on `esc` click. Default value is true. */
+    closeOnEsc?: boolean;
+    /** Close layer overlay is clicked. Default value is true. */
+    closeOnOverlayClick?: boolean;
+}
 interface DialogState {
     show: boolean;
+    LayerComponent?: () => React.ReactPortal | null;
 }
 declare class Dialog extends React.Component<React.PropsWithChildren<DialogOptions>, DialogState> {
     static propTypes: {
@@ -24,9 +30,7 @@ declare class Dialog extends React.Component<React.PropsWithChildren<DialogOptio
     };
     private closeDialog;
     private onCloseFn;
-    state: {
-        show: boolean;
-    };
+    state: DialogState;
     shouldComponentUpdate(nextProps: DialogOptions, nextState: DialogState): boolean;
     open: (closeCallback?: (resp: unknown) => void) => void;
     close: (resp?: unknown) => void;
@@ -34,3 +38,4 @@ declare class Dialog extends React.Component<React.PropsWithChildren<DialogOptio
     render(): import("@emotion/react/jsx-runtime").JSX.Element;
 }
 export default Dialog;
+//# sourceMappingURL=Dialog.d.ts.map

package/lib-esm/components/Dialog/Dialog.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,eAAO,MAAM,eAAe;;SAqBL,MACrB,WAAW;;;UANZ,CAAC;AAEF,OAAO,EACH,MAAM,IAAI,YAAY,EACtB,IAAI,IAAI,UAAU,EAClB,MAAM,IAAI,YAAY,GACzB,MAAM,qBAAqB,CAAC;AAE7B,UAAU,aAAa;IACnB,kEAAkE;IAClE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,UAAU,WAAW;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC;CACnD;AAED,cAAM,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,iBAAiB,CAAC,aAAa,CAAC,EAAE,WAAW,CAAC;IACrF,MAAM,CAAC,SAAS;QACZ,kEAAkE;;QAElE,6DAA6D;;MAE/D;IAEF,MAAM,CAAC,YAAY;;;MAGjB;IAEF,OAAO,CAAC,WAAW,CAA2B;IAC9C,OAAO,CAAC,SAAS,CAA2B;IAE5C,KAAK,EAAE,WAAW,CAGhB;IAEF,qBAAqB,CAAC,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,WAAW;IAI/D,IAAI,mBAAoB,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,UAwBpD;IAEK,KAAK,UAAW,OAAO,UAE5B;IAEF,OAAO,CAAC,aAAa,CAMnB;IAEF,MAAM;CAST;AAED,eAAe,MAAM,CAAC"}

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

@@ -38,10 +38,23 @@ class Dialog extends React.Component {
         super(...arguments);
         this.state = {
             show: false,
+            LayerComponent: undefined,
         };
         this.open = (closeCallback) => {
+            const _a = this.props, { closeOnEsc, closeOnOverlayClick, children } = _a, rest = __rest(_a, ["closeOnEsc", "closeOnOverlayClick", "children"]);
+            const [Component, closeFn] = LayerManager.renderLayer({
+                exitDelay: 300,
+                overlay: true,
+                closeOnEsc,
+                closeCallback: this.closeCallback,
+                closeOnOverlayClick,
+                position: LAYER_POSITION.DIALOG,
+                component: (_jsx(DialogContainer, Object.assign({}, rest, { onClick: (e) => e.stopPropagation(), elevated: true, children: children }))),
+            });
+            this.closeDialog = closeFn;
             this.setState({
                 show: true,
+                LayerComponent: Component,
             });
             this.onCloseFn = closeCallback;
         };
@@ -53,6 +66,7 @@ class Dialog extends React.Component {
             var _a;
             this.setState({
                 show: false,
+                LayerComponent: undefined,
             });
             (_a = this.onCloseFn) === null || _a === void 0 ? void 0 : _a.call(this, resp);
         };
@@ -61,19 +75,9 @@ class Dialog extends React.Component {
         return this.state.show !== nextState.show;
     }
     render() {
-        const _a = this.props, { closeOnEsc, closeOnOverlayClick, children } = _a, rest = __rest(_a, ["closeOnEsc", "closeOnOverlayClick", "children"]);
-        if (this.state.show) {
-            const [Component, closeFn] = LayerManager.renderLayer({
-                exitDelay: 300,
-                overlay: true,
-                closeOnEsc,
-                closeCallback: this.closeCallback,
-                closeOnOverlayClick,
-                position: LAYER_POSITION.DIALOG,
-                component: (_jsx(DialogContainer, Object.assign({}, rest, { onClick: (e) => e.stopPropagation(), elevated: true, children: children }))),
-            });
-            this.closeDialog = closeFn;
-            return _jsx(Component, {});
+        const { LayerComponent } = this.state;
+        if (this.state.show && LayerComponent) {
+            return _jsx(LayerComponent, {});
         }
         else {
             return null;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,YAAY,EAAE,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;;;;;;;;;;CAgB1C,CAAC;AAEF,OAAO,EACH,MAAM,IAAI,YAAY,EACtB,IAAI,IAAI,UAAU,EAClB,MAAM,IAAI,YAAY,GACzB,MAAM,qBAAqB,CAAC;~~AAQ7B~~,MAAM,MAAO,SAAQ,KAAK,CAAC,SAA8D;IAAzF;;QAgBI,UAAK,~~GAAG~~;~~YACJ~~,IAAI,EAAE,KAAK;~~SACd~~,CAAC;QAMK,SAAI,GAAG,CAAC,aAAuC,EAAE,EAAE;YACtD,IAAI,CAAC,~~QAAQ~~,~~CAAC;gBACV~~,~~IAAI~~,EAAE,IAAI~~;aACb~~,~~CAAC~~,CAAC;~~YACH~~,~~IAAI~~,CAAC,SAAS,~~GAAG~~,~~aAAa~~,CAAC~~;QACnC~~,CAAC,CAAC;~~QAEK~~,~~UAAK~~,GAAG,~~CAAC~~,~~IAAc,~~EAAE,~~EAAE;;YAC9B,MAAA,~~IAAI,~~CAAC~~,~~WAAW~~,~~qDAAG~~,IAAI,CAAC,~~CAAC~~;~~QAC7B~~,~~CAAC,CAAC~~;~~QAEM~~,~~kBAAa~~,~~GAAG~~,CAAC,~~IAAc~~,~~EAAE~~,EAAE~~;;YACvC~~,IAAI,~~CAAC~~,~~QAAQ~~,CAAC~~;gBACV~~,~~IAAI~~,EAAE,~~KAAK;aACd~~,CAAC,CAAC~~;YACH~~,~~MAAA~~,~~IAAI~~,~~CAAC~~,~~SAAS~~,~~qDAAG~~,~~IAAI~~,CAAC,CAAC;~~QAC3B~~,CAAC,CAAC;~~IAyBN~~,CAAC~~;IA7CG~~,~~qBAAqB~~,CAAC,~~SAAwB~~,EAAE,~~SAAsB~~;~~QAClE~~,~~OAAO~~,~~IAAI~~,CAAC,~~KAAK,~~CAAC,IAAI,~~KAAK~~,SAAS,~~CAAC~~,~~IAAI~~,CAAC;~~IAC9C~~,CAAC~~;IAoBD~~,~~MAAM~~;~~QACF~~,~~MAAM~~,~~KAAyD~~,~~IAAI,~~CAAC,~~KAAK~~,~~EAAnE,~~EAAE,~~UAAU,~~EAAE,~~mBAAmB~~,~~EAAE~~,~~QAAQ~~,~~OAAwB~~,~~EAAnB~~,IAAI,~~cAApD~~,~~iDAAsD,CAAa,~~CAAC;~~QAE1E~~,~~IAAI,IAAI,~~CAAC,~~KAAK,~~CAAC,~~IAAI~~,~~EAAE~~,CAAC~~;YAClB~~,~~MAAM~~,~~CAAC~~,~~SAAS,~~EAAE,~~OAAO~~,CAAC,~~GAAG~~,~~YAAY,~~CAAC~~,WAAW,CAAC~~;~~gBAClD~~,~~SAAS~~,EAAE,~~GAAG~~;~~gBACd~~,~~OAAO~~,EAAE,~~IAAI~~;~~gBACb~~,~~UAAU~~;~~gBACV~~,~~aAAa~~,~~EAAE,~~IAAI,CAAC,~~aAAa;gBACjC~~,~~mBAAmB;gBACnB~~,~~QAAQ~~,~~EAAE~~,~~cAAc~~,CAAC,~~MAAM~~;~~gBAC/B~~,~~SAAS~~,~~EAAE~~,~~CACP~~,~~KAAC~~,~~eAAe~~,~~oBAAK~~,~~IAAI,IAAE,~~OAAO,~~EAAE~~,CAAC,CAAC,~~EAAE~~,~~EAAE~~,CAAC,CAAC,CAAC,~~eAAe~~,EAAE,EAAE,~~QAAQ~~,~~kBACnE~~,~~QAAQ~~,~~IACK~~,~~CACrB~~;~~aACJ~~,CAAC,CAAC~~;YACH~~,IAAI,~~CAAC~~,~~WAAW~~,~~GAAG~~,~~OAAO,~~CAAC;~~YAC3B~~,OAAO,KAAC,~~SAAS~~,KAAG,CAAC;~~QACzB~~,CAAC;aAAM,CAAC;YACJ,OAAO,IAAI,CAAC;QAChB,CAAC;IACL,CAAC;;~~AA/DM~~,gBAAS,GAAG;IACf,kEAAkE;IAClE,UAAU,EAAE,SAAS,CAAC,IAAI;IAC1B,6DAA6D;IAC7D,mBAAmB,EAAE,SAAS,CAAC,IAAI;CACtC,AALe,CAKd;AAEK,mBAAY,GAAG;IAClB,UAAU,EAAE,IAAI;IAChB,mBAAmB,EAAE,IAAI;CAC5B,AAHkB,CAGjB;~~AAwDN~~,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,YAAY,EAAE,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;;;;;;;;;;CAgB1C,CAAC;AAEF,OAAO,EACH,MAAM,IAAI,YAAY,EACtB,IAAI,IAAI,UAAU,EAClB,MAAM,IAAI,YAAY,GACzB,MAAM,qBAAqB,CAAC;AAc7B,MAAM,MAAO,SAAQ,KAAK,CAAC,SAA8D;IAAzF;;QAgBI,UAAK,GAAgB;YACjB,IAAI,EAAE,KAAK;YACX,cAAc,EAAE,SAAS;SAC5B,CAAC;QAMK,SAAI,GAAG,CAAC,aAAuC,EAAE,EAAE;YACtD,MAAM,KAAyD,IAAI,CAAC,KAAK,EAAnE,EAAE,UAAU,EAAE,mBAAmB,EAAE,QAAQ,OAAwB,EAAnB,IAAI,cAApD,iDAAsD,CAAa,CAAC;YAE1E,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG,YAAY,CAAC,WAAW,CAAC;gBAClD,SAAS,EAAE,GAAG;gBACd,OAAO,EAAE,IAAI;gBACb,UAAU;gBACV,aAAa,EAAE,IAAI,CAAC,aAAa;gBACjC,mBAAmB;gBACnB,QAAQ,EAAE,cAAc,CAAC,MAAM;gBAC/B,SAAS,EAAE,CACP,KAAC,eAAe,oBAAK,IAAI,IAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EAAE,QAAQ,kBACnE,QAAQ,IACK,CACrB;aACJ,CAAC,CAAC;YAEH,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;YAE3B,IAAI,CAAC,QAAQ,CAAC;gBACV,IAAI,EAAE,IAAI;gBACV,cAAc,EAAE,SAAS;aAC5B,CAAC,CAAC;YACH,IAAI,CAAC,SAAS,GAAG,aAAa,CAAC;QACnC,CAAC,CAAC;QAEK,UAAK,GAAG,CAAC,IAAc,EAAE,EAAE;;YAC9B,MAAA,IAAI,CAAC,WAAW,qDAAG,IAAI,CAAC,CAAC;QAC7B,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,IAAc,EAAE,EAAE;;YACvC,IAAI,CAAC,QAAQ,CAAC;gBACV,IAAI,EAAE,KAAK;gBACX,cAAc,EAAE,SAAS;aAC5B,CAAC,CAAC;YACH,MAAA,IAAI,CAAC,SAAS,qDAAG,IAAI,CAAC,CAAC;QAC3B,CAAC,CAAC;IAWN,CAAC;IAnDG,qBAAqB,CAAC,SAAwB,EAAE,SAAsB;QAClE,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,IAAI,CAAC;IAC9C,CAAC;IAwCD,MAAM;QACF,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAEtC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAc,EAAE,CAAC;YACpC,OAAO,KAAC,cAAc,KAAG,CAAC;QAC9B,CAAC;aAAM,CAAC;YACJ,OAAO,IAAI,CAAC;QAChB,CAAC;IACL,CAAC;;AAtEM,gBAAS,GAAG;IACf,kEAAkE;IAClE,UAAU,EAAE,SAAS,CAAC,IAAI;IAC1B,6DAA6D;IAC7D,mBAAmB,EAAE,SAAS,CAAC,IAAI;CACtC,AALe,CAKd;AAEK,mBAAY,GAAG;IAClB,UAAU,EAAE,IAAI;IAChB,mBAAmB,EAAE,IAAI;CAC5B,AAHkB,CAGjB;AA+DN,eAAe,MAAM,CAAC","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<React.PropsWithChildren<DialogOptions>, DialogState> {\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\n state: DialogState = {\n show: false,\n LayerComponent: undefined,\n };\n\n shouldComponentUpdate(nextProps: DialogOptions, nextState: DialogState) {\n return this.state.show !== nextState.show;\n }\n\n public open = (closeCallback?: (resp: unknown) => void) => {\n const { closeOnEsc, closeOnOverlayClick, children, ...rest } = this.props;\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 {...rest} onClick={(e) => e.stopPropagation()} elevated>\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.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"]}

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

@@ -34,3 +34,4 @@ export default class PromptDialog extends React.Component<PromptOption, {
     render(): import("@emotion/react/jsx-runtime").JSX.Element;
 }
 export {};
+//# sourceMappingURL=PromptDialog.d.ts.map

package/lib-esm/components/Dialog/PromptDialog.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PromptDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/PromptDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,SAAS,MAAM,YAAY,CAAC;AAMnC,KAAK,YAAY,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,YAAY,CAAC,SAAS,CAAC,CAAC;AAMxE,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,YAAY,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;IACtF,MAAM,CAAC,SAAS;QACZ,oCAAoC;;QAEpC,yCAAyC;;QAEzC,mCAAmC;;QAEnC,oDAAoD;;QAEpD,oDAAoD;;QAEpD,2BAA2B;;QAE3B,uCAAuC;;MAEzC;IAEF,MAAM,CAAC,YAAY;;;;MAIjB;gBAEU,KAAK,EAAE,YAAY;IAO/B,OAAO,CAAC,MAAM,CAAuB;IAErC,OAAO,CAAC,WAAW,CAIjB;IAEF,OAAO,CAAC,MAAM,CAAqC;IAEnD,OAAO,CAAC,MAAM,CAGZ;IAEK,IAAI,yBAcT;IAEF,MAAM;CAiCT"}

package/lib-esm/components/Dialog/PromptDialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PromptDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/PromptDialog.tsx"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"PromptDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/PromptDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,MAAM,EAAE,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI1E,MAAM,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAA;;CAExB,CAAC;AAEF,MAAqB,YAAa,SAAQ,KAAK,CAAC,SAA0C;IAwBtF,YAAY,KAAmB;QAC3B,KAAK,CAAC,KAAK,CAAC,CAAC;QAMT,WAAM,GAAG,SAAS,EAAU,CAAC;QAE7B,gBAAW,GAAG,CAAC,CAAsC,EAAE,EAAE;YAC7D,IAAI,CAAC,QAAQ,CAAC;gBACV,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;aACxB,CAAC,CAAC;QACP,CAAC,CAAC;QAEM,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QAE3C,WAAM,GAAG,CAAC,CAAkB,EAAE,EAAE;YACpC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAChD,CAAC,CAAC;QAEK,SAAI,GAAG,GAAG,EAAE;YACf,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;gBACnC,MAAM,OAAO,GAAG,CAAC,KAAa,EAAE,EAAE;oBAC9B,IAAI,KAAK,EAAE,CAAC;wBACR,OAAO,CAAC,KAAK,CAAC,CAAC;oBACnB,CAAC;yBAAM,CAAC;wBACJ,MAAM,EAAE,CAAC;oBACb,CAAC;oBACD,IAAI,CAAC,QAAQ,CAAC;wBACV,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY;qBACjC,CAAC,CAAC;gBACP,CAAC,CAAC;gBACF,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACtC,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;QAlCE,IAAI,CAAC,KAAK,GAAG;YACT,KAAK,EAAE,KAAK,CAAC,YAAY;SAC5B,CAAC;IACN,CAAC;IAiCD,MAAM;QACF,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAErF,OAAO,CACH,KAAC,MAAM,oBACC,WAAW,IACf,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,UAAU,EAAE,KAAK,EACjB,mBAAmB,EAAE,KAAK,YAE1B,gBAAM,QAAQ,EAAE,IAAI,CAAC,MAAM,aACtB,MAAM,IAAI,KAAC,YAAY,cAAE,MAAM,GAAgB,EAChD,MAAC,UAAU,eACP,KAAC,QAAQ,cAAE,IAAI,GAAY,EAC3B,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,YAC3B,KAAC,KAAK,kBACF,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,EACnC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EAAE,IAAI,CAAC,WAAW,IACtB,UAAU,EAChB,GACA,IACG,EACb,MAAC,YAAY,eACT,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,MAAM,YACrC,UAAU,GACN,EACT,KAAC,YAAY,cAAE,UAAU,GAAgB,IAC9B,IACZ,IACF,CACZ,CAAC;IACN,CAAC;;AA7FM,sBAAS,GAAG;IACf,oCAAoC;IACpC,MAAM,EAAE,SAAS,CAAC,MAAM;IACxB,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC,MAAM;IACtB,mCAAmC;IACnC,YAAY,EAAE,SAAS,CAAC,MAAM;IAC9B,oDAAoD;IACpD,UAAU,EAAE,SAAS,CAAC,MAAM;IAC5B,oDAAoD;IACpD,UAAU,EAAE,SAAS,CAAC,MAAM;IAC5B,2BAA2B;IAC3B,UAAU,EAAE,SAAS,CAAC,MAAM;IAC5B,uCAAuC;IACvC,WAAW,EAAE,SAAS,CAAC,MAAM;CAChC,AAfe,CAed;AAEK,yBAAY,GAAG;IAClB,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,QAAQ;IACpB,YAAY,EAAE,EAAE;CACnB,AAJkB,CAIjB;eAtBe,YAAY","sourcesContent":["import React, { createRef } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { Button, ActionButton } from '../Button';\nimport { Input } from '../Input';\nimport Dialog, { DialogHeader, DialogBody, DialogFooter } from './Dialog';\n\ntype PromptOption = PropTypes.InferProps<typeof PromptDialog.propTypes>;\n\nconst BodyText = styled.p`\n margin-top: 0;\n`;\n\nexport default class PromptDialog extends React.Component<PromptOption, { value: string }> {\n static propTypes = {\n /** Shown as header of the dialog /\n header: PropTypes.string,\n /* Rendered as the body of the dialog /\n body: PropTypes.string,\n /* Default value for the input. /\n defaultValue: PropTypes.string,\n /* Submit button text. Default value is 'Submit' /\n submitText: PropTypes.string,\n /* Cancel button text. Default value is 'Cancel' /\n cancelText: PropTypes.string,\n /* Props for the input. /\n inputProps: PropTypes.object,\n /* Additional props for the dialog. */\n dialogProps: PropTypes.object,\n };\n\n static defaultProps = {\n cancelText: 'Cancel',\n submitText: 'Submit',\n defaultValue: '',\n };\n\n constructor(props: PromptOption) {\n super(props);\n this.state = {\n value: props.defaultValue,\n };\n }\n\n private dialog = createRef<Dialog>();\n\n private valueChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n this.setState({\n value: e.target.value,\n });\n };\n\n private cancel = () => this.dialog.current.close();\n\n private submit = (e: React.FormEvent) => {\n e.preventDefault();\n this.dialog.current.close(this.state.value);\n };\n\n public show = () => {\n return new Promise((resolve, reject) => {\n const onClose = (value: string) => {\n if (value) {\n resolve(value);\n } else {\n reject();\n }\n this.setState({\n value: this.props.defaultValue,\n });\n };\n this.dialog.current.open(onClose);\n });\n };\n\n render() {\n const { header, body, inputProps, submitText, cancelText, dialogProps } = this.props;\n\n return (\n <Dialog\n {...dialogProps}\n ref={this.dialog}\n closeOnEsc={false}\n closeOnOverlayClick={false}\n >\n <form onSubmit={this.submit}>\n {header && <DialogHeader>{header}</DialogHeader>}\n <DialogBody>\n <BodyText>{body}</BodyText>\n <div style={{ display: 'flex' }}>\n <Input\n style={{ width: 'auto', flex: '1' }}\n value={this.state.value}\n onChange={this.valueChange}\n {...inputProps}\n />\n </div>\n </DialogBody>\n <DialogFooter>\n <Button type=\"button\" onClick={this.cancel}>\n {cancelText}\n </Button>\n <ActionButton>{submitText}</ActionButton>\n </DialogFooter>\n </form>\n </Dialog>\n );\n }\n}\n"]}

package/lib-esm/components/Dialog/index.d.ts CHANGED Viewed

@@ -2,3 +2,4 @@ export { default as Dialog, DialogBody, DialogFooter, DialogHeader } from './Dia
 export { default as AlertDialog } from './AlertDialog';
 export { default as ConfirmDialog } from './ConfirmDialog';
 export { default as PromptDialog } from './PromptDialog';
+//# sourceMappingURL=index.d.ts.map

package/lib-esm/components/Dialog/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/lib-esm/components/Dialog/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default as Dialog, DialogBody, DialogFooter, DialogHeader } from './Dialog';\nexport { default as AlertDialog } from './AlertDialog';\nexport { default as ConfirmDialog } from './ConfirmDialog';\nexport { default as PromptDialog } from './PromptDialog';\n"]}

package/lib-esm/components/DragAndDrop/DragAndDrop.d.ts CHANGED Viewed

@@ -7,6 +7,18 @@ type DragAndDropProps = {
     onDrop: (start: number, end: number) => void;
     /** Shows drag indicator against each list item */
     showIndicator: boolean;
+    /** i18n: Template for item aria-label. Placeholders: {:position}, {:grabKey}, {:moveKeys}, {:dropKey}, {:altDropKey} */
+    itemAriaLabelTemplate?: string;
+    /** i18n: Aria label for drag handle */
+    dragHandleAriaLabel?: string;
+    /** i18n: Template for grabbed announcement. Placeholders: {:position}, {:moveKeys}, {:dropKey}, {:altDropKey}, {:cancelKey} */
+    grabbedAnnouncementTemplate?: string;
+    /** i18n: Template for moved announcement. Placeholders: {:position} */
+    movedAnnouncementTemplate?: string;
+    /** i18n: Template for dropped announcement. Placeholders: {:position} */
+    droppedAnnouncementTemplate?: string;
+    /** i18n: Template for cancelled announcement */
+    cancelledAnnouncementTemplate?: string;
 } & PropsWithChildren<unknown>;
 /**
  * A drag and drop container component that enables reordering of child elements.
@@ -40,6 +52,19 @@ declare namespace DragAndDrop {
         orientation: ORIENTATION;
         /** Whether to display drag indicators for each list item */
         showIndicator: boolean;
+        /** Default item aria-label template */
+        itemAriaLabelTemplate: string;
+        /** Default drag handle aria-label */
+        dragHandleAriaLabel: string;
+        /** Default grabbed announcement template */
+        grabbedAnnouncementTemplate: string;
+        /** Default moved announcement template */
+        movedAnnouncementTemplate: string;
+        /** Default dropped announcement template */
+        droppedAnnouncementTemplate: string;
+        /** Default cancelled announcement template */
+        cancelledAnnouncementTemplate: string;
     };
 }
 export default DragAndDrop;
+//# sourceMappingURL=DragAndDrop.d.ts.map

package/lib-esm/components/DragAndDrop/DragAndDrop.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DragAndDrop.d.ts","sourceRoot":"","sources":["../../../src/components/DragAndDrop/DragAndDrop.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,WAAW,EAAe,MAAM,SAAS,CAAC;AAEnD,KAAK,gBAAgB,GAAG;IACpB,qCAAqC;IACrC,WAAW,EAAE,WAAW,CAAC;IACzB,yBAAyB;IACzB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,kDAAkD;IAClD,aAAa,EAAE,OAAO,CAAC;IACvB,wHAAwH;IACxH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uCAAuC;IACvC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,+HAA+H;IAC/H,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,uEAAuE;IACvE,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,yEAAyE;IACzE,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,gDAAgD;IAChD,6BAA6B,CAAC,EAAE,MAAM,CAAC;CAC1C,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;AAwB/B;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,iBAAwB,WAAW,CAAC,KAAK,EAAE,gBAAgB,oDAiI1D;kBAjIuB,WAAW;;QAoI/B,qCAAqC;;QAErC,4DAA4D;;QAE5D,uCAAuC;;QAGvC,qCAAqC;;QAErC,4CAA4C;;QAG5C,0CAA0C;;QAE1C,4CAA4C;;QAE5C,8CAA8C;;;;eApJ1B,WAAW"}

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import DragItem from './DragItem';
@@ -11,6 +11,18 @@ const Container = styled.div `
     flex-wrap: wrap;
     flex-direction: ${(props) => (props.orientation === ORIENTATION.HORIZONTAL ? 'row' : 'column')};
 `;
+/** Visually hidden but accessible to screen readers */
+const VisuallyHidden = styled.div `
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+`;
 /**
  * A drag and drop container component that enables reordering of child elements.
  *
@@ -37,10 +49,37 @@ const Container = styled.div `
  * @returns {JSX.Element} A draggable container with reorderable items
  */
 export default function DragAndDrop(props) {
-    const { orientation, children, onDrop, showIndicator } = props;
+    const { orientation, children, onDrop, showIndicator, itemAriaLabelTemplate, dragHandleAriaLabel, grabbedAnnouncementTemplate, movedAnnouncementTemplate, droppedAnnouncementTemplate, cancelledAnnouncementTemplate, } = props;
     const [startIndex, setStartIndex] = useState(null);
+    const [originalIndex, setOriginalIndex] = useState(null);
     const [isDragging, setIsDragging] = useState(false);
     const [dragOver, setDragOver] = useState(null);
+    const [announcement, setAnnouncement] = useState('');
+    const childrenArray = React.Children.toArray(children);
+    const totalItems = childrenArray.length;
+    /**
+     * Replace placeholders in i18n templates
+     */
+    const replacePlaceholders = (template, data) => {
+        var _a, _b, _c, _d, _e, _f;
+        return template
+            .replace(/\{:position\}/g, String((_a = data.position) !== null && _a !== void 0 ? _a : ''))
+            .replace(/\{:grabKey\}/g, (_b = data.grabKey) !== null && _b !== void 0 ? _b : 'Space')
+            .replace(/\{:dropKey\}/g, (_c = data.dropKey) !== null && _c !== void 0 ? _c : 'Space')
+            .replace(/\{:altDropKey\}/g, (_d = data.altDropKey) !== null && _d !== void 0 ? _d : 'Enter')
+            .replace(/\{:cancelKey\}/g, (_e = data.cancelKey) !== null && _e !== void 0 ? _e : 'Escape')
+            .replace(/\{:moveKeys\}/g, (_f = data.moveKeys) !== null && _f !== void 0 ? _f : (orientation === ORIENTATION.VERTICAL ? 'Arrow Up/Down' : 'Arrow Left/Right'));
+    };
+    // i18n configuration object
+    const i18n = {
+        itemAriaLabelTemplate: itemAriaLabelTemplate,
+        dragHandleAriaLabel: dragHandleAriaLabel,
+        grabbedAnnouncementTemplate: grabbedAnnouncementTemplate,
+        movedAnnouncementTemplate: movedAnnouncementTemplate,
+        droppedAnnouncementTemplate: droppedAnnouncementTemplate,
+        cancelledAnnouncementTemplate: cancelledAnnouncementTemplate,
+        replacePlaceholders,
+    };
     /**
      * Drop handler invoked when a draggable item is released.
      * @param index
@@ -50,14 +89,57 @@ export default function DragAndDrop(props) {
             onDrop === null || onDrop === void 0 ? void 0 : onDrop(startIndex, index);
         }
         setStartIndex(null);
+        setOriginalIndex(null);
+        setIsDragging(false);
+    };
+    /**
+     * Cancel handler to restore item to original position
+     */
+    const cancel = () => {
+        if (originalIndex !== null && startIndex !== null && startIndex !== originalIndex) {
+            onDrop === null || onDrop === void 0 ? void 0 : onDrop(startIndex, originalIndex);
+        }
+        setStartIndex(null);
+        setOriginalIndex(null);
         setIsDragging(false);
     };
-    return (_jsx(DragContext.Provider, { value: { startIndex, setStartIndex, drop, isDragging, setIsDragging, setDragOver }, children: _jsx(Container, { orientation: orientation, children: React.Children.map(children, (child, index) => (_jsx(DragItem, { index: index, orientation: orientation, showIndicator: showIndicator, dragOver: dragOver, children: child }))) }) }));
+    /**
+     * Start grab handler to track original position
+     */
+    const startGrab = (index) => {
+        setStartIndex(index);
+        setOriginalIndex(index);
+        setIsDragging(true);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DragContext.Provider, { value: {
+                    startIndex,
+                    setStartIndex,
+                    drop,
+                    onDrop,
+                    cancel,
+                    startGrab,
+                    isDragging,
+                    setIsDragging,
+                    setDragOver,
+                    i18n,
+                }, children: _jsx(Container, { orientation: orientation, role: "list", children: React.Children.map(childrenArray, (child, index) => (_jsx(DragItem, { index: index, orientation: orientation, showIndicator: showIndicator, dragOver: dragOver, totalItems: totalItems, setAnnouncement: setAnnouncement, children: child }))) }) }), _jsx(VisuallyHidden, { role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement })] }));
 }
 DragAndDrop.defaultProps = {
     /** Orientation of the list layout */
     orientation: ORIENTATION.VERTICAL,
     /** Whether to display drag indicators for each list item */
     showIndicator: false,
+    /** Default item aria-label template */
+    itemAriaLabelTemplate: 'Item {:position}. Press {:grabKey} to grab, {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop',
+    /** Default drag handle aria-label */
+    dragHandleAriaLabel: 'Drag to reorder',
+    /** Default grabbed announcement template */
+    grabbedAnnouncementTemplate: 'Item {:position} grabbed. Use {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop, {:cancelKey} to cancel',
+    /** Default moved announcement template */
+    movedAnnouncementTemplate: 'Item moved to position {:position}',
+    /** Default dropped announcement template */
+    droppedAnnouncementTemplate: 'Item dropped at position {:position}',
+    /** Default cancelled announcement template */
+    cancelledAnnouncementTemplate: 'Drag cancelled, item restored to original position',
 };
 //# sourceMappingURL=DragAndDrop.js.map

package/lib-esm/components/DragAndDrop/DragAndDrop.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DragAndDrop.js","sourceRoot":"","sources":["../../../src/components/DragAndDrop/DragAndDrop.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAWnD,0BAA0B;AAC1B,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAA8B;;;;;sBAKpC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,WAAW,KAAK,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;CACjG,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAuB;IACvD,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IAC/D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAS,IAAI,CAAC,CAAC;IAC3D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC7D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAS,IAAI,CAAC,CAAC;IAEvD;;;OAGG;IACH,MAAM,IAAI,GAAG,CAAC,KAAa,EAAE,EAAE;QAC3B,IAAI,UAAU,KAAK,IAAI,EAAE,CAAC;YACtB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,UAAU,EAAE,KAAK,CAAC,CAAC;QAChC,CAAC;QACD,aAAa,CAAC,IAAI,CAAC,CAAC;QACpB,aAAa,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,WAAW,CAAC,QAAQ,IACjB,KAAK,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,YAElF,KAAC,SAAS,IAAC,WAAW,EAAE,WAAW,YAC9B,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,KAAC,QAAQ,IACL,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,YAEjB,KAAK,GACC,CACd,CAAC,GACM,GACO,CAC1B,CAAC;AACN,CAAC;AAED,WAAW,CAAC,YAAY,GAAG;IACvB,qCAAqC;IACrC,WAAW,EAAE,WAAW,CAAC,QAAQ;IACjC,4DAA4D;IAC5D,aAAa,EAAE,KAAK;CACvB,CAAC"}
1	+ {"version":3,"file":"DragAndDrop.js","sourceRoot":"","sources":["../../../src/components/DragAndDrop/DragAndDrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { PropsWithChildren, useState } from 'react';\nimport styled from '@emotion/styled';\nimport DragItem from './DragItem';\nimport { ORIENTATION, DragContext } from './types';\n\ntype DragAndDropProps = {\n /** Orientation of the list layout /\n orientation: ORIENTATION;\n /* Drop event handler /\n onDrop: (start: number, end: number) => void;\n /* Shows drag indicator against each list item /\n showIndicator: boolean;\n /* i18n: Template for item aria-label. Placeholders: {:position}, {:grabKey}, {:moveKeys}, {:dropKey}, {:altDropKey} /\n itemAriaLabelTemplate?: string;\n /* i18n: Aria label for drag handle /\n dragHandleAriaLabel?: string;\n /* i18n: Template for grabbed announcement. Placeholders: {:position}, {:moveKeys}, {:dropKey}, {:altDropKey}, {:cancelKey} /\n grabbedAnnouncementTemplate?: string;\n /* i18n: Template for moved announcement. Placeholders: {:position} /\n movedAnnouncementTemplate?: string;\n /* i18n: Template for dropped announcement. Placeholders: {:position} /\n droppedAnnouncementTemplate?: string;\n /* i18n: Template for cancelled announcement /\n cancelledAnnouncementTemplate?: string;\n} & PropsWithChildren<unknown>;\n\n/* Container Component /\nconst Container = styled.div<{ orientation: ORIENTATION }>`\n flex: 1;\n display: flex;\n position: relative;\n flex-wrap: wrap;\n flex-direction: ${(props) => (props.orientation === ORIENTATION.HORIZONTAL ? 'row' : 'column')};\n`;\n\n/* Visually hidden but accessible to screen readers /\nconst VisuallyHidden = styled.div`\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\n/\n A drag and drop container component that enables reordering of child elements.\n \n @component\n * @example\n * ```tsx\n * <DragAndDrop\n * orientation={ORIENTATION.VERTICAL}\n * onDrop={(start, end) => handleReorder(start, end)}\n * showIndicator={true}\n * >\n * <div>Item 1</div>\n * <div>Item 2</div>\n * <div>Item 3</div>\n * </DragAndDrop>\n * ```\n \n @param {DragAndDropProps} props - The component props\n * @param {ORIENTATION} props.orientation - Determines the layout direction (horizontal or vertical). Defaults to VERTICAL.\n * @param {(start: number, end: number) => void} props.onDrop - Callback fired when an item is dropped, receives the start and end indices\n * @param {boolean} props.showIndicator - Whether to display drag indicators for each list item. Defaults to false.\n * @param {React.ReactNode} props.children - Child elements to be rendered as draggable items\n \n @returns {JSX.Element} A draggable container with reorderable items\n /\nexport default function DragAndDrop(props: DragAndDropProps) {\n const {\n orientation,\n children,\n onDrop,\n showIndicator,\n itemAriaLabelTemplate,\n dragHandleAriaLabel,\n grabbedAnnouncementTemplate,\n movedAnnouncementTemplate,\n droppedAnnouncementTemplate,\n cancelledAnnouncementTemplate,\n } = props;\n const [startIndex, setStartIndex] = useState<number>(null);\n const [originalIndex, setOriginalIndex] = useState<number>(null);\n const [isDragging, setIsDragging] = useState<boolean>(false);\n const [dragOver, setDragOver] = useState<number>(null);\n const [announcement, setAnnouncement] = useState('');\n const childrenArray = React.Children.toArray(children);\n const totalItems = childrenArray.length;\n\n /\n Replace placeholders in i18n templates\n /\n const replacePlaceholders = (\n template: string,\n data: {\n position?: number;\n grabKey?: string;\n dropKey?: string;\n altDropKey?: string;\n cancelKey?: string;\n moveKeys?: string;\n },\n ): string => {\n return template\n .replace(/\\{:position\\}/g, String(data.position ?? ''))\n .replace(/\\{:grabKey\\}/g, data.grabKey ?? 'Space')\n .replace(/\\{:dropKey\\}/g, data.dropKey ?? 'Space')\n .replace(/\\{:altDropKey\\}/g, data.altDropKey ?? 'Enter')\n .replace(/\\{:cancelKey\\}/g, data.cancelKey ?? 'Escape')\n .replace(\n /\\{:moveKeys\\}/g,\n data.moveKeys ??\n (orientation === ORIENTATION.VERTICAL ? 'Arrow Up/Down' : 'Arrow Left/Right'),\n );\n };\n\n // i18n configuration object\n const i18n = {\n itemAriaLabelTemplate: itemAriaLabelTemplate!,\n dragHandleAriaLabel: dragHandleAriaLabel!,\n grabbedAnnouncementTemplate: grabbedAnnouncementTemplate!,\n movedAnnouncementTemplate: movedAnnouncementTemplate!,\n droppedAnnouncementTemplate: droppedAnnouncementTemplate!,\n cancelledAnnouncementTemplate: cancelledAnnouncementTemplate!,\n replacePlaceholders,\n };\n\n /\n Drop handler invoked when a draggable item is released.\n * @param index\n /\n const drop = (index: number) => {\n if (startIndex !== null) {\n onDrop?.(startIndex, index);\n }\n setStartIndex(null);\n setOriginalIndex(null);\n setIsDragging(false);\n };\n\n /\n Cancel handler to restore item to original position\n /\n const cancel = () => {\n if (originalIndex !== null && startIndex !== null && startIndex !== originalIndex) {\n onDrop?.(startIndex, originalIndex);\n }\n setStartIndex(null);\n setOriginalIndex(null);\n setIsDragging(false);\n };\n\n /\n Start grab handler to track original position\n /\n const startGrab = (index: number) => {\n setStartIndex(index);\n setOriginalIndex(index);\n setIsDragging(true);\n };\n\n return (\n <>\n <DragContext.Provider\n value={{\n startIndex,\n setStartIndex,\n drop,\n onDrop,\n cancel,\n startGrab,\n isDragging,\n setIsDragging,\n setDragOver,\n i18n,\n }}\n >\n <Container orientation={orientation} role=\"list\">\n {React.Children.map(childrenArray, (child, index) => (\n <DragItem\n index={index}\n orientation={orientation}\n showIndicator={showIndicator}\n dragOver={dragOver}\n totalItems={totalItems}\n setAnnouncement={setAnnouncement}\n >\n {child}\n </DragItem>\n ))}\n </Container>\n </DragContext.Provider>\n <VisuallyHidden role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {announcement}\n </VisuallyHidden>\n </>\n );\n}\n\nDragAndDrop.defaultProps = {\n /* Orientation of the list layout /\n orientation: ORIENTATION.VERTICAL,\n /* Whether to display drag indicators for each list item /\n showIndicator: false,\n /* Default item aria-label template /\n itemAriaLabelTemplate:\n 'Item {:position}. Press {:grabKey} to grab, {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop',\n /* Default drag handle aria-label /\n dragHandleAriaLabel: 'Drag to reorder',\n /* Default grabbed announcement template /\n grabbedAnnouncementTemplate:\n 'Item {:position} grabbed. Use {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop, {:cancelKey} to cancel',\n /* Default moved announcement template /\n movedAnnouncementTemplate: 'Item moved to position {:position}',\n /* Default dropped announcement template /\n droppedAnnouncementTemplate: 'Item dropped at position {:position}',\n /* Default cancelled announcement template */\n cancelledAnnouncementTemplate: 'Drag cancelled, item restored to original position',\n};\n"]}

package/lib-esm/components/DragAndDrop/DragItem.d.ts CHANGED Viewed

@@ -9,6 +9,10 @@ interface DragItemProps {
     showIndicator: boolean;
     /** The index of the item currently being dragged over */
     dragOver: number;
+    /** Total number of items in the list */
+    totalItems: number;
+    /** Callback to set announcement for screen readers */
+    setAnnouncement: (message: string) => void;
 }
 /**
  * A draggable item component that supports both mouse and touch interactions for drag-and-drop functionality.
@@ -44,3 +48,4 @@ interface DragItemProps {
  */
 export default function DragItem(props: PropsWithChildren<DragItemProps>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=DragItem.d.ts.map

package/lib-esm/components/DragAndDrop/DragItem.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DragItem.d.ts","sourceRoot":"","sources":["../../../src/components/DragAndDrop/DragItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,iBAAiB,EAKpB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,WAAW,EAAe,MAAM,SAAS,CAAC;AAEnD,UAAU,aAAa;IACnB,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,WAAW,EAAE,WAAW,CAAC;IACzB,0FAA0F;IAC1F,aAAa,EAAE,OAAO,CAAC;IACvB,yDAAyD;IACzD,QAAQ,EAAE,MAAM,CAAC;IACjB,wCAAwC;IACxC,UAAU,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AA6DD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,iBAAiB,CAAC,aAAa,CAAC,oDA2PvE"}