@conveyorhq/arrow-ds 1.122.0 → 1.123.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.122.0",
+  "version": "1.123.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/Accordion/Accordion.d.ts

@@ -35,8 +35,9 @@ export declare type AccordionContentProps = {
     maxHeight?: string;
     style?: React.CSSProperties;
     className?: string;
+    scrollClassName?: string;
 };
-export declare const AccordionContent: ({ children, maxHeight, style, className, ...rest }: AccordionContentProps) => JSX.Element;
+export declare const AccordionContent: ({ children, maxHeight, style, className, scrollClassName, ...rest }: AccordionContentProps) => JSX.Element;
 export declare type AccordionProps = AccordionOwnProps & BoxProps;
 export declare const Accordion: {
     (props: AccordionProps): JSX.Element;
@@ -44,6 +45,6 @@ export declare const Accordion: {
     Item: ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }: AccordionItemProps) => JSX.Element;
     Button: React.ForwardRefExoticComponent<AccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
     Icon: ({ className, direction, color, }: AccordionIconProps) => JSX.Element;
-    Content: ({ children, maxHeight, style, className, ...rest }: AccordionContentProps) => JSX.Element;
+    Content: ({ children, maxHeight, style, className, scrollClassName, ...rest }: AccordionContentProps) => JSX.Element;
 };
 export {};

package/public/components/Accordion/Accordion.js

@@ -111,7 +111,7 @@ const AccordionIcon = ({ className, direction = "down", color, }) => {
     return (react_1.default.createElement(Icon_1.Icon, { className: classnames_1.default([cn({ e: "icon" }), className]), "data-direction": direction, icon: icon[direction], color: color }));
 };
 exports.AccordionIcon = AccordionIcon;
-const AccordionContent = ({ children, maxHeight, style, className, ...rest }) => {
+const AccordionContent = ({ children, maxHeight, style, className, scrollClassName, ...rest }) => {
     const { disableAnimation } = context_1.useAccordionGroupContext();
     const { buttonId, contentId, defaultIsOpen, isOpen, } = context_1.useAccordionItemContext();
     const [childrenRef, setChildrenRef] = react_1.default.useState({ current: null });
@@ -129,7 +129,7 @@ const AccordionContent = ({ children, maxHeight, style, className, ...rest }) =>
             }
         }, immediate: disableAnimation || !enableTransition }, (show) => show
         ? (styles) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default("overflow-hidden box-content", className), style: { ...styles, ...style }, "aria-labelledby": buttonId, id: contentId, role: "region" }, rest),
-            react_1.default.createElement(Box_1.Box, { ref: onRefChange, className: classnames_1.default(maxHeight && "overflow-y-auto"), style: maxHeight ? { maxHeight } : undefined }, children)))
+            react_1.default.createElement(Box_1.Box, { ref: onRefChange, className: classnames_1.default(maxHeight && "overflow-y-auto", scrollClassName), style: maxHeight ? { maxHeight } : undefined }, children)))
         : null));
 };
 exports.AccordionContent = AccordionContent;

package/src/components/Accordion/Accordion.tsx

@@ -276,6 +276,7 @@ export type AccordionContentProps = {
   maxHeight?: string;
   style?: React.CSSProperties;
   className?: string;
+  scrollClassName?: string;
 };
 
 export const AccordionContent = ({
@@ -283,6 +284,7 @@ export const AccordionContent = ({
   maxHeight,
   style,
   className,
+  scrollClassName,
   ...rest
 }: AccordionContentProps) => {
   const { disableAnimation } = useAccordionGroupContext();
@@ -336,7 +338,10 @@ export const AccordionContent = ({
               >
                 <Box
                   ref={onRefChange}
-                  className={classNames(maxHeight && "overflow-y-auto")}
+                  className={classNames(
+                    maxHeight && "overflow-y-auto",
+                    scrollClassName,
+                  )}
                   style={maxHeight ? { maxHeight } : undefined}
                 >
                   {children}