@ably/ui 15.1.9-dev.072d2b86 → 15.1.9-dev.7f0b586a

package/core/Accordion.js

@@ -1 +1 @@
-import React,{useMemo,useState}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 /*#__PURE__*/React.createElement(AccordionItem,{value:rowKey,className:cn({[`${border}`]:border&&!options?.hideBorders})},/*#__PURE__*/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?/*#__PURE__*/React.createElement(Icon,{name:rowIcon,color:textClass,size:options?.rowIconSize??"32px"}):null,/*#__PURE__*/React.createElement("span",null,name),!selectable&&!isStaticTheme(theme)?/*#__PURE__*/React.createElement("span",{className:"flex-1 justify-end flex items-center"},/*#__PURE__*/React.createElement(Icon,{name:isOpen?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:options?.iconSize??"16px"})):null),/*#__PURE__*/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})},/*#__PURE__*/React.createElement("div",{className:"pb-16"},children)))};const Accordion=({data,theme="transparent",icons={closed:{name:"icon-gui-plus"},open:{name:"icon-gui-minus"}},options,...props})=>{const openIndexes=useMemo(()=>{const indexValues=data.map((_,i)=>`accordion-item-${i}`);return options?.fullyOpen?indexValues:indexValues.filter((_,index)=>options?.defaultOpenIndexes?.includes(index))},[JSON.stringify(options?.defaultOpenIndexes),options?.fullyOpen,data.length]);const[openRowValues,setOpenRowValues]=useState(openIndexes);const innerAccordion=data.map((item,index)=>/*#__PURE__*/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 /*#__PURE__*/React.createElement("div",props,options?.autoClose?/*#__PURE__*/React.createElement(RadixAccordion,{type:"single",collapsible:true,defaultValue:openIndexes[0],onValueChange:values=>setOpenRowValues(values)},innerAccordion):/*#__PURE__*/React.createElement(RadixAccordion,{type:"multiple",defaultValue:openIndexes,onValueChange:values=>setOpenRowValues(values)},innerAccordion))};export default Accordion;
+import React,{useMemo,useState}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 /*#__PURE__*/React.createElement(AccordionItem,{value:rowKey,className:cn({[`${border}`]:border&&!options?.hideBorders})},/*#__PURE__*/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?/*#__PURE__*/React.createElement(Icon,{name:rowIcon,color:textClass,size:options?.rowIconSize??"32px"}):null,/*#__PURE__*/React.createElement("span",null,name),!selectable&&!isStaticTheme(theme)?/*#__PURE__*/React.createElement("span",{className:"flex-1 justify-end flex items-center"},/*#__PURE__*/React.createElement(Icon,{name:isOpen?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:options?.iconSize??"16px"})):null),/*#__PURE__*/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})},/*#__PURE__*/React.createElement("div",{className:"pb-16"},children)))};const Accordion=({data,theme="transparent",icons={closed:{name:"icon-gui-plus"},open:{name:"icon-gui-minus"}},options,...props})=>{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)=>/*#__PURE__*/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 /*#__PURE__*/React.createElement("div",props,options?.autoClose?/*#__PURE__*/React.createElement(RadixAccordion,{type:"single",collapsible:true,defaultValue:openIndexes[0],onValueChange:values=>setOpenRowValues(values)},innerAccordion):/*#__PURE__*/React.createElement(RadixAccordion,{type:"multiple",defaultValue:openIndexes,onValueChange:values=>setOpenRowValues(values)},innerAccordion))};export default Accordion;

package/core/Icon.js

