@conveyorhq/arrow-ds 1.35.0 → 1.36.0

package/package.json

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

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

@@ -3,7 +3,7 @@ import { BoxProps } from "../Box";
 import { StackProps } from "../Stack";
 import type { AccordionOwnProps, AccordionItemOwnProps, AccordionDisclosureProps, AccordionGroupOwnProps } from "./types";
 export declare type AccordionGroupProps = AccordionGroupOwnProps & Pick<StackProps, "children" | "spacing">;
-export declare const AccordionGroup: ({ children, spacing, defaultValue, ...rest }: AccordionGroupProps) => JSX.Element;
+export declare const AccordionGroup: ({ children, spacing, defaultValue, disableAnimation, ...rest }: AccordionGroupProps) => JSX.Element;
 export declare type AccordionItemProps = AccordionItemOwnProps & BoxProps;
 export declare const AccordionItem: ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }: AccordionItemProps) => JSX.Element;
 declare type AccordionButtonChildProps = Omit<AccordionDisclosureProps, "onToggle">;
@@ -25,7 +25,7 @@ export declare const AccordionContent: ({ children, maxHeight, style, className,
 export declare type AccordionProps = AccordionOwnProps & BoxProps;
 export declare const Accordion: {
     (props: AccordionProps): JSX.Element;
-    Group: ({ children, spacing, defaultValue, ...rest }: AccordionGroupProps) => JSX.Element;
+    Group: ({ children, spacing, defaultValue, disableAnimation, ...rest }: AccordionGroupProps) => JSX.Element;
     Item: ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }: AccordionItemProps) => JSX.Element;
     Button: React.ForwardRefExoticComponent<AccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
     Content: ({ children, maxHeight, style, className, ...rest }: AccordionContentProps) => JSX.Element;

package/public/components/Accordion/Accordion.js

@@ -20,8 +20,8 @@ const Heading_1 = require("../Heading");
 const Icon_1 = require("../Icon");
 const context_1 = require("./context");
 const cn = utilities_1.bemHOF("Accordion");
-const AccordionGroup = ({ children, spacing = 0, defaultValue, ...rest }) => {
-    return (react_1.default.createElement(context_1.AccordionGroupContext.Provider, { value: { defaultValue } },
+const AccordionGroup = ({ children, spacing = 0, defaultValue, disableAnimation, ...rest }) => {
+    return (react_1.default.createElement(context_1.AccordionGroupContext.Provider, { value: { defaultValue, disableAnimation } },
         react_1.default.createElement(Stack_1.Stack, Object.assign({ orientation: types_1.ORIENTATION.VERTICAL, spacing: spacing }, rest), children)));
 };
 exports.AccordionGroup = AccordionGroup;
@@ -62,6 +62,7 @@ exports.AccordionButton = react_1.default.forwardRef((props, forwardedRef) => {
         } }, rest), typeof children === "function" ? children({ isOpen }) : children));
 });
 const AccordionContent = ({ children, maxHeight, style, className, ...rest }) => {
+    const { disableAnimation } = context_1.useAccordionGroupContext();
     const { buttonId, contentId, defaultIsOpen, isOpen, } = context_1.useAccordionItemContext();
     const [childrenRef, setChildrenRef] = react_1.default.useState({ current: null });
     const onRefChange = react_1.default.useCallback((node) => {
@@ -76,7 +77,7 @@ const AccordionContent = ({ children, maxHeight, style, className, ...rest }) =>
             if (defaultIsOpen && isOpen) {
                 setEnableTransition(true);
             }
-        }, immediate: !enableTransition }, (show) => show
+        }, 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)))
         : null));

package/public/components/Accordion/context.js

@@ -4,6 +4,7 @@ exports.useAccordionItemContext = exports.AccordionItemContext = exports.useAcco
 const react_1 = require("react");
 const defaultGroupContext = {
     defaultValue: undefined,
+    disableAnimation: false,
 };
 exports.AccordionGroupContext = react_1.createContext(defaultGroupContext);
 function useAccordionGroupContext() {

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

@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
 import type { DisclosureProps } from "../../types";
 export declare type AccordionGroupOwnProps = {
     defaultValue?: string;
+    disableAnimation?: boolean;
 };
 export declare type AccordionItemOwnProps = {
     defaultIsOpen?: boolean;

package/src/components/Accordion/Accordion.tsx

@@ -41,10 +41,11 @@ export const AccordionGroup = ({
   children,
   spacing = 0,
   defaultValue,
+  disableAnimation,
   ...rest
 }: AccordionGroupProps) => {
   return (
-    <AccordionGroupContext.Provider value={{ defaultValue }}>
+    <AccordionGroupContext.Provider value={{ defaultValue, disableAnimation }}>
       <Stack orientation={ORIENTATION.VERTICAL} spacing={spacing} {...rest}>
         {children}
       </Stack>
@@ -174,6 +175,7 @@ export const AccordionContent = ({
   className,
   ...rest
 }: AccordionContentProps) => {
+  const { disableAnimation } = useAccordionGroupContext();
   const {
     buttonId,
     contentId,
@@ -209,7 +211,7 @@ export const AccordionContent = ({
           setEnableTransition(true);
         }
       }}
-      immediate={!enableTransition}
+      immediate={disableAnimation || !enableTransition}
     >
       {(show) =>
         show

package/src/components/Accordion/context.ts

@@ -13,6 +13,7 @@ type AccordionGroupContextType = AccordionGroupOwnProps;
 
 const defaultGroupContext: AccordionGroupContextType = {
   defaultValue: undefined,
+  disableAnimation: false,
 };
 
 export const AccordionGroupContext: Context<AccordionGroupContextType> = createContext<AccordionGroupContextType>(

package/src/components/Accordion/types.ts

@@ -6,6 +6,10 @@ export type AccordionGroupOwnProps = {
    * The value of the item to expand when initially rendered.
    */
   defaultValue?: string;
+  /**
+   * A way to prevent the show/hide animation from running
+   */
+  disableAnimation?: boolean;
 };
 
 export type AccordionItemOwnProps = {