@evolve.ui/core-components 1.0.1 → 1.2.0

package/splitButton.cjs

@@ -3,5 +3,5 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_SplitButton = require("./SplitButton-DcmmLW8j.cjs");
+const require_SplitButton = require("./SplitButton-B_Y253RU.cjs");
 exports.SplitButton = require_SplitButton.SplitButton;

package/splitButton.mjs

@@ -1,3 +1,3 @@
 'use client';
-import { t as SplitButton } from "./SplitButton-WE5ymwCQ.mjs";
+import { t as SplitButton } from "./SplitButton-_poP9Ykq.mjs";
 export { SplitButton };

package/src/Accordion/Accordion.tsx

@@ -0,0 +1,233 @@
+import { cn } from '@evolve.ui/theme-system';
+import React, { ReactNode, useCallback, useEffect, useState } from 'react';
+
+import { Collapsible } from '../Collapsible/Collapsible';
+import { CaretDown } from '../Icons';
+import { AnyIcon } from '../Icons/anyIcon';
+import { nodeEnv } from '../utils/nodeEnv';
+
+const OPEN_OFFSET = 50;
+const TRANSITION_TIME = 400;
+
+type Density = 'compact' | 'spacious';
+
+type Emphasis = 'subtle' | 'prominent';
+
+type CompactProps = {
+    emphasis?: Emphasis;
+};
+
+type BaseProps = {
+    children: ReactNode;
+    className?: string;
+    density?: Density;
+    disabled?: boolean;
+    headline: string;
+    icon?: AnyIcon;
+    inverse?: boolean;
+    last?: boolean;
+    onToggle?: (isOpen: boolean) => void;
+    open: boolean;
+};
+
+type Props = BaseProps & CompactProps;
+
+export const Accordion = ({
+    children,
+    className,
+    density = 'compact',
+    disabled = false,
+    emphasis,
+    headline,
+    icon: Icon,
+    inverse = false,
+    last = false,
+    onToggle,
+    open,
+}: Props) => {
+    const isTestEnv = nodeEnv === 'test';
+    const [detailsOpen, setDetailsOpen] = useState<boolean>(open && !disabled);
+    const [contentExpanded, setContentExpanded] = useState<boolean>(open && !disabled);
+
+    const [transitionTime, setTransitionTime] = useState(open ? 0 : TRANSITION_TIME);
+
+    const shouldOpenDetails = useCallback(
+        (shouldOpen: boolean) => {
+            if (shouldOpen) {
+                setDetailsOpen(shouldOpen);
+                setTimeout(
+                    () => {
+                        setContentExpanded(shouldOpen);
+                    },
+                    isTestEnv ? 0 : OPEN_OFFSET
+                );
+                return;
+            }
+            setContentExpanded(shouldOpen);
+            setTimeout(
+                () => {
+                    setDetailsOpen(shouldOpen);
+                },
+                isTestEnv ? 0 : TRANSITION_TIME
+            );
+        },
+        [isTestEnv]
+    );
+
+    const handleToggle = useCallback(
+        (e: React.SyntheticEvent<HTMLDetailsElement>) => {
+            e.preventDefault();
+            setTransitionTime(400);
+            if (!disabled) {
+                if (detailsOpen && contentExpanded) {
+                    shouldOpenDetails(false);
+                    onToggle?.(false);
+                } else {
+                    shouldOpenDetails(true);
+                    onToggle?.(true);
+                }
+            }
+        },
+        [disabled, detailsOpen, contentExpanded, shouldOpenDetails, onToggle]
+    );
+
+    useEffect(() => {
+        if (open && (!detailsOpen || !contentExpanded)) {
+            shouldOpenDetails(true);
+        }
+
+        if (!open || disabled) {
+            shouldOpenDetails(false);
+        }
+
+        // We only care about when the open or disabled prop changes
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [disabled, open]);
+
+    return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+        <details
+            className={cn(
+                // GENERAL
+                'flex flex-col',
+                { 'pointer-events-none': disabled },
+                // BORDER
+                'border-t',
+                {
+                    'border-b': last,
+                    'border-border-disabled': disabled,
+                    'border-border-inverse': inverse && !disabled,
+                    'border-border-secondary': !inverse && !disabled,
+                },
+                // FOCUS
+                {
+                    'focus-visible:outline-none': disabled,
+                },
+                // WIDTH
+                {
+                    'w-[320px]': density === 'compact',
+                    'w-[524px]': density === 'spacious',
+                },
+                className
+            )}
+            data-hui-id="Accordion"
+            data-testid="details-accordion"
+            onClick={handleToggle}
+            open={detailsOpen}
+        >
+            <summary
+                className={cn(
+                    // GENERAL
+                    'flex w-full list-none items-center justify-between gap-2xs py-xs',
+                    { 'cursor-pointer': !disabled },
+                    // FOCUS
+                    'focus-visible:outline focus-visible:outline-4 focus-visible:outline-focus-primary',
+                    {
+                        'focus-visible:outline-focus-inverse': inverse,
+                    },
+                    // BACKGROUND
+                    {
+                        'hover:bg-background-hover active:bg-background-pressed':
+                            !disabled && emphasis !== 'subtle' && !inverse,
+                        'hover:bg-background-hover-inverse active:bg-background-pressed-inverse':
+                            !disabled && emphasis !== 'subtle' && inverse,
+                    },
+                    // HEIGHT
+                    { 'min-h-[48px]': density === 'compact', 'min-h-[64px]': density === 'spacious' },
+                    // HIDE DEFAULT DETAILS MARKER
+                    '[&::-webkit-details-marker]:hidden'
+                )}
+                data-testid="summary-accordion"
+            >
+                <div className="flex justify-between gap-2xs text-left">
+                    {Icon && (
+                        <Icon
+                            className={cn(
+                                'self-center',
+                                // ICON COLOR
+                                {
+                                    'text-icon-disabled': disabled,
+                                    'text-icon-inverse': inverse && !disabled,
+                                    'text-icon-primary': !inverse && !disabled,
+                                }
+                            )}
+                        />
+                    )}
+                    <span
+                        className={cn(
+                            // TEXT SIZE
+                            {
+                                'hui-text-h2': density === 'spacious',
+                                'hui-text-h5': density === 'compact',
+                            },
+                            // TEXT
+                            {
+                                'text-text-disabled': disabled,
+                                'text-text-inverse': inverse && !disabled,
+                                'text-text-primary': !inverse && !disabled,
+                            }
+                        )}
+                    >
+                        {headline}
+                    </span>
+                </div>
+                <CaretDown
+                    className={cn(
+                        // TRANSITIONS for rotation
+                        'duration-400 mr-xs transition-transform',
+                        {
+                            'rotate-180': contentExpanded,
+                        },
+                        // ICON COLOR
+                        {
+                            'text-icon-disabled': disabled,
+                            'text-icon-inverse': inverse && !disabled,
+                            'text-icon-primary': !inverse && !disabled,
+                        }
+                    )}
+                    data-testid="expand-button"
+                    size="sm"
+                    style="regular"
+                />
+            </summary>
+            <Collapsible
+                className="w-full"
+                expanded={contentExpanded}
+                timing={transitionTime}
+            >
+                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+                <div
+                    className={cn('w-full transition-all', {
+                        'duration-0': isTestEnv,
+                        'mb-sm mt-sm': density === 'spacious' && detailsOpen && contentExpanded,
+                        'mb-sm mt-xs': density === 'compact' && detailsOpen && contentExpanded,
+                    })}
+                    onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                    style={{ transitionDuration: `${isTestEnv ? 0 : transitionTime}ms` }}
+                >
+                    {children}
+                </div>
+            </Collapsible>
+        </details>
+    );
+};

