kiban-design-system 1.1.14-hotfix.0 → 1.1.16-hotfix.0

package/dist/index.js

@@ -1012,11 +1012,14 @@ const Alert = ({ icon, appearance = 'info', content, onDismiss, id, }) => {
     ]
         .filter(Boolean)
         .join(' ');
-    return (jsxs("div", Object.assign({ className: className }, { children: [jsxs("div", Object.assign({ className: `${MAIN_CLASS$t}__content` }, { children: [icon && (jsx("div", Object.assign({ className: `${MAIN_CLASS$t}__icon` }, { children: jsx(Icon, { name: icon }, void 0) }), void 0)), jsx("span", { children: content }, void 0)] }), void 0), onDismiss ? (jsx("div", Object.assign({ className: `${MAIN_CLASS$t}__close`, onClick: () => onDismiss(id) }, { children: jsx(Icon, { name: 'Close' }, void 0) }), void 0)) : null] }), void 0));
+    const iconMarkup = appearance !== 'loading' && icon ? (jsx("div", Object.assign({ className: `${MAIN_CLASS$t}__icon` }, { children: jsx(Icon, { name: icon }, void 0) }), void 0)) : null;
+    const loadingMarkup = appearance === 'loading' ? (jsx("div", Object.assign({ className: `${MAIN_CLASS$t}__loading` }, { children: jsx(Icon, { name: 'Loader' }, void 0) }), void 0)) : null;
+    return (jsxs("div", Object.assign({ className: className }, { children: [jsxs("div", Object.assign({ className: `${MAIN_CLASS$t}__content` }, { children: [iconMarkup, loadingMarkup, jsx("span", { children: content }, void 0)] }), void 0), onDismiss ? (jsx("div", Object.assign({ className: `${MAIN_CLASS$t}__close`, onClick: () => onDismiss(id) }, { children: jsx(Icon, { name: 'Close' }, void 0) }), void 0)) : null] }), void 0));
 };
 
 const AlertContext = createContext({
     addAlert: () => null,
+    deleteAlert: () => null,
     limit: 0,
 });
 
@@ -1037,8 +1040,18 @@ const AlertProvider = ({ children, limit }) => {
         }
     }, [newAlert]);
     const countDownAlerts = () => {
-        let alerts = alertList.map((alertElem) => (Object.assign(Object.assign({}, alertElem), { duration: alertElem.duration - 1000 })));
-        alerts = alerts.filter((alertElement) => alertElement.duration > 0);
+        let alerts = alertList.map((alertElem) => (Object.assign(Object.assign({}, alertElem), { duration: alertElem.duration === 'infinite'
+                ? 'infinite'
+                : alertElem.duration - 1000 })));
+        // Trigger on dismiss event when an alert is dismissed
+        alerts.forEach((alertElement) => {
+            var _a;
+            if (alertElement.duration === 0) {
+                (_a = alertElement.onDismiss) === null || _a === void 0 ? void 0 : _a.call(alertElement, alertElement.id);
+            }
+        });
+        alerts = alerts.filter((alertElement) => alertElement.duration === 'infinite' ||
+            (typeof alertElement.duration === 'number' && alertElement.duration > 0));
         setAlertList(alerts);
     };
     useEffect(() => {
@@ -1053,7 +1066,7 @@ const AlertProvider = ({ children, limit }) => {
             clearInterval(interval);
         };
     }, [alertList]);