@@ -1 +1 @@
-import React,{useCallback}from"react";import{defaultIconSecondaryColor}from"./Icon/secondary-colors";import{convertTailwindClassToVar}from"./styles/colors/utils";import cn from"./utils/cn";const Icon=({name,size="0.75rem",color,secondaryColor,additionalCSS="",...additionalAttributes})=>{const[lightSecondaryColor,darkSecondaryColor]=(secondaryColor??"").split(" dark:");const iconSvg=useCallback((secondaryColor,isDark,isThemed)=>{let secondaryColorValue;if(secondaryColor){secondaryColorValue=convertTailwindClassToVar(secondaryColor)}else if(defaultIconSecondaryColor(name)){secondaryColorValue=convertTailwindClassToVar(defaultIconSecondaryColor(name))}return /*#__PURE__*/React.createElement("svg",{className:cn({[`${color}`]:color},{[`${additionalCSS}`]:additionalCSS},{"hidden dark:block":secondaryColor&&!isDark&&isThemed},{"dark:hidden":secondaryColor&&isDark&&isThemed}),style:{width:size,height:size,...secondaryColorValue&&{"--ui-icon-secondary-color":secondaryColorValue}},...additionalAttributes},/*#__PURE__*/React.createElement("use",{xlinkHref:`#sprite-${name}`}))},[name,size,color,additionalCSS,JSON.stringify(additionalAttributes),lightSecondaryColor,darkSecondaryColor]);if(lightSecondaryColor&&darkSecondaryColor){return /*#__PURE__*/React.createElement(React.Fragment,null,iconSvg(lightSecondaryColor,false,!!darkSecondaryColor),iconSvg(darkSecondaryColor,true,true))}else if(lightSecondaryColor){return iconSvg(lightSecondaryColor,false,!!darkSecondaryColor)}else{return iconSvg()}};export default Icon;
+import React,{useCallback}from"react";import{defaultIconSecondaryColor}from"./Icon/secondary-colors";import{convertTailwindClassToVar}from"./styles/colors/utils";import cn from"./utils/cn";const Icon=({name,size="0.75rem",color,secondaryColor,additionalCSS="",...additionalAttributes})=>{const[lightSecondaryColor,darkSecondaryColor]=(secondaryColor??"").split(" dark:");const iconSvg=useCallback((secondaryColor,isDark,isThemed)=>{let secondaryColorValue;if(secondaryColor){secondaryColorValue=convertTailwindClassToVar(secondaryColor)}else if(defaultIconSecondaryColor(name)){secondaryColorValue=convertTailwindClassToVar(defaultIconSecondaryColor(name))}return /*#__PURE__*/React.createElement("svg",{className:cn({[`${color}`]:color},{[`${additionalCSS}`]:additionalCSS},{"hidden dark:block":secondaryColor&&!isDark&&isThemed},{"dark:hidden":secondaryColor&&isDark&&isThemed}),style:{width:size,height:size,...secondaryColorValue&&{"--ui-icon-secondary-color":secondaryColorValue}},...additionalAttributes},/*#__PURE__*/React.createElement("use",{xlinkHref:`#sprite-${name}`}))},[name,size,color,additionalCSS,additionalAttributes,lightSecondaryColor,darkSecondaryColor]);if(lightSecondaryColor&&darkSecondaryColor){return /*#__PURE__*/React.createElement(React.Fragment,null,iconSvg(lightSecondaryColor,false,!!darkSecondaryColor),iconSvg(darkSecondaryColor,true,true))}else if(lightSecondaryColor){return iconSvg(lightSecondaryColor,false,!!darkSecondaryColor)}else{return iconSvg()}};export default Icon;

package/core/TabMenu.js

@@ -1 +1 @@
-import React,{useEffect}from"react";import*as Tabs from"@radix-ui/react-tabs";import throttle from"lodash.throttle";import cn from"./utils/cn";const TabMenu=({tabs=[],contents=[],tabOnClick,tabClassName,options})=>{const{defaultTabIndex=0,underline=true,animated=true,flexibleTabWidth=false,flexibleTabHeight=false}=options??{};const listRef=React.useRef(null);const[highlight,setHighlight]=React.useState({offset:0,width:0});useEffect(()=>{const handleResize=throttle(()=>{const activeTabElement=listRef.current?.querySelector(`[data-state="active"]`);if(activeTabElement){updateHighlightDimensions(activeTabElement)}},100);handleResize();window.addEventListener("resize",handleResize);return()=>{window.removeEventListener("resize",handleResize)}},[]);const updateHighlightDimensions=element=>{const{left:parentLeft}=listRef.current?.getBoundingClientRect()??{};const{left,width}=element.getBoundingClientRect()??{};setHighlight({offset:(left??0)-(parentLeft??0),width:width??0})};const handleTabClick=(event,index)=>{tabOnClick?.(index);updateHighlightDimensions(event.currentTarget)};return /*#__PURE__*/React.createElement(Tabs.Root,{defaultValue:`tab-${defaultTabIndex}`,className:cn({"h-full":flexibleTabHeight})},/*#__PURE__*/React.createElement(Tabs.List,{ref:listRef,className:cn("relative",{"flex border-b border-neutral-300 dark:border-neutral-1000":underline},{"h-full":flexibleTabHeight})},tabs.map((tab,index)=>/*#__PURE__*/React.createElement(Tabs.Trigger,{key:`tab-${index}`,className:cn("lg:px-24 md:px-20 px-16 py-16 ui-text-menu1 font-bold data-[state=active]:text-neutral-1300 text-neutral-1000 dark:data-[state=active]:text-neutral-000 dark:text-neutral-300 focus:outline-none focus-visible:outline-gui-focus transition-colors hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-900 dark:active:text-neutral-400 disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark disabled:cursor-not-allowed",{"flex-1":flexibleTabWidth},{"h-full":flexibleTabHeight},tabClassName),value:`tab-${index}`,onClick:event=>handleTabClick(event,index),disabled:typeof tab==="object"?tab.disabled:false},typeof tab==="object"?tab.label:tab)),/*#__PURE__*/React.createElement("div",{className:cn("absolute bottom-0 bg-neutral-1300 dark:bg-neutral-000 h-[3px] w-24",{"transition-[transform,width]":animated}),style:{transform:`translateX(${highlight.offset}px)`,width:`${highlight.width}px`}})),contents.map((content,index)=>/*#__PURE__*/React.createElement(Tabs.Content,{key:`tab-${index}`,value:`tab-${index}`},content)))};export default TabMenu;
+import React,{useEffect}from"react";import*as Tabs from"@radix-ui/react-tabs";import throttle from"lodash.throttle";import cn from"./utils/cn";const TabMenu=({tabs=[],contents=[],tabOnClick,tabClassName,rootClassName,contentsClassName,options})=>{const{defaultTabIndex=0,underline=true,animated:animatedOption=true,flexibleTabWidth=false,flexibleTabHeight=false}=options??{};const listRef=React.useRef(null);const[animated,setAnimated]=React.useState(false);const[highlight,setHighlight]=React.useState({offset:0,width:0});useEffect(()=>{if(animatedOption&&highlight.width>0){setTimeout(()=>{setAnimated(true)},150)}},[animatedOption,highlight.width]);useEffect(()=>{const handleResize=throttle(()=>{const activeTabElement=listRef.current?.querySelector(`[data-state="active"]`);if(activeTabElement){updateHighlightDimensions(activeTabElement)}},100);handleResize();window.addEventListener("resize",handleResize);return()=>{window.removeEventListener("resize",handleResize)}},[]);const updateHighlightDimensions=element=>{const{left:parentLeft}=listRef.current?.getBoundingClientRect()??{};const{left,width}=element.getBoundingClientRect()??{};setHighlight({offset:(left??0)-(parentLeft??0),width:width??0})};const handleTabClick=(event,index)=>{tabOnClick?.(index);updateHighlightDimensions(event.currentTarget)};return /*#__PURE__*/React.createElement(Tabs.Root,{defaultValue:`tab-${defaultTabIndex}`,className:cn({"h-full":flexibleTabHeight},rootClassName)},/*#__PURE__*/React.createElement(Tabs.List,{ref:listRef,className:cn("relative",{"flex border-b border-neutral-300 dark:border-neutral-1000":underline},{"h-full":flexibleTabHeight})},tabs.map((tab,index)=>/*#__PURE__*/React.createElement(Tabs.Trigger,{key:`tab-${index}`,className:cn("lg:px-24 md:px-20 px-16 py-16 ui-text-menu1 font-bold data-[state=active]:text-neutral-1300 text-neutral-1000 dark:data-[state=active]:text-neutral-000 dark:text-neutral-300 focus:outline-none focus-visible:outline-gui-focus transition-colors hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-900 dark:active:text-neutral-400 disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark disabled:cursor-not-allowed",{"flex-1":flexibleTabWidth},{"h-full":flexibleTabHeight},tabClassName),value:`tab-${index}`,onClick:event=>handleTabClick(event,index),disabled:typeof tab==="object"?tab.disabled:false},typeof tab==="object"?tab.label:tab)),/*#__PURE__*/React.createElement("div",{className:cn("absolute bottom-0 bg-neutral-1300 dark:bg-neutral-000 h-[3px] w-24",{"transition-[transform,width]":animated}),style:{transform:`translateX(${highlight.offset}px)`,width:`${highlight.width}px`}})),contents.map((content,index)=>/*#__PURE__*/React.createElement(Tabs.Content,{key:`tab-${index}`,value:`tab-${index}`,className:contentsClassName},content)))};export default TabMenu;

package/index.d.ts

@@ -1066,6 +1066,14 @@ export type TabMenuProps = {
      * An optional class name to apply to each tab.
      */
     tabClassName?: string;
+    /**
+     * An optional class name to apply to the root element.
+     */
+    rootClassName?: string;
+    /**
+     * An optional class name to apply to the contents element.
+     */
+    contentsClassName?: string;
     /**
      * Optional configuration options for the TabMenu.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "15.1.9-dev.072d2b86",
+  "version": "15.1.9-dev.7f0b586a",
   "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.",
   "repository": {
     "type": "git",