package/src/AddressDisplay/AddressDisplay.tsx

@@ -0,0 +1,43 @@
+import { cn } from '@evolve.ui/theme-system';
+import { isEqual } from 'es-toolkit';
+import { memo } from 'react';
+
+import { GetAddressComponents } from './components/addressComponents';
+import { Address, AddressHighlightedFields as HighlightedFieldsType } from './types';
+
+export type AddressProps = {
+    address: Address;
+    className?: string;
+    highlightedFields?: HighlightedFieldsType;
+    //display only city, state, and country
+    isCityStateOnly?: boolean;
+    testid?: string;
+    //primary or secondary text color
+    variant?: 'primary' | 'secondary';
+};
+
+const AddressDisplayBase = ({
+    address,
+    className,
+    highlightedFields,
+    isCityStateOnly,
+    testid = 'address-display',
+    variant,
+}: AddressProps) => {
+    const addressComponents = GetAddressComponents({ address, highlightedFields, isCityStateOnly, variant });
+
+    return (
+        <div
+            className={cn('mb-[10px]', className)}
+            data-testid={testid}
+        >
+            {addressComponents}
+        </div>
+    );
+};
+
+// Deep-equal memo mirrors the upstream default export; published as the named
+// export because this library forbids default exports.
+export const AddressDisplay = memo<AddressProps>(AddressDisplayBase, isEqual);
+
+AddressDisplay.displayName = 'AddressDisplay';

