kiban-design-system 1.0.284-alpha.0 → 1.0.287-alpha.0

package/dist/index.esm.js

@@ -6811,7 +6811,8 @@ const Logo = ({
 
 const AlertContext = /*#__PURE__*/createContext({
   addAlert: () => null,
-  limit: 0
+  limit: 0,
+  deleteAlert: () => {}
 });
 
 const AlertProvider = ({
@@ -6837,9 +6838,15 @@ const AlertProvider = ({
   const countDownAlerts = () => {
     let alerts = alertList.map(alertElem => ({
       ...alertElem,
-      duration: alertElem.duration - 1000
+      duration: alertElem.duration === "infinite" ? "infinite" : alertElem.duration - 1000
     }));
-    alerts = alerts.filter(alertElement => alertElement.duration > 0);
+    // Trigger on dismiss event when an alert is dismissed
+    alerts.forEach(alertElement => {
+      if (alertElement.duration === 0) {
+        alertElement.onDismiss?.(alertElement.id);
+      }
+    });
+    alerts = alerts.filter(alertElement => alertElement.duration === "infinite" || typeof alertElement.duration === "number" && alertElement.duration > 0);
     setAlertList(alerts);
   };
   useEffect(() => {
@@ -6856,7 +6863,9 @@ const AlertProvider = ({
     icon,
     appearance,
     content,
-    duration
+    duration,
+    onDismiss,
+    dismissible = false
   }) => {
     const id = Math.floor(Math.random() * 100 + 1);
     const alertAddProps = {
@@ -6864,9 +6873,12 @@ const AlertProvider = ({
       appearance,
       content,
       duration,
-      id
+      id,
+      onDismiss,
+      dismissible
     };
     setNewAlert(alertAddProps);
+    return id;
   };
   const deleteAlert = index => {
     if (index !== undefined) {
@@ -6876,15 +6888,16 @@ const AlertProvider = ({
   return /*#__PURE__*/jsxRuntimeExports.jsxs(AlertContext.Provider, {
     value: {
       addAlert,
-      limit
+      limit,
+      deleteAlert
     },
     children: [children, portalTarget && alertList.length > 0 && /*#__PURE__*/createPortal(/*#__PURE__*/jsxRuntimeExports.jsx("div", {
       className: "AlertProvider",
       children: alertList.map(alertItem => /*#__PURE__*/jsxRuntimeExports.jsx(Alert, {
         icon: alertItem.icon,
         appearance: alertItem.appearance,
-        duration: alertItem.duration,
-        onDismiss: alertItem.id ? () => deleteAlert(alertItem.id) : undefined,
+        duration: alertItem.duration === "infinite" ? undefined : alertItem.duration,
+        onDismiss: alertItem.dismissible ? () => deleteAlert(alertItem.id) : undefined,
         content: alertItem.content,
         id: alertItem.id
       }, alertItem.id))
@@ -6897,6 +6910,12 @@ const useShowAlert = () => {
   } = useContext(AlertContext);
   return addAlert;
 };
+const useDeleteAlert = () => {
+  const {
+    deleteAlert
+  } = useContext(AlertContext);
+  return deleteAlert;
+};
 
 const MAIN_CLASS$q = "column";
 /** Grid.Item is used for set size of element in the Grid
@@ -18281,11 +18300,11 @@ const Item$2 = ({
   const isCollapsed = isCollapsedProp !== undefined ? isCollapsedProp : collapsed;
   const AnchorComponent = !isExternal ? anchorComponent || "a" : "a";
   const isActive = useMemo(() => {
-    if (location && url) {
+    if (location?.pathname && url) {
       return isExact ? location.pathname === url : location.pathname.includes(url);
     }
     return isActiveProp;
-  }, [location, isExact, isActiveProp, url]);
+  }, [location?.pathname, isExact, isActiveProp, url]);
   useEffect(() => {
     if (isActive && subNavigationItems) {
       setCurrentTierItems?.(subNavigationItems || [], {
@@ -41323,5 +41342,5 @@ const Link = ({
   });
 };
 
-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$1 as Form, FormField, FormLayout, Frame, Grid, GridItem, Header$1 as Header, Icon, IconButton, IndexList, InlineEdit, InputPhoneNumber, InputTag, InputText, Item$2 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$1 as Form, FormField, FormLayout, Frame, Grid, GridItem, Header$1 as Header, Icon, IconButton, IndexList, InlineEdit, InputPhoneNumber, InputTag, InputText, Item$2 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.esm.js.map