@ably/ui 15.6.0-dev.1a416b3 → 15.6.0-dev.bdcefb0

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 (78) hide show
  1. package/core/Flyout.js +1 -1
  2. package/core/Flyout.js.map +1 -1
  3. package/core/Footer.js +1 -1
  4. package/core/Footer.js.map +1 -1
  5. package/core/LegacyMeganav/MeganavBlogPostsList/component.js +2 -0
  6. package/core/LegacyMeganav/MeganavBlogPostsList/component.js.map +1 -0
  7. package/core/LegacyMeganav/MeganavControl/component.js +2 -0
  8. package/core/LegacyMeganav/MeganavControl/component.js.map +1 -0
  9. package/core/LegacyMeganav/MeganavControlMobileDropdown/component.js +2 -0
  10. package/core/LegacyMeganav/MeganavControlMobileDropdown/component.js.map +1 -0
  11. package/core/LegacyMeganav/MeganavControlMobilePanelClose/component.js +2 -0
  12. package/core/LegacyMeganav/MeganavControlMobilePanelClose/component.js.map +1 -0
  13. package/core/LegacyMeganav/MeganavControlMobilePanelOpen/component.js +2 -0
  14. package/core/LegacyMeganav/MeganavControlMobilePanelOpen/component.js.map +1 -0
  15. package/core/LegacyMeganav/MeganavSearchAutocomplete/component.js +2 -0
  16. package/core/LegacyMeganav/MeganavSearchAutocomplete/component.js.map +1 -0
  17. package/core/LegacyMeganav/MeganavSearchSuggestions/component.js +2 -0
  18. package/core/LegacyMeganav/MeganavSearchSuggestions/component.js.map +1 -0
  19. package/core/LegacyMeganav/component.js +2 -0
  20. package/core/{Meganav → LegacyMeganav}/component.js.map +1 -1
  21. package/core/LegacyMeganav.js +2 -0
  22. package/core/{Meganav.js.map → LegacyMeganav.js.map} +1 -1
  23. package/core/Meganav/Meganav.js +2 -0
  24. package/core/Meganav/Meganav.js.map +1 -0
  25. package/core/Meganav/MeganavMobile.js +2 -0
  26. package/core/Meganav/MeganavMobile.js.map +1 -0
  27. package/core/Meganav/MeganavPanel.js +2 -0
  28. package/core/Meganav/MeganavPanel.js.map +1 -0
  29. package/core/Meganav/data.js +2 -0
  30. package/core/Meganav/data.js.map +1 -0
  31. package/core/Meganav/images/fan-engagement-nav-image.png +0 -0
  32. package/core/Meganav/images/founders-nav-image.png +0 -0
  33. package/core/MeganavBlogPostsList.js.map +1 -1
  34. package/core/MeganavContentCompany.js.map +1 -1
  35. package/core/MeganavContentDevelopers.js.map +1 -1
  36. package/core/MeganavContentProducts.js.map +1 -1
  37. package/core/MeganavContentUseCases.js.map +1 -1
  38. package/core/MeganavControl.js.map +1 -1
  39. package/core/MeganavControlMobileDropdown.js.map +1 -1
  40. package/core/MeganavItemsDesktop.js +1 -1
  41. package/core/MeganavItemsDesktop.js.map +1 -1
  42. package/core/MeganavItemsMobile.js +1 -1
  43. package/core/MeganavItemsMobile.js.map +1 -1
  44. package/core/MeganavItemsSignedIn.js.map +1 -1
  45. package/core/MeganavSearch.js.map +1 -1
  46. package/core/MeganavSearchPanel.js.map +1 -1
  47. package/core/MeganavSearchSuggestions.js.map +1 -1
  48. package/core/Notice.js +1 -1
  49. package/core/Notice.js.map +1 -1
  50. package/core/SignOutLink.js.map +1 -1
  51. package/core/images/award/g2-best-meets-requirements-2025.png +0 -0
  52. package/core/images/award/g2-best-support-2025.png +0 -0
  53. package/core/images/award/g2-high-performer-2025.png +0 -0
  54. package/core/images/award/g2-users-most-likely-to-recommend-2025.png +0 -0
  55. package/core/images/g2-best-meets-requirements-2025.svg +10 -0
  56. package/core/images/g2-best-support-2025.svg +10 -0
  57. package/core/images/g2-high-performer-2025.svg +9 -0
  58. package/core/images/g2-users-most-likely-to-recommend-2025.svg +10 -0
  59. package/index.d.ts +201 -130
  60. package/package.json +3 -3
  61. package/core/Meganav/component.js +0 -2
  62. package/core/Meganav.js +0 -2
  63. package/core/MeganavBlogPostsList/component.js +0 -2
  64. package/core/MeganavBlogPostsList/component.js.map +0 -1
  65. package/core/MeganavControl/component.js +0 -2
  66. package/core/MeganavControl/component.js.map +0 -1
  67. package/core/MeganavControlMobileDropdown/component.js +0 -2
  68. package/core/MeganavControlMobileDropdown/component.js.map +0 -1
  69. package/core/MeganavControlMobilePanelClose/component.js +0 -2
  70. package/core/MeganavControlMobilePanelClose/component.js.map +0 -1
  71. package/core/MeganavControlMobilePanelOpen/component.js +0 -2
  72. package/core/MeganavControlMobilePanelOpen/component.js.map +0 -1
  73. package/core/MeganavSearchAutocomplete/component.js +0 -2
  74. package/core/MeganavSearchAutocomplete/component.js.map +0 -1
  75. package/core/MeganavSearchSuggestions/component.js +0 -2
  76. package/core/MeganavSearchSuggestions/component.js.map +0 -1
  77. /package/core/{Meganav → LegacyMeganav}/component.css +0 -0
  78. /package/core/{Meganav → LegacyMeganav}/component.json +0 -0
package/index.d.ts CHANGED
@@ -475,9 +475,9 @@ type FlyoutProps = {
475
475
  */
476
476
  menuItems: {
477
477
  /**
478
- * Label for the menu item.
478
+ * name for the menu item.
479
479
  */
480
- label: string;
480
+ name: string;
481
481
  /**
482
482
  * Optional content to be displayed in the flyout panel.
483
483
  */
@@ -521,10 +521,10 @@ declare module '@ably/ui/core/Footer' {
521
521
  type FooterProps = {
522
522
  paths: {
523
523
  ablyStack: string;
524
- highestPerformer: string;
525
- highestUserAdoption: string;
526
524
  bestSupport: string;
527
- fastestImplementation: string;
525
+ highPerformer: string;
526
+ usersMostLikely: string;
527
+ bestMeetsRequirements: string;
528
528
  };
529
529
  urlBase: string;
530
530
  statusUrl: string;
@@ -683,50 +683,63 @@ export default Icon;
683
683
  //# sourceMappingURL=Icon.d.ts.map
684
684
  }
685
685
 
686
- declare module '@ably/ui/core/LinkButton' {
687
- import React from "react";
688
- import { ButtonPropsBase } from "@ably/ui/core/Button";
689
- import { ColorClass, ColorThemeSet } from "@ably/ui/core/styles/colors/types";
690
- export type LinkButtonProps = ButtonPropsBase & {
691
- disabled?: boolean;
692
- onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
693
- iconColor?: ColorClass | ColorThemeSet;
694
- } & React.AnchorHTMLAttributes<HTMLAnchorElement>;
695
- const LinkButton: React.FC<LinkButtonProps>;
696
- export default LinkButton;
697
- //# sourceMappingURL=LinkButton.d.ts.map
686
+ declare module '@ably/ui/core/LegacyMeganav/MeganavControl/component' {
687
+ export default MeganavControl;
688
+ function MeganavControl(): {
689
+ teardown: () => void;
690
+ clear: () => void;
691
+ }[];
692
+ //# sourceMappingURL=component.d.ts.map
698
693
  }
699
694
 
700
- declare module '@ably/ui/core/Loader' {
701
- type LoaderProps = {
702
- size?: string;
703
- ringColor?: string;
704
- additionalCSS?: string;
695
+ declare module '@ably/ui/core/LegacyMeganav/MeganavControlMobileDropdown/component' {
696
+ export default MeganavControlMobileDropdown;
697
+ function MeganavControlMobileDropdown({ clearPanels }: {
698
+ clearPanels: any;
699
+ }): {
700
+ teardown: () => void;
701
+ clear: () => void;
705
702
  };
706
- const Loader: ({ ringColor, size, additionalCSS, }: LoaderProps) => import("react/jsx-runtime").JSX.Element;
707
- export default Loader;
708
- //# sourceMappingURL=Loader.d.ts.map
703
+ //# sourceMappingURL=component.d.ts.map
709
704
  }
710
705
 
711
- declare module '@ably/ui/core/Logo' {
712
- import React from "react";
713
- type LogoProps = {
714
- dataId?: string;
715
- logoUrl?: string;
716
- logoAlt?: string;
717
- href?: string;
718
- additionalImgAttrs?: object;
719
- additionalLinkAttrs?: object;
720
- theme?: "light" | "dark";
721
- variant?: "default" | "mono";
722
- orientation?: "default" | "stacked";
723
- };
724
- const _default: React.MemoExoticComponent<({ dataId, href, additionalImgAttrs, additionalLinkAttrs, theme, variant, orientation, logoUrl, logoAlt, }: LogoProps) => import("react/jsx-runtime").JSX.Element>;
706
+ declare module '@ably/ui/core/LegacyMeganav/MeganavControlMobilePanelClose/component' {
707
+ function _default(): {
708
+ teardown: () => void;
709
+ clear: () => void;
710
+ }[];
725
711
  export default _default;
726
- //# sourceMappingURL=Logo.d.ts.map
712
+ //# sourceMappingURL=component.d.ts.map
713
+ }
714
+
715
+ declare module '@ably/ui/core/LegacyMeganav/MeganavControlMobilePanelOpen/component' {
716
+ function _default(): {
717
+ teardown: () => void;
718
+ clear: () => void;
719
+ }[];
720
+ export default _default;
721
+ //# sourceMappingURL=component.d.ts.map
727
722
  }
728
723
 
729
- declare module '@ably/ui/core/Meganav/component' {
724
+ declare module '@ably/ui/core/LegacyMeganav/MeganavSearchAutocomplete/component' {
725
+ function _default(apiKey: any): {
726
+ teardown: () => void;
727
+ clear: () => void;
728
+ }[];
729
+ export default _default;
730
+ //# sourceMappingURL=component.d.ts.map
731
+ }
732
+
733
+ declare module '@ably/ui/core/LegacyMeganav/MeganavSearchSuggestions/component' {
734
+ export default MeganavSearchSuggestions;
735
+ function MeganavSearchSuggestions(): {
736
+ teardown: () => void;
737
+ clear: () => void;
738
+ };
739
+ //# sourceMappingURL=component.d.ts.map
740
+ }
741
+
742
+ declare module '@ably/ui/core/LegacyMeganav/component' {
730
743
  export default function Meganav({ themeName, addSearchApiKey }: {
731
744
  themeName: any;
732
745
  addSearchApiKey: any;
@@ -734,7 +747,7 @@ export default function Meganav({ themeName, addSearchApiKey }: {
734
747
  //# sourceMappingURL=component.d.ts.map
735
748
  }
736
749
 
737
- declare module '@ably/ui/core/Meganav' {
750
+ declare module '@ably/ui/core/LegacyMeganav' {
738
751
  import { ReactNode } from "react";
739
752
  import { ColorClass } from "@ably/ui/core/styles/colors/types";
740
753
  export type MeganavTheme = {
@@ -788,23 +801,26 @@ export type MeganavSessionState = {
788
801
  href: string;
789
802
  };
790
803
  };
791
- type MeganavProps = {
792
- paths?: MeganavPaths;
793
- themeName: "white" | "black" | "transparentToWhite";
794
- notice?: {
795
- props: {
796
- title: string;
797
- bodyText: string;
798
- buttonLink: string;
799
- buttonLabel: string;
800
- closeBtn: boolean;
801
- };
802
- config: {
803
- cookieId: string;
804
- noticeId: string;
804
+ export type MeganavNoticeProps = {
805
+ props: {
806
+ title: string;
807
+ bodyText: string;
808
+ buttonLink: string;
809
+ buttonLabel: string;
810
+ closeBtn: boolean;
811
+ };
812
+ config: {
813
+ cookieId: string;
814
+ noticeId: string | number;
815
+ options: {
805
816
  collapse: boolean;
806
817
  };
807
818
  };
819
+ };
820
+ type MeganavProps = {
821
+ paths?: MeganavPaths;
822
+ themeName: "white" | "black" | "transparentToWhite";
823
+ notice?: MeganavNoticeProps;
808
824
  loginLink?: string;
809
825
  urlBase?: string;
810
826
  addSearchApiKey: string;
@@ -813,11 +829,119 @@ type MeganavProps = {
813
829
  };
814
830
  const Meganav: ({ paths, themeName, notice, loginLink, urlBase, addSearchApiKey, statusUrl, searchDataId, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
815
831
  export default Meganav;
832
+ //# sourceMappingURL=LegacyMeganav.d.ts.map
833
+ }
834
+
835
+ declare module '@ably/ui/core/LinkButton' {
836
+ import React from "react";
837
+ import { ButtonPropsBase } from "@ably/ui/core/Button";
838
+ import { ColorClass, ColorThemeSet } from "@ably/ui/core/styles/colors/types";
839
+ export type LinkButtonProps = ButtonPropsBase & {
840
+ disabled?: boolean;
841
+ onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
842
+ iconColor?: ColorClass | ColorThemeSet;
843
+ } & React.AnchorHTMLAttributes<HTMLAnchorElement>;
844
+ const LinkButton: React.FC<LinkButtonProps>;
845
+ export default LinkButton;
846
+ //# sourceMappingURL=LinkButton.d.ts.map
847
+ }
848
+
849
+ declare module '@ably/ui/core/Loader' {
850
+ type LoaderProps = {
851
+ size?: string;
852
+ ringColor?: string;
853
+ additionalCSS?: string;
854
+ };
855
+ const Loader: ({ ringColor, size, additionalCSS, }: LoaderProps) => import("react/jsx-runtime").JSX.Element;
856
+ export default Loader;
857
+ //# sourceMappingURL=Loader.d.ts.map
858
+ }
859
+
860
+ declare module '@ably/ui/core/Logo' {
861
+ import React from "react";
862
+ type LogoProps = {
863
+ dataId?: string;
864
+ logoUrl?: string;
865
+ logoAlt?: string;
866
+ href?: string;
867
+ additionalImgAttrs?: object;
868
+ additionalLinkAttrs?: object;
869
+ theme?: "light" | "dark";
870
+ variant?: "default" | "mono";
871
+ orientation?: "default" | "stacked";
872
+ };
873
+ const _default: React.MemoExoticComponent<({ dataId, href, additionalImgAttrs, additionalLinkAttrs, theme, variant, orientation, logoUrl, logoAlt, }: LogoProps) => import("react/jsx-runtime").JSX.Element>;
874
+ export default _default;
875
+ //# sourceMappingURL=Logo.d.ts.map
876
+ }
877
+
878
+ declare module '@ably/ui/core/Meganav/Meganav' {
879
+ import { HeaderSessionState } from ".@ably/ui/core/Header";
880
+ export type MeganavProps = {
881
+ sessionState: HeaderSessionState;
882
+ searchDataId: string;
883
+ };
884
+ const Meganav: ({ sessionState, searchDataId }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
885
+ export default Meganav;
816
886
  //# sourceMappingURL=Meganav.d.ts.map
817
887
  }
818
888
 
889
+ declare module '@ably/ui/core/Meganav/MeganavMobile' {
890
+ import { AccordionData } from ".@ably/ui/core/Accordion/types";
891
+ export const MeganavMobile: ({ mobileNavItems, }: {
892
+ mobileNavItems: AccordionData[];
893
+ }) => import("react/jsx-runtime").JSX.Element;
894
+ //# sourceMappingURL=MeganavMobile.d.ts.map
895
+ }
896
+
897
+ declare module '@ably/ui/core/Meganav/MeganavPanel' {
898
+ import React from "react";
899
+ import { FlyoutPanelHighlight, FlyoutPanelList } from "@ably/ui/core/data";
900
+ export const MeganavPanel: ({ displayProductTile, panelLeft, panelLeftClassName, panelRightHeading, panelRightItems, panelRightBottom, }: {
901
+ displayProductTile?: boolean;
902
+ panelLeft?: FlyoutPanelHighlight;
903
+ panelLeftClassName?: string;
904
+ panelRightHeading?: string;
905
+ panelRightItems: FlyoutPanelList[];
906
+ panelRightBottom?: React.ReactNode;
907
+ }) => import("react/jsx-runtime").JSX.Element;
908
+ //# sourceMappingURL=MeganavPanel.d.ts.map
909
+ }
910
+
911
+ declare module '@ably/ui/core/Meganav/data' {
912
+ import React from "react";
913
+ import { IconName } from ".@ably/ui/core/Icon/types";
914
+ export type FlyoutPanelList = {
915
+ label: string;
916
+ icon: IconName;
917
+ link: string;
918
+ isMobile?: boolean;
919
+ };
920
+ export type FlyoutPanelHighlight = {
921
+ heading: string;
922
+ content: string;
923
+ labelLink: string;
924
+ url: string;
925
+ image: string;
926
+ };
927
+ export type MenuItem = {
928
+ name: string;
929
+ link?: string;
930
+ isHiddenMobile?: boolean;
931
+ content?: React.ReactNode;
932
+ panelClassName?: string;
933
+ };
934
+ export const menuItemLinks: {
935
+ name: string;
936
+ link: string;
937
+ isHiddenMobile: boolean;
938
+ }[];
939
+ export const menuItemsForHeader: MenuItem[];
940
+ //# sourceMappingURL=data.d.ts.map
941
+ }
942
+
819
943
  declare module '@ably/ui/core/MeganavBlogPostsList' {
820
- import { AbsUrl } from "@ably/ui/core/Meganav";
944
+ import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
821
945
  type MeganavBlogPostsListProps = {
822
946
  recentBlogPosts: {
823
947
  link: string;
@@ -832,7 +956,7 @@ export default MeganavBlogPostsList;
832
956
  }
833
957
 
834
958
  declare module '@ably/ui/core/MeganavContentCompany' {
835
- import { AbsUrl, MeganavPaths } from "@ably/ui/core/Meganav";
959
+ import { AbsUrl, MeganavPaths } from "@ably/ui/core/LegacyMeganav";
836
960
  type MeganavContentCompanyProps = {
837
961
  absUrl: AbsUrl;
838
962
  paths?: MeganavPaths;
@@ -843,7 +967,7 @@ export default MeganavContentCompany;
843
967
  }
844
968
 
845
969
  declare module '@ably/ui/core/MeganavContentDevelopers' {
846
- import { AbsUrl } from "@ably/ui/core/Meganav";
970
+ import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
847
971
  const MeganavContentDevelopers: ({ absUrl, statusUrl, }: {
848
972
  absUrl: AbsUrl;
849
973
  statusUrl: string;
@@ -853,7 +977,7 @@ export default MeganavContentDevelopers;
853
977
  }
854
978
 
855
979
  declare module '@ably/ui/core/MeganavContentProducts' {
856
- import { AbsUrl, MeganavPaths } from "@ably/ui/core/Meganav";
980
+ import { AbsUrl, MeganavPaths } from "@ably/ui/core/LegacyMeganav";
857
981
  type MeganavContentProductsProps = {
858
982
  paths?: MeganavPaths;
859
983
  absUrl: AbsUrl;
@@ -864,7 +988,7 @@ export default MeganavContentProducts;
864
988
  }
865
989
 
866
990
  declare module '@ably/ui/core/MeganavContentUseCases' {
867
- import { AbsUrl } from "@ably/ui/core/Meganav";
991
+ import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
868
992
  const MeganavContentUseCases: ({ absUrl }: {
869
993
  absUrl: AbsUrl;
870
994
  }) => import("react/jsx-runtime").JSX.Element;
@@ -872,18 +996,9 @@ export default MeganavContentUseCases;
872
996
  //# sourceMappingURL=MeganavContentUseCases.d.ts.map
873
997
  }
874
998
 
875
- declare module '@ably/ui/core/MeganavControl/component' {
876
- export default MeganavControl;
877
- function MeganavControl(): {
878
- teardown: () => void;
879
- clear: () => void;
880
- }[];
881
- //# sourceMappingURL=component.d.ts.map
882
- }
883
-
884
999
  declare module '@ably/ui/core/MeganavControl' {
885
1000
  import { ReactNode } from "react";
886
- import { MeganavTheme } from "@ably/ui/core/Meganav";
1001
+ import { MeganavTheme } from "@ably/ui/core/LegacyMeganav";
887
1002
  type MeganavControlProps = {
888
1003
  ariaControls: string;
889
1004
  ariaLabel: string;
@@ -896,19 +1011,8 @@ export default MeganavControl;
896
1011
  //# sourceMappingURL=MeganavControl.d.ts.map
897
1012
  }
898
1013
 
899
- declare module '@ably/ui/core/MeganavControlMobileDropdown/component' {
900
- export default MeganavControlMobileDropdown;
901
- function MeganavControlMobileDropdown({ clearPanels }: {
902
- clearPanels: any;
903
- }): {
904
- teardown: () => void;
905
- clear: () => void;
906
- };
907
- //# sourceMappingURL=component.d.ts.map
908
- }
909
-
910
1014
  declare module '@ably/ui/core/MeganavControlMobileDropdown' {
911
- import { MeganavTheme } from "@ably/ui/core/Meganav";
1015
+ import { MeganavTheme } from "@ably/ui/core/LegacyMeganav";
912
1016
  const MeganavControlMobileDropdown: ({ theme }: {
913
1017
  theme: MeganavTheme;
914
1018
  }) => import("react/jsx-runtime").JSX.Element;
@@ -916,15 +1020,6 @@ export default MeganavControlMobileDropdown;
916
1020
  //# sourceMappingURL=MeganavControlMobileDropdown.d.ts.map
917
1021
  }
918
1022
 
919
- declare module '@ably/ui/core/MeganavControlMobilePanelClose/component' {
920
- function _default(): {
921
- teardown: () => void;
922
- clear: () => void;
923
- }[];
924
- export default _default;
925
- //# sourceMappingURL=component.d.ts.map
926
- }
927
-
928
1023
  declare module '@ably/ui/core/MeganavControlMobilePanelClose' {
929
1024
  type MeganavControlMobilePanelCloseProps = {
930
1025
  ariaControls: string;
@@ -935,15 +1030,6 @@ export default MeganavControlMobilePanelClose;
935
1030
  //# sourceMappingURL=MeganavControlMobilePanelClose.d.ts.map
936
1031
  }
937
1032
 
938
- declare module '@ably/ui/core/MeganavControlMobilePanelOpen/component' {
939
- function _default(): {
940
- teardown: () => void;
941
- clear: () => void;
942
- }[];
943
- export default _default;
944
- //# sourceMappingURL=component.d.ts.map
945
- }
946
-
947
1033
  declare module '@ably/ui/core/MeganavControlMobilePanelOpen' {
948
1034
  import { ReactNode } from "react";
949
1035
  type MeganavControlMobilePanelOpenProps = {
@@ -957,7 +1043,7 @@ export default MeganavControlMobilePanelOpen;
957
1043
 
958
1044
  declare module '@ably/ui/core/MeganavItemsDesktop' {
959
1045
  import React from "react";
960
- import { AbsUrl, MeganavPanels, MeganavPaths, MeganavTheme } from "@ably/ui/core/Meganav";
1046
+ import { AbsUrl, MeganavPanels, MeganavPaths, MeganavTheme } from "@ably/ui/core/LegacyMeganav";
961
1047
  type MeganavDesktopItems = {
962
1048
  panels: MeganavPanels;
963
1049
  paths?: MeganavPaths;
@@ -973,7 +1059,7 @@ export default _default;
973
1059
 
974
1060
  declare module '@ably/ui/core/MeganavItemsMobile' {
975
1061
  import React from "react";
976
- import { AbsUrl, MeganavPanels, MeganavPaths, MeganavSessionState, MeganavTheme } from "@ably/ui/core/Meganav";
1062
+ import { AbsUrl, MeganavPanels, MeganavPaths, MeganavSessionState, MeganavTheme } from "@ably/ui/core/LegacyMeganav";
977
1063
  type MeganavItemsMobileProps = {
978
1064
  panels: MeganavPanels;
979
1065
  paths?: MeganavPaths;
@@ -990,7 +1076,7 @@ export default _default;
990
1076
  }
991
1077
 
992
1078
  declare module '@ably/ui/core/MeganavItemsSignedIn' {
993
- import { AbsUrl, MeganavSessionState, MeganavTheme } from "@ably/ui/core/Meganav";
1079
+ import { AbsUrl, MeganavSessionState, MeganavTheme } from "@ably/ui/core/LegacyMeganav";
994
1080
  type MeganavItemsSignedIn = {
995
1081
  sessionState: MeganavSessionState;
996
1082
  theme: MeganavTheme;
@@ -1003,7 +1089,7 @@ export default MeganavItemsSignedIn;
1003
1089
  }
1004
1090
 
1005
1091
  declare module '@ably/ui/core/MeganavSearch' {
1006
- import { AbsUrl } from "@ably/ui/core/Meganav";
1092
+ import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
1007
1093
  const MeganavSearch: ({ absUrl, dataId, }: {
1008
1094
  absUrl: AbsUrl;
1009
1095
  dataId?: string;
@@ -1012,15 +1098,6 @@ export default MeganavSearch;
1012
1098
  //# sourceMappingURL=MeganavSearch.d.ts.map
1013
1099
  }
1014
1100
 
1015
- declare module '@ably/ui/core/MeganavSearchAutocomplete/component' {
1016
- function _default(apiKey: any): {
1017
- teardown: () => void;
1018
- clear: () => void;
1019
- }[];
1020
- export default _default;
1021
- //# sourceMappingURL=component.d.ts.map
1022
- }
1023
-
1024
1101
  declare module '@ably/ui/core/MeganavSearchAutocomplete' {
1025
1102
  const MeganavSearchAutocomplete: () => import("react/jsx-runtime").JSX.Element;
1026
1103
  export default MeganavSearchAutocomplete;
@@ -1028,7 +1105,7 @@ export default MeganavSearchAutocomplete;
1028
1105
  }
1029
1106
 
1030
1107
  declare module '@ably/ui/core/MeganavSearchPanel' {
1031
- import { AbsUrl } from "@ably/ui/core/Meganav";
1108
+ import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
1032
1109
  const MeganavSearchPanel: ({ absUrl }: {
1033
1110
  absUrl: AbsUrl;
1034
1111
  }) => import("react/jsx-runtime").JSX.Element;
@@ -1036,17 +1113,8 @@ export default MeganavSearchPanel;
1036
1113
  //# sourceMappingURL=MeganavSearchPanel.d.ts.map
1037
1114
  }
1038
1115
 
1039
- declare module '@ably/ui/core/MeganavSearchSuggestions/component' {
1040
- export default MeganavSearchSuggestions;
1041
- function MeganavSearchSuggestions(): {
1042
- teardown: () => void;
1043
- clear: () => void;
1044
- };
1045
- //# sourceMappingURL=component.d.ts.map
1046
- }
1047
-
1048
1116
  declare module '@ably/ui/core/MeganavSearchSuggestions' {
1049
- import { AbsUrl } from "@ably/ui/core/Meganav";
1117
+ import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
1050
1118
  type MeganavSearchSuggestionsProps = {
1051
1119
  absUrl: AbsUrl;
1052
1120
  displaySupportLink: boolean;
@@ -1068,19 +1136,22 @@ function Notice({ bannerContainer, cookieId, noticeId, options }: {
1068
1136
  }
1069
1137
 
1070
1138
  declare module '@ably/ui/core/Notice' {
1071
- type NoticeProps = {
1139
+ import { ColorClass, ColorThemeSet } from "@ably/ui/core/styles/colors/types";
1140
+ export type NoticeProps = {
1072
1141
  buttonLink?: string;
1073
1142
  buttonLabel?: string;
1074
1143
  bodyText?: string;
1075
1144
  title?: string;
1076
1145
  closeBtn?: boolean;
1077
1146
  config?: {
1078
- collapse: boolean;
1079
- noticeId: string;
1147
+ options: {
1148
+ collapse: boolean;
1149
+ };
1150
+ noticeId: string | number;
1080
1151
  cookieId: string;
1081
1152
  };
1082
1153
  bgColor?: string;
1083
- textColor?: string;
1154
+ textColor?: ColorClass | ColorThemeSet;
1084
1155
  bannerContainer?: Element | null;
1085
1156
  cookieId?: string;
1086
1157
  noticeId?: string;
@@ -1270,7 +1341,7 @@ export default ProductTile;
1270
1341
 
1271
1342
  declare module '@ably/ui/core/SignOutLink' {
1272
1343
  import { MouseEventHandler, ReactNode } from "react";
1273
- import { AbsUrl } from "@ably/ui/core/Meganav";
1344
+ import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
1274
1345
  type SignOutLinkProps = {
1275
1346
  token: string;
1276
1347
  href: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ably/ui",
3
- "version": "15.6.0-dev.1a416b3",
3
+ "version": "15.6.0-dev.bdcefb0",
4
4
  "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -34,8 +34,8 @@
34
34
  "@types/lodash.throttle": "^4.1.9",
35
35
  "@types/react-dom": "^18.3.0",
36
36
  "@types/svg-sprite": "^0.0.39",
37
- "@typescript-eslint/eslint-plugin": "^8.16.0",
38
- "@typescript-eslint/parser": "^8.16.0",
37
+ "@typescript-eslint/eslint-plugin": "^8.25.0",
38
+ "@typescript-eslint/parser": "^8.25.0",
39
39
  "@vitejs/plugin-react": "^4.2.1",
40
40
  "@whitespace/storybook-addon-html": "^6.1.1",
41
41
  "autoprefixer": "^10.0.2",
@@ -1,2 +0,0 @@
1
- import throttle from"lodash.throttle";import{queryId,queryIdAll}from"../dom-query";import MeganavControl from"../MeganavControl/component.js";import MeganavControlMobileDropdown from"../MeganavControlMobileDropdown/component.js";import MobilePanelOpenClick from"../MeganavControlMobilePanelOpen/component.js";import MobilePanelCloseClick from"../MeganavControlMobilePanelClose/component.js";import MeganavSearchAutocomplete from"../MeganavSearchAutocomplete/component.js";import MeganavSearchSuggestions from"../MeganavSearchSuggestions/component.js";const windowOnBlur=closeAll=>{window.onblur=()=>closeAll();return{teardown:()=>window.onblur=null}};const documentClick=closeAll=>{const meganav=queryId("meganav");const clickHandler=e=>{if(meganav.contains(e.target))return;closeAll()};document.addEventListener("click",clickHandler);return{teardown:()=>document.removeEventListener("click",clickHandler)}};const documentScroll=themeName=>{if(themeName!=="transparentToWhite")return{teardown:()=>{}};const meganav=queryId("meganav");const navItems=queryIdAll("meganav-link");const controlMobileDropdownMenu=queryId("meganav-control-mobile-dropdown-menu");const controlMobileDropdownClose=queryId("meganav-control-mobile-dropdown-close");const controls=queryIdAll("meganav-control");const signUpBtn=queryId("meganav-sign-up-btn");const invertTextCollection=[...Array.from(controls),...Array.from(navItems),queryId("meganav-logo")];const invertMobleDropdownColor=invert=>{const whiteToBlack=["ui-icon-white","ui-icon-cool-black"];const blackToWhite=[...whiteToBlack].reverse();if(invert){controlMobileDropdownMenu?.classList.replace(...whiteToBlack);controlMobileDropdownClose?.classList.replace(...whiteToBlack)}else{controlMobileDropdownMenu?.classList.replace(...blackToWhite);controlMobileDropdownClose?.classList.replace(...blackToWhite)}};const inverSignupBtnColors=invert=>{if(invert){signUpBtn?.classList.replace("bg-white","bg-cool-black");signUpBtn?.classList.replace("text-cool-black","text-white")}else{signUpBtn?.classList.replace("bg-cool-black","bg-white");signUpBtn?.classList.replace("text-white","text-cool-black")}};const scrollHandler=throttle(()=>{if(window.scrollY>5){meganav.classList.replace("bg-transparent","bg-white");inverSignupBtnColors(true);invertMobleDropdownColor(true);invertTextCollection.forEach(n=>n.classList.replace("text-white","text-cool-black"))}else{meganav.classList.replace("bg-white","bg-transparent");inverSignupBtnColors(false);invertMobleDropdownColor(false);invertTextCollection.forEach(n=>n.classList.replace("text-cool-black","text-white"))}},150);document.addEventListener("scroll",scrollHandler);return{teardown:()=>document.removeEventListener("scroll",scrollHandler)}};export default function Meganav({themeName,addSearchApiKey}){const controls=MeganavControl();const panelOpenControls=MobilePanelOpenClick();const panelCloseControls=MobilePanelCloseClick();const search=MeganavSearchAutocomplete(addSearchApiKey);const searchSuggestions=MeganavSearchSuggestions();const mobileDropdownControl=MeganavControlMobileDropdown({clearPanels:()=>[...panelOpenControls,...panelCloseControls].forEach(i=>i.clear())});const closeAll=()=>[mobileDropdownControl,searchSuggestions,...panelOpenControls,...panelCloseControls,...controls,...search].forEach(i=>i.clear());const teardowns=[documentScroll(themeName??null),documentClick(closeAll),windowOnBlur(closeAll),mobileDropdownControl,searchSuggestions,...controls,...panelOpenControls,...panelCloseControls,...search].map(i=>i.teardown);return()=>teardowns.forEach(teardown=>teardown())}
2
- //# sourceMappingURL=component.js.map
package/core/Meganav.js DELETED
@@ -1,2 +0,0 @@
1
- import React,{useEffect,useState}from"react";import{connectState}from"./remote-data-store.js";import{selectSessionData}from"./remote-session-data.js";import Logo from"./Logo";import MeganavData from"./Meganav/component.json";import MeganavScripts from"./Meganav/component.js";import MeganavItemsDesktop from"./MeganavItemsDesktop";import MeganavItemsSignedIn from"./MeganavItemsSignedIn";import MeganavItemsMobile from"./MeganavItemsMobile";import Notice from"./Notice";import _absUrl from"./url-base.js";import MeganavContentProducts from"./MeganavContentProducts";import MeganavContentUseCases from"./MeganavContentUseCases";import MeganavContentCompany from"./MeganavContentCompany";import MeganavContentDevelopers from"./MeganavContentDevelopers";import MeganavSearch from"./MeganavSearch";const SignIn=({sessionState,theme,loginLink,absUrl,searchDataId})=>{return sessionState.signedIn?React.createElement(MeganavItemsSignedIn,{absUrl:absUrl,sessionState:sessionState,theme:theme,searchDataId:searchDataId}):React.createElement("ul",{className:"hidden md:flex items-center"},React.createElement("li",{className:"ui-meganav-item"},React.createElement("a",{href:absUrl("/contact"),className:`ui-meganav-link ${theme.textColor}`,"data-id":"meganav-link"},"Contact us")),React.createElement("li",{className:"ui-meganav-item"},React.createElement("a",{href:absUrl(loginLink),className:`ui-meganav-link mr-0 ${theme.textColor}`,"data-id":"meganav-link"},"Login")),React.createElement("li",{className:"ui-meganav-item"},React.createElement(MeganavSearch,{absUrl:absUrl,dataId:searchDataId})),React.createElement("li",{className:"ui-meganav-item"},React.createElement("a",{href:absUrl("/sign-up"),"data-id":"meganav-sign-up-btn",className:`ui-btn p-btn-small ${theme.buttonBackgroundColor} ${theme.buttonTextColor}`},"Sign up free")))};const SignInPlaceholder=()=>React.createElement("div",null);const panels={MeganavContentProducts,MeganavContentUseCases,MeganavContentCompany,MeganavContentDevelopers};const Meganav=({paths,themeName="white",notice,loginLink="/login",urlBase,addSearchApiKey,statusUrl,searchDataId})=>{const[sessionState,setSessionState]=useState();useEffect(()=>{connectState(selectSessionData,setSessionState)},[]);useEffect(()=>{const teardown=MeganavScripts({themeName,addSearchApiKey});return()=>teardown()},[sessionState]);const theme=MeganavData.themes[themeName];const absUrl=path=>_absUrl(path,urlBase);return React.createElement("nav",{className:`ui-meganav-wrapper ${theme.backgroundColor} ${theme.barShadow}`,"data-id":"meganav","aria-label":"Main"},notice&&React.createElement(Notice,{...notice.props,config:notice.config}),React.createElement("div",{className:"ui-meganav ui-grid-px"},React.createElement("div",{className:"mr-24"},React.createElement(Logo,{dataId:"meganav-logo",href:urlBase,logoUrl:paths?.logo})),React.createElement(MeganavItemsDesktop,{panels:panels,paths:paths,theme:theme,absUrl:absUrl,statusUrl:statusUrl}),sessionState?React.createElement(SignIn,{sessionState:sessionState,theme:theme,loginLink:loginLink,absUrl:absUrl,searchDataId:searchDataId}):React.createElement(SignInPlaceholder,null),React.createElement(MeganavItemsMobile,{panels:panels,sessionState:sessionState,paths:paths,theme:theme,loginLink:loginLink,absUrl:absUrl,statusUrl:statusUrl,searchDataId:searchDataId})))};export default Meganav;
2
- //# sourceMappingURL=Meganav.js.map
@@ -1,2 +0,0 @@
1
- import{queryIdAll}from"../dom-query";import{selectRecentBlogPosts}from"../remote-blogs-posts";import{connectState}from"../remote-data-store";const template=({link,title,pubDate})=>{const[li,a,heading,copy]=["li","a","p","p"].map(el=>document.createElement(el));a.href=link;a.classList.add("ui-meganav-media","group");heading.textContent=title;heading.classList.add("ui-meganav-media-heading");copy.textContent=pubDate;copy.classList.add("ui-meganav-media-copy");a.appendChild(heading);a.appendChild(copy);li.appendChild(a);return li};export default(()=>{connectState(selectRecentBlogPosts,recentBlogPosts=>{if(Array.isArray(recentBlogPosts)&&recentBlogPosts.length>0){const sections=queryIdAll("meganav-company-panel-blog-section");const containers=queryIdAll("meganav-company-panel-recent-blog-posts");Array.from(containers).forEach(container=>{const fragment=document.createDocumentFragment();recentBlogPosts.forEach(post=>fragment.appendChild(template(post)));container.appendChild(fragment)});Array.from(sections).forEach(section=>section.classList.remove("hidden"))}})});
2
- //# sourceMappingURL=component.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/core/MeganavBlogPostsList/component.js"],"sourcesContent":["import { queryIdAll } from \"../dom-query\";\nimport { selectRecentBlogPosts } from \"../remote-blogs-posts\";\nimport { connectState } from \"../remote-data-store\";\n\nconst template = ({ link, title, pubDate }) => {\n const [li, a, heading, copy] = [\"li\", \"a\", \"p\", \"p\"].map((el) =>\n document.createElement(el),\n );\n\n a.href = link;\n a.classList.add(\"ui-meganav-media\", \"group\");\n\n heading.textContent = title;\n heading.classList.add(\"ui-meganav-media-heading\");\n\n copy.textContent = pubDate;\n copy.classList.add(\"ui-meganav-media-copy\");\n\n a.appendChild(heading);\n a.appendChild(copy);\n li.appendChild(a);\n\n return li;\n};\n\nexport default () => {\n connectState(selectRecentBlogPosts, (recentBlogPosts) => {\n if (Array.isArray(recentBlogPosts) && recentBlogPosts.length > 0) {\n const sections = queryIdAll(\"meganav-company-panel-blog-section\");\n const containers = queryIdAll(\"meganav-company-panel-recent-blog-posts\");\n\n Array.from(containers).forEach((container) => {\n const fragment = document.createDocumentFragment();\n recentBlogPosts.forEach((post) => fragment.appendChild(template(post)));\n container.appendChild(fragment);\n });\n\n Array.from(sections).forEach((section) =>\n section.classList.remove(\"hidden\"),\n );\n }\n });\n};\n"],"names":["queryIdAll","selectRecentBlogPosts","connectState","template","link","title","pubDate","li","a","heading","copy","map","el","document","createElement","href","classList","add","textContent","appendChild","recentBlogPosts","Array","isArray","length","sections","containers","from","forEach","container","fragment","createDocumentFragment","post","section","remove"],"mappings":"AAAA,OAASA,UAAU,KAAQ,cAAe,AAC1C,QAASC,qBAAqB,KAAQ,uBAAwB,AAC9D,QAASC,YAAY,KAAQ,sBAAuB,CAEpD,MAAMC,SAAW,CAAC,CAAEC,IAAI,CAAEC,KAAK,CAAEC,OAAO,CAAE,IACxC,KAAM,CAACC,GAAIC,EAAGC,QAASC,KAAK,CAAG,CAAC,KAAM,IAAK,IAAK,IAAI,CAACC,GAAG,CAAC,AAACC,IACxDC,SAASC,aAAa,CAACF,IAGzBJ,CAAAA,EAAEO,IAAI,CAAGX,KACTI,EAAEQ,SAAS,CAACC,GAAG,CAAC,mBAAoB,QAEpCR,CAAAA,QAAQS,WAAW,CAAGb,MACtBI,QAAQO,SAAS,CAACC,GAAG,CAAC,2BAEtBP,CAAAA,KAAKQ,WAAW,CAAGZ,QACnBI,KAAKM,SAAS,CAACC,GAAG,CAAC,yBAEnBT,EAAEW,WAAW,CAACV,SACdD,EAAEW,WAAW,CAACT,MACdH,GAAGY,WAAW,CAACX,GAEf,OAAOD,EACT,CAEA,eAAe,CAAA,KACbL,aAAaD,sBAAuB,AAACmB,kBACnC,GAAIC,MAAMC,OAAO,CAACF,kBAAoBA,gBAAgBG,MAAM,CAAG,EAAG,CAChE,MAAMC,SAAWxB,WAAW,sCAC5B,MAAMyB,WAAazB,WAAW,2CAE9BqB,MAAMK,IAAI,CAACD,YAAYE,OAAO,CAAC,AAACC,YAC9B,MAAMC,SAAWhB,SAASiB,sBAAsB,GAChDV,gBAAgBO,OAAO,CAAC,AAACI,MAASF,SAASV,WAAW,CAAChB,SAAS4B,QAChEH,UAAUT,WAAW,CAACU,SACxB,GAEAR,MAAMK,IAAI,CAACF,UAAUG,OAAO,CAAC,AAACK,SAC5BA,QAAQhB,SAAS,CAACiB,MAAM,CAAC,UAE7B,CACF,EACF,CAAA,CAAE"}
@@ -1,2 +0,0 @@
1
- import{queryId,queryIdAll}from"../dom-query";const MeganavControl=()=>{const controls=Array.from(queryIdAll("meganav-control"));const panels=Array.from(queryIdAll("meganav-panel"));const mdBreakpoint=getComputedStyle(document.documentElement).getPropertyValue("--bp-md");const hoverEnabled=()=>window.matchMedia(`(hover: hover) and (pointer: fine) and (min-width: ${mdBreakpoint})`).matches;const isSearchControl=node=>node.dataset.control==="search";const isSearchPanelOpen=()=>{const searchPanel=document.querySelector('[data-id="meganav-panel"]#panel-search');if(!searchPanel)return;return!searchPanel.classList.contains("invisible")};const controlsHaveFocus=()=>controls.some(control=>control===document.activeElement);const hover=(control,panel,open)=>{if(hoverEnabled()&&!controlsHaveFocus()&&!isSearchPanelOpen()){const classes=["invisible","visible"];panel.classList.replace(...open?classes:classes.reverse());control.setAttribute("aria-expanded",open);control.dataset.hover=open}};const mouseenterHandler=(control,panel)=>()=>hover(control,panel,true);const mouseleaveHandler=(control,panel)=>()=>hover(control,panel,false);const clickHandler=(control,panel)=>()=>{controls.forEach(node=>node!==control&&node.setAttribute("aria-expanded",false));panels.forEach(node=>node!==panel&&node.classList.replace("visible","invisible"));const ariaExpanded=control.getAttribute("aria-expanded");const openedByHover=control.dataset.hover==="true";if(ariaExpanded==="true"&&!openedByHover){control.setAttribute("aria-expanded",false);panel.classList.replace("visible","invisible")}else{control.setAttribute("aria-expanded",true);panel.classList.replace("invisible","visible")}if(openedByHover){control.dataset.hover=false}if(isSearchControl(control)){const searchInput=queryId("meganav-search-input",panel);if(!searchInput)return;searchInput.focus()}else{control.focus()}};return controls.map(control=>{const item=control.parentNode;const panel=document.querySelector(`#${control.getAttribute("aria-controls")}`);const click=clickHandler(control,panel);control.addEventListener("click",click);let mouseenter,mouseleave;if(!isSearchControl(control)){mouseenter=mouseenterHandler(control,panel);mouseleave=mouseleaveHandler(control,panel);item.addEventListener("mouseenter",mouseenter);item.addEventListener("mouseleave",mouseleave)}return[{teardown:()=>{if(mouseenter&&mouseleave){item.removeEventListener("mouseenter",mouseenter);item.removeEventListener("mouseleave",mouseleave)}control.removeEventListener("click",click)},clear:()=>{control.setAttribute("aria-expanded",false);panel.classList.replace("visible","invisible")}}]}).flat()};export default MeganavControl;
2
- //# sourceMappingURL=component.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/core/MeganavControl/component.js"],"sourcesContent":["import { queryId, queryIdAll } from \"../dom-query\";\n\nconst MeganavControl = () => {\n const controls = Array.from(queryIdAll(\"meganav-control\"));\n const panels = Array.from(queryIdAll(\"meganav-panel\"));\n const mdBreakpoint = getComputedStyle(\n document.documentElement,\n ).getPropertyValue(\"--bp-md\");\n\n const hoverEnabled = () =>\n window.matchMedia(\n `(hover: hover) and (pointer: fine) and (min-width: ${mdBreakpoint})`,\n ).matches;\n\n const isSearchControl = (node) => node.dataset.control === \"search\";\n\n const isSearchPanelOpen = () => {\n const searchPanel = document.querySelector(\n '[data-id=\"meganav-panel\"]#panel-search',\n );\n if (!searchPanel) return;\n return !searchPanel.classList.contains(\"invisible\");\n };\n\n const controlsHaveFocus = () =>\n controls.some((control) => control === document.activeElement);\n\n const hover = (control, panel, open) => {\n if (hoverEnabled() && !controlsHaveFocus() && !isSearchPanelOpen()) {\n const classes = [\"invisible\", \"visible\"];\n panel.classList.replace(...(open ? classes : classes.reverse()));\n control.setAttribute(\"aria-expanded\", open);\n control.dataset.hover = open;\n }\n };\n\n const mouseenterHandler = (control, panel) => () =>\n hover(control, panel, true);\n\n const mouseleaveHandler = (control, panel) => () =>\n hover(control, panel, false);\n\n const clickHandler = (control, panel) => () => {\n controls.forEach(\n (node) => node !== control && node.setAttribute(\"aria-expanded\", false),\n );\n\n panels.forEach(\n (node) =>\n node !== panel && node.classList.replace(\"visible\", \"invisible\"),\n );\n\n const ariaExpanded = control.getAttribute(\"aria-expanded\");\n\n // Prevent closing of the panel if it was already opened by hovering\n const openedByHover = control.dataset.hover === \"true\";\n\n if (ariaExpanded === \"true\" && !openedByHover) {\n control.setAttribute(\"aria-expanded\", false);\n panel.classList.replace(\"visible\", \"invisible\");\n } else {\n control.setAttribute(\"aria-expanded\", true);\n panel.classList.replace(\"invisible\", \"visible\");\n }\n\n if (openedByHover) {\n control.dataset.hover = false;\n }\n\n if (isSearchControl(control)) {\n const searchInput = queryId(\"meganav-search-input\", panel);\n if (!searchInput) return;\n searchInput.focus();\n } else {\n control.focus();\n }\n };\n\n return controls\n .map((control) => {\n const item = control.parentNode;\n const panel = document.querySelector(\n `#${control.getAttribute(\"aria-controls\")}`,\n );\n const click = clickHandler(control, panel);\n control.addEventListener(\"click\", click);\n let mouseenter, mouseleave;\n\n if (!isSearchControl(control)) {\n mouseenter = mouseenterHandler(control, panel);\n mouseleave = mouseleaveHandler(control, panel);\n\n item.addEventListener(\"mouseenter\", mouseenter);\n item.addEventListener(\"mouseleave\", mouseleave);\n }\n\n return [\n {\n teardown: () => {\n if (mouseenter && mouseleave) {\n item.removeEventListener(\"mouseenter\", mouseenter);\n item.removeEventListener(\"mouseleave\", mouseleave);\n }\n\n control.removeEventListener(\"click\", click);\n },\n clear: () => {\n control.setAttribute(\"aria-expanded\", false);\n panel.classList.replace(\"visible\", \"invisible\");\n },\n },\n ];\n })\n .flat();\n};\n\nexport default MeganavControl;\n"],"names":["queryId","queryIdAll","MeganavControl","controls","Array","from","panels","mdBreakpoint","getComputedStyle","document","documentElement","getPropertyValue","hoverEnabled","window","matchMedia","matches","isSearchControl","node","dataset","control","isSearchPanelOpen","searchPanel","querySelector","classList","contains","controlsHaveFocus","some","activeElement","hover","panel","open","classes","replace","reverse","setAttribute","mouseenterHandler","mouseleaveHandler","clickHandler","forEach","ariaExpanded","getAttribute","openedByHover","searchInput","focus","map","item","parentNode","click","addEventListener","mouseenter","mouseleave","teardown","removeEventListener","clear","flat"],"mappings":"AAAA,OAASA,OAAO,CAAEC,UAAU,KAAQ,cAAe,CAEnD,MAAMC,eAAiB,KACrB,MAAMC,SAAWC,MAAMC,IAAI,CAACJ,WAAW,oBACvC,MAAMK,OAASF,MAAMC,IAAI,CAACJ,WAAW,kBACrC,MAAMM,aAAeC,iBACnBC,SAASC,eAAe,EACxBC,gBAAgB,CAAC,WAEnB,MAAMC,aAAe,IACnBC,OAAOC,UAAU,CACf,CAAC,mDAAmD,EAAEP,aAAa,CAAC,CAAC,EACrEQ,OAAO,CAEX,MAAMC,gBAAkB,AAACC,MAASA,KAAKC,OAAO,CAACC,OAAO,GAAK,SAE3D,MAAMC,kBAAoB,KACxB,MAAMC,YAAcZ,SAASa,aAAa,CACxC,0CAEF,GAAI,CAACD,YAAa,OAClB,MAAO,CAACA,YAAYE,SAAS,CAACC,QAAQ,CAAC,YACzC,EAEA,MAAMC,kBAAoB,IACxBtB,SAASuB,IAAI,CAAC,AAACP,SAAYA,UAAYV,SAASkB,aAAa,EAE/D,MAAMC,MAAQ,CAACT,QAASU,MAAOC,QAC7B,GAAIlB,gBAAkB,CAACa,qBAAuB,CAACL,oBAAqB,CAClE,MAAMW,QAAU,CAAC,YAAa,UAAU,CACxCF,MAAMN,SAAS,CAACS,OAAO,IAAKF,KAAOC,QAAUA,QAAQE,OAAO,IAC5Dd,QAAQe,YAAY,CAAC,gBAAiBJ,KACtCX,CAAAA,QAAQD,OAAO,CAACU,KAAK,CAAGE,IAC1B,CACF,EAEA,MAAMK,kBAAoB,CAAChB,QAASU,QAAU,IAC5CD,MAAMT,QAASU,MAAO,MAExB,MAAMO,kBAAoB,CAACjB,QAASU,QAAU,IAC5CD,MAAMT,QAASU,MAAO,OAExB,MAAMQ,aAAe,CAAClB,QAASU,QAAU,KACvC1B,SAASmC,OAAO,CACd,AAACrB,MAASA,OAASE,SAAWF,KAAKiB,YAAY,CAAC,gBAAiB,QAGnE5B,OAAOgC,OAAO,CACZ,AAACrB,MACCA,OAASY,OAASZ,KAAKM,SAAS,CAACS,OAAO,CAAC,UAAW,cAGxD,MAAMO,aAAepB,QAAQqB,YAAY,CAAC,iBAG1C,MAAMC,cAAgBtB,QAAQD,OAAO,CAACU,KAAK,GAAK,OAEhD,GAAIW,eAAiB,QAAU,CAACE,cAAe,CAC7CtB,QAAQe,YAAY,CAAC,gBAAiB,OACtCL,MAAMN,SAAS,CAACS,OAAO,CAAC,UAAW,YACrC,KAAO,CACLb,QAAQe,YAAY,CAAC,gBAAiB,MACtCL,MAAMN,SAAS,CAACS,OAAO,CAAC,YAAa,UACvC,CAEA,GAAIS,cAAe,CACjBtB,QAAQD,OAAO,CAACU,KAAK,CAAG,KAC1B,CAEA,GAAIZ,gBAAgBG,SAAU,CAC5B,MAAMuB,YAAc1C,QAAQ,uBAAwB6B,OACpD,GAAI,CAACa,YAAa,OAClBA,YAAYC,KAAK,EACnB,KAAO,CACLxB,QAAQwB,KAAK,EACf,CACF,EAEA,OAAOxC,SACJyC,GAAG,CAAC,AAACzB,UACJ,MAAM0B,KAAO1B,QAAQ2B,UAAU,CAC/B,MAAMjB,MAAQpB,SAASa,aAAa,CAClC,CAAC,CAAC,EAAEH,QAAQqB,YAAY,CAAC,iBAAiB,CAAC,EAE7C,MAAMO,MAAQV,aAAalB,QAASU,OACpCV,QAAQ6B,gBAAgB,CAAC,QAASD,OAClC,IAAIE,WAAYC,WAEhB,GAAI,CAAClC,gBAAgBG,SAAU,CAC7B8B,WAAad,kBAAkBhB,QAASU,OACxCqB,WAAad,kBAAkBjB,QAASU,OAExCgB,KAAKG,gBAAgB,CAAC,aAAcC,YACpCJ,KAAKG,gBAAgB,CAAC,aAAcE,WACtC,CAEA,MAAO,CACL,CACEC,SAAU,KACR,GAAIF,YAAcC,WAAY,CAC5BL,KAAKO,mBAAmB,CAAC,aAAcH,YACvCJ,KAAKO,mBAAmB,CAAC,aAAcF,WACzC,CAEA/B,QAAQiC,mBAAmB,CAAC,QAASL,MACvC,EACAM,MAAO,KACLlC,QAAQe,YAAY,CAAC,gBAAiB,OACtCL,MAAMN,SAAS,CAACS,OAAO,CAAC,UAAW,YACrC,CACF,EACD,AACH,GACCsB,IAAI,EACT,CAEA,gBAAepD,cAAe"}
@@ -1,2 +0,0 @@
1
- import scrollLock from"scroll-lock";import{queryId}from"../dom-query";const MeganavControlMobileDropdown=({clearPanels})=>{const control=queryId("meganav-control-mobile-dropdown");const dropdown=queryId("meganav-mobile-dropdown");const menuIcon=queryId("meganav-control-mobile-dropdown-menu");const closeIcon=queryId("meganav-control-mobile-dropdown-close");const clickHandler=()=>{const ariaExpanded=control.getAttribute("aria-expanded");if(ariaExpanded==="false"){dropdown.classList.replace("invisible","visible");control.setAttribute("aria-expanded",true);scrollLock.disablePageScroll()}else{dropdown.classList.replace("visible","invisible");control.setAttribute("aria-expanded",false);scrollLock.enablePageScroll();clearPanels()}menuIcon.classList.toggle("hidden");closeIcon.classList.toggle("hidden")};control.addEventListener("click",clickHandler);return{teardown:()=>{control.removeEventListener("click",clickHandler);scrollLock.enablePageScroll()},clear:()=>{dropdown.classList.replace("visible","invisible");control.setAttribute("aria-expanded",false);menuIcon.classList.remove("hidden");closeIcon.classList.add("hidden");scrollLock.enablePageScroll()}}};export default MeganavControlMobileDropdown;
2
- //# sourceMappingURL=component.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/core/MeganavControlMobileDropdown/component.js"],"sourcesContent":["import scrollLock from \"scroll-lock\";\n\nimport { queryId } from \"../dom-query\";\n\nconst MeganavControlMobileDropdown = ({ clearPanels }) => {\n const control = queryId(\"meganav-control-mobile-dropdown\");\n const dropdown = queryId(\"meganav-mobile-dropdown\");\n const menuIcon = queryId(\"meganav-control-mobile-dropdown-menu\");\n const closeIcon = queryId(\"meganav-control-mobile-dropdown-close\");\n\n const clickHandler = () => {\n const ariaExpanded = control.getAttribute(\"aria-expanded\");\n\n if (ariaExpanded === \"false\") {\n dropdown.classList.replace(\"invisible\", \"visible\");\n control.setAttribute(\"aria-expanded\", true);\n scrollLock.disablePageScroll();\n } else {\n dropdown.classList.replace(\"visible\", \"invisible\");\n control.setAttribute(\"aria-expanded\", false);\n scrollLock.enablePageScroll();\n clearPanels();\n }\n\n menuIcon.classList.toggle(\"hidden\");\n closeIcon.classList.toggle(\"hidden\");\n };\n\n control.addEventListener(\"click\", clickHandler);\n\n return {\n teardown: () => {\n control.removeEventListener(\"click\", clickHandler);\n scrollLock.enablePageScroll();\n },\n clear: () => {\n dropdown.classList.replace(\"visible\", \"invisible\");\n control.setAttribute(\"aria-expanded\", false);\n menuIcon.classList.remove(\"hidden\");\n closeIcon.classList.add(\"hidden\");\n scrollLock.enablePageScroll();\n },\n };\n};\n\nexport default MeganavControlMobileDropdown;\n"],"names":["scrollLock","queryId","MeganavControlMobileDropdown","clearPanels","control","dropdown","menuIcon","closeIcon","clickHandler","ariaExpanded","getAttribute","classList","replace","setAttribute","disablePageScroll","enablePageScroll","toggle","addEventListener","teardown","removeEventListener","clear","remove","add"],"mappings":"AAAA,OAAOA,eAAgB,aAAc,AAErC,QAASC,OAAO,KAAQ,cAAe,CAEvC,MAAMC,6BAA+B,CAAC,CAAEC,WAAW,CAAE,IACnD,MAAMC,QAAUH,QAAQ,mCACxB,MAAMI,SAAWJ,QAAQ,2BACzB,MAAMK,SAAWL,QAAQ,wCACzB,MAAMM,UAAYN,QAAQ,yCAE1B,MAAMO,aAAe,KACnB,MAAMC,aAAeL,QAAQM,YAAY,CAAC,iBAE1C,GAAID,eAAiB,QAAS,CAC5BJ,SAASM,SAAS,CAACC,OAAO,CAAC,YAAa,WACxCR,QAAQS,YAAY,CAAC,gBAAiB,MACtCb,WAAWc,iBAAiB,EAC9B,KAAO,CACLT,SAASM,SAAS,CAACC,OAAO,CAAC,UAAW,aACtCR,QAAQS,YAAY,CAAC,gBAAiB,OACtCb,WAAWe,gBAAgB,GAC3BZ,aACF,CAEAG,SAASK,SAAS,CAACK,MAAM,CAAC,UAC1BT,UAAUI,SAAS,CAACK,MAAM,CAAC,SAC7B,EAEAZ,QAAQa,gBAAgB,CAAC,QAAST,cAElC,MAAO,CACLU,SAAU,KACRd,QAAQe,mBAAmB,CAAC,QAASX,cACrCR,WAAWe,gBAAgB,EAC7B,EACAK,MAAO,KACLf,SAASM,SAAS,CAACC,OAAO,CAAC,UAAW,aACtCR,QAAQS,YAAY,CAAC,gBAAiB,OACtCP,SAASK,SAAS,CAACU,MAAM,CAAC,UAC1Bd,UAAUI,SAAS,CAACW,GAAG,CAAC,UACxBtB,WAAWe,gBAAgB,EAC7B,CACF,CACF,CAEA,gBAAeb,4BAA6B"}
@@ -1,2 +0,0 @@
1
- import{queryIdAll}from"../dom-query";export default(()=>{const closeControls=Array.from(queryIdAll("meganav-control-mobile-panel-close"));const openControls=Array.from(queryIdAll("meganav-control-mobile-panel-open"));const clickHandler=(btn,openBtn,panel)=>()=>{btn.setAttribute("aria-expanded",false);openBtn.setAttribute("aria-expanded",false);panel.classList.replace("block","hidden");panel.style.height=null};return closeControls.map(btn=>{const openBtn=openControls.find(open=>open.getAttribute("aria-controls")===btn.getAttribute("aria-controls"));const panel=document.querySelector(`#${btn.getAttribute("aria-controls")}`);const handler=clickHandler(btn,openBtn,panel);btn.addEventListener("click",handler);return{teardown:()=>btn.removeEventListener("click",handler),clear:()=>btn.setAttribute("aria-expanded",false)}})});
2
- //# sourceMappingURL=component.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/core/MeganavControlMobilePanelClose/component.js"],"sourcesContent":["import { queryIdAll } from \"../dom-query\";\n\nexport default () => {\n const closeControls = Array.from(\n queryIdAll(\"meganav-control-mobile-panel-close\"),\n );\n const openControls = Array.from(\n queryIdAll(\"meganav-control-mobile-panel-open\"),\n );\n\n const clickHandler = (btn, openBtn, panel) => () => {\n btn.setAttribute(\"aria-expanded\", false);\n openBtn.setAttribute(\"aria-expanded\", false);\n panel.classList.replace(\"block\", \"hidden\");\n panel.style.height = null;\n };\n\n return closeControls.map((btn) => {\n const openBtn = openControls.find(\n (open) =>\n open.getAttribute(\"aria-controls\") ===\n btn.getAttribute(\"aria-controls\"),\n );\n const panel = document.querySelector(\n `#${btn.getAttribute(\"aria-controls\")}`,\n );\n const handler = clickHandler(btn, openBtn, panel);\n\n btn.addEventListener(\"click\", handler);\n\n return {\n teardown: () => btn.removeEventListener(\"click\", handler),\n clear: () => btn.setAttribute(\"aria-expanded\", false),\n };\n });\n};\n"],"names":["queryIdAll","closeControls","Array","from","openControls","clickHandler","btn","openBtn","panel","setAttribute","classList","replace","style","height","map","find","open","getAttribute","document","querySelector","handler","addEventListener","teardown","removeEventListener","clear"],"mappings":"AAAA,OAASA,UAAU,KAAQ,cAAe,AAE1C,eAAe,CAAA,KACb,MAAMC,cAAgBC,MAAMC,IAAI,CAC9BH,WAAW,uCAEb,MAAMI,aAAeF,MAAMC,IAAI,CAC7BH,WAAW,sCAGb,MAAMK,aAAe,CAACC,IAAKC,QAASC,QAAU,KAC5CF,IAAIG,YAAY,CAAC,gBAAiB,OAClCF,QAAQE,YAAY,CAAC,gBAAiB,OACtCD,MAAME,SAAS,CAACC,OAAO,CAAC,QAAS,SACjCH,CAAAA,MAAMI,KAAK,CAACC,MAAM,CAAG,IACvB,EAEA,OAAOZ,cAAca,GAAG,CAAC,AAACR,MACxB,MAAMC,QAAUH,aAAaW,IAAI,CAC/B,AAACC,MACCA,KAAKC,YAAY,CAAC,mBAClBX,IAAIW,YAAY,CAAC,kBAErB,MAAMT,MAAQU,SAASC,aAAa,CAClC,CAAC,CAAC,EAAEb,IAAIW,YAAY,CAAC,iBAAiB,CAAC,EAEzC,MAAMG,QAAUf,aAAaC,IAAKC,QAASC,OAE3CF,IAAIe,gBAAgB,CAAC,QAASD,SAE9B,MAAO,CACLE,SAAU,IAAMhB,IAAIiB,mBAAmB,CAAC,QAASH,SACjDI,MAAO,IAAMlB,IAAIG,YAAY,CAAC,gBAAiB,MACjD,CACF,EACF,CAAA,CAAE"}
@@ -1,2 +0,0 @@
1
- import{queryId,queryIdAll}from"../dom-query";import{remsToPixelValue}from"../css";export default(()=>{const closeControls=Array.from(queryIdAll("meganav-control-mobile-panel-close"));const openControls=Array.from(queryIdAll("meganav-control-mobile-panel-open"));const dropdown=queryId("meganav-mobile-dropdown");const meganavHeight=remsToPixelValue(getComputedStyle(document.documentElement).getPropertyValue("--ui-meganav-height"));const clickHandler=(btn,closeBtn,panel)=>()=>{btn.setAttribute("aria-expanded",true);closeBtn.setAttribute("aria-expanded",true);panel.classList.replace("hidden","block");panel.style.height=`${window.innerHeight-meganavHeight>panel.offsetHeight?panel.offsetHeight:window.innerHeight-meganavHeight}px`};return openControls.map(btn=>{const closeBtn=closeControls.find(node=>node.getAttribute("aria-controls")===btn.getAttribute("aria-controls"));const panel=document.querySelector(`#${btn.getAttribute("aria-controls")}`);const handler=clickHandler(btn,closeBtn,panel);btn.addEventListener("click",handler);return{teardown:()=>btn.removeEventListener("click",handler),clear:()=>{panel.classList.replace("block","hidden");dropdown.classList.remove("ui-meganav-mobile-dropdown-expand");btn.setAttribute("aria-expanded",false);panel.style.height=null}}})});
2
- //# sourceMappingURL=component.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/core/MeganavControlMobilePanelOpen/component.js"],"sourcesContent":["import { queryId, queryIdAll } from \"../dom-query\";\nimport { remsToPixelValue } from \"../css\";\n\nexport default () => {\n const closeControls = Array.from(\n queryIdAll(\"meganav-control-mobile-panel-close\"),\n );\n const openControls = Array.from(\n queryIdAll(\"meganav-control-mobile-panel-open\"),\n );\n const dropdown = queryId(\"meganav-mobile-dropdown\");\n\n // Height is defined in rem's so to get the pixel value we need to find the fontSize on root\n const meganavHeight = remsToPixelValue(\n getComputedStyle(document.documentElement).getPropertyValue(\n \"--ui-meganav-height\",\n ),\n );\n\n const clickHandler = (btn, closeBtn, panel) => () => {\n btn.setAttribute(\"aria-expanded\", true);\n closeBtn.setAttribute(\"aria-expanded\", true);\n panel.classList.replace(\"hidden\", \"block\");\n\n // On devices where we don't have enough space for the panel, set it's height to\n // the height of the viewport (minus the meganav height) - this will trigger a scroll.\n // Otherwise just set it to the panel height. This handles the case where the ratio of vertical\n // space to horizontal is especially high (think tablets, but not only).\n panel.style.height = `${\n window.innerHeight - meganavHeight > panel.offsetHeight\n ? panel.offsetHeight\n : window.innerHeight - meganavHeight\n }px`;\n };\n\n return openControls.map((btn) => {\n const closeBtn = closeControls.find(\n (node) =>\n node.getAttribute(\"aria-controls\") ===\n btn.getAttribute(\"aria-controls\"),\n );\n const panel = document.querySelector(\n `#${btn.getAttribute(\"aria-controls\")}`,\n );\n const handler = clickHandler(btn, closeBtn, panel);\n\n btn.addEventListener(\"click\", handler);\n\n return {\n teardown: () => btn.removeEventListener(\"click\", handler),\n clear: () => {\n panel.classList.replace(\"block\", \"hidden\");\n dropdown.classList.remove(\"ui-meganav-mobile-dropdown-expand\");\n btn.setAttribute(\"aria-expanded\", false);\n panel.style.height = null;\n },\n };\n });\n};\n"],"names":["queryId","queryIdAll","remsToPixelValue","closeControls","Array","from","openControls","dropdown","meganavHeight","getComputedStyle","document","documentElement","getPropertyValue","clickHandler","btn","closeBtn","panel","setAttribute","classList","replace","style","height","window","innerHeight","offsetHeight","map","find","node","getAttribute","querySelector","handler","addEventListener","teardown","removeEventListener","clear","remove"],"mappings":"AAAA,OAASA,OAAO,CAAEC,UAAU,KAAQ,cAAe,AACnD,QAASC,gBAAgB,KAAQ,QAAS,AAE1C,eAAe,CAAA,KACb,MAAMC,cAAgBC,MAAMC,IAAI,CAC9BJ,WAAW,uCAEb,MAAMK,aAAeF,MAAMC,IAAI,CAC7BJ,WAAW,sCAEb,MAAMM,SAAWP,QAAQ,2BAGzB,MAAMQ,cAAgBN,iBACpBO,iBAAiBC,SAASC,eAAe,EAAEC,gBAAgB,CACzD,wBAIJ,MAAMC,aAAe,CAACC,IAAKC,SAAUC,QAAU,KAC7CF,IAAIG,YAAY,CAAC,gBAAiB,MAClCF,SAASE,YAAY,CAAC,gBAAiB,MACvCD,MAAME,SAAS,CAACC,OAAO,CAAC,SAAU,QAMlCH,CAAAA,MAAMI,KAAK,CAACC,MAAM,CAAG,CAAC,EACpBC,OAAOC,WAAW,CAAGf,cAAgBQ,MAAMQ,YAAY,CACnDR,MAAMQ,YAAY,CAClBF,OAAOC,WAAW,CAAGf,cAC1B,EAAE,CAAC,AACN,EAEA,OAAOF,aAAamB,GAAG,CAAC,AAACX,MACvB,MAAMC,SAAWZ,cAAcuB,IAAI,CACjC,AAACC,MACCA,KAAKC,YAAY,CAAC,mBAClBd,IAAIc,YAAY,CAAC,kBAErB,MAAMZ,MAAQN,SAASmB,aAAa,CAClC,CAAC,CAAC,EAAEf,IAAIc,YAAY,CAAC,iBAAiB,CAAC,EAEzC,MAAME,QAAUjB,aAAaC,IAAKC,SAAUC,OAE5CF,IAAIiB,gBAAgB,CAAC,QAASD,SAE9B,MAAO,CACLE,SAAU,IAAMlB,IAAImB,mBAAmB,CAAC,QAASH,SACjDI,MAAO,KACLlB,MAAME,SAAS,CAACC,OAAO,CAAC,QAAS,UACjCZ,SAASW,SAAS,CAACiB,MAAM,CAAC,qCAC1BrB,IAAIG,YAAY,CAAC,gBAAiB,MAClCD,CAAAA,MAAMI,KAAK,CAACC,MAAM,CAAG,IACvB,CACF,CACF,EACF,CAAA,CAAE"}