package/src/AddressDisplay/components/addressComponents.tsx

@@ -0,0 +1,111 @@
+import { ReactNode, useMemo } from 'react';
+
+import type { Address, AddressHighlightedFields } from '../types';
+
+import { AddressField } from './addressField';
+import { AddressSection } from './addressSection';
+import { getCountryValue } from './getCountryValue';
+
+type AddressComponentsProps = {
+    address: Address;
+    highlightedFields?: AddressHighlightedFields;
+    isCityStateOnly?: boolean;
+    variant?: 'primary' | 'secondary';
+};
+
+export const GetAddressComponents = ({
+    address,
+    highlightedFields,
+    isCityStateOnly,
+    variant,
+}: AddressComponentsProps) => {
+    const {
+        address1,
+        address2,
+        city,
+        countryCode,
+        firstName = '',
+        lastName = '',
+        organizationName = '',
+        phoneNumber,
+        postalCode,
+        state = '',
+    } = address;
+
+    // Memoize computed values for performance
+    const countryValue = useMemo(() => getCountryValue(countryCode), [countryCode]);
+
+    // Memoize address components to prevent unnecessary re-renders
+    const addressComponents = useMemo(() => {
+        const Field = (key: string, value: string, highlighted?: boolean) => (
+            <AddressField
+                highlighted={highlighted}
+                key={key}
+                variant={variant}
+            >
+                {value}
+            </AddressField>
+        );
+        const Section = (key: string, children: ReactNode) => <AddressSection key={key}>{children}</AddressSection>;
+
+        if (isCityStateOnly) {
+            return [
+                Section(
+                    'address-city-state-country',
+                    <>
+                        {city && <>{Field('city', city, highlightedFields?.city)}, </>}
+                        {state && <>{Field('state', state, highlightedFields?.state)}, </>}
+                        {countryCode && Field('country', countryValue, highlightedFields?.countryCode)}
+                    </>
+                ),
+            ];
+        }
+
+        const sections = [
+            firstName &&
+                Section(
+                    'address-full-name',
+                    <>
+                        {Field('firstName', firstName, highlightedFields?.firstName)}
+                        {lastName && <> {Field('lastName', lastName, highlightedFields?.lastName)}</>}
+                    </>
+                ),
+            organizationName &&
+                Section(
+                    'address-organization-name',
+                    Field('organization', organizationName, highlightedFields?.organizationName)
+                ),
+            Section('address-address-1', Field('address1', address1, highlightedFields?.address1)),
+            address2 && Section('address-address-2', Field('address2', address2, highlightedFields?.address2)),
+            Section(
+                'address-city-state-postal-code',
+                <>
+                    {city && <>{Field('city', city, highlightedFields?.city)}, </>}
+                    {state && <>{Field('state', state, highlightedFields?.state)} </>}
+                    {Field('postalCode', postalCode, highlightedFields?.postalCode)}
+                </>
+            ),
+            Section('address-country', Field('country', countryValue, highlightedFields?.countryCode)),
+            phoneNumber && Field('address-phone-number', phoneNumber, highlightedFields?.phoneNumber),
+        ];
+
+        return sections.filter(Boolean);
+    }, [
+        isCityStateOnly,
+        firstName,
+        lastName,
+        organizationName,
+        address1,
+        address2,
+        city,
+        state,
+        postalCode,
+        countryValue,
+        phoneNumber,
+        highlightedFields,
+        variant,
+        countryCode,
+    ]);
+
+    return addressComponents;
+};

package/src/AddressDisplay/components/addressField.tsx

@@ -0,0 +1,25 @@
+import { cn } from '@evolve.ui/theme-system';
+
+import { BodySecondary } from '../../Typography/Text/Text';
+
+// Helper component for address field rendering
+export const AddressField = ({
+    children,
+    highlighted,
+    variant,
+}: {
+    children: React.ReactNode;
+    highlighted?: boolean;
+    variant?: 'primary' | 'secondary';
+}) => {
+    const color = variant === 'secondary' ? 'secondary' : 'primary';
+
+    return (
+        <BodySecondary
+            className={cn({ 'bg-background-info-dark text-text-inverse': highlighted })}
+            color={color}
+        >
+            {children}
+        </BodySecondary>
+    );
+};

