@conveyorhq/arrow-ds 1.125.0 → 1.126.0

package/package.json

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

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

@@ -13,7 +13,7 @@ declare type AccordionGroupChildrenUnionType = AccordionGroupChildFunction | {
     children: React.ReactNode;
 };
 export declare type AccordionGroupProps = AccordionGroupOwnProps & AccordionGroupChildrenUnionType & Pick<StackProps, "spacing" | "className">;
-export declare const AccordionGroup: ({ children, spacing, defaultValue, disableAnimation, allowMultiple, className, ...rest }: AccordionGroupProps) => JSX.Element;
+export declare const AccordionGroup: ({ children, spacing, defaultValue, disableAnimation, allowMultiple, allowToggle, className, ...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">;
@@ -28,8 +28,9 @@ export declare const AccordionButton: React.ForwardRefExoticComponent<AccordionB
 export declare type AccordionIconProps = {
     className?: string;
     direction?: "up" | "down" | "left" | "right";
+    disabled?: boolean;
 } & Pick<IconProps, "color">;
-export declare const AccordionIcon: ({ className, direction, color, }: AccordionIconProps) => JSX.Element;
+export declare const AccordionIcon: ({ className, direction, color, disabled, }: AccordionIconProps) => JSX.Element;
 export declare type AccordionContentProps = {
     children: React.ReactNode;
     maxHeight?: string;
@@ -41,10 +42,10 @@ 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, disableAnimation, allowMultiple, className, ...rest }: AccordionGroupProps) => JSX.Element;
+    Group: ({ children, spacing, defaultValue, disableAnimation, allowMultiple, allowToggle, className, ...rest }: AccordionGroupProps) => JSX.Element;
     Item: ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }: AccordionItemProps) => JSX.Element;
     Button: React.ForwardRefExoticComponent<AccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
-    Icon: ({ className, direction, color, }: AccordionIconProps) => JSX.Element;
+    Icon: ({ className, direction, color, disabled, }: AccordionIconProps) => JSX.Element;
     Content: ({ children, maxHeight, style, className, scrollClassName, ...rest }: AccordionContentProps) => JSX.Element;
 };
 export {};

package/public/components/Accordion/Accordion.js

@@ -20,7 +20,7 @@ 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, disableAnimation, allowMultiple = true, className, ...rest }) => {
+const AccordionGroup = ({ children, spacing = 0, defaultValue, disableAnimation, allowMultiple = true, allowToggle = true, className, ...rest }) => {
     const totalItems = react_1.default.Children.count(children);
     const [currentValue, setCurrentValue] = react_1.default.useState(defaultValue || "");
     const context = react_1.default.useMemo(() => ({
@@ -30,13 +30,21 @@ const AccordionGroup = ({ children, spacing = 0, defaultValue, disableAnimation,
         currentValue,
         setCurrentValue,
         allowMultiple,
-    }), [defaultValue, disableAnimation, totalItems, currentValue, allowMultiple]);
+        allowToggle,
+    }), [
+        defaultValue,
+        disableAnimation,
+        totalItems,
+        currentValue,
+        allowMultiple,
+        allowToggle,
+    ]);
     return (react_1.default.createElement(context_1.AccordionGroupContext.Provider, { value: context },
         react_1.default.createElement(Stack_1.Stack, Object.assign({ orientation: types_1.ORIENTATION.VERTICAL, spacing: spacing, className: className }, rest), typeof children === "function" ? children({ currentValue }) : children)));
 };
 exports.AccordionGroup = AccordionGroup;
 const AccordionItem = ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }) => {
-    const { defaultValue, currentValue, setCurrentValue, allowMultiple, } = context_1.useAccordionGroupContext();
+    const { defaultValue, currentValue, setCurrentValue, allowMultiple, allowToggle, } = context_1.useAccordionGroupContext();
     const hasDefaultValue = typeof defaultValue === "undefined" ? false : defaultValue === value;
     const defaultIsOpen = typeof defaultIsOpenProp === "undefined"
         ? hasDefaultValue
@@ -57,6 +65,7 @@ const AccordionItem = ({ value, defaultIsOpen: defaultIsOpenProp, children, clas
         currentValue,
         setCurrentValue,
         allowMultiple,
+        allowToggle,
     }), [
         defaultIsOpen,
         isOpen,
@@ -69,6 +78,7 @@ const AccordionItem = ({ value, defaultIsOpen: defaultIsOpenProp, children, clas
         currentValue,
         setCurrentValue,
         allowMultiple,
+        allowToggle,
     ]);
     react_1.default.useEffect(() => {
         if (!allowMultiple && currentValue !== value) {
@@ -83,7 +93,7 @@ const AccordionItem = ({ value, defaultIsOpen: defaultIsOpenProp, children, clas
 exports.AccordionItem = AccordionItem;
 exports.AccordionButton = react_1.default.forwardRef((props, forwardedRef) => {
     const { children, className, onClick, disabled = false, ...rest } = props;
-    const { buttonId, contentId, isOpen, onToggle, onClose, onOpen, value, setCurrentValue, } = context_1.useAccordionItemContext();
+    const { buttonId, contentId, isOpen, onToggle, onClose, onOpen, value, setCurrentValue, allowToggle, } = context_1.useAccordionItemContext();
     const buttonRef = react_1.default.useRef(null);
     const ref = react_merge_refs_1.default([forwardedRef, buttonRef]);
     return (react_1.default.createElement("button", Object.assign({ ref: ref, type: "button", className: className, id: buttonId, "aria-controls": contentId, "aria-expanded": isOpen, "aria-disabled": disabled, disabled: disabled, onClick: (event) => {
@@ -94,21 +104,24 @@ exports.AccordionButton = react_1.default.forwardRef((props, forwardedRef) => {
             if (setCurrentValue && value) {
                 setCurrentValue(value);
             }
-            if (onToggle) {
+            if (onToggle && allowToggle) {
                 onToggle();
             }
+            if (onOpen && !allowToggle) {
+                onOpen();
+            }
         } }, rest), typeof children === "function"
         ? children({ isOpen, onClose, onOpen })
         : children));
 });
-const AccordionIcon = ({ className, direction = "down", color, }) => {
+const AccordionIcon = ({ className, direction = "down", color, disabled = false, }) => {
     const icon = {
         up: Icon_1.ICON_TYPE.CHEVRON_UP,
         down: Icon_1.ICON_TYPE.CHEVRON_DOWN,
         left: Icon_1.ICON_TYPE.CHEVRON_LEFT,
         right: Icon_1.ICON_TYPE.CHEVRON_RIGHT,
     };
-    return (react_1.default.createElement(Icon_1.Icon, { className: classnames_1.default([cn({ e: "icon" }), className]), "data-direction": direction, icon: icon[direction], color: color }));
+    return (react_1.default.createElement(Icon_1.Icon, { className: classnames_1.default([cn({ e: "icon" }), className]), "data-direction": disabled ? undefined : direction, icon: icon[direction], color: color }));
 };
 exports.AccordionIcon = AccordionIcon;
 const AccordionContent = ({ children, maxHeight, style, className, scrollClassName, ...rest }) => {

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

@@ -13,6 +13,7 @@ declare type AccordionItemContextType = AccordionItemOwnProps & AccordionDisclos
     currentValue?: string;
     setCurrentValue?(value: string): void;
     allowMultiple?: boolean;
+    allowToggle?: boolean;
 };
 export declare const AccordionItemContext: Context<AccordionItemContextType>;
 export declare function useAccordionItemContext(): AccordionItemContextType;

package/public/components/Accordion/context.js

@@ -9,6 +9,7 @@ const defaultGroupContext = {
     currentValue: undefined,
     setCurrentValue: () => { },
     allowMultiple: true,
+    allowToggle: true,
 };
 exports.AccordionGroupContext = react_1.createContext(defaultGroupContext);
 function useAccordionGroupContext() {
@@ -29,6 +30,7 @@ const defaultContext = {
     currentValue: undefined,
     setCurrentValue: () => { },
     allowMultiple: true,
+    allowToggle: true,
 };
 exports.AccordionItemContext = react_1.createContext(defaultContext);
 function useAccordionItemContext() {

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

@@ -4,6 +4,7 @@ export declare type AccordionGroupOwnProps = {
     defaultValue?: string;
     disableAnimation?: boolean;
     allowMultiple?: boolean;
+    allowToggle?: boolean;
 };
 export declare type AccordionItemOwnProps = {
     defaultIsOpen?: boolean;

package/src/components/Accordion/Accordion.tsx

@@ -51,6 +51,7 @@ export const AccordionGroup = ({
   defaultValue,
   disableAnimation,
   allowMultiple = true,
+  allowToggle = true,
   className,
   ...rest
 }: AccordionGroupProps) => {
@@ -64,8 +65,16 @@ export const AccordionGroup = ({
       currentValue,
       setCurrentValue,
       allowMultiple,
+      allowToggle,
     }),
-    [defaultValue, disableAnimation, totalItems, currentValue, allowMultiple],
+    [
+      defaultValue,
+      disableAnimation,
+      totalItems,
+      currentValue,
+      allowMultiple,
+      allowToggle,
+    ],
   );
   return (
     <AccordionGroupContext.Provider value={context}>
@@ -99,6 +108,7 @@ export const AccordionItem = ({
     currentValue,
     setCurrentValue,
     allowMultiple,
+    allowToggle,
   } = useAccordionGroupContext();
 
   /**
@@ -131,6 +141,7 @@ export const AccordionItem = ({
       currentValue,
       setCurrentValue,
       allowMultiple,
+      allowToggle,
     }),
     [
       defaultIsOpen,
@@ -144,6 +155,7 @@ export const AccordionItem = ({
       currentValue,
       setCurrentValue,
       allowMultiple,
+      allowToggle,
     ],
   );
 
@@ -197,6 +209,7 @@ export const AccordionButton = React.forwardRef<
     onOpen,
     value,
     setCurrentValue,
+    allowToggle,
   } = useAccordionItemContext();
   const buttonRef = React.useRef<HTMLButtonElement>(null);
   const ref = mergeRefs<HTMLButtonElement>([forwardedRef, buttonRef]);
@@ -219,9 +232,12 @@ export const AccordionButton = React.forwardRef<
         if (setCurrentValue && value) {
           setCurrentValue(value);
         }
-        if (onToggle) {
+        if (onToggle && allowToggle) {
           onToggle();
         }
+        if (onOpen && !allowToggle) {
+          onOpen();
+        }
       }}
       {...rest}
     >
@@ -243,12 +259,18 @@ export type AccordionIconProps = {
    * point down, unless direction=down, then it will point up
    */
   direction?: "up" | "down" | "left" | "right";
+  /**
+   * Prevent the icon from rotating when the accordion is opened or closed; the
+   * direction will always be what is specified in the `direction` prop
+   */
+  disabled?: boolean;
 } & Pick<IconProps, "color">;
 
 export const AccordionIcon = ({
   className,
   direction = "down",
   color,
+  disabled = false,
 }: AccordionIconProps) => {
   const icon = {
     up: ICON_TYPE.CHEVRON_UP,
@@ -260,7 +282,7 @@ export const AccordionIcon = ({
   return (
     <Icon
       className={classNames([cn({ e: "icon" }), className])}
-      data-direction={direction}
+      data-direction={disabled ? undefined : direction}
       icon={icon[direction]}
       color={color}
     />

package/src/components/Accordion/context.ts

@@ -22,6 +22,7 @@ const defaultGroupContext: AccordionGroupContextType = {
   currentValue: undefined,
   setCurrentValue: () => {},
   allowMultiple: true,
+  allowToggle: true,
 };
 
 export const AccordionGroupContext: Context<AccordionGroupContextType> = createContext<AccordionGroupContextType>(
@@ -49,6 +50,7 @@ type AccordionItemContextType = AccordionItemOwnProps &
     currentValue?: string;
     setCurrentValue?(value: string): void;
     allowMultiple?: boolean;
+    allowToggle?: boolean;
   };
 
 const defaultContext: AccordionItemContextType = {
@@ -62,6 +64,7 @@ const defaultContext: AccordionItemContextType = {
   currentValue: undefined,
   setCurrentValue: () => {},
   allowMultiple: true,
+  allowToggle: true,
 };
 
 export const AccordionItemContext: Context<AccordionItemContextType> = createContext<AccordionItemContextType>(

package/src/components/Accordion/types.ts

@@ -14,6 +14,10 @@ export type AccordionGroupOwnProps = {
    * Whether or not multiple items can be expanded at once
    */
   allowMultiple?: boolean;
+  /**
+   * Allow any expanded accordion item to be collapsed
+   */
+  allowToggle?: boolean;
 };
 
 export type AccordionItemOwnProps = {