design-system-next 2.9.7 → 2.9.10

package/src/components/lozenge/use-lozenge.ts

@@ -5,18 +5,24 @@ import classNames from 'classnames';
 import type { LozengePropTypes } from './lozenge';
 
 interface LozengeClasses {
+  wrapperClasses: string;
   baseClasses: string;
   toneClasses: string;
 }
 
 export const useLozenge = (props: LozengePropTypes) => {
-  const { tone, fill } = toRefs(props);
+  const { tone, fill, loading } = toRefs(props);
 
   const lozengeClasses: ComputedRef<LozengeClasses> = computed(() => {
-    const baseClasses = classNames(
-      { 'spr-flex spr-flex-wrap spr-rounded-md': !fill.value },
-      { 'spr-flex spr-flex-wrap': fill.value },
-    );
+    const wrapperClasses = classNames({
+      'spr-h-fit spr-w-fit': !loading.value,
+      'spr-flex spr-w-full': loading.value,
+    });
+    const baseClasses = classNames({
+      'spr-flex spr-flex-wrap spr-rounded-md': !fill.value,
+      'spr-flex spr-flex-wrap': fill.value,
+      'spr-skeletal-loader spr-flex spr-h-6 spr-w-full spr-rounded-md': loading.value,
+    });
 
     const toneClasses = classNames(
       'spr-label-xs-medium spr-inline-flex spr-items-center spr-gap-size-spacing-6xs spr-rounded-md spr-border spr-border-solid spr-p-size-spacing-5xs spr-text-xs spr-uppercase',
@@ -48,6 +54,7 @@ export const useLozenge = (props: LozengePropTypes) => {
     );
 
     return {
+      wrapperClasses,
       baseClasses,
       toneClasses,
     };

package/src/components/select/select-ladderized/use-select-ladderized.ts

@@ -1,164 +1,164 @@
-import { ref, toRefs, computed, watch } from 'vue';
-import { useVModel, useDebounceFn, onClickOutside } from '@vueuse/core';
-
-import type { SelectLadderizedPropTypes } from './select-ladderized';
-
-import type { MenuListType } from '@/components/list/list';
-
-export const useSelectLadderized = (
-  props: SelectLadderizedPropTypes,
-  emit: (event: string, ...args: unknown[]) => void,
-) => {
-  const { options, disabled } = toRefs(props);
-
-  const ladderizedClasses = computed(() => ({
-    baseClasses: 'spr-flex spr-flex-col spr-gap-size-spacing-4xs',
-    labelClasses: 'spr-body-sm-regular spr-text-color-strong spr-block',
-  }));
-
-  // Popper Variables
-  const ladderizedSelectPopperState = ref(false);
-  const ladderizedSelectRef = ref(null);
-  const isLadderizedSelectPopperDisabled = computed(() => disabled.value);
-
-  // Ladderized Select Model
-  const ladderizedSelectModel = useVModel(props, 'modelValue', emit);
-  const ladderizedSelectOptions = computed(() => options.value);
-
-  // Input Variables
-  const inputText = ref<string>('');
-  const isSearching = ref(false);
-  const wasCleared = ref(false);
-
-  const isLeafNode = (item: MenuListType): boolean => {
-    return !item.sublevel || item.sublevel.length === 0;
-  };
-
-  // Helper to find the path to a selected value in the menu tree
-  const findPathToValue = (items: MenuListType[], value: string | number, path: string[] = []): string[] | null => {
-    for (const item of items) {
-      const newPath = [...path, item.text];
-
-      if (item.value === value) {
-        return newPath;
-      }
-
-      if (item.sublevel) {
-        const result = findPathToValue(item.sublevel, value, newPath);
-
-        if (result) return result;
-      }
-    }
-
-    return null;
-  };
-
-  const handleSelectedLadderizedItem = (selectedItems: string[], selectedItem?: MenuListType) => {
-    wasCleared.value = false;
-    ladderizedSelectModel.value = selectedItems;
-
-    let itemToCheck = selectedItem;
-
-    // Fallback: if selectedItem is not provided, try to find it from the value
-    if (!itemToCheck && selectedItems.length > 0) {
-      const findItemByValue = (items: MenuListType[], value: string | number): MenuListType | undefined => {
-        for (const item of items) {
-          if (item.value === value) return item;
-
-          if (item.sublevel) {
-            const found = findItemByValue(item.sublevel, value);
-
-            if (found) return found;
-          }
-        }
-
-        return undefined;
-      };
-
-      itemToCheck = findItemByValue(ladderizedSelectOptions.value, selectedItems[selectedItems.length - 1]);
-    }
-
-    if (itemToCheck) {
-      const path = findPathToValue(ladderizedSelectOptions.value, itemToCheck.value);
-
-      inputText.value = path ? path.join(' > ') : itemToCheck.text || '';
-
-      if (isLeafNode(itemToCheck)) {
-        ladderizedSelectPopperState.value = false;
-      }
-    } else if (selectedItems.length === 0 && !wasCleared.value) {
-      inputText.value = '';
-    }
-  };
-
-  const handleSearch = () => {
-    isSearching.value = true;
-
-    debouncedEmitSearch();
-  };
-
-  const debouncedEmitSearch = useDebounceFn(() => {
-    // Optionally emit search event here if needed
-  }, 300);
-
-  const handleClear = () => {
-    wasCleared.value = true;
-
-    inputText.value = '';
-
-    emit('update:modelValue', []);
-  };
-
-  const handleOptionsToggle = () => {
-    ladderizedSelectPopperState.value = true;
-
-    isSearching.value = false;
-  };
-
-  // Watch for changes in modelValue to update inputText
-  watch(
-    () => ladderizedSelectModel.value,
-    (newVal) => {
-      if (wasCleared.value) {
-        inputText.value = '';
-        wasCleared.value = false;
-        return;
-      }
-
-      if (Array.isArray(newVal) && newVal.length > 0) {
-        // Treat the array as a single path for ladderized select
-        let currentLevel = ladderizedSelectOptions.value;
-
-        const pathTexts: string[] = [];
-
-        for (const value of newVal) {
-          const found = currentLevel.find((item) => item.value === value);
-          if (!found) break;
-          pathTexts.push(found.text);
-          currentLevel = found.sublevel || [];
-        }
-
-        inputText.value = pathTexts.join(' > ');
-      }
-    },
-    { immediate: true },
-  );
-
-  onClickOutside(ladderizedSelectRef, () => {
-    ladderizedSelectPopperState.value = false;
-  });
-
-  return {
-    ladderizedClasses,
-    ladderizedSelectPopperState,
-    ladderizedSelectRef,
-    ladderizedSelectOptions,
-    isLadderizedSelectPopperDisabled,
-    ladderizedSelectModel,
-    inputText,
-    handleSelectedLadderizedItem,
-    handleSearch,
-    handleClear,
-    handleOptionsToggle,
-  };
-};
+import { ref, toRefs, computed, watch } from 'vue';
+import { useVModel, useDebounceFn, onClickOutside } from '@vueuse/core';
+
+import type { SelectLadderizedPropTypes } from './select-ladderized';
+
+import type { MenuListType } from '@/components/list/list';
+
+export const useSelectLadderized = (
+  props: SelectLadderizedPropTypes,
+  emit: (event: string, ...args: unknown[]) => void,
+) => {
+  const { options, disabled } = toRefs(props);
+
+  const ladderizedClasses = computed(() => ({
+    baseClasses: 'spr-flex spr-flex-col spr-gap-size-spacing-4xs',
+    labelClasses: 'spr-body-sm-regular spr-text-color-strong spr-block',
+  }));
+
+  // Popper Variables
+  const ladderizedSelectPopperState = ref(false);
+  const ladderizedSelectRef = ref(null);
+  const isLadderizedSelectPopperDisabled = computed(() => disabled.value);
+
+  // Ladderized Select Model
+  const ladderizedSelectModel = useVModel(props, 'modelValue', emit);
+  const ladderizedSelectOptions = computed(() => options.value);
+
+  // Input Variables
+  const inputText = ref<string>('');
+  const isSearching = ref(false);
+  const wasCleared = ref(false);
+
+  const isLeafNode = (item: MenuListType): boolean => {
+    return !item.sublevel || item.sublevel.length === 0;
+  };
+
+  // Helper to find the path to a selected value in the menu tree
+  const findPathToValue = (items: MenuListType[], value: string | number, path: string[] = []): string[] | null => {
+    for (const item of items) {
+      const newPath = [...path, item.text];
+
+      if (item.value === value) {
+        return newPath;
+      }
+
+      if (item.sublevel) {
+        const result = findPathToValue(item.sublevel, value, newPath);
+
+        if (result) return result;
+      }
+    }
+
+    return null;
+  };
+
+  const handleSelectedLadderizedItem = (selectedItems: string[], selectedItem?: MenuListType) => {
+    wasCleared.value = false;
+    ladderizedSelectModel.value = selectedItems;
+
+    let itemToCheck = selectedItem;
+
+    // Fallback: if selectedItem is not provided, try to find it from the value
+    if (!itemToCheck && selectedItems.length > 0) {
+      const findItemByValue = (items: MenuListType[], value: string | number): MenuListType | undefined => {
+        for (const item of items) {
+          if (item.value === value) return item;
+
+          if (item.sublevel) {
+            const found = findItemByValue(item.sublevel, value);
+
+            if (found) return found;
+          }
+        }
+
+        return undefined;
+      };
+
+      itemToCheck = findItemByValue(ladderizedSelectOptions.value, selectedItems[selectedItems.length - 1]);
+    }
+
+    if (itemToCheck) {
+      const path = findPathToValue(ladderizedSelectOptions.value, itemToCheck.value);
+
+      inputText.value = path ? path.join(' > ') : itemToCheck.text || '';
+
+      if (isLeafNode(itemToCheck)) {
+        ladderizedSelectPopperState.value = false;
+      }
+    } else if (selectedItems.length === 0 && !wasCleared.value) {
+      inputText.value = '';
+    }
+  };
+
+  const handleSearch = () => {
+    isSearching.value = true;
+
+    debouncedEmitSearch();
+  };
+
+  const debouncedEmitSearch = useDebounceFn(() => {
+    // Optionally emit search event here if needed
+  }, 300);
+
+  const handleClear = () => {
+    wasCleared.value = true;
+
+    inputText.value = '';
+
+    emit('update:modelValue', []);
+  };
+
+  const handleOptionsToggle = () => {
+    ladderizedSelectPopperState.value = true;
+
+    isSearching.value = false;
+  };
+
+  // Watch for changes in modelValue to update inputText
+  watch(
+    () => ladderizedSelectModel.value,
+    (newVal) => {
+      if (wasCleared.value) {
+        inputText.value = '';
+        wasCleared.value = false;
+        return;
+      }
+
+      if (Array.isArray(newVal) && newVal.length > 0) {
+        // Treat the array as a single path for ladderized select
+        let currentLevel = ladderizedSelectOptions.value;
+
+        const pathTexts: string[] = [];
+
+        for (const value of newVal) {
+          const found = currentLevel.find((item) => item.value === value);
+          if (!found) break;
+          pathTexts.push(found.text);
+          currentLevel = found.sublevel || [];
+        }
+
+        inputText.value = pathTexts.join(' > ');
+      }
+    },
+    { immediate: true },
+  );
+
+  onClickOutside(ladderizedSelectRef, () => {
+    ladderizedSelectPopperState.value = false;
+  });
+
+  return {
+    ladderizedClasses,
+    ladderizedSelectPopperState,
+    ladderizedSelectRef,
+    ladderizedSelectOptions,
+    isLadderizedSelectPopperDisabled,
+    ladderizedSelectModel,
+    inputText,
+    handleSelectedLadderizedItem,
+    handleSearch,
+    handleClear,
+    handleOptionsToggle,
+  };
+};

package/src/components/sidenav/sidenav.ts

@@ -5,6 +5,7 @@ type QuickAction = {
   items: QuickActionItem[];
 };
 
+
 type QuickActionItem = {
   title: string;
   description: string;
@@ -14,23 +15,29 @@ type QuickActionItem = {
   hidden: boolean;
 };
 
-type NavLinks = {
+export type NavLinks = {
   top: { parentLinks: ParentLinkItem[] }[];
   bottom: { parentLinks: ParentLinkItem[] }[];
 };
 
-type ParentLinkItem = {
+export type NavAPILinks = {
+  top: { parentLinks: NavItem[] }[];
+  bottom: { parentLinks: NavItem[] }[];
+};
+
+export type ParentLinkItem = {
   title: string;
   icon: string;
-  link: string;
-  redirect: Redirect;
+  link?: string;
+  redirect?: Redirect;
   menuLinks: MenuLink[];
-  hidden: boolean;
+  submenuLinks?: SubmenuLink[];
+  hidden?: boolean;
 };
 
 type MenuLink = {
   menuHeading: string;
-  items: MenuLinkItem[];
+  items: MenuLinkItem[] | ParentLinkItem[];
 };
 
 type MenuLinkItem = {
@@ -42,7 +49,7 @@ type MenuLinkItem = {
 
 type SubmenuLink = {
   subMenuHeading: string;
-  items: SubmenuLinkItem[];
+  items: SubmenuLinkItem[] | ParentLinkItem[];
 };
 
 type SubmenuLinkItem = {
@@ -70,6 +77,34 @@ type UserMenuItem = {
   hidden: boolean;
   redirect: Redirect;
 };
+export interface NavItem {
+  groupId: string;
+  label: string;
+  icon?: string | null;
+  url?: string | null;
+  isNewTab?: boolean;
+  children?: NavItem[] | null;
+  groupName?: string | null;
+  hidden?: boolean;
+}
+
+export interface MappedNavItem {
+  title: string;
+  icon?: string;
+  redirect?: {
+      openInNewTab: boolean;
+      isAbsoluteURL: boolean;
+      link: string;
+  };
+  menuLinks?: {
+      menuHeading: string;
+      items: MappedNavItem[];
+  }[];
+  submenuLinks?: {
+      subMenuHeading: string;
+      items: MappedNavItem[];
+  }[];
+}
 
 export const sidenavPropTypes = {
   quickActions: {
@@ -120,6 +155,11 @@ export const sidenavPropTypes = {
     validator: (value: unknown) => typeof value === 'boolean',
     default: false,
   },
+  isNavApi: {
+    type: Boolean,
+    validator: (value: unknown) => typeof value === 'boolean',
+    default: false,
+  }
 };
 
 export const sidenavEmitTypes = {

package/src/components/sidenav/sidenav.vue

@@ -139,7 +139,7 @@
         </div>
 
         <!-- Grouped Nav Links -->
-        <template v-for="(navLink, navLinkIndex) in props.navLinks.top" :key="navLinkIndex">
+        <template v-for="(navLink, navLinkIndex) in navLinks.top" :key="navLinkIndex">
           <template v-for="(parentLink, parentLinkIndex) in navLink.parentLinks" :key="parentLinkIndex">
             <!-- Parent link with menu links -->
             <template v-if="parentLink.menuLinks && parentLink.menuLinks.length > 0">
@@ -352,7 +352,7 @@
             </template>
           </template>
           <div
-            v-if="props.navLinks.top.length > 0 && navLinkIndex < props.navLinks.top.length - 1"
+            v-if="navLinks.top.length > 0 && navLinkIndex < navLinks.top.length - 1"
             class="spr-background-color-hover spr-h-[2px] spr-w-full"
           ></div>
         </template>
@@ -360,11 +360,11 @@
 
       <!-- Bottom Section -->
       <div
-        v-if="props.navLinks.bottom && props.navLinks.bottom.length > 0"
+        v-if="navLinks.bottom && navLinks.bottom.length > 0"
         class="spr-grid spr-justify-center spr-gap-2 spr-px-3 spr-pb-4 spr-pt-0"
       >
         <!-- Grouped Nav Links -->
-        <template v-for="(navLink, navLinkIndex) in props.navLinks.bottom" :key="navLinkIndex">
+        <template v-for="(navLink, navLinkIndex) in navLinks.bottom" :key="navLinkIndex">
           <template v-for="(parentLink, parentLinkIndex) in navLink.parentLinks" :key="parentLinkIndex">
             <!-- Parent link with menu links -->
             <template v-if="parentLink.menuLinks && parentLink.menuLinks.length > 0">
@@ -573,7 +573,7 @@
             </template>
           </template>
           <div
-            v-if="props.navLinks.bottom.length > 0 && navLinkIndex < props.navLinks.bottom.length - 1"
+            v-if="navLinks.bottom.length > 0 && navLinkIndex < navLinks.bottom.length - 1"
             class="spr-background-color-hover spr-h-[2px] spr-w-full"
           ></div>
         </template>
@@ -767,7 +767,7 @@ import SprBadge from '../badge/badge.vue';
 const props = defineProps(sidenavPropTypes);
 const emit = defineEmits(sidenavEmitTypes);
 
-const { isQuckActionMenuVisible, isUserMenuVisible, userProfileError, getUserInitials, handleRedirect, generateId } = useSidenav(
+const { navLinks, isQuckActionMenuVisible, isUserMenuVisible, userProfileError, getUserInitials, handleRedirect, generateId } = useSidenav(
   props,
   emit,
 );

package/src/components/sidenav/use-sidenav.ts

@@ -1,7 +1,7 @@
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import type { SetupContext } from 'vue';
 
-import type { SidenavPropTypes, SidenavEmitTypes } from './sidenav';
+import type { SidenavPropTypes, SidenavEmitTypes, ParentLinkItem, NavLinks, NavItem } from './sidenav';
 
 interface ObjectItem {
   redirect: {
@@ -17,6 +17,7 @@ interface ObjectItem {
 }
 
 export const useSidenav = (props: SidenavPropTypes, emit: SetupContext<SidenavEmitTypes>['emit']) => {
+  const navLinks = ref<NavLinks>(props.navLinks);
   const isQuckActionMenuVisible = ref(false);
 
   const isUserMenuVisible = ref(false);
@@ -67,13 +68,106 @@ export const useSidenav = (props: SidenavPropTypes, emit: SetupContext<SidenavEm
   const generateId = (...titles: string[]): string => {
     return titles.map(transformToCamelCaseId).join('_');
   }
+  const confirmIfOwnDomain = (url: string) => {
+    const domain = window.location.href; 
+    const urlHostname = new URL(url).hostname;
+    const isOwnDomain = domain === urlHostname || window.location.hostname === 'localhost'
+    return isOwnDomain;
+  }
+
+  const getPathFromUrl = (url: string): string => {
+    const parsedUrl = new URL(url);
+    return parsedUrl ? parsedUrl.pathname : ''; 
+    
+  }
+
+  const navLinkCondition = (link: NavItem) => {
+    if (confirmIfOwnDomain(link.url as string)) {
+        return getPathFromUrl(link.url as string);
+    } else {
+        return link.url;
+    }
+  }
+
+  const groupByGroupId = (items: NavItem[]) => {
+    const groups: Record<string, NavItem[]> = {};
+    items.forEach(item => {
+        if (!groups[item.groupId]) {
+            groups[item.groupId] = [];
+        }
+        groups[item.groupId].push(item);
+    });
+    return Object.values(groups).map(group => ({ parentLinks: group.map(mapItemToNav) }));
+  }
+
+  const mapItemToNav = (item: NavItem): ParentLinkItem => {
+    return {
+        title: item.label,
+        icon: item.icon || "",
+        redirect: item.url
+            ? {
+                openInNewTab: item.isNewTab || false,
+                isAbsoluteURL: !confirmIfOwnDomain(item.url),
+                link: navLinkCondition(item) || "",
+            }
+            : undefined,
+        menuLinks: item.children && item.children.length > 0
+            ? [{
+                menuHeading: '',
+                items: item.children.map(child => mapItemToNav(child))
+            }]
+            : [],
+        submenuLinks: item.children && item.children.length > 0 && !item.children.some(c => c.children)
+            ? [{
+                subMenuHeading: '',
+                items: item.children.map(child => mapItemToNav(child)),
+            }]
+            : [],
+    }
+  }
+
+  // Helper function to extract valid NavItems from an array of objects
+  const extractValidNavItems = <T extends Record<string, unknown>>(items: T[]): NavItem[] => {
+    return items.filter((item): item is NavItem & T => (
+      item !== null && 
+      'groupId' in item &&
+      'label' in item &&
+      typeof item.groupId === 'string' && 
+      typeof item.label === 'string'
+    )) as NavItem[];
+  };
+
+  const transformedNavItems = async (apiData: NavLinks) => {
+    // Output type matches navLinks ref type
+    const transformedData: NavLinks = { top: [], bottom: [] };
+    
+    if (apiData.top && Array.isArray(apiData.top)) {
+      const validTopItems = extractValidNavItems(apiData.top);
+      transformedData.top = groupByGroupId(validTopItems);
+    }
+    
+    if (apiData.bottom && Array.isArray(apiData.bottom)) {
+      const validBottomItems = extractValidNavItems(apiData.bottom);
+      transformedData.bottom = groupByGroupId(validBottomItems);
+    }
+
+    return transformedData;
+  }
+
+  onMounted(async () => {
+    if (props.isNavApi) {
+      navLinks.value = await transformedNavItems(props.navLinks);
+    }
+  })
 
   return {
+    navLinks,
     isQuckActionMenuVisible,
     isUserMenuVisible,
     userProfileError,
     getUserInitials,
     handleRedirect,
-    generateId
+    generateId,
+    transformedNavItems,
   };
 };