@ably/ui 14.8.0-dev.cbf00c0 → 14.8.0-dev.cf437ff

package/core/Accordion/utils.js

@@ -1 +1 @@
-export const themeClasses={dark:{bg:"bg-neutral-1200",hoverBg:"hover:bg-neutral-1100",text:"text-white",toggleIconColor:"text-orange-600",selectableBg:"bg-neutral-300",selectableText:"text-neutral-1300"},light:{bg:"bg-neutral-200",hoverBg:"hover:bg-neutral-300",text:"text-neutral-1300",toggleIconColor:"text-neutral-1000",selectableBg:"bg-neutral-1200",selectableText:"text-white"},transparent:{bg:"bg-transparent",hoverBg:"hover:bg-transparent",text:"text-neutral-1000",toggleIconColor:"text-dark-grey",border:"border-neutral-500 border-b last:border-none"},darkTransparent:{bg:"bg-transparent",hoverBg:"hover:bg-transparent",text:"text-neutral-000",toggleIconColor:"text-orange-600",border:"border-neutral-900 border-b last:border-none"},static:{bg:"bg-neutral-200",hoverBg:"hover:bg-neutral-200",text:"text-neutral-1300",toggleIconColor:"text-neutral-200",selectableBg:"bg-neutral-1200",selectableText:"text-white"},darkStatic:{bg:"bg-neutral-1200",hoverBg:"hover:bg-neutral-1200",text:"text-white",toggleIconColor:"text-neutral-1200",selectableBg:"bg-neutral-1200",selectableText:"text-neutral-1300"}};export const isNonTransparentTheme=theme=>!["transparent","darkTransparent"].includes(theme);export const isStaticTheme=theme=>["static","darkStatic"].includes(theme);
+export const themeClasses={dark:{bg:"bg-neutral-1200",hoverBg:"hover:bg-neutral-1100",text:"text-white",toggleIconColor:"text-orange-600",selectableBg:"data-[state=open]:bg-neutral-300",selectableText:"data-[state=open]:text-neutral-1300"},light:{bg:"bg-neutral-200",hoverBg:"hover:bg-neutral-300",text:"text-neutral-1300",toggleIconColor:"text-neutral-1000",selectableBg:"data-[state=open]:bg-neutral-1200",selectableText:"data-[state=open]:text-white"},transparent:{bg:"bg-transparent",hoverBg:"hover:bg-transparent",text:"text-neutral-1000",toggleIconColor:"text-dark-grey",border:"border-neutral-500 border-b last:border-none"},darkTransparent:{bg:"bg-transparent",hoverBg:"hover:bg-transparent",text:"text-neutral-000",toggleIconColor:"text-orange-600",border:"border-neutral-900 border-b last:border-none"},static:{bg:"bg-neutral-200",hoverBg:"hover:bg-neutral-200",text:"text-neutral-1300",toggleIconColor:"text-neutral-200",selectableBg:"data-[state=open]:bg-neutral-1200",selectableText:"data-[state=open]:text-white"},darkStatic:{bg:"bg-neutral-1200",hoverBg:"hover:bg-neutral-1200",text:"text-white",toggleIconColor:"text-neutral-1200",selectableBg:"data-[state=open]:bg-neutral-1200",selectableText:"data-[state=open]:text-neutral-1300"}};export const isNonTransparentTheme=theme=>!["transparent","darkTransparent"].includes(theme);export const isStaticTheme=theme=>["static","darkStatic"].includes(theme);

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 clsx from"clsx";import Icon from"./Icon";import{themeClasses,isNonTransparentTheme,isStaticTheme}from"./Accordion/utils";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:clsx({[`${border}`]:border&&!options?.hideBorders})},/*#__PURE__*/React.createElement(AccordionTrigger,{onClick:onClick,className:clsx({"flex w-full group/accordion-trigger py-16 ui-text-p1 font-bold text-left items-center gap-12 transition-colors":true,"px-16 mb-16 rounded-lg":isNonTransparentTheme(theme),"rounded-none":!isNonTransparentTheme(theme),"pointer-events-none focus:outline-none":isStaticTheme(theme),"focus:outline-gui-blue-focus":!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:clsx({"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[openRowValues,setOpenRowValues]=useState([]);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));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]);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}from"react";import{AccordionContent,AccordionItem,AccordionTrigger,Accordion as RadixAccordion}from"@radix-ui/react-accordion";import clsx from"clsx";import Icon from"./Icon";import{themeClasses,isNonTransparentTheme,isStaticTheme}from"./Accordion/utils";const AccordionRow=({name,children,rowIcon,options,toggleIcons,theme,index,onClick})=>{const{selectable,sticky}=options||{};const{text,bg,hoverBg,selectableBg,selectableText,border,toggleIconColor}=themeClasses[theme];const textClass=selectable&&selectableText||text;return /*#__PURE__*/React.createElement(AccordionItem,{value:`accordion-item-${index}`,className:clsx({[`${border}`]:border&&!options?.hideBorders})},/*#__PURE__*/React.createElement(AccordionTrigger,{onClick:onClick,className:clsx({"flex w-full group/accordion-trigger py-16 ui-text-p1 font-bold text-left items-center gap-12 transition-colors":true,"px-16 mb-16 rounded-lg":isNonTransparentTheme(theme),"rounded-none":!isNonTransparentTheme(theme),"pointer-events-none focus:outline-none":isStaticTheme(theme),"focus:outline-gui-blue-focus":!isStaticTheme(theme),"sticky top-0":sticky,[`${bg} ${hoverBg} ${text}`]:true,[`${selectableBg} ${selectableText}`]:selectable,[options?.headerCSS??""]:true})},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,{additionalCSS:"group-data-[state=closed]/accordion-trigger:hidden",name:toggleIcons.open.name,color:toggleIconColor,size:options?.iconSize??"16px"}),/*#__PURE__*/React.createElement(Icon,{additionalCSS:"group-data-[state=open]/accordion-trigger:hidden",name:toggleIcons.closed.name,color:toggleIconColor,size:options?.iconSize??"16px"})):null),/*#__PURE__*/React.createElement(AccordionContent,{className:"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"},/*#__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 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)}},item.content));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]);return /*#__PURE__*/React.createElement("div",props,options?.autoClose?/*#__PURE__*/React.createElement(RadixAccordion,{type:"single",collapsible:true,defaultValue:openIndexes[0]},innerAccordion):/*#__PURE__*/React.createElement(RadixAccordion,{type:"multiple",defaultValue:openIndexes},innerAccordion))};export default Accordion;

package/index.d.ts

@@ -3,7 +3,7 @@
 declare module '@ably/ui/core/Accordion/types' {
 import { ReactNode } from "react";
 import { IconName, IconSize } from ".@ably/ui/core/Icon/types";
-import { ColorClass } from ".@ably/ui/core/styles/colors/types";
+import { ColorClass, DataStateOpenColorClass } from ".@ably/ui/core/styles/colors/types";
 /**
  * Represents the data structure for an Accordion component.
  */
@@ -61,11 +61,11 @@ export type AccordionThemeColors = {
     /**
      * Optional background color class for selectable accordion items.
      */
-    selectableBg?: ColorClass;
+    selectableBg?: DataStateOpenColorClass;
     /**
      * Optional text color class for selectable accordion items.
      */
-    selectableText?: ColorClass;
+    selectableText?: DataStateOpenColorClass;
     /**
      * Optional border color for the accordion.
      */
@@ -112,24 +112,12 @@ export type AccordionOptions = {
     hideBorders?: boolean;
     /**
      * Size of the row icon.
-     * @default "32px"
      */
     rowIconSize?: IconSize;
     /**
      * Size of the accordion icon.
-     * @default "16px"
      */
     iconSize?: IconSize;
-    /**
-     * Custom CSS classes to apply to the selected accordion header.
-     * @default ""
-     */
-    selectedHeaderCSS?: string;
-    /**
-     * Custom CSS classes to apply to the accordion content.
-     * @default ""
-     */
-    contentCSS?: string;
 };
 //# sourceMappingURL=types.d.ts.map
 }
@@ -1103,6 +1091,7 @@ export const colors: readonly ["neutral", "orange", "blue", "yellow", "green", "
 export type ColorClassColorGroups = (typeof colors)[number];
 export type Theme = "light" | "dark";
 export type ColorClass = `${ColorClassVariants}${ColorClassPrefixes}-${ColorName}`;
+export type DataStateOpenColorClass = `data-[state=open]:${ColorClass}`;
 export const neutralColors: readonly ["neutral-000", "neutral-100", "neutral-200", "neutral-300", "neutral-400", "neutral-500", "neutral-600", "neutral-700", "neutral-800", "neutral-900", "neutral-1000", "neutral-1100", "neutral-1200", "neutral-1300"];
 export const orangeColors: readonly ["orange-100", "orange-200", "orange-300", "orange-400", "orange-500", "orange-600", "orange-700", "orange-800", "orange-900", "orange-1000", "orange-1100"];
 export const yellowColors: readonly ["yellow-100", "yellow-200", "yellow-300", "yellow-400", "yellow-500", "yellow-600", "yellow-700", "yellow-800", "yellow-900"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.8.0-dev.cbf00c0",
+  "version": "14.8.0-dev.cf437ff",
   "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",