design-system-next 2.9.7 → 2.9.9

package/dist/package.json.d.ts

@@ -1,7 +1,7 @@
 declare const _default: {
   "name": "design-system-next",
   "private": false,
-  "version": "2.9.7",
+  "version": "2.9.9",
   "main": "./dist/design-system-next.js",
   "module": "./dist/design-system-next.js",
   "repository": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "design-system-next",
   "private": false,
-  "version": "2.9.7",
+  "version": "2.9.9",
   "main": "./dist/design-system-next.js",
   "module": "./dist/design-system-next.js",
   "repository": {

package/src/App.vue

@@ -1,82 +1,3 @@
 <template>
-  <spr-select-multiple
-    id="sample-select"
-    v-model="selectModel"
-    label="Multi-Select Label"
-    placeholder="Select an option"
-    :options="options"
-  />
-  <br />
-  {{ selectModel }}
-  <br />
-  <br />
-  {{ options }}
-
-  <br />
-  <br />
-
-  <br />
-  <br />
-
-  <br />
-  <br />
-
-  <br />
-  <br />
-
-  <button @click="addMoreOptions">Add more option</button>
+  <div>Test Component Here</div>
 </template>
-
-<script setup>
-import { ref } from 'vue';
-
-import SprSelectMultiple from './components/select/select-multiple/select-multiple.vue';
-
-const selectModel = ref('');
-
-const options = ref([
-  { text: 'Apple', value: 'apple' },
-  { text: 'Banana', value: 'banana' },
-  { text: 'Cherry', value: 'cherry' },
-  { text: 'Date', value: 'date' },
-  { text: 'Elderberry', value: 'elderberry' },
-  { text: 'Fig', value: 'fig' },
-  { text: 'Grape', value: 'grape' },
-  { text: 'Nectarine', value: 'nectarine' },
-  { text: 'Orange', value: 'orange' },
-  { text: 'Papaya', value: 'papaya' },
-  { text: '89 Quince', value: '50' },
-]);
-
-let pagination = ref({
-  currentPage: 1,
-  totalPages: 0,
-});
-
-const addMoreOptions = async () => {
-  try {
-    const response = await fetch(`https://api.thedogapi.com/v1/breeds?page=${pagination.value.currentPage}&limit=10`);
-
-    if (!response.ok) {
-      throw new Error('Network response was not ok');
-    }
-
-    const optionsResponse = await response.json();
-
-    if (optionsResponse.length) {
-      options.value = [
-        ...(options.value || []),
-        ...optionsResponse.map((optionItem) => ({
-          text: optionItem.name,
-          value: optionItem.id,
-        })),
-      ];
-    }
-    // Do not clear options if no new options are fetched
-
-    pagination.value.currentPage += 1;
-  } catch (error) {
-    console.error('There was a problem with the fetch operation:', error);
-  }
-};
-</script>

package/src/components/filter/filter.ts

@@ -73,6 +73,14 @@ export const filterPropTypes = {
     type: Boolean,
     default: false,
   },
+  error: {
+    type: Boolean,
+    default: false,
+  },
+  helperText: {
+    type: String,
+    default: '',
+  },
 };
 
 export interface FilterPropsInterface {

package/src/components/filter/filter.vue

@@ -6,16 +6,17 @@
     placement="bottom"
     :triggers="[]"
     :popper-hide-triggers="[]"
-    :container="`#${uniqueId}`"
+    :container="`#${generateStableId}`"
     :auto-hide="false"
     :delay="0"
+    :popper-class="'filter-menu-popper'"
     :style="{
       width: props.width,
       position: 'relative',
     }"
   >
-    <span
-      :id="uniqueId"
+    <div
+      :id="generateStableId"
       :style="{
         width: props.width,
         position: 'relative',
@@ -30,13 +31,16 @@
           :placeholder="placeholder"
           :label="label"
           :disabled="disabled"
+          :helper-text="props.helperText"
+          :display-helper="!!props.helperText"
+          :error="props.error"
         >
           <template #icon>
             <Icon icon="ph:magnifying-glass" />
           </template>
         </spr-input>
       </slot>
-    </span>
+    </div>
 
     <template #popper>
       <div :class="filterClass.MenuOptionClasses">
@@ -58,6 +62,8 @@
             placement="right-start"
             :triggers="['click']"
             :auto-hide="false"
+            :delay="0"
+            popover-base="filter-menu-base"
           >
             <spr-button id="add-filter-button" has-icon variant="secondary" size="small">
               <Icon icon="ph:faders-horizontal" />
@@ -80,6 +86,8 @@
                     placement="right"
                     :triggers="['click']"
                     :auto-hide="false"
+                    :delay="0"
+                    popover-base="filter-menu-field"
                   >
                     <spr-chips
                       :active="mappedFilterMenuList[menu.field].isFilterVisible"
@@ -268,7 +276,7 @@ const {
   filterMenuSearchvalue,
   mappedFilterMenuList,
   filterClass,
-  uniqueId,
+  generateStableId,
   filterOptionRef,
   filterMenuOptionList,
 

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

@@ -20,7 +20,6 @@ export const useFilter = (props: FilterPropTypes, emit: SetupContext<FilterEmitT
   const isAdvanceFilterVisible = ref<boolean>(false);
   const mappedMenuData = ref<Record<string, FilterPropsInterface['optionDetails']>>({});
   const mappedFilterMenuList = ref<Record<string, FilterPropsInterface['filterDetails']>>({});
-  const uniqueId = ref<string>(`filter-${dayjs().valueOf()}-${Math.floor(Math.random() * 1000)}`);
   const filterMenuList = ref<FilterPropsInterface['filterDetails'][]>(
     filterMenu.value as FilterPropsInterface['filterDetails'][],
   );
@@ -73,6 +72,13 @@ export const useFilter = (props: FilterPropTypes, emit: SetupContext<FilterEmitT
     return getFiltereredMenuOption.value.filter((item) => item.isSelected);
   });
 
+  const generateStableId = computed(() => {
+    if (props.id) {
+      return `filter-popover-${props.id}`;
+    }
+    return `filter-popover-${dayjs().valueOf().toString().slice(-8)}`;
+  });
+
   const getMappedFilterData = (column: string) => {
     emit('getFilterData', column);
     selectedColumn.value = column;
@@ -253,7 +259,7 @@ export const useFilter = (props: FilterPropTypes, emit: SetupContext<FilterEmitT
     filterMenuSearchvalue,
     mappedFilterMenuList,
     filterClass,
-    uniqueId,
+    generateStableId,
     filterOptionRef,
     filterMenuOptionList,
 

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 = {