@ably/ui - npm Package Compare versions

Comparing version 14.7.4 to 14.7.5-dev.91a554b

core/Accordion.js

@@ -1,1 +0,1 @@
-import React,{useState,useRef,useEffect}from"react";import Icon from"./Icon";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"}};const isNonTransparentTheme=theme=>!["transparent","darkTransparent"].includes(theme);const isStaticTheme=theme=>["static","darkStatic"].includes(theme);const AccordionRow=({name,children,onClick,open,rowIcon,options,toggleIcons,theme})=>{const rowRef=useRef(null);const[contentHeight,setContentHeight]=useState(0);useEffect(()=>{const resizeObserver=new ResizeObserver(()=>{if(rowRef.current){setContentHeight(rowRef.current.scrollHeight+16)}});if(rowRef.current){resizeObserver.observe(rowRef.current)}return()=>{if(rowRef.current){resizeObserver.unobserve(rowRef.current)}}},[]);const{selectable,sticky}=options||{};const{text,bg,hoverBg,toggleIconColor,selectableBg,selectableText,border}=themeClasses[theme];const bgClasses=selectable&&open&&selectableBg||`${bg} ${hoverBg}`;const textClass=selectable&&open&&selectableText||text;return /*#__PURE__*/React.createElement("div",{className:`${border??""}`},/*#__PURE__*/React.createElement("button",{type:"button",...!isStaticTheme(theme)?{onClick}:{},className:`flex w-full ${sticky?"sticky top-0":""} focus:outline-none py-16 rounded-lg ui-text-p1 font-bold text-left items-center gap-12 ${isNonTransparentTheme(theme)?"px-16 mb-16":""} ${isStaticTheme(theme)?"pointer-events-none":""} transition-colors ${bgClasses} ${textClass}`},rowIcon?/*#__PURE__*/React.createElement(Icon,{name:rowIcon,color:textClass,size:"32"}):null,/*#__PURE__*/React.createElement("span",null,name),!selectable?/*#__PURE__*/React.createElement("span",{className:"flex-1 justify-end flex items-center"},/*#__PURE__*/React.createElement(Icon,{name:open?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:"16"})," "):null),/*#__PURE__*/React.createElement("div",{className:`ui-text-p2 transition-[max-height] duration-500 overflow-y-hidden`,style:{maxHeight:open?contentHeight:0},ref:rowRef},/*#__PURE__*/React.createElement("div",{className:"pb-16"},children)))};const Accordion=({data,theme="transparent",id="id-accordion",className="",icons={closed:{name:"icon-gui-plus"},open:{name:"icon-gui-minus"}},options})=>{const{defaultOpenIndexes,autoClose,fullyOpen}=options||{};const[openIndexes,setOpenIndexes]=useState(defaultOpenIndexes??[]);const handleSetIndex=index=>{const currentIndexIsOpen=openIndexes.includes(index);if(autoClose){setOpenIndexes(currentIndexIsOpen?[]:[index])}else{setOpenIndexes(currentIndexIsOpen?openIndexes.filter(i=>i!==index):[...openIndexes,index])}};return /*#__PURE__*/React.createElement("div",{className:className,id:id},data.map((item,currentIndex)=>{return /*#__PURE__*/React.createElement(AccordionRow,{key:item.name,name:item.name,rowIcon:item.icon,open:fullyOpen??openIndexes.includes(currentIndex),onClick:()=>handleSetIndex(currentIndex),toggleIcons:icons,theme:theme,options:options},item.content)}))};export default Accordion;
+import React,{useState,useRef,useEffect}from"react";import Icon from"./Icon";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"}};const isNonTransparentTheme=theme=>!["transparent","darkTransparent"].includes(theme);const isStaticTheme=theme=>["static","darkStatic"].includes(theme);const AccordionRow=({name,children,onClick,open,rowIcon,options,toggleIcons,theme})=>{const rowRef=useRef(null);const[contentHeight,setContentHeight]=useState(0);useEffect(()=>{const resizeObserver=new ResizeObserver(()=>{if(rowRef.current){setContentHeight(rowRef.current.scrollHeight+16)}});if(rowRef.current){resizeObserver.observe(rowRef.current)}return()=>{if(rowRef.current){resizeObserver.unobserve(rowRef.current)}}},[]);const{selectable,sticky}=options||{};const{text,bg,hoverBg,toggleIconColor,selectableBg,selectableText,border}=themeClasses[theme];const bgClasses=selectable&&open&&selectableBg||`${bg} ${hoverBg}`;const textClass=selectable&&open&&selectableText||text;return /*#__PURE__*/React.createElement("div",{className:`${border??""}`},/*#__PURE__*/React.createElement("button",{type:"button",...!isStaticTheme(theme)?{onClick}:{},className:`flex w-full ${sticky?"sticky top-0":""} focus:outline-none py-16 rounded-lg ui-text-p1 font-bold text-left items-center gap-12 ${isNonTransparentTheme(theme)?"px-16 mb-16":""} ${isStaticTheme(theme)?"pointer-events-none":""} transition-colors ${bgClasses} ${textClass}`},rowIcon?/*#__PURE__*/React.createElement(Icon,{name:rowIcon,color:textClass,size:"32"}):null,/*#__PURE__*/React.createElement("span",null,name),!selectable?/*#__PURE__*/React.createElement("span",{className:"flex-1 justify-end flex items-center"},/*#__PURE__*/React.createElement(Icon,{name:open?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:"16"})," "):null),/*#__PURE__*/React.createElement("div",{className:`ui-text-p2 transition-[max-height] duration-500 overflow-y-hidden`,style:{maxHeight:open?contentHeight:0},ref:rowRef},/*#__PURE__*/React.createElement("div",{className:"pb-16"},children)))};const Accordion=({data,theme="transparent",id="id-accordion",className="",icons={closed:{name:"icon-gui-plus"},open:{name:"icon-gui-minus"}},options})=>{const{defaultOpenIndexes,autoClose,fullyOpen}=options||{};const[openIndexes,setOpenIndexes]=useState(defaultOpenIndexes??[]);const handleSetIndex=index=>{const currentIndexIsOpen=openIndexes.includes(index);if(autoClose){setOpenIndexes(currentIndexIsOpen?[]:[index])}else{setOpenIndexes(currentIndexIsOpen?openIndexes.filter(i=>i!==index):[...openIndexes,index])}};return /*#__PURE__*/React.createElement("div",{className:className,id:id},data.map((item,currentIndex)=>{return /*#__PURE__*/React.createElement(AccordionRow,{key:item.name,name:item.name,rowIcon:item.icon,open:fullyOpen??openIndexes.includes(currentIndex),onClick:()=>{handleSetIndex(currentIndex);item.onClick?.(currentIndex)},toggleIcons:icons,theme:theme,options:options},item.content)}))};export default Accordion;

package.json

 {
   "name": "@ably/ui",
-  "version": "14.7.4",
+  "version": "14.7.5-dev.91a554b",
   "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.",
@@ -42,3 +42,3 @@ "repository": {
     "eslint-plugin-react": "^7.34.3",
-    "eslint-plugin-storybook": "^0.9.0",
+    "eslint-plugin-storybook": "^0.10.1",
     "http-server": "14.1.1",
@@ -45,0 +45,0 @@ "msw": "2.4.2",

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4017180

increased by0.01%

Lines of code

3483

increased by0.03%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes