@conveyorhq/arrow-ds 1.120.0 → 1.121.1

package/package.json

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

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

@@ -3,8 +3,17 @@ import { BoxProps } from "../Box";
 import { StackProps } from "../Stack";
 import { IconProps } from "../Icon";
 import type { AccordionOwnProps, AccordionItemOwnProps, AccordionDisclosureProps, AccordionGroupOwnProps } from "./types";
-export declare type AccordionGroupProps = AccordionGroupOwnProps & Pick<StackProps, "children" | "spacing" | "className">;
-export declare const AccordionGroup: ({ children, spacing, defaultValue, disableAnimation, className, ...rest }: AccordionGroupProps) => JSX.Element;
+declare type AccordionGroupChildProps = {
+    currentValue: string;
+};
+declare type AccordionGroupChildFunction = {
+    children(props: AccordionGroupChildProps): React.ReactElement;
+};
+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 type AccordionItemProps = AccordionItemOwnProps & BoxProps;
 export declare const AccordionItem: ({ value, defaultIsOpen: defaultIsOpenProp, children, className, ...rest }: AccordionItemProps) => JSX.Element;
 declare type AccordionButtonChildProps = Omit<AccordionDisclosureProps, "onToggle">;
@@ -31,7 +40,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, disableAnimation, className, ...rest }: AccordionGroupProps) => JSX.Element;
+    Group: ({ children, spacing, defaultValue, disableAnimation, allowMultiple, 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;

package/public/components/Accordion/Accordion.js

@@ -20,31 +20,62 @@ 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, className, ...rest }) => {
+const AccordionGroup = ({ children, spacing = 0, defaultValue, disableAnimation, allowMultiple = true, className, ...rest }) => {
     const totalItems = react_1.default.Children.count(children);
-    return (react_1.default.createElement(context_1.AccordionGroupContext.Provider, { value: { defaultValue, disableAnimation, totalItems } },
-        react_1.default.createElement(Stack_1.Stack, Object.assign({ orientation: types_1.ORIENTATION.VERTICAL, spacing: spacing, className: className }, rest), children)));
+    const [currentValue, setCurrentValue] = react_1.default.useState(defaultValue || "");
+    const context = react_1.default.useMemo(() => ({
+        defaultValue,
+        disableAnimation,
+        totalItems,
+        currentValue,
+        setCurrentValue,
+        allowMultiple,
+    }), [defaultValue, disableAnimation, totalItems, currentValue, allowMultiple]);
+    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 } = context_1.useAccordionGroupContext();
+    const { defaultValue, currentValue, setCurrentValue, allowMultiple, } = context_1.useAccordionGroupContext();
     const hasDefaultValue = typeof defaultValue === "undefined" ? false : defaultValue === value;
     const defaultIsOpen = typeof defaultIsOpenProp === "undefined"
         ? hasDefaultValue
         : defaultIsOpenProp;
-    const { isOpen, onToggle, onClose } = hooks_1.useDisclosure(defaultIsOpen);
+    const { isOpen, onToggle, onClose, onOpen } = hooks_1.useDisclosure(defaultIsOpen);
     const id = `accordion-${auto_id_1.useId()}`;
     const buttonId = `${id}-button`;
     const contentId = `${id}-content`;
-    return (react_1.default.createElement(context_1.AccordionItemContext.Provider, { value: {
-            defaultIsOpen,
-            isOpen,
-            onToggle,
-            onClose,
-            buttonId,
-            contentId,
-            value,
-        } },
+    const context = react_1.default.useMemo(() => ({
+        defaultIsOpen,
+        isOpen,
+        onToggle,
+        onClose,
+        onOpen,
+        buttonId,
+        contentId,
+        value,
+        currentValue,
+        setCurrentValue,
+        allowMultiple,
+    }), [
+        defaultIsOpen,
+        isOpen,
+        onToggle,
+        onClose,
+        onOpen,
+        buttonId,
+        contentId,
+        value,
+        currentValue,
+        setCurrentValue,
+        allowMultiple,
+    ]);
+    react_1.default.useEffect(() => {
+        if (!allowMultiple && currentValue !== value) {
+            onClose();
+        }
+    }, [allowMultiple, currentValue, value, onClose]);
+    return (react_1.default.createElement(context_1.AccordionItemContext.Provider, { value: context },
         react_1.default.createElement(Box_1.Box, Object.assign({ "data-component": "accordion", className: classnames_1.default(cn(), className, {
                 [cn({ m: "isOpen" })]: isOpen,
             }) }, rest), children)));
@@ -52,7 +83,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, } = context_1.useAccordionItemContext();
+    const { buttonId, contentId, isOpen, onToggle, onClose, onOpen, value, setCurrentValue, } = 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) => {
@@ -60,11 +91,14 @@ exports.AccordionButton = react_1.default.forwardRef((props, forwardedRef) => {
             if (onClick) {
                 onClick(event);
             }
+            if (setCurrentValue && value) {
+                setCurrentValue(value);
+            }
             if (onToggle) {
                 onToggle();
             }
         } }, rest), typeof children === "function"
-        ? children({ isOpen, onClose })
+        ? children({ isOpen, onClose, onOpen })
         : children));
 });
 const AccordionIcon = ({ className, direction = "down", color, }) => {

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

@@ -2,12 +2,17 @@ import { Context } from "react";
 import type { AccordionGroupOwnProps, AccordionItemOwnProps, AccordionDisclosureProps } from "./types";
 declare type AccordionGroupContextType = {
     totalItems?: number;
+    currentValue?: string;
+    setCurrentValue?(value: string): void;
 } & AccordionGroupOwnProps;
 export declare const AccordionGroupContext: Context<AccordionGroupContextType>;
 export declare function useAccordionGroupContext(): AccordionGroupContextType;
 declare type AccordionItemContextType = AccordionItemOwnProps & AccordionDisclosureProps & {
     buttonId: string;
     contentId: string;
+    currentValue?: string;
+    setCurrentValue?(value: string): void;
+    allowMultiple?: boolean;
 };
 export declare const AccordionItemContext: Context<AccordionItemContextType>;
 export declare function useAccordionItemContext(): AccordionItemContextType;

package/public/components/Accordion/context.js

@@ -6,6 +6,9 @@ const defaultGroupContext = {
     defaultValue: undefined,
     disableAnimation: false,
     totalItems: 0,
+    currentValue: undefined,
+    setCurrentValue: () => { },
+    allowMultiple: true,
 };
 exports.AccordionGroupContext = react_1.createContext(defaultGroupContext);
 function useAccordionGroupContext() {
@@ -20,8 +23,12 @@ const defaultContext = {
     isOpen: false,
     onToggle: () => { },
     onClose: () => { },
+    onOpen: () => { },
     buttonId: "accordion-0-button",
     contentId: "accordion-0-content",
+    currentValue: undefined,
+    setCurrentValue: () => { },
+    allowMultiple: true,
 };
 exports.AccordionItemContext = react_1.createContext(defaultContext);
 function useAccordionItemContext() {

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

@@ -3,6 +3,7 @@ import type { DisclosureProps } from "../../types";
 export declare type AccordionGroupOwnProps = {
     defaultValue?: string;
     disableAnimation?: boolean;
+    allowMultiple?: boolean;
 };
 export declare type AccordionItemOwnProps = {
     defaultIsOpen?: boolean;
@@ -15,4 +16,4 @@ export declare type AccordionOwnProps = Pick<AccordionItemOwnProps, "defaultIsOp
     iconSlot?: ReactNode;
     removePadding?: ReactNode;
 };
-export declare type AccordionDisclosureProps = Pick<DisclosureProps, "isOpen" | "onToggle" | "onClose">;
+export declare type AccordionDisclosureProps = DisclosureProps;

package/public/css/styles.css

@@ -8664,6 +8664,11 @@ override built-in Image component classes */
   border-color: rgb(51 198 159 / var(--tw-border-opacity));
 }
 
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 251 252 / var(--tw-bg-opacity));
+}
+
 .bg-gray-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(222 231 238 / var(--tw-bg-opacity));
@@ -8679,11 +8684,6 @@ override built-in Image component classes */
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-gray-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 251 252 / var(--tw-bg-opacity));
-}
-
 .bg-gray-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(244 247 249 / var(--tw-bg-opacity));