no-frills-ui 0.0.14-alpha.7 → 0.0.14-rc.0
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.
- package/README.md +2 -3
- package/dist/index.js +926 -795
- package/dist/index.js.map +1 -1
- package/lib-esm/components/Accordion/Accordion.d.ts +9 -13
- package/lib-esm/components/Accordion/Accordion.js +4 -10
- package/lib-esm/components/Accordion/Accordion.js.map +1 -0
- package/lib-esm/components/Accordion/AccordionStep.d.ts +22 -22
- package/lib-esm/components/Accordion/AccordionStep.js +41 -35
- package/lib-esm/components/Accordion/AccordionStep.js.map +1 -0
- package/lib-esm/components/Badge/Badge.d.ts +13 -16
- package/lib-esm/components/Badge/Badge.js +12 -21
- package/lib-esm/components/Badge/Badge.js.map +1 -0
- package/lib-esm/components/Button/ActionButton.d.ts +9 -5
- package/lib-esm/components/Button/ActionButton.js +20 -4
- package/lib-esm/components/Button/ActionButton.js.map +1 -0
- package/lib-esm/components/Button/Button.d.ts +9 -5
- package/lib-esm/components/Button/Button.js +19 -6
- package/lib-esm/components/Button/Button.js.map +1 -0
- package/lib-esm/components/Button/IconButton.d.ts +9 -5
- package/lib-esm/components/Button/IconButton.js +20 -4
- package/lib-esm/components/Button/IconButton.js.map +1 -0
- package/lib-esm/components/Button/LinkButton.d.ts +9 -5
- package/lib-esm/components/Button/LinkButton.js +20 -4
- package/lib-esm/components/Button/LinkButton.js.map +1 -0
- package/lib-esm/components/Button/RaisedButton.d.ts +9 -5
- package/lib-esm/components/Button/RaisedButton.js +20 -4
- package/lib-esm/components/Button/RaisedButton.js.map +1 -0
- package/lib-esm/components/Card/Card.d.ts +4 -6
- package/lib-esm/components/Card/Card.js +18 -4
- package/lib-esm/components/Card/Card.js.map +1 -0
- package/lib-esm/components/Chip/Chip.d.ts +2 -2
- package/lib-esm/components/Chip/Chip.js +17 -10
- package/lib-esm/components/Chip/Chip.js.map +1 -0
- package/lib-esm/components/ChipInput/ChipInput.d.ts +28 -39
- package/lib-esm/components/ChipInput/ChipInput.js +39 -39
- package/lib-esm/components/ChipInput/ChipInput.js.map +1 -0
- package/lib-esm/components/Dialog/AlertDialog.d.ts +11 -12
- package/lib-esm/components/Dialog/AlertDialog.js +5 -11
- package/lib-esm/components/Dialog/AlertDialog.js.map +1 -0
- package/lib-esm/components/Dialog/ConfirmDialog.d.ts +13 -14
- package/lib-esm/components/Dialog/ConfirmDialog.js +5 -12
- package/lib-esm/components/Dialog/ConfirmDialog.js.map +1 -0
- package/lib-esm/components/Dialog/Dialog.d.ts +8 -14
- package/lib-esm/components/Dialog/Dialog.js +13 -10
- package/lib-esm/components/Dialog/Dialog.js.map +1 -0
- package/lib-esm/components/Dialog/PromptDialog.d.ts +18 -19
- package/lib-esm/components/Dialog/PromptDialog.js +14 -21
- package/lib-esm/components/Dialog/PromptDialog.js.map +1 -0
- package/lib-esm/components/DragAndDrop/DragAndDrop.d.ts +37 -59
- package/lib-esm/components/DragAndDrop/DragAndDrop.js +26 -28
- package/lib-esm/components/DragAndDrop/DragAndDrop.js.map +1 -0
- package/lib-esm/components/DragAndDrop/DragItem.d.ts +2 -2
- package/lib-esm/components/DragAndDrop/DragItem.js +43 -40
- package/lib-esm/components/DragAndDrop/DragItem.js.map +1 -0
- package/lib-esm/components/DragAndDrop/types.d.ts +3 -3
- package/lib-esm/components/DragAndDrop/types.js +1 -0
- package/lib-esm/components/DragAndDrop/types.js.map +1 -0
- package/lib-esm/components/Drawer/Drawer.d.ts +24 -31
- package/lib-esm/components/Drawer/Drawer.js +50 -45
- package/lib-esm/components/Drawer/Drawer.js.map +1 -0
- package/lib-esm/components/Groups/Group.d.ts +6 -8
- package/lib-esm/components/Groups/Group.js +15 -12
- package/lib-esm/components/Groups/Group.js.map +1 -0
- package/lib-esm/components/Groups/GroupLabel.js +2 -1
- package/lib-esm/components/Groups/GroupLabel.js.map +1 -0
- package/lib-esm/components/Input/Checkbox.d.ts +12 -15
- package/lib-esm/components/Input/Checkbox.js +34 -29
- package/lib-esm/components/Input/Checkbox.js.map +1 -0
- package/lib-esm/components/Input/Dropdown.d.ts +8 -18
- package/lib-esm/components/Input/Dropdown.js +44 -18
- package/lib-esm/components/Input/Dropdown.js.map +1 -0
- package/lib-esm/components/Input/Input.d.ts +8 -3
- package/lib-esm/components/Input/Input.js +24 -22
- package/lib-esm/components/Input/Input.js.map +1 -0
- package/lib-esm/components/Input/Radio.d.ts +4 -8
- package/lib-esm/components/Input/Radio.js +20 -16
- package/lib-esm/components/Input/Radio.js.map +1 -0
- package/lib-esm/components/Input/RadioButton.d.ts +4 -8
- package/lib-esm/components/Input/RadioButton.js +19 -15
- package/lib-esm/components/Input/RadioButton.js.map +1 -0
- package/lib-esm/components/Input/Select.d.ts +6 -13
- package/lib-esm/components/Input/Select.js +26 -22
- package/lib-esm/components/Input/Select.js.map +1 -0
- package/lib-esm/components/Input/TextArea.d.ts +6 -13
- package/lib-esm/components/Input/TextArea.js +33 -27
- package/lib-esm/components/Input/TextArea.js.map +1 -0
- package/lib-esm/components/Input/Toggle.d.ts +4 -9
- package/lib-esm/components/Input/Toggle.js +15 -12
- package/lib-esm/components/Input/Toggle.js.map +1 -0
- package/lib-esm/components/Menu/Menu.d.ts +4 -14
- package/lib-esm/components/Menu/Menu.js +26 -17
- package/lib-esm/components/Menu/Menu.js.map +1 -0
- package/lib-esm/components/Menu/MenuContext.d.ts +4 -4
- package/lib-esm/components/Menu/MenuContext.js +2 -0
- package/lib-esm/components/Menu/MenuContext.js.map +1 -0
- package/lib-esm/components/Menu/MenuItem.d.ts +10 -4
- package/lib-esm/components/Menu/MenuItem.js +21 -6
- package/lib-esm/components/Menu/MenuItem.js.map +1 -0
- package/lib-esm/components/Modal/Modal.d.ts +17 -23
- package/lib-esm/components/Modal/Modal.js +38 -34
- package/lib-esm/components/Modal/Modal.js.map +1 -0
- package/lib-esm/components/Notification/Notification.d.ts +39 -34
- package/lib-esm/components/Notification/Notification.js +17 -39
- package/lib-esm/components/Notification/Notification.js.map +1 -0
- package/lib-esm/components/Notification/NotificationManager.d.ts +4 -4
- package/lib-esm/components/Notification/NotificationManager.js +19 -14
- package/lib-esm/components/Notification/NotificationManager.js.map +1 -0
- package/lib-esm/components/Notification/index.d.ts +1 -0
- package/lib-esm/components/Notification/style.d.ts +2 -3
- package/lib-esm/components/Notification/style.js +21 -20
- package/lib-esm/components/Notification/style.js.map +1 -0
- package/lib-esm/components/Notification/types.js +1 -0
- package/lib-esm/components/Notification/types.js.map +1 -0
- package/lib-esm/components/Popover/Popover.d.ts +21 -20
- package/lib-esm/components/Popover/Popover.js +44 -45
- package/lib-esm/components/Popover/Popover.js.map +1 -0
- package/lib-esm/components/Spinner/Spinner.d.ts +14 -15
- package/lib-esm/components/Spinner/Spinner.js +14 -14
- package/lib-esm/components/Spinner/Spinner.js.map +1 -0
- package/lib-esm/components/Stepper/Step.d.ts +15 -12
- package/lib-esm/components/Stepper/Step.js +12 -9
- package/lib-esm/components/Stepper/Step.js.map +1 -0
- package/lib-esm/components/Stepper/Stepper.d.ts +11 -17
- package/lib-esm/components/Stepper/Stepper.js +30 -27
- package/lib-esm/components/Stepper/Stepper.js.map +1 -0
- package/lib-esm/components/Tabs/Tab.d.ts +10 -16
- package/lib-esm/components/Tabs/Tab.js +1 -8
- package/lib-esm/components/Tabs/Tab.js.map +1 -0
- package/lib-esm/components/Tabs/Tabs.d.ts +11 -22
- package/lib-esm/components/Tabs/Tabs.js +43 -34
- package/lib-esm/components/Tabs/Tabs.js.map +1 -0
- package/lib-esm/components/Toast/Toast.d.ts +7 -7
- package/lib-esm/components/Toast/Toast.js +17 -15
- package/lib-esm/components/Toast/Toast.js.map +1 -0
- package/lib-esm/components/Toast/ToastStory.d.ts +21 -24
- package/lib-esm/components/Tooltip/Tooltip.d.ts +11 -14
- package/lib-esm/components/Tooltip/Tooltip.js +14 -23
- package/lib-esm/components/Tooltip/Tooltip.js.map +1 -0
- package/lib-esm/icons/CheckCircle.js +3 -2
- package/lib-esm/icons/CheckCircle.js.map +1 -0
- package/lib-esm/icons/Close.js +1 -0
- package/lib-esm/icons/Close.js.map +1 -0
- package/lib-esm/icons/DragIndicator.js +1 -0
- package/lib-esm/icons/DragIndicator.js.map +1 -0
- package/lib-esm/icons/ErrorOutline.js +3 -2
- package/lib-esm/icons/ErrorOutline.js.map +1 -0
- package/lib-esm/icons/ExpandMore.js +1 -0
- package/lib-esm/icons/ExpandMore.js.map +1 -0
- package/lib-esm/icons/FiberManualRecord.js +1 -0
- package/lib-esm/icons/FiberManualRecord.js.map +1 -0
- package/lib-esm/icons/Info.js +3 -2
- package/lib-esm/icons/Info.js.map +1 -0
- package/lib-esm/icons/ReportProblem.js +3 -2
- package/lib-esm/icons/ReportProblem.js.map +1 -0
- package/lib-esm/index.js +43 -0
- package/lib-esm/index.js.map +1 -0
- package/lib-esm/shared/LayerManager.d.ts +5 -4
- package/lib-esm/shared/LayerManager.js +125 -112
- package/lib-esm/shared/LayerManager.js.map +1 -0
- package/lib-esm/shared/constants.js +1 -0
- package/lib-esm/shared/constants.js.map +1 -0
- package/lib-esm/shared/styles.js +9 -8
- package/lib-esm/shared/styles.js.map +1 -0
- package/package.json +66 -31
- package/lib-esm/components/index.js +0 -42
|
@@ -9,7 +9,7 @@ import CheckCircle$3 from '../../icons/ErrorOutline.js';
|
|
|
9
9
|
import ActionButton from '../Button/ActionButton.js';
|
|
10
10
|
import Close from '../../icons/Close.js';
|
|
11
11
|
|
|
12
|
-
const DEFAULT_DURATION = 5000;
|
|
12
|
+
const DEFAULT_DURATION$1 = 5000;
|
|
13
13
|
/**
|
|
14
14
|
* Notification Manager class
|
|
15
15
|
*/ class NotificationManager extends React.Component {
|
|
@@ -106,6 +106,7 @@ const DEFAULT_DURATION = 5000;
|
|
|
106
106
|
*
|
|
107
107
|
* @param id
|
|
108
108
|
*/ this.remove = (id)=>{
|
|
109
|
+
if (!id) return;
|
|
109
110
|
// Trigger leaving animation.
|
|
110
111
|
this.setState({
|
|
111
112
|
notices: this.state.notices.map((notice)=>({
|
|
@@ -150,22 +151,22 @@ const DEFAULT_DURATION = 5000;
|
|
|
150
151
|
const type = notice.type || NOTIFICATION_TYPE.INFO;
|
|
151
152
|
const isUrgent = type === NOTIFICATION_TYPE.WARNING || type === NOTIFICATION_TYPE.DANGER;
|
|
152
153
|
// Add notice to the top of stack.
|
|
153
|
-
this.setState({
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
154
|
+
this.setState((prevState)=>({
|
|
155
|
+
notices: [
|
|
156
|
+
{
|
|
157
|
+
...notice,
|
|
158
|
+
id
|
|
159
|
+
},
|
|
160
|
+
...prevState.notices
|
|
161
|
+
]
|
|
162
|
+
}), ()=>{
|
|
162
163
|
// Update live region after state update
|
|
163
164
|
const announcement = `${notice.title} ${notice.description}`;
|
|
164
165
|
this.updateLiveRegion(announcement, isUrgent);
|
|
165
166
|
});
|
|
166
167
|
// set timeout for closing the notification.
|
|
167
168
|
if (!notice.sticky) {
|
|
168
|
-
this.timeouts[id] = setTimeout(()=>this.remove(id), notice.duration || DEFAULT_DURATION);
|
|
169
|
+
this.timeouts[id] = setTimeout(()=>this.remove(id), notice.duration || DEFAULT_DURATION$1);
|
|
169
170
|
}
|
|
170
171
|
// Add id to the set.
|
|
171
172
|
this.set.add(id);
|
|
@@ -197,18 +198,22 @@ const DEFAULT_DURATION = 5000;
|
|
|
197
198
|
*
|
|
198
199
|
* @param id
|
|
199
200
|
*/ this.pause = (id)=>()=>{
|
|
200
|
-
|
|
201
|
+
if (id && this.timeouts[id]) {
|
|
202
|
+
clearTimeout(this.timeouts[id]);
|
|
203
|
+
delete this.timeouts[id];
|
|
204
|
+
}
|
|
201
205
|
}, /**
|
|
202
206
|
* Restart the removal of notification.
|
|
203
207
|
*
|
|
204
208
|
* @param id
|
|
205
209
|
*/ this.resume = (id)=>()=>{
|
|
206
210
|
const notice = this.state.notices.find((notice)=>notice.id === id);
|
|
207
|
-
if (!notice.
|
|
208
|
-
this.timeouts[id] = setTimeout(()=>this.remove(id), DEFAULT_DURATION);
|
|
211
|
+
if (!notice?.sticky && id && !this.timeouts[id]) {
|
|
212
|
+
this.timeouts[id] = setTimeout(()=>this.remove(id), DEFAULT_DURATION$1);
|
|
209
213
|
}
|
|
210
214
|
};
|
|
211
215
|
}
|
|
212
216
|
}
|
|
213
217
|
|
|
214
218
|
export { NotificationManager as default };
|
|
219
|
+
//# sourceMappingURL=NotificationManager.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NotificationManager.js","sources":["../../../src/components/Notification/NotificationManager.tsx"],"sourcesContent":["import React from 'react';\nimport { Close, Info, ReportProblem, ErrorOutline, CheckCircle } from '../../icons';\nimport { ActionButton } from '../Button';\nimport {\n Container,\n Notice,\n Title,\n IconContainer,\n FillParent,\n Body,\n CloseButton,\n Footer,\n VisuallyHidden,\n} from './style';\nimport { NOTIFICATION_POSITION, NOTIFICATION_TYPE, NotificationOptions } from './types';\n\ninterface NotificationManagerProps {\n // Notification Position\n position: NOTIFICATION_POSITION;\n // Callback for when stack is emptied\n onEmpty: () => void;\n // Aria label for the notification list\n ariaLabel?: string;\n}\n\n// Notice prop\ninterface NoticeProp extends NotificationOptions {\n leaving?: boolean;\n}\n\n// Manager state\ninterface NotificationManagerState {\n notices: NoticeProp[];\n}\n\ntype timeouts = {\n [id: string]: NodeJS.Timeout;\n};\n\nconst DEFAULT_DURATION = 5000;\n\n/**\n * Notification Manager class\n */\nclass NotificationManager extends React.Component<\n NotificationManagerProps,\n NotificationManagerState\n> {\n state: NotificationManagerState = {\n notices: [],\n };\n\n // bookkeeping for timeouts\n private timeouts: timeouts = {};\n\n // Set of notification ids\n private set = new Set<string>();\n\n // Refs for live regions to ensure they exist before updates\n private politeRegionRef = React.createRef<HTMLDivElement>();\n private assertiveRegionRef = React.createRef<HTMLDivElement>();\n\n /**\n * Removes a notification from stack if the notification with the given id is found.\n *\n * @param id\n */\n public remove = (id?: string) => {\n if (!id) return;\n\n // Trigger leaving animation.\n this.setState({\n notices: this.state.notices.map((notice) => ({\n ...notice,\n leaving: notice.id === id ? true : notice.leaving,\n })),\n });\n this.set.delete(id);\n\n // Remove notification on animation completion.\n setTimeout(() => {\n const notice = this.state.notices.find((notice) => notice.id === id);\n if (notice) {\n // call close callback, ignore any errors in callback.\n if (notice.onClose) {\n try {\n notice.onClose();\n } catch (e: unknown) {\n console.warn('Error in notification close callback', (e as Error).message);\n }\n }\n\n // Remove the notification\n this.setState(\n {\n notices: this.state.notices.filter((notice) => notice.id !== id),\n },\n () => {\n // Check if the stack is empty and then call the\n // empty callback function.\n if (this.state.notices.length === 0) {\n this.props.onEmpty();\n }\n },\n );\n }\n }, 550);\n };\n\n /**\n * Adds a notification to stack.\n *\n * @param notice\n */\n public add = async (notice: NotificationOptions) => {\n // Generate unique id if not provided.\n const id = notice.id || (Math.random() * 10 ** 7).toFixed(0);\n\n // De-dupe on id\n if (!this.set.has(id)) {\n const type = notice.type || NOTIFICATION_TYPE.INFO;\n const isUrgent =\n type === NOTIFICATION_TYPE.WARNING || type === NOTIFICATION_TYPE.DANGER;\n\n // Add notice to the top of stack.\n this.setState(\n (prevState) => ({\n notices: [\n {\n ...notice,\n id,\n },\n ...prevState.notices,\n ],\n }),\n () => {\n // Update live region after state update\n const announcement = `${notice.title} ${notice.description}`;\n this.updateLiveRegion(announcement, isUrgent);\n },\n );\n\n // set timeout for closing the notification.\n if (!notice.sticky) {\n this.timeouts[id] = setTimeout(\n () => this.remove(id),\n notice.duration || DEFAULT_DURATION,\n );\n }\n\n // Add id to the set.\n this.set.add(id);\n }\n\n return id;\n };\n\n /**\n * Update live region content with clear-then-set pattern for reliable VoiceOver announcements.\n *\n * @param content - The text content to announce\n * @param isAssertive - Whether to use assertive (alert) or polite (log) live region\n */\n private updateLiveRegion = (content: string, isAssertive: boolean) => {\n const region = isAssertive ? this.assertiveRegionRef.current : this.politeRegionRef.current;\n\n if (region) {\n // Add content after delay\n setTimeout(() => {\n if (region) {\n region.textContent = content;\n }\n }, 150);\n }\n };\n\n /**\n * Handler for close button click.\n *\n * @param id\n */\n public closeClickHandler = (id?: string) => () => {\n this.remove(id);\n };\n\n /**\n * Pause notification when user is hovering over it.\n *\n * @param id\n */\n public pause = (id?: string) => () => {\n if (id && this.timeouts[id]) {\n clearTimeout(this.timeouts[id]);\n delete this.timeouts[id];\n }\n };\n\n /**\n * Restart the removal of notification.\n *\n * @param id\n */\n public resume = (id?: string) => () => {\n const notice = this.state.notices.find((notice) => notice.id === id);\n if (!notice?.sticky && id && !this.timeouts[id]) {\n this.timeouts[id] = setTimeout(() => this.remove(id), DEFAULT_DURATION);\n }\n };\n\n /**\n * Clean up all pending timeouts when component unmounts\n */\n componentWillUnmount() {\n // Clear all pending timeouts\n Object.keys(this.timeouts).forEach((id) => {\n clearTimeout(this.timeouts[id]);\n });\n this.timeouts = {};\n this.set.clear();\n }\n\n render() {\n return (\n <Container position={this.props.position}>\n {/* Polite live region - uses role=\"log\" for better VoiceOver compatibility */}\n <VisuallyHidden\n ref={this.politeRegionRef}\n role=\"log\"\n aria-live=\"polite\"\n aria-atomic=\"false\"\n aria-relevant=\"additions text\"\n />\n\n {/* Assertive live region - pre-rendered and persistent */}\n <VisuallyHidden\n ref={this.assertiveRegionRef}\n role=\"alert\"\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n />\n\n {/* Visual notifications with list semantics */}\n <div role=\"list\" aria-label={this.props.ariaLabel}>\n {this.state.notices.map((notice) => {\n const {\n id,\n title,\n description,\n leaving,\n type = NOTIFICATION_TYPE.INFO,\n buttonText,\n buttonClick,\n closeButtonAriaLabel,\n } = notice;\n\n return (\n <Notice\n key={id}\n {...notice}\n position={this.props.position}\n className={leaving ? 'leave' : ''}\n onMouseEnter={this.pause(id)}\n onMouseLeave={this.resume(id)}\n role=\"listitem\"\n >\n <IconContainer type={type} aria-hidden=\"true\">\n {type === NOTIFICATION_TYPE.INFO && <Info />}\n {type === NOTIFICATION_TYPE.SUCCESS && <CheckCircle />}\n {type === NOTIFICATION_TYPE.WARNING && <ReportProblem />}\n {type === NOTIFICATION_TYPE.DANGER && <ErrorOutline />}\n </IconContainer>\n <FillParent>\n <Title type={type}>{title}</Title>\n <Body>{description}</Body>\n {buttonText && (\n <Footer>\n <ActionButton\n onClick={() => {\n buttonClick?.();\n }}\n >\n {buttonText}\n </ActionButton>\n </Footer>\n )}\n </FillParent>\n <CloseButton\n onClick={this.closeClickHandler(id)}\n aria-label={closeButtonAriaLabel || 'Close notification'}\n tabIndex={0}\n >\n <Close />\n </CloseButton>\n </Notice>\n );\n })}\n </div>\n </Container>\n );\n }\n}\n\nexport default NotificationManager;\n"],"names":["DEFAULT_DURATION","NotificationManager","React","Component","componentWillUnmount","Object","keys","timeouts","forEach","id","clearTimeout","set","clear","render","_jsxs","Container","position","props","_jsx","VisuallyHidden","ref","politeRegionRef","role","aria-live","aria-atomic","aria-relevant","assertiveRegionRef","div","aria-label","ariaLabel","state","notices","map","notice","title","description","leaving","type","NOTIFICATION_TYPE","INFO","buttonText","buttonClick","closeButtonAriaLabel","Notice","className","onMouseEnter","pause","onMouseLeave","resume","IconContainer","aria-hidden","Info","SUCCESS","CheckCircle","WARNING","ReportProblem","DANGER","ErrorOutline","FillParent","Title","Body","Footer","ActionButton","onClick","CloseButton","closeClickHandler","tabIndex","Close","Set","createRef","remove","setState","delete","setTimeout","find","onClose","e","console","warn","message","filter","length","onEmpty","add","Math","random","toFixed","has","isUrgent","prevState","announcement","updateLiveRegion","sticky","duration","content","isAssertive","region","current","textContent"],"mappings":"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"}
|
|
@@ -9,9 +9,8 @@ export declare const Container: import("@emotion/styled").StyledComponent<{
|
|
|
9
9
|
position: NOTIFICATION_POSITION;
|
|
10
10
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
11
11
|
export declare const Notice: import("@emotion/styled").StyledComponent<{
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
} & import("../Card/Card").CardExtraProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
|
|
12
|
+
elevated?: boolean;
|
|
13
|
+
} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement> & {
|
|
15
14
|
theme?: import("@emotion/react").Theme;
|
|
16
15
|
} & NoticeProp, {}, {}>;
|
|
17
16
|
export declare const Title: import("@emotion/styled").StyledComponent<{
|
|
@@ -57,41 +57,42 @@ const getTypeStyle = (type)=>{
|
|
|
57
57
|
return `color: ${getThemeValue(THEME_NAME.WARNING)}`;
|
|
58
58
|
}
|
|
59
59
|
};
|
|
60
|
-
const Container = /*#__PURE__*/ styled("div", {
|
|
61
|
-
target: "
|
|
60
|
+
const Container$2 = /*#__PURE__*/ styled("div", {
|
|
61
|
+
target: "e10n1sw0",
|
|
62
62
|
label: "Container"
|
|
63
|
-
})("display:flex;flex-direction:", (props)=>props.position === NOTIFICATION_POSITION.TOP_LEFT || props.position === NOTIFICATION_POSITION.TOP_RIGHT ? 'column' : 'column-reverse', ";"
|
|
63
|
+
})("display:flex;flex-direction:", (props)=>props.position === NOTIFICATION_POSITION.TOP_LEFT || props.position === NOTIFICATION_POSITION.TOP_RIGHT ? 'column' : 'column-reverse', ";");
|
|
64
64
|
const Notice = /*#__PURE__*/ styled(Card, {
|
|
65
|
-
target: "
|
|
65
|
+
target: "e10n1sw1",
|
|
66
66
|
label: "Notice"
|
|
67
|
-
})("position:relative;border-radius:3px;border-left:4px solid ", (props)=>getBorderColor(props.type), ";width:300px;display:flex;padding:0 5px 5px 0;overflow:hidden;animation:", (props)=>getEntryAnimation(props.position), " 0.6s ease;& svg{fill:currentColor;vertical-align:middle;width:20px;height:20px;}&.leave{animation:", (props)=>getExitAnimation(props.position), " 0.6s;}@keyframes in-right{from{transform:translateX(100%);max-height:0;opacity:0;}to{transform:translateX(0%);max-height:150px;opacity:1;}}@keyframes out-right{to{transform:translateX(100%);max-height:0;opacity:0;}from{transform:translateX(0%);max-height:100px;opacity:1;}}@keyframes in-left{from{transform:translateX(-100%);max-height:0;opacity:0;}to{transform:translateX(0%);max-height:150px;opacity:1;}}@keyframes out-left{to{transform:translateX(-100%);max-height:0;opacity:0;}from{transform:translateX(0%);max-height:100px;opacity:1;}}"
|
|
67
|
+
})("position:relative;border-radius:3px;border-left:4px solid ", (props)=>getBorderColor(props.type), ";width:300px;display:flex;padding:0 5px 5px 0;overflow:hidden;animation:", (props)=>getEntryAnimation(props.position), " 0.6s ease;& svg{fill:currentColor;vertical-align:middle;width:20px;height:20px;}&.leave{animation:", (props)=>getExitAnimation(props.position), " 0.6s;}@keyframes in-right{from{transform:translateX(100%);max-height:0;opacity:0;}to{transform:translateX(0%);max-height:150px;opacity:1;}}@keyframes out-right{to{transform:translateX(100%);max-height:0;opacity:0;}from{transform:translateX(0%);max-height:100px;opacity:1;}}@keyframes in-left{from{transform:translateX(-100%);max-height:0;opacity:0;}to{transform:translateX(0%);max-height:150px;opacity:1;}}@keyframes out-left{to{transform:translateX(-100%);max-height:0;opacity:0;}from{transform:translateX(0%);max-height:100px;opacity:1;}}");
|
|
68
68
|
const Title = /*#__PURE__*/ styled("div", {
|
|
69
|
-
target: "
|
|
69
|
+
target: "e10n1sw2",
|
|
70
70
|
label: "Title"
|
|
71
|
-
})("padding:5px 0;font-size:14px;color:", (props)=>getTitleColor(props.type), ";display:flex;align-items:center;"
|
|
71
|
+
})("padding:5px 0;font-size:14px;color:", (props)=>getTitleColor(props.type), ";display:flex;align-items:center;");
|
|
72
72
|
const FillParent = /*#__PURE__*/ styled("div", {
|
|
73
|
-
target: "
|
|
73
|
+
target: "e10n1sw3",
|
|
74
74
|
label: "FillParent"
|
|
75
|
-
})("flex:1;"
|
|
75
|
+
})("flex:1;");
|
|
76
76
|
const CloseButton = /*#__PURE__*/ styled("button", {
|
|
77
|
-
target: "
|
|
77
|
+
target: "e10n1sw4",
|
|
78
78
|
label: "CloseButton"
|
|
79
|
-
})("position:absolute;background-color:transparent;border:none;padding:0;top:4px;right:4px;cursor:pointer;color:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";&:focus{box-shadow:0 0 0 3px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";border-radius:3px;}"
|
|
79
|
+
})("position:absolute;background-color:transparent;border:none;padding:0;top:4px;right:4px;cursor:pointer;color:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";&:focus{box-shadow:0 0 0 3px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";border-radius:3px;}");
|
|
80
80
|
const Body = /*#__PURE__*/ styled("div", {
|
|
81
|
-
target: "
|
|
81
|
+
target: "e10n1sw5",
|
|
82
82
|
label: "Body"
|
|
83
|
-
})("padding:5px 5px 5px 0;font-size:14px;"
|
|
83
|
+
})("padding:5px 5px 5px 0;font-size:14px;");
|
|
84
84
|
const IconContainer = /*#__PURE__*/ styled("div", {
|
|
85
|
-
target: "
|
|
85
|
+
target: "e10n1sw6",
|
|
86
86
|
label: "IconContainer"
|
|
87
|
-
})("padding:6px 10px;", (props)=>getTypeStyle(props.type), ";"
|
|
87
|
+
})("padding:6px 10px;", (props)=>getTypeStyle(props.type), ";");
|
|
88
88
|
const Footer = /*#__PURE__*/ styled("div", {
|
|
89
|
-
target: "
|
|
89
|
+
target: "e10n1sw7",
|
|
90
90
|
label: "Footer"
|
|
91
|
-
})("display:flex;justify-content:flex-end;padding:0 5px;"
|
|
91
|
+
})("display:flex;justify-content:flex-end;padding:0 5px;");
|
|
92
92
|
const VisuallyHidden = /*#__PURE__*/ styled("span", {
|
|
93
|
-
target: "
|
|
93
|
+
target: "e10n1sw8",
|
|
94
94
|
label: "VisuallyHidden"
|
|
95
|
-
})("position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;"
|
|
95
|
+
})("position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;");
|
|
96
96
|
|
|
97
|
-
export { Body, CloseButton, Container, FillParent, Footer, IconContainer, Notice, Title, VisuallyHidden };
|
|
97
|
+
export { Body, CloseButton, Container$2 as Container, FillParent, Footer, IconContainer, Notice, Title, VisuallyHidden };
|
|
98
|
+
//# sourceMappingURL=style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/Notification/style.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport { Card } from '../Card';\nimport { NOTIFICATION_POSITION, NOTIFICATION_TYPE, NotificationOptions } from './types';\n\nconst getEntryAnimation = (position: NOTIFICATION_POSITION) => {\n switch (position) {\n case NOTIFICATION_POSITION.TOP_LEFT:\n case NOTIFICATION_POSITION.BOTTOM_LEFT:\n return 'in-left';\n default:\n return 'in-right';\n }\n};\n\nconst getExitAnimation = (position: NOTIFICATION_POSITION) => {\n switch (position) {\n case NOTIFICATION_POSITION.TOP_LEFT:\n case NOTIFICATION_POSITION.BOTTOM_LEFT:\n return 'out-left';\n default:\n return 'out-right';\n }\n};\n\nconst getBorderColor = (type?: NOTIFICATION_TYPE) => {\n switch (type) {\n case NOTIFICATION_TYPE.SUCCESS:\n return getThemeValue(THEME_NAME.SUCCESS_LIGHT);\n case NOTIFICATION_TYPE.DANGER:\n return getThemeValue(THEME_NAME.ERROR_LIGHT);\n case NOTIFICATION_TYPE.WARNING:\n return getThemeValue(THEME_NAME.WARNING_LIGHT);\n default:\n return getThemeValue(THEME_NAME.INFO_LIGHT);\n }\n};\n\nconst getTitleColor = (type: NOTIFICATION_TYPE) => {\n switch (type) {\n case NOTIFICATION_TYPE.SUCCESS:\n return getThemeValue(THEME_NAME.SUCCESS);\n case NOTIFICATION_TYPE.DANGER:\n return getThemeValue(THEME_NAME.ERROR);\n case NOTIFICATION_TYPE.WARNING:\n return getThemeValue(THEME_NAME.WARNING);\n case NOTIFICATION_TYPE.INFO:\n return getThemeValue(THEME_NAME.INFO);\n }\n};\n\nconst getTypeStyle = (type: NOTIFICATION_TYPE) => {\n switch (type) {\n case NOTIFICATION_TYPE.INFO:\n return `color: ${getThemeValue(THEME_NAME.INFO)}`;\n case NOTIFICATION_TYPE.SUCCESS:\n return `color: ${getThemeValue(THEME_NAME.SUCCESS)}`;\n case NOTIFICATION_TYPE.DANGER:\n return `color: ${getThemeValue(THEME_NAME.ERROR)}`;\n case NOTIFICATION_TYPE.WARNING:\n return `color: ${getThemeValue(THEME_NAME.WARNING)}`;\n }\n};\n\ninterface NoticeProp extends NotificationOptions {\n position: NOTIFICATION_POSITION;\n}\n\nexport const Container = styled.div<{ position: NOTIFICATION_POSITION }>`\n display: flex;\n flex-direction: ${(props) =>\n props.position === NOTIFICATION_POSITION.TOP_LEFT ||\n props.position === NOTIFICATION_POSITION.TOP_RIGHT\n ? 'column'\n : 'column-reverse'};\n`;\n\nexport const Notice = styled(Card)<NoticeProp>`\n position: relative;\n border-radius: 3px;\n border-left: 4px solid ${(props) => getBorderColor(props.type)};\n width: 300px;\n display: flex;\n padding: 0 5px 5px 0;\n overflow: hidden;\n animation: ${(props) => getEntryAnimation(props.position)} 0.6s ease;\n\n & svg {\n fill: currentColor;\n vertical-align: middle;\n width: 20px;\n height: 20px;\n }\n\n &.leave {\n animation: ${(props) => getExitAnimation(props.position)} 0.6s;\n }\n\n @keyframes in-right {\n from {\n transform: translateX(100%);\n max-height: 0;\n opacity: 0;\n }\n\n to {\n transform: translateX(0%);\n max-height: 150px;\n opacity: 1;\n }\n }\n\n @keyframes out-right {\n to {\n transform: translateX(100%);\n max-height: 0;\n opacity: 0;\n }\n\n from {\n transform: translateX(0%);\n max-height: 100px;\n opacity: 1;\n }\n }\n\n @keyframes in-left {\n from {\n transform: translateX(-100%);\n max-height: 0;\n opacity: 0;\n }\n\n to {\n transform: translateX(0%);\n max-height: 150px;\n opacity: 1;\n }\n }\n\n @keyframes out-left {\n to {\n transform: translateX(-100%);\n max-height: 0;\n opacity: 0;\n }\n\n from {\n transform: translateX(0%);\n max-height: 100px;\n opacity: 1;\n }\n }\n`;\n\nexport const Title = styled.div<{ type: NOTIFICATION_TYPE }>`\n padding: 5px 0;\n font-size: 14px;\n color: ${(props) => getTitleColor(props.type)};\n display: flex;\n align-items: center;\n`;\n\nexport const FillParent = styled.div`\n flex: 1;\n`;\n\nexport const CloseButton = styled.button`\n position: absolute;\n background-color: transparent;\n border: none;\n padding: 0;\n top: 4px;\n right: 4px;\n cursor: pointer;\n color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n\n &:focus {\n box-shadow: 0 0 0 3px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n border-radius: 3px;\n }\n`;\n\nexport const Body = styled.div`\n padding: 5px 5px 5px 0;\n font-size: 14px;\n`;\n\nexport const IconContainer = styled.div<{ type: NOTIFICATION_TYPE }>`\n padding: 6px 10px;\n ${(props) => getTypeStyle(props.type)};\n`;\n\nexport const Footer = styled.div`\n display: flex;\n justify-content: flex-end;\n padding: 0 5px;\n`;\n\nexport const VisuallyHidden = styled.span`\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: 0;\n`;\n"],"names":["getEntryAnimation","position","NOTIFICATION_POSITION","TOP_LEFT","BOTTOM_LEFT","getExitAnimation","getBorderColor","type","NOTIFICATION_TYPE","SUCCESS","getThemeValue","THEME_NAME","SUCCESS_LIGHT","DANGER","ERROR_LIGHT","WARNING","WARNING_LIGHT","INFO_LIGHT","getTitleColor","ERROR","INFO","getTypeStyle","Container","styled","props","TOP_RIGHT","Notice","Card","Title","FillParent","CloseButton","TEXT_COLOR_DARK","PRIMARY_LIGHT","Body","IconContainer","Footer","VisuallyHidden"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../src/components/Notification/types.ts"],"sourcesContent":["/** Position for Notification */\nexport enum NOTIFICATION_POSITION {\n TOP_LEFT = 'TOP_LEFT',\n TOP_RIGHT = 'TOP_RIGHT',\n BOTTOM_LEFT = 'BOTTOM_LEFT',\n BOTTOM_RIGHT = 'BOTTOM_RIGHT',\n}\n\n/** Type of Notifications */\nexport enum NOTIFICATION_TYPE {\n INFO = 'INFO',\n SUCCESS = 'SUCCESS',\n DANGER = 'DANGER',\n WARNING = 'WARNING',\n}\n\nexport interface NotificationOptions {\n /** Title of the notification */\n title: string;\n /** Body of the notification */\n description: string;\n /** Id for the notification, helps in de-duplication. */\n id?: string;\n /** Duration for the notification in milliseconds */\n duration?: number;\n /** Creates sticky notification */\n sticky?: boolean;\n /** Type of notification */\n type?: NOTIFICATION_TYPE;\n /** Action button text */\n buttonText?: string;\n /** Action button click callback */\n buttonClick?: () => void;\n /** Notification close callback. */\n onClose?: () => void;\n /** aria label for the close button on the notification */\n closeButtonAriaLabel?: string;\n}\n"],"names":["NOTIFICATION_POSITION","NOTIFICATION_TYPE"],"mappings":"AAAA,iCACO,IAAKA,qBAAAA,iBAAAA,SAAAA,qBAAAA,EAAAA;;;;;AAAAA,IAAAA,OAAAA,qBAAAA;AAKX,CAAA,CAAA,EAAA;AAED,6BACO,IAAKC,iBAAAA,iBAAAA,SAAAA,iBAAAA,EAAAA;;;;;AAAAA,IAAAA,OAAAA,iBAAAA;AAKX,CAAA,CAAA,EAAA;;;;"}
|
|
@@ -1,28 +1,29 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
2
|
export declare enum POPOVER_POSITION {
|
|
4
3
|
TOP_LEFT = "TOP_LEFT",
|
|
5
4
|
TOP_RIGHT = "TOP_RIGHT",
|
|
6
5
|
BOTTOM_LEFT = "BOTTOM_LEFT",
|
|
7
6
|
BOTTOM_RIGHT = "BOTTOM_RIGHT"
|
|
8
7
|
}
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
8
|
+
type PopoverProps = {
|
|
9
|
+
/** Opens the popover */
|
|
10
|
+
open: boolean;
|
|
11
|
+
/** Anchor element for the popover */
|
|
12
|
+
element: React.ElementType;
|
|
13
|
+
/**
|
|
14
|
+
* Position of the popover around anchor element
|
|
15
|
+
* @default POPOVER_POSITION.BOTTOM_LEFT
|
|
16
|
+
*/
|
|
17
|
+
position?: POPOVER_POSITION;
|
|
18
|
+
/**
|
|
19
|
+
* If the popover should close on `esc` key press
|
|
20
|
+
* @default true
|
|
21
|
+
*/
|
|
22
|
+
closeOnEsc?: boolean;
|
|
23
|
+
/** Popover close callback */
|
|
24
|
+
onClose?: () => void;
|
|
25
|
+
};
|
|
26
|
+
declare const Popover: React.ForwardRefExoticComponent<PopoverProps & {
|
|
27
|
+
children?: React.ReactNode | undefined;
|
|
28
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
28
29
|
export default Popover;
|