-    const addAlert = ({ icon, appearance, content, duration, }) => {
+    const addAlert = ({ icon, appearance, content, duration, onDismiss, dismissible = false, }) => {
         const id = Math.floor(Math.random() * 100 + 1);
         const alertAddProps = {
             icon,
@@ -1061,21 +1074,32 @@ const AlertProvider = ({ children, limit }) => {
             content,
             duration,
             id,
+            onDismiss,
+            dismissible,
         };
         setNewAlert(alertAddProps);
+        return id;
     };
     const deleteAlert = (index) => {
         if (index !== undefined) {
             setAlertList(alertList.filter((filterItem) => filterItem.id !== index));
         }
     };
-    return (jsxs(AlertContext.Provider, Object.assign({ value: { addAlert, limit } }, { children: [children, portalTarget &&
+    return (jsxs(AlertContext.Provider, Object.assign({ value: { addAlert, limit, deleteAlert } }, { children: [children, portalTarget &&
                 alertList.length > 0 &&
-                createPortal(jsx("div", Object.assign({ className: 'AlertProvider' }, { children: alertList.map((alertItem) => (jsx(Alert, { icon: alertItem.icon, appearance: alertItem.appearance, duration: alertItem.duration, onDismiss: alertItem.id ? () => deleteAlert(alertItem.id) : undefined, content: alertItem.content, id: alertItem.id }, alertItem.id))) }), void 0), portalTarget)] }), void 0));
+                createPortal(jsx("div", Object.assign({ className: 'AlertProvider' }, { children: alertList.map((alertItem) => (jsx(Alert, { icon: alertItem.icon, appearance: alertItem.appearance, duration: alertItem.duration === 'infinite'
+                            ? undefined
+                            : alertItem.duration, onDismiss: alertItem.dismissible
+                            ? () => deleteAlert(alertItem.id)
+                            : undefined, content: alertItem.content, id: alertItem.id }, alertItem.id))) }), void 0), portalTarget)] }), void 0));
 };
 const useShowAlert = () => {
     const { addAlert } = useContext(AlertContext);
     return addAlert;
+};
+const useDeleteAlert = () => {
+    const { deleteAlert } = useContext(AlertContext);
+    return deleteAlert;
 };
 
 const COMPONENT_NAME$F = 'AlphaAttributeInput';
@@ -30752,5 +30776,5 @@ const AlphaSegmentedControl = ({ children, title, segments, selected, onSelected
     return (jsxs("div", Object.assign({ className: `${MAINCLASS}__Container` }, { children: [headerMarkup, contentMarkup] }), void 0));
 };
 
-export { ActionList, Alert, AlertProvider, AlphaAttributeInput, AlphaBadge, AlphaButton, AlphaChip, AlphaFilterControl, AlphaGraphicCard, AlphaIcon, AlphaInlineError, AlphaInputDate, InputTag$1 as AlphaInputTag, AlphaInputText, AlphaLabel, AlphaLabelledField, AlphaMultiSelectionPicker, AlphaSegmentedControl, AlphaSideMenu, AlphaSpinner, AlphaStepper, AlphaTag, AlphaTile, AlphaTooltip, Totalizer as AlphaTotalizer, AlphaZipCodeInput, AnnotatedSection, Avatar, Badge, Banner, Button, CalendarPicker, Card, Checkbox, ChoiceList, Collapsible, Connector, Container, Cover, DataTable, DatePicker, DeletableSection, Divider, DynamicForm, EmptyState, ErrorIcon, FileDownloader, Filedrop, FilterControl, Filters, Footer, Form, FormField, FormLayout, Frame, Grid, GridItem, Header$1 as Header, Icon, IconButton, IndexList, InlineEdit, InputPhoneNumber, InputTag, InputText, Item$3 as Item, JsonViewer, Label, Link, ListInfo, Loader, Logo, Media, Modal, ModalHeader, Nip, OptionList, Page, PageActions, Pagination, Pane, Panel, PanelFooter, PanelHeader, PendingIcon, Popover$1 as Popover, Progress, RadioButton, Section$1 as Section, SectionForm, Select, SideMenu, SkeletonInput, SkeletonMedia, SkeletonTabs, SkeletonText, SkeletonTitle, SortableList, Spinner, Stack, StepDefault, SuccessIcon, Table, Tabs, Tag, ThemeProvider, ThreadItem, Thumbnail, Tier, Tile, TimeSelector, Title, Toggle, Tooltip, WarningIcon, capitalize, cssClassName, formatDate, formatFileSize, isComponentTypeOf, isValidIcon, themeClassConverter, useShowAlert, useTheme };
+export { ActionList, Alert, AlertProvider, AlphaAttributeInput, AlphaBadge, AlphaButton, AlphaChip, AlphaFilterControl, AlphaGraphicCard, AlphaIcon, AlphaInlineError, AlphaInputDate, InputTag$1 as AlphaInputTag, AlphaInputText, AlphaLabel, AlphaLabelledField, AlphaMultiSelectionPicker, AlphaSegmentedControl, AlphaSideMenu, AlphaSpinner, AlphaStepper, AlphaTag, AlphaTile, AlphaTooltip, Totalizer as AlphaTotalizer, AlphaZipCodeInput, AnnotatedSection, Avatar, Badge, Banner, Button, CalendarPicker, Card, Checkbox, ChoiceList, Collapsible, Connector, Container, Cover, DataTable, DatePicker, DeletableSection, Divider, DynamicForm, EmptyState, ErrorIcon, FileDownloader, Filedrop, FilterControl, Filters, Footer, Form, FormField, FormLayout, Frame, Grid, GridItem, Header$1 as Header, Icon, IconButton, IndexList, InlineEdit, InputPhoneNumber, InputTag, InputText, Item$3 as Item, JsonViewer, Label, Link, ListInfo, Loader, Logo, Media, Modal, ModalHeader, Nip, OptionList, Page, PageActions, Pagination, Pane, Panel, PanelFooter, PanelHeader, PendingIcon, Popover$1 as Popover, Progress, RadioButton, Section$1 as Section, SectionForm, Select, SideMenu, SkeletonInput, SkeletonMedia, SkeletonTabs, SkeletonText, SkeletonTitle, SortableList, Spinner, Stack, StepDefault, SuccessIcon, Table, Tabs, Tag, ThemeProvider, ThreadItem, Thumbnail, Tier, Tile, TimeSelector, Title, Toggle, Tooltip, WarningIcon, capitalize, cssClassName, formatDate, formatFileSize, isComponentTypeOf, isValidIcon, themeClassConverter, useDeleteAlert, useShowAlert, useTheme };
 //# sourceMappingURL=index.js.map