package/src/AddressDisplay/components/addressSection.tsx

@@ -0,0 +1,8 @@
+// Helper component for address section
+export const AddressSection = ({
+    children,
+    className = 'mb-[3px]',
+}: {
+    children: React.ReactNode;
+    className?: string;
+}) => <div className={className}>{children}</div>;

package/src/AddressDisplay/components/getCountryValue.tsx

@@ -0,0 +1,31 @@
+import { CountriesWithISOCodes } from '../../utils/countriesWithISOCodes';
+
+// Memoized country lookup for better performance
+const countryCache = new Map<string, string>();
+
+export const getCountryValue = (countryCode: string = ''): string => {
+    if (!countryCode) {
+        return '';
+    }
+
+    const upperCode = countryCode.toUpperCase();
+
+    // Check cache first
+    if (countryCache.has(upperCode)) {
+        return countryCache.get(upperCode)!;
+    }
+
+    // Special case for US
+    if (upperCode === 'US') {
+        countryCache.set(upperCode, 'USA');
+        return 'USA';
+    }
+
+    // Look up in CountriesWithISOCodes
+    const countryValue = CountriesWithISOCodes.find((c) => c.code.toUpperCase() === upperCode);
+    const countryName = countryValue?.name || upperCode;
+
+    // Cache the result
+    countryCache.set(upperCode, countryName);
+    return countryName;
+};

package/src/AddressDisplay/types.ts

@@ -0,0 +1,26 @@
+export type Address = {
+    address1: string;
+    address2?: string;
+    city: string;
+    countryCode: string; //Expected to be an iso code
+    firstName?: string;
+    lastName?: string;
+    organizationName?: string;
+    phoneNumber?: string;
+    postalCode: string;
+    singleLineAddress?: string;
+    state?: string;
+};
+
+export type AddressHighlightedFields = {
+    address1?: boolean;
+    address2?: boolean;
+    city?: boolean;
+    countryCode?: boolean;
+    firstName?: boolean;
+    lastName?: boolean;
+    organizationName?: boolean;
+    phoneNumber?: boolean;
+    postalCode?: boolean;
+    state?: boolean;
+};

package/src/AutomatedCarousel/AutomatedCarousel.tsx

