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

package/dist/components/AlertProvider/AlertProvider.d.ts

@@ -1,5 +1,6 @@
-import type { AlertProviderItemProps, AlertProviderProps } from './AlertProvider.props';
-import './AlertProvider.styles.scss';
+import type { AlertProviderItemProps, AlertProviderProps } from "./AlertProvider.props";
+import "./AlertProvider.styles.scss";
 declare const AlertProvider: ({ children, limit }: AlertProviderProps) => import("react/jsx-runtime").JSX.Element;
 export default AlertProvider;
-export declare const useShowAlert: () => (props: AlertProviderItemProps) => void;
+export declare const useShowAlert: () => (props: AlertProviderItemProps) => number | null;
+export declare const useDeleteAlert: () => (id?: number) => void;

package/dist/components/AlertProvider/AlertProvider.props.d.ts

@@ -1,4 +1,4 @@
-import type { IconName } from '../Icon';
+import type { IconName } from "../Icon";
 export interface AlertProviderProps {
     /**
      * ** Content to display
@@ -16,13 +16,18 @@ export interface AlertProviderItemProps {
      *
      * @default 'info'
      */
-    appearance: 'info' | 'success' | 'warning' | 'danger' | 'majorWarning';
+    appearance: "info" | "success" | "warning" | "danger" | "majorWarning" | "loading";
     content: React.ReactNode;
     onDismiss?: (id?: number) => void;
     id?: number;
-    duration: number;
+    duration: number | "infinite";
+    /**
+     * Dismissible alert
+     */
+    dismissible?: boolean;
 }
 export interface AlertContextType {
     limit: number;
-    addAlert: (props: AlertProviderItemProps) => void;
+    addAlert: (props: AlertProviderItemProps) => number | null;
+    deleteAlert: (id?: number) => void;
 }

package/dist/components/AlertProvider/context/AlertContext.d.ts

@@ -1,3 +1,3 @@
-import type { AlertContextType } from '../AlertProvider.props';
+import type { AlertContextType } from "../AlertProvider.props";
 declare const AlertContext: import("react").Context<AlertContextType>;
 export default AlertContext;

package/dist/components/AlertProvider/index.d.ts

@@ -1,3 +1,3 @@
-import AlertProvider, { useShowAlert } from './AlertProvider';
-export * from './AlertProvider.props';
-export { AlertProvider, useShowAlert };
+import AlertProvider, { useShowAlert, useDeleteAlert } from "./AlertProvider";
+export * from "./AlertProvider.props";
+export { AlertProvider, useShowAlert, useDeleteAlert };

package/dist/index.cjs.js

@@ -6831,7 +6831,8 @@ const Logo = ({
 
 const AlertContext = /*#__PURE__*/React2.createContext({
   addAlert: () => null,
-  limit: 0
+  limit: 0,
+  deleteAlert: () => {}
 });
 
 const AlertProvider = ({
@@ -6857,9 +6858,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);
   };
   React2.useEffect(() => {
@@ -6876,7 +6883,9 @@ const AlertProvider = ({
     icon,
     appearance,
     content,
-    duration
+    duration,
+    onDismiss,
+    dismissible = false
   }) => {
     const id = Math.floor(Math.random() * 100 + 1);
     const alertAddProps = {
@@ -6884,9 +6893,12 @@ const AlertProvider = ({
       appearance,
       content,
       duration,
-      id
+      id,
+      onDismiss,
+      dismissible
     };
     setNewAlert(alertAddProps);
+    return id;
   };
   const deleteAlert = index => {
     if (index !== undefined) {
@@ -6896,15 +6908,16 @@ const AlertProvider = ({
   return /*#__PURE__*/jsxRuntimeExports.jsxs(AlertContext.Provider, {
     value: {
       addAlert,
-      limit
+      limit,
+      deleteAlert
     },
     children: [children, portalTarget && alertList.length > 0 && /*#__PURE__*/ReactDOM.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))
@@ -6917,6 +6930,12 @@ const useShowAlert = () => {
   } = React2.useContext(AlertContext);
   return addAlert;
 };
+const useDeleteAlert = () => {
+  const {
+    deleteAlert
+  } = React2.useContext(AlertContext);
+  return deleteAlert;
+};
 
 const MAIN_CLASS$q = "column";
 /** Grid.Item is used for set size of element in the Grid
@@ -18301,11 +18320,11 @@ const Item$2 = ({
   const isCollapsed = isCollapsedProp !== undefined ? isCollapsedProp : collapsed;
   const AnchorComponent = !isExternal ? anchorComponent || "a" : "a";
   const isActive = React2.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]);
   React2.useEffect(() => {
     if (isActive && subNavigationItems) {
       setCurrentTierItems?.(subNavigationItems || [], {
@@ -41465,6 +41484,7 @@ exports.formatFileSize = formatFileSize;
 exports.isComponentTypeOf = isComponentTypeOf;
 exports.isValidIcon = isValidIcon;
 exports.themeClassConverter = themeClassConverter;
+exports.useDeleteAlert = useDeleteAlert;
 exports.useShowAlert = useShowAlert;
 exports.useTheme = useTheme;
 //# sourceMappingURL=index.cjs.js.map