@vibe/core 3.35.0 → 3.36.0

package/dist/mocked_classnames/components/Toggle/ToggleText.d.ts

@@ -1,7 +1,13 @@
 import { FC } from "react";
 import VibeComponentProps from "../../types/VibeComponentProps";
 export interface ToggleTextProps extends VibeComponentProps {
+    /**
+     * The text content inside the toggle.
+     */
     children: string;
+    /**
+     * If true, applies a disabled style to the text.
+     */
     disabled: boolean;
 }
 declare const ToggleText: FC<ToggleTextProps>;

package/dist/mocked_classnames/components/Tooltip/Tooltip.d.ts

@@ -11,115 +11,152 @@ import { TooltipPositions, TooltipTheme } from "./Tooltip.types";
 export type TooltipProps = TooltipBaseProps & (TooltipWithChildrenProps | TooltipWithoutChildrenProps);
 interface TooltipWithoutChildrenProps {
     /**
-     * When true, the tooltip would be rendered on a Dialog without children
-     * Use case is currently for rendering Tipseen with floating prop
+     * If true, the tooltip will be rendered even if there are no children.
      */
     forceRenderWithoutChildren: boolean;
+    /**
+     * The children elements that the tooltip is attached to.
+     */
     children?: ReactElement | Array<ReactElement>;
 }
 interface TooltipWithChildrenProps {
+    /**
+     * If true, the tooltip will be rendered even if there are no children.
+     */
     forceRenderWithoutChildren?: boolean;
+    /**
+     * The children elements that the tooltip is attached to.
+     */
     children: ReactElement | Array<ReactElement>;
 }
 interface TooltipBaseProps extends VibeComponentProps {
+    /**
+     * The content displayed inside the tooltip.
+     */
     content: ElementContent;
+    /**
+     * Inline styles applied to the tooltip container.
+     */
     style?: CSSProperties;
-    /** Class name for a tooltip's arrow */
+    /**
+     * Class name applied to the tooltip arrow.
+     */
     arrowClassName?: string;
     /**
-     * How much to move the dialog in relative to children
-     * main is the axis in which the position is aligned to
-     * secondary is the vertical axes to the position
+     * Offset values for positioning adjustments.
      */
     moveBy?: MoveBy;
+    /**
+     * The theme of the tooltip.
+     */
     theme?: TooltipTheme;
+    /**
+     * Function to get the container where the tooltip should be rendered.
+     */
     getContainer?: () => HTMLElement;
     /**
-     * how much delay should the Dialog wait until it should trigger the hide in MS
+     * Delay in milliseconds before hiding the tooltip.
      */
     hideDelay?: number;
     /**
-     * how much delay should the Dialog wait until it should trigger the show in MS
+     * Delay in milliseconds before showing the tooltip.
      */
     showDelay?: number;
+    /**
+     * If true, disables the slide animation of the tooltip.
+     */
     disableDialogSlide?: boolean;
+    /**
+     * The animation type used for showing/hiding the tooltip.
+     */
     animationType?: DialogAnimationType;
+    /**
+     * If true, renders the tooltip without a dialog.
+     */
     withoutDialog?: boolean;
     /**
-     * the container selector in which to append the dialog
-     * for examples: "body" , ".my-class", "#my-id"
+     * The CSS selector of the container where the tooltip should be rendered.
      */
     containerSelector?: string;
     /**
-     * With which delay tooltip is going to be shown
+     * Delay in milliseconds before showing the tooltip immediately.
      */
     immediateShowDelay?: number;
     /**
-     * when false, the arrow of the tooltip is hidden
+     * If false, hides the arrow of the tooltip.
      */
     tip?: boolean;
     /**
-     * Show the Dialog when the children is mounting
+     * If true, the tooltip is shown when the component mounts.
      */
     shouldShowOnMount?: boolean;
+    /**
+     * If true, hides the tooltip when the reference element is hidden.
+     */
     hideWhenReferenceHidden?: boolean;
+    /**
+     * Callback fired when the tooltip is hidden.
+     */
     onTooltipHide?: () => void;
+    /**
+     * Callback fired when the tooltip is shown.
+     */
     onTooltipShow?: () => void;
     /**
-     * PopperJS Modifiers type
+     * Custom Popper.js modifiers.
      * https://popper.js.org/docs/v2/modifiers/
      */
     modifiers?: Array<Modifier<unknown>>;
     /**
-     * Where the tooltip should be in reference to the children: Top, Left, Right, Bottom ...
+     * The placement of the tooltip relative to the reference element.
      */
     position?: TooltipPositions;
     /**
-     * an array of hide/show trigger - Tooltip.hideShowTriggers
+     * Events that trigger showing the tooltip.
      */
     showTrigger?: DialogTriggerEvent | Array<DialogTriggerEvent>;
     /**
-     * an array of hide/show trigger - Tooltip.hideShowTriggers
+     * Events that trigger hiding the tooltip.
      */
     hideTrigger?: DialogTriggerEvent | Array<DialogTriggerEvent>;
     /**
-     * If true, prevents open Tooltip from closing on mouseEnter and closes Tooltip, when mouse leaves it
+     * If true, prevents closing the tooltip when the mouse enters it.
      */
     showOnDialogEnter?: boolean;
     /**
-     * A Classname to be added to <span> element which wraps the children
+     * Class name applied to the reference wrapper element.
      */
     referenceWrapperClassName?: string;
     /**
-     * Treats keyboard focus/blur events as mouse-enter/mouse-leave events
+     * If true, keyboard focus/blur events behave like mouse enter/leave.
      */
     addKeyboardHideShowTriggersByDefault?: boolean;
     /**
-     * set the state of the tooltip - open/close - controlled component
+     * If true, controls the open state of the tooltip.
      */
     open?: boolean;
     /**
-     * Overwrites z-index of the tooltip
+     * The z-index applied to the tooltip.
      */
     zIndex?: number;
     /**
-     * The title of the tooltip
+     * The title of the tooltip.
      */
     title?: string;
     /**
-     * The image of the tooltip
+     * The image displayed inside the tooltip.
      */
     image?: string;
     /**
-     * The icon of the tooltip next to the title
+     * The icon displayed next to the title.
      */
     icon?: SubIcon;
     /**
-     * Sets the max width of the Tooltip, defaults to 240px
+     * The maximum width of the tooltip.
      */
     maxWidth?: number;
     /**
-     * Sets the text direction of the tooltip: "ltr", "rtl", or "auto"
+     * The text direction of the tooltip: "ltr", "rtl", or "auto".
      */
     dir?: "ltr" | "rtl" | "auto";
 }