@@ -0,0 +1,163 @@
+import { cn } from '@evolve.ui/theme-system';
+import { ComponentProps, useCallback, useEffect, useMemo, useState } from 'react';
+
+import { Carousel } from '../Carousel';
+import { usePrevious } from '../hooks/usePrevious';
+import { CarouselProgressBar } from './components/CarouselProgressBar/CarouselProgressBar';
+
+type Props = Omit<
+    ComponentProps<typeof Carousel>,
+    'goToPage' | 'providePageCount' | 'selectedPage' | 'shouldGoToPageBreakpointsOnScrolling' | 'showPagination'
+> & {
+    /**
+     * If provided, the cards, barring the first card, will be offset so that some of the previous card will be shown on the left.
+     * This is best used for mobile carousels so that people can better see that they're in the middle of a carousel.
+     * It should be a positive number, representing a pixel amount.
+     * Gap size will be added to it, so make sure you aren't including it.
+     *
+     * @default 0
+     */
+    cardOffset?: number;
+    /**
+     * If provided, it's an estimate of the number of pages that will be rendered.
+     * It's only used before the initial page calculation is completed.
+     */
+    expectedPageCount?: number;
+    /**
+     * Are the cards taking up a full page of the carousel?
+     * This is used to use card counts to render the page-based sections of the carousel for SSR.
+     */
+    fullPage?: boolean;
+    /**
+     * If populated, the progress bar will be placed below the cards, rather than on top of the card content
+     */
+    progressBarGap?: 'sm' | 'md' | 'lg';
+    /**
+     * Changes the color of the pause/play buttons to better reflect various backgrounds
+     *
+     * @default = 'primary'
+     */
+    style?: 'primary' | 'inverse';
+};
+
+export const AutomatedCarousel = ({
+    cardOffset = 0,
+    cards,
+    expectedPageCount,
+    fullPage = true,
+    progressBarGap,
+    style = 'primary',
+    title,
+    ...rest
+}: Props) => {
+    const [currentPage, setCurrentPage] = useState(0);
+    const [currentFreeScrollPage, setCurrentFreeScrollPage] = useState(0);
+
+    useEffect(() => {
+        setCurrentFreeScrollPage(currentPage);
+    }, [currentPage]);
+
+    const goToPageAndContinue: ComponentProps<typeof CarouselProgressBar>['goToPage'] = useCallback((newPage) => {
+        setCurrentPage(newPage);
+    }, []);
+
+    const goToPageAndPause: NonNullable<ComponentProps<typeof Carousel>['goToPage']> = useCallback(
+        ({ buttonDirection, oneBasedPageNumber }) => {
+            if (buttonDirection) {
+                setCurrentPage(currentFreeScrollPage + buttonDirection);
+            } else {
+                setCurrentPage(oneBasedPageNumber - 1);
+            }
+            setIsPaused(true);
+        },
+        [currentFreeScrollPage]
+    );
+
+    const getInitialPageCount = () => {
+        if (expectedPageCount !== undefined) {
+            return expectedPageCount;
+        }
+        return fullPage ? cards.length : 0;
+    };
+
+    const [numberOfPages, setNumberOfPages] = useState(getInitialPageCount());
+    const setPageCount: NonNullable<ComponentProps<typeof Carousel>['providePageCount']> = useCallback((pageCount) => {
+        setNumberOfPages(pageCount);
+    }, []);
+
+    useEffect(() => {
+        setNumberOfPages(getInitialPageCount());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [fullPage, cards.length, expectedPageCount]);
+
+    const oneBasedCarouselPage = currentPage + 1;
+
+    const [isPaused, setIsPaused] = useState(true);
+    const wasPaused = usePrevious(isPaused);
+
+    const progressBarClassName = useMemo(() => {
+        if (Boolean(progressBarGap)) {
+            return `w-fit flex mx-auto mt-${progressBarGap}`;
+        }
+        // progress bar should render over card content
+        return cn(
+            'absolute bottom-lg left-0 flex w-full justify-center',
+            // MOBILE
+            'xsMax:bottom-xs xsMax:left-[calc(100%-38px)] xsMax:block xsMax:transition-all xsMax:duration-500'
+        );
+    }, [progressBarGap]);
+
+    const onScrollCarousel: NonNullable<ComponentProps<typeof Carousel>['onScroll']> = useCallback(
+        (currentScrollPage) => {
+            setCurrentFreeScrollPage(currentScrollPage);
+            setIsPaused(true);
+        },
+        []
+    );
+
+    useEffect(() => {
+        setIsPaused(!document.readyState);
+    }, []);
+
+    useEffect(() => {
+        if (isPaused && !wasPaused) {
+            setCurrentFreeScrollPage(currentPage);
+        } else if (!isPaused && wasPaused) {
+            setCurrentPage(currentFreeScrollPage);
+        }
+    }, [currentFreeScrollPage, currentPage, isPaused, wasPaused]);
+
+    return (
+        <section className="relative">
+            <Carousel
+                cardOffset={cardOffset}
+                cards={cards}
+                fullPage={fullPage}
+                goToPage={goToPageAndPause}
+                onScroll={onScrollCarousel}
+                providePageCount={setPageCount}
+                selectedPage={oneBasedCarouselPage}
+                shouldGoToPageBreakpointsOnScrolling={!isPaused}
+                showPagination={false}
+                title={title}
+                {...rest}
+            />
+            {numberOfPages > 0 && (
+                <div
+                    className={progressBarClassName}
+                    data-testid={`${title}.automated-carousel.progress-bar-container`}
+                >
+                    <CarouselProgressBar
+                        currentFreeScrollPage={currentFreeScrollPage}
+                        currentPage={currentPage}
+                        goToPage={goToPageAndContinue}
+                        isPaused={isPaused}
+                        pageCount={numberOfPages}
+                        setPausedState={setIsPaused}
+                        style={style}
+                    />
+                </div>
+            )}
+        </section>
+    );
+};

package/src/AutomatedCarousel/automatedCarousel.types.ts

@@ -0,0 +1,7 @@
+import ms from 'ms';
+
+export const SHOW_CAROUSEL_PAGE_DURATION = ms('6s');
+
+export const CAROUSEL_PROGRESS_BAR_GAP_SIZE = 8;
+export const CAROUSEL_PAUSE_BUTTON_WIDTH = 20;
+export const MAXIMUM_CAROUSEL_PROGRESS_BAR_UNIT_WIDTH = 32;