@elliemae/ds-left-navigation 3.22.0-next.2 → 3.22.0-next.21

package/dist/types/exported-related/Icon/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
+import { type SvgIconT } from '@elliemae/ds-icons';
 export declare const Icon: (IconComponent: React.ComponentType<{
     color: unknown;
     tabIndex: number;
-}>) => (props: unknown) => JSX.Element;
+}>) => (props?: SvgIconT.Props) => JSX.Element;

package/dist/types/exported-related/ItemRenderer/index.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import type { ItemRendererT } from '../../index.d';
-export declare const ItemRenderer: React.ComponentType<ItemRendererT>;
+import type { DSLeftNavigationT } from '../../react-desc-prop-types.js';
+export declare const ItemRenderer: React.ComponentType<DSLeftNavigationT.ItemRendererT>;

package/dist/types/exported-related/ItemRenderer/styled.d.ts

@@ -10,6 +10,7 @@ interface ItemProps {
 export declare const borderOutside: (color: string, weight?: number) => string;
 export declare const StyledItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, Theme, {
     minHeight: string;
+    selectedParent: boolean;
 } & ItemProps & import("@elliemae/ds-system").OwnerInterface, never>;
 export declare const StyledCollapsedContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
 export declare const StyledBorderBottom: import("styled-components").StyledComponent<"div", Theme, {

package/dist/types/exported-related/ItemRenderer/usePropsWithDefaults.d.ts

@@ -1,2 +1,2 @@
-import type { ItemRendererT } from '../../index.d';
-export declare const usePropsWithDefaults: (props: ItemRendererT) => Required<ItemRendererT>;
+import type { DSLeftNavigationT } from '../../react-desc-prop-types.js';
+export declare const usePropsWithDefaults: (props: DSLeftNavigationT.ItemRendererT) => Required<DSLeftNavigationT.ItemRendererT>;

package/dist/types/exported-related/Notifications/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type NotificationsProps = {
     exceptions?: boolean;
     alerts?: boolean;

package/dist/types/exported-related/OpenWindowItem/index.d.ts

@@ -1,2 +1,4 @@
-export declare const OpenWindow: (props: unknown) => JSX.Element;
+/// <reference types="react" />
+import { type SvgIconT } from '@elliemae/ds-icons';
+export declare const OpenWindow: (props: SvgIconT.Props) => JSX.Element;
 export default OpenWindow;

package/dist/types/exported-related/constants.d.ts

@@ -15,6 +15,17 @@ export declare const ITEM_TYPES: {
     LEFT_NAV_ITEM_TEXT_LABEL: string;
     LEFT_NAV_ITEM_WITH_DATE: string;
 };
+export declare const MAP_ITEMS_TO_SKELETON: {
+    readonly 'ds-left-nav-item-header': "item";
+    readonly 'ds-left-nav-item-link': "subitem";
+    readonly 'ds-left-nav-item-submenu': "item";
+    readonly 'ds-left-nav-item-controlled-drilldown': "subitem";
+    readonly 'ds-left-nav-item-uncontrolled-drilldown': "subitem";
+    readonly 'ds-left-nav-item-section': "subitem";
+    readonly 'ds-left-nav-item-separator': "subitem";
+    readonly 'ds-left-nav-item-text-label': "subitem";
+    readonly 'ds-left-nav-item-with-date': "subitem";
+};
 export declare const FOOTER_DS_ID = "ds-left-nav-__internal__-footer";
 export declare const FOOTER_MENU_CLOSE_DS_ID = "ds-left-nav-__internal__-footer-menu-close";
 export declare const CHEVRON_BACK_DS_ID = "ds-left-nav-__internal__-chevron-back";

package/dist/types/hooks/useExpandableOnClickHandler.d.ts

@@ -1,9 +1,9 @@
 import type React from 'react';
-type useExpandableOnClickHandlerProps = {
+type UseExpandableOnClickHandlerProps = {
     id: string;
     onExpand: React.MouseEventHandler & React.KeyboardEventHandler;
     onOpen: React.MouseEventHandler & React.KeyboardEventHandler;
     selectable?: boolean;
 };
-export declare const useExpandableOnClickHandler: ({ id, onExpand, onOpen, selectable, }: useExpandableOnClickHandlerProps) => (e: React.MouseEvent<HTMLElement>) => void;
+export declare const useExpandableOnClickHandler: ({ id, onExpand, onOpen, selectable, }: UseExpandableOnClickHandlerProps) => (e: React.MouseEvent<HTMLElement>) => void;
 export {};

package/dist/types/hooks/useKeyboardNavigation.d.ts

@@ -1,8 +1,8 @@
 import type React from 'react';
-import type { GenericItemItemProps } from '../index.d';
-type useKeyboardNavigationProps = {
-    item: GenericItemItemProps;
+import type { DSLeftNavigationT } from '../react-desc-prop-types.js';
+type UseKeyboardNavigationProps = {
+    item: DSLeftNavigationT.GenericItemItemProps;
     onClick: (e: any) => void;
 };
-export declare const useKeyboardNavigation: ({ item, onClick }: useKeyboardNavigationProps) => React.KeyboardEventHandler;
+export declare const useKeyboardNavigation: ({ item, onClick }: UseKeyboardNavigationProps) => React.KeyboardEventHandler;
 export {};

package/dist/types/hooks/useOpenableOnClickHandler.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-type useOpenableOnClickHandlerProps = {
+type UseOpenableOnClickHandlerProps = {
     id: string;
     onExpand: React.MouseEventHandler & React.KeyboardEventHandler;
     onOpen: React.MouseEventHandler & React.KeyboardEventHandler;
     onClose: React.MouseEventHandler & React.KeyboardEventHandler;
     opened: boolean;
 };
-export declare const useOpenableOnClickHandler: ({ id, opened, onExpand, onOpen, onClose, }: useOpenableOnClickHandlerProps) => (e: React.MouseEvent<HTMLElement>) => void;
+export declare const useOpenableOnClickHandler: ({ id, opened, onExpand, onOpen, onClose, }: UseOpenableOnClickHandlerProps) => (e: React.MouseEvent<HTMLElement>) => void;
 export {};

package/dist/types/hooks/useSelectFirstBodyItem.d.ts

@@ -1,3 +1,3 @@
 import type React from 'react';
-import type { GenericItemItemProps } from '../index.d';
-export declare const useSelectFirstBodyItem: (items: GenericItemItemProps[], openedItem: string | null, selectedItem: string | null, setSelectedItem: React.Dispatch<React.SetStateAction<string | null>>, disableDefaultSelection: boolean | undefined) => void;
+import type { DSLeftNavigationT } from '../react-desc-prop-types.js';
+export declare const useSelectFirstBodyItem: (items: DSLeftNavigationT.GenericItemItemProps[], openedItem: string | null, selectedItem: string | null, setSelectedItem: React.Dispatch<React.SetStateAction<string | null>>, disableDefaultSelection: boolean | undefined) => void;

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 import { LeftNavigation } from './LeftNavigation.js';
 export default LeftNavigation;
-export { LeftNavItemPropsSchema, LeftNavItemOptionsSchema } from './prop-types.js';
+export { LeftNavItemPropsSchema, LeftNavItemOptionsSchema, type DSLeftNavigationT } from './react-desc-prop-types.js';
 export { LeftNavigation, LeftNavigationWithSchema } from './LeftNavigation.js';
 export * from './exported-related/index.js';
 export * from './constants/index.js';

package/dist/types/outOfTheBox/ItemControlledDrilldown/index.d.ts

@@ -1,2 +1,3 @@
-import type { ComponentProps } from '../../index.d';
-export declare const ItemControlledDrilldown: (props: ComponentProps) => JSX.Element;
+/// <reference types="react" />
+import type { DSLeftNavigationT } from '../../react-desc-prop-types.js';
+export declare const ItemControlledDrilldown: (props: DSLeftNavigationT.ComponentProps) => JSX.Element;

package/dist/types/outOfTheBox/ItemHeader/index.d.ts

@@ -1,2 +1,3 @@
-import type { ComponentProps } from '../../index.d';
-export declare const ItemHeader: (props: ComponentProps) => JSX.Element;
+/// <reference types="react" />
+import type { DSLeftNavigationT } from '../../react-desc-prop-types.js';
+export declare const ItemHeader: (props: DSLeftNavigationT.ComponentProps) => JSX.Element;

package/dist/types/outOfTheBox/ItemLink/index.d.ts

@@ -1,2 +1,3 @@
-import type { ComponentProps } from '../../index.d';
-export declare const ItemLink: (props: ComponentProps) => JSX.Element;
+/// <reference types="react" />
+import type { DSLeftNavigationT } from '../../react-desc-prop-types.js';
+export declare const ItemLink: (props: DSLeftNavigationT.ComponentProps) => JSX.Element;

package/dist/types/outOfTheBox/ItemSection/index.d.ts

@@ -1,2 +1,3 @@
-import type { ComponentProps } from '../../index.d';
-export declare const ItemSection: (props: ComponentProps) => JSX.Element;
+/// <reference types="react" />
+import type { DSLeftNavigationT } from '../../react-desc-prop-types.js';
+export declare const ItemSection: (props: DSLeftNavigationT.ComponentProps) => JSX.Element;

package/dist/types/outOfTheBox/ItemSeparator/index.d.ts

@@ -1,2 +1,3 @@
-import type { ComponentProps } from '../../index.d';
-export declare const ItemSeparator: (props: ComponentProps) => JSX.Element;
+/// <reference types="react" />
+import type { DSLeftNavigationT } from '../../react-desc-prop-types.js';
+export declare const ItemSeparator: (props: DSLeftNavigationT.ComponentProps) => JSX.Element;

package/dist/types/outOfTheBox/ItemSkeleton/index.d.ts

@@ -1,2 +1,8 @@
-import type { ComponentProps } from '../../index.d';
-export declare const ItemSkeleton: (props: ComponentProps) => JSX.Element;
+/// <reference types="react" />
+import type { DSLeftNavigationT } from '../../react-desc-prop-types.js';
+interface SkeletonPropsT {
+    item: DSLeftNavigationT.ComponentProps['item'];
+    hasBorderBottom?: boolean;
+}
+export declare const ItemSkeleton: (props: SkeletonPropsT) => JSX.Element;
+export {};

package/dist/types/outOfTheBox/ItemSubmenu/index.d.ts

@@ -1,2 +1,3 @@
-import type { ComponentProps } from '../../index.d';
-export declare const ItemSubmenu: (props: ComponentProps) => JSX.Element;
+/// <reference types="react" />
+import type { DSLeftNavigationT } from '../../react-desc-prop-types.js';
+export declare const ItemSubmenu: (props: DSLeftNavigationT.ComponentProps) => JSX.Element;

package/dist/types/outOfTheBox/ItemTextLabel/index.d.ts

@@ -1,2 +1,3 @@
-import type { ComponentProps } from '../../index.d';
-export declare const ItemTextLabel: (props: ComponentProps) => JSX.Element;
+/// <reference types="react" />
+import type { DSLeftNavigationT } from '../../react-desc-prop-types.js';
+export declare const ItemTextLabel: (props: DSLeftNavigationT.ComponentProps) => JSX.Element;

package/dist/types/outOfTheBox/ItemUncontrolledDrilldown/index.d.ts

@@ -1,2 +1,3 @@
-import type { ComponentProps } from '../../index.d';
-export declare const ItemUncontrolledDrilldown: (props: ComponentProps) => JSX.Element;
+/// <reference types="react" />
+import type { DSLeftNavigationT } from '../../react-desc-prop-types.js';
+export declare const ItemUncontrolledDrilldown: (props: DSLeftNavigationT.ComponentProps) => JSX.Element;

package/dist/types/outOfTheBox/ItemWithDate/index.d.ts

@@ -1,2 +1,3 @@
-import type { ComponentProps } from '../../index.d';
-export declare const ItemWithDate: (props: ComponentProps) => JSX.Element;
+/// <reference types="react" />
+import type { DSLeftNavigationT } from '../../react-desc-prop-types.js';
+export declare const ItemWithDate: (props: DSLeftNavigationT.ComponentProps) => JSX.Element;

package/dist/types/outOfTheBox/index.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { ComponentProps } from '../index.d';
+import type { DSLeftNavigationT } from '../react-desc-prop-types.js';
 export * from './ItemControlledDrilldown/index.js';
 export * from './ItemUncontrolledDrilldown/index.js';
 export * from './ItemHeader/index.js';
@@ -11,4 +11,4 @@ export * from './ItemSubmenu/index.js';
 export * from './ItemTextLabel/index.js';
 export * from './ItemWithDate/index.js';
 export declare const outOfTheBoxTypes: string[];
-export declare const outOfTheBoxComponents: Record<string, React.ComponentType<ComponentProps>>;
+export declare const outOfTheBoxComponents: Record<string, React.ComponentType<DSLeftNavigationT.ComponentProps>>;

package/dist/types/outOfTheBox/styled.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { type Theme } from '@elliemae/ds-system';
+import type { DSLeftNavigationT } from '../react-desc-prop-types.js';
 type ColorsKey = keyof Theme['colors'];
 interface StyledLabelT {
     labelBold?: boolean;
@@ -17,7 +18,7 @@ export declare const StyledSectionContainer: import("styled-components").StyledC
 export declare const StyledBottomContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
 export declare const StyledLeftContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
 export declare const StyledItemLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, Theme, {
-    labelOverflow: string;
+    labelOverflow?: DSLeftNavigationT.LabelOveflowT | undefined;
 } & import("@elliemae/ds-system").OwnerInterface, never>;
 export declare const StyledChevronLeft: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonT.Props>, Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
 export {};

package/dist/types/parts/LeftNavContent/styled.d.ts

@@ -14,8 +14,10 @@ export declare const StyledLeftNavBodyAreasContainer: import("styled-components"
 export declare const StyledLeftNavBodyHeaderArea: import("styled-components").StyledComponent<"div", Theme, {
     selected: boolean;
     selectedParent?: boolean | undefined;
+    isSkeleton: boolean;
 } & import("@elliemae/ds-system").OwnerInterface, never>;
 export declare const StyledLeftNavBodyItemsArea: import("styled-components").StyledComponent<"div", Theme, {
     selected: boolean;
+    isSkeleton: boolean;
 } & import("@elliemae/ds-system").OwnerInterface, never>;
 export {};

package/dist/types/parts/LeftNavFooterItem/styled.d.ts

@@ -1,12 +1,14 @@
 /// <reference types="react" />
+import type { DSLeftNavigationT } from '../../react-desc-prop-types.js';
 export declare const StyledFooterMenu: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
 export declare const StyledFooterItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
-    expanded: boolean;
-    opened: boolean;
-    selected: boolean;
+    expanded?: boolean | undefined;
+    opened?: boolean | undefined;
+    selected?: boolean | undefined;
+    selectedParent?: boolean | undefined;
 } & import("@elliemae/ds-system").OwnerInterface, never>;
 export declare const StyledFooterLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
-    labelOverflow: string;
+    labelOverflow?: DSLeftNavigationT.LabelOveflowT | undefined;
 } & import("@elliemae/ds-system").OwnerInterface, never>;
 export declare const StyledFooterSeparator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
 export declare const StyledMenuCollapse: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;

package/dist/types/parts/OutOfTheBoxMapItem.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import type { OutOfTheBoxMapItemT } from '../index.d';
-export declare const OutOfTheBoxMapItem: React.ComponentType<OutOfTheBoxMapItemT>;
+import type { DSLeftNavigationT } from '../react-desc-prop-types.js';
+export declare const OutOfTheBoxMapItem: React.ComponentType<DSLeftNavigationT.OutOfTheBoxMapItemT>;

package/dist/types/react-desc-prop-types.d.ts

@@ -0,0 +1,100 @@
+import type { WeakValidationMap } from 'react';
+import { type Theme } from '@elliemae/ds-system';
+import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
+import type { ContextProps } from './LeftNavigationContext.js';
+type ColorsKey = keyof Theme['colors'];
+export declare namespace DSLeftNavigationT {
+    type LabelOveflowT = 'wrap' | 'wrapAll' | 'truncate';
+    interface DefaultProps {
+        expanded: boolean;
+        expandedWidth: string;
+        openedItem: string | null;
+        items: GenericItemItemProps[];
+        footerLabel: string | JSX.Element;
+        labelOverflow: LabelOveflowT;
+        onSelectedChange: (item: string | null) => void;
+        onFocusChange: (item: string | null) => void;
+        onFooterExpand: () => void;
+        onFooterClose: () => void;
+        onItemClick: (item: GenericItemItemProps, e: React.MouseEvent<HTMLElement>) => void;
+        loading: boolean;
+        isSkeleton: boolean;
+    }
+    interface OptionalProps {
+        selectedItem?: string | null;
+        selectedParent?: string | null;
+        disableDefaultSelection?: boolean;
+        withoutBodyShadow?: boolean;
+        actionRef?: React.RefObject<{
+            setFocusedItem: React.Dispatch<React.SetStateAction<string | null>>;
+        }>;
+        HeaderComponent?: GenericItemItemProps;
+        BodyHeaderComponent?: GenericItemItemProps;
+    }
+    interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>, XstyledProps {
+    }
+    interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps>, XstyledProps {
+    }
+    type OutOfTheBoxT = 'ds-left-nav-item-header' | 'ds-left-nav-item-link' | 'ds-left-nav-item-submenu' | 'ds-left-nav-item-controlled-drilldown' | 'ds-left-nav-item-uncontrolled-drilldown' | 'ds-left-nav-item-section' | 'ds-left-nav-item-separator' | 'ds-left-nav-item-text-label' | 'ds-left-nav-item-with-date';
+    interface ItemOptsT extends Record<string, unknown> {
+        label?: string | JSX.Element;
+        labelBold?: boolean;
+        labelColor?: [ColorsKey, keyof Theme['colors'][ColorsKey]];
+        labelOverflow?: LabelOveflowT;
+        labelRightSection?: string | JSX.Element;
+        selectable?: boolean;
+        focuseable?: boolean;
+        startOpened?: boolean;
+        isOpened?: boolean;
+        openable?: boolean;
+        closable?: boolean;
+        indent?: number;
+        LeftComponent?: React.ComponentType<ComponentProps>;
+        RightComponent?: React.ComponentType<ComponentProps>;
+        BottomComponent?: React.ComponentType<ComponentProps>;
+        ariaLabel?: string;
+        ariaRole?: string;
+        ariaLive?: string;
+        ariaExpanded?: boolean;
+        ariaDescribedBy?: string;
+        items?: GenericItemItemProps[];
+        labelDataTestId?: string;
+        skeletonVariant?: 'item' | 'subitem';
+    }
+    interface ComponentProps {
+        item: GenericItemItemProps;
+        ctx: ContextProps;
+    }
+    interface GenericItemItemProps {
+        dsId?: string;
+        type?: string;
+        CollapsedComponent?: React.ComponentType<ComponentProps> | null;
+        Component?: React.ComponentType<ComponentProps>;
+        itemOpts: ItemOptsT;
+    }
+    interface OutOfTheBoxMapItemT {
+        item: GenericItemItemProps;
+    }
+    interface ItemRendererT {
+        item: GenericItemItemProps;
+        subitems?: JSX.Element[];
+        minHeight?: string;
+        paddingTop?: string;
+        onClick?: () => void;
+        shadowStyle?: (opened: boolean, type?: string) => (theme: Theme) => string;
+        hasBorderBottom?: boolean;
+        borderBottomMr?: string;
+        children: React.ReactNode;
+    }
+}
+export declare const leftNavItemProps: {
+    type: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+    dsId: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+    Component: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+    CollapsedComponent: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+    itemOpts: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+};
+export declare const leftNavigationProps: WeakValidationMap<DSLeftNavigationT.Props>;
+export declare const LeftNavItemPropsSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<unknown>;
+export declare const LeftNavItemOptionsSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<unknown>;
+export {};

package/dist/types/typescript-testing/typescript-left-navigation-valid.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-left-navigation",
-  "version": "3.22.0-next.2",
+  "version": "3.22.0-next.21",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Left Navigation",
   "files": [
@@ -235,21 +235,23 @@
     "typeSafety": false
   },
   "dependencies": {
-    "@elliemae/ds-button-v2": "3.22.0-next.2",
-    "@elliemae/ds-circular-progress-indicator": "3.22.0-next.2",
-    "@elliemae/ds-grid": "3.22.0-next.2",
-    "@elliemae/ds-icons": "3.22.0-next.2",
-    "@elliemae/ds-props-helpers": "3.22.0-next.2",
-    "@elliemae/ds-skeleton": "3.22.0-next.2",
-    "@elliemae/ds-system": "3.22.0-next.2",
-    "@elliemae/ds-truncated-tooltip-text": "3.22.0-next.2"
+    "@elliemae/ds-button-v2": "3.22.0-next.21",
+    "@elliemae/ds-circular-progress-indicator": "3.22.0-next.21",
+    "@elliemae/ds-grid": "3.22.0-next.21",
+    "@elliemae/ds-icons": "3.22.0-next.21",
+    "@elliemae/ds-props-helpers": "3.22.0-next.21",
+    "@elliemae/ds-skeleton": "3.22.0-next.21",
+    "@elliemae/ds-system": "3.22.0-next.21",
+    "@elliemae/ds-truncated-tooltip-text": "3.22.0-next.21"
   },
   "devDependencies": {
+    "@elliemae/pui-cli": "~9.0.0-next.22",
     "@testing-library/jest-dom": "~5.16.5",
     "@testing-library/react": "~12.1.3",
     "@testing-library/user-event": "~13.5.0",
     "jest-axe": "^7.0.1",
-    "styled-components": "~5.3.9"
+    "styled-components": "~5.3.9",
+    "@elliemae/ds-monorepo-devops": "3.22.0-next.21"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
@@ -258,7 +260,7 @@
     "styled-components": "~5.3.9"
   },
   "scripts": {
-    "test": "node ../../scripts/testing/test.mjs",
+    "test": "pui-cli test --passWithNoTests",
     "lint": "node ../../scripts/lint.mjs",
     "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
     "dts": "node ../../scripts/dts.mjs",

package/dist/cjs/index.d.js

@@ -1,28 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var index_d_exports = {};
-module.exports = __toCommonJS(index_d_exports);
-var React = __toESM(require("react"));
-//# sourceMappingURL=index.d.js.map

package/dist/cjs/index.d.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/index.d.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\nimport { type Theme } from '@elliemae/ds-system';\nimport type { ContextProps } from './LeftNavigationContext.js';\n\nexport type LabelOveflowT = 'wrap' | 'wrapAll' | 'truncate';\nexport interface LeftNavProps {\n  expanded: boolean;\n  expandedWidth: string;\n  openedItem: string | null;\n  items: GenericItemItemProps[];\n  footerLabel: string;\n  labelOverflow: LabelOveflowT;\n  onSelectedChange: (item: string | null) => void;\n  onFocusChange: (item: string | null) => void;\n  onFooterExpand: () => void;\n  onFooterClose: () => void;\n  onItemClick: (item: GenericItemItemProps, e: React.MouseEvent<HTMLElement>) => void;\n  HeaderComponent?: GenericItemItemProps;\n  BodyHeaderComponent?: GenericItemItemProps;\n  loading: boolean;\n  selectedItem?: string;\n  selectedParent?: string;\n  disableDefaultSelection?: boolean;\n  withoutBodyShadow?: boolean;\n  actionRef?: React.RefObject<{ setFocusedItem: React.Dispatch<React.SetStateAction<string | null>> }>;\n}\nexport type OutOfTheBoxT =\n  | 'ds-left-nav-item-header'\n  | 'ds-left-nav-item-link'\n  | 'ds-left-nav-item-submenu'\n  | 'ds-left-nav-item-controlled-drilldown'\n  | 'ds-left-nav-item-uncontrolled-drilldown'\n  | 'ds-left-nav-item-section'\n  | 'ds-left-nav-item-separator'\n  | 'ds-left-nav-item-text-label'\n  | 'ds-left-nav-item-with-date';\n\nexport interface ItemOptsT {\n  label?: string | JSX.Element;\n  labelBold?: boolean;\n  labelColor?: [string, string];\n  labelOverflow?: LabelOveflowT;\n  labelRightSection?: string | JSX.Element;\n  selectable?: boolean;\n  focuseable?: boolean;\n  startOpened?: boolean;\n  isOpened?: boolean;\n  openable?: boolean;\n  closable?: boolean;\n  indent?: number;\n  LeftComponent?: React.ComponentType<ComponentProps>;\n  RightComponent?: React.ComponentType<ComponentProps>;\n  BottomComponent?: React.ComponentType<ComponentProps>;\n  ariaLabel?: string;\n  ariaRole?: string;\n  ariaLive?: string;\n  ariaExpanded?: boolean;\n  ariaDescribedBy?: string;\n  items?: GenericItemItemProps[];\n  labelDataTestId?: string;\n  skeletonVariant?: 'item' | 'subitem';\n}\n\nexport interface ComponentProps {\n  item: GenericItemItemProps;\n  ctx: ContextProps;\n}\nexport interface GenericItemItemProps {\n  dsId?: string;\n  type?: string;\n  CollapsedComponent?: React.ComponentType<ComponentProps> | null;\n  Component?: React.ComponentType<ComponentProps>;\n  itemOpts: ItemOptsT;\n}\nexport interface OutOfTheBoxMapItemT {\n  item: GenericItemItemProps;\n}\nexport interface ItemRendererT {\n  item: GenericItemItemProps;\n  subitems?: JSX.Element[];\n  minHeight?: string;\n  paddingTop?: string;\n  onClick?: () => void;\n  shadowStyle?: (opened: boolean, type: string) => (theme: Theme) => string;\n  hasBorderBottom?: boolean;\n  borderBottomMr?: string;\n  children: React.ReactNode;\n}\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
-  "names": []
-}

package/dist/cjs/prop-types.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { outOfTheBoxTypes } from './outOfTheBox/index.js';\n\nexport const leftNavItemProps = {\n  type: PropTypes.oneOf(outOfTheBoxTypes).description('out of the box types'),\n  dsId: PropTypes.string.description('unique identifier for the left nav item'),\n  Component: PropTypes.func.description(\n    \"A custom component, receives the item as prop. This is used only when type is not defined or doesn't matches any out-of-the-box\",\n  ),\n  CollapsedComponent: PropTypes.func.description('A component which is renderer when the left-nav is collapsed'),\n  itemOpts: PropTypes.object.description('Item options'),\n};\n\nexport const leftNavigationProps = {\n  containerProps: PropTypes.shape({ expandedWidth: PropTypes.string })\n    .description('Set of Properties attached to the main container')\n    .defaultValue({ expandedWidth: '240px' }),\n  expanded: PropTypes.bool.description('Whether to show the left navigation expanded or collapsed').defaultValue(false),\n  loading: PropTypes.bool.description('Whether the left-nav is loading').defaultValue(false),\n  openedItem: PropTypes.string\n    .description('The id of the left navigation item you want to be opened')\n    .defaultValue(null),\n  footerLabel: PropTypes.string.description('The label to show in the footer item'),\n  onFooterExpand: PropTypes.func.description('The function to call when the left-nav is opened via the footer'),\n  onFooterClose: PropTypes.func.description('The function to call when the left-nav is closed via the footer'),\n  onSelectedChange: PropTypes.func\n    .description('A callback which triggers when the selected item changes')\n    .defaultValue(() => null),\n  onFocusChange: PropTypes.func\n    .description('A callback which triggers when the focused item changes')\n    .defaultValue(() => null),\n  items: PropTypes.arrayOf(PropTypes.object)\n    .description('The array of items you want to render inside the left nav')\n    .defaultValue([]),\n  disableDefaultSelection: PropTypes.bool\n    .description('Whether you do not want to automatically select the first body item')\n    .defaultValue(false),\n};\n\nconst LeftNavItemProps = () => null;\nLeftNavItemProps.displayName = 'LeftNavItemProps';\nexport const LeftNavItemPropsSchema = describe(LeftNavItemProps);\nLeftNavItemPropsSchema.propTypes = leftNavItemProps;\n\nconst LeftNavItemOptions = () => null;\nLeftNavItemOptions.displayName = 'LeftNavItemOptions';\nexport const LeftNavItemOptionsSchema = describe(LeftNavItemOptions);\nLeftNavItemOptionsSchema.propTypes = leftNavItemProps;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAoC;AACpC,yBAAiC;AAE1B,MAAM,mBAAmB;AAAA,EAC9B,MAAM,kCAAU,MAAM,mCAAgB,EAAE,YAAY,sBAAsB;AAAA,EAC1E,MAAM,kCAAU,OAAO,YAAY,yCAAyC;AAAA,EAC5E,WAAW,kCAAU,KAAK;AAAA,IACxB;AAAA,EACF;AAAA,EACA,oBAAoB,kCAAU,KAAK,YAAY,8DAA8D;AAAA,EAC7G,UAAU,kCAAU,OAAO,YAAY,cAAc;AACvD;AAEO,MAAM,sBAAsB;AAAA,EACjC,gBAAgB,kCAAU,MAAM,EAAE,eAAe,kCAAU,OAAO,CAAC,EAChE,YAAY,kDAAkD,EAC9D,aAAa,EAAE,eAAe,QAAQ,CAAC;AAAA,EAC1C,UAAU,kCAAU,KAAK,YAAY,2DAA2D,EAAE,aAAa,KAAK;AAAA,EACpH,SAAS,kCAAU,KAAK,YAAY,iCAAiC,EAAE,aAAa,KAAK;AAAA,EACzF,YAAY,kCAAU,OACnB,YAAY,0DAA0D,EACtE,aAAa,IAAI;AAAA,EACpB,aAAa,kCAAU,OAAO,YAAY,sCAAsC;AAAA,EAChF,gBAAgB,kCAAU,KAAK,YAAY,iEAAiE;AAAA,EAC5G,eAAe,kCAAU,KAAK,YAAY,iEAAiE;AAAA,EAC3G,kBAAkB,kCAAU,KACzB,YAAY,0DAA0D,EACtE,aAAa,MAAM,IAAI;AAAA,EAC1B,eAAe,kCAAU,KACtB,YAAY,yDAAyD,EACrE,aAAa,MAAM,IAAI;AAAA,EAC1B,OAAO,kCAAU,QAAQ,kCAAU,MAAM,EACtC,YAAY,2DAA2D,EACvE,aAAa,CAAC,CAAC;AAAA,EAClB,yBAAyB,kCAAU,KAChC,YAAY,qEAAqE,EACjF,aAAa,KAAK;AACvB;AAEA,MAAM,mBAAmB,MAAM;AAC/B,iBAAiB,cAAc;AACxB,MAAM,6BAAyB,kCAAS,gBAAgB;AAC/D,uBAAuB,YAAY;AAEnC,MAAM,qBAAqB,MAAM;AACjC,mBAAmB,cAAc;AAC1B,MAAM,+BAA2B,kCAAS,kBAAkB;AACnE,yBAAyB,YAAY;",
-  "names": []
-}

package/dist/esm/index.d.js

@@ -1,2 +0,0 @@
-import * as React from "react";
-//# sourceMappingURL=index.d.js.map

package/dist/esm/index.d.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
-  "mappings": "AAAA,YAAY,WAAW;",
-  "names": []
-}

package/dist/esm/prop-types.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { outOfTheBoxTypes } from './outOfTheBox/index.js';\n\nexport const leftNavItemProps = {\n  type: PropTypes.oneOf(outOfTheBoxTypes).description('out of the box types'),\n  dsId: PropTypes.string.description('unique identifier for the left nav item'),\n  Component: PropTypes.func.description(\n    \"A custom component, receives the item as prop. This is used only when type is not defined or doesn't matches any out-of-the-box\",\n  ),\n  CollapsedComponent: PropTypes.func.description('A component which is renderer when the left-nav is collapsed'),\n  itemOpts: PropTypes.object.description('Item options'),\n};\n\nexport const leftNavigationProps = {\n  containerProps: PropTypes.shape({ expandedWidth: PropTypes.string })\n    .description('Set of Properties attached to the main container')\n    .defaultValue({ expandedWidth: '240px' }),\n  expanded: PropTypes.bool.description('Whether to show the left navigation expanded or collapsed').defaultValue(false),\n  loading: PropTypes.bool.description('Whether the left-nav is loading').defaultValue(false),\n  openedItem: PropTypes.string\n    .description('The id of the left navigation item you want to be opened')\n    .defaultValue(null),\n  footerLabel: PropTypes.string.description('The label to show in the footer item'),\n  onFooterExpand: PropTypes.func.description('The function to call when the left-nav is opened via the footer'),\n  onFooterClose: PropTypes.func.description('The function to call when the left-nav is closed via the footer'),\n  onSelectedChange: PropTypes.func\n    .description('A callback which triggers when the selected item changes')\n    .defaultValue(() => null),\n  onFocusChange: PropTypes.func\n    .description('A callback which triggers when the focused item changes')\n    .defaultValue(() => null),\n  items: PropTypes.arrayOf(PropTypes.object)\n    .description('The array of items you want to render inside the left nav')\n    .defaultValue([]),\n  disableDefaultSelection: PropTypes.bool\n    .description('Whether you do not want to automatically select the first body item')\n    .defaultValue(false),\n};\n\nconst LeftNavItemProps = () => null;\nLeftNavItemProps.displayName = 'LeftNavItemProps';\nexport const LeftNavItemPropsSchema = describe(LeftNavItemProps);\nLeftNavItemPropsSchema.propTypes = leftNavItemProps;\n\nconst LeftNavItemOptions = () => null;\nLeftNavItemOptions.displayName = 'LeftNavItemOptions';\nexport const LeftNavItemOptionsSchema = describe(LeftNavItemOptions);\nLeftNavItemOptionsSchema.propTypes = leftNavItemProps;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,gBAAgB;AACpC,SAAS,wBAAwB;AAE1B,MAAM,mBAAmB;AAAA,EAC9B,MAAM,UAAU,MAAM,gBAAgB,EAAE,YAAY,sBAAsB;AAAA,EAC1E,MAAM,UAAU,OAAO,YAAY,yCAAyC;AAAA,EAC5E,WAAW,UAAU,KAAK;AAAA,IACxB;AAAA,EACF;AAAA,EACA,oBAAoB,UAAU,KAAK,YAAY,8DAA8D;AAAA,EAC7G,UAAU,UAAU,OAAO,YAAY,cAAc;AACvD;AAEO,MAAM,sBAAsB;AAAA,EACjC,gBAAgB,UAAU,MAAM,EAAE,eAAe,UAAU,OAAO,CAAC,EAChE,YAAY,kDAAkD,EAC9D,aAAa,EAAE,eAAe,QAAQ,CAAC;AAAA,EAC1C,UAAU,UAAU,KAAK,YAAY,2DAA2D,EAAE,aAAa,KAAK;AAAA,EACpH,SAAS,UAAU,KAAK,YAAY,iCAAiC,EAAE,aAAa,KAAK;AAAA,EACzF,YAAY,UAAU,OACnB,YAAY,0DAA0D,EACtE,aAAa,IAAI;AAAA,EACpB,aAAa,UAAU,OAAO,YAAY,sCAAsC;AAAA,EAChF,gBAAgB,UAAU,KAAK,YAAY,iEAAiE;AAAA,EAC5G,eAAe,UAAU,KAAK,YAAY,iEAAiE;AAAA,EAC3G,kBAAkB,UAAU,KACzB,YAAY,0DAA0D,EACtE,aAAa,MAAM,IAAI;AAAA,EAC1B,eAAe,UAAU,KACtB,YAAY,yDAAyD,EACrE,aAAa,MAAM,IAAI;AAAA,EAC1B,OAAO,UAAU,QAAQ,UAAU,MAAM,EACtC,YAAY,2DAA2D,EACvE,aAAa,CAAC,CAAC;AAAA,EAClB,yBAAyB,UAAU,KAChC,YAAY,qEAAqE,EACjF,aAAa,KAAK;AACvB;AAEA,MAAM,mBAAmB,MAAM;AAC/B,iBAAiB,cAAc;AACxB,MAAM,yBAAyB,SAAS,gBAAgB;AAC/D,uBAAuB,YAAY;AAEnC,MAAM,qBAAqB,MAAM;AACjC,mBAAmB,cAAc;AAC1B,MAAM,2BAA2B,SAAS,kBAAkB;AACnE,yBAAyB,YAAY;",
-  "names": []
-}

package/dist/types/index.d.d.ts

@@ -1,78 +0,0 @@
-import type React from 'react';
-import { type Theme } from '@elliemae/ds-system';
-import type { ContextProps } from './LeftNavigationContext.js';
-export type LabelOveflowT = 'wrap' | 'wrapAll' | 'truncate';
-export interface LeftNavProps {
-    expanded: boolean;
-    expandedWidth: string;
-    openedItem: string | null;
-    items: GenericItemItemProps[];
-    footerLabel: string;
-    labelOverflow: LabelOveflowT;
-    onSelectedChange: (item: string | null) => void;
-    onFocusChange: (item: string | null) => void;
-    onFooterExpand: () => void;
-    onFooterClose: () => void;
-    onItemClick: (item: GenericItemItemProps, e: React.MouseEvent<HTMLElement>) => void;
-    HeaderComponent?: GenericItemItemProps;
-    BodyHeaderComponent?: GenericItemItemProps;
-    loading: boolean;
-    selectedItem?: string;
-    selectedParent?: string;
-    disableDefaultSelection?: boolean;
-    withoutBodyShadow?: boolean;
-    actionRef?: React.RefObject<{
-        setFocusedItem: React.Dispatch<React.SetStateAction<string | null>>;
-    }>;
-}
-export type OutOfTheBoxT = 'ds-left-nav-item-header' | 'ds-left-nav-item-link' | 'ds-left-nav-item-submenu' | 'ds-left-nav-item-controlled-drilldown' | 'ds-left-nav-item-uncontrolled-drilldown' | 'ds-left-nav-item-section' | 'ds-left-nav-item-separator' | 'ds-left-nav-item-text-label' | 'ds-left-nav-item-with-date';
-export interface ItemOptsT {
-    label?: string | JSX.Element;
-    labelBold?: boolean;
-    labelColor?: [string, string];
-    labelOverflow?: LabelOveflowT;
-    labelRightSection?: string | JSX.Element;
-    selectable?: boolean;
-    focuseable?: boolean;
-    startOpened?: boolean;
-    isOpened?: boolean;
-    openable?: boolean;
-    closable?: boolean;
-    indent?: number;
-    LeftComponent?: React.ComponentType<ComponentProps>;
-    RightComponent?: React.ComponentType<ComponentProps>;
-    BottomComponent?: React.ComponentType<ComponentProps>;
-    ariaLabel?: string;
-    ariaRole?: string;
-    ariaLive?: string;
-    ariaExpanded?: boolean;
-    ariaDescribedBy?: string;
-    items?: GenericItemItemProps[];
-    labelDataTestId?: string;
-    skeletonVariant?: 'item' | 'subitem';
-}
-export interface ComponentProps {
-    item: GenericItemItemProps;
-    ctx: ContextProps;
-}
-export interface GenericItemItemProps {
-    dsId?: string;
-    type?: string;
-    CollapsedComponent?: React.ComponentType<ComponentProps> | null;
-    Component?: React.ComponentType<ComponentProps>;
-    itemOpts: ItemOptsT;
-}
-export interface OutOfTheBoxMapItemT {
-    item: GenericItemItemProps;
-}
-export interface ItemRendererT {
-    item: GenericItemItemProps;
-    subitems?: JSX.Element[];
-    minHeight?: string;
-    paddingTop?: string;
-    onClick?: () => void;
-    shadowStyle?: (opened: boolean, type: string) => (theme: Theme) => string;
-    hasBorderBottom?: boolean;
-    borderBottomMr?: string;
-    children: React.ReactNode;
-}