package/dist/mocked_classnames/components/TransitionView/TransitionView.types.d.ts

@@ -2,8 +2,17 @@ import React from "react";
 import { VibeComponentProps } from "../../types";
 import { SlideDirection } from "../SlideTransition/SlideTransition.types";
 export interface TransitionViewProps extends VibeComponentProps {
+    /**
+     * The index of the currently active step.
+     */
     activeStep: number;
+    /**
+     * The direction of the transition between steps.
+     */
     direction: TransitionViewDirection;
+    /**
+     * The child elements representing the steps in the transition.
+     */
     children: React.ReactNode[];
 }
 export type TransitionViewDirection = SlideDirection;

package/dist/mocked_classnames/components/Typography/Typography.d.ts

@@ -6,29 +6,35 @@ import { TypographyAlign, TypographyColor } from "./Typography.types";
 import { TooltipProps } from "../Tooltip/Tooltip";
 export interface TypographyProps extends VibeComponentProps, HTMLAttributes<HTMLElement> {
     /**
-     * The element tag of the text component
+     * The HTML element tag used for the text component.
      */
     element?: string;
     /**
-     * The textual content
+     * The content inside the typography component.
      */
     children: ElementContent;
+    /**
+     * The text color.
+     */
     color?: TypographyColor;
+    /**
+     * The text alignment.
+     */
     align?: TypographyAlign;
     /**
-     * When the text is too long, cut the end of the text and display instead of it three dots (...)
+     * If true, truncates overflowing text with an ellipsis.
      */
     ellipsis?: boolean;
     /**
-     * Use this prop combined with the boolean ellipsis prop for truncate the text and add an ellipsis after a certain number of lines
+     * The maximum number of lines before truncating with an ellipsis.
      */
     maxLines?: number;
     /**
-     * All props are passed to the tooltip displayed when hovering over the text. By default, the tooltip will display when text contains an ellipsis and will show the full text
+     * Props passed to the tooltip displayed when hovering over the text.
      */
     tooltipProps?: Partial<TooltipProps>;
     /**
-     * Hide tooltip when hovering the text, by default the tooltip swill display when text contains an ellipsis
+     * If true, disables the tooltip that appears when text is truncated.
      */
     withoutTooltip?: boolean;
 }

package/dist/mocked_classnames/components/VirtualizedGrid/VirtualizedGrid.d.ts

@@ -5,45 +5,39 @@ import { VibeComponent } from "../../types";
 import { VirtualizedGridItemType as ItemType } from "./VirtualizedGrid.types";
 export interface VirtualizedGridProps extends VibeComponentProps {
     /**
-     * A list of items to be rendered
-     * {
-     *      item: ItemType,
-     *     index: number,
-     *     style: CSSProperties
-     * }[]
+     * The list of items to be rendered in the grid.
      */
     items: ItemType[];
     /**
-     * item render function
-     * returns `JSX.Element`
+     * Function that renders each item in the grid.
      */
     itemRenderer: (item: ItemType, index: number, style: CSSProperties) => ItemType | GridChildComponentProps<ItemType>;
     /**
-     * in order to calculate the number of rows to render in the grid, the component needs the height of the row
-     * return `number`
+     * Function that returns the row height.
      */
     getRowHeight: () => number;
     /**
-     * in order to calculate the number of columns to render in the grid, the component needs the width of the column
-     * return `number`
+     * Function that returns the column width.
      */
     getColumnWidth: () => number;
     /**
-     * returns Id of an items
-     * returns `string`
+     * Function that returns the unique ID of an item.
      */
     getItemId?: (item: ItemType, index: number) => string;
     /**
-     * index of the item to scroll to
+     * The index of the item to scroll to.
      */
     scrollToId?: number;
+    /**
+     * Callback fired when the grid is scrolled.
+     */
     onScroll?: (horizontalScrollDirection: ScrollDirection, scrollTop: number, scrollUpdateWasRequested: boolean) => void;
     /**
-     * callback to be called when the scroll is finished
+     * Callback fired when scrolling has finished.
      */
     onScrollToFinished?: () => void;
     /**
-     * a callback that is being called when the items are rendered
+     * Callback fired when items are rendered in the grid.
      */
     onItemsRendered?: ({ firstItemId, secondItemId, lastItemId, centerItemId, firstItemOffsetEnd, currentOffsetTop }: {
         firstItemId: string;
@@ -53,14 +47,20 @@ export interface VirtualizedGridProps extends VibeComponentProps {
         firstItemOffsetEnd: number;
         currentOffsetTop: number;
     }) => void;
+    /**
+     * The delay (in ms) for throttling the `onItemsRendered` callback.
+     */
     onItemsRenderedThrottleMs?: number;
     /**
-     * when the grid size changes
+     * Callback fired when the grid size is updated.
      */
     onSizeUpdate?: (width: number, height: number) => void;
+    /**
+     * Callback fired when the vertical scrollbar visibility changes.
+     */
     onVerticalScrollbarVisiblityChange?: (value: boolean) => void;
     /**
-     * class name to add to the component scrollable container
+     * Class name applied to the scrollable container.
      */
     scrollableClassName?: string;
 }

package/dist/mocked_classnames/components/VirtualizedList/VirtualizedList.d.ts

@@ -4,58 +4,47 @@ import VibeComponent from "../../types/VibeComponent";
 import { VirtualizedListItem, VirtualizedListLayout, VirtualizedListScrollDirection } from "./VirtualizedList.types";
 export interface VirtualizedListProps extends VibeComponentProps {
     /**
-     * class name to add to the component scrollable container
+     * Class name applied to the scrollable container.
      */
     scrollableClassName?: string;
     /**
-     * Layout/orientation of the list.
-     * Acceptable values are:
-     * - "vertical" (default) - Up/down scrolling.
-     * - "horizontal" - Left/right scrolling.
+     * The orientation of the list.
      */
     layout?: VirtualizedListLayout;
     /**
-     * A list of items to be rendered
+     * The list of items to be rendered.
      */
     items: VirtualizedListItem[];
     /**
-     * Will return the element which represent an item in the virtualized list.
-     * Returns `JSX.Element`
-     * @param item - item data
-     * @param _index - item index
-     * @param style - item style, must be injected to the item element wrapper for correct presentation of the item
+     * Function to render each item in the list.
      */
     itemRenderer: (item: VirtualizedListItem, index: number, style: CSSProperties) => ReactElement | JSX.Element;
     /**
-     * Deprecated - use getItemSize
-     * in order to calculate the number of items to render, the component needs the height of the items
-     * return `number`
+     * @deprecated - use `getItemSize`.
      */
     getItemHeight?: (item: VirtualizedListItem, index: number) => number;
     /**
-     * in order to calculate the number of items to render, the component needs the width/height of the items (according to layout)
-     * return `number`
+     * Function to get the size (height/width) of each item, based on layout.
      */
     getItemSize?: (item: VirtualizedListItem, index: number) => number;
     /**
-     * returns Id of an items
-     * returns `string`
+     * Function to get the unique ID of an item.
      */
     getItemId?: (item: VirtualizedListItem, index: number) => string;
     /**
-     * callback to be called when the scroll is finished
+     * Callback fired when the scroll animation is finished.
      */
     onScrollToFinished?: () => void;
     /**
-     * number of items to render (below/above the fold)
+     * Number of items to render above and below the visible portion.
      */
     overscanCount?: number;
     /**
-     * the speed of the scroll (in ms)
+     * The duration of the scroll animation in milliseconds.
      */
     scrollDuration?: number;
     /**
-     * a callback that is being called when the items are rendered
+     * Callback fired when items are rendered.
      */
     onItemsRendered?: ({ firstItemId, secondItemId, lastItemId, centerItemId, firstItemOffsetEnd, currentOffsetTop }: {
         firstItemId: string;
@@ -65,28 +54,45 @@ export interface VirtualizedListProps extends VibeComponentProps {
         firstItemOffsetEnd: number;
         currentOffsetTop: number;
     }) => void;
+    /**
+     * The delay (in ms) for throttling the `onItemsRendered` callback.
+     */
     onItemsRenderedThrottleMs?: number;
     /**
-     * when the list size changes - `=> (width, height)`
+     * Callback fired when the list size changes.
      */
     onSizeUpdate?: (width: number, height: number) => void;
     /**
-     * Deprecated - use onLayoutDirectionScrollbarVisibilityChange
+     * @deprecated - use `onLayoutDirectionScrollbarVisibilityChange`.
      */
     onVerticalScrollbarVisiblityChange?: (value: boolean) => void;
     /**
-     * Callback - called when the vertical/horizontal (depends on layout) scrollbar visibility changed
+     * Callback fired when the vertical or horizontal scrollbar visibility changes.
      */
     onLayoutDirectionScrollbarVisibilityChange?: (value: boolean) => void;
+    /**
+     * The ARIA role attribute applied to the list.
+     */
     role?: string;
+    /**
+     * The ARIA label for the list.
+     */
     ariaLabel?: string;
-    /** Custom style to pass to the component */
+    /**
+     * Custom inline styles applied to the list.
+     */
     style?: CSSProperties;
     /**
-     * index of the item to scroll to
+     * The ID of the item to scroll to.
      */
     scrollToId?: string;
+    /**
+     * Reference to the virtualized list component.
+     */
     virtualListRef?: ForwardedRef<HTMLElement>;
+    /**
+     * Callback fired when the list is scrolled.
+     */
     onScroll?: (horizontalScrollDirection: VirtualizedListScrollDirection, scrollTop: number, scrollUpdateWasRequested: boolean) => void;
 }
 declare const VirtualizedList: VibeComponent<VirtualizedListProps>;

package/dist/mocked_classnames/hooks/useKeyEvent/index.d.ts

@@ -8,15 +8,45 @@ declare enum Modifier {
     CTRL_OR_META = "ctrlOrMetaKey"
 }
 export interface UseKeyEventArgs {
+    /**
+     * The list of keys that should trigger the event.
+     */
     keys: KeyboardEvent["key"][];
+    /**
+     * Callback fired when a specified key is pressed.
+     */
     callback: GenericEventCallback;
+    /**
+     * Modifier key that must be pressed along with the specified key.
+     */
     modifier?: Modifier;
+    /**
+     * The keyboard event type to listen for (e.g., "keydown", "keyup").
+     */
     keyEventName?: string;
+    /**
+     * If true, ensures no modifier keys are pressed when handling the event.
+     */
     withoutAnyModifier?: boolean;
+    /**
+     * The element reference to listen for key events on.
+     */
     ref?: RefObject<HTMLElement | Document>;
+    /**
+     * If true, prevents fallback to listening on the document when no ref is provided.
+     */
     ignoreDocumentFallback?: boolean;
+    /**
+     * If true, uses capture phase instead of bubbling phase for event listening.
+     */
     capture?: boolean;
+    /**
+     * If true, calls `preventDefault` on the key event.
+     */
     preventDefault?: boolean;
+    /**
+     * If true, calls `stopPropagation` on the key event.
+     */
     stopPropagation?: boolean;
 }
 declare function useKeyEvent({ keys, callback, modifier, withoutAnyModifier, ref, ignoreDocumentFallback, capture, preventDefault, stopPropagation, keyEventName }: UseKeyEventArgs): void;

package/dist/mocked_classnames/hooks/usePopover.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import { Placement } from "./popoverConstants";
-export default function usePopover(referenceElement: HTMLElement, popperElement: HTMLElement, { isOpen, placement, observeContentResize, offset }: {
+export default function usePopover(referenceElement: HTMLElement, popperElement: HTMLElement, { isOpen, placement, observeContentResize, offset, fallbackPlacements }: {
     isOpen?: boolean;
     placement?: Placement;
     observeContentResize?: boolean;
     offset?: [number, number];
+    fallbackPlacements?: Placement[];
 }): {
     styles: {
         [key: string]: import("react").CSSProperties;

package/dist/mocked_classnames/hooks/useSwitch/index.d.ts

@@ -4,9 +4,21 @@ declare enum SwitchRole {
     BUTTON = "button"
 }
 export interface UseSwitchProps {
+    /**
+     * If true, controls the checked state of the switch.
+     */
     isChecked?: boolean;
+    /**
+     * The initial checked state when uncontrolled.
+     */
     defaultChecked?: boolean;
+    /**
+     * Callback fired when the switch state changes.
+     */
     onChange?: (value: boolean, event?: ChangeEvent<HTMLInputElement> | unknown) => void;
+    /**
+     * If true, disables interaction with the switch.
+     */
     isDisabled?: boolean;
 }
 declare function useSwitch({ isChecked, defaultChecked, onChange, isDisabled }?: UseSwitchProps): {

package/dist/mocked_classnames/hooks/useWizard/useWizard.types.d.ts

@@ -1,16 +1,49 @@
 export interface UseWizardProps {
+    /**
+     * The initial step index when the wizard starts.
+     */
     initialStep?: number;
+    /**
+     * The total number of steps in the wizard.
+     */
     stepCount: number;
+    /**
+     * Callback fired when the step changes.
+     */
     onStepChange?: (newStep: number, oldStep: number) => void;
+    /**
+     * Callback fired when the wizard reaches the last step.
+     */
     onFinish?: () => void;
 }
 export interface UseWizardReturnValue {
+    /**
+     * The index of the currently active step.
+     */
     activeStep: number;
+    /**
+     * The direction of the step transition.
+     */
     direction: WizardDirection;
+    /**
+     * Moves to the next step in the wizard.
+     */
     next: () => void;
+    /**
+     * Moves to the previous step in the wizard.
+     */
     back: () => void;
+    /**
+     * Moves to a specific step in the wizard.
+     */
     goToStep: (newStep: number) => void;
+    /**
+     * If true, the current step is the first step.
+     */
     isFirstStep: boolean;
+    /**
+     * If true, the current step is the last step.
+     */
     isLastStep: boolean;
 }
 export type WizardDirection = "forward" | "backward";

package/dist/mocked_classnames/src/components/Accordion/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../../../../src/components/Accordion/Accordion/Accordion.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, ReactElement, useCallback, useMemo, useRef, useState } from \"react\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport { VibeComponent, VibeComponentProps } from \"../../../types\";\nimport styles from \"./Accordion.module.scss\";\nimport { ComponentVibeId } from \"../../../tests/constants\";\n\nconst COMPONENT_ID = \"monday-accordion\";\n\nfunction defineChildId(index: number, props: { id: string }, accordionId: string) {\n  if (props.id) {\n    return props.id;\n  }\n  if (accordionId) {\n    return `${accordionId}--item-${index}`;\n  }\n  return `${COMPONENT_ID}--item-${index}`;\n}\n\nexport interface AccordionProps extends VibeComponentProps {\n  /**\n   * List of AccordionItems\n   */\n  children?: Array<ReactElement> | ReactElement;\n  /**\n   * is allowed multiple opened accordion items\n   */\n  allowMultiple?: boolean;\n  /**\n   * Unique TestId - can be used as Selector for integration tests and other needs (tracking, etc.)\n   */\n  \"data-testid\"?: string;\n  /**\n   * Array of initial expanded indexes\n   */\n  defaultIndex?: Array<number>;\n  /**\n   * A class name to be added to the accordion container\n   */\n  className?: string;\n  /**\n   * An id to be added the accordion container.\n   */\n  id?: string;\n}\n\nconst Accordion: VibeComponent<AccordionProps, unknown> & object = forwardRef(\n  (\n    {\n      children: originalChildren = null,\n      allowMultiple = false,\n      \"data-testid\": dataTestId = COMPONENT_ID,\n      defaultIndex = [],\n      className = \"\",\n      id\n    }: AccordionProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [expandedItems, setExpandedItems] = useState(defaultIndex);\n\n    const children = useMemo(() => React.Children.toArray(originalChildren), [originalChildren]);\n\n    const isChildExpanded = useCallback(\n      (itemIndex: number) => {\n        return expandedItems.includes(itemIndex);\n      },\n      [expandedItems]\n    );\n\n    const onChildClick = useCallback(\n      (itemIndex: number) => {\n        if (allowMultiple) {\n          const newExpandedItems = [...expandedItems];\n          if (isChildExpanded(itemIndex)) {\n            const index = newExpandedItems.indexOf(itemIndex);\n            if (index > -1) {\n              newExpandedItems.splice(index, 1);\n            }\n          } else {\n            newExpandedItems.push(itemIndex);\n          }\n          setExpandedItems(newExpandedItems);\n          return;\n        }\n\n        if (isChildExpanded(itemIndex)) {\n          setExpandedItems([]);\n        } else {\n          setExpandedItems([itemIndex]);\n        }\n      },\n      [isChildExpanded, expandedItems, allowMultiple]\n    );\n\n    const renderChildElements = useMemo(() => {\n      return React.Children.map(children, (child: ReactElement, itemIndex) => {\n        const originalProps = { ...child?.props };\n        const childId = defineChildId(itemIndex, originalProps, id);\n        return React.cloneElement(child, {\n          ...originalProps,\n          id: childId,\n          onClickAccordionCallback: () => {\n            onChildClick(itemIndex);\n          },\n          open: isChildExpanded(itemIndex),\n          expandCollapseComponentClassName: cx(styles.accordionItemExpandCollapse, {\n            [styles.accordionItemExpandCollapseLast]: itemIndex === children.length - 1\n          })\n        });\n      });\n    }, [children, id, isChildExpanded, onChildClick]);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={cx(styles.accordion, className)}\n        data-testid={dataTestId}\n        data-vibe={ComponentVibeId.ACCORDION}\n        id={id}\n      >\n        {children && renderChildElements}\n      </div>\n    );\n  }\n);\n\nexport default Accordion;\n"],"names":["COMPONENT_ID","Accordion","forwardRef","_ref","ref","_ref$children","children","originalChildren","_ref$allowMultiple","allowMultiple","_ref$dataTestid","dataTestId","_ref$defaultIndex","defaultIndex","_ref$className","className","id","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","expandedItems","setExpandedItems","useMemo","React","Children","toArray","isChildExpanded","useCallback","itemIndex","includes","onChildClick","newExpandedItems","_toConsumableArray","index","indexOf","splice","push","renderChildElements","map","child","props","accordionId","originalProps","Object","assign","childId","concat","cloneElement","onClickAccordionCallback","open","expandCollapseComponentClassName","cx","styles","accordionItemExpandCollapse","_defineProperty","accordionItemExpandCollapseLast","length","createElement","accordion","ComponentVibeId","ACCORDION"],"mappings":"0YAOA,IAAMA,EAAe,mBAuCfC,IAAAA,EAA6DC,GACjE,SAAAC,EASEC,GACE,IAAAC,EAAAF,EARAG,SAAUC,OAAmB,IAAHF,EAAG,KAAIA,EAAAG,EAAAL,EACjCM,cAAAA,OAAgB,IAAHD,GAAQA,EAAAE,EAAAP,EACrB,eAAeQ,OAAaX,IAAHU,EAAGV,EAAYU,EAAAE,EAAAT,EACxCU,aAAAA,OAAe,IAAHD,EAAG,GAAEA,EAAAE,EAAAX,EACjBY,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EACdE,EAAEb,EAAFa,GAIIC,EAAeC,EAAO,MACtBC,EAAYC,EAAYhB,EAAKa,GAEnCI,EAA0CC,EAAST,GAAaU,EAAAC,EAAAH,EAAA,GAAzDI,EAAaF,EAAA,GAAEG,EAAgBH,EAAA,GAEhCjB,EAAWqB,GAAQ,WAAA,OAAMC,EAAMC,SAASC,QAAQvB,KAAmB,CAACA,IAEpEwB,EAAkBC,GACtB,SAACC,GACC,OAAOR,EAAcS,SAASD,EAChC,GACA,CAACR,IAGGU,EAAeH,GACnB,SAACC,GACC,GAAIxB,EAAJ,CACE,IAAM2B,EAAgBC,EAAOZ,GAC7B,GAAIM,EAAgBE,GAAY,CAC9B,IAAMK,EAAQF,EAAiBG,QAAQN,GACnCK,GAAS,GACXF,EAAiBI,OAAOF,EAAO,EAElC,MACCF,EAAiBK,KAAKR,GAExBP,EAAiBU,EAElB,MAEGL,EAAgBE,GAClBP,EAAiB,IAEjBA,EAAiB,CAACO,GAErB,GACD,CAACF,EAAiBN,EAAehB,IAG7BiC,EAAsBf,GAAQ,WAClC,OAAOC,EAAMC,SAASc,IAAIrC,GAAU,SAACsC,EAAqBX,GACxD,IA1FeK,EAAeO,EAAuBC,EA0F/CC,EAAqBC,OAAAC,OAAA,CAAA,EAAAL,eAAAA,EAAOC,OAC5BK,GA3FSZ,EA2FeL,EA3FuBa,EA2FG9B,GA3F1B6B,EA2FWE,GA1FrC/B,GACD6B,EAAM7B,GAEX8B,EACF,GAAAK,OAAUL,EAAWK,WAAAA,OAAUb,GAEjC,GAAAa,OAAUnD,EAAYmD,WAAAA,OAAUb,IAqF1B,OAAOV,EAAMwB,aAAaR,EACrBI,OAAAC,OAAAD,OAAAC,OAAA,GAAAF,GACH,CAAA/B,GAAIkC,EACJG,yBAA0B,WACxBlB,EAAaF,EACd,EACDqB,KAAMvB,EAAgBE,GACtBsB,iCAAkCC,EAAGC,EAAOC,4BAA2BC,EACpEF,CAAAA,EAAAA,EAAOG,gCAAkC3B,IAAc3B,EAASuD,OAAS,MAGhF,GACD,GAAE,CAACvD,EAAUU,EAAIe,EAAiBI,IAEnC,OACEP,EAAAkC,cAAA,MAAA,CACE1D,IAAKe,EACLJ,UAAWyC,EAAGC,EAAOM,UAAWhD,GACnB,cAAAJ,EACF,YAAAqD,EAAgBC,UAC3BjD,GAAIA,GAEHV,GAAYoC,EAGnB"}
+{"version":3,"file":"Accordion.js","sources":["../../../../../../src/components/Accordion/Accordion/Accordion.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, ReactElement, useCallback, useMemo, useRef, useState } from \"react\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport { VibeComponent, VibeComponentProps } from \"../../../types\";\nimport styles from \"./Accordion.module.scss\";\nimport { ComponentVibeId } from \"../../../tests/constants\";\n\nconst COMPONENT_ID = \"monday-accordion\";\n\nfunction defineChildId(index: number, props: { id: string }, accordionId: string) {\n  if (props.id) {\n    return props.id;\n  }\n  if (accordionId) {\n    return `${accordionId}--item-${index}`;\n  }\n  return `${COMPONENT_ID}--item-${index}`;\n}\n\nexport interface AccordionProps extends VibeComponentProps {\n  /**\n   * The content of the accordion (`AccordionItem` components).\n   */\n  children?: Array<ReactElement> | ReactElement;\n  /**\n   * If true, multiple accordion items can be expanded at the same time.\n   */\n  allowMultiple?: boolean;\n  /**\n   * An array of initially expanded item indexes.\n   */\n  defaultIndex?: Array<number>;\n}\n\nconst Accordion: VibeComponent<AccordionProps, unknown> & object = forwardRef(\n  (\n    {\n      children: originalChildren = null,\n      allowMultiple = false,\n      \"data-testid\": dataTestId = COMPONENT_ID,\n      defaultIndex = [],\n      className = \"\",\n      id\n    }: AccordionProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    const [expandedItems, setExpandedItems] = useState(defaultIndex);\n\n    const children = useMemo(() => React.Children.toArray(originalChildren), [originalChildren]);\n\n    const isChildExpanded = useCallback(\n      (itemIndex: number) => {\n        return expandedItems.includes(itemIndex);\n      },\n      [expandedItems]\n    );\n\n    const onChildClick = useCallback(\n      (itemIndex: number) => {\n        if (allowMultiple) {\n          const newExpandedItems = [...expandedItems];\n          if (isChildExpanded(itemIndex)) {\n            const index = newExpandedItems.indexOf(itemIndex);\n            if (index > -1) {\n              newExpandedItems.splice(index, 1);\n            }\n          } else {\n            newExpandedItems.push(itemIndex);\n          }\n          setExpandedItems(newExpandedItems);\n          return;\n        }\n\n        if (isChildExpanded(itemIndex)) {\n          setExpandedItems([]);\n        } else {\n          setExpandedItems([itemIndex]);\n        }\n      },\n      [isChildExpanded, expandedItems, allowMultiple]\n    );\n\n    const renderChildElements = useMemo(() => {\n      return React.Children.map(children, (child: ReactElement, itemIndex) => {\n        const originalProps = { ...child?.props };\n        const childId = defineChildId(itemIndex, originalProps, id);\n        return React.cloneElement(child, {\n          ...originalProps,\n          id: childId,\n          onClickAccordionCallback: () => {\n            onChildClick(itemIndex);\n          },\n          open: isChildExpanded(itemIndex),\n          expandCollapseComponentClassName: cx(styles.accordionItemExpandCollapse, {\n            [styles.accordionItemExpandCollapseLast]: itemIndex === children.length - 1\n          })\n        });\n      });\n    }, [children, id, isChildExpanded, onChildClick]);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={cx(styles.accordion, className)}\n        data-testid={dataTestId}\n        data-vibe={ComponentVibeId.ACCORDION}\n        id={id}\n      >\n        {children && renderChildElements}\n      </div>\n    );\n  }\n);\n\nexport default Accordion;\n"],"names":["COMPONENT_ID","Accordion","forwardRef","_ref","ref","_ref$children","children","originalChildren","_ref$allowMultiple","allowMultiple","_ref$dataTestid","dataTestId","_ref$defaultIndex","defaultIndex","_ref$className","className","id","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","expandedItems","setExpandedItems","useMemo","React","Children","toArray","isChildExpanded","useCallback","itemIndex","includes","onChildClick","newExpandedItems","_toConsumableArray","index","indexOf","splice","push","renderChildElements","map","child","props","accordionId","originalProps","Object","assign","childId","concat","cloneElement","onClickAccordionCallback","open","expandCollapseComponentClassName","cx","styles","accordionItemExpandCollapse","_defineProperty","accordionItemExpandCollapseLast","length","createElement","accordion","ComponentVibeId","ACCORDION"],"mappings":"0YAOA,IAAMA,EAAe,mBA2BfC,IAAAA,EAA6DC,GACjE,SAAAC,EASEC,GACE,IAAAC,EAAAF,EARAG,SAAUC,OAAmB,IAAHF,EAAG,KAAIA,EAAAG,EAAAL,EACjCM,cAAAA,OAAgB,IAAHD,GAAQA,EAAAE,EAAAP,EACrB,eAAeQ,OAAaX,IAAHU,EAAGV,EAAYU,EAAAE,EAAAT,EACxCU,aAAAA,OAAe,IAAHD,EAAG,GAAEA,EAAAE,EAAAX,EACjBY,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EACdE,EAAEb,EAAFa,GAIIC,EAAeC,EAAO,MACtBC,EAAYC,EAAYhB,EAAKa,GAEnCI,EAA0CC,EAAST,GAAaU,EAAAC,EAAAH,EAAA,GAAzDI,EAAaF,EAAA,GAAEG,EAAgBH,EAAA,GAEhCjB,EAAWqB,GAAQ,WAAA,OAAMC,EAAMC,SAASC,QAAQvB,KAAmB,CAACA,IAEpEwB,EAAkBC,GACtB,SAACC,GACC,OAAOR,EAAcS,SAASD,EAChC,GACA,CAACR,IAGGU,EAAeH,GACnB,SAACC,GACC,GAAIxB,EAAJ,CACE,IAAM2B,EAAgBC,EAAOZ,GAC7B,GAAIM,EAAgBE,GAAY,CAC9B,IAAMK,EAAQF,EAAiBG,QAAQN,GACnCK,GAAS,GACXF,EAAiBI,OAAOF,EAAO,EAElC,MACCF,EAAiBK,KAAKR,GAExBP,EAAiBU,EAElB,MAEGL,EAAgBE,GAClBP,EAAiB,IAEjBA,EAAiB,CAACO,GAErB,GACD,CAACF,EAAiBN,EAAehB,IAG7BiC,EAAsBf,GAAQ,WAClC,OAAOC,EAAMC,SAASc,IAAIrC,GAAU,SAACsC,EAAqBX,GACxD,IA9EeK,EAAeO,EAAuBC,EA8E/CC,EAAqBC,OAAAC,OAAA,CAAA,EAAAL,eAAAA,EAAOC,OAC5BK,GA/ESZ,EA+EeL,EA/EuBa,EA+EG9B,GA/E1B6B,EA+EWE,GA9ErC/B,GACD6B,EAAM7B,GAEX8B,EACF,GAAAK,OAAUL,EAAWK,WAAAA,OAAUb,GAEjC,GAAAa,OAAUnD,EAAYmD,WAAAA,OAAUb,IAyE1B,OAAOV,EAAMwB,aAAaR,EACrBI,OAAAC,OAAAD,OAAAC,OAAA,GAAAF,GACH,CAAA/B,GAAIkC,EACJG,yBAA0B,WACxBlB,EAAaF,EACd,EACDqB,KAAMvB,EAAgBE,GACtBsB,iCAAkCC,EAAGC,EAAOC,4BAA2BC,EACpEF,CAAAA,EAAAA,EAAOG,gCAAkC3B,IAAc3B,EAASuD,OAAS,MAGhF,GACD,GAAE,CAACvD,EAAUU,EAAIe,EAAiBI,IAEnC,OACEP,EAAAkC,cAAA,MAAA,CACE1D,IAAKe,EACLJ,UAAWyC,EAAGC,EAAOM,UAAWhD,GACnB,cAAAJ,EACF,YAAAqD,EAAgBC,UAC3BjD,GAAIA,GAEHV,GAAYoC,EAGnB"}

package/dist/mocked_classnames/src/components/Accordion/Accordion/Accordion.module.scss.js

@@ -1,2 +1,2 @@
-var e={accordion:"accordion",accordionItemExpandCollapse:"accordionItemExpandCollapse",accordionItemExpandCollapseLast:"accordionItemExpandCollapseLast"};!function(e){const o="s_id-e9215f4fd1c6_3_34_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+o))return;const r=document.createElement("style");r.id=o,n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=e)}(".accordion {\n  height: fit-content;\n  border: 1px solid var(--ui-border-color);\n  box-sizing: border-box;\n  border-radius: var(--border-radius-small);\n}\n\n.accordion .accordionItemExpandCollapse {\n  border-radius: 0;\n  border-top: none;\n  border-left: none;\n  border-right: none;\n  border-color: var(--ui-border-color);\n}\n\n.accordion .accordionItemExpandCollapseLast {\n  border-bottom: none;\n}");export{e as default};
+var e={accordion:"accordion",accordionItemExpandCollapse:"accordionItemExpandCollapse",accordionItemExpandCollapseLast:"accordionItemExpandCollapseLast"};!function(e){const o="s_id-e9215f4fd1c6_3_35_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+o))return;const r=document.createElement("style");r.id=o,n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=e)}(".accordion {\n  height: fit-content;\n  border: 1px solid var(--ui-border-color);\n  box-sizing: border-box;\n  border-radius: var(--border-radius-small);\n}\n\n.accordion .accordionItemExpandCollapse {\n  border-radius: 0;\n  border-top: none;\n  border-left: none;\n  border-right: none;\n  border-color: var(--ui-border-color);\n}\n\n.accordion .accordionItemExpandCollapseLast {\n  border-bottom: none;\n}");export{e as default};
 //# sourceMappingURL=Accordion.module.scss.js.map