@epam/ai-dial-navigation-panel 1.2.0-dev.15 → 1.2.0-dev.152

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/components/NavigationPanel/NavigationPanel.d.ts.map +1 -1
  2. package/components/NavigationSheet/NavigationMenuPage.d.ts +4 -0
  3. package/components/NavigationSheet/NavigationMenuPage.d.ts.map +1 -1
  4. package/components/NavigationSheet/NavigationSheet.d.ts.map +1 -1
  5. package/components/NavigationSheet/ProfilePage.d.ts +5 -1
  6. package/components/NavigationSheet/ProfilePage.d.ts.map +1 -1
  7. package/components/NavigationSheet/SheetRow.d.ts.map +1 -1
  8. package/constants/public-class-names.d.ts +7 -0
  9. package/constants/public-class-names.d.ts.map +1 -0
  10. package/index.css +2 -2
  11. package/index.d.ts +1 -0
  12. package/index.d.ts.map +1 -1
  13. package/index.js +177 -161
  14. package/models/navigation-sheet-props.d.ts +7 -0
  15. package/models/navigation-sheet-props.d.ts.map +1 -1
  16. package/package.json +4 -4
package/components/NavigationPanel/NavigationPanel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NavigationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationPanel/NavigationPanel.tsx"],"names":[],"mappings":"AAMA,OAAO,EAA2B,KAAK,EAAE,EAAkB,MAAM,OAAO,CAAC;AAKzE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAYhF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAgFpD,CAAC"}
1
+ {"version":3,"file":"NavigationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationPanel/NavigationPanel.tsx"],"names":[],"mappings":"AAMA,OAAO,EAA2B,KAAK,EAAE,EAAkB,MAAM,OAAO,CAAC;AAMzE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAYhF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAkFpD,CAAC"}
package/components/NavigationSheet/NavigationMenuPage.d.ts CHANGED
@@ -14,6 +14,10 @@ export interface NavigationMenuPageProps {
14
14
  logOutLabel: string;
15
15
  /** Called when the user taps "Log out" on the profile page. */
16
16
  onLogout: () => void;
17
+ /** Label of the settings row on the profile page; required when `onSettings` is provided. */
18
+ settingsLabel?: string;
19
+ /** Called when the user taps the profile page's settings row; omit to hide the row. */
20
+ onSettings?: () => void;
17
21
  /** Signed-in user details; omit to hide the profile row entirely. */
18
22
  profile?: NavigationUserProfile;
19
23
  /** Settings groups listed on the profile page; empty groups are skipped. */
package/components/NavigationSheet/NavigationMenuPage.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NavigationMenuPage.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationSheet/NavigationMenuPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAIvE,sCAAsC;AACtC,MAAM,WAAW,uBAAuB;IACtC,uDAAuD;IACvD,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,iEAAiE;IACjE,YAAY,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,yEAAyE;IACzE,YAAY,EAAE,MAAM,CAAC;IACrB,oDAAoD;IACpD,WAAW,EAAE,MAAM,CAAC;IACpB,+DAA+D;IAC/D,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,4EAA4E;IAC5E,MAAM,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC/B,gEAAgE;IAChE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yFAAyF;IACzF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,mFAAmF;AACnF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAyE1D,CAAC"}
1
+ {"version":3,"file":"NavigationMenuPage.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationSheet/NavigationMenuPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAIvE,sCAAsC;AACtC,MAAM,WAAW,uBAAuB;IACtC,uDAAuD;IACvD,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,iEAAiE;IACjE,YAAY,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,yEAAyE;IACzE,YAAY,EAAE,MAAM,CAAC;IACrB,oDAAoD;IACpD,WAAW,EAAE,MAAM,CAAC;IACpB,+DAA+D;IAC/D,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,6FAA6F;IAC7F,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uFAAuF;IACvF,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,qEAAqE;IACrE,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,4EAA4E;IAC5E,MAAM,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC/B,gEAAgE;IAChE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yFAAyF;IACzF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,mFAAmF;AACnF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA6E1D,CAAC"}
package/components/NavigationSheet/NavigationSheet.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NavigationSheet.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationSheet/NavigationSheet.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAKhF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA0DpD,CAAC"}
1
+ {"version":3,"file":"NavigationSheet.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationSheet/NavigationSheet.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAKhF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA6DpD,CAAC"}
package/components/NavigationSheet/ProfilePage.d.ts CHANGED
@@ -9,6 +9,10 @@ export interface ProfilePageProps {
9
9
  logOutLabel: string;
10
10
  /** Called when the user taps "Log out"; the sheet closes first. */
11
11
  onLogout: () => void;
12
+ /** Label of the settings row; required when `onSettings` is provided. */
13
+ settingsLabel?: string;
14
+ /** Called when the user taps the settings row; the sheet closes first. Omit to hide the row. */
15
+ onSettings?: () => void;
12
16
  /** Settings groups listed above the log-out row; empty groups are skipped. */
13
17
  groups?: NavigationMenuGroup[];
14
18
  /** CSS class controlling the row labels' type scale. Defaults to `'dial-small-text'`. */
@@ -16,7 +20,7 @@ export interface ProfilePageProps {
16
20
  }
17
21
  /**
18
22
  * Sheet page showing the signed-in user, their settings groups (each pushing an
19
- * `OptionListPage`), and a log-out row.
23
+ * `OptionListPage`), an optional settings row, and a log-out row.
20
24
  */
21
25
  export declare const ProfilePage: FC<ProfilePageProps>;
22
26
  //# sourceMappingURL=ProfilePage.d.ts.map
package/components/NavigationSheet/ProfilePage.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ProfilePage.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationSheet/ProfilePage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAQ,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAMvE,+BAA+B;AAC/B,MAAM,WAAW,gBAAgB;IAC/B,wDAAwD;IACxD,OAAO,EAAE,qBAAqB,CAAC;IAC/B,gCAAgC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC/B,yFAAyF;IACzF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAyF5C,CAAC"}
1
+ {"version":3,"file":"ProfilePage.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationSheet/ProfilePage.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAQ,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAMvE,+BAA+B;AAC/B,MAAM,WAAW,gBAAgB;IAC/B,wDAAwD;IACxD,OAAO,EAAE,qBAAqB,CAAC;IAC/B,gCAAgC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,yEAAyE;IACzE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gGAAgG;IAChG,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC/B,yFAAyF;IACzF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA8G5C,CAAC"}
package/components/NavigationSheet/SheetRow.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SheetRow.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationSheet/SheetRow.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD,4BAA4B;AAC5B,MAAM,WAAW,aAAa;IAC5B,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qFAAqF;IACrF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,iFAAiF;AACjF,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA2BtC,CAAC"}
1
+ {"version":3,"file":"SheetRow.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationSheet/SheetRow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD,4BAA4B;AAC5B,MAAM,WAAW,aAAa;IAC5B,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qFAAqF;IACrF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,iFAAiF;AACjF,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA+BtC,CAAC"}
package/constants/public-class-names.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ export declare const NAVIGATION_PANEL_CLASS: {
2
+ /** The `nav` rail itself. */
3
+ readonly rail: "dial-navigation-panel-rail";
4
+ /** Every item in the rail, whether or not it is the active one. */
5
+ readonly item: "dial-navigation-panel-item";
6
+ };
7
+ //# sourceMappingURL=public-class-names.d.ts.map
package/constants/public-class-names.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"public-class-names.d.ts","sourceRoot":"","sources":["../../src/constants/public-class-names.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,sBAAsB;IACjC,6BAA6B;;IAE7B,mEAAmE;;CAE3D,CAAC"}
package/index.css CHANGED
@@ -1,2 +1,2 @@
1
- ._rail_h528m_1{background:var(--np-bg,var(--bg-layer-raised,#fcfcfc));font-family:var(--np-font-family,inherit)}._item_h528m_6{color:var(--np-item-text,var(--text-secondary,#57647a))}._item_h528m_6:hover{background:var(--np-item-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924))}._item_h528m_6:active{background:var(--np-item-active-bg,var(--bg-control-accent-alpha-active,#2764d933))}a:focus-visible>._item_h528m_6{background:var(--np-item-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924))}._itemActive_h528m_19{background:var(--np-item-selected-bg,var(--bg-control-accent-alpha,#2764d90f));color:var(--np-item-active-text,var(--text-accent,#1d4ed8))}._avatar_htyg8_1{background:var(--np-avatar-bg,var(--bg-control-accent,#1d4ed8));color:var(--np-avatar-text,var(--text-control-permanent,#fcfcfc))}._wrapper_1coa8_1{font-family:var(--np-font-family,inherit)}._trigger_1coa8_5:hover{background:var(--np-trigger-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924))}._trigger_1coa8_5:focus-visible{background:var(--np-trigger-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924));outline:1px solid var(--np-focus-outline,var(--stroke-focus-black,#161b2d));outline-offset:-1px}._identityText_1coa8_14,._menuLabel_1coa8_18{color:var(--np-menu-text,var(--text-primary,#161b2d))}._sheet_1oucc_1{font-family:var(--np-font-family,inherit)}._row_1oucc_5{color:var(--np-sheet-text,var(--text-primary,#161b2d))}._row_1oucc_5:hover,._row_1oucc_5:focus-visible{background:var(--np-sheet-item-hover,var(--bg-control-accent-alpha-hover,#2764d924))}._row_1oucc_5:active{background:var(--np-sheet-item-active,var(--bg-control-neutral-active,#d1dbea))}._rowActive_1oucc_17{color:var(--np-sheet-row-active-text,var(--text-accent,#1d4ed8));background:var(--np-sheet-row-active-bg,var(--bg-control-accent-alpha,#2764d90f))}._rowActive_1oucc_17:hover,._rowActive_1oucc_17:focus-visible{background:var(--np-sheet-row-active-bg-hover,var(--bg-control-accent-alpha-hover,#2764d924))}._rowActive_1oucc_17 ._rowIcon_1oucc_24{color:inherit}._rowIcon_1oucc_24{color:var(--np-sheet-icon,var(--text-secondary,#57647a))}._divider_1oucc_32{border-color:var(--np-sheet-divider,var(--stroke-secondary,#d1dbea))}._mutedText_1oucc_36{color:var(--np-sheet-muted-text,var(--text-secondary,#57647a))}._activeIcon_1oucc_40{color:var(--np-menu-active-icon,var(--text-accent,#1d4ed8))}
2
- /*$vite$:1*/
1
+ ._rail_h528m_1{background:var(--np-bg,var(--bg-layer-raised,#fcfcfc));font-family:var(--np-font-family,inherit)}._item_h528m_6{color:var(--np-item-text,var(--text-secondary,#57647a))}._item_h528m_6:hover{background:var(--np-item-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924))}._item_h528m_6:active{background:var(--np-item-active-bg,var(--bg-control-accent-alpha-active,#2764d933))}a:focus-visible>._item_h528m_6{background:var(--np-item-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924))}._itemActive_h528m_19{background:var(--np-item-selected-bg,var(--bg-control-accent-alpha,#2764d90f));color:var(--np-item-active-text,var(--text-accent,#1d4ed8))}._avatar_htyg8_1{background:var(--np-avatar-bg,var(--bg-control-accent,#1d4ed8));color:var(--np-avatar-text,var(--text-control-permanent,#fcfcfc))}._wrapper_1coa8_1{font-family:var(--np-font-family,inherit)}._trigger_1coa8_5:hover{background:var(--np-trigger-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924))}._trigger_1coa8_5:focus-visible{background:var(--np-trigger-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924));outline:1px solid var(--np-focus-outline,var(--stroke-focus-black,#161b2d));outline-offset:-1px}._identityText_1coa8_14,._menuLabel_1coa8_18{color:var(--np-menu-text,var(--text-primary,#161b2d))}._sheet_wbw5h_1{font-family:var(--np-font-family,inherit)}li>._row_wbw5h_12{color:var(--np-sheet-text,var(--text-primary,#161b2d))}li>._row_wbw5h_12:hover,li>._row_wbw5h_12:focus-visible{background:var(--np-sheet-item-hover,var(--bg-control-accent-alpha-hover,#2764d924))}li>._row_wbw5h_12:active{background:var(--np-sheet-item-active,var(--bg-control-neutral-active,#d1dbea))}li>._rowActive_wbw5h_24{color:var(--np-sheet-row-active-text,var(--text-accent,#1d4ed8));background:var(--np-sheet-row-active-bg,var(--bg-control-accent-alpha,#2764d90f))}li>._rowActive_wbw5h_24:hover,li>._rowActive_wbw5h_24:focus-visible{background:var(--np-sheet-row-active-bg-hover,var(--bg-control-accent-alpha-hover,#2764d924))}li>._rowActive_wbw5h_24 ._rowIcon_wbw5h_31{color:inherit}._rowIcon_wbw5h_31{color:var(--np-sheet-icon,var(--text-secondary,#57647a))}._divider_wbw5h_39{border-color:var(--np-sheet-divider,var(--stroke-secondary,#d1dbea))}._mutedText_wbw5h_43{color:var(--np-sheet-muted-text,var(--text-secondary,#57647a))}._activeIcon_wbw5h_47{color:var(--np-menu-active-icon,var(--text-accent,#1d4ed8))}
2
+ /*$vite$:1*/.relative{position:relative}.z-10{z-index:10}.flex{display:flex}.contents{display:contents}.size-\[28px\]{height:28px;width:28px}.size-\[44px\]{height:44px;width:44px}.size-\[60px\]{height:60px;width:60px}.h-16{height:4rem}.h-6{height:1.5rem}.h-\[40px\]{height:40px}.h-\[56px\]{height:56px}.h-auto{height:auto}.h-full{height:100%}.w-6{width:1.5rem}.w-\[60px\]{width:60px}.w-full{width:100%}.min-w-0{min-width:0}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-full{border-radius:9999px}.rounded-none{border-radius:0}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-transparent{border-color:transparent}.bg-contain{background-size:contain}.bg-center{background-position:50%}.bg-no-repeat{background-repeat:no-repeat}.p-2{padding:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-\[10px\]{padding-bottom:10px;padding-top:10px}.pb-4{padding-bottom:1rem}.shadow-sm{--tw-shadow:0 8px 10px 0 var(--shadow-sm,#2764d914);--tw-shadow-colored:0 8px 10px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.rtl\:scale-x-\[-1\]:where([dir=rtl],[dir=rtl] *){--tw-scale-x:-1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
package/index.d.ts CHANGED
@@ -23,4 +23,5 @@ export type { NavigationMenuPageProps } from './components/NavigationSheet/Navig
23
23
  export type { OptionListPageProps } from './components/NavigationSheet/OptionListPage';
24
24
  export type { ProfilePageProps } from './components/NavigationSheet/ProfilePage';
25
25
  export type { SheetRowProps } from './components/NavigationSheet/SheetRow';
26
+ export { NAVIGATION_PANEL_CLASS } from './constants/public-class-names';
26
27
  //# sourceMappingURL=index.d.ts.map
package/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,mDAAmD,CAAC;AACzF,OAAO,EAAE,kBAAkB,EAAE,MAAM,iDAAiD,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAE5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,YAAY,EACV,kBAAkB,EAClB,sBAAsB,EACtB,mBAAmB,GACpB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,yBAAyB,GAC1B,MAAM,iCAAiC,CAAC;AACzC,YAAY,EACV,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,yBAAyB,GAC1B,MAAM,iCAAiC,CAAC;AACzC,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC5E,YAAY,EACV,cAAc,EACd,cAAc,EACd,aAAa,EACb,cAAc,EACd,kBAAkB,GACnB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACnE,YAAY,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAC9E,YAAY,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACtE,YAAY,EAAE,yBAAyB,EAAE,MAAM,mDAAmD,CAAC;AACnG,YAAY,EAAE,uBAAuB,EAAE,MAAM,iDAAiD,CAAC;AAC/F,YAAY,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AACvF,YAAY,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AACjF,YAAY,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,mDAAmD,CAAC;AACzF,OAAO,EAAE,kBAAkB,EAAE,MAAM,iDAAiD,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAE5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,YAAY,EACV,kBAAkB,EAClB,sBAAsB,EACtB,mBAAmB,GACpB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,yBAAyB,GAC1B,MAAM,iCAAiC,CAAC;AACzC,YAAY,EACV,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,yBAAyB,GAC1B,MAAM,iCAAiC,CAAC;AACzC,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC5E,YAAY,EACV,cAAc,EACd,cAAc,EACd,aAAa,EACb,cAAc,EACd,kBAAkB,GACnB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACnE,YAAY,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAC9E,YAAY,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACtE,YAAY,EAAE,yBAAyB,EAAE,MAAM,mDAAmD,CAAC;AACnG,YAAY,EAAE,uBAAuB,EAAE,MAAM,iDAAiD,CAAC;AAC/F,YAAY,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AACvF,YAAY,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AACjF,YAAY,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC"}
package/index.js CHANGED
@@ -1,48 +1,52 @@
1
1
  import { buildCssVars as e, mergeClasses as t } from "@epam/ai-dial-chat-shared";
2
- import { BASE_ICON_SIZE as n, DIAL_ICON_SIZE as r, DIAL_KIT_ICON_STROKE as i, Dropdown as a, DropdownItemType as o, EllipsisTooltip as s, IconButton as c, MenuItemMark as l, Tooltip as u } from "@epam/ai-dial-ui-kit";
3
- import { Fragment as d, createContext as f, memo as p, useCallback as m, useContext as h, useEffect as g, useMemo as _, useState as v } from "react";
4
- import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
5
- import { IconCheck as S, IconChevronRight as C, IconLogout as w, IconSettings as T, IconUser as E } from "@tabler/icons-react";
6
- import { BottomSheetShell as D } from "@epam/ai-dial-conversation-input";
7
- var O = {
2
+ import { BASE_ICON_SIZE as n, DIAL_ICON_SIZE as r, DIAL_KIT_ICON_STROKE as i, Dropdown as a, DropdownItemType as o, EllipsisTooltip as s, IconButton as c, MenuItem as l, MenuItemMark as u, Tooltip as d } from "@epam/ai-dial-ui-kit";
3
+ import { Fragment as f, createContext as p, memo as m, useCallback as h, useContext as g, useEffect as _, useMemo as v, useState as y } from "react";
4
+ import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
5
+ import { IconCheck as C, IconChevronRight as w, IconLogout as T, IconSettings as E, IconUser as D } from "@tabler/icons-react";
6
+ import { BottomSheetShell as O } from "@epam/ai-dial-conversation-input";
7
+ //#region src/constants/public-class-names.ts
8
+ var k = {
9
+ rail: "dial-navigation-panel-rail",
10
+ item: "dial-navigation-panel-item"
11
+ }, A = {
8
12
  rail: "_rail_h528m_1",
9
13
  item: "_item_h528m_6",
10
14
  itemActive: "_itemActive_h528m_19"
11
- }, k = (e, t) => /* @__PURE__ */ b("a", {
15
+ }, j = (e, t) => /* @__PURE__ */ x("a", {
12
16
  href: e.href,
13
17
  className: "contents",
14
18
  children: t
15
- }), A = p(({ items: n, labels: a, logo: o, footer: s, renderLink: l = k, styles: u }) => {
16
- let { colors: f, typography: p, className: m, cssVars: h } = u ?? {}, g = _(() => e({
17
- "--np-bg": f?.background,
18
- "--np-item-text": f?.itemText,
19
- "--np-item-active-text": f?.itemActiveText,
20
- "--np-item-selected-bg": f?.itemSelectedBackground,
21
- "--np-item-hover-bg": f?.itemHoverBackground,
22
- "--np-item-active-bg": f?.itemActiveBackground,
19
+ }), M = m(({ items: n, labels: a, logo: o, footer: s, renderLink: l = j, styles: u }) => {
20
+ let { colors: d, typography: p, className: m, cssVars: h } = u ?? {}, g = v(() => e({
21
+ "--np-bg": d?.background,
22
+ "--np-item-text": d?.itemText,
23
+ "--np-item-active-text": d?.itemActiveText,
24
+ "--np-item-selected-bg": d?.itemSelectedBackground,
25
+ "--np-item-hover-bg": d?.itemHoverBackground,
26
+ "--np-item-active-bg": d?.itemActiveBackground,
23
27
  "--np-font-family": p?.fontFamily
24
- }), [f, p?.fontFamily]);
25
- return /* @__PURE__ */ x("nav", {
28
+ }), [d, p?.fontFamily]);
29
+ return /* @__PURE__ */ S("nav", {
26
30
  "aria-label": a.ariaLabel,
27
31
  style: {
28
32
  ...h,
29
33
  ...g
30
34
  },
31
- className: t(O.rail, "relative z-10 flex h-full w-[60px] flex-col justify-between shadow-sm", p?.fontClassName, m),
32
- children: [/* @__PURE__ */ x("div", {
35
+ className: t(A.rail, "relative z-10 flex h-full w-[60px] flex-col justify-between shadow-sm", p?.fontClassName, m, k.rail),
36
+ children: [/* @__PURE__ */ S("div", {
33
37
  className: "flex flex-col items-center",
34
- children: [o && /* @__PURE__ */ b("a", {
38
+ children: [o && /* @__PURE__ */ x("a", {
35
39
  href: o.href ?? "/",
36
40
  "aria-label": o.ariaLabel,
37
41
  className: "flex h-16 w-full shrink-0 items-center justify-center",
38
- children: /* @__PURE__ */ b("span", {
42
+ children: /* @__PURE__ */ x("span", {
39
43
  style: { backgroundImage: `url(${o.iconUrl})` },
40
44
  className: "h-6 w-6 bg-contain bg-center bg-no-repeat"
41
45
  })
42
- }), /* @__PURE__ */ b("div", {
46
+ }), /* @__PURE__ */ x("div", {
43
47
  className: "flex flex-col items-center gap-2 p-2",
44
- children: n.map((e) => /* @__PURE__ */ b(d, { children: l(e, /* @__PURE__ */ b(c, {
45
- icon: /* @__PURE__ */ b(e.icon, {
48
+ children: n.map((e) => /* @__PURE__ */ x(f, { children: l(e, /* @__PURE__ */ x(c, {
49
+ icon: /* @__PURE__ */ x(e.icon, {
46
50
  size: r.LG,
47
51
  stroke: i
48
52
  }),
@@ -50,49 +54,49 @@ var O = {
50
54
  "aria-current": e.isActive ? "page" : void 0,
51
55
  tooltipProps: { tooltip: e.label },
52
56
  tabIndex: -1,
53
- className: t(O.item, "rounded-xl", e.isActive && O.itemActive)
57
+ className: t(A.item, "rounded-xl", e.isActive && A.itemActive, k.item)
54
58
  })) }, e.id))
55
59
  })]
56
60
  }), s]
57
61
  });
58
- }), j = { avatar: "_avatar_htyg8_1" }, M = p(({ shortName: e, className: n, textClassName: r = "dial-tiny-text" }) => /* @__PURE__ */ b("div", {
59
- className: t(j.avatar, "flex size-[28px] flex-shrink-0 items-center justify-center rounded-full", r, n),
62
+ }), N = { avatar: "_avatar_htyg8_1" }, P = m(({ shortName: e, className: n, textClassName: r = "dial-tiny-text" }) => /* @__PURE__ */ x("div", {
63
+ className: t(N.avatar, "flex size-[28px] flex-shrink-0 items-center justify-center rounded-full", r, n),
60
64
  children: e
61
- })), N = p(({ profile: e, alt: t }) => e.isFallbackShown || !e.imageUrl ? /* @__PURE__ */ b(M, { shortName: e.shortName }) : /* @__PURE__ */ b("img", {
65
+ })), F = m(({ profile: e, alt: t }) => e.isFallbackShown || !e.imageUrl ? /* @__PURE__ */ x(P, { shortName: e.shortName }) : /* @__PURE__ */ x("img", {
62
66
  className: "rounded-full",
63
67
  src: e.imageUrl,
64
68
  width: 28,
65
69
  height: 28,
66
70
  alt: t,
67
71
  onError: e.onImageError
68
- })), P = {
72
+ })), I = {
69
73
  wrapper: "_wrapper_1coa8_1",
70
74
  trigger: "_trigger_1coa8_5",
71
75
  identityText: "_identityText_1coa8_14",
72
76
  menuLabel: "_menuLabel_1coa8_18"
73
- }, F = p(({ profile: n, labels: c, groups: d, onLogout: f, onSettings: p, isTooltipHidden: m, styles: h }) => {
74
- let { colors: g, typography: v, className: y, cssVars: S } = h ?? {}, C = v?.fontClassName ?? "dial-small-text", E = _(() => e({
77
+ }, L = m(({ profile: n, labels: c, groups: l, onLogout: f, onSettings: p, isTooltipHidden: m, styles: h }) => {
78
+ let { colors: g, typography: _, className: y, cssVars: b } = h ?? {}, C = _?.fontClassName ?? "dial-small-text", w = v(() => e({
75
79
  "--np-avatar-bg": g?.avatarBackground,
76
80
  "--np-avatar-text": g?.avatarText,
77
81
  "--np-menu-text": g?.text,
78
82
  "--np-trigger-hover-bg": g?.triggerHoverBackground,
79
- "--np-font-family": v?.fontFamily
80
- }), [g, v?.fontFamily]), D = _(() => t(P.menuLabel, C), [C]), O = _(() => {
81
- let e = (d ?? []).filter(({ options: e }) => e.length > 0).map(({ id: e, label: t, icon: n, options: r }) => ({
83
+ "--np-font-family": _?.fontFamily
84
+ }), [g, _?.fontFamily]), D = v(() => t(I.menuLabel, C), [C]), O = v(() => {
85
+ let e = (l ?? []).filter(({ options: e }) => e.length > 0).map(({ id: e, label: t, icon: n, options: r }) => ({
82
86
  key: e,
83
- label: /* @__PURE__ */ b("span", {
87
+ label: /* @__PURE__ */ x("span", {
84
88
  className: D,
85
89
  children: t
86
90
  }),
87
91
  icon: n,
88
92
  children: r.map((e) => ({
89
93
  key: e.id,
90
- label: /* @__PURE__ */ b("span", {
94
+ label: /* @__PURE__ */ x("span", {
91
95
  className: D,
92
96
  children: e.label
93
97
  }),
94
98
  icon: e.icon,
95
- mark: l.Check,
99
+ mark: u.Check,
96
100
  checked: e.isActive,
97
101
  onClick: e.onSelect
98
102
  }))
@@ -101,11 +105,11 @@ var O = {
101
105
  {
102
106
  key: "identity",
103
107
  type: o.PlainText,
104
- label: /* @__PURE__ */ x("div", {
108
+ label: /* @__PURE__ */ S("div", {
105
109
  className: "flex h-[40px] min-w-0 items-center gap-3",
106
- children: [/* @__PURE__ */ b(M, { shortName: n.shortName }), /* @__PURE__ */ b(s, {
110
+ children: [/* @__PURE__ */ x(P, { shortName: n.shortName }), /* @__PURE__ */ x(s, {
107
111
  text: n.displayName,
108
- className: t(P.identityText, C, "min-w-0 flex-1 truncate")
112
+ className: t(I.identityText, C, "min-w-0 flex-1 truncate")
109
113
  })]
110
114
  })
111
115
  },
@@ -116,11 +120,11 @@ var O = {
116
120
  },
117
121
  ...p ? [{
118
122
  key: "settings",
119
- label: /* @__PURE__ */ b("span", {
123
+ label: /* @__PURE__ */ x("span", {
120
124
  className: D,
121
125
  children: c.settings
122
126
  }),
123
- icon: /* @__PURE__ */ b(T, {
127
+ icon: /* @__PURE__ */ x(E, {
124
128
  size: r.SM,
125
129
  "aria-hidden": !0,
126
130
  stroke: i
@@ -129,11 +133,11 @@ var O = {
129
133
  }] : [],
130
134
  {
131
135
  key: "logout",
132
- label: /* @__PURE__ */ b("span", {
136
+ label: /* @__PURE__ */ x("span", {
133
137
  className: D,
134
138
  children: c.logOut
135
139
  }),
136
- icon: /* @__PURE__ */ b(w, {
140
+ icon: /* @__PURE__ */ x(T, {
137
141
  size: r.SM,
138
142
  "aria-hidden": !0,
139
143
  stroke: i
@@ -142,7 +146,7 @@ var O = {
142
146
  }
143
147
  ];
144
148
  }, [
145
- d,
149
+ l,
146
150
  C,
147
151
  D,
148
152
  c.logOut,
@@ -152,24 +156,24 @@ var O = {
152
156
  n.displayName,
153
157
  n.shortName
154
158
  ]);
155
- return /* @__PURE__ */ b("div", {
159
+ return /* @__PURE__ */ x("div", {
156
160
  style: {
157
- ...S,
158
- ...E
161
+ ...b,
162
+ ...w
159
163
  },
160
- className: t(P.wrapper, "flex size-[60px] items-center justify-center", y),
161
- children: /* @__PURE__ */ b(a, {
164
+ className: t(I.wrapper, "flex size-[60px] items-center justify-center", y),
165
+ children: /* @__PURE__ */ x(a, {
162
166
  placement: "top-end",
163
167
  matchReferenceWidth: !1,
164
168
  items: O,
165
- children: /* @__PURE__ */ b("button", {
169
+ children: /* @__PURE__ */ x("button", {
166
170
  type: "button",
167
- className: t(P.trigger, "flex size-[44px] items-center justify-center rounded-full border border-transparent"),
171
+ className: t(I.trigger, "flex size-[44px] items-center justify-center rounded-full border border-transparent"),
168
172
  "aria-label": c.trigger,
169
- children: /* @__PURE__ */ b(u, {
173
+ children: /* @__PURE__ */ x(d, {
170
174
  tooltip: n.email,
171
175
  hideTooltip: m,
172
- children: /* @__PURE__ */ b(N, {
176
+ children: /* @__PURE__ */ x(F, {
173
177
  profile: n,
174
178
  alt: c.avatarAlt
175
179
  })
@@ -177,18 +181,18 @@ var O = {
177
181
  })
178
182
  })
179
183
  });
180
- }), I = f(void 0), L = p(({ isOpen: e, onClose: t, children: n, title: r, closeLabel: i, backLabel: a, className: o, style: s }) => {
181
- let [c, l] = v([]);
182
- g(() => {
184
+ }), R = p(void 0), z = m(({ isOpen: e, onClose: t, children: n, title: r, closeLabel: i, backLabel: a, className: o, style: s }) => {
185
+ let [c, l] = y([]);
186
+ _(() => {
183
187
  e || l([]);
184
188
  }, [e]);
185
- let u = m((e) => {
189
+ let u = h((e) => {
186
190
  l((t) => [...t, e]);
187
- }, []), d = m(() => {
191
+ }, []), d = h(() => {
188
192
  l((e) => e.slice(0, -1));
189
- }, []), f = m(() => {
193
+ }, []), f = h(() => {
190
194
  l([]), t();
191
- }, [t]), p = _(() => ({
195
+ }, [t]), p = v(() => ({
192
196
  push: u,
193
197
  pop: d,
194
198
  close: f
@@ -196,195 +200,207 @@ var O = {
196
200
  u,
197
201
  d,
198
202
  f
199
- ]), h = c[c.length - 1];
200
- return /* @__PURE__ */ b(I.Provider, {
203
+ ]), m = c[c.length - 1];
204
+ return /* @__PURE__ */ x(R.Provider, {
201
205
  value: p,
202
- children: /* @__PURE__ */ b(D, {
206
+ children: /* @__PURE__ */ x(O, {
203
207
  isOpen: e,
204
208
  onClose: f,
205
- title: h?.title ?? r,
209
+ title: m?.title ?? r,
206
210
  closeLabel: i,
207
- onBack: h ? d : void 0,
208
- backLabel: h ? a : void 0,
211
+ onBack: m ? d : void 0,
212
+ backLabel: m ? a : void 0,
209
213
  className: o,
210
214
  style: s,
211
- children: h ? h.content : n
215
+ children: m ? m.content : n
212
216
  })
213
217
  });
214
- }), R = () => {
215
- let e = h(I);
218
+ }), B = () => {
219
+ let e = g(R);
216
220
  if (!e) throw Error("useSheetNavigation must be used within a NavigableBottomSheet");
217
221
  return e;
218
- }, z = {
219
- sheet: "_sheet_1oucc_1",
220
- row: "_row_1oucc_5",
221
- rowActive: "_rowActive_1oucc_17",
222
- rowIcon: "_rowIcon_1oucc_24",
223
- divider: "_divider_1oucc_32",
224
- mutedText: "_mutedText_1oucc_36",
225
- activeIcon: "_activeIcon_1oucc_40"
226
- }, B = p(({ label: e, onClick: n, icon: r, trailing: i, isCurrent: a = !1, isHighlighted: o = !1, textClassName: s = "dial-small-text" }) => /* @__PURE__ */ b("li", { children: /* @__PURE__ */ x("button", {
227
- type: "button",
222
+ }, V = {
223
+ sheet: "_sheet_wbw5h_1",
224
+ row: "_row_wbw5h_12",
225
+ rowActive: "_rowActive_wbw5h_24",
226
+ rowIcon: "_rowIcon_wbw5h_31",
227
+ divider: "_divider_wbw5h_39",
228
+ mutedText: "_mutedText_wbw5h_43",
229
+ activeIcon: "_activeIcon_wbw5h_47"
230
+ }, H = m(({ label: e, onClick: n, icon: r, trailing: i, isCurrent: a = !1, isHighlighted: o = !1, textClassName: s = "dial-small-text" }) => /* @__PURE__ */ x("li", { children: /* @__PURE__ */ x(l, {
231
+ label: e,
232
+ labelClassName: s,
233
+ icon: r && /* @__PURE__ */ x("span", {
234
+ className: V.rowIcon,
235
+ children: r
236
+ }),
237
+ trailing: i,
238
+ mark: u.Highlight,
239
+ selected: o,
228
240
  "aria-current": a ? "true" : void 0,
229
- className: t(z.row, o && z.rowActive, "flex w-full items-center gap-3 px-4 py-[10px] text-start"),
230
- onClick: n,
231
- children: [
232
- r && /* @__PURE__ */ b("span", {
233
- className: z.rowIcon,
234
- children: r
235
- }),
236
- /* @__PURE__ */ b("span", {
237
- className: t(s, "flex-1"),
238
- children: e
239
- }),
240
- i
241
- ]
242
- }) })), V = p(({ options: e, textClassName: t }) => {
243
- let { pop: n } = R();
244
- return /* @__PURE__ */ b("ul", {
241
+ className: t("h-auto gap-3 rounded-none px-4 py-[10px]", V.row, o && V.rowActive),
242
+ onClick: n
243
+ }) })), U = m(({ options: e, textClassName: t }) => {
244
+ let { pop: n } = B();
245
+ return /* @__PURE__ */ x("ul", {
245
246
  className: "flex flex-col pb-4",
246
- children: e.map((e) => /* @__PURE__ */ b(B, {
247
+ children: e.map((e) => /* @__PURE__ */ x(H, {
247
248
  label: e.label,
248
249
  icon: e.icon,
249
250
  textClassName: t,
250
251
  isCurrent: e.isActive,
251
- trailing: e.isActive ? /* @__PURE__ */ b(S, {
252
+ trailing: e.isActive ? /* @__PURE__ */ x(C, {
252
253
  size: r.SM,
253
254
  stroke: i,
254
255
  "aria-hidden": !0,
255
- className: z.activeIcon
256
+ className: V.activeIcon
256
257
  }) : void 0,
257
258
  onClick: () => {
258
259
  e.onSelect(), n();
259
260
  }
260
261
  }, e.id))
261
262
  });
262
- }), H = p(({ profile: e, logOutLabel: r, onLogout: a, groups: o, textClassName: c = "dial-small-text" }) => {
263
- let { push: l, close: u } = R(), d = (o ?? []).filter(({ options: e }) => e.length > 0);
264
- return /* @__PURE__ */ x(y, { children: [
265
- /* @__PURE__ */ x("div", {
263
+ }), W = m(({ profile: e, logOutLabel: r, onLogout: a, settingsLabel: o, onSettings: c, groups: l, textClassName: u = "dial-small-text" }) => {
264
+ let { push: d, close: f } = B(), p = (l ?? []).filter(({ options: e }) => e.length > 0);
265
+ return /* @__PURE__ */ S(b, { children: [
266
+ /* @__PURE__ */ S("div", {
266
267
  className: "flex h-[56px] items-center gap-3 px-4 py-2",
267
- children: [/* @__PURE__ */ b(N, {
268
+ children: [/* @__PURE__ */ x(F, {
268
269
  profile: e,
269
270
  alt: ""
270
- }), /* @__PURE__ */ b(s, {
271
+ }), /* @__PURE__ */ x(s, {
271
272
  text: e.displayName,
272
- className: t(z.mutedText, c, "min-w-0 flex-1 truncate")
273
+ className: t(V.mutedText, u, "min-w-0 flex-1 truncate")
273
274
  })]
274
275
  }),
275
- d.length > 0 && /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("ul", {
276
+ p.length > 0 && /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x("ul", {
276
277
  className: "flex flex-col",
277
- children: d.map((e) => /* @__PURE__ */ b(B, {
278
+ children: p.map((e) => /* @__PURE__ */ x(H, {
278
279
  label: e.label,
279
280
  icon: e.icon,
280
- textClassName: c,
281
- trailing: /* @__PURE__ */ b(C, {
281
+ textClassName: u,
282
+ trailing: /* @__PURE__ */ x(w, {
282
283
  size: n,
283
284
  stroke: i,
284
285
  "aria-hidden": !0,
285
- className: t(z.rowIcon, "rtl:scale-x-[-1]")
286
+ className: t(V.rowIcon, "rtl:scale-x-[-1]")
286
287
  }),
287
- onClick: () => l({
288
+ onClick: () => d({
288
289
  title: e.label,
289
- content: /* @__PURE__ */ b(V, {
290
+ content: /* @__PURE__ */ x(U, {
290
291
  options: e.options,
291
- textClassName: c
292
+ textClassName: u
292
293
  })
293
294
  })
294
295
  }, e.id))
295
- }), /* @__PURE__ */ b("hr", { className: z.divider })] }),
296
- /* @__PURE__ */ b("ul", {
296
+ }), /* @__PURE__ */ x("hr", { className: V.divider })] }),
297
+ /* @__PURE__ */ S("ul", {
297
298
  className: "flex flex-col pb-4",
298
- children: /* @__PURE__ */ b(B, {
299
+ children: [c && o && /* @__PURE__ */ x(H, {
300
+ label: o,
301
+ textClassName: u,
302
+ icon: /* @__PURE__ */ x(E, {
303
+ size: n,
304
+ stroke: i,
305
+ "aria-hidden": !0
306
+ }),
307
+ onClick: () => {
308
+ f(), c?.();
309
+ }
310
+ }), /* @__PURE__ */ x(H, {
299
311
  label: r,
300
- textClassName: c,
301
- icon: /* @__PURE__ */ b(w, {
312
+ textClassName: u,
313
+ icon: /* @__PURE__ */ x(T, {
302
314
  size: n,
303
315
  stroke: i,
304
316
  "aria-hidden": !0
305
317
  }),
306
318
  onClick: () => {
307
- u(), a();
319
+ f(), a();
308
320
  }
309
- })
321
+ })]
310
322
  })
311
323
  ] });
312
- }), U = p(({ items: e, onSelectItem: t, profileLabel: r, logOutLabel: a, onLogout: o, profile: s, groups: c, footer: l, textClassName: u }) => {
313
- let { push: d, close: f } = R(), p = (e) => {
314
- f(), t(e);
324
+ }), G = m(({ items: e, onSelectItem: t, profileLabel: r, logOutLabel: a, onLogout: o, settingsLabel: s, onSettings: c, profile: l, groups: u, footer: d, textClassName: f }) => {
325
+ let { push: p, close: m } = B(), h = (e) => {
326
+ m(), t(e);
315
327
  };
316
- return /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ x("ul", {
328
+ return /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ S("ul", {
317
329
  className: "flex flex-col pb-4",
318
- children: [e.map((e) => /* @__PURE__ */ b(B, {
330
+ children: [e.map((e) => /* @__PURE__ */ x(H, {
319
331
  label: e.label,
320
- textClassName: u,
332
+ textClassName: f,
321
333
  isCurrent: e.isActive,
322
334
  isHighlighted: e.isActive,
323
- icon: /* @__PURE__ */ b(e.icon, {
335
+ icon: /* @__PURE__ */ x(e.icon, {
324
336
  size: n,
325
337
  stroke: i
326
338
  }),
327
- onClick: () => p(e)
328
- }, e.id)), s && /* @__PURE__ */ b(B, {
339
+ onClick: () => h(e)
340
+ }, e.id)), l && /* @__PURE__ */ x(H, {
329
341
  label: r,
330
- textClassName: u,
331
- icon: /* @__PURE__ */ b(E, {
342
+ textClassName: f,
343
+ icon: /* @__PURE__ */ x(D, {
332
344
  size: n,
333
345
  stroke: i,
334
346
  "aria-hidden": !0
335
347
  }),
336
348
  onClick: () => {
337
- s && d({
349
+ l && p({
338
350
  title: r,
339
- content: /* @__PURE__ */ b(H, {
340
- profile: s,
341
- groups: c,
351
+ content: /* @__PURE__ */ x(W, {
352
+ profile: l,
353
+ groups: u,
342
354
  logOutLabel: a,
343
355
  onLogout: o,
344
- textClassName: u
356
+ settingsLabel: s,
357
+ onSettings: c,
358
+ textClassName: f
345
359
  })
346
360
  });
347
361
  }
348
362
  })]
349
- }), l] });
350
- }), W = p(({ isOpen: n, onClose: r, items: i, onSelectItem: a, labels: o, profile: s, groups: c, onLogout: l, footer: u, styles: d }) => {
351
- let { colors: f, typography: p, className: m, cssVars: h } = d ?? {}, g = _(() => e({
352
- "--np-sheet-text": f?.text,
353
- "--np-sheet-item-hover": f?.itemHoverBackground,
354
- "--np-sheet-item-active": f?.itemActiveBackground,
355
- "--np-sheet-row-active-text": f?.activeRowText,
356
- "--np-sheet-row-active-bg": f?.activeRowBackground,
357
- "--np-sheet-row-active-bg-hover": f?.activeRowBackgroundHover,
358
- "--np-sheet-icon": f?.icon,
359
- "--np-sheet-divider": f?.divider,
360
- "--np-avatar-bg": f?.avatarBackground,
361
- "--np-avatar-text": f?.avatarText,
362
- "--np-menu-active-icon": f?.activeIcon,
363
- "--np-font-family": p?.fontFamily
364
- }), [f, p?.fontFamily]);
365
- return /* @__PURE__ */ b(L, {
363
+ }), d] });
364
+ }), K = m(({ isOpen: n, onClose: r, items: i, onSelectItem: a, labels: o, profile: s, groups: c, onLogout: l, onSettings: u, footer: d, styles: f }) => {
365
+ let { colors: p, typography: m, className: h, cssVars: g } = f ?? {}, _ = v(() => e({
366
+ "--np-sheet-text": p?.text,
367
+ "--np-sheet-item-hover": p?.itemHoverBackground,
368
+ "--np-sheet-item-active": p?.itemActiveBackground,
369
+ "--np-sheet-row-active-text": p?.activeRowText,
370
+ "--np-sheet-row-active-bg": p?.activeRowBackground,
371
+ "--np-sheet-row-active-bg-hover": p?.activeRowBackgroundHover,
372
+ "--np-sheet-icon": p?.icon,
373
+ "--np-sheet-divider": p?.divider,
374
+ "--np-avatar-bg": p?.avatarBackground,
375
+ "--np-avatar-text": p?.avatarText,
376
+ "--np-menu-active-icon": p?.activeIcon,
377
+ "--np-font-family": m?.fontFamily
378
+ }), [p, m?.fontFamily]);
379
+ return /* @__PURE__ */ x(z, {
366
380
  isOpen: n,
367
381
  onClose: r,
368
382
  title: o.title,
369
383
  closeLabel: o.close,
370
384
  backLabel: o.back,
371
- className: t(z.sheet, m),
385
+ className: t(V.sheet, h),
372
386
  style: {
373
- ...h,
374
- ...g
387
+ ...g,
388
+ ..._
375
389
  },
376
- children: /* @__PURE__ */ b(U, {
390
+ children: /* @__PURE__ */ x(G, {
377
391
  items: i,
378
392
  onSelectItem: a,
379
393
  profileLabel: o.profile,
380
394
  logOutLabel: o.logOut,
381
395
  onLogout: l,
396
+ settingsLabel: o.settings,
397
+ onSettings: u,
382
398
  profile: s,
383
399
  groups: c,
384
- footer: u,
385
- textClassName: p?.fontClassName
400
+ footer: d,
401
+ textClassName: m?.fontClassName
386
402
  })
387
403
  });
388
404
  });
389
405
  //#endregion
390
- export { M as AvatarInitials, L as NavigableBottomSheet, U as NavigationMenuPage, A as NavigationPanel, W as NavigationSheet, V as OptionListPage, H as ProfilePage, B as SheetRow, N as UserAvatar, F as UserMenu, R as useSheetNavigation };
406
+ export { P as AvatarInitials, k as NAVIGATION_PANEL_CLASS, z as NavigableBottomSheet, G as NavigationMenuPage, M as NavigationPanel, K as NavigationSheet, U as OptionListPage, W as ProfilePage, H as SheetRow, F as UserAvatar, L as UserMenu, B as useSheetNavigation };
package/models/navigation-sheet-props.d.ts CHANGED
@@ -57,6 +57,8 @@ export interface NavigationSheetLabels {
57
57
  profile: string;
58
58
  /** Label of the log-out row. */
59
59
  logOut: string;
60
+ /** Label of the settings row on the profile page; required when `onSettings` is provided. */
61
+ settings?: string;
60
62
  }
61
63
  /** Props accepted by `NavigationSheet`. */
62
64
  export interface NavigationSheetProps {
@@ -76,6 +78,11 @@ export interface NavigationSheetProps {
76
78
  groups?: NavigationMenuGroup[];
77
79
  /** Called when the user taps "Log out"; the host owns the confirmation flow. */
78
80
  onLogout: () => void;
81
+ /**
82
+ * Called when the user taps the profile page's settings row, after the sheet
83
+ * closes; the host performs the navigation. Omit to hide the row.
84
+ */
85
+ onSettings?: () => void;
79
86
  /** Rendered at the end of the root page — typically a footer message. */
80
87
  footer?: ReactNode;
81
88
  /** Style overrides for colors, typography, and class names. */
package/models/navigation-sheet-props.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"navigation-sheet-props.d.ts","sourceRoot":"","sources":["../../src/models/navigation-sheet-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAE5D,qEAAqE;AACrE,MAAM,WAAW,qBAAqB;IACpC,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oCAAoC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,iEAAiE;IACjE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uDAAuD;IACvD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iEAAiE;IACjE,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,4DAA4D;AAC5D,MAAM,WAAW,yBAAyB;IACxC,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,gEAAgE;AAChE,MAAM,WAAW,qBAAqB;IACpC,wDAAwD;IACxD,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,kDAAkD;IAClD,UAAU,CAAC,EAAE,yBAAyB,CAAC;IACvC,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,uDAAuD;AACvD,MAAM,WAAW,qBAAqB;IACpC,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,IAAI,EAAE,MAAM,CAAC;IACb,yEAAyE;IACzE,OAAO,EAAE,MAAM,CAAC;IAChB,gCAAgC;IAChC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,2CAA2C;AAC3C,MAAM,WAAW,oBAAoB;IACnC,iCAAiC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,kFAAkF;IAClF,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,wEAAwE;IACxE,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,4EAA4E;IAC5E,YAAY,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,sEAAsE;IACtE,MAAM,EAAE,qBAAqB,CAAC;IAC9B,sFAAsF;IACtF,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,0FAA0F;IAC1F,MAAM,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC/B,gFAAgF;IAChF,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,yEAAyE;IACzE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC"}
1
+ {"version":3,"file":"navigation-sheet-props.d.ts","sourceRoot":"","sources":["../../src/models/navigation-sheet-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAE5D,qEAAqE;AACrE,MAAM,WAAW,qBAAqB;IACpC,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oCAAoC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,iEAAiE;IACjE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uDAAuD;IACvD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iEAAiE;IACjE,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,4DAA4D;AAC5D,MAAM,WAAW,yBAAyB;IACxC,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,gEAAgE;AAChE,MAAM,WAAW,qBAAqB;IACpC,wDAAwD;IACxD,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,kDAAkD;IAClD,UAAU,CAAC,EAAE,yBAAyB,CAAC;IACvC,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,uDAAuD;AACvD,MAAM,WAAW,qBAAqB;IACpC,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,IAAI,EAAE,MAAM,CAAC;IACb,yEAAyE;IACzE,OAAO,EAAE,MAAM,CAAC;IAChB,gCAAgC;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,2CAA2C;AAC3C,MAAM,WAAW,oBAAoB;IACnC,iCAAiC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,kFAAkF;IAClF,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,wEAAwE;IACxE,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,4EAA4E;IAC5E,YAAY,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,sEAAsE;IACtE,MAAM,EAAE,qBAAqB,CAAC;IAC9B,sFAAsF;IACtF,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,0FAA0F;IAC1F,MAAM,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC/B,gFAAgF;IAChF,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,yEAAyE;IACzE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@epam/ai-dial-navigation-panel",
3
3
  "description": "Primary application navigation — desktop nav rail, user menu, and mobile navigation bottom sheet",
4
- "version": "1.2.0-dev.15",
4
+ "version": "1.2.0-dev.152",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
7
  "main": "./index.js",
@@ -18,12 +18,12 @@
18
18
  },
19
19
  "dependencies": {
20
20
  "@tabler/icons-react": "^3.44.0",
21
- "@epam/ai-dial-conversation-input": "1.2.0-dev.15"
21
+ "@epam/ai-dial-conversation-input": "1.2.0-dev.152"
22
22
  },
23
23
  "peerDependencies": {
24
24
  "react": "^19.2.8",
25
- "@epam/ai-dial-chat-shared": "1.2.0-dev.15",
26
- "@epam/ai-dial-ui-kit": "^0.14.2"
25
+ "@epam/ai-dial-chat-shared": "1.2.0-dev.152",
26
+ "@epam/ai-dial-ui-kit": "^0.15.0-dev.19"
27
27
  },
28
28
  "repository": {
29
29
  "type": "git",