@sproutsocial/seeds-react-accordion 0.4.32 → 0.4.46

package/src/Accordion.tsx

@@ -1,83 +0,0 @@
-import React, { createContext, type ReactElement } from "react";
-import * as RadixAccordion from "@radix-ui/react-accordion";
-import { Icon } from "@sproutsocial/seeds-react-icon";
-import { type TypeAccordionProps } from "./AccordionTypes";
-
-export const AccordionContext = createContext<{
-  triggerIcon: ReactElement | null;
-  triggerPosition: string;
-  styled: boolean;
-}>({
-  triggerIcon: null,
-  triggerPosition: "",
-  styled: false,
-});
-
-export const Accordion = ({
-  children,
-  collapsible,
-  defaultValue = ["item-0"],
-  triggerPosition = "right",
-  triggerIcon = <Icon className="triggerIcon" name="chevron-down-outline" />,
-  type = "multiple",
-  styled = true,
-  value,
-  onValueChange,
-}: TypeAccordionProps) => {
-  const contextValue = {
-    triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,
-    triggerPosition,
-    styled,
-  };
-
-  if (type === "single") {
-    // Determine if controlled or uncontrolled
-    const isControlled = value !== undefined;
-
-    return (
-      <RadixAccordion.Root
-        type="single"
-        value={
-          isControlled ? (Array.isArray(value) ? value[0] : value) : undefined
-        }
-        defaultValue={
-          !isControlled && defaultValue
-            ? Array.isArray(defaultValue)
-              ? defaultValue[0]
-              : defaultValue
-            : undefined
-        }
-        onValueChange={onValueChange as ((value: string) => void) | undefined}
-        collapsible={collapsible}
-      >
-        <AccordionContext.Provider value={contextValue}>
-          {children}
-        </AccordionContext.Provider>
-      </RadixAccordion.Root>
-    );
-  }
-
-  // Multiple mode
-  const isControlled = value !== undefined;
-
-  return (
-    <RadixAccordion.Root
-      type="multiple"
-      value={
-        isControlled ? (Array.isArray(value) ? value : [value]) : undefined
-      }
-      defaultValue={
-        !isControlled && defaultValue
-          ? Array.isArray(defaultValue)
-            ? defaultValue
-            : [defaultValue]
-          : undefined
-      }
-      onValueChange={onValueChange as ((value: string[]) => void) | undefined}
-    >
-      <AccordionContext.Provider value={contextValue}>
-        {children}
-      </AccordionContext.Provider>
-    </RadixAccordion.Root>
-  );
-};

package/src/AccordionContent.tsx

@@ -1,23 +0,0 @@
-import { StyledRadixAccordionContent, ContentContainer } from "./styles";
-import { type TypeAccordionSystemProps } from "./AccordionTypes";
-import { AccordionContext } from "./Accordion";
-import { useContext } from "react";
-
-interface TypeAccordionContentProps extends TypeAccordionSystemProps {
-  children?: React.ReactNode;
-}
-
-export const AccordionContent = ({
-  children,
-  ...rest
-}: TypeAccordionContentProps) => {
-  const { styled } = useContext(AccordionContext);
-
-  return (
-    <StyledRadixAccordionContent data-styled={styled}>
-      <ContentContainer data-styled={styled} {...rest}>
-        {children}
-      </ContentContainer>
-    </StyledRadixAccordionContent>
-  );
-};

package/src/AccordionItem.tsx

@@ -1,11 +0,0 @@
-import * as RadixAccordion from "@radix-ui/react-accordion";
-import { type TypeAccordionItemProps } from "./AccordionTypes";
-import { StyledAccordionItem } from "./styles";
-
-export const AccordionItem = ({ children, value }: TypeAccordionItemProps) => {
-  return (
-    <StyledAccordionItem className="accordion-item" value={value}>
-      {children}
-    </StyledAccordionItem>
-  );
-};

package/src/AccordionTrigger.tsx

@@ -1,161 +0,0 @@
-import { TriggerContainer } from "./styles";
-import { type TypeAccordionTriggerProps } from "./AccordionTypes";
-import { Box } from "@sproutsocial/seeds-react-box";
-import { Button } from "@sproutsocial/seeds-react-button";
-import { Icon } from "@sproutsocial/seeds-react-icon";
-import {
-  ActionMenu,
-  MenuContent,
-  MenuItem,
-  MenuGroup,
-  MenuToggleButton,
-} from "@sproutsocial/seeds-react-menu";
-import React, { useContext } from "react";
-import { AccordionContext } from "./Accordion";
-import { CollapsibleContentHeader } from "@sproutsocial/seeds-react-content-header";
-import * as RadixAccordion from "@radix-ui/react-accordion";
-
-const MAX_RELATED_ACTIONS = 2;
-
-// Wrapper to adapt RadixAccordion.Trigger to the ContentHeader trigger interface
-const AccordionTriggerWrapper = ({
-  children,
-}: {
-  children: React.ReactElement;
-}) => <RadixAccordion.Trigger asChild>{children}</RadixAccordion.Trigger>;
-
-export const AccordionTrigger = ({
-  children,
-  leftSlot,
-  relatedActions,
-  overflowMenu,
-  rightSlot,
-  title,
-  headingLevel = "h4",
-  ...rest
-}: TypeAccordionTriggerProps) => {
-  const { triggerIcon, triggerPosition, styled } = useContext(AccordionContext);
-
-  // Validate and limit related actions
-  const validatedActions = relatedActions?.slice(0, MAX_RELATED_ACTIONS);
-
-  // Extract system props to distribute to appropriate container
-  const {
-    color,
-    padding,
-    paddingBottom,
-    paddingTop,
-    paddingX,
-    paddingY,
-    paddingLeft,
-    paddingRight,
-    p,
-    pb,
-    pt,
-    pr,
-    pl,
-    px,
-    py,
-    fontFamily,
-    fontSize,
-    fontStyle,
-    fontWeight,
-    lineHeight,
-    textAlign,
-    ...triggerProps
-  } = rest;
-
-  const shouldRenderActionsBlock = Boolean(overflowMenu || validatedActions);
-
-  // Render overflow menu from config
-  const renderedOverflowMenu = overflowMenu && (
-    <ActionMenu
-      menuToggleElement={
-        <MenuToggleButton
-          aria-label={overflowMenu["aria-label"]}
-          appearance="unstyled"
-          color={color}
-        >
-          <Icon name="ellipsis-horizontal-outline" aria-hidden="true" />
-        </MenuToggleButton>
-      }
-    >
-      <MenuContent>
-        <MenuGroup id="overflow-actions">
-          {overflowMenu.items.map((item, index) => {
-            const { iconName, id, onClick, children, ...menuItemProps } = item;
-            return (
-              <MenuItem
-                key={id || `overflow-item-${index}`}
-                id={id || `overflow-item-${index}`}
-                onClick={onClick}
-                {...menuItemProps}
-              >
-                {iconName ? (
-                  <Box
-                    display="flex"
-                    alignItems="center"
-                    gap="300"
-                    color={color}
-                  >
-                    <Icon name={iconName} />
-                    {children}
-                  </Box>
-                ) : (
-                  children
-                )}
-              </MenuItem>
-            );
-          })}
-        </MenuGroup>
-      </MenuContent>
-    </ActionMenu>
-  );
-
-  // Render related actions from config
-  const renderedRelatedActions = validatedActions &&
-    validatedActions.length > 0 && (
-      <Box display="flex">
-        {validatedActions.map((action, index) => (
-          <Button
-            key={`${action.iconName}-${index}`}
-            onClick={action.onClick}
-            aria-label={action["aria-label"]}
-            color={color}
-          >
-            <Icon name={action.iconName} aria-hidden="true" />
-          </Button>
-        ))}
-      </Box>
-    );
-
-  // Compose actions into a single ReactNode for ContentHeader
-  const renderedActions = shouldRenderActionsBlock ? (
-    <Box mr={300} display="flex">
-      {renderedOverflowMenu}
-      {renderedRelatedActions}
-    </Box>
-  ) : undefined;
-
-  return (
-    <TriggerContainer
-      data-styled={styled}
-      $styled={styled}
-      data-qa-trigger="HERE"
-      color={color}
-      {...triggerProps}
-    >
-      <CollapsibleContentHeader
-        title={title}
-        headingLevel={headingLevel}
-        leftSlot={leftSlot}
-        rightSlot={rightSlot}
-        headerActions={renderedActions}
-        trigger={AccordionTriggerWrapper}
-        triggerPosition={triggerPosition as "left" | "right"}
-        triggerIcon={triggerIcon}
-        bordered={false}
-      />
-    </TriggerContainer>
-  );
-};

package/src/AccordionTypes.ts

@@ -1,80 +0,0 @@
-import * as React from "react";
-import {
-  type TypeSystemCommonProps,
-  type TypeBorderSystemProps,
-  type TypeFlexboxSystemProps,
-  type TypeLayoutSystemProps,
-  type TypeStyledComponentsCommonProps,
-  type TypeSystemTypographyProps,
-} from "@sproutsocial/seeds-react-system-props";
-import { type TypeIconName } from "@sproutsocial/seeds-react-icon";
-import { type TypeMenuItemProps } from "@sproutsocial/seeds-react-menu";
-import { type TypeHeadingLevel } from "@sproutsocial/seeds-react-content-header";
-
-export interface TypeAccordionSystemProps
-  extends Omit<React.ComponentPropsWithoutRef<"div">, "color">,
-    TypeStyledComponentsCommonProps,
-    TypeSystemCommonProps,
-    TypeBorderSystemProps,
-    TypeFlexboxSystemProps,
-    TypeLayoutSystemProps,
-    TypeSystemTypographyProps {}
-
-export interface TypeAccordionProps {
-  children?: React.ReactNode;
-  collapsible?: boolean;
-  defaultValue?: string | string[];
-  triggerIcon?: React.ReactNode;
-  triggerPosition?: "left" | "right";
-  type?: "single" | "multiple";
-  styled?: boolean;
-  /** Controlled value for open accordion items (single mode: string, multiple mode: string[]) */
-  value?: string | string[];
-  /** Callback fired when accordion items change (single mode: string, multiple mode: string[]) */
-  onValueChange?: (value: string | string[]) => void;
-}
-
-export interface TypeRelatedAction {
-  iconName: TypeIconName;
-  onClick: () => void;
-  "aria-label": string;
-}
-
-export interface TypeOverflowMenuItem extends TypeMenuItemProps {
-  iconName?: TypeIconName;
-}
-
-export interface TypeOverflowMenuConfig {
-  /** Menu items to be rendered in the overflow menu */
-  items: TypeOverflowMenuItem[];
-  /** Aria label for the overflow menu trigger button. Defaults to "More actions" */
-  "aria-label"?: string;
-}
-
-export interface TypeAccordionItemProps {
-  children: React.ReactNode;
-  relatedActions?: TypeRelatedAction[];
-  overflowMenu?: TypeOverflowMenuConfig;
-  value: string;
-}
-
-/**
- * Props for AccordionTrigger component
- *
- * @example
- * ```tsx
- * <AccordionTrigger
- *   title="My Accordion Title"
- *   headingLevel="h2"
- * />
- * ```
- */
-export interface TypeAccordionTriggerProps extends TypeAccordionSystemProps {
-  title: string;
-  leftSlot?: React.ReactNode;
-  relatedActions?: TypeRelatedAction[];
-  overflowMenu?: TypeOverflowMenuConfig;
-  rightSlot?: React.ReactNode;
-  /** The semantic heading level for the accordion title. Defaults to "h4" */
-  headingLevel?: TypeHeadingLevel;
-}