@ably/ui 16.0.0-dev.a61121b5 → 16.0.0-dev.d14f7e38
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.
- package/core/.DS_Store +0 -0
- package/core/Accordion/types.js.map +1 -1
- package/core/Accordion.js +1 -1
- package/core/Accordion.js.map +1 -1
- package/core/FeaturedLink.js +1 -1
- package/core/FeaturedLink.js.map +1 -1
- package/core/Flyout.js +1 -1
- package/core/Flyout.js.map +1 -1
- package/core/Footer/data.js +1 -1
- package/core/Footer/data.js.map +1 -1
- package/core/Footer.js +1 -1
- package/core/Footer.js.map +1 -1
- package/core/Header/HeaderLinks.js +1 -1
- package/core/Header/HeaderLinks.js.map +1 -1
- package/core/Header.js +1 -1
- package/core/Header.js.map +1 -1
- package/core/Meganav/MeganavMobile.js +1 -1
- package/core/Meganav/MeganavMobile.js.map +1 -1
- package/core/Meganav/MeganavPanel.js +1 -1
- package/core/Meganav/MeganavPanel.js.map +1 -1
- package/core/Meganav/data.js +1 -1
- package/core/Meganav/data.js.map +1 -1
- package/core/Meganav.js +1 -1
- package/core/Meganav.js.map +1 -1
- package/core/ProductTile/data.js +1 -1
- package/core/ProductTile/data.js.map +1 -1
- package/core/utils/heights.js +1 -1
- package/core/utils/heights.js.map +1 -1
- package/index.d.ts +32 -18
- package/package.json +1 -1
- package/core/Header/Header.css +0 -8
package/core/.DS_Store
CHANGED
|
Binary file
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/Accordion/types.ts"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { IconName, IconSize } from \"../Icon/types\";\nimport { ColorThemeSet } from \"../styles/colors/types\";\n\n/**\n * Represents the data structure for an Accordion component.\n */\nexport type AccordionData = {\n /**\n * The name of the accordion item.\n */\n name: string;\n\n /**\n * The optional icon name to be displayed alongside the accordion item.\n */\n icon?: IconName;\n\n /**\n * The content to be displayed when the accordion item is expanded.\n */\n content: ReactNode;\n\n /**\n * Optional click handler function that is called when the accordion item is clicked.\n * @param index - The index of the clicked accordion item.\n */\n onClick?: (index: number) => void;\n};\n\nexport type AccordionIcons = {\n closed: {\n name: IconName;\n css?: string;\n };\n open: {\n name: IconName;\n css?: string;\n };\n};\n\nexport const accordionThemes = [\"default\", \"transparent\", \"static\"] as const;\n\nexport type AccordionTheme = (typeof accordionThemes)[number];\n\n/**\n * Represents the theme colors for an accordion component.\n */\nexport type AccordionThemeColors = {\n /**\n * Background color class for the accordion.\n */\n bg: ColorThemeSet;\n\n /**\n * Background color when the accordion item is hovered.\n */\n hoverBg: ColorThemeSet;\n\n /**\n * Text color class for the accordion.\n */\n text: ColorThemeSet;\n\n /**\n * Color class for the toggle icon of the accordion.\n */\n toggleIconColor: ColorThemeSet;\n\n /**\n * Optional background color class for selectable accordion items.\n */\n selectableBg?: ColorThemeSet;\n\n /**\n * Optional text color class for selectable accordion items.\n */\n selectableText?: ColorThemeSet;\n\n /**\n * Optional border color for the accordion.\n */\n border?: string;\n};\n\n/**\n * Options for configuring the Accordion component.\n */\nexport type AccordionOptions = {\n /**\n * If true, only one accordion item can be open at a time.\n * @default false\n */\n autoClose?: boolean;\n\n /**\n * If true, accordion items can be selected.\n * @default false\n */\n selectable?: boolean;\n\n /**\n * If true, the accordion header will stick to the top when scrolling.\n * @default false\n */\n sticky?: boolean;\n\n /**\n * An array of indexes indicating which accordion items should be open by default.\n * @default []\n */\n defaultOpenIndexes?: number[];\n\n /**\n * If true, all accordion items will be fully open.\n * @default false\n */\n fullyOpen?: boolean;\n\n /**\n * Custom CSS class to apply to the accordion header.\n * @default \"\"\n */\n headerCSS?: string;\n\n /**\n * If true, borders between accordion items will be hidden.\n * @default false\n */\n hideBorders?: boolean;\n\n /**\n * Size of the row icon.\n * @default \"32px\"\n */\n rowIconSize?: IconSize;\n\n /**\n * Size of the accordion icon.\n * @default \"16px\"\n */\n iconSize?: IconSize;\n\n /**\n * Custom CSS classes to apply to the selected accordion header.\n * @default \"\"\n */\n selectedHeaderCSS?: string;\n\n /**\n * Custom CSS classes to apply to the accordion content.\n * @default \"\"\n */\n contentCSS?: string;\n};\n"],"names":["accordionThemes"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/core/Accordion/types.ts"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { IconName, IconSize } from \"../Icon/types\";\nimport { ColorThemeSet } from \"../styles/colors/types\";\n\n/**\n * Represents the data structure for an Accordion component.\n */\nexport type AccordionData = {\n /**\n * The name of the accordion item.\n */\n name: string;\n\n /**\n * The optional icon name to be displayed alongside the accordion item.\n */\n icon?: IconName;\n\n /**\n * The content to be displayed when the accordion item is expanded.\n */\n content: ReactNode;\n\n /**\n * Optional click handler function that is called when the accordion item is clicked.\n * @param index - The index of the clicked accordion item.\n */\n onClick?: (index: number) => void;\n\n /**\n * Indicates whether the accordion item is interactive.\n * When false, the item cannot be expanded or collapsed by user interaction.\n * @default true\n */\n interactive?: boolean;\n};\n\nexport type AccordionIcons = {\n closed: {\n name: IconName;\n css?: string;\n };\n open: {\n name: IconName;\n css?: string;\n };\n};\n\nexport const accordionThemes = [\"default\", \"transparent\", \"static\"] as const;\n\nexport type AccordionTheme = (typeof accordionThemes)[number];\n\n/**\n * Represents the theme colors for an accordion component.\n */\nexport type AccordionThemeColors = {\n /**\n * Background color class for the accordion.\n */\n bg: ColorThemeSet;\n\n /**\n * Background color when the accordion item is hovered.\n */\n hoverBg: ColorThemeSet;\n\n /**\n * Text color class for the accordion.\n */\n text: ColorThemeSet;\n\n /**\n * Color class for the toggle icon of the accordion.\n */\n toggleIconColor: ColorThemeSet;\n\n /**\n * Optional background color class for selectable accordion items.\n */\n selectableBg?: ColorThemeSet;\n\n /**\n * Optional text color class for selectable accordion items.\n */\n selectableText?: ColorThemeSet;\n\n /**\n * Optional border color for the accordion.\n */\n border?: string;\n};\n\n/**\n * Options for configuring the Accordion component.\n */\nexport type AccordionOptions = {\n /**\n * If true, only one accordion item can be open at a time.\n * @default false\n */\n autoClose?: boolean;\n\n /**\n * If true, accordion items can be selected.\n * @default false\n */\n selectable?: boolean;\n\n /**\n * If true, the accordion header will stick to the top when scrolling.\n * @default false\n */\n sticky?: boolean;\n\n /**\n * An array of indexes indicating which accordion items should be open by default.\n * @default []\n */\n defaultOpenIndexes?: number[];\n\n /**\n * If true, all accordion items will be fully open.\n * @default false\n */\n fullyOpen?: boolean;\n\n /**\n * Custom CSS class to apply to the accordion header.\n * @default \"\"\n */\n headerCSS?: string;\n\n /**\n * If true, borders between accordion items will be hidden.\n * @default false\n */\n hideBorders?: boolean;\n\n /**\n * Size of the row icon.\n * @default \"32px\"\n */\n rowIconSize?: IconSize;\n\n /**\n * Size of the accordion icon.\n * @default \"16px\"\n */\n iconSize?: IconSize;\n\n /**\n * Custom CSS classes to apply to the selected accordion header.\n * @default \"\"\n */\n selectedHeaderCSS?: string;\n\n /**\n * Custom CSS classes to apply to the accordion content.\n * @default \"\"\n */\n contentCSS?: string;\n};\n"],"names":["accordionThemes"],"mappings":"AAgDA,OAAO,MAAMA,gBAAkB,CAAC,UAAW,cAAe,SAAS,AAAU"}
|
package/core/Accordion.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React,{useMemo,useState,forwardRef}from"react";import{AccordionContent,AccordionItem,AccordionTrigger,Accordion as RadixAccordion}from"@radix-ui/react-accordion";import Icon from"./Icon";import{themeClasses,isNonTransparentTheme,isStaticTheme}from"./Accordion/utils";import cn from"./utils/cn";const AccordionRow=({name,children,rowIcon,options,toggleIcons,theme,index,onClick,openRowValues})=>{const{selectable,sticky}=options||{};const rowKey=`accordion-item-${index}`;const isOpen=openRowValues.includes(rowKey);const{text,bg,hoverBg,selectableBg,selectableText,border,toggleIconColor}=themeClasses[theme];const textClass=selectable&&isOpen&&selectableText||text;return React.createElement(AccordionItem,{value:rowKey,className:cn({[`${border}`]:border&&!options?.hideBorders})},React.createElement(AccordionTrigger,{onClick:onClick,className:cn({"flex w-full group/accordion-trigger py-16 ui-text-p1 font-bold text-left items-center gap-12 transition-colors focus:outline-none":true,"px-16 mb-16 rounded-lg":isNonTransparentTheme(theme),"rounded-none":!isNonTransparentTheme(theme),"pointer-events-none focus-visible:outline-none":isStaticTheme(theme),"focus-base":!isStaticTheme(theme),"sticky top-0":sticky,[`${bg} ${hoverBg} ${text}`]:!(selectable&&isOpen),[`${selectableBg} ${selectableText}`]:selectable&&isOpen,[options?.headerCSS??""]:options?.headerCSS,[options?.selectedHeaderCSS??""]:options?.selectedHeaderCSS&&isOpen})},rowIcon?React.createElement(Icon,{name:rowIcon,color:textClass,size:options?.rowIconSize??"32px"}):null,React.createElement("span",null,name),!selectable&&!isStaticTheme(theme)?React.createElement("span",{className:"flex-1 justify-end flex items-center"},React.createElement(Icon,{name:isOpen?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:options?.iconSize??"16px"})):null),React.createElement(AccordionContent,{className:cn({"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down":true,[options?.contentCSS??""]:options?.contentCSS})},React.createElement("div",{className:"pb-16"},children)))};const Accordion=forwardRef(({data,theme="transparent",icons={closed:{name:"icon-gui-plus-outline"},open:{name:"icon-gui-minus-outline"}},options,...props},ref)=>{const openIndexes=useMemo(()=>{const indexValues=data.map((_,i)=>`accordion-item-${i}`);return options?.fullyOpen?indexValues:indexValues.filter((_,index)=>options?.defaultOpenIndexes?.includes(index))},[options?.defaultOpenIndexes,options?.fullyOpen,data.length]);const[openRowValues,setOpenRowValues]=useState(openIndexes);const innerAccordion=data.map((item,index)=>React.createElement(AccordionRow,{key:item.name,name:item.name,rowIcon:item.icon,toggleIcons:icons,theme:theme,options:options,index:index,onClick:()=>{item.onClick?.(index)},openRowValues:openRowValues},item.content));return React.createElement("div",{ref:ref,...props},options?.autoClose?React.createElement(RadixAccordion,{type:"single",collapsible:true,defaultValue:openIndexes[0],onValueChange:values=>setOpenRowValues(values)},innerAccordion):React.createElement(RadixAccordion,{type:"multiple",defaultValue:openIndexes,onValueChange:values=>setOpenRowValues(values)},innerAccordion))});Accordion.displayName="Accordion";export default Accordion;
|
|
1
|
+
import React,{useMemo,useState,forwardRef}from"react";import{AccordionContent,AccordionItem,AccordionTrigger,Accordion as RadixAccordion}from"@radix-ui/react-accordion";import Icon from"./Icon";import{themeClasses,isNonTransparentTheme,isStaticTheme}from"./Accordion/utils";import cn from"./utils/cn";const AccordionRow=({name,children,rowIcon,options,toggleIcons,theme,index,onClick,openRowValues,rowInteractive=true})=>{const{selectable,sticky}=options||{};const rowKey=`accordion-item-${index}`;const isOpen=openRowValues.includes(rowKey);const{text,bg,hoverBg,selectableBg,selectableText,border,toggleIconColor}=themeClasses[theme];const textClass=selectable&&isOpen&&selectableText||text;return React.createElement(AccordionItem,{value:rowKey,className:cn({[`${border}`]:border&&!options?.hideBorders})},React.createElement(AccordionTrigger,{onClick:onClick,className:cn({"flex w-full group/accordion-trigger py-16 ui-text-p1 font-bold text-left items-center gap-12 transition-colors focus:outline-none":true,"px-16 mb-16 rounded-lg":isNonTransparentTheme(theme),"px-0 rounded-none":!isNonTransparentTheme(theme),"pointer-events-none focus-visible:outline-none":isStaticTheme(theme),"focus-base":!isStaticTheme(theme),"sticky top-0":sticky,[`${bg} ${hoverBg} ${text}`]:!(selectable&&isOpen),[`${selectableBg} ${selectableText}`]:selectable&&isOpen,[options?.headerCSS??""]:options?.headerCSS,[options?.selectedHeaderCSS??""]:options?.selectedHeaderCSS&&isOpen})},rowIcon?React.createElement(Icon,{name:rowIcon,color:textClass,size:options?.rowIconSize??"32px"}):null,React.createElement("span",null,name),!selectable&&!isStaticTheme(theme)&&rowInteractive?React.createElement("span",{className:"flex-1 justify-end flex items-center"},React.createElement(Icon,{name:isOpen?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:options?.iconSize??"16px"})):null),rowInteractive&&React.createElement(AccordionContent,{className:cn({"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down":true,[options?.contentCSS??""]:options?.contentCSS})},React.createElement("div",{className:"pb-16"},children)))};const Accordion=forwardRef(({data,theme="transparent",icons={closed:{name:"icon-gui-plus-outline"},open:{name:"icon-gui-minus-outline"}},options,...props},ref)=>{const openIndexes=useMemo(()=>{const indexValues=data.map((_,i)=>`accordion-item-${i}`);return options?.fullyOpen?indexValues:indexValues.filter((_,index)=>options?.defaultOpenIndexes?.includes(index))},[options?.defaultOpenIndexes,options?.fullyOpen,data.length]);const[openRowValues,setOpenRowValues]=useState(openIndexes);const innerAccordion=data.map((item,index)=>React.createElement(AccordionRow,{key:item.name,name:item.name,rowIcon:item.icon,toggleIcons:icons,theme:theme,options:options,index:index,onClick:()=>{item.onClick?.(index)},openRowValues:openRowValues,rowInteractive:item.interactive},item.content));return React.createElement("div",{ref:ref,...props},options?.autoClose?React.createElement(RadixAccordion,{type:"single",collapsible:true,defaultValue:openIndexes[0],onValueChange:values=>setOpenRowValues(values)},innerAccordion):React.createElement(RadixAccordion,{type:"multiple",defaultValue:openIndexes,onValueChange:values=>setOpenRowValues(values)},innerAccordion))});Accordion.displayName="Accordion";export default Accordion;
|
|
2
2
|
//# sourceMappingURL=Accordion.js.map
|
package/core/Accordion.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/Accordion.tsx"],"sourcesContent":["import React, { ReactNode, useMemo, useState, forwardRef } from \"react\";\nimport {\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n Accordion as RadixAccordion,\n} from \"@radix-ui/react-accordion\";\n\nimport Icon from \"./Icon\";\nimport type { IconName } from \"./Icon/types\";\nimport type {\n AccordionData,\n AccordionIcons,\n AccordionOptions,\n AccordionTheme,\n} from \"./Accordion/types\";\nimport {\n themeClasses,\n isNonTransparentTheme,\n isStaticTheme,\n} from \"./Accordion/utils\";\nimport cn from \"./utils/cn\";\n\ntype AccordionRowProps = {\n children: ReactNode;\n name: string;\n rowIcon?: IconName;\n theme: AccordionTheme;\n toggleIcons: AccordionIcons;\n options?: AccordionOptions;\n index: number;\n onClick: () => void;\n openRowValues: string | string[];\n};\n\nexport type AccordionProps = {\n /**\n * The data for the accordion items.\n */\n data: AccordionData[];\n\n /**\n * Icons for the accordion toggle.\n */\n icons?: AccordionIcons;\n\n /**\n * Theme for the accordion.\n */\n theme?: AccordionTheme;\n\n /**\n * Options for the accordion behavior.\n */\n options?: AccordionOptions;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst AccordionRow = ({\n name,\n children,\n rowIcon,\n options,\n toggleIcons,\n theme,\n index,\n onClick,\n openRowValues,\n}: AccordionRowProps) => {\n const { selectable, sticky } = options || {};\n const rowKey = `accordion-item-${index}`;\n const isOpen = openRowValues.includes(rowKey);\n\n const {\n text,\n bg,\n hoverBg,\n selectableBg,\n selectableText,\n border,\n toggleIconColor,\n } = themeClasses[theme];\n\n const textClass = (selectable && isOpen && selectableText) || text;\n\n return (\n <AccordionItem\n value={rowKey}\n className={cn({\n [`${border}`]: border && !options?.hideBorders,\n })}\n >\n <AccordionTrigger\n onClick={onClick}\n className={cn({\n \"flex w-full group/accordion-trigger py-16 ui-text-p1 font-bold text-left items-center gap-12 transition-colors focus:outline-none\":\n true,\n \"px-16 mb-16 rounded-lg\": isNonTransparentTheme(theme),\n \"rounded-none\": !isNonTransparentTheme(theme),\n \"pointer-events-none focus-visible:outline-none\":\n isStaticTheme(theme),\n \"focus-base\": !isStaticTheme(theme),\n \"sticky top-0\": sticky,\n [`${bg} ${hoverBg} ${text}`]: !(selectable && isOpen),\n [`${selectableBg} ${selectableText}`]: selectable && isOpen,\n [options?.headerCSS ?? \"\"]: options?.headerCSS,\n [options?.selectedHeaderCSS ?? \"\"]:\n options?.selectedHeaderCSS && isOpen,\n })}\n >\n {rowIcon ? (\n <Icon\n name={rowIcon}\n color={textClass}\n size={options?.rowIconSize ?? \"32px\"}\n />\n ) : null}\n <span>{name}</span>\n {!selectable && !isStaticTheme(theme) ? (\n <span className=\"flex-1 justify-end flex items-center\">\n <Icon\n name={isOpen ? toggleIcons.open.name : toggleIcons.closed.name}\n color={toggleIconColor}\n size={options?.iconSize ?? \"16px\"}\n />\n </span>\n ) : null}\n </AccordionTrigger>\n <AccordionContent\n
|
|
1
|
+
{"version":3,"sources":["../../src/core/Accordion.tsx"],"sourcesContent":["import React, { ReactNode, useMemo, useState, forwardRef } from \"react\";\nimport {\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n Accordion as RadixAccordion,\n} from \"@radix-ui/react-accordion\";\n\nimport Icon from \"./Icon\";\nimport type { IconName } from \"./Icon/types\";\nimport type {\n AccordionData,\n AccordionIcons,\n AccordionOptions,\n AccordionTheme,\n} from \"./Accordion/types\";\nimport {\n themeClasses,\n isNonTransparentTheme,\n isStaticTheme,\n} from \"./Accordion/utils\";\nimport cn from \"./utils/cn\";\n\ntype AccordionRowProps = {\n children: ReactNode;\n name: string;\n rowIcon?: IconName;\n theme: AccordionTheme;\n toggleIcons: AccordionIcons;\n options?: AccordionOptions;\n index: number;\n onClick: () => void;\n openRowValues: string | string[];\n rowInteractive?: boolean;\n};\n\nexport type AccordionProps = {\n /**\n * The data for the accordion items.\n */\n data: AccordionData[];\n\n /**\n * Icons for the accordion toggle.\n */\n icons?: AccordionIcons;\n\n /**\n * Theme for the accordion.\n */\n theme?: AccordionTheme;\n\n /**\n * Options for the accordion behavior.\n */\n options?: AccordionOptions;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst AccordionRow = ({\n name,\n children,\n rowIcon,\n options,\n toggleIcons,\n theme,\n index,\n onClick,\n openRowValues,\n rowInteractive = true,\n}: AccordionRowProps) => {\n const { selectable, sticky } = options || {};\n const rowKey = `accordion-item-${index}`;\n const isOpen = openRowValues.includes(rowKey);\n\n const {\n text,\n bg,\n hoverBg,\n selectableBg,\n selectableText,\n border,\n toggleIconColor,\n } = themeClasses[theme];\n\n const textClass = (selectable && isOpen && selectableText) || text;\n\n return (\n <AccordionItem\n value={rowKey}\n className={cn({\n [`${border}`]: border && !options?.hideBorders,\n })}\n >\n <AccordionTrigger\n onClick={onClick}\n className={cn({\n \"flex w-full group/accordion-trigger py-16 ui-text-p1 font-bold text-left items-center gap-12 transition-colors focus:outline-none\":\n true,\n \"px-16 mb-16 rounded-lg\": isNonTransparentTheme(theme),\n \"px-0 rounded-none\": !isNonTransparentTheme(theme),\n \"pointer-events-none focus-visible:outline-none\":\n isStaticTheme(theme),\n \"focus-base\": !isStaticTheme(theme),\n \"sticky top-0\": sticky,\n [`${bg} ${hoverBg} ${text}`]: !(selectable && isOpen),\n [`${selectableBg} ${selectableText}`]: selectable && isOpen,\n [options?.headerCSS ?? \"\"]: options?.headerCSS,\n [options?.selectedHeaderCSS ?? \"\"]:\n options?.selectedHeaderCSS && isOpen,\n })}\n >\n {rowIcon ? (\n <Icon\n name={rowIcon}\n color={textClass}\n size={options?.rowIconSize ?? \"32px\"}\n />\n ) : null}\n <span>{name}</span>\n {!selectable && !isStaticTheme(theme) && rowInteractive ? (\n <span className=\"flex-1 justify-end flex items-center\">\n <Icon\n name={isOpen ? toggleIcons.open.name : toggleIcons.closed.name}\n color={toggleIconColor}\n size={options?.iconSize ?? \"16px\"}\n />\n </span>\n ) : null}\n </AccordionTrigger>\n {rowInteractive && (\n <AccordionContent\n className={cn({\n \"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\":\n true,\n [options?.contentCSS ?? \"\"]: options?.contentCSS,\n })}\n >\n <div className=\"pb-16\">{children}</div>\n </AccordionContent>\n )}\n </AccordionItem>\n );\n};\n\nconst Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n (\n {\n data,\n theme = \"transparent\",\n icons = {\n closed: { name: \"icon-gui-plus-outline\" },\n open: { name: \"icon-gui-minus-outline\" },\n },\n options,\n ...props\n },\n ref,\n ) => {\n const openIndexes = useMemo(() => {\n const indexValues = data.map((_, i) => `accordion-item-${i}`);\n return options?.fullyOpen\n ? indexValues\n : indexValues.filter((_, index) =>\n options?.defaultOpenIndexes?.includes(index),\n );\n }, [options?.defaultOpenIndexes, options?.fullyOpen, data.length]);\n\n const [openRowValues, setOpenRowValues] = useState<string | string[]>(\n openIndexes,\n );\n const innerAccordion = data.map((item, index) => (\n <AccordionRow\n key={item.name}\n name={item.name}\n rowIcon={item.icon}\n toggleIcons={icons}\n theme={theme}\n options={options}\n index={index}\n onClick={() => {\n item.onClick?.(index);\n }}\n openRowValues={openRowValues}\n rowInteractive={item.interactive}\n >\n {item.content}\n </AccordionRow>\n ));\n\n return (\n <div ref={ref} {...props}>\n {options?.autoClose ? (\n <RadixAccordion\n type=\"single\"\n collapsible\n defaultValue={openIndexes[0]}\n onValueChange={(values) => setOpenRowValues(values)}\n >\n {innerAccordion}\n </RadixAccordion>\n ) : (\n <RadixAccordion\n type=\"multiple\"\n defaultValue={openIndexes}\n onValueChange={(values) => setOpenRowValues(values)}\n >\n {innerAccordion}\n </RadixAccordion>\n )}\n </div>\n );\n },\n);\n\nAccordion.displayName = \"Accordion\";\n\nexport default Accordion;\n"],"names":["React","useMemo","useState","forwardRef","AccordionContent","AccordionItem","AccordionTrigger","Accordion","RadixAccordion","Icon","themeClasses","isNonTransparentTheme","isStaticTheme","cn","AccordionRow","name","children","rowIcon","options","toggleIcons","theme","index","onClick","openRowValues","rowInteractive","selectable","sticky","rowKey","isOpen","includes","text","bg","hoverBg","selectableBg","selectableText","border","toggleIconColor","textClass","value","className","hideBorders","headerCSS","selectedHeaderCSS","color","size","rowIconSize","span","open","closed","iconSize","contentCSS","div","data","icons","props","ref","openIndexes","indexValues","map","_","i","fullyOpen","filter","defaultOpenIndexes","length","setOpenRowValues","innerAccordion","item","key","icon","interactive","content","autoClose","type","collapsible","defaultValue","onValueChange","values","displayName"],"mappings":"AAAA,OAAOA,OAAoBC,OAAO,CAAEC,QAAQ,CAAEC,UAAU,KAAQ,OAAQ,AACxE,QACEC,gBAAgB,CAChBC,aAAa,CACbC,gBAAgB,CAChBC,aAAaC,cAAc,KACtB,2BAA4B,AAEnC,QAAOC,SAAU,QAAS,AAQ1B,QACEC,YAAY,CACZC,qBAAqB,CACrBC,aAAa,KACR,mBAAoB,AAC3B,QAAOC,OAAQ,YAAa,CAqC5B,MAAMC,aAAe,CAAC,CACpBC,IAAI,CACJC,QAAQ,CACRC,OAAO,CACPC,OAAO,CACPC,WAAW,CACXC,KAAK,CACLC,KAAK,CACLC,OAAO,CACPC,aAAa,CACbC,eAAiB,IAAI,CACH,IAClB,KAAM,CAAEC,UAAU,CAAEC,MAAM,CAAE,CAAGR,SAAW,CAAC,EAC3C,MAAMS,OAAS,CAAC,eAAe,EAAEN,MAAM,CAAC,CACxC,MAAMO,OAASL,cAAcM,QAAQ,CAACF,QAEtC,KAAM,CACJG,IAAI,CACJC,EAAE,CACFC,OAAO,CACPC,YAAY,CACZC,cAAc,CACdC,MAAM,CACNC,eAAe,CAChB,CAAG1B,YAAY,CAACU,MAAM,CAEvB,MAAMiB,UAAY,AAACZ,YAAcG,QAAUM,gBAAmBJ,KAE9D,OACE,oBAACzB,eACCiC,MAAOX,OACPY,UAAW1B,GAAG,CACZ,CAAC,CAAC,EAAEsB,OAAO,CAAC,CAAC,CAAEA,QAAU,CAACjB,SAASsB,WACrC,IAEA,oBAAClC,kBACCgB,QAASA,QACTiB,UAAW1B,GAAG,CACZ,oIACE,KACF,yBAA0BF,sBAAsBS,OAChD,oBAAqB,CAACT,sBAAsBS,OAC5C,iDACER,cAAcQ,OAChB,aAAc,CAACR,cAAcQ,OAC7B,eAAgBM,OAChB,CAAC,CAAC,EAAEK,GAAG,CAAC,EAAEC,QAAQ,CAAC,EAAEF,KAAK,CAAC,CAAC,CAAE,CAAEL,CAAAA,YAAcG,MAAK,EACnD,CAAC,CAAC,EAAEK,aAAa,CAAC,EAAEC,eAAe,CAAC,CAAC,CAAET,YAAcG,OACrD,CAACV,SAASuB,WAAa,GAAG,CAAEvB,SAASuB,UACrC,CAACvB,SAASwB,mBAAqB,GAAG,CAChCxB,SAASwB,mBAAqBd,MAClC,IAECX,QACC,oBAACR,MACCM,KAAME,QACN0B,MAAON,UACPO,KAAM1B,SAAS2B,aAAe,SAE9B,KACJ,oBAACC,YAAM/B,MACN,CAACU,YAAc,CAACb,cAAcQ,QAAUI,eACvC,oBAACsB,QAAKP,UAAU,wCACd,oBAAC9B,MACCM,KAAMa,OAAST,YAAY4B,IAAI,CAAChC,IAAI,CAAGI,YAAY6B,MAAM,CAACjC,IAAI,CAC9D4B,MAAOP,gBACPQ,KAAM1B,SAAS+B,UAAY,UAG7B,MAELzB,gBACC,oBAACpB,kBACCmC,UAAW1B,GAAG,CACZ,8HACE,KACF,CAACK,SAASgC,YAAc,GAAG,CAAEhC,SAASgC,UACxC,IAEA,oBAACC,OAAIZ,UAAU,SAASvB,WAKlC,EAEA,MAAMT,UAAYJ,WAChB,CACE,CACEiD,IAAI,CACJhC,MAAQ,aAAa,CACrBiC,MAAQ,CACNL,OAAQ,CAAEjC,KAAM,uBAAwB,EACxCgC,KAAM,CAAEhC,KAAM,wBAAyB,CACzC,CAAC,CACDG,OAAO,CACP,GAAGoC,MACJ,CACDC,OAEA,MAAMC,YAAcvD,QAAQ,KAC1B,MAAMwD,YAAcL,KAAKM,GAAG,CAAC,CAACC,EAAGC,IAAM,CAAC,eAAe,EAAEA,EAAE,CAAC,EAC5D,OAAO1C,SAAS2C,UACZJ,YACAA,YAAYK,MAAM,CAAC,CAACH,EAAGtC,QACrBH,SAAS6C,oBAAoBlC,SAASR,OAE9C,EAAG,CAACH,SAAS6C,mBAAoB7C,SAAS2C,UAAWT,KAAKY,MAAM,CAAC,EAEjE,KAAM,CAACzC,cAAe0C,iBAAiB,CAAG/D,SACxCsD,aAEF,MAAMU,eAAiBd,KAAKM,GAAG,CAAC,CAACS,KAAM9C,QACrC,oBAACP,cACCsD,IAAKD,KAAKpD,IAAI,CACdA,KAAMoD,KAAKpD,IAAI,CACfE,QAASkD,KAAKE,IAAI,CAClBlD,YAAakC,MACbjC,MAAOA,MACPF,QAASA,QACTG,MAAOA,MACPC,QAAS,KACP6C,KAAK7C,OAAO,GAAGD,MACjB,EACAE,cAAeA,cACfC,eAAgB2C,KAAKG,WAAW,EAE/BH,KAAKI,OAAO,GAIjB,OACE,oBAACpB,OAAII,IAAKA,IAAM,GAAGD,KAAK,EACrBpC,SAASsD,UACR,oBAAChE,gBACCiE,KAAK,SACLC,YAAAA,KACAC,aAAcnB,WAAW,CAAC,EAAE,CAC5BoB,cAAe,AAACC,QAAWZ,iBAAiBY,SAE3CX,gBAGH,oBAAC1D,gBACCiE,KAAK,WACLE,aAAcnB,YACdoB,cAAe,AAACC,QAAWZ,iBAAiBY,SAE3CX,gBAKX,EAGF3D,CAAAA,UAAUuE,WAAW,CAAG,WAExB,gBAAevE,SAAU"}
|
package/core/FeaturedLink.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React from"react";import Icon from"./Icon";import cn from"./utils/cn";const buildTargetAndRel=(url,newWindow)=>{const props={};if(newWindow){props.target="_blank";if(url.startsWith("/")&&!url.startsWith("//")){props.rel="noopener"}else{props.rel="noopenner noreferrer"}}return props};const FeaturedLink=({url,textSize="text-p2",iconColor,flush=false,reverse=false,additionalCSS="",newWindow=false,onClick=undefined,children,disabled=false,
|
|
1
|
+
import React from"react";import Icon from"./Icon";import cn from"./utils/cn";const buildTargetAndRel=(url,newWindow)=>{const props={};if(newWindow){props.target="_blank";if(url.startsWith("/")&&!url.startsWith("//")){props.rel="noopener"}else{props.rel="noopenner noreferrer"}}return props};const FeaturedLink=({url,textSize="text-p2",iconColor,flush=false,reverse=false,additionalCSS="",newWindow=false,onClick=undefined,children,disabled=false,iconClassName=""})=>{const targetAndRel=buildTargetAndRel(url,newWindow);return React.createElement("a",{...onClick?{}:{href:url},className:cn("font-sans font-bold block group/featured-link",{"text-gui-unavailable pointer-events-none":disabled},{"text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus":!disabled},{"py-8":!flush},`ui-${textSize}`,additionalCSS),style:{"--featured-link-icon-size":`var(${textSize.replace("text","--fs")})`},...targetAndRel,onClick:onClick},reverse?React.createElement(React.Fragment,null,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:cn("align-middle mr-8 relative -top-1 -right-4 transition-[right] transform rotate-180",{"group-hover/featured-link:right-0":!disabled},iconClassName)}),children):React.createElement(React.Fragment,null,children,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:cn("align-middle ml-8 relative -top-1 -left-4 transition-[left]",{"group-hover/featured-link:left-0":!disabled},iconClassName)})))};export default FeaturedLink;
|
|
2
2
|
//# sourceMappingURL=FeaturedLink.js.map
|
package/core/FeaturedLink.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/FeaturedLink.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode } from \"react\";\n\nimport Icon from \"./Icon\";\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport cn from \"./utils/cn\";\n\ntype FeaturedLinkProps = {\n url: string;\n children: ReactNode;\n textSize?: string;\n iconColor?: ColorClass | ColorThemeSet;\n flush?: boolean;\n reverse?: boolean;\n additionalCSS?: string;\n newWindow?: boolean;\n onClick?: () => void;\n disabled?: boolean;\n /**\n * Optional class name for
|
|
1
|
+
{"version":3,"sources":["../../src/core/FeaturedLink.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode } from \"react\";\n\nimport Icon from \"./Icon\";\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport cn from \"./utils/cn\";\n\ntype FeaturedLinkProps = {\n url: string;\n children: ReactNode;\n textSize?: string;\n iconColor?: ColorClass | ColorThemeSet;\n flush?: boolean;\n reverse?: boolean;\n additionalCSS?: string;\n newWindow?: boolean;\n onClick?: () => void;\n disabled?: boolean;\n /**\n * Optional class name for the icon.\n */\n iconClassName?: string;\n};\n\ntype TargetProps = { target?: string; rel?: string };\n\n// When generating links with target=_blank, we only add `noreferrer` to\n// links that don't start with `/`, so we can continue tracking referrers\n// across our own domains\nconst buildTargetAndRel = (url: string, newWindow: boolean) => {\n const props: TargetProps = {};\n\n if (newWindow) {\n props.target = \"_blank\";\n\n if (url.startsWith(\"/\") && !url.startsWith(\"//\")) {\n props.rel = \"noopener\";\n } else {\n props.rel = \"noopenner noreferrer\";\n }\n }\n\n return props;\n};\n\nconst FeaturedLink = ({\n url,\n textSize = \"text-p2\",\n iconColor,\n flush = false,\n reverse = false,\n additionalCSS = \"\",\n newWindow = false,\n onClick = undefined,\n children,\n disabled = false,\n iconClassName = \"\",\n}: FeaturedLinkProps) => {\n const targetAndRel = buildTargetAndRel(url, newWindow);\n\n return (\n <a\n {...(onClick ? {} : { href: url })}\n className={cn(\n \"font-sans font-bold block group/featured-link\",\n { \"text-gui-unavailable pointer-events-none\": disabled },\n {\n \"text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus\":\n !disabled,\n },\n { \"py-8\": !flush },\n `ui-${textSize}`,\n additionalCSS,\n )}\n style={\n {\n \"--featured-link-icon-size\": `var(${textSize.replace(\n \"text\",\n \"--fs\",\n )})`,\n } as CSSProperties\n }\n {...targetAndRel}\n onClick={onClick}\n >\n {reverse ? (\n <>\n <Icon\n name=\"icon-gui-arrow-long-right-outline\"\n size={`calc(var(--featured-link-icon-size) * 1.25)`}\n color={iconColor}\n additionalCSS={cn(\n \"align-middle mr-8 relative -top-1 -right-4 transition-[right] transform rotate-180\",\n { \"group-hover/featured-link:right-0\": !disabled },\n iconClassName,\n )}\n />\n {children}\n </>\n ) : (\n <>\n {children}\n <Icon\n name=\"icon-gui-arrow-long-right-outline\"\n size={`calc(var(--featured-link-icon-size) * 1.25)`}\n color={iconColor}\n additionalCSS={cn(\n \"align-middle ml-8 relative -top-1 -left-4 transition-[left]\",\n {\n \"group-hover/featured-link:left-0\": !disabled,\n },\n iconClassName,\n )}\n />\n </>\n )}\n </a>\n );\n};\n\nexport default FeaturedLink;\n"],"names":["React","Icon","cn","buildTargetAndRel","url","newWindow","props","target","startsWith","rel","FeaturedLink","textSize","iconColor","flush","reverse","additionalCSS","onClick","undefined","children","disabled","iconClassName","targetAndRel","a","href","className","style","replace","name","size","color"],"mappings":"AAAA,OAAOA,UAAyC,OAAQ,AAExD,QAAOC,SAAU,QAAS,AAE1B,QAAOC,OAAQ,YAAa,CAwB5B,MAAMC,kBAAoB,CAACC,IAAaC,aACtC,MAAMC,MAAqB,CAAC,EAE5B,GAAID,UAAW,CACbC,MAAMC,MAAM,CAAG,SAEf,GAAIH,IAAII,UAAU,CAAC,MAAQ,CAACJ,IAAII,UAAU,CAAC,MAAO,CAChDF,MAAMG,GAAG,CAAG,UACd,KAAO,CACLH,MAAMG,GAAG,CAAG,sBACd,CACF,CAEA,OAAOH,KACT,EAEA,MAAMI,aAAe,CAAC,CACpBN,GAAG,CACHO,SAAW,SAAS,CACpBC,SAAS,CACTC,MAAQ,KAAK,CACbC,QAAU,KAAK,CACfC,cAAgB,EAAE,CAClBV,UAAY,KAAK,CACjBW,QAAUC,SAAS,CACnBC,QAAQ,CACRC,SAAW,KAAK,CAChBC,cAAgB,EAAE,CACA,IAClB,MAAMC,aAAelB,kBAAkBC,IAAKC,WAE5C,OACE,oBAACiB,KACE,GAAIN,QAAU,CAAC,EAAI,CAAEO,KAAMnB,GAAI,CAAC,CACjCoB,UAAWtB,GACT,gDACA,CAAE,2CAA4CiB,QAAS,EACvD,CACE,gHACE,CAACA,QACL,EACA,CAAE,OAAQ,CAACN,KAAM,EACjB,CAAC,GAAG,EAAEF,SAAS,CAAC,CAChBI,eAEFU,MACE,CACE,4BAA6B,CAAC,IAAI,EAAEd,SAASe,OAAO,CAClD,OACA,QACA,CAAC,CAAC,AACN,EAED,GAAGL,YAAY,CAChBL,QAASA,SAERF,QACC,wCACE,oBAACb,MACC0B,KAAK,oCACLC,KAAM,CAAC,2CAA2C,CAAC,CACnDC,MAAOjB,UACPG,cAAeb,GACb,qFACA,CAAE,oCAAqC,CAACiB,QAAS,EACjDC,iBAGHF,UAGH,wCACGA,SACD,oBAACjB,MACC0B,KAAK,oCACLC,KAAM,CAAC,2CAA2C,CAAC,CACnDC,MAAOjB,UACPG,cAAeb,GACb,8DACA,CACE,mCAAoC,CAACiB,QACvC,EACAC,kBAOd,CAEA,gBAAeV,YAAa"}
|
package/core/Flyout.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React,{useState}from"react";import{NavigationMenu,NavigationMenuItem,NavigationMenuList,NavigationMenuTrigger,NavigationMenuContent,NavigationMenuViewport,NavigationMenuLink}from"@radix-ui/react-navigation-menu";import cn from"./utils/cn";import{componentMaxHeight,HEADER_HEIGHT}from"./utils/heights";const DEFAULT_MENU_LINK_STYLING="ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between";const DEFAULT_VIEWPORT_STYLING="relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] origin-[top_center] transition-[width,_height] duration-300 data-[state=closed]:animate-scale-out data-[state=open]:animate-scale-in sm:w-[var(--radix-navigation-menu-viewport-width)]";const PANEL_ANIMATION="data-[motion=from-end]:animate-enter-from-right data-[motion=from-start]:animate-enter-from-left data-[motion=to-end]:animate-exit-to-right data-[motion=to-start]:animate-exit-to-left";const FlyOverlay=({className,fadingOut})=>React.createElement("div",{className:cn("absolute left-0 right-0 h-screen w-full opacity-0",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut},className),style:{height:componentMaxHeight(HEADER_HEIGHT),top:HEADER_HEIGHT}});const Flyout=({menuItems,className,flyOutClassName,menuLinkClassName,viewPortClassName
|
|
1
|
+
import React,{useState}from"react";import{NavigationMenu,NavigationMenuItem,NavigationMenuList,NavigationMenuTrigger,NavigationMenuContent,NavigationMenuViewport,NavigationMenuLink}from"@radix-ui/react-navigation-menu";import cn from"./utils/cn";import{componentMaxHeight,HEADER_HEIGHT}from"./utils/heights";const DEFAULT_MENU_LINK_STYLING="ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between";const DEFAULT_VIEWPORT_STYLING="relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] origin-[top_center] transition-[width,_height] duration-300 data-[state=closed]:animate-scale-out data-[state=open]:animate-scale-in sm:w-[var(--radix-navigation-menu-viewport-width)]";const PANEL_ANIMATION="data-[motion=from-end]:animate-enter-from-right data-[motion=from-start]:animate-enter-from-left data-[motion=to-end]:animate-exit-to-right data-[motion=to-start]:animate-exit-to-left";const FlyOverlay=({className,fadingOut})=>React.createElement("div",{className:cn("absolute left-0 right-0 h-screen w-full opacity-0",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut},className),style:{height:componentMaxHeight(HEADER_HEIGHT),top:HEADER_HEIGHT}});const Flyout=({menuItems,className,flyOutClassName,menuLinkClassName,viewPortClassName})=>{const[isOpen,setIsOpen]=useState(false);const[fadingOut,setFadingOut]=useState(false);const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setIsOpen(false);setFadingOut(false)},150)};return React.createElement(React.Fragment,null,React.createElement(NavigationMenu,{className:cn(className,"flex w-full"),onValueChange:val=>val?setIsOpen(true):closeMenu(),delayDuration:0},React.createElement(NavigationMenuList,{className:"flex list-none center"},menuItems.map(({name,content,link,panelClassName})=>content?React.createElement(NavigationMenuItem,{key:name},React.createElement(NavigationMenuTrigger,{className:cn("group outline-none focus:outline-none select-none cursor-pointer relative","rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-1200","[&[data-state=open]]:bg-neutral-100 dark:[&[data-state=open]]:bg-neutral-1200","[&[data-state=open]]:text-neutral-1300 dark:[&[data-state=open]]:text-neutral-000",DEFAULT_MENU_LINK_STYLING,menuLinkClassName)},name),React.createElement(NavigationMenuContent,{className:cn("absolute right-0 top-0 p-24 z-10",PANEL_ANIMATION,panelClassName)},content)):React.createElement(NavigationMenuLink,{key:name,href:link,className:cn(DEFAULT_MENU_LINK_STYLING,menuLinkClassName)},name))),React.createElement("div",{className:cn("absolute top-full",flyOutClassName)},React.createElement(NavigationMenuViewport,{className:cn(DEFAULT_VIEWPORT_STYLING,viewPortClassName)}))),isOpen?React.createElement(FlyOverlay,{className:"bg-neutral-1300 opacity-10 z-20 h-screen mix-blend-multiply",fadingOut:fadingOut}):null)};export default Flyout;
|
|
2
2
|
//# sourceMappingURL=Flyout.js.map
|
package/core/Flyout.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/Flyout.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n NavigationMenu,\n NavigationMenuItem,\n NavigationMenuList,\n NavigationMenuTrigger,\n NavigationMenuContent,\n NavigationMenuViewport,\n NavigationMenuLink,\n} from \"@radix-ui/react-navigation-menu\";\nimport cn from \"./utils/cn\";\nimport { componentMaxHeight, HEADER_HEIGHT } from \"./utils/heights\";\n\n/**\n * Props for the Flyout component.\n */\ntype FlyoutProps = {\n /**\n * Array of menu items to be displayed in the flyout.\n */\n menuItems: {\n /**\n * Name for the menu item.\n */\n name: string;\n /**\n * Optional content to be displayed in the flyout panel.\n */\n content?: React.ReactNode;\n /**\n * Optional link for the menu item.\n */\n link?: string;\n /**\n * Optional styling for the flyout panel.\n */\n panelClassName?: string;\n }[];\n /**\n * Optional class name for the flyout container.\n */\n className?: string;\n /**\n * Optional class name for the flyout element.\n */\n flyOutClassName?: string;\n /**\n * Optional class name for the menu link.\n */\n menuLinkClassName?: string;\n /**\n * Optional class name for the viewport.\n */\n viewPortClassName?: string;\n
|
|
1
|
+
{"version":3,"sources":["../../src/core/Flyout.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n NavigationMenu,\n NavigationMenuItem,\n NavigationMenuList,\n NavigationMenuTrigger,\n NavigationMenuContent,\n NavigationMenuViewport,\n NavigationMenuLink,\n} from \"@radix-ui/react-navigation-menu\";\nimport cn from \"./utils/cn\";\nimport { componentMaxHeight, HEADER_HEIGHT } from \"./utils/heights\";\n\n/**\n * Props for the Flyout component.\n */\ntype FlyoutProps = {\n /**\n * Array of menu items to be displayed in the flyout.\n */\n menuItems: {\n /**\n * Name for the menu item.\n */\n name: string;\n /**\n * Optional content to be displayed in the flyout panel.\n */\n content?: React.ReactNode;\n /**\n * Optional link for the menu item.\n */\n link?: string;\n /**\n * Optional styling for the flyout panel.\n */\n panelClassName?: string;\n }[];\n /**\n * Optional class name for the flyout container.\n */\n className?: string;\n /**\n * Optional class name for the flyout element.\n */\n flyOutClassName?: string;\n /**\n * Optional class name for the menu link.\n */\n menuLinkClassName?: string;\n /**\n * Optional class name for the viewport.\n */\n viewPortClassName?: string;\n};\n\nconst DEFAULT_MENU_LINK_STYLING =\n \"ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between\";\nconst DEFAULT_VIEWPORT_STYLING =\n \"relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] origin-[top_center] transition-[width,_height] duration-300 data-[state=closed]:animate-scale-out data-[state=open]:animate-scale-in sm:w-[var(--radix-navigation-menu-viewport-width)]\";\nconst PANEL_ANIMATION =\n \"data-[motion=from-end]:animate-enter-from-right data-[motion=from-start]:animate-enter-from-left data-[motion=to-end]:animate-exit-to-right data-[motion=to-start]:animate-exit-to-left\";\n\nconst FlyOverlay = ({\n className,\n fadingOut,\n}: {\n className: string;\n fadingOut: boolean;\n}) => (\n <div\n className={cn(\n \"absolute left-0 right-0 h-screen w-full opacity-0\",\n {\n \"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]\": !fadingOut,\n \"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]\": fadingOut,\n },\n className,\n )}\n style={{ height: componentMaxHeight(HEADER_HEIGHT), top: HEADER_HEIGHT }}\n ></div>\n);\n\nconst Flyout = ({\n menuItems,\n className,\n flyOutClassName,\n menuLinkClassName,\n viewPortClassName,\n}: FlyoutProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const [fadingOut, setFadingOut] = useState(false);\n\n const closeMenu = () => {\n setFadingOut(true);\n\n setTimeout(() => {\n setIsOpen(false);\n setFadingOut(false);\n }, 150);\n };\n\n return (\n <>\n <NavigationMenu\n className={cn(className, \"flex w-full\")}\n onValueChange={(val) => (val ? setIsOpen(true) : closeMenu())}\n delayDuration={0}\n >\n <NavigationMenuList className=\"flex list-none center\">\n {menuItems.map(({ name, content, link, panelClassName }) =>\n content ? (\n <NavigationMenuItem key={name}>\n <NavigationMenuTrigger\n className={cn(\n \"group outline-none focus:outline-none select-none cursor-pointer relative\",\n \"rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-1200\",\n \"[&[data-state=open]]:bg-neutral-100 dark:[&[data-state=open]]:bg-neutral-1200\",\n \"[&[data-state=open]]:text-neutral-1300 dark:[&[data-state=open]]:text-neutral-000\",\n DEFAULT_MENU_LINK_STYLING,\n menuLinkClassName,\n )}\n >\n {name}\n </NavigationMenuTrigger>\n <NavigationMenuContent\n className={cn(\n \"absolute right-0 top-0 p-24 z-10\",\n PANEL_ANIMATION,\n panelClassName,\n )}\n >\n {content}\n </NavigationMenuContent>\n </NavigationMenuItem>\n ) : (\n <NavigationMenuLink\n key={name}\n href={link}\n className={cn(DEFAULT_MENU_LINK_STYLING, menuLinkClassName)}\n >\n {name}\n </NavigationMenuLink>\n ),\n )}\n </NavigationMenuList>\n\n <div className={cn(\"absolute top-full\", flyOutClassName)}>\n <NavigationMenuViewport\n className={cn(DEFAULT_VIEWPORT_STYLING, viewPortClassName)}\n />\n </div>\n </NavigationMenu>\n {isOpen ? (\n <FlyOverlay\n className=\"bg-neutral-1300 opacity-10 z-20 h-screen mix-blend-multiply\"\n fadingOut={fadingOut}\n />\n ) : null}\n </>\n );\n};\n\nexport default Flyout;\n"],"names":["React","useState","NavigationMenu","NavigationMenuItem","NavigationMenuList","NavigationMenuTrigger","NavigationMenuContent","NavigationMenuViewport","NavigationMenuLink","cn","componentMaxHeight","HEADER_HEIGHT","DEFAULT_MENU_LINK_STYLING","DEFAULT_VIEWPORT_STYLING","PANEL_ANIMATION","FlyOverlay","className","fadingOut","div","style","height","top","Flyout","menuItems","flyOutClassName","menuLinkClassName","viewPortClassName","isOpen","setIsOpen","setFadingOut","closeMenu","setTimeout","onValueChange","val","delayDuration","map","name","content","link","panelClassName","key","href"],"mappings":"AAAA,OAAOA,OAASC,QAAQ,KAAQ,OAAQ,AACxC,QACEC,cAAc,CACdC,kBAAkB,CAClBC,kBAAkB,CAClBC,qBAAqB,CACrBC,qBAAqB,CACrBC,sBAAsB,CACtBC,kBAAkB,KACb,iCAAkC,AACzC,QAAOC,OAAQ,YAAa,AAC5B,QAASC,kBAAkB,CAAEC,aAAa,KAAQ,iBAAkB,CA6CpE,MAAMC,0BACJ,8JACF,MAAMC,yBACJ,2QACF,MAAMC,gBACJ,0LAEF,MAAMC,WAAa,CAAC,CAClBC,SAAS,CACTC,SAAS,CAIV,GACC,oBAACC,OACCF,UAAWP,GACT,oDACA,CACE,2DAA4D,CAACQ,UAC7D,4DAA6DA,SAC/D,EACAD,WAEFG,MAAO,CAAEC,OAAQV,mBAAmBC,eAAgBU,IAAKV,aAAc,IAI3E,MAAMW,OAAS,CAAC,CACdC,SAAS,CACTP,SAAS,CACTQ,eAAe,CACfC,iBAAiB,CACjBC,iBAAiB,CACL,IACZ,KAAM,CAACC,OAAQC,UAAU,CAAG3B,SAAS,OACrC,KAAM,CAACgB,UAAWY,aAAa,CAAG5B,SAAS,OAE3C,MAAM6B,UAAY,KAChBD,aAAa,MAEbE,WAAW,KACTH,UAAU,OACVC,aAAa,MACf,EAAG,IACL,EAEA,OACE,wCACE,oBAAC3B,gBACCc,UAAWP,GAAGO,UAAW,eACzBgB,cAAe,AAACC,KAASA,IAAML,UAAU,MAAQE,YACjDI,cAAe,GAEf,oBAAC9B,oBAAmBY,UAAU,yBAC3BO,UAAUY,GAAG,CAAC,CAAC,CAAEC,IAAI,CAAEC,OAAO,CAAEC,IAAI,CAAEC,cAAc,CAAE,GACrDF,QACE,oBAAClC,oBAAmBqC,IAAKJ,MACvB,oBAAC/B,uBACCW,UAAWP,GACT,4EACA,6DACA,gFACA,oFACAG,0BACAa,oBAGDW,MAEH,oBAAC9B,uBACCU,UAAWP,GACT,mCACAK,gBACAyB,iBAGDF,UAIL,oBAAC7B,oBACCgC,IAAKJ,KACLK,KAAMH,KACNtB,UAAWP,GAAGG,0BAA2Ba,oBAExCW,QAMT,oBAAClB,OAAIF,UAAWP,GAAG,oBAAqBe,kBACtC,oBAACjB,wBACCS,UAAWP,GAAGI,yBAA0Ba,uBAI7CC,OACC,oBAACZ,YACCC,UAAU,8DACVC,UAAWA,YAEX,KAGV,CAEA,gBAAeK,MAAO"}
|
package/core/Footer/data.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
export const footerLinks=[{title:"Products",links:[{label:"Ably Pub/Sub",link:"/pubsub"},{label:"Ably LiveSync",link:"/livesync"},{label:"Ably Chat",link:"/chat"},{label:"Ably Spaces",link:"/spaces"},{label:"Ably Asset Tracking",link:"/docs/asset-tracking"},{label:"Compare our tech",link:"/compare"}]},{title:"Platform",links:[{label:"Infrastructure",link:"/four-pillars-of-dependability"},{label:"Integrations",link:"/integrations"},{label:"SDKs",link:"/docs/sdks"},{label:"Changelog",link:"https://changelog.ably.com/"},{label:"Security & Compliance",link:"/security-and-compliance"}]},{title:"Get started",links:[{label:"Documentation",link:"/docs"},{label:"Examples",link:"/examples"},{label:"Pricing",link:"/pricing"},{label:"Realtime A-Z",link:"/topics"},{label:"Support",link:"/support"}]},{title:"Company",links:[{label:"About Ably",link:"/about"},{label:"Blog",link:"/blog"},{label:"Careers",link:"/careers",badge:"WE’RE HIRING"},{label:"Contact us",link:"/contact"}]}];export const bottomFooterLinks=[{label:"Data protection",link:"/data-protection"},{label:"Privacy",link:"/privacy"},{label:"Legals",link:"/legals"},{label:"Cookies",link:"/privacy"}];export const socialLinks=[{key:"x",colorIcon:"icon-social-x",monoIcon:"icon-social-x-mono",link:"https://x.com/ablyrealtime"},{key:"linkedin",colorIcon:"icon-social-linkedin",monoIcon:"icon-social-linkedin-mono",link:"https://www.linkedin.com/company/ably-realtime"},{key:"github",colorIcon:"icon-social-github",monoIcon:"icon-social-github-mono",link:"https://github.com/ably/"},{key:"discord",colorIcon:"icon-social-discord",monoIcon:"icon-social-discord-mono",link:"https://discord.gg/g8yqePUVDn"},{key:"youtube",colorIcon:"icon-social-youtube",monoIcon:"icon-social-youtube-mono",link:"https://www.youtube.com/c/AblyRealtime"}];
|
|
2
2
|
//# sourceMappingURL=data.js.map
|
package/core/Footer/data.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/Footer/data.ts"],"sourcesContent":["import { IconName } from \"../Icon/types\";\
|
|
1
|
+
{"version":3,"sources":["../../../src/core/Footer/data.ts"],"sourcesContent":["import { IconName } from \"../Icon/types\";\n\ntype FooterLinksProps = {\n title: string;\n links: {\n label: string;\n link: string;\n badge?: string;\n }[];\n};\n\nexport const footerLinks: FooterLinksProps[] = [\n {\n title: \"Products\",\n links: [\n { label: \"Ably Pub/Sub\", link: \"/pubsub\" },\n { label: \"Ably LiveSync\", link: \"/livesync\" },\n { label: \"Ably Chat\", link: \"/chat\" },\n { label: \"Ably Spaces\", link: \"/spaces\" },\n { label: \"Ably Asset Tracking\", link: \"/docs/asset-tracking\" },\n { label: \"Compare our tech\", link: \"/compare\" },\n ],\n },\n {\n title: \"Platform\",\n links: [\n { label: \"Infrastructure\", link: \"/four-pillars-of-dependability\" },\n { label: \"Integrations\", link: \"/integrations\" },\n { label: \"SDKs\", link: \"/docs/sdks\" },\n { label: \"Changelog\", link: \"https://changelog.ably.com/\" },\n { label: \"Security & Compliance\", link: \"/security-and-compliance\" },\n ],\n },\n {\n title: \"Get started\",\n links: [\n { label: \"Documentation\", link: \"/docs\" },\n { label: \"Examples\", link: \"/examples\" },\n { label: \"Pricing\", link: \"/pricing\" },\n { label: \"Realtime A-Z\", link: \"/topics\" },\n { label: \"Support\", link: \"/support\" },\n ],\n },\n {\n title: \"Company\",\n links: [\n { label: \"About Ably\", link: \"/about\" },\n { label: \"Blog\", link: \"/blog\" },\n { label: \"Careers\", link: \"/careers\", badge: \"WE’RE HIRING\" },\n { label: \"Contact us\", link: \"/contact\" },\n ],\n },\n];\n\nexport const bottomFooterLinks = [\n { label: \"Data protection\", link: \"/data-protection\" },\n { label: \"Privacy\", link: \"/privacy\" },\n { label: \"Legals\", link: \"/legals\" },\n { label: \"Cookies\", link: \"/privacy\" },\n];\n\nexport const socialLinks: {\n key: string;\n colorIcon: IconName;\n monoIcon: IconName;\n link: string;\n}[] = [\n {\n key: \"x\",\n colorIcon: \"icon-social-x\",\n monoIcon: \"icon-social-x-mono\",\n link: \"https://x.com/ablyrealtime\",\n },\n {\n key: \"linkedin\",\n colorIcon: \"icon-social-linkedin\",\n monoIcon: \"icon-social-linkedin-mono\",\n link: \"https://www.linkedin.com/company/ably-realtime\",\n },\n {\n key: \"github\",\n colorIcon: \"icon-social-github\",\n monoIcon: \"icon-social-github-mono\",\n link: \"https://github.com/ably/\",\n },\n {\n key: \"discord\",\n colorIcon: \"icon-social-discord\",\n monoIcon: \"icon-social-discord-mono\",\n link: \"https://discord.gg/g8yqePUVDn\",\n },\n {\n key: \"youtube\",\n colorIcon: \"icon-social-youtube\",\n monoIcon: \"icon-social-youtube-mono\",\n link: \"https://www.youtube.com/c/AblyRealtime\",\n },\n];\n"],"names":["footerLinks","title","links","label","link","badge","bottomFooterLinks","socialLinks","key","colorIcon","monoIcon"],"mappings":"AAWA,OAAO,MAAMA,YAAkC,CAC7C,CACEC,MAAO,WACPC,MAAO,CACL,CAAEC,MAAO,eAAgBC,KAAM,SAAU,EACzC,CAAED,MAAO,gBAAiBC,KAAM,WAAY,EAC5C,CAAED,MAAO,YAAaC,KAAM,OAAQ,EACpC,CAAED,MAAO,cAAeC,KAAM,SAAU,EACxC,CAAED,MAAO,sBAAuBC,KAAM,sBAAuB,EAC7D,CAAED,MAAO,mBAAoBC,KAAM,UAAW,EAC/C,AACH,EACA,CACEH,MAAO,WACPC,MAAO,CACL,CAAEC,MAAO,iBAAkBC,KAAM,gCAAiC,EAClE,CAAED,MAAO,eAAgBC,KAAM,eAAgB,EAC/C,CAAED,MAAO,OAAQC,KAAM,YAAa,EACpC,CAAED,MAAO,YAAaC,KAAM,6BAA8B,EAC1D,CAAED,MAAO,wBAAyBC,KAAM,0BAA2B,EACpE,AACH,EACA,CACEH,MAAO,cACPC,MAAO,CACL,CAAEC,MAAO,gBAAiBC,KAAM,OAAQ,EACxC,CAAED,MAAO,WAAYC,KAAM,WAAY,EACvC,CAAED,MAAO,UAAWC,KAAM,UAAW,EACrC,CAAED,MAAO,eAAgBC,KAAM,SAAU,EACzC,CAAED,MAAO,UAAWC,KAAM,UAAW,EACtC,AACH,EACA,CACEH,MAAO,UACPC,MAAO,CACL,CAAEC,MAAO,aAAcC,KAAM,QAAS,EACtC,CAAED,MAAO,OAAQC,KAAM,OAAQ,EAC/B,CAAED,MAAO,UAAWC,KAAM,WAAYC,MAAO,cAAe,EAC5D,CAAEF,MAAO,aAAcC,KAAM,UAAW,EACzC,AACH,EACD,AAAC,AAEF,QAAO,MAAME,kBAAoB,CAC/B,CAAEH,MAAO,kBAAmBC,KAAM,kBAAmB,EACrD,CAAED,MAAO,UAAWC,KAAM,UAAW,EACrC,CAAED,MAAO,SAAUC,KAAM,SAAU,EACnC,CAAED,MAAO,UAAWC,KAAM,UAAW,EACtC,AAAC,AAEF,QAAO,MAAMG,YAKP,CACJ,CACEC,IAAK,IACLC,UAAW,gBACXC,SAAU,qBACVN,KAAM,4BACR,EACA,CACEI,IAAK,WACLC,UAAW,uBACXC,SAAU,4BACVN,KAAM,gDACR,EACA,CACEI,IAAK,SACLC,UAAW,qBACXC,SAAU,0BACVN,KAAM,0BACR,EACA,CACEI,IAAK,UACLC,UAAW,sBACXC,SAAU,2BACVN,KAAM,+BACR,EACA,CACEI,IAAK,UACLC,UAAW,sBACXC,SAAU,2BACVN,KAAM,wCACR,EACD,AAAC"}
|
package/core/Footer.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React from"react";import cn from"./utils/cn";import Icon from"./Icon";import Status,{StatusUrl}from"./Status";import Logo from"./Logo";import Badge from"./Badge";import{
|
|
1
|
+
import React from"react";import cn from"./utils/cn";import Icon from"./Icon";import Status,{StatusUrl}from"./Status";import Logo from"./Logo";import Badge from"./Badge";import{bottomFooterLinks,footerLinks,socialLinks}from"./Footer/data";import{ablyAwards}from"./Meganav/data";const Footer=()=>{const textColorClassnames="ui-text-menu3 font-medium transition-colors text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000 active:text-neutral-800 active:dark:text-neutral-400 focus:outline focus:outline-gui-focus";return React.createElement("footer",{className:"w-full bg-neutral-100 dark:bg-neutral-1200 border-t border-neutral-300 dark:border-neutral-1000","data-id":"footer"},React.createElement("div",{className:"max-w-screen-xl mx-auto ui-grid-px pt-40 sm:pt-48 md:pt-64 pb-40"},React.createElement("div",{className:"flex flex-col sm:flex-row gap-x-24 gap-y-48 mb-64 justify-between"},React.createElement("div",{className:"flex-1 flex flex-col gap-24"},["light","dark"].map(theme=>React.createElement(Logo,{key:theme,href:"/",theme:theme,additionalLinkAttrs:{className:cn("focus-base rounded w-[102px]",{"flex dark:hidden":theme==="light","hidden dark:flex":theme==="dark"})}})),React.createElement(Status,{statusUrl:StatusUrl,showDescription:true}),React.createElement("div",{className:"flex gap-x-24"},socialLinks.map(link=>React.createElement("a",{key:link.key,href:link.link,target:"_blank",rel:"noreferrer noopener","aria-label":`Visit Ably on ${link.key}`,className:"w-20 h-20 group/social-icon"},React.createElement(Icon,{name:link.monoIcon,size:"20px",additionalCSS:"text-neutral-1000 dark:text-neutral-300 group-hover/social-icon:hidden"}),React.createElement(Icon,{name:link.colorIcon,size:"20px",additionalCSS:"hidden group-hover/social-icon:flex"})))),React.createElement("div",{className:"flex gap-8 mt-16"},ablyAwards.map(award=>React.createElement("img",{key:award.desc,src:award.image,alt:award.desc,width:"57",height:"64"})))),React.createElement("div",{className:"flex-1 md:flex-[2] flex flex-row flex-wrap gap-x-24 gap-y-48"},footerLinks.map(({title,links})=>React.createElement("div",{key:title,className:"flex-1 basis-1/3 md:basis-1"},React.createElement("h3",{className:"ui-text-overline2 text-neutral-700 dark:text-neutral-600 mb-16"},title),React.createElement("ul",{className:"flex flex-col gap-y-12"},links.map(({label,link,badge})=>React.createElement("li",{key:label,className:"flex gap-x-8"},React.createElement("a",{href:link,className:textColorClassnames,"aria-label":`Visit ${label}`},label),badge&&React.createElement(Badge,{size:"xs",className:"ui-text-p4 font-[10px]"},badge)))))))),React.createElement("div",{className:"pt-24 border-t border-neutral-300 dark:border-neutral-1000"},React.createElement("div",{className:"flex gap-24"},bottomFooterLinks.map(link=>React.createElement("a",{key:link.label,href:link.link,className:textColorClassnames,"aria-label":`Visit ${link.label}`},link.label))))))};export default Footer;
|
|
2
2
|
//# sourceMappingURL=Footer.js.map
|
package/core/Footer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/Footer.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\nimport Status, { StatusUrl } from \"./Status\";\nimport { Theme } from \"./styles/colors/types\";\nimport Logo from \"./Logo\";\nimport Badge from \"./Badge\";\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/core/Footer.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\nimport Status, { StatusUrl } from \"./Status\";\nimport { Theme } from \"./styles/colors/types\";\nimport Logo from \"./Logo\";\nimport Badge from \"./Badge\";\nimport { bottomFooterLinks, footerLinks, socialLinks } from \"./Footer/data\";\nimport { ablyAwards } from \"./Meganav/data\";\n\nconst Footer = () => {\n const textColorClassnames =\n \"ui-text-menu3 font-medium transition-colors text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000 active:text-neutral-800 active:dark:text-neutral-400 focus:outline focus:outline-gui-focus\";\n\n return (\n <footer\n className=\"w-full bg-neutral-100 dark:bg-neutral-1200 border-t border-neutral-300 dark:border-neutral-1000\"\n data-id=\"footer\"\n >\n <div className=\"max-w-screen-xl mx-auto ui-grid-px pt-40 sm:pt-48 md:pt-64 pb-40\">\n <div className=\"flex flex-col sm:flex-row gap-x-24 gap-y-48 mb-64 justify-between\">\n <div className=\"flex-1 flex flex-col gap-24\">\n {([\"light\", \"dark\"] as Theme[]).map((theme) => (\n <Logo\n key={theme}\n href=\"/\"\n theme={theme}\n additionalLinkAttrs={{\n className: cn(\"focus-base rounded w-[102px]\", {\n \"flex dark:hidden\": theme === \"light\",\n \"hidden dark:flex\": theme === \"dark\",\n }),\n }}\n />\n ))}\n\n <Status statusUrl={StatusUrl} showDescription />\n\n <div className=\"flex gap-x-24\">\n {socialLinks.map((link) => (\n <a\n key={link.key}\n href={link.link}\n target=\"_blank\"\n rel=\"noreferrer noopener\"\n aria-label={`Visit Ably on ${link.key}`}\n className=\"w-20 h-20 group/social-icon\"\n >\n <Icon\n name={link.monoIcon}\n size=\"20px\"\n additionalCSS=\"text-neutral-1000 dark:text-neutral-300 group-hover/social-icon:hidden\"\n />\n <Icon\n name={link.colorIcon}\n size=\"20px\"\n additionalCSS=\"hidden group-hover/social-icon:flex\"\n />\n </a>\n ))}\n </div>\n <div className=\"flex gap-8 mt-16\">\n {ablyAwards.map((award) => (\n <img\n key={award.desc}\n src={award.image}\n alt={award.desc}\n width=\"57\"\n height=\"64\"\n />\n ))}\n </div>\n </div>\n <div className=\"flex-1 md:flex-[2] flex flex-row flex-wrap gap-x-24 gap-y-48\">\n {footerLinks.map(({ title, links }) => (\n <div key={title} className=\"flex-1 basis-1/3 md:basis-1\">\n <h3 className=\"ui-text-overline2 text-neutral-700 dark:text-neutral-600 mb-16\">\n {title}\n </h3>\n <ul className=\"flex flex-col gap-y-12\">\n {links.map(({ label, link, badge }) => (\n <li key={label} className=\"flex gap-x-8\">\n <a\n href={link}\n className={textColorClassnames}\n aria-label={`Visit ${label}`}\n >\n {label}\n </a>\n {badge && (\n <Badge size=\"xs\" className=\"ui-text-p4 font-[10px]\">\n {badge}\n </Badge>\n )}\n </li>\n ))}\n </ul>\n </div>\n ))}\n </div>\n </div>\n\n <div className=\"pt-24 border-t border-neutral-300 dark:border-neutral-1000\">\n <div className=\"flex gap-24\">\n {bottomFooterLinks.map((link) => (\n <a\n key={link.label}\n href={link.link}\n className={textColorClassnames}\n aria-label={`Visit ${link.label}`}\n >\n {link.label}\n </a>\n ))}\n </div>\n </div>\n </div>\n </footer>\n );\n};\n\nexport default Footer;\n"],"names":["React","cn","Icon","Status","StatusUrl","Logo","Badge","bottomFooterLinks","footerLinks","socialLinks","ablyAwards","Footer","textColorClassnames","footer","className","data-id","div","map","theme","key","href","additionalLinkAttrs","statusUrl","showDescription","link","a","target","rel","aria-label","name","monoIcon","size","additionalCSS","colorIcon","award","img","desc","src","image","alt","width","height","title","links","h3","ul","label","badge","li"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,AAC1B,QAAOC,QAAUC,SAAS,KAAQ,UAAW,AAE7C,QAAOC,SAAU,QAAS,AAC1B,QAAOC,UAAW,SAAU,AAC5B,QAASC,iBAAiB,CAAEC,WAAW,CAAEC,WAAW,KAAQ,eAAgB,AAC5E,QAASC,UAAU,KAAQ,gBAAiB,CAE5C,MAAMC,OAAS,KACb,MAAMC,oBACJ,qOAEF,OACE,oBAACC,UACCC,UAAU,kGACVC,UAAQ,UAER,oBAACC,OAAIF,UAAU,oEACb,oBAACE,OAAIF,UAAU,qEACb,oBAACE,OAAIF,UAAU,+BACZ,AAAC,CAAC,QAAS,OAAO,CAAaG,GAAG,CAAC,AAACC,OACnC,oBAACb,MACCc,IAAKD,MACLE,KAAK,IACLF,MAAOA,MACPG,oBAAqB,CACnBP,UAAWb,GAAG,+BAAgC,CAC5C,mBAAoBiB,QAAU,QAC9B,mBAAoBA,QAAU,MAChC,EACF,KAIJ,oBAACf,QAAOmB,UAAWlB,UAAWmB,gBAAAA,OAE9B,oBAACP,OAAIF,UAAU,iBACZL,YAAYQ,GAAG,CAAC,AAACO,MAChB,oBAACC,KACCN,IAAKK,KAAKL,GAAG,CACbC,KAAMI,KAAKA,IAAI,CACfE,OAAO,SACPC,IAAI,sBACJC,aAAY,CAAC,cAAc,EAAEJ,KAAKL,GAAG,CAAC,CAAC,CACvCL,UAAU,+BAEV,oBAACZ,MACC2B,KAAML,KAAKM,QAAQ,CACnBC,KAAK,OACLC,cAAc,2EAEhB,oBAAC9B,MACC2B,KAAML,KAAKS,SAAS,CACpBF,KAAK,OACLC,cAAc,2CAKtB,oBAAChB,OAAIF,UAAU,oBACZJ,WAAWO,GAAG,CAAC,AAACiB,OACf,oBAACC,OACChB,IAAKe,MAAME,IAAI,CACfC,IAAKH,MAAMI,KAAK,CAChBC,IAAKL,MAAME,IAAI,CACfI,MAAM,KACNC,OAAO,UAKf,oBAACzB,OAAIF,UAAU,gEACZN,YAAYS,GAAG,CAAC,CAAC,CAAEyB,KAAK,CAAEC,KAAK,CAAE,GAChC,oBAAC3B,OAAIG,IAAKuB,MAAO5B,UAAU,+BACzB,oBAAC8B,MAAG9B,UAAU,kEACX4B,OAEH,oBAACG,MAAG/B,UAAU,0BACX6B,MAAM1B,GAAG,CAAC,CAAC,CAAE6B,KAAK,CAAEtB,IAAI,CAAEuB,KAAK,CAAE,GAChC,oBAACC,MAAG7B,IAAK2B,MAAOhC,UAAU,gBACxB,oBAACW,KACCL,KAAMI,KACNV,UAAWF,oBACXgB,aAAY,CAAC,MAAM,EAAEkB,MAAM,CAAC,EAE3BA,OAEFC,OACC,oBAACzC,OAAMyB,KAAK,KAAKjB,UAAU,0BACxBiC,cAWnB,oBAAC/B,OAAIF,UAAU,8DACb,oBAACE,OAAIF,UAAU,eACZP,kBAAkBU,GAAG,CAAC,AAACO,MACtB,oBAACC,KACCN,IAAKK,KAAKsB,KAAK,CACf1B,KAAMI,KAAKA,IAAI,CACfV,UAAWF,oBACXgB,aAAY,CAAC,MAAM,EAAEJ,KAAKsB,KAAK,CAAC,CAAC,EAEhCtB,KAAKsB,KAAK,MAQ3B,CAEA,gBAAenC,MAAO"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React,{useRef}from"react";import Icon from"../Icon";import LinkButton from"../LinkButton";import cn from"../utils/cn";import DropdownMenu from"../DropdownMenu";const testSessionState={signedIn:false,logOut:{token:"0000",href:"accounts/sign_out"},accountName:"Ably"};export const HeaderLinks=({sessionState=testSessionState,headerLinks,searchButtonVisibility,searchButton,className})=>{const{signedIn,logOut}=sessionState;const formRef=useRef(null);const headerLinkClasses="ui-text-menu2 md:ui-text-menu3 !font-bold py-16 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors";const dropdownMenuLinkClasses="block p-8 ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 rounded-lg";const onClickLogout=e=>{e.preventDefault();formRef.current?.submit()};const DashboardLink=({className})=>React.createElement("a",{href:"/dashboard",className:className},"Dashboard");const LogoutForm=React.createElement("form",{ref:formRef,method:"post",action:logOut.href,className:"hidden"},React.createElement("input",{name:"_method",value:"delete",type:"hidden"}),React.createElement("input",{name:"authenticity_token",value:logOut.token,type:"hidden"}));return React.createElement("nav",{className:cn("flex md:flex-1 md:items-center md:justify-end flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 md:gap-16 pt-12 pb-16 md:py-0",className)},signedIn&&React.createElement(React.Fragment,null,LogoutForm,React.createElement("div",{className:"block md:hidden"},React.createElement("div",{className:"flex flex-col border-b-[1px] border-neutral-300 px-16 pb-12 mb-12"},React.createElement("span",{className:"py-12 ui-text-sub-header text-[18px] text-neutral-700 dark:text-neutral-600 font-bold"},sessionState.accountName),React.createElement(DashboardLink,{className:headerLinkClasses})))),headerLinks?.map(({href,label,external})=>React.createElement("a",{key:href,className:cn(headerLinkClasses,"flex items-center gap-
|
|
1
|
+
import React,{useRef}from"react";import Icon from"../Icon";import LinkButton from"../LinkButton";import cn from"../utils/cn";import DropdownMenu from"../DropdownMenu";const testSessionState={signedIn:false,logOut:{token:"0000",href:"accounts/sign_out"},accountName:"Ably"};export const HeaderLinks=({sessionState=testSessionState,headerLinks,searchButtonVisibility,searchButton,className})=>{const{signedIn,logOut}=sessionState;const formRef=useRef(null);const headerLinkClasses="ui-text-menu2 md:ui-text-menu3 !font-bold py-16 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors";const dropdownMenuLinkClasses="block p-8 ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 rounded-lg";const onClickLogout=e=>{e.preventDefault();formRef.current?.submit()};const DashboardLink=({className})=>React.createElement("a",{href:"/dashboard",className:className},"Dashboard");const LogoutForm=React.createElement("form",{ref:formRef,method:"post",action:logOut.href,className:"hidden"},React.createElement("input",{name:"_method",value:"delete",type:"hidden"}),React.createElement("input",{name:"authenticity_token",value:logOut.token,type:"hidden"}));return React.createElement("nav",{className:cn("flex md:flex-1 md:items-center md:justify-end flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 md:gap-16 pt-12 pb-16 md:py-0",className)},signedIn&&React.createElement(React.Fragment,null,LogoutForm,React.createElement("div",{className:"block md:hidden"},React.createElement("div",{className:"flex flex-col border-b-[1px] border-neutral-300 px-16 pb-12 mb-12"},React.createElement("span",{className:"py-12 ui-text-sub-header text-[18px] text-neutral-700 dark:text-neutral-600 font-bold"},sessionState.accountName),React.createElement(DashboardLink,{className:headerLinkClasses})))),headerLinks?.map(({href,label,external})=>React.createElement("a",{key:href,className:cn(headerLinkClasses,"flex items-center gap-6 px-16 md:px-0 leading-none"),href:href,target:external?"_blank":undefined,rel:external?"noreferrer noopener":undefined},label,external&&React.createElement(Icon,{name:"icon-gui-arrow-top-right-on-square-mini",size:"20px"}))),searchButtonVisibility!=="mobile"?searchButton:null,signedIn?React.createElement(React.Fragment,null,React.createElement("div",{className:"hidden md:block relative"},React.createElement(DropdownMenu,null,React.createElement(DropdownMenu.Trigger,{description:`Account menu for ${sessionState.accountName}`},React.createElement("span",{className:"block text-ellipsis overflow-hidden whitespace-nowrap w-full max-w-[150px] leading-normal"},sessionState.accountName)),React.createElement(DropdownMenu.Content,{anchorPosition:"right",contentClassNames:"w-[240px] mt-[12px]"},React.createElement("div",{className:"p-8"},React.createElement(DashboardLink,{className:dropdownMenuLinkClasses}),React.createElement("a",{onClick:onClickLogout,href:"#",className:dropdownMenuLinkClasses},"Logout"))))),React.createElement("div",{className:"block md:hidden px-16 pt-16 pb-0"},React.createElement(LinkButton,{onClick:onClickLogout,variant:"secondary",className:"w-full md:ui-button-secondary-xs","aria-label":"Logout",rightIcon:"icon-gui-arrow-right-end-on-rectangle-outline"},"Logout"))):React.createElement("div",{className:"flex gap-16 pt-12 md:py-0 px-16 md:px-0"},React.createElement(LinkButton,{href:"/login",variant:"secondary",className:"flex-1 md:flex-none md:ui-button-secondary-xs hover:text-neutral-1300 dark:hover:text-neutral-000"},"Login"),React.createElement(LinkButton,{href:"/sign-up",variant:"primary",className:"flex-1 md:flex-none md:ui-button-primary-xs hover:text-neutral-000 dark:hover:text-neutral-1300"},"Start free")))};
|
|
2
2
|
//# sourceMappingURL=HeaderLinks.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/Header/HeaderLinks.tsx"],"sourcesContent":["import React, { MouseEvent, useRef } from \"react\";\nimport { HeaderProps } from \"../Header\";\nimport Icon from \"../Icon\";\nimport LinkButton from \"../LinkButton\";\nimport cn from \"../utils/cn\";\nimport DropdownMenu from \"../DropdownMenu\";\n\nconst testSessionState = {\n signedIn: false,\n logOut: {\n token: \"0000\",\n href: \"accounts/sign_out\",\n },\n accountName: \"Ably\",\n};\n\nexport const HeaderLinks: React.FC<\n Pick<\n HeaderProps,\n | \"sessionState\"\n | \"headerLinks\"\n | \"searchButtonVisibility\"\n | \"searchButton\"\n | \"className\"\n >\n> = ({\n sessionState = testSessionState,\n headerLinks,\n searchButtonVisibility,\n searchButton,\n className,\n}) => {\n const { signedIn, logOut } = sessionState;\n const formRef = useRef<HTMLFormElement>(null);\n\n const headerLinkClasses =\n \"ui-text-menu2 md:ui-text-menu3 !font-bold py-16 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors\";\n\n const dropdownMenuLinkClasses =\n \"block p-8 ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 rounded-lg\";\n\n const onClickLogout = (e: MouseEvent) => {\n e.preventDefault();\n formRef.current?.submit();\n };\n\n const DashboardLink = ({ className }: { className: string }) => (\n <a href=\"/dashboard\" className={className}>\n Dashboard\n </a>\n );\n\n const LogoutForm = (\n <form ref={formRef} method=\"post\" action={logOut.href} className=\"hidden\">\n <input name=\"_method\" value=\"delete\" type=\"hidden\" />\n <input name=\"authenticity_token\" value={logOut.token} type=\"hidden\" />\n </form>\n );\n\n return (\n <nav\n className={cn(\n \"flex md:flex-1 md:items-center md:justify-end flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 md:gap-16 pt-12 pb-16 md:py-0\",\n className,\n )}\n >\n {signedIn && (\n <>\n {LogoutForm}\n <div className=\"block md:hidden\">\n <div className=\"flex flex-col border-b-[1px] border-neutral-300 px-16 pb-12 mb-12\">\n <span className=\"py-12 ui-text-sub-header text-[18px] text-neutral-700 dark:text-neutral-600 font-bold\">\n {sessionState.accountName}\n </span>\n {<DashboardLink className={headerLinkClasses} />}\n </div>\n </div>\n </>\n )}\n\n {headerLinks?.map(({ href, label, external }) => (\n <a\n key={href}\n className={cn(\n headerLinkClasses,\n \"flex items-center gap-
|
|
1
|
+
{"version":3,"sources":["../../../src/core/Header/HeaderLinks.tsx"],"sourcesContent":["import React, { MouseEvent, useRef } from \"react\";\nimport { HeaderProps } from \"../Header\";\nimport Icon from \"../Icon\";\nimport LinkButton from \"../LinkButton\";\nimport cn from \"../utils/cn\";\nimport DropdownMenu from \"../DropdownMenu\";\n\nconst testSessionState = {\n signedIn: false,\n logOut: {\n token: \"0000\",\n href: \"accounts/sign_out\",\n },\n accountName: \"Ably\",\n};\n\nexport const HeaderLinks: React.FC<\n Pick<\n HeaderProps,\n | \"sessionState\"\n | \"headerLinks\"\n | \"searchButtonVisibility\"\n | \"searchButton\"\n | \"className\"\n >\n> = ({\n sessionState = testSessionState,\n headerLinks,\n searchButtonVisibility,\n searchButton,\n className,\n}) => {\n const { signedIn, logOut } = sessionState;\n const formRef = useRef<HTMLFormElement>(null);\n\n const headerLinkClasses =\n \"ui-text-menu2 md:ui-text-menu3 !font-bold py-16 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors\";\n\n const dropdownMenuLinkClasses =\n \"block p-8 ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 rounded-lg\";\n\n const onClickLogout = (e: MouseEvent) => {\n e.preventDefault();\n formRef.current?.submit();\n };\n\n const DashboardLink = ({ className }: { className: string }) => (\n <a href=\"/dashboard\" className={className}>\n Dashboard\n </a>\n );\n\n const LogoutForm = (\n <form ref={formRef} method=\"post\" action={logOut.href} className=\"hidden\">\n <input name=\"_method\" value=\"delete\" type=\"hidden\" />\n <input name=\"authenticity_token\" value={logOut.token} type=\"hidden\" />\n </form>\n );\n\n return (\n <nav\n className={cn(\n \"flex md:flex-1 md:items-center md:justify-end flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 md:gap-16 pt-12 pb-16 md:py-0\",\n className,\n )}\n >\n {signedIn && (\n <>\n {LogoutForm}\n <div className=\"block md:hidden\">\n <div className=\"flex flex-col border-b-[1px] border-neutral-300 px-16 pb-12 mb-12\">\n <span className=\"py-12 ui-text-sub-header text-[18px] text-neutral-700 dark:text-neutral-600 font-bold\">\n {sessionState.accountName}\n </span>\n {<DashboardLink className={headerLinkClasses} />}\n </div>\n </div>\n </>\n )}\n\n {headerLinks?.map(({ href, label, external }) => (\n <a\n key={href}\n className={cn(\n headerLinkClasses,\n \"flex items-center gap-6 px-16 md:px-0 leading-none\",\n )}\n href={href}\n target={external ? \"_blank\" : undefined}\n rel={external ? \"noreferrer noopener\" : undefined}\n >\n {label}\n {external && (\n <Icon name=\"icon-gui-arrow-top-right-on-square-mini\" size=\"20px\" />\n )}\n </a>\n ))}\n\n {searchButtonVisibility !== \"mobile\" ? searchButton : null}\n {signedIn ? (\n <>\n <div className=\"hidden md:block relative\">\n <DropdownMenu>\n <DropdownMenu.Trigger\n description={`Account menu for ${sessionState.accountName}`}\n >\n <span className=\"block text-ellipsis overflow-hidden whitespace-nowrap w-full max-w-[150px] leading-normal\">\n {sessionState.accountName}\n </span>\n </DropdownMenu.Trigger>\n <DropdownMenu.Content\n anchorPosition=\"right\"\n contentClassNames=\"w-[240px] mt-[12px]\"\n >\n <div className=\"p-8\">\n {<DashboardLink className={dropdownMenuLinkClasses} />}\n <a\n onClick={onClickLogout}\n href=\"#\"\n className={dropdownMenuLinkClasses}\n >\n Logout\n </a>\n </div>\n </DropdownMenu.Content>\n </DropdownMenu>\n </div>\n <div className=\"block md:hidden px-16 pt-16 pb-0\">\n <LinkButton\n onClick={onClickLogout}\n variant=\"secondary\"\n className=\"w-full md:ui-button-secondary-xs\"\n aria-label=\"Logout\"\n rightIcon=\"icon-gui-arrow-right-end-on-rectangle-outline\"\n >\n Logout\n </LinkButton>\n </div>\n </>\n ) : (\n <div className=\"flex gap-16 pt-12 md:py-0 px-16 md:px-0\">\n <LinkButton\n href=\"/login\"\n variant=\"secondary\"\n className=\"flex-1 md:flex-none md:ui-button-secondary-xs hover:text-neutral-1300 dark:hover:text-neutral-000\"\n >\n Login\n </LinkButton>\n <LinkButton\n href=\"/sign-up\"\n variant=\"primary\"\n className=\"flex-1 md:flex-none md:ui-button-primary-xs hover:text-neutral-000 dark:hover:text-neutral-1300\"\n >\n Start free\n </LinkButton>\n </div>\n )}\n </nav>\n );\n};\n"],"names":["React","useRef","Icon","LinkButton","cn","DropdownMenu","testSessionState","signedIn","logOut","token","href","accountName","HeaderLinks","sessionState","headerLinks","searchButtonVisibility","searchButton","className","formRef","headerLinkClasses","dropdownMenuLinkClasses","onClickLogout","e","preventDefault","current","submit","DashboardLink","a","LogoutForm","form","ref","method","action","input","name","value","type","nav","div","span","map","label","external","key","target","undefined","rel","size","Trigger","description","Content","anchorPosition","contentClassNames","onClick","variant","aria-label","rightIcon"],"mappings":"AAAA,OAAOA,OAAqBC,MAAM,KAAQ,OAAQ,AAElD,QAAOC,SAAU,SAAU,AAC3B,QAAOC,eAAgB,eAAgB,AACvC,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,iBAAkB,iBAAkB,CAE3C,MAAMC,iBAAmB,CACvBC,SAAU,MACVC,OAAQ,CACNC,MAAO,OACPC,KAAM,mBACR,EACAC,YAAa,MACf,CAEA,QAAO,MAAMC,YAST,CAAC,CACHC,aAAeP,gBAAgB,CAC/BQ,WAAW,CACXC,sBAAsB,CACtBC,YAAY,CACZC,SAAS,CACV,IACC,KAAM,CAAEV,QAAQ,CAAEC,MAAM,CAAE,CAAGK,aAC7B,MAAMK,QAAUjB,OAAwB,MAExC,MAAMkB,kBACJ,oQAEF,MAAMC,wBACJ,6LAEF,MAAMC,cAAgB,AAACC,IACrBA,EAAEC,cAAc,EAChBL,CAAAA,QAAQM,OAAO,EAAEC,QACnB,EAEA,MAAMC,cAAgB,CAAC,CAAET,SAAS,CAAyB,GACzD,oBAACU,KAAEjB,KAAK,aAAaO,UAAWA,WAAW,aAK7C,MAAMW,WACJ,oBAACC,QAAKC,IAAKZ,QAASa,OAAO,OAAOC,OAAQxB,OAAOE,IAAI,CAAEO,UAAU,UAC/D,oBAACgB,SAAMC,KAAK,UAAUC,MAAM,SAASC,KAAK,WAC1C,oBAACH,SAAMC,KAAK,qBAAqBC,MAAO3B,OAAOC,KAAK,CAAE2B,KAAK,YAI/D,OACE,oBAACC,OACCpB,UAAWb,GACT,mJACAa,YAGDV,UACC,wCACGqB,WACD,oBAACU,OAAIrB,UAAU,mBACb,oBAACqB,OAAIrB,UAAU,qEACb,oBAACsB,QAAKtB,UAAU,yFACbJ,aAAaF,WAAW,EAE1B,oBAACe,eAAcT,UAAWE,uBAMlCL,aAAa0B,IAAI,CAAC,CAAE9B,IAAI,CAAE+B,KAAK,CAAEC,QAAQ,CAAE,GAC1C,oBAACf,KACCgB,IAAKjC,KACLO,UAAWb,GACTe,kBACA,sDAEFT,KAAMA,KACNkC,OAAQF,SAAW,SAAWG,UAC9BC,IAAKJ,SAAW,sBAAwBG,WAEvCJ,MACAC,UACC,oBAACxC,MAAKgC,KAAK,0CAA0Ca,KAAK,WAK/DhC,yBAA2B,SAAWC,aAAe,KACrDT,SACC,wCACE,oBAAC+B,OAAIrB,UAAU,4BACb,oBAACZ,kBACC,oBAACA,aAAa2C,OAAO,EACnBC,YAAa,CAAC,iBAAiB,EAAEpC,aAAaF,WAAW,CAAC,CAAC,EAE3D,oBAAC4B,QAAKtB,UAAU,6FACbJ,aAAaF,WAAW,GAG7B,oBAACN,aAAa6C,OAAO,EACnBC,eAAe,QACfC,kBAAkB,uBAElB,oBAACd,OAAIrB,UAAU,OACZ,oBAACS,eAAcT,UAAWG,0BAC3B,oBAACO,KACC0B,QAAShC,cACTX,KAAK,IACLO,UAAWG,yBACZ,cAOT,oBAACkB,OAAIrB,UAAU,oCACb,oBAACd,YACCkD,QAAShC,cACTiC,QAAQ,YACRrC,UAAU,mCACVsC,aAAW,SACXC,UAAU,iDACX,YAML,oBAAClB,OAAIrB,UAAU,2CACb,oBAACd,YACCO,KAAK,SACL4C,QAAQ,YACRrC,UAAU,qGACX,SAGD,oBAACd,YACCO,KAAK,WACL4C,QAAQ,UACRrC,UAAU,mGACX,eAOX,CAAE"}
|
package/core/Header.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React,{useState,useEffect,useRef,useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Logo from"./Logo";import{componentMaxHeight,HEADER_BOTTOM_MARGIN,HEADER_HEIGHT}from"./utils/heights";import{HeaderLinks}from"./Header/HeaderLinks";import throttle from"lodash.throttle";import{COLLAPSE_TRIGGER_DISTANCE}from"./Notice/component";
|
|
1
|
+
import React,{useState,useEffect,useRef,useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Logo from"./Logo";import{componentMaxHeight,HEADER_BOTTOM_MARGIN,HEADER_HEIGHT}from"./utils/heights";import{HeaderLinks}from"./Header/HeaderLinks";import throttle from"lodash.throttle";import{COLLAPSE_TRIGGER_DISTANCE}from"./Notice/component";const FLEXIBLE_DESKTOP_CLASSES="hidden md:flex flex-1 items-center h-full";const MAX_MOBILE_MENU_WIDTH="560px";const Header=({className,isNoticeVisible=false,searchBar,searchButton,logoHref,headerLinks,headerLinksClassName,nav,mobileNav,sessionState,isThemedScrollpoint=false,themedScrollpoints=[],searchButtonVisibility="all",location})=>{const[showMenu,setShowMenu]=useState(false);const[fadingOut,setFadingOut]=useState(false);const[scrollpointClasses,setScrollpointClasses]=useState("");const[bannerVisible,setBannerVisible]=useState(isNoticeVisible);const menuRef=useRef(null);const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setShowMenu(false);setFadingOut(false)},150)};useEffect(()=>{const handleResize=()=>{if(window.innerWidth>=1040){setShowMenu(false)}};window.addEventListener("resize",handleResize);return()=>window.removeEventListener("resize",handleResize)},[]);useEffect(()=>{if(showMenu){document.body.classList.add("overflow-hidden")}else{document.body.classList.remove("overflow-hidden")}return()=>{document.body.classList.remove("overflow-hidden")}},[showMenu]);useEffect(()=>{if(location&&showMenu){closeMenu()}},[location]);useEffect(()=>{const handleScroll=()=>{setBannerVisible(window.scrollY<=COLLAPSE_TRIGGER_DISTANCE&&isNoticeVisible);for(const scrollpoint of themedScrollpoints){const element=document.getElementById(scrollpoint.id);if(element){const rect=element.getBoundingClientRect();if(rect.top<=HEADER_HEIGHT&&rect.bottom>=HEADER_HEIGHT){setScrollpointClasses(scrollpoint.className);return}}}};const throttledHandleScroll=throttle(handleScroll,150);handleScroll();window.addEventListener("scroll",throttledHandleScroll);return()=>window.removeEventListener("scroll",throttledHandleScroll)},[themedScrollpoints]);const wrappedSearchButton=useMemo(()=>searchButton?React.createElement("div",{className:"text-neutral-1300 dark:text-neutral-000 flex items-center"},searchButton):null,[searchButton]);return React.createElement(React.Fragment,null,React.createElement("header",{role:"banner",className:cn("fixed left-0 top-0 w-full z-50 border-neutral-300 dark:border-neutral-1000 transition-colors px-24 md:px-64",isThemedScrollpoint?"bg-transparent border-b-0":"bg-neutral-000 dark:bg-neutral-1300 border-b",isThemedScrollpoint&&scrollpointClasses,{"md:top-auto":bannerVisible}),style:{height:HEADER_HEIGHT}},React.createElement("div",{className:cn("flex items-center h-full",className)},React.createElement("nav",{className:"flex flex-1 h-full items-center"},["light","dark"].map(theme=>React.createElement(Logo,{key:theme,href:logoHref,theme:theme,additionalLinkAttrs:{className:cn("h-full focus-base rounded mr-32 w-[96px]",{"flex dark:hidden":theme==="light","hidden dark:flex":theme==="dark"})}})),React.createElement("div",{className:FLEXIBLE_DESKTOP_CLASSES},nav)),React.createElement("div",{className:"flex md:hidden flex-1 items-center justify-end gap-24 h-full"},searchButtonVisibility!=="desktop"?wrappedSearchButton:null,React.createElement("button",{className:"cursor-pointer focus-base rounded flex items-center p-0",onClick:()=>setShowMenu(!showMenu),"aria-expanded":showMenu,"aria-controls":"mobile-menu","aria-label":"Toggle menu"},React.createElement(Icon,{name:showMenu?"icon-gui-x-mark-outline":"icon-gui-bars-3-outline",additionalCSS:"text-neutral-1300 dark:text-neutral-000",size:"1.5rem"}))),searchBar?React.createElement("div",{className:cn(FLEXIBLE_DESKTOP_CLASSES,"justify-center")},searchBar):null,React.createElement(HeaderLinks,{className:cn(FLEXIBLE_DESKTOP_CLASSES,headerLinksClassName),headerLinks:headerLinks,sessionState:sessionState,searchButton:wrappedSearchButton,searchButtonVisibility:searchButtonVisibility}))),showMenu?React.createElement(React.Fragment,null,React.createElement("div",{className:cn("fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300 z-40",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut}),onClick:closeMenu,onKeyDown:e=>e.key==="Escape"&&closeMenu(),role:"presentation"}),React.createElement("div",{id:"mobile-menu",className:"md:hidden fixed flex flex-col top-[76px] overflow-y-hidden mx-12 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-50",style:{maxWidth:MAX_MOBILE_MENU_WIDTH,maxHeight:componentMaxHeight(HEADER_HEIGHT,HEADER_BOTTOM_MARGIN)},ref:menuRef,role:"navigation"},mobileNav,React.createElement(HeaderLinks,{headerLinks:headerLinks,sessionState:sessionState}))):null)};export default Header;
|
|
2
2
|
//# sourceMappingURL=Header.js.map
|
package/core/Header.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/Header.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, ReactNode, useMemo } from \"react\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport Logo from \"./Logo\";\nimport {\n componentMaxHeight,\n HEADER_BOTTOM_MARGIN,\n HEADER_HEIGHT,\n} from \"./utils/heights\";\nimport { HeaderLinks } from \"./Header/HeaderLinks\";\nimport throttle from \"lodash.throttle\";\nimport { Theme } from \"./styles/colors/types\";\nimport { COLLAPSE_TRIGGER_DISTANCE } from \"./Notice/component\";\nimport \"./Header/Header.css\";\n\nexport type ThemedScrollpoint = {\n id: string;\n className: string;\n};\n\n/**\n * Represents the state of the user session in the header.\n */\nexport type HeaderSessionState = {\n /**\n * Indicates if the user is signed in.\n */\n signedIn: boolean;\n\n /**\n * Information required to log out the user.\n */\n logOut: {\n /**\n * Token used for logging out.\n */\n token: string;\n\n /**\n * URL to log out the user.\n */\n href: string;\n };\n\n /**\n * Name of the user's account.\n */\n accountName: string;\n};\n\n/**\n * Props for the Header component.\n */\nexport type HeaderProps = {\n /**\n * Optional classnames to add to the header\n */\n className?: string;\n /**\n * Indicates if the notice banner is visible.\n */\n isNoticeVisible: boolean;\n /**\n * Optional search bar element.\n */\n searchBar?: ReactNode;\n\n /**\n * Optional search button element.\n */\n searchButton?: ReactNode;\n\n /**\n * URL for the logo link.\n */\n logoHref?: string;\n\n /**\n * Array of header links.\n */\n headerLinks?: {\n /**\n * URL for the link.\n */\n href: string;\n\n /**\n * Label for the link.\n */\n label: string;\n\n /**\n * Indicates if the link should open in a new tab.\n */\n external?: boolean;\n }[];\n\n /**\n * Optional desktop navigation element.\n */\n nav?: ReactNode;\n\n /**\n * Optional mobile navigation element.\n */\n mobileNav?: ReactNode;\n\n /**\n * State of the user session.\n */\n sessionState?: HeaderSessionState;\n\n /**\n * Array of themed scrollpoints. The header will change its appearance based on the scrollpoint in view.\n */\n themedScrollpoints?: ThemedScrollpoint[];\n\n /**\n * Visibility setting for the search button.\n * - \"all\": Visible on all devices.\n * - \"desktop\": Visible only on desktop devices.\n * - \"mobile\": Visible only on mobile devices.\n */\n searchButtonVisibility?: \"all\" | \"desktop\" | \"mobile\";\n};\n\nconst FLEXIBLE_DESKTOP_CLASSES = \"hidden md:flex flex-1 items-center h-full\";\n\n/**\n * Maximum width before the menu expanded into full width\n */\nconst MAX_MOBILE_MENU_WIDTH = \"560px\";\n\nconst Header: React.FC<HeaderProps> = ({\n className,\n isNoticeVisible = false,\n searchBar,\n searchButton,\n logoHref,\n headerLinks,\n nav,\n mobileNav,\n sessionState,\n themedScrollpoints = [],\n searchButtonVisibility = \"all\",\n}) => {\n const [showMenu, setShowMenu] = useState(false);\n const [fadingOut, setFadingOut] = useState(false);\n const [scrollpointClasses, setScrollpointClasses] = useState<string>(\"\");\n const [bannerVisible, setBannerVisible] = useState(isNoticeVisible);\n const menuRef = useRef<HTMLDivElement>(null);\n\n const closeMenu = () => {\n setFadingOut(true);\n\n setTimeout(() => {\n setShowMenu(false);\n setFadingOut(false);\n }, 150);\n };\n\n useEffect(() => {\n const handleResize = () => {\n if (window.innerWidth >= 1040) {\n setShowMenu(false);\n }\n };\n window.addEventListener(\"resize\", handleResize);\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n useEffect(() => {\n if (showMenu) {\n document.body.classList.add(\"overflow-hidden\");\n } else {\n document.body.classList.remove(\"overflow-hidden\");\n }\n\n // Cleanup on unmount\n return () => {\n document.body.classList.remove(\"overflow-hidden\");\n };\n }, [showMenu]);\n\n useEffect(() => {\n const handleScroll = () => {\n setBannerVisible(\n window.scrollY <= COLLAPSE_TRIGGER_DISTANCE && isNoticeVisible,\n );\n for (const scrollpoint of themedScrollpoints) {\n const element = document.getElementById(scrollpoint.id);\n if (element) {\n const rect = element.getBoundingClientRect();\n if (rect.top <= HEADER_HEIGHT && rect.bottom >= HEADER_HEIGHT) {\n setScrollpointClasses(scrollpoint.className);\n return;\n }\n }\n }\n };\n\n const throttledHandleScroll = throttle(handleScroll, 150);\n\n handleScroll();\n\n window.addEventListener(\"scroll\", throttledHandleScroll);\n return () => window.removeEventListener(\"scroll\", throttledHandleScroll);\n }, [themedScrollpoints]);\n\n const wrappedSearchButton = useMemo(\n () =>\n searchButton ? (\n <div className=\"text-neutral-1300 dark:text-neutral-000 flex items-center\">\n {searchButton}\n </div>\n ) : null,\n [searchButton],\n );\n\n return (\n <>\n <header\n role=\"banner\"\n className={cn(\n \"fixed left-0 w-full z-10 top-0 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-colors px-24 md:px-64\",\n scrollpointClasses,\n {\n \"md:top-auto\": bannerVisible,\n },\n )}\n style={{ height: HEADER_HEIGHT }}\n >\n <div className={cn(\"flex items-center h-full\", className)}>\n <nav className=\"flex flex-1 h-full items-center\">\n {([\"light\", \"dark\"] as Theme[]).map((theme) => (\n <Logo\n key={theme}\n href={logoHref}\n theme={theme}\n additionalLinkAttrs={{\n className: cn(\"h-full focus-base rounded mr-32 w-[96px]\", {\n \"flex dark:hidden\": theme === \"light\",\n \"hidden dark:flex\": theme === \"dark\",\n }),\n }}\n />\n ))}\n <div className={FLEXIBLE_DESKTOP_CLASSES}>{nav}</div>\n </nav>\n <div className=\"flex md:hidden flex-1 items-center justify-end gap-24 h-full\">\n {searchButtonVisibility !== \"desktop\" ? wrappedSearchButton : null}\n <button\n className=\"cursor-pointer focus-base rounded flex items-center\"\n onClick={() => setShowMenu(!showMenu)}\n aria-expanded={showMenu}\n aria-controls=\"mobile-menu\"\n aria-label=\"Toggle menu\"\n >\n <Icon\n name={\n showMenu\n ? \"icon-gui-x-mark-outline\"\n : \"icon-gui-bars-3-outline\"\n }\n additionalCSS=\"text-neutral-1300 dark:text-neutral-000\"\n size=\"1.5rem\"\n />\n </button>\n </div>\n {searchBar ? (\n <div className={cn(FLEXIBLE_DESKTOP_CLASSES, \"justify-center\")}>\n {searchBar}\n </div>\n ) : null}\n <HeaderLinks\n className={FLEXIBLE_DESKTOP_CLASSES}\n headerLinks={headerLinks}\n sessionState={sessionState}\n searchButton={wrappedSearchButton}\n searchButtonVisibility={searchButtonVisibility}\n />\n </div>\n </header>\n {showMenu ? (\n <>\n <div\n className={cn(\n \"fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300\",\n {\n \"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]\":\n !fadingOut,\n \"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]\":\n fadingOut,\n },\n )}\n onClick={closeMenu}\n onKeyDown={(e) => e.key === \"Escape\" && closeMenu()}\n role=\"presentation\"\n />\n <div\n id=\"mobile-menu\"\n className=\"md:hidden fixed flex flex-col top-[76px] overflow-y-hidden mx-12 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-20 mobile-menu-container\"\n style={{\n maxWidth: MAX_MOBILE_MENU_WIDTH,\n maxHeight: componentMaxHeight(\n HEADER_HEIGHT,\n HEADER_BOTTOM_MARGIN,\n ),\n }}\n ref={menuRef}\n role=\"navigation\"\n >\n {mobileNav}\n <HeaderLinks\n headerLinks={headerLinks}\n sessionState={sessionState}\n />\n </div>\n </>\n ) : null}\n </>\n );\n};\n\nexport default Header;\n"],"names":["React","useState","useEffect","useRef","useMemo","Icon","cn","Logo","componentMaxHeight","HEADER_BOTTOM_MARGIN","HEADER_HEIGHT","HeaderLinks","throttle","COLLAPSE_TRIGGER_DISTANCE","FLEXIBLE_DESKTOP_CLASSES","MAX_MOBILE_MENU_WIDTH","Header","className","isNoticeVisible","searchBar","searchButton","logoHref","headerLinks","nav","mobileNav","sessionState","themedScrollpoints","searchButtonVisibility","showMenu","setShowMenu","fadingOut","setFadingOut","scrollpointClasses","setScrollpointClasses","bannerVisible","setBannerVisible","menuRef","closeMenu","setTimeout","handleResize","window","innerWidth","addEventListener","removeEventListener","document","body","classList","add","remove","handleScroll","scrollY","scrollpoint","element","getElementById","id","rect","getBoundingClientRect","top","bottom","throttledHandleScroll","wrappedSearchButton","div","header","role","style","height","map","theme","key","href","additionalLinkAttrs","button","onClick","aria-expanded","aria-controls","aria-label","name","additionalCSS","size","onKeyDown","e","maxWidth","maxHeight","ref"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/core/Header.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, ReactNode, useMemo } from \"react\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport Logo from \"./Logo\";\nimport {\n componentMaxHeight,\n HEADER_BOTTOM_MARGIN,\n HEADER_HEIGHT,\n} from \"./utils/heights\";\nimport { HeaderLinks } from \"./Header/HeaderLinks\";\nimport throttle from \"lodash.throttle\";\nimport { Theme } from \"./styles/colors/types\";\nimport { COLLAPSE_TRIGGER_DISTANCE } from \"./Notice/component\";\n\nexport type ThemedScrollpoint = {\n id: string;\n className: string;\n};\n\n/**\n * Represents the state of the user session in the header.\n */\nexport type HeaderSessionState = {\n /**\n * Indicates if the user is signed in.\n */\n signedIn: boolean;\n\n /**\n * Information required to log out the user.\n */\n logOut: {\n /**\n * Token used for logging out.\n */\n token: string;\n\n /**\n * URL to log out the user.\n */\n href: string;\n };\n\n /**\n * Name of the user's account.\n */\n accountName: string;\n};\n\n/**\n * Props for the Header component.\n */\nexport type HeaderProps = {\n /**\n * Optional classnames to add to the header\n */\n className?: string;\n /**\n * Indicates if the notice banner is visible.\n */\n isNoticeVisible?: boolean;\n /**\n * Optional search bar element.\n */\n searchBar?: ReactNode;\n\n /**\n * Optional search button element.\n */\n searchButton?: ReactNode;\n\n /**\n * URL for the logo link.\n */\n logoHref?: string;\n\n /**\n * Array of header links.\n */\n headerLinks?: {\n /**\n * URL for the link.\n */\n href: string;\n\n /**\n * Label for the link.\n */\n label: string;\n\n /**\n * Indicates if the link should open in a new tab.\n */\n external?: boolean;\n }[];\n\n /**\n * Optional classname for styling the header links container.\n */\n headerLinksClassName?: string;\n\n /**\n * Optional desktop navigation element.\n */\n nav?: ReactNode;\n\n /**\n * Optional mobile navigation element.\n */\n mobileNav?: ReactNode;\n\n /**\n * State of the user session.\n */\n sessionState?: HeaderSessionState;\n\n /**\n * Indicates if the header should change its appearance based on the scrollpoint in view.\n */\n isThemedScrollpoint?: boolean;\n\n /**\n * Array of themed scrollpoints. The header will change its appearance based on the scrollpoint in view.\n */\n themedScrollpoints?: ThemedScrollpoint[];\n\n /**\n * Visibility setting for the search button.\n * - \"all\": Visible on all devices.\n * - \"desktop\": Visible only on desktop devices.\n * - \"mobile\": Visible only on mobile devices.\n */\n searchButtonVisibility?: \"all\" | \"desktop\" | \"mobile\";\n\n /**\n * Optional location object to detect location changes.\n */\n location?: Location;\n};\n\nconst FLEXIBLE_DESKTOP_CLASSES = \"hidden md:flex flex-1 items-center h-full\";\n\n/**\n * Maximum width before the menu expanded into full width\n */\nconst MAX_MOBILE_MENU_WIDTH = \"560px\";\n\nconst Header: React.FC<HeaderProps> = ({\n className,\n isNoticeVisible = false,\n searchBar,\n searchButton,\n logoHref,\n headerLinks,\n headerLinksClassName,\n nav,\n mobileNav,\n sessionState,\n isThemedScrollpoint = false,\n themedScrollpoints = [],\n searchButtonVisibility = \"all\",\n location,\n}) => {\n const [showMenu, setShowMenu] = useState(false);\n const [fadingOut, setFadingOut] = useState(false);\n const [scrollpointClasses, setScrollpointClasses] = useState<string>(\"\");\n const [bannerVisible, setBannerVisible] = useState(isNoticeVisible);\n const menuRef = useRef<HTMLDivElement>(null);\n\n const closeMenu = () => {\n setFadingOut(true);\n\n setTimeout(() => {\n setShowMenu(false);\n setFadingOut(false);\n }, 150);\n };\n\n useEffect(() => {\n const handleResize = () => {\n if (window.innerWidth >= 1040) {\n setShowMenu(false);\n }\n };\n window.addEventListener(\"resize\", handleResize);\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n useEffect(() => {\n if (showMenu) {\n document.body.classList.add(\"overflow-hidden\");\n } else {\n document.body.classList.remove(\"overflow-hidden\");\n }\n\n // Cleanup on unmount\n return () => {\n document.body.classList.remove(\"overflow-hidden\");\n };\n }, [showMenu]);\n\n // Close menu when location changes\n useEffect(() => {\n if (location && showMenu) {\n closeMenu();\n }\n }, [location]);\n\n useEffect(() => {\n const handleScroll = () => {\n setBannerVisible(\n window.scrollY <= COLLAPSE_TRIGGER_DISTANCE && isNoticeVisible,\n );\n for (const scrollpoint of themedScrollpoints) {\n const element = document.getElementById(scrollpoint.id);\n if (element) {\n const rect = element.getBoundingClientRect();\n if (rect.top <= HEADER_HEIGHT && rect.bottom >= HEADER_HEIGHT) {\n setScrollpointClasses(scrollpoint.className);\n return;\n }\n }\n }\n };\n\n const throttledHandleScroll = throttle(handleScroll, 150);\n\n handleScroll();\n\n window.addEventListener(\"scroll\", throttledHandleScroll);\n return () => window.removeEventListener(\"scroll\", throttledHandleScroll);\n }, [themedScrollpoints]);\n\n const wrappedSearchButton = useMemo(\n () =>\n searchButton ? (\n <div className=\"text-neutral-1300 dark:text-neutral-000 flex items-center\">\n {searchButton}\n </div>\n ) : null,\n [searchButton],\n );\n\n return (\n <>\n <header\n role=\"banner\"\n className={cn(\n \"fixed left-0 top-0 w-full z-50 border-neutral-300 dark:border-neutral-1000 transition-colors px-24 md:px-64\",\n isThemedScrollpoint\n ? \"bg-transparent border-b-0\"\n : \"bg-neutral-000 dark:bg-neutral-1300 border-b\",\n isThemedScrollpoint && scrollpointClasses,\n {\n \"md:top-auto\": bannerVisible,\n },\n )}\n style={{ height: HEADER_HEIGHT }}\n >\n <div className={cn(\"flex items-center h-full\", className)}>\n <nav className=\"flex flex-1 h-full items-center\">\n {([\"light\", \"dark\"] as Theme[]).map((theme) => (\n <Logo\n key={theme}\n href={logoHref}\n theme={theme}\n additionalLinkAttrs={{\n className: cn(\"h-full focus-base rounded mr-32 w-[96px]\", {\n \"flex dark:hidden\": theme === \"light\",\n \"hidden dark:flex\": theme === \"dark\",\n }),\n }}\n />\n ))}\n <div className={FLEXIBLE_DESKTOP_CLASSES}>{nav}</div>\n </nav>\n <div className=\"flex md:hidden flex-1 items-center justify-end gap-24 h-full\">\n {searchButtonVisibility !== \"desktop\" ? wrappedSearchButton : null}\n <button\n className=\"cursor-pointer focus-base rounded flex items-center p-0\"\n onClick={() => setShowMenu(!showMenu)}\n aria-expanded={showMenu}\n aria-controls=\"mobile-menu\"\n aria-label=\"Toggle menu\"\n >\n <Icon\n name={\n showMenu\n ? \"icon-gui-x-mark-outline\"\n : \"icon-gui-bars-3-outline\"\n }\n additionalCSS=\"text-neutral-1300 dark:text-neutral-000\"\n size=\"1.5rem\"\n />\n </button>\n </div>\n {searchBar ? (\n <div className={cn(FLEXIBLE_DESKTOP_CLASSES, \"justify-center\")}>\n {searchBar}\n </div>\n ) : null}\n <HeaderLinks\n className={cn(FLEXIBLE_DESKTOP_CLASSES, headerLinksClassName)}\n headerLinks={headerLinks}\n sessionState={sessionState}\n searchButton={wrappedSearchButton}\n searchButtonVisibility={searchButtonVisibility}\n />\n </div>\n </header>\n {showMenu ? (\n <>\n <div\n className={cn(\n \"fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300 z-40\",\n {\n \"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]\":\n !fadingOut,\n \"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]\":\n fadingOut,\n },\n )}\n onClick={closeMenu}\n onKeyDown={(e) => e.key === \"Escape\" && closeMenu()}\n role=\"presentation\"\n />\n <div\n id=\"mobile-menu\"\n className=\"md:hidden fixed flex flex-col top-[76px] overflow-y-hidden mx-12 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-50\"\n style={{\n maxWidth: MAX_MOBILE_MENU_WIDTH,\n maxHeight: componentMaxHeight(\n HEADER_HEIGHT,\n HEADER_BOTTOM_MARGIN,\n ),\n }}\n ref={menuRef}\n role=\"navigation\"\n >\n {mobileNav}\n <HeaderLinks\n headerLinks={headerLinks}\n sessionState={sessionState}\n />\n </div>\n </>\n ) : null}\n </>\n );\n};\n\nexport default Header;\n"],"names":["React","useState","useEffect","useRef","useMemo","Icon","cn","Logo","componentMaxHeight","HEADER_BOTTOM_MARGIN","HEADER_HEIGHT","HeaderLinks","throttle","COLLAPSE_TRIGGER_DISTANCE","FLEXIBLE_DESKTOP_CLASSES","MAX_MOBILE_MENU_WIDTH","Header","className","isNoticeVisible","searchBar","searchButton","logoHref","headerLinks","headerLinksClassName","nav","mobileNav","sessionState","isThemedScrollpoint","themedScrollpoints","searchButtonVisibility","location","showMenu","setShowMenu","fadingOut","setFadingOut","scrollpointClasses","setScrollpointClasses","bannerVisible","setBannerVisible","menuRef","closeMenu","setTimeout","handleResize","window","innerWidth","addEventListener","removeEventListener","document","body","classList","add","remove","handleScroll","scrollY","scrollpoint","element","getElementById","id","rect","getBoundingClientRect","top","bottom","throttledHandleScroll","wrappedSearchButton","div","header","role","style","height","map","theme","key","href","additionalLinkAttrs","button","onClick","aria-expanded","aria-controls","aria-label","name","additionalCSS","size","onKeyDown","e","maxWidth","maxHeight","ref"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React from"react";import Accordion from"../Accordion";import{menuItemLinks}from"./data";import cn from"../utils/cn";export const MeganavMobile=({
|
|
1
|
+
import React from"react";import Accordion from"../Accordion";import{menuItemLinks}from"./data";import cn from"../utils/cn";export const MeganavMobile=({navItems})=>{const menuItemClassname="text-[18px] py-12 font-bold text-neutral-1000 dark:text-neutral-000";return React.createElement("div",{className:"overflow-y-auto"},React.createElement(Accordion,{theme:"transparent",className:"px-16 pt-16",data:navItems,icons:{closed:{name:"icon-gui-chevron-down-outline"},open:{name:"icon-gui-chevron-up-outline"}},options:{autoClose:true,hideBorders:true,headerCSS:`px-0 ${menuItemClassname}`,contentCSS:"px-0",selectedHeaderCSS:"text-neutral-1300 dark:text-neutral-000",rowIconSize:"24px"}}),menuItemLinks&&React.createElement("div",{className:"mb-12"},menuItemLinks.map(link=>React.createElement("a",{href:link.link,key:link.name,className:cn("px-16 w-full block ui-text-p1",menuItemClassname)},link.name))))};
|
|
2
2
|
//# sourceMappingURL=MeganavMobile.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/Meganav/MeganavMobile.tsx"],"sourcesContent":["import React from \"react\";\nimport Accordion from \"../Accordion\";\nimport { AccordionData } from \"../Accordion/types\";\nimport { menuItemLinks } from \"./data\";\nimport cn from \"../utils/cn\";\n\nexport const MeganavMobile = ({
|
|
1
|
+
{"version":3,"sources":["../../../src/core/Meganav/MeganavMobile.tsx"],"sourcesContent":["import React from \"react\";\nimport Accordion from \"../Accordion\";\nimport { AccordionData } from \"../Accordion/types\";\nimport { menuItemLinks } from \"./data\";\nimport cn from \"../utils/cn\";\n\nexport const MeganavMobile = ({ navItems }: { navItems: AccordionData[] }) => {\n const menuItemClassname =\n \"text-[18px] py-12 font-bold text-neutral-1000 dark:text-neutral-000\";\n return (\n <div className=\"overflow-y-auto\">\n <Accordion\n theme=\"transparent\"\n className=\"px-16 pt-16\"\n data={navItems}\n icons={{\n closed: { name: \"icon-gui-chevron-down-outline\" },\n open: { name: \"icon-gui-chevron-up-outline\" },\n }}\n options={{\n autoClose: true,\n hideBorders: true,\n headerCSS: `px-0 ${menuItemClassname}`,\n contentCSS: \"px-0\",\n selectedHeaderCSS: \"text-neutral-1300 dark:text-neutral-000\",\n rowIconSize: \"24px\",\n }}\n />\n {menuItemLinks && (\n <div className=\"mb-12\">\n {menuItemLinks.map((link) => (\n <a\n href={link.link}\n key={link.name}\n className={cn(\"px-16 w-full block ui-text-p1\", menuItemClassname)}\n >\n {link.name}\n </a>\n ))}\n </div>\n )}\n </div>\n );\n};\n"],"names":["React","Accordion","menuItemLinks","cn","MeganavMobile","navItems","menuItemClassname","div","className","theme","data","icons","closed","name","open","options","autoClose","hideBorders","headerCSS","contentCSS","selectedHeaderCSS","rowIconSize","map","link","a","href","key"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,cAAe,cAAe,AAErC,QAASC,aAAa,KAAQ,QAAS,AACvC,QAAOC,OAAQ,aAAc,AAE7B,QAAO,MAAMC,cAAgB,CAAC,CAAEC,QAAQ,CAAiC,IACvE,MAAMC,kBACJ,sEACF,OACE,oBAACC,OAAIC,UAAU,mBACb,oBAACP,WACCQ,MAAM,cACND,UAAU,cACVE,KAAML,SACNM,MAAO,CACLC,OAAQ,CAAEC,KAAM,+BAAgC,EAChDC,KAAM,CAAED,KAAM,6BAA8B,CAC9C,EACAE,QAAS,CACPC,UAAW,KACXC,YAAa,KACbC,UAAW,CAAC,KAAK,EAAEZ,kBAAkB,CAAC,CACtCa,WAAY,OACZC,kBAAmB,0CACnBC,YAAa,MACf,IAEDnB,eACC,oBAACK,OAAIC,UAAU,SACZN,cAAcoB,GAAG,CAAC,AAACC,MAClB,oBAACC,KACCC,KAAMF,KAAKA,IAAI,CACfG,IAAKH,KAAKV,IAAI,CACdL,UAAWL,GAAG,gCAAiCG,oBAE9CiB,KAAKV,IAAI,IAOxB,CAAE"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React from"react";import cn from"../utils/cn";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";import{products}from"../ProductTile/data";import ProductTile from"../ProductTile";export const MeganavPanel=({displayProductTile,panelLeft,panelLeftClassName,panelRightHeading,panelRightItems,panelRightBottom})=>{return React.createElement(
|
|
1
|
+
import React from"react";import cn from"../utils/cn";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";import{productNames,products}from"../ProductTile/data";import ProductTile from"../ProductTile";export const MeganavPanel=({displayProductTile,panelLeft,panelLeftClassName,panelRightHeading,panelRightItems,panelRightBottom})=>{return React.createElement("div",{className:"flex flex-col md:flex-row gap-x-24 bg-neutral-000 dark:bg-neutral-1300"},React.createElement("div",{className:cn("flex-[7] flex-shrink-0 grid-cols-1 xs:grid-cols-2 group",panelLeftClassName),onClick:panelLeft&&!displayProductTile?()=>window.location.href=panelLeft.url:undefined},displayProductTile?productNames.map(product=>React.createElement(ProductTile,{name:product,key:product,selected:false,onClick:()=>{const productLink=products[product].link;if(productLink)window.location.href=productLink},animateIcons:true})):panelLeft&&React.createElement(React.Fragment,null,React.createElement("div",{className:"w-full p-24"},React.createElement("h4",{className:"ui-text-h4 text-neutral-1300 dark:text-neutral-000"},panelLeft.heading),React.createElement("p",{className:"ui-text-p3 text-neutral-800 dark:text-neutral-500 mt-8"},panelLeft.content),React.createElement(FeaturedLink,{url:panelLeft.url,additionalCSS:"text-neutral-1300 dark:text-neutral-000 mt-16 ui-text-p3 hover:text-neutral-1300 dark:hover:text-neutral-000",iconColor:"text-orange-600",iconClassName:"group-hover/meganav-panel:left-0"},panelLeft.labelLink)),React.createElement("div",{className:"flex justify-end"},React.createElement("img",{src:panelLeft.image,alt:panelLeft.heading,className:"w-full z-10 rounded-lg"})))),React.createElement("div",{className:"flex-[3] flex-shrink-0 flex flex-col justify-between"},React.createElement("ul",null,panelRightHeading&&React.createElement("p",{className:"ui-text-overline2 text-neutral-700 dark:text-neutral-600 my-12"},panelRightHeading),panelRightItems.map(item=>React.createElement("li",{className:cn("list-none py-[10px] md:py-8 my-0 flex gap-x-[10px] group hover:cursor-pointer",item.isMobile?"md:hidden":"md:flex"),key:item.label},React.createElement(Icon,{name:item.icon,size:"1.25rem",additionalCSS:"text-neutral-1000 dark:text-neutral-300"}),React.createElement("a",{className:"ui-text-menu2 md:ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 group-hover:text-neutral-1300 dark:group-hover:text-neutral-000",href:item.link},item.label)))),panelRightBottom&&React.createElement("div",{className:"items-end mt-16 md:mt-0"},panelRightBottom)))};
|
|
2
2
|
//# sourceMappingURL=MeganavPanel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/Meganav/MeganavPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\nimport Icon from \"../Icon\";\nimport { FlyoutPanelHighlight, FlyoutPanelList } from \"./data\";\nimport FeaturedLink from \"../FeaturedLink\";\nimport { ProductName, products } from \"../ProductTile/data\";\nimport ProductTile from \"../ProductTile\";\n\nexport const MeganavPanel = ({\n displayProductTile,\n panelLeft,\n panelLeftClassName,\n panelRightHeading,\n panelRightItems,\n panelRightBottom,\n}: {\n displayProductTile?: boolean;\n panelLeft?: FlyoutPanelHighlight;\n panelLeftClassName?: string;\n panelRightHeading?: string;\n panelRightItems: FlyoutPanelList[];\n panelRightBottom?: React.ReactNode;\n}) => {\n return (\n
|
|
1
|
+
{"version":3,"sources":["../../../src/core/Meganav/MeganavPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\nimport Icon from \"../Icon\";\nimport { FlyoutPanelHighlight, FlyoutPanelList } from \"./data\";\nimport FeaturedLink from \"../FeaturedLink\";\nimport { ProductName, productNames, products } from \"../ProductTile/data\";\nimport ProductTile from \"../ProductTile\";\n\nexport const MeganavPanel = ({\n displayProductTile,\n panelLeft,\n panelLeftClassName,\n panelRightHeading,\n panelRightItems,\n panelRightBottom,\n}: {\n displayProductTile?: boolean;\n panelLeft?: FlyoutPanelHighlight;\n panelLeftClassName?: string;\n panelRightHeading?: string;\n panelRightItems: FlyoutPanelList[];\n panelRightBottom?: React.ReactNode;\n}) => {\n return (\n <div className=\"flex flex-col md:flex-row gap-x-24 bg-neutral-000 dark:bg-neutral-1300\">\n <div\n className={cn(\n \"flex-[7] flex-shrink-0 grid-cols-1 xs:grid-cols-2 group\",\n panelLeftClassName,\n )}\n onClick={\n panelLeft && !displayProductTile\n ? () => (window.location.href = panelLeft.url)\n : undefined\n }\n >\n {displayProductTile\n ? productNames.map((product) => (\n <ProductTile\n name={product as ProductName}\n key={product}\n selected={false}\n onClick={() => {\n const productLink = products[product].link;\n if (productLink) window.location.href = productLink;\n }}\n animateIcons={true}\n />\n ))\n : panelLeft && (\n <>\n <div className=\"w-full p-24\">\n <h4 className=\"ui-text-h4 text-neutral-1300 dark:text-neutral-000\">\n {panelLeft.heading}\n </h4>\n <p className=\"ui-text-p3 text-neutral-800 dark:text-neutral-500 mt-8\">\n {panelLeft.content}\n </p>\n <FeaturedLink\n url={panelLeft.url}\n additionalCSS=\"text-neutral-1300 dark:text-neutral-000 mt-16 ui-text-p3 hover:text-neutral-1300 dark:hover:text-neutral-000\"\n iconColor=\"text-orange-600\"\n iconClassName=\"group-hover/meganav-panel:left-0\"\n >\n {panelLeft.labelLink}\n </FeaturedLink>\n </div>\n <div className=\"flex justify-end\">\n <img\n src={panelLeft.image}\n alt={panelLeft.heading}\n className=\"w-full z-10 rounded-lg\"\n />\n </div>\n </>\n )}\n </div>\n <div className=\"flex-[3] flex-shrink-0 flex flex-col justify-between\">\n <ul>\n {panelRightHeading && (\n <p className=\"ui-text-overline2 text-neutral-700 dark:text-neutral-600 my-12\">\n {panelRightHeading}\n </p>\n )}\n\n {panelRightItems.map((item) => (\n <li\n className={cn(\n \"list-none py-[10px] md:py-8 my-0 flex gap-x-[10px] group hover:cursor-pointer\",\n item.isMobile ? \"md:hidden\" : \"md:flex\",\n )}\n key={item.label}\n >\n <Icon\n name={item.icon}\n size=\"1.25rem\"\n additionalCSS=\"text-neutral-1000 dark:text-neutral-300\"\n />\n <a\n className=\"ui-text-menu2 md:ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 group-hover:text-neutral-1300 dark:group-hover:text-neutral-000\"\n href={item.link}\n >\n {item.label}\n </a>\n </li>\n ))}\n </ul>\n {panelRightBottom && (\n <div className=\"items-end mt-16 md:mt-0\">{panelRightBottom}</div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["React","cn","Icon","FeaturedLink","productNames","products","ProductTile","MeganavPanel","displayProductTile","panelLeft","panelLeftClassName","panelRightHeading","panelRightItems","panelRightBottom","div","className","onClick","window","location","href","url","undefined","map","product","name","key","selected","productLink","link","animateIcons","h4","heading","p","content","additionalCSS","iconColor","iconClassName","labelLink","img","src","image","alt","ul","item","li","isMobile","label","icon","size","a"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,SAAU,SAAU,AAE3B,QAAOC,iBAAkB,iBAAkB,AAC3C,QAAsBC,YAAY,CAAEC,QAAQ,KAAQ,qBAAsB,AAC1E,QAAOC,gBAAiB,gBAAiB,AAEzC,QAAO,MAAMC,aAAe,CAAC,CAC3BC,kBAAkB,CAClBC,SAAS,CACTC,kBAAkB,CAClBC,iBAAiB,CACjBC,eAAe,CACfC,gBAAgB,CAQjB,IACC,OACE,oBAACC,OAAIC,UAAU,0EACb,oBAACD,OACCC,UAAWd,GACT,0DACAS,oBAEFM,QACEP,WAAa,CAACD,mBACV,IAAOS,OAAOC,QAAQ,CAACC,IAAI,CAAGV,UAAUW,GAAG,CAC3CC,WAGLb,mBACGJ,aAAakB,GAAG,CAAC,AAACC,SAChB,oBAACjB,aACCkB,KAAMD,QACNE,IAAKF,QACLG,SAAU,MACVV,QAAS,KACP,MAAMW,YAActB,QAAQ,CAACkB,QAAQ,CAACK,IAAI,CAC1C,GAAID,YAAaV,OAAOC,QAAQ,CAACC,IAAI,CAAGQ,WAC1C,EACAE,aAAc,QAGlBpB,WACE,wCACE,oBAACK,OAAIC,UAAU,eACb,oBAACe,MAAGf,UAAU,sDACXN,UAAUsB,OAAO,EAEpB,oBAACC,KAAEjB,UAAU,0DACVN,UAAUwB,OAAO,EAEpB,oBAAC9B,cACCiB,IAAKX,UAAUW,GAAG,CAClBc,cAAc,+GACdC,UAAU,kBACVC,cAAc,oCAEb3B,UAAU4B,SAAS,GAGxB,oBAACvB,OAAIC,UAAU,oBACb,oBAACuB,OACCC,IAAK9B,UAAU+B,KAAK,CACpBC,IAAKhC,UAAUsB,OAAO,CACtBhB,UAAU,8BAMxB,oBAACD,OAAIC,UAAU,wDACb,oBAAC2B,UACE/B,mBACC,oBAACqB,KAAEjB,UAAU,kEACVJ,mBAIJC,gBAAgBU,GAAG,CAAC,AAACqB,MACpB,oBAACC,MACC7B,UAAWd,GACT,iFACA0C,KAAKE,QAAQ,CAAG,YAAc,WAEhCpB,IAAKkB,KAAKG,KAAK,EAEf,oBAAC5C,MACCsB,KAAMmB,KAAKI,IAAI,CACfC,KAAK,UACLd,cAAc,4CAEhB,oBAACe,KACClC,UAAU,uJACVI,KAAMwB,KAAKf,IAAI,EAEde,KAAKG,KAAK,KAKlBjC,kBACC,oBAACC,OAAIC,UAAU,2BAA2BF,mBAKpD,CAAE"}
|
package/core/Meganav/data.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React from"react";import{MeganavPanel}from"./MeganavPanel";import Status,{StatusUrl}from"../Status";import FanEngagementNavImage from"./images/fan-engagement-nav-image.png";import CompanyNavImage from"./images/founders-nav-image.png";import BestRequirementsWinter2025 from"../images/g2-best-meets-requirements-2025.svg";import BestSupportWinter2025 from"../images/g2-best-support-2025.svg";import HighPerformerWinter2025 from"../images/g2-high-performer-2025.svg";const panelClassName="w-full sm:w-[815px]";const panelLeftFeatureClassName="bg-neutral-100 dark:bg-neutral-1200 hidden md:grid border border-neutral-300 dark:border-neutral-1000 hover:border-neutral-
|
|
1
|
+
import React from"react";import{MeganavPanel}from"./MeganavPanel";import Status,{StatusUrl}from"../Status";import FanEngagementNavImage from"./images/fan-engagement-nav-image.png";import CompanyNavImage from"./images/founders-nav-image.png";import BestRequirementsWinter2025 from"../images/g2-best-meets-requirements-2025.svg";import BestSupportWinter2025 from"../images/g2-best-support-2025.svg";import HighPerformerWinter2025 from"../images/g2-high-performer-2025.svg";import UsersMostLikelyToRecommend from"../images/g2-users-most-likely-to-recommend-2025.svg";const panelClassName="w-full sm:w-[815px]";const panelLeftFeatureClassName="bg-neutral-100 dark:bg-neutral-1200 hidden md:grid border border-neutral-300 dark:border-neutral-1000 hover:border-neutral-400 dark:hover:border-neutral-800 rounded-lg cursor-pointer group/meganav-panel";const productsMenu=[{label:"Infrastructure",icon:"icon-gui-globe-alt-outline",link:"/infrastructure"},{label:"Integrations",icon:"icon-gui-puzzle-piece-outline",link:"/integrations"},{label:"SDKs",icon:"icon-gui-cube-transparent-outline",link:"/docs/sdks"},{label:"Security & Compliance",icon:"icon-gui-shield-check-outline",link:"/security-and-compliance"}];const solutionsHighlight={heading:"Fan Engagement",content:"Capture the attention of millions of fans during live events.",labelLink:"Learn more",url:"/fan-engagement",image:FanEngagementNavImage};const solutionsMenu=[{label:"Fan Engagement",icon:"icon-gui-hand-thumb-up-outline",link:"/fan-engagement",isMobile:true},{label:"BizTech",icon:"icon-gui-building-office-outline",link:"/solutions/ecommerce-and-retail"},{label:"FinTech",icon:"icon-gui-currency-dollar-outline",link:"/solutions/fintech"},{label:"HealthTech",icon:"icon-gui-heart-outline",link:"/solutions/healthcare"},{label:"EdTech",icon:"icon-gui-academic-cap-outline",link:"/solutions/edtech"}];const companyHighlight={heading:"Leading the realtime revolution",content:"Hear from our founders about Ably’s ambitious plans to become the world’s definitive realtime platform.",labelLink:"About Ably",url:"/about",image:CompanyNavImage};const companyMenu=[{label:"About Ably",icon:"icon-gui-ably-badge",link:"/about",isMobile:true},{label:"Customer stories",icon:"icon-gui-star-outline",link:"/case-studies"},{label:"Careers",icon:"icon-gui-briefcase-outline",link:"/careers"},{label:"Blog",icon:"icon-gui-light-bulb-outline",link:"/blog"}];export const ablyAwards=[{image:BestRequirementsWinter2025,desc:"G2 Best Requirements Winter 2025"},{image:BestSupportWinter2025,desc:"G2 Best Support Winter 2025"},{image:HighPerformerWinter2025,desc:"G2 High Performer Winter 2025"},{image:UsersMostLikelyToRecommend,desc:"G2 Users Most Likely to Recommend Winter 2025"}];export const menuItemLinks=[{name:"Pricing",link:"/pricing",isHiddenMobile:true},{name:"Docs",link:"/docs",isHiddenMobile:true}];export const menuItemsForHeader=[{name:"Products",content:React.createElement(MeganavPanel,{displayProductTile:true,panelLeftClassName:"grid",panelRightItems:productsMenu,panelRightHeading:"platform",panelRightBottom:React.createElement(Status,{statusUrl:StatusUrl,showDescription:true})}),panelClassName},{name:"Solutions",content:React.createElement(MeganavPanel,{panelLeft:solutionsHighlight,panelLeftClassName:panelLeftFeatureClassName,panelRightItems:solutionsMenu}),panelClassName},{name:"Company",content:React.createElement(MeganavPanel,{panelLeft:companyHighlight,panelLeftClassName:panelLeftFeatureClassName,panelRightItems:companyMenu,panelRightBottom:React.createElement("div",{className:"flex-1 gap-x-8 hidden md:flex"},ablyAwards.slice(0,3).map(award=>React.createElement("img",{key:award.desc,src:award.image,alt:award.desc,width:"57",height:"64"})))}),panelClassName},...menuItemLinks];
|
|
2
2
|
//# sourceMappingURL=data.js.map
|
package/core/Meganav/data.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/Meganav/data.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconName } from \"../Icon/types\";\nimport { MeganavPanel } from \"./MeganavPanel\";\nimport Status, { StatusUrl } from \"../Status\";\nimport FanEngagementNavImage from \"./images/fan-engagement-nav-image.png\";\nimport CompanyNavImage from \"./images/founders-nav-image.png\";\nimport BestRequirementsWinter2025 from \"../images/g2-best-meets-requirements-2025.svg\";\nimport BestSupportWinter2025 from \"../images/g2-best-support-2025.svg\";\nimport HighPerformerWinter2025 from \"../images/g2-high-performer-2025.svg\";\n\nexport type FlyoutPanelList = {\n label: string;\n icon: IconName;\n link: string;\n isMobile?: boolean;\n};\n\nexport type FlyoutPanelHighlight = {\n heading: string;\n content: string;\n labelLink: string;\n url: string;\n image: string;\n};\n\nexport type MenuItem = {\n name: string;\n link?: string;\n isHiddenMobile?: boolean;\n content?: React.ReactNode;\n panelClassName?: string;\n};\n\nconst panelClassName = \"w-full sm:w-[815px]\";\n\nconst panelLeftFeatureClassName =\n \"bg-neutral-100 dark:bg-neutral-1200 hidden md:grid border border-neutral-300 dark:border-neutral-1000 hover:border-neutral-
|
|
1
|
+
{"version":3,"sources":["../../../src/core/Meganav/data.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconName } from \"../Icon/types\";\nimport { MeganavPanel } from \"./MeganavPanel\";\nimport Status, { StatusUrl } from \"../Status\";\nimport FanEngagementNavImage from \"./images/fan-engagement-nav-image.png\";\nimport CompanyNavImage from \"./images/founders-nav-image.png\";\nimport BestRequirementsWinter2025 from \"../images/g2-best-meets-requirements-2025.svg\";\nimport BestSupportWinter2025 from \"../images/g2-best-support-2025.svg\";\nimport HighPerformerWinter2025 from \"../images/g2-high-performer-2025.svg\";\nimport UsersMostLikelyToRecommend from \"../images/g2-users-most-likely-to-recommend-2025.svg\";\n\nexport type FlyoutPanelList = {\n label: string;\n icon: IconName;\n link: string;\n isMobile?: boolean;\n};\n\nexport type FlyoutPanelHighlight = {\n heading: string;\n content: string;\n labelLink: string;\n url: string;\n image: string;\n};\n\nexport type MenuItem = {\n name: string;\n link?: string;\n isHiddenMobile?: boolean;\n content?: React.ReactNode;\n panelClassName?: string;\n};\n\nconst panelClassName = \"w-full sm:w-[815px]\";\n\nconst panelLeftFeatureClassName =\n \"bg-neutral-100 dark:bg-neutral-1200 hidden md:grid border border-neutral-300 dark:border-neutral-1000 hover:border-neutral-400 dark:hover:border-neutral-800 rounded-lg cursor-pointer group/meganav-panel\";\n\nconst productsMenu: FlyoutPanelList[] = [\n {\n label: \"Infrastructure\",\n icon: \"icon-gui-globe-alt-outline\",\n link: \"/infrastructure\",\n },\n {\n label: \"Integrations\",\n icon: \"icon-gui-puzzle-piece-outline\",\n link: \"/integrations\",\n },\n {\n label: \"SDKs\",\n icon: \"icon-gui-cube-transparent-outline\",\n link: \"/docs/sdks\",\n },\n {\n label: \"Security & Compliance\",\n icon: \"icon-gui-shield-check-outline\",\n link: \"/security-and-compliance\",\n },\n];\n\nconst solutionsHighlight: FlyoutPanelHighlight = {\n heading: \"Fan Engagement\",\n content: \"Capture the attention of millions of fans during live events.\",\n labelLink: \"Learn more\",\n url: \"/fan-engagement\",\n image: FanEngagementNavImage,\n};\n\nconst solutionsMenu: FlyoutPanelList[] = [\n {\n label: \"Fan Engagement\",\n icon: \"icon-gui-hand-thumb-up-outline\",\n link: \"/fan-engagement\",\n isMobile: true,\n },\n {\n label: \"BizTech\",\n icon: \"icon-gui-building-office-outline\",\n link: \"/solutions/ecommerce-and-retail\",\n },\n {\n label: \"FinTech\",\n icon: \"icon-gui-currency-dollar-outline\",\n link: \"/solutions/fintech\",\n },\n {\n label: \"HealthTech\",\n icon: \"icon-gui-heart-outline\",\n link: \"/solutions/healthcare\",\n },\n {\n label: \"EdTech\",\n icon: \"icon-gui-academic-cap-outline\",\n link: \"/solutions/edtech\",\n },\n];\n\nconst companyHighlight: FlyoutPanelHighlight = {\n heading: \"Leading the realtime revolution\",\n content:\n \"Hear from our founders about Ably’s ambitious plans to become the world’s definitive realtime platform.\",\n labelLink: \"About Ably\",\n url: \"/about\",\n image: CompanyNavImage,\n};\n\nconst companyMenu: FlyoutPanelList[] = [\n {\n label: \"About Ably\",\n icon: \"icon-gui-ably-badge\",\n link: \"/about\",\n isMobile: true,\n },\n {\n label: \"Customer stories\",\n icon: \"icon-gui-star-outline\",\n link: \"/case-studies\",\n },\n {\n label: \"Careers\",\n icon: \"icon-gui-briefcase-outline\",\n link: \"/careers\",\n },\n {\n label: \"Blog\",\n icon: \"icon-gui-light-bulb-outline\",\n link: \"/blog\",\n },\n];\n\nexport const ablyAwards = [\n {\n image: BestRequirementsWinter2025,\n desc: \"G2 Best Requirements Winter 2025\",\n },\n {\n image: BestSupportWinter2025,\n desc: \"G2 Best Support Winter 2025\",\n },\n {\n image: HighPerformerWinter2025,\n desc: \"G2 High Performer Winter 2025\",\n },\n {\n image: UsersMostLikelyToRecommend,\n desc: \"G2 Users Most Likely to Recommend Winter 2025\",\n },\n];\n\nexport const menuItemLinks = [\n { name: \"Pricing\", link: \"/pricing\", isHiddenMobile: true },\n { name: \"Docs\", link: \"/docs\", isHiddenMobile: true },\n];\n\nexport const menuItemsForHeader: MenuItem[] = [\n {\n name: \"Products\",\n content: (\n <MeganavPanel\n displayProductTile={true}\n panelLeftClassName=\"grid\"\n panelRightItems={productsMenu}\n panelRightHeading=\"platform\"\n panelRightBottom={<Status statusUrl={StatusUrl} showDescription />}\n />\n ),\n panelClassName,\n },\n {\n name: \"Solutions\",\n content: (\n <MeganavPanel\n panelLeft={solutionsHighlight}\n panelLeftClassName={panelLeftFeatureClassName}\n panelRightItems={solutionsMenu}\n />\n ),\n panelClassName,\n },\n {\n name: \"Company\",\n content: (\n <MeganavPanel\n panelLeft={companyHighlight}\n panelLeftClassName={panelLeftFeatureClassName}\n panelRightItems={companyMenu}\n panelRightBottom={\n <div className=\"flex-1 gap-x-8 hidden md:flex\">\n {ablyAwards.slice(0, 3).map((award) => (\n <img\n key={award.desc}\n src={award.image}\n alt={award.desc}\n width=\"57\"\n height=\"64\"\n />\n ))}\n </div>\n }\n />\n ),\n panelClassName,\n },\n ...menuItemLinks,\n];\n"],"names":["React","MeganavPanel","Status","StatusUrl","FanEngagementNavImage","CompanyNavImage","BestRequirementsWinter2025","BestSupportWinter2025","HighPerformerWinter2025","UsersMostLikelyToRecommend","panelClassName","panelLeftFeatureClassName","productsMenu","label","icon","link","solutionsHighlight","heading","content","labelLink","url","image","solutionsMenu","isMobile","companyHighlight","companyMenu","ablyAwards","desc","menuItemLinks","name","isHiddenMobile","menuItemsForHeader","displayProductTile","panelLeftClassName","panelRightItems","panelRightHeading","panelRightBottom","statusUrl","showDescription","panelLeft","div","className","slice","map","award","img","key","src","alt","width","height"],"mappings":"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"}
|
package/core/Meganav.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React,{useEffect,useMemo}from"react";import Header from"./Header";import Flyout from"./Flyout";import{menuItemsForHeader}from"./Meganav/data";import{MeganavMobile}from"./Meganav/MeganavMobile";import Notice from"./Notice";import{HEADER_HEIGHT}from"./utils/heights";const Meganav=({sessionState,notice,theme})=>{const[noticeHeight,setNoticeHeight]=React.useState(0);const mobileNavItems=useMemo(()=>menuItemsForHeader.filter(item=>!item.isHiddenMobile).map(({name,link,content})=>({name,link,content})),[]);useEffect(()=>{const observeNoticeResize=()=>{const noticeElement=document.querySelector('[data-id="ui-notice"]');if(noticeElement){setNoticeHeight(noticeElement.getBoundingClientRect().height)}};observeNoticeResize();window.addEventListener("resize",observeNoticeResize);return()=>window.removeEventListener("resize",observeNoticeResize)},[]);return React.createElement(React.Fragment,null,React.createElement("div",{className:"absolute inset-0 w-full z-50",id:theme==="dark"?"meganav-theme-dark":"meganav","data-testid":"meganav",style:{height:HEADER_HEIGHT+noticeHeight}},notice&&React.createElement(Notice,{...notice.props,config:notice.config}),React.createElement(Header,{className:"max-w-screen-xl mx-auto px-0 sm:px-32 md:px-40 lg:px-64",isNoticeVisible:!!notice,nav:React.createElement(Flyout,{menuItems:menuItemsForHeader,className:"justify-left z-40",flyOutClassName:"flex justify-left",viewPortClassName:"ui-shadow-lg-medium border border-neutral-000 dark:border-neutral-1300 rounded-2xl mt-8 bg-neutral-000 dark:bg-neutral-1300"
|
|
1
|
+
import React,{useEffect,useMemo}from"react";import Header from"./Header";import Flyout from"./Flyout";import{menuItemsForHeader}from"./Meganav/data";import{MeganavMobile}from"./Meganav/MeganavMobile";import Notice from"./Notice";import{HEADER_HEIGHT}from"./utils/heights";const Meganav=({sessionState,notice,theme})=>{const[noticeHeight,setNoticeHeight]=React.useState(0);const mobileNavItems=useMemo(()=>menuItemsForHeader.filter(item=>!item.isHiddenMobile).map(({name,link,content})=>({name,link,content})),[]);useEffect(()=>{const observeNoticeResize=()=>{const noticeElement=document.querySelector('[data-id="ui-notice"]');if(noticeElement){setNoticeHeight(noticeElement.getBoundingClientRect().height)}};observeNoticeResize();window.addEventListener("resize",observeNoticeResize);return()=>window.removeEventListener("resize",observeNoticeResize)},[]);return React.createElement(React.Fragment,null,React.createElement("div",{className:"absolute inset-0 w-full z-50",id:theme==="dark"?"meganav-theme-dark":"meganav","data-testid":"meganav",style:{height:HEADER_HEIGHT+noticeHeight}},notice&&React.createElement(Notice,{...notice.props,config:notice.config}),React.createElement(Header,{className:"max-w-screen-xl mx-auto px-0 sm:px-32 md:px-40 lg:px-64",isNoticeVisible:!!notice,nav:React.createElement(Flyout,{menuItems:menuItemsForHeader,className:"justify-left z-40",flyOutClassName:"flex justify-left",viewPortClassName:"ui-shadow-lg-medium border border-neutral-000 dark:border-neutral-1300 rounded-2xl mt-8 bg-neutral-000 dark:bg-neutral-1300"}),mobileNav:React.createElement(MeganavMobile,{navItems:mobileNavItems}),headerLinks:[{href:"/contact",label:"Contact us"}],headerLinksClassName:"md:gap-x-24 ",sessionState:sessionState,isThemedScrollpoint:true,themedScrollpoints:[{id:"meganav",className:"ui-theme-light !bg-transparent !border-none"},{id:"meganav-theme-dark",className:"ui-theme-dark !bg-transparent !border-none"},{id:"main",className:"ui-theme-light bg-neutral-000 dark:bg-neutral-1300 border-b"},{id:"main-theme-dark",className:"ui-theme-dark bg-neutral-000 dark:bg-neutral-1300 border-b"}]})))};export default Meganav;
|
|
2
2
|
//# sourceMappingURL=Meganav.js.map
|
package/core/Meganav.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/Meganav.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport Header, { HeaderSessionState } from \"./Header\";\nimport Flyout from \"./Flyout\";\nimport { menuItemsForHeader } from \"./Meganav/data\";\nimport { MeganavMobile } from \"./Meganav/MeganavMobile\";\nimport Notice from \"./Notice\";\nimport { HEADER_HEIGHT } from \"./utils/heights\";\n\nexport type MeganavNoticeBannerProps = {\n props: {\n title: string;\n bodyText: string;\n buttonLink: string;\n buttonLabel: string;\n closeBtn: boolean;\n };\n config: {\n cookieId: string;\n noticeId: string | number;\n options: {\n collapse: boolean;\n };\n };\n};\n\nexport type MeganavProps = {\n sessionState: HeaderSessionState;\n notice?: MeganavNoticeBannerProps;\n theme?: string;\n};\n\nconst Meganav = ({ sessionState, notice, theme }: MeganavProps) => {\n const [noticeHeight, setNoticeHeight] = React.useState(0);\n const mobileNavItems = useMemo(\n () =>\n menuItemsForHeader\n .filter((item) => !item.isHiddenMobile)\n .map(({ name, link, content }) => ({ name, link, content })),\n [],\n );\n\n useEffect(() => {\n const observeNoticeResize = () => {\n const noticeElement = document.querySelector('[data-id=\"ui-notice\"]');\n if (noticeElement) {\n setNoticeHeight(noticeElement.getBoundingClientRect().height);\n }\n };\n observeNoticeResize();\n window.addEventListener(\"resize\", observeNoticeResize);\n return () => window.removeEventListener(\"resize\", observeNoticeResize);\n }, []);\n\n return (\n <>\n <div\n className=\"absolute inset-0 w-full z-50\"\n id={theme === \"dark\" ? \"meganav-theme-dark\" : \"meganav\"}\n data-testid=\"meganav\"\n style={{ height: HEADER_HEIGHT + noticeHeight }}\n >\n {notice && <Notice {...notice.props} config={notice.config} />}\n <Header\n className=\"max-w-screen-xl mx-auto px-0 sm:px-32 md:px-40 lg:px-64\"\n isNoticeVisible={!!notice}\n nav={\n <Flyout\n menuItems={menuItemsForHeader}\n className=\"justify-left z-40\"\n flyOutClassName=\"flex justify-left\"\n viewPortClassName=\"ui-shadow-lg-medium border border-neutral-000 dark:border-neutral-1300 rounded-2xl mt-8 bg-neutral-000 dark:bg-neutral-1300\"\n
|
|
1
|
+
{"version":3,"sources":["../../src/core/Meganav.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport Header, { HeaderSessionState } from \"./Header\";\nimport Flyout from \"./Flyout\";\nimport { menuItemsForHeader } from \"./Meganav/data\";\nimport { MeganavMobile } from \"./Meganav/MeganavMobile\";\nimport Notice from \"./Notice\";\nimport { HEADER_HEIGHT } from \"./utils/heights\";\n\nexport type MeganavNoticeBannerProps = {\n props: {\n title: string;\n bodyText: string;\n buttonLink: string;\n buttonLabel: string;\n closeBtn: boolean;\n };\n config: {\n cookieId: string;\n noticeId: string | number;\n options: {\n collapse: boolean;\n };\n };\n};\n\nexport type MeganavProps = {\n sessionState: HeaderSessionState;\n notice?: MeganavNoticeBannerProps;\n theme?: string;\n};\n\nconst Meganav = ({ sessionState, notice, theme }: MeganavProps) => {\n const [noticeHeight, setNoticeHeight] = React.useState(0);\n const mobileNavItems = useMemo(\n () =>\n menuItemsForHeader\n .filter((item) => !item.isHiddenMobile)\n .map(({ name, link, content }) => ({ name, link, content })),\n [],\n );\n\n useEffect(() => {\n const observeNoticeResize = () => {\n const noticeElement = document.querySelector('[data-id=\"ui-notice\"]');\n if (noticeElement) {\n setNoticeHeight(noticeElement.getBoundingClientRect().height);\n }\n };\n observeNoticeResize();\n window.addEventListener(\"resize\", observeNoticeResize);\n return () => window.removeEventListener(\"resize\", observeNoticeResize);\n }, []);\n\n return (\n <>\n <div\n className=\"absolute inset-0 w-full z-50\"\n id={theme === \"dark\" ? \"meganav-theme-dark\" : \"meganav\"}\n data-testid=\"meganav\"\n style={{ height: HEADER_HEIGHT + noticeHeight }}\n >\n {notice && <Notice {...notice.props} config={notice.config} />}\n <Header\n className=\"max-w-screen-xl mx-auto px-0 sm:px-32 md:px-40 lg:px-64\"\n isNoticeVisible={!!notice}\n nav={\n <Flyout\n menuItems={menuItemsForHeader}\n className=\"justify-left z-40\"\n flyOutClassName=\"flex justify-left\"\n viewPortClassName=\"ui-shadow-lg-medium border border-neutral-000 dark:border-neutral-1300 rounded-2xl mt-8 bg-neutral-000 dark:bg-neutral-1300\"\n />\n }\n mobileNav={<MeganavMobile navItems={mobileNavItems} />}\n headerLinks={[{ href: \"/contact\", label: \"Contact us\" }]}\n headerLinksClassName=\"md:gap-x-24 \"\n sessionState={sessionState}\n isThemedScrollpoint={true}\n themedScrollpoints={[\n {\n id: \"meganav\",\n className: \"ui-theme-light !bg-transparent !border-none\",\n },\n {\n id: \"meganav-theme-dark\",\n className: \"ui-theme-dark !bg-transparent !border-none\",\n },\n {\n id: \"main\",\n className:\n \"ui-theme-light bg-neutral-000 dark:bg-neutral-1300 border-b\",\n },\n {\n id: \"main-theme-dark\",\n className:\n \"ui-theme-dark bg-neutral-000 dark:bg-neutral-1300 border-b\",\n },\n ]}\n />\n </div>\n </>\n );\n};\n\nexport default Meganav;\n"],"names":["React","useEffect","useMemo","Header","Flyout","menuItemsForHeader","MeganavMobile","Notice","HEADER_HEIGHT","Meganav","sessionState","notice","theme","noticeHeight","setNoticeHeight","useState","mobileNavItems","filter","item","isHiddenMobile","map","name","link","content","observeNoticeResize","noticeElement","document","querySelector","getBoundingClientRect","height","window","addEventListener","removeEventListener","div","className","id","data-testid","style","props","config","isNoticeVisible","nav","menuItems","flyOutClassName","viewPortClassName","mobileNav","navItems","headerLinks","href","label","headerLinksClassName","isThemedScrollpoint","themedScrollpoints"],"mappings":"AAAA,OAAOA,OAASC,SAAS,CAAEC,OAAO,KAAQ,OAAQ,AAClD,QAAOC,WAAoC,UAAW,AACtD,QAAOC,WAAY,UAAW,AAC9B,QAASC,kBAAkB,KAAQ,gBAAiB,AACpD,QAASC,aAAa,KAAQ,yBAA0B,AACxD,QAAOC,WAAY,UAAW,AAC9B,QAASC,aAAa,KAAQ,iBAAkB,CAyBhD,MAAMC,QAAU,CAAC,CAAEC,YAAY,CAAEC,MAAM,CAAEC,KAAK,CAAgB,IAC5D,KAAM,CAACC,aAAcC,gBAAgB,CAAGd,MAAMe,QAAQ,CAAC,GACvD,MAAMC,eAAiBd,QACrB,IACEG,mBACGY,MAAM,CAAC,AAACC,MAAS,CAACA,KAAKC,cAAc,EACrCC,GAAG,CAAC,CAAC,CAAEC,IAAI,CAAEC,IAAI,CAAEC,OAAO,CAAE,GAAM,CAAA,CAAEF,KAAMC,KAAMC,OAAQ,CAAA,GAC7D,EAAE,EAGJtB,UAAU,KACR,MAAMuB,oBAAsB,KAC1B,MAAMC,cAAgBC,SAASC,aAAa,CAAC,yBAC7C,GAAIF,cAAe,CACjBX,gBAAgBW,cAAcG,qBAAqB,GAAGC,MAAM,CAC9D,CACF,EACAL,sBACAM,OAAOC,gBAAgB,CAAC,SAAUP,qBAClC,MAAO,IAAMM,OAAOE,mBAAmB,CAAC,SAAUR,oBACpD,EAAG,EAAE,EAEL,OACE,wCACE,oBAACS,OACCC,UAAU,+BACVC,GAAIvB,QAAU,OAAS,qBAAuB,UAC9CwB,cAAY,UACZC,MAAO,CAAER,OAAQrB,cAAgBK,YAAa,GAE7CF,QAAU,oBAACJ,QAAQ,GAAGI,OAAO2B,KAAK,CAAEC,OAAQ5B,OAAO4B,MAAM,GAC1D,oBAACpC,QACC+B,UAAU,0DACVM,gBAAiB,CAAC,CAAC7B,OACnB8B,IACE,oBAACrC,QACCsC,UAAWrC,mBACX6B,UAAU,oBACVS,gBAAgB,oBAChBC,kBAAkB,gIAGtBC,UAAW,oBAACvC,eAAcwC,SAAU9B,iBACpC+B,YAAa,CAAC,CAAEC,KAAM,WAAYC,MAAO,YAAa,EAAE,CACxDC,qBAAqB,eACrBxC,aAAcA,aACdyC,oBAAqB,KACrBC,mBAAoB,CAClB,CACEjB,GAAI,UACJD,UAAW,6CACb,EACA,CACEC,GAAI,qBACJD,UAAW,4CACb,EACA,CACEC,GAAI,OACJD,UACE,6DACJ,EACA,CACEC,GAAI,kBACJD,UACE,4DACJ,EACD,IAKX,CAEA,gBAAezB,OAAQ"}
|
package/core/ProductTile/data.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export const products={pubsub:{label:"Pub/Sub",description:"Low-level APIs to build any realtime experience",icon:"icon-product-pubsub-mono",hoverIcon:"icon-product-pubsub",link:"/docs/products/channels"},chat:{label:"Chat",description:"Rapidly build chat features and roll-out at scale",icon:"icon-product-chat-mono",hoverIcon:"icon-product-chat",link:"/docs/products/chat"},spaces:{label:"Spaces",description:"Create collaborative environments in a few lines of code",icon:"icon-product-spaces-mono",hoverIcon:"icon-product-spaces",link:"/docs/products/spaces"},liveSync:{label:"LiveSync",description:"Sync database changes with frontend clients",icon:"icon-product-livesync-mono",hoverIcon:"icon-product-livesync",link:"/docs/products/livesync"},assetTracking:{label:"Asset Tracking",description:"Simple APIs to build realtime tracking applications",icon:"icon-product-asset-tracking-mono",hoverIcon:"icon-product-asset-tracking",link:"/docs/products/asset-tracking"},liveObjects:{label:"LiveObjects",description:"Sync application state across multiple devices",icon:"icon-product-liveobjects-mono",hoverIcon:"icon-product-liveobjects",link:"/docs/products/asset-tracking",unavailable:true}};
|
|
1
|
+
export const productNames=["pubsub","chat","spaces","liveSync","assetTracking","liveObjects"];export const products={pubsub:{label:"Pub/Sub",description:"Low-level APIs to build any realtime experience",icon:"icon-product-pubsub-mono",hoverIcon:"icon-product-pubsub",link:"/docs/products/channels"},chat:{label:"Chat",description:"Rapidly build chat features and roll-out at scale",icon:"icon-product-chat-mono",hoverIcon:"icon-product-chat",link:"/docs/products/chat"},spaces:{label:"Spaces",description:"Create collaborative environments in a few lines of code",icon:"icon-product-spaces-mono",hoverIcon:"icon-product-spaces",link:"/docs/products/spaces"},liveSync:{label:"LiveSync",description:"Sync database changes with frontend clients",icon:"icon-product-livesync-mono",hoverIcon:"icon-product-livesync",link:"/docs/products/livesync"},assetTracking:{label:"Asset Tracking",description:"Simple APIs to build realtime tracking applications",icon:"icon-product-asset-tracking-mono",hoverIcon:"icon-product-asset-tracking",link:"/docs/products/asset-tracking"},liveObjects:{label:"LiveObjects",description:"Sync application state across multiple devices",icon:"icon-product-liveobjects-mono",hoverIcon:"icon-product-liveobjects",link:"/docs/products/asset-tracking",unavailable:true}};
|
|
2
2
|
//# sourceMappingURL=data.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/ProductTile/data.ts"],"sourcesContent":["import { IconName } from \"../Icon/types\";\n\nexport
|
|
1
|
+
{"version":3,"sources":["../../../src/core/ProductTile/data.ts"],"sourcesContent":["import { IconName } from \"../Icon/types\";\n\nexport const productNames = [\n \"pubsub\",\n \"chat\",\n \"spaces\",\n \"liveSync\",\n \"assetTracking\",\n \"liveObjects\",\n] as const;\n\nexport type ProductName = (typeof productNames)[number];\n\ntype Products = Record<\n ProductName,\n {\n label: string;\n description: string;\n link?: string;\n icon?: IconName;\n hoverIcon?: IconName;\n unavailable?: boolean;\n }\n>;\n\nexport const products: Products = {\n pubsub: {\n label: \"Pub/Sub\",\n description: \"Low-level APIs to build any realtime experience\",\n icon: \"icon-product-pubsub-mono\",\n hoverIcon: \"icon-product-pubsub\",\n link: \"/docs/products/channels\",\n },\n chat: {\n label: \"Chat\",\n description: \"Rapidly build chat features and roll-out at scale\",\n icon: \"icon-product-chat-mono\",\n hoverIcon: \"icon-product-chat\",\n link: \"/docs/products/chat\",\n },\n spaces: {\n label: \"Spaces\",\n description: \"Create collaborative environments in a few lines of code\",\n icon: \"icon-product-spaces-mono\",\n hoverIcon: \"icon-product-spaces\",\n link: \"/docs/products/spaces\",\n },\n liveSync: {\n label: \"LiveSync\",\n description: \"Sync database changes with frontend clients\",\n icon: \"icon-product-livesync-mono\",\n hoverIcon: \"icon-product-livesync\",\n link: \"/docs/products/livesync\",\n },\n assetTracking: {\n label: \"Asset Tracking\",\n description: \"Simple APIs to build realtime tracking applications\",\n icon: \"icon-product-asset-tracking-mono\",\n hoverIcon: \"icon-product-asset-tracking\",\n link: \"/docs/products/asset-tracking\",\n },\n liveObjects: {\n label: \"LiveObjects\",\n description: \"Sync application state across multiple devices\",\n icon: \"icon-product-liveobjects-mono\",\n hoverIcon: \"icon-product-liveobjects\",\n link: \"/docs/products/asset-tracking\",\n unavailable: true,\n },\n};\n"],"names":["productNames","products","pubsub","label","description","icon","hoverIcon","link","chat","spaces","liveSync","assetTracking","liveObjects","unavailable"],"mappings":"AAEA,OAAO,MAAMA,aAAe,CAC1B,SACA,OACA,SACA,WACA,gBACA,cACD,AAAU,AAgBX,QAAO,MAAMC,SAAqB,CAChCC,OAAQ,CACNC,MAAO,UACPC,YAAa,kDACbC,KAAM,2BACNC,UAAW,sBACXC,KAAM,yBACR,EACAC,KAAM,CACJL,MAAO,OACPC,YAAa,oDACbC,KAAM,yBACNC,UAAW,oBACXC,KAAM,qBACR,EACAE,OAAQ,CACNN,MAAO,SACPC,YAAa,2DACbC,KAAM,2BACNC,UAAW,sBACXC,KAAM,uBACR,EACAG,SAAU,CACRP,MAAO,WACPC,YAAa,8CACbC,KAAM,6BACNC,UAAW,wBACXC,KAAM,yBACR,EACAI,cAAe,CACbR,MAAO,iBACPC,YAAa,sDACbC,KAAM,mCACNC,UAAW,8BACXC,KAAM,+BACR,EACAK,YAAa,CACXT,MAAO,cACPC,YAAa,iDACbC,KAAM,gCACNC,UAAW,2BACXC,KAAM,gCACNM,YAAa,IACf,CACF,CAAE"}
|
package/core/utils/heights.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export const HEADER_HEIGHT=64;export const HEADER_BOTTOM_MARGIN=24;export const componentMaxHeight=(...heights)=>{const totalHeight=heights.reduce((sum,height)=>sum+height,0)+"px";return`calc(100vh - ${totalHeight})`};
|
|
1
|
+
export const HEADER_HEIGHT=64;export const HEADER_BOTTOM_MARGIN=24;export const componentMaxHeight=(...heights)=>{const totalHeight=heights.reduce((sum,height)=>sum+height,0)+"px";return`calc(min(100dvh, 100vh) - ${totalHeight})`};
|
|
2
2
|
//# sourceMappingURL=heights.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/utils/heights.ts"],"sourcesContent":["/*\n Since we perform CSS calc operations involving various UI element heights, we need to centralise\n these values to prevent magic numbers popping up with no obvious reasoning. When making alterations\n to Layout components, here or in downstream repos, consider these values and update where necessary.\n*/\nexport const HEADER_HEIGHT = 64;\nexport const HEADER_BOTTOM_MARGIN = 24;\n\n/**\n * Calculates the maximum height for a component by subtracting the total of given heights from
|
|
1
|
+
{"version":3,"sources":["../../../src/core/utils/heights.ts"],"sourcesContent":["/*\n Since we perform CSS calc operations involving various UI element heights, we need to centralise\n these values to prevent magic numbers popping up with no obvious reasoning. When making alterations\n to Layout components, here or in downstream repos, consider these values and update where necessary.\n*/\nexport const HEADER_HEIGHT = 64;\nexport const HEADER_BOTTOM_MARGIN = 24;\n\n/**\n * Calculates the maximum height for a component by subtracting the total of given heights from 100dvh.\n *\n * @param {...number} heights - An array of heights in pixels.\n * @returns {string} The CSS calc expression for the maximum height.\n */\nexport const componentMaxHeight = (...heights: number[]): string => {\n const totalHeight = heights.reduce((sum, height) => sum + height, 0) + \"px\";\n return `calc(min(100dvh, 100vh) - ${totalHeight})`;\n};\n"],"names":["HEADER_HEIGHT","HEADER_BOTTOM_MARGIN","componentMaxHeight","heights","totalHeight","reduce","sum","height"],"mappings":"AAKA,OAAO,MAAMA,cAAgB,EAAG,AAChC,QAAO,MAAMC,qBAAuB,EAAG,AAQvC,QAAO,MAAMC,mBAAqB,CAAC,GAAGC,WACpC,MAAMC,YAAcD,QAAQE,MAAM,CAAC,CAACC,IAAKC,SAAWD,IAAMC,OAAQ,GAAK,KACvE,MAAO,CAAC,0BAA0B,EAAEH,YAAY,CAAC,CAAC,AACpD,CAAE"}
|
package/index.d.ts
CHANGED
|
@@ -25,6 +25,12 @@ export type AccordionData = {
|
|
|
25
25
|
* @param index - The index of the clicked accordion item.
|
|
26
26
|
*/
|
|
27
27
|
onClick?: (index: number) => void;
|
|
28
|
+
/**
|
|
29
|
+
* Indicates whether the accordion item is interactive.
|
|
30
|
+
* When false, the item cannot be expanded or collapsed by user interaction.
|
|
31
|
+
* @default true
|
|
32
|
+
*/
|
|
33
|
+
interactive?: boolean;
|
|
28
34
|
};
|
|
29
35
|
export type AccordionIcons = {
|
|
30
36
|
closed: {
|
|
@@ -415,11 +421,11 @@ type FeaturedLinkProps = {
|
|
|
415
421
|
onClick?: () => void;
|
|
416
422
|
disabled?: boolean;
|
|
417
423
|
/**
|
|
418
|
-
* Optional class name for
|
|
424
|
+
* Optional class name for the icon.
|
|
419
425
|
*/
|
|
420
|
-
|
|
426
|
+
iconClassName?: string;
|
|
421
427
|
};
|
|
422
|
-
const FeaturedLink: ({ url, textSize, iconColor, flush, reverse, additionalCSS, newWindow, onClick, children, disabled,
|
|
428
|
+
const FeaturedLink: ({ url, textSize, iconColor, flush, reverse, additionalCSS, newWindow, onClick, children, disabled, iconClassName, }: FeaturedLinkProps) => import("react/jsx-runtime").JSX.Element;
|
|
423
429
|
export default FeaturedLink;
|
|
424
430
|
//# sourceMappingURL=FeaturedLink.d.ts.map
|
|
425
431
|
}
|
|
@@ -502,12 +508,8 @@ type FlyoutProps = {
|
|
|
502
508
|
* Optional class name for the viewport.
|
|
503
509
|
*/
|
|
504
510
|
viewPortClassName?: string;
|
|
505
|
-
/**
|
|
506
|
-
* Flag to indicate if animation should be applied.
|
|
507
|
-
*/
|
|
508
|
-
hasAnimation: boolean;
|
|
509
511
|
};
|
|
510
|
-
const Flyout: ({ menuItems, className, flyOutClassName, menuLinkClassName, viewPortClassName,
|
|
512
|
+
const Flyout: ({ menuItems, className, flyOutClassName, menuLinkClassName, viewPortClassName, }: FlyoutProps) => import("react/jsx-runtime").JSX.Element;
|
|
511
513
|
export default Flyout;
|
|
512
514
|
//# sourceMappingURL=Flyout.d.ts.map
|
|
513
515
|
}
|
|
@@ -533,10 +535,6 @@ export const socialLinks: {
|
|
|
533
535
|
monoIcon: IconName;
|
|
534
536
|
link: string;
|
|
535
537
|
}[];
|
|
536
|
-
export const ablyAwards: {
|
|
537
|
-
image: string;
|
|
538
|
-
desc: string;
|
|
539
|
-
}[];
|
|
540
538
|
export {};
|
|
541
539
|
//# sourceMappingURL=data.d.ts.map
|
|
542
540
|
}
|
|
@@ -556,7 +554,6 @@ export const HeaderLinks: React.FC<Pick<HeaderProps, "sessionState" | "headerLin
|
|
|
556
554
|
|
|
557
555
|
declare module '@ably/ui/core/Header' {
|
|
558
556
|
import React, { ReactNode } from "react";
|
|
559
|
-
import "@ably/ui/core/Header/Header.css";
|
|
560
557
|
export type ThemedScrollpoint = {
|
|
561
558
|
id: string;
|
|
562
559
|
className: string;
|
|
@@ -598,7 +595,7 @@ export type HeaderProps = {
|
|
|
598
595
|
/**
|
|
599
596
|
* Indicates if the notice banner is visible.
|
|
600
597
|
*/
|
|
601
|
-
isNoticeVisible
|
|
598
|
+
isNoticeVisible?: boolean;
|
|
602
599
|
/**
|
|
603
600
|
* Optional search bar element.
|
|
604
601
|
*/
|
|
@@ -628,6 +625,10 @@ export type HeaderProps = {
|
|
|
628
625
|
*/
|
|
629
626
|
external?: boolean;
|
|
630
627
|
}[];
|
|
628
|
+
/**
|
|
629
|
+
* Optional classname for styling the header links container.
|
|
630
|
+
*/
|
|
631
|
+
headerLinksClassName?: string;
|
|
631
632
|
/**
|
|
632
633
|
* Optional desktop navigation element.
|
|
633
634
|
*/
|
|
@@ -640,6 +641,10 @@ export type HeaderProps = {
|
|
|
640
641
|
* State of the user session.
|
|
641
642
|
*/
|
|
642
643
|
sessionState?: HeaderSessionState;
|
|
644
|
+
/**
|
|
645
|
+
* Indicates if the header should change its appearance based on the scrollpoint in view.
|
|
646
|
+
*/
|
|
647
|
+
isThemedScrollpoint?: boolean;
|
|
643
648
|
/**
|
|
644
649
|
* Array of themed scrollpoints. The header will change its appearance based on the scrollpoint in view.
|
|
645
650
|
*/
|
|
@@ -651,6 +656,10 @@ export type HeaderProps = {
|
|
|
651
656
|
* - "mobile": Visible only on mobile devices.
|
|
652
657
|
*/
|
|
653
658
|
searchButtonVisibility?: "all" | "desktop" | "mobile";
|
|
659
|
+
/**
|
|
660
|
+
* Optional location object to detect location changes.
|
|
661
|
+
*/
|
|
662
|
+
location?: Location;
|
|
654
663
|
};
|
|
655
664
|
const Header: React.FC<HeaderProps>;
|
|
656
665
|
export default Header;
|
|
@@ -1117,8 +1126,8 @@ export default _default;
|
|
|
1117
1126
|
|
|
1118
1127
|
declare module '@ably/ui/core/Meganav/MeganavMobile' {
|
|
1119
1128
|
import { AccordionData } from ".@ably/ui/core/Accordion/types";
|
|
1120
|
-
export const MeganavMobile: ({
|
|
1121
|
-
|
|
1129
|
+
export const MeganavMobile: ({ navItems }: {
|
|
1130
|
+
navItems: AccordionData[];
|
|
1122
1131
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
1123
1132
|
//# sourceMappingURL=MeganavMobile.d.ts.map
|
|
1124
1133
|
}
|
|
@@ -1160,6 +1169,10 @@ export type MenuItem = {
|
|
|
1160
1169
|
content?: React.ReactNode;
|
|
1161
1170
|
panelClassName?: string;
|
|
1162
1171
|
};
|
|
1172
|
+
export const ablyAwards: {
|
|
1173
|
+
image: string;
|
|
1174
|
+
desc: string;
|
|
1175
|
+
}[];
|
|
1163
1176
|
export const menuItemLinks: {
|
|
1164
1177
|
name: string;
|
|
1165
1178
|
link: string;
|
|
@@ -1344,7 +1357,8 @@ export default ProductLabel;
|
|
|
1344
1357
|
|
|
1345
1358
|
declare module '@ably/ui/core/ProductTile/data' {
|
|
1346
1359
|
import { IconName } from ".@ably/ui/core/Icon/types";
|
|
1347
|
-
export
|
|
1360
|
+
export const productNames: readonly ["pubsub", "chat", "spaces", "liveSync", "assetTracking", "liveObjects"];
|
|
1361
|
+
export type ProductName = (typeof productNames)[number];
|
|
1348
1362
|
type Products = Record<ProductName, {
|
|
1349
1363
|
label: string;
|
|
1350
1364
|
description: string;
|
|
@@ -1744,7 +1758,7 @@ declare module '@ably/ui/core/utils/heights' {
|
|
|
1744
1758
|
export const HEADER_HEIGHT = 64;
|
|
1745
1759
|
export const HEADER_BOTTOM_MARGIN = 24;
|
|
1746
1760
|
/**
|
|
1747
|
-
* Calculates the maximum height for a component by subtracting the total of given heights from
|
|
1761
|
+
* Calculates the maximum height for a component by subtracting the total of given heights from 100dvh.
|
|
1748
1762
|
*
|
|
1749
1763
|
* @param {...number} heights - An array of heights in pixels.
|
|
1750
1764
|
* @returns {string} The CSS calc expression for the maximum height.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ably/ui",
|
|
3
|
-
"version": "16.0.0-dev.
|
|
3
|
+
"version": "16.0.0-dev.d14f7e38",
|
|
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",
|
package/core/Header/Header.css
DELETED