@economic/taco 2.45.0-alpha.18 → 2.45.0-alpha.19

package/dist/components/Listbox/util.d.ts

@@ -3,7 +3,7 @@ import { ScrollableListItem, ScrollableListItemValue } from './ScrollableList';
 export declare const setInputValueByRef: (input: HTMLInputElement | null, value: ScrollableListItemValue, event?: string) => void;
 export declare const getIndexFromValue: (data: ScrollableListItem[], value: ScrollableListItemValue | undefined) => number | undefined;
 export declare const getSelectedIndexesFromValue: (data: ScrollableListItem[], value: ScrollableListItemValue | undefined) => number[];
-export declare const findByValue: (data: ScrollableListItem[], value: ScrollableListItemValue) => ScrollableListItem | undefined;
+export declare const findByValue: (data: ScrollableListItem[], value: ScrollableListItemValue | undefined) => ScrollableListItem | undefined;
 export declare const searchForString: (child: JSX.Element | string, value: string, strategy?: string) => boolean;
 export declare const findNextIndexByValue: (data: ScrollableListItem[], query: string, activeIndex: number | undefined) => number;
 export declare const getActiveDescendant: (data: ScrollableListItem[], currentIndex: number | undefined, id: string) => any;

package/dist/components/Report/Report.d.ts

@@ -1,38 +1,11 @@
 import React from 'react';
 import { ReportRef, ReportProps, ReportColumnProps, ReportGroupProps } from './types';
-export declare const Report: (<TType = unknown>(props: Pick<import("../..").TableProps<TType>, "length" | "loadAll" | "loadPage" | "pageSize" | "enableFiltering" | "enableSearch" | "enableSorting" | "enableColumnFreezing" | "enableColumnHiding" | "enableColumnResizing" | "enableRowExpansion" | "enableRowExpansionAll" | "enableRowSelection" | "enableColumnOrdering" | "enableFontSize" | "enableFooter" | "enablePrinting" | "enableRowActions" | "enableRowActive" | "enableRowClick" | "enableRowDrag" | "enableRowDrop" | "enableRowGoto" | "enableRowHeight" | "enableSaveSettings" | "children" | "data" | "id" | "customSettings" | "defaultColumnFreezingIndex" | "defaultRowActiveIndex" | "defaultRowGroupColumnId" | "defaultSettings" | "emptyState" | "rowActions" | "rowActionsForGroup" | "rowActionsLength" | "rowExpansionRenderer" | "rowIdentityAccessor" | "shortcuts" | "toolbarLeft" | "toolbarRight" | "toolbarPanel" | "onRowClick" | "onRowDrag" | "onRowDrop" | "onRowGoto" | "onRowSelect" | "onChangeFilter" | "onChangeSearch" | "onChangeSettings" | "onChangeSort"> & React.RefAttributes<import("../..").TableRef>) => JSX.Element) & {
-    Column: <TType_1 = unknown>(_: import("../../types").ValueOf<{ [Key in keyof TType_1]: {
-        accessor?: Key | undefined;
-        id: import("../../types").StringWithAutocompleteOptions<Key>;
-        renderer?: import("../..").TableColumnRenderer<TType_1, TType_1[Key]> | undefined;
-        aggregate?: import("../..").TableColumnRendererAggregate<TType_1, TType_1[Key]> | undefined;
-        control?: "datepicker" | "input" | "switch" | "checkbox" | "textarea" | ((props: import("../..").TableColumnRendererControlProps, row?: TType_1 | undefined, filterState?: import("../..").TableFilter[] | undefined) => JSX.Element) | undefined;
-        footer?: import("../..").TableColumnRendererFooter<TType_1> | undefined;
-        header: string;
-        aggregationFn?: "auto" | "sum" | "min" | "max" | "extent" | "mean" | "median" | "unique" | "uniqueCount" | "count" | undefined;
-        align?: "left" | "center" | "right" | undefined;
-        className?: string | ((row: TType_1) => string | undefined) | undefined;
-        dataType?: "number" | "boolean" | "text" | "datetime" | "amount" | undefined;
-        defaultHidden?: boolean | undefined;
-        defaultWidth?: number | "grow" | undefined;
-        enableEditing?: boolean | undefined;
-        enableFiltering?: boolean | undefined;
-        enableGrouping?: boolean | undefined;
-        enableHiding?: boolean | undefined;
-        enableOrdering?: boolean | undefined;
-        enablePrinting?: boolean | undefined;
-        enableResizing?: boolean | undefined;
-        enableSearch?: boolean | undefined;
-        enableSorting?: boolean | undefined;
-        enableTruncate?: boolean | undefined;
-        filters?: import("../..").TableFilterComparator[] | undefined;
-        headerClassName?: string | undefined;
-        menu?: import("../..").TableColumnMenu | undefined;
-        minWidth?: number | undefined;
-        sort?: "asc" | "desc" | undefined;
-        sortFn?: "basic" | "auto" | "text" | "datetime" | "alphanumeric" | "alphanumericCaseSensitive" | "textCaseSensitive" | ((rowA: TType_1, rowB: TType_1, columnId: string) => 0 | 1 | -1) | undefined;
-        tooltip?: string | undefined;
-    }; }>) => JSX.Element | null;
-    Group: (_: ReportGroupProps) => JSX.Element | null;
+declare const Column: React.FC<ReportColumnProps<unknown>> & {
+    <TType = unknown>(_: ReportColumnProps<TType>): null;
+};
+declare function Group(_: ReportGroupProps): null;
+export declare const Report: (<TType = unknown>(props: Pick<import("../..").TableProps<TType>, "length" | "loadAll" | "loadPage" | "pageSize" | "pages" | "_experimentalDataLoader2" | "enableFiltering" | "enableSearch" | "enableSorting" | "enableColumnFreezing" | "enableColumnHiding" | "enableColumnResizing" | "enableRowExpansion" | "enableRowExpansionAll" | "enableRowSelection" | "enableColumnOrdering" | "enableFontSize" | "enableFooter" | "enablePrinting" | "enableRowActions" | "enableRowActive" | "enableRowClick" | "enableRowDrag" | "enableRowDrop" | "enableRowGoto" | "enableRowHeight" | "enableSaveSettings" | "children" | "data" | "id" | "customSettings" | "defaultColumnFreezingIndex" | "defaultRowActiveIndex" | "defaultRowGroupColumnId" | "defaultSettings" | "emptyState" | "rowActions" | "rowActionsForGroup" | "rowActionsLength" | "rowExpansionRenderer" | "rowIdentityAccessor" | "shortcuts" | "toolbarLeft" | "toolbarRight" | "toolbarPanel" | "onRowClick" | "onRowDrag" | "onRowDrop" | "onRowGoto" | "onRowSelect" | "onChangeFilter" | "onChangeSearch" | "onChangeSettings" | "onChangeSort"> & React.RefAttributes<import("../..").TableRef>) => JSX.Element) & {
+    Column: typeof Column;
+    Group: typeof Group;
 };
 export type { ReportRef, ReportProps, ReportColumnProps, ReportGroupProps } from './types';

package/dist/components/SearchInput2/SearchInput2.d.ts

@@ -13,12 +13,14 @@ interface BasicSearchInput2Props extends CommonSearchInput2Props {
     findTotal?: never;
     onClickFindNext?: never;
     onClickFindPrevious?: never;
+    showTotal?: never;
 }
 interface ComplexSearchInput2Props extends CommonSearchInput2Props {
     findCurrent: number | null;
     findTotal: number | null;
     onClickFindNext: () => void;
     onClickFindPrevious: () => void;
+    showTotal?: boolean;
 }
 export declare type SearchInput2Props = BasicSearchInput2Props | ComplexSearchInput2Props;
 export declare const SearchInput2: React.ForwardRefExoticComponent<(BasicSearchInput2Props & React.RefAttributes<HTMLInputElement>) | (ComplexSearchInput2Props & React.RefAttributes<HTMLInputElement>)>;

package/dist/components/Table3/Table3.d.ts

@@ -1,39 +1,15 @@
 import React from 'react';
 import { Table3Props, Table3Ref, Table3ColumnProps, Table3GroupProps } from './types';
 import './style.css';
-export declare const Table3: (<TType = unknown>(props: (import("./types").Table3WithoutEditingWithClientProps<TType> & React.RefAttributes<Table3Ref>) | (import("./types").Table3WithoutEditingWithServerProps<TType> & React.RefAttributes<Table3Ref>) | (import("./types").Table3WithEditingWithClientProps<TType> & React.RefAttributes<Table3Ref>) | (import("./types").Table3WithEditingWithServerProps<TType> & React.RefAttributes<Table3Ref>)) => JSX.Element) & {
-    Column: <TType_1 = unknown>(_: import("../../types").ValueOf<{ [Key in keyof TType_1]: {
-        accessor?: Key | undefined;
-        id: import("../../types").StringWithAutocompleteOptions<Key>;
-        renderer?: import("../..").TableColumnRenderer<TType_1, TType_1[Key]> | undefined;
-        aggregate?: import("../..").TableColumnRendererAggregate<TType_1, TType_1[Key]> | undefined;
-        control?: "datepicker" | "input" | "switch" | "checkbox" | "textarea" | ((props: import("../..").TableColumnRendererControlProps, row?: TType_1 | undefined, filterState?: import("../..").TableFilter[] | undefined) => JSX.Element) | undefined;
-        footer?: import("../..").TableColumnRendererFooter<TType_1> | undefined;
-        header: string;
-        aggregationFn?: "auto" | "sum" | "min" | "max" | "extent" | "mean" | "median" | "unique" | "uniqueCount" | "count" | undefined;
-        align?: "left" | "center" | "right" | undefined;
-        className?: string | ((row: TType_1) => string | undefined) | undefined;
-        dataType?: "number" | "boolean" | "text" | "datetime" | "amount" | undefined;
-        defaultHidden?: boolean | undefined;
-        defaultWidth?: number | "grow" | undefined;
-        enableEditing?: boolean | undefined;
-        enableFiltering?: boolean | undefined;
-        enableGrouping?: boolean | undefined;
-        enableHiding?: boolean | undefined;
-        enableOrdering?: boolean | undefined;
-        enablePrinting?: boolean | undefined;
-        enableResizing?: boolean | undefined;
-        enableSearch?: boolean | undefined;
-        enableSorting?: boolean | undefined;
-        enableTruncate?: boolean | undefined;
-        filters?: import("../..").TableFilterComparator[] | undefined;
-        headerClassName?: string | undefined;
-        menu?: import("../..").TableColumnMenu | undefined;
-        minWidth?: number | undefined;
-        sort?: "asc" | "desc" | undefined;
-        sortFn?: "basic" | "auto" | "text" | "datetime" | "alphanumeric" | "alphanumericCaseSensitive" | "textCaseSensitive" | ((rowA: TType_1, rowB: TType_1, columnId: string) => 0 | 1 | -1) | undefined;
-        tooltip?: string | undefined;
-    }; }>) => JSX.Element | null;
-    Group: (_: Table3GroupProps) => JSX.Element | null;
+declare const Column: React.FC<Table3ColumnProps<unknown>> & {
+    <TType = unknown>(_: Table3ColumnProps<TType>): null;
+};
+declare function Group(_: Table3GroupProps): null;
+declare namespace Group {
+    var displayName: string;
+}
+export declare const Table3: (<TType = unknown>(props: (import("./types").Table3WithoutEditingWithClientProps<TType> & React.RefAttributes<Table3Ref>) | (import("./types").Table3WithoutEditingWithServerProps<TType> & React.RefAttributes<Table3Ref>) | (import("./types").Table3WithEditingWithClientProps<TType> & React.RefAttributes<Table3Ref>) | (import("./types").Table3WithEditingWithServerProps<TType> & React.RefAttributes<Table3Ref>)) => React.JSX.Element) & {
+    Column: typeof Column;
+    Group: typeof Group;
 };
 export type { Table3Ref, Table3Props, Table3ColumnProps, Table3GroupProps, Table3EditingSaveHandler, Table3EditingValidatorFn, Table3Texts, Table3FeatureProps, Table3CommonProps, Table3WithoutEditingWithClientProps, Table3WithoutEditingWithServerProps, Table3WithEditingProps, Table3WithEditingWithClientProps, Table3WithEditingWithServerProps, Table3EditingChangeHandler, Table3EditingCreateHandler, } from './types';

package/dist/components/Table3/components/Row/Editing/CreateNewRow.d.ts

@@ -5,7 +5,6 @@ declare type CreateNewRowProps<TType = unknown> = {
     buttonRef: React.Ref<HTMLButtonElement>;
     isScrolled: boolean;
     onEditingCreate?: Table3EditingCreateHandler<TType>;
-    scrollToIndex: (index: number) => void;
     table: ReactTable<TType>;
     tableMeta: ReactTableMeta<TType>;
 };

package/dist/components/Table3/features/useEditingState.d.ts

@@ -1,29 +1,34 @@
 import { Table as ReactTable, Cell as ReactTableCell } from '@tanstack/react-table';
-import { Table3EditingChangeHandler, Table3EditingSaveHandler, Table3EditingValidatorFn } from '../types';
+import { Table3EditingChangeHandler, Table3EditingDiscardHandler, Table3EditingSaveHandler, Table3EditingValidatorFn } from '../types';
+declare type EditingError = {
+    row: string;
+    cells: Record<string, string>;
+    shouldShowErrorAlert: boolean;
+};
 declare type EditingSaveState = 'saving' | 'saved' | 'errored';
-export declare function usePendingChangesState<TType = unknown>(handleSave: Table3EditingSaveHandler<TType> | undefined, handleChange: Table3EditingChangeHandler<TType> | undefined, rowIdentityAccessor: keyof TType, validator: Table3EditingValidatorFn<TType> | undefined): {
-    setRowValue: <T extends TType>(rowId: string, original: T, value: Partial<T>) => Promise<void>;
-    getRowValue: (rowId: string) => any;
-    getRowMoveReason: (rowId: string) => unknown;
+export declare function usePendingChangesState<TType = unknown>(handleSave: Table3EditingSaveHandler<TType> | undefined, handleChange: Table3EditingChangeHandler<TType> | undefined, handleDiscard: Table3EditingDiscardHandler | undefined, rowIdentityAccessor: keyof TType, validator: Table3EditingValidatorFn<TType> | undefined): {
+    getRowValue: (rowId: string) => Partial<unknown>;
+    getRowMoveReason: (rowId: string) => "search" | "sorting" | "filter";
     hasRowErrors: (rowId: string) => boolean;
     hasRowErrorsShownInAlert: (rowId: string) => boolean;
-    hasTemporaryRowErrors: <T_1 extends TType>() => boolean;
-    getRowStatus: (rowId: string) => any;
+    hasTemporaryRowErrors: <T extends TType>() => boolean;
+    getRowStatus: (rowId: string) => EditingSaveState;
     setRowStatus: (rowId: string, status: EditingSaveState | undefined) => void;
-    setCellValue: <T_2 extends TType>(cell: ReactTableCell<T_2, unknown>, value: unknown) => void;
-    getCellValue: <T_3 extends TType>(cell: ReactTableCell<T_3, unknown>) => unknown | undefined;
-    getCellError: <T_4 extends TType>(cell: ReactTableCell<T_4, unknown>) => string | undefined;
-    onCellChanged: <T_5 extends TType>(cell: ReactTableCell<T_5, unknown>, rowIndex: number, nextValue: any, shouldRunUpdaters?: boolean) => Promise<void>;
-    getErrorsShownInAlert: <T_6 extends TType>() => {
+    setCellValue: <T_1 extends TType>(cell: ReactTableCell<T_1, unknown>, rowIndex: number, value: unknown) => void;
+    getCellValue: <T_2 extends TType>(cell: ReactTableCell<T_2, unknown>) => unknown | undefined;
+    getCellError: <T_3 extends TType>(cell: ReactTableCell<T_3, unknown>) => string | undefined;
+    onCellChanged: <T_4 extends TType>(cell: ReactTableCell<T_4, unknown>, rowIndex: number, nextValue: any, shouldRunUpdaters?: boolean) => Promise<void>;
+    getErrorsShownInAlert: <T_5 extends TType>() => {
         rowId: string;
-        changes: Partial<T_6>;
-        errors: any;
+        index: number;
+        changes: Partial<T_5>;
+        errors: EditingError;
     }[];
     hasChanges: (rowId?: string | undefined) => boolean;
-    saveChanges: <T_7 extends TType>(table: ReactTable<T_7>, rowId?: string | undefined) => Promise<boolean>;
-    discardChanges: <T_8 extends TType>(rowId: string, table: ReactTable<T_8>) => void;
+    saveChanges: <T_6 extends TType>(table: ReactTable<T_6>, rowId?: string | undefined) => Promise<boolean>;
+    discardChanges: <T_7 extends TType>(rowId: string, table: ReactTable<T_7>) => Promise<void>;
     hasSaved: () => boolean;
-    insertTemporaryRow: <T_9 extends TType>(data: Partial<T_9>) => string;
-    temporaryRows: any;
+    insertTemporaryRow: <T_8 extends TType>(data: Partial<T_8>, rowIndex: number) => string;
+    temporaryRows: unknown[];
 };
 export {};

package/dist/components/Table3/features/useTableEditing.d.ts

@@ -1,37 +1,41 @@
 import React from 'react';
 import { Table as ReactTable } from '@tanstack/react-table';
-import { Table3EditingChangeHandler, Table3EditingCreateHandler, Table3EditingSaveHandler, Table3EditingValidatorFn } from '../types';
-export declare function useTableEditing<TType = unknown>(isEnabled: boolean | undefined, handleSave: Table3EditingSaveHandler<TType> | undefined, handleChange: Table3EditingChangeHandler<TType> | undefined, handleCreate: Table3EditingCreateHandler<TType> | undefined, rowIdentityAccessor: keyof TType | undefined, validator: Table3EditingValidatorFn<TType> | undefined): {
-    setRowValue: <T extends TType>(rowId: string, original: T, value: Partial<T>) => Promise<void>;
-    getRowValue: (rowId: string) => any;
-    getRowMoveReason: (rowId: string) => unknown;
+import { Table3EditingChangeHandler, Table3EditingCreateHandler, Table3EditingDiscardHandler, Table3EditingSaveHandler, Table3EditingValidatorFn } from '../types';
+export declare function useTableEditing<TType = unknown>(isEnabled: boolean | undefined, handleSave: Table3EditingSaveHandler<TType> | undefined, handleChange: Table3EditingChangeHandler<TType> | undefined, handleCreate: Table3EditingCreateHandler<TType> | undefined, handleDiscard: Table3EditingDiscardHandler | undefined, rowIdentityAccessor: keyof TType | undefined, validator: Table3EditingValidatorFn<TType> | undefined): {
+    getRowValue: (rowId: string) => Partial<unknown>;
+    getRowMoveReason: (rowId: string) => "search" | "sorting" | "filter";
     hasRowErrors: (rowId: string) => boolean;
     hasRowErrorsShownInAlert: (rowId: string) => boolean;
-    hasTemporaryRowErrors: <T_1 extends TType>() => boolean;
-    getRowStatus: (rowId: string) => any;
+    hasTemporaryRowErrors: <T extends TType>() => boolean;
+    getRowStatus: (rowId: string) => "saving" | "saved" | "errored";
     setRowStatus: (rowId: string, status: "saving" | "saved" | "errored" | undefined) => void;
-    setCellValue: <T_2 extends TType>(cell: import("@tanstack/react-table").Cell<T_2, unknown>, value: unknown) => void;
-    getCellValue: <T_3 extends TType>(cell: import("@tanstack/react-table").Cell<T_3, unknown>) => unknown;
-    getCellError: <T_4 extends TType>(cell: import("@tanstack/react-table").Cell<T_4, unknown>) => string | undefined;
-    onCellChanged: <T_5 extends TType>(cell: import("@tanstack/react-table").Cell<T_5, unknown>, rowIndex: number, nextValue: any, shouldRunUpdaters?: boolean) => Promise<void>;
-    getErrorsShownInAlert: <T_6 extends TType>() => {
+    setCellValue: <T_1 extends TType>(cell: import("@tanstack/react-table").Cell<T_1, unknown>, rowIndex: number, value: unknown) => void;
+    getCellValue: <T_2 extends TType>(cell: import("@tanstack/react-table").Cell<T_2, unknown>) => unknown;
+    getCellError: <T_3 extends TType>(cell: import("@tanstack/react-table").Cell<T_3, unknown>) => string | undefined;
+    onCellChanged: <T_4 extends TType>(cell: import("@tanstack/react-table").Cell<T_4, unknown>, rowIndex: number, nextValue: any, shouldRunUpdaters?: boolean) => Promise<void>;
+    getErrorsShownInAlert: <T_5 extends TType>() => {
         rowId: string;
-        changes: Partial<T_6>;
-        errors: any;
+        index: number;
+        changes: Partial<T_5>;
+        errors: {
+            row: string;
+            cells: Record<string, string>;
+            shouldShowErrorAlert: boolean;
+        };
     }[];
     hasChanges: (rowId?: string | undefined) => boolean;
-    saveChanges: <T_7 extends TType>(table: ReactTable<T_7>, rowId?: string | undefined) => Promise<boolean>;
-    discardChanges: <T_8 extends TType>(rowId: string, table: ReactTable<T_8>) => void;
+    saveChanges: <T_6 extends TType>(table: ReactTable<T_6>, rowId?: string | undefined) => Promise<boolean>;
+    discardChanges: <T_7 extends TType>(rowId: string, table: ReactTable<T_7>) => Promise<void>;
     hasSaved: () => boolean;
-    insertTemporaryRow: <T_9 extends TType>(data: Partial<T_9>) => string;
-    temporaryRows: any;
+    insertTemporaryRow: <T_8 extends TType>(data: Partial<T_8>, rowIndex: number) => string;
+    temporaryRows: unknown[];
     isEnabled: boolean;
     isEditing: boolean;
     isDetailedMode: boolean;
     toggleDetailedMode: React.Dispatch<React.SetStateAction<boolean>>;
-    toggleEditing: <T_10 extends TType>(enabled: React.SetStateAction<boolean>, table: ReactTable<T_10>, scrollToIndex: (index: number) => void, doSave?: boolean) => void;
+    toggleEditing: <T_9 extends TType>(enabled: React.SetStateAction<boolean>, table: ReactTable<T_9>, scrollToIndex: (index: number) => void) => void;
     lastFocusedCellIndex: number | undefined;
     setLastFocusedCellIndex: React.Dispatch<React.SetStateAction<number | undefined>>;
-    createRow: <T_11 extends TType>(table: ReactTable<T_11>, scrollToIndex: (index: number) => void, row?: Partial<T_11> | undefined) => Promise<void>;
+    createRow: <T_10 extends TType>(table: ReactTable<T_10>, row?: Partial<T_10> | undefined) => Promise<void>;
     createRowButtonRef: React.RefObject<HTMLButtonElement>;
 };

package/dist/components/Table3/types.d.ts

@@ -7,6 +7,7 @@ export declare type Table3Ref = TableRef & {
 };
 export declare type Table3EditingChangeHandler<TType = unknown> = (accessor: string, value: unknown, row: TType, prevRow: TType) => Promise<Partial<TType>> | undefined;
 export declare type Table3EditingCreateHandler<TType = unknown> = () => Partial<TType>;
+export declare type Table3EditingDiscardHandler = () => void;
 export declare type Table3EditingSaveHandler<TType = unknown> = (row: TType) => Promise<void>;
 export declare type Table3EditingValidatorFn<TType = unknown> = (row: TType) => Promise<Partial<Record<keyof TType, string>> | undefined> | Partial<Record<keyof TType, string>> | undefined;
 export interface Table3FeatureProps<TType = unknown> extends TableFeatureProps<TType> {
@@ -15,6 +16,7 @@ export interface Table3FeatureProps<TType = unknown> extends TableFeatureProps<T
 export interface Table3CommonProps<TType = unknown> extends Table3FeatureProps<TType> {
     onEditingChange?: Table3EditingChangeHandler<TType>;
     onEditingCreate?: Table3EditingCreateHandler<TType>;
+    onEditingDiscard?: Table3EditingDiscardHandler;
     validator?: Table3EditingValidatorFn<TType>;
 }
 export interface Table3WithoutEditingWithClientProps<TType = unknown> extends Table3CommonProps<TType>, TableClientProps<TType> {

package/dist/esm/index.css

@@ -411,6 +411,12 @@
     bottom: 3px;
 }
 
+/* When dealing with nested dialogs, the dialog behind remains rendered because it only receives the [aria-hidden] attribute but not display: none.
+   As a result, tabs in the hidden dialog remain visible, as they still have the visible class assigned. To properly hide them, we need to override their visibility. */
+[data-taco='backdrop'][aria-hidden='true'] [role='tablist'] [role='tab'].visible {
+    visibility: hidden;
+}
+
 /* label inside label is invalid html, but the client is littered with it */
 [data-taco='label'] [data-taco='label'] {
     min-height: 0;

package/dist/esm/packages/taco/src/charts/components/Donut/DonutChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.js","sources":["../../../../../../../../src/charts/components/Donut/DonutChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\nimport cn from 'clsx';\n\nimport { Color, getThemeColor } from '../../utils/color';\nimport { getTooltipProps } from '../../utils/common';\nimport { Legend } from './Legend';\nimport { CenteredLabel } from './CenteredLabel';\nimport { ActiveShape } from './ActiveShape';\nimport { DONUT_WIDTH, HOVER_DONUT_WIDTH } from './util';\n\nconst Segment = (_: DonutChartSegmentProps) => null;\n\nexport type DonutChartSegmentProps = {\n    color: Color;\n    id: string;\n    label: string;\n    value: number;\n};\n\nexport type SegmentIds = string[];\n\nexport type DonutChartProps = {\n    children: React.ReactElement<DonutChartSegmentProps> | React.ReactElement<DonutChartSegmentProps>[];\n    formatter?: (value: number) => string;\n    onClick?: (segment: DonutChartSegmentProps | DonutChartSegmentProps[]) => void;\n    showLegend?: boolean;\n    legendPosition?: string;\n    label: string;\n};\n\nexport const DonutChart = function DonutChart({\n    children,\n    formatter,\n    onClick,\n    showLegend = false,\n    legendPosition = 'bottom',\n    label,\n}: DonutChartProps) {\n    const ref = React.useRef<HTMLDivElement>(null);\n    const [radius, setRadius] = React.useState<number>(0);\n\n    const [hoveredItem, setHoveredItem] = React.useState<SegmentIds>([]);\n    // used for right legends\n    const [selectedItem, setSelectedItem] = React.useState<SegmentIds>([]);\n    // used for bottom legends\n    const [visibleItems, setVisibleItems] = React.useState<Record<string, boolean>>(() => {\n        const keys = {};\n\n        React.Children.forEach(children, child => {\n            keys[child.props.id] = true;\n        });\n\n        return keys;\n    });\n\n    React.useEffect(() => {\n        if (ref.current) {\n            const rect = ref.current.parentElement?.getBoundingClientRect();\n\n            if (rect) {\n                const width = showLegend ? rect.width / 2 : rect.width;\n                const max: number = rect.height < width ? rect.height : width;\n                setRadius(max / 2);\n            }\n        }\n    }, [showLegend]);\n\n    const diameter = radius * 2; // get dimensions of the parent container to find the max radius, so we can fill the container AND always have a 16px wide donut\n    const data: DonutChartSegmentProps[] = React.Children.map(children, child => ({\n        id: child.props.id,\n        color: child.props.color,\n        label: child.props.label,\n        value: child.props.value,\n    }));\n    const displayedData = data.filter(child => visibleItems[child.id]);\n\n    const total = displayedData.reduce((accum, entry) => accum + entry.value, 0);\n    const showTooltip = (!showLegend || legendPosition === 'bottom') && displayedData.length > 0;\n\n    const handleLegendClick = (entry: DonutChartSegmentProps | DonutChartSegmentProps[]): void => {\n        if (legendPosition === 'bottom' && !Array.isArray(entry)) {\n            setVisibleItems({ ...visibleItems, [entry.id]: !visibleItems[entry.id] });\n        } else {\n            const nextSelectedItem = Array.isArray(entry) ? entry.map(entryItem => entryItem.id) : [entry.id];\n\n            // Using slice to avoid mutation of the react state 'selectedItem'\n            const isCurrentSegmentActive = selectedItem.slice().sort().join(',') === nextSelectedItem.sort().join(',');\n\n            if (onClick && !isCurrentSegmentActive) {\n                onClick(entry);\n            }\n\n            setSelectedItem(isCurrentSegmentActive ? [] : nextSelectedItem);\n        }\n    };\n    const handlePieClick = React.useCallback(\n        (pieId: string | undefined) => {\n            if (onClick && pieId !== undefined) {\n                const pieProps = displayedData.find(item => item.id === pieId);\n\n                onClick(pieProps as DonutChartSegmentProps);\n            }\n        },\n        [onClick, displayedData]\n    );\n\n    const singlePieDonutChart = displayedData.length === 1;\n    const activeShapeColor = React.useMemo(() => {\n        const getSegmentColor = (item: SegmentIds) =>\n            item.reduce((colors, itemId) => {\n                const visibleHoveredItem = displayedData.find(dataItem => dataItem.id === itemId);\n\n                if (visibleHoveredItem) {\n                    colors[visibleHoveredItem.id] = visibleHoveredItem.color;\n                }\n\n                return colors;\n            }, {});\n\n        const hoveredSegmentColor = getSegmentColor(hoveredItem);\n        const selectedSegmentColor = getSegmentColor(selectedItem);\n\n        return legendPosition === 'bottom' || hoveredItem.length !== 0 ? hoveredSegmentColor : selectedSegmentColor;\n    }, [hoveredItem, selectedItem, legendPosition]);\n\n    if (ref.current && !radius) {\n        return null;\n    }\n\n    const getActiveIndex = () => {\n        if (hoveredItem.length > 0) {\n            return hoveredItem.map(itemId => displayedData.findIndex(element => element.id === itemId));\n        }\n\n        return selectedItem.map(selectedItemId => displayedData.findIndex(element => element.id === selectedItemId));\n    };\n\n    const content = () => {\n        const elements = React.Children.toArray(children).filter(\n            (child): child is React.ReactElement<DonutChartSegmentProps> =>\n                React.isValidElement<DonutChartSegmentProps>(child) && visibleItems[child.props.id]\n        );\n\n        return elements.length > 0 ? (\n            elements.map((child, index) => {\n                return (\n                    <Recharts.Cell\n                        key={`cell-${index}`}\n                        name={child.props.label}\n                        fill={getThemeColor(child.props.color) ?? getThemeColor('blue-300')}\n                    />\n                );\n            })\n        ) : (\n            <Recharts.Cell key=\"empty-chart\" name={''} fill={getThemeColor('grey-200')} />\n        );\n    };\n\n    return (\n        <div\n            className={cn('relative h-full w-full', {\n                [`flex `]: showLegend,\n                'flex-col items-center': legendPosition === 'bottom',\n            })}\n            ref={ref}>\n            <CenteredLabel\n                radius={radius}\n                legendPosition={legendPosition}\n                label={label}\n                total={total}\n                formatter={formatter}\n                showLegend={showLegend}\n            />\n\n            <Recharts.PieChart data={data} height={diameter} width={diameter} style={{ transform: 'rotate(90deg) scale(-1,1)' }}>\n                {showTooltip ? (\n                    <Recharts.Tooltip\n                        {...getTooltipProps({\n                            style: { transform: 'rotate(90deg) scale(-1,1)' },\n                            singlePieDonutChart,\n                        })}\n                    />\n                ) : null}\n                <Recharts.Pie\n                    isAnimationActive={false}\n                    activeIndex={getActiveIndex()}\n                    activeShape={<ActiveShape pieColors={activeShapeColor} onClick={handlePieClick} />}\n                    data={displayedData.length > 0 ? displayedData : []}\n                    dataKey=\"value\"\n                    innerRadius={radius - HOVER_DONUT_WIDTH - DONUT_WIDTH} // offset the 12px wider hover state, and then make the donut 16px wide\n                    onMouseEnter={segment => displayedData.length > 0 && setHoveredItem([segment.id])}\n                    onMouseLeave={() => setHoveredItem([])}\n                    outerRadius={radius - HOVER_DONUT_WIDTH} // offset the 12px wide hover state\n                    paddingAngle={2}\n                    // Prevents the pie group element from being focusable\n                    rootTabIndex={-1}>\n                    {content()}\n                </Recharts.Pie>\n            </Recharts.PieChart>\n            {showLegend && (\n                <Legend\n                    data={data}\n                    visibleItems={visibleItems}\n                    onClick={handleLegendClick}\n                    total={total}\n                    setHoveredItem={setHoveredItem}\n                    label={label}\n                    legendPosition={legendPosition}\n                    hoveredItem={hoveredItem}\n                    selectedItem={selectedItem}\n                    formatter={formatter}\n                />\n            )}\n        </div>\n    );\n};\n\nDonutChart.Segment = Segment;\n"],"names":["Segment","_","DonutChart","children","formatter","onClick","showLegend","legendPosition","label","ref","React","useRef","radius","setRadius","useState","hoveredItem","setHoveredItem","selectedItem","setSelectedItem","visibleItems","setVisibleItems","keys","Children","forEach","child","props","id","useEffect","current","_ref$current$parentEl","rect","parentElement","getBoundingClientRect","width","max","height","diameter","data","map","color","value","displayedData","filter","total","reduce","accum","entry","showTooltip","length","handleLegendClick","Array","isArray","nextSelectedItem","entryItem","isCurrentSegmentActive","slice","sort","join","handlePieClick","useCallback","pieId","undefined","pieProps","find","item","singlePieDonutChart","activeShapeColor","useMemo","getSegmentColor","colors","itemId","visibleHoveredItem","dataItem","hoveredSegmentColor","selectedSegmentColor","getActiveIndex","findIndex","element","selectedItemId","content","elements","toArray","isValidElement","index","Recharts","key","name","fill","_getThemeColor","getThemeColor","className","cn","CenteredLabel","style","transform","getTooltipProps","isAnimationActive","activeIndex","activeShape","ActiveShape","pieColors","dataKey","innerRadius","HOVER_DONUT_WIDTH","DONUT_WIDTH","onMouseEnter","segment","onMouseLeave","outerRadius","paddingAngle","rootTabIndex","Legend"],"mappings":"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"}
+{"version":3,"file":"DonutChart.js","sources":["../../../../../../../../src/charts/components/Donut/DonutChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\nimport cn from 'clsx';\n\nimport { Color, getThemeColor } from '../../utils/color';\nimport { getTooltipProps } from '../../utils/common';\nimport { Legend } from './Legend';\nimport { CenteredLabel } from './CenteredLabel';\nimport { ActiveShape } from './ActiveShape';\nimport { DONUT_WIDTH, HOVER_DONUT_WIDTH } from './util';\n\nconst Segment = (_: DonutChartSegmentProps) => null;\n\nexport type DonutChartSegmentProps = {\n    color: Color;\n    id: string;\n    label: string;\n    value: number;\n};\n\nexport type SegmentIds = string[];\n\nexport type DonutChartProps = {\n    children: React.ReactElement<DonutChartSegmentProps> | React.ReactElement<DonutChartSegmentProps>[];\n    formatter?: (value: number) => string;\n    onClick?: (segment: DonutChartSegmentProps | DonutChartSegmentProps[]) => void;\n    showLegend?: boolean;\n    legendPosition?: string;\n    label: string;\n};\n\nexport const DonutChart = function DonutChart({\n    children,\n    formatter,\n    onClick,\n    showLegend = false,\n    legendPosition = 'bottom',\n    label,\n}: DonutChartProps) {\n    const ref = React.useRef<HTMLDivElement>(null);\n    const [radius, setRadius] = React.useState<number>(0);\n\n    const [hoveredItem, setHoveredItem] = React.useState<SegmentIds>([]);\n    // used for right legends\n    const [selectedItem, setSelectedItem] = React.useState<SegmentIds>([]);\n    // used for bottom legends\n    const [visibleItems, setVisibleItems] = React.useState<Record<string, boolean>>(() => {\n        const keys: Record<string, boolean> = {};\n\n        React.Children.forEach(children, child => {\n            keys[child.props.id] = true;\n        });\n\n        return keys;\n    });\n\n    React.useEffect(() => {\n        if (ref.current) {\n            const rect = ref.current.parentElement?.getBoundingClientRect();\n\n            if (rect) {\n                const width = showLegend ? rect.width / 2 : rect.width;\n                const max: number = rect.height < width ? rect.height : width;\n                setRadius(max / 2);\n            }\n        }\n    }, [showLegend]);\n\n    const diameter = radius * 2; // get dimensions of the parent container to find the max radius, so we can fill the container AND always have a 16px wide donut\n    const data: DonutChartSegmentProps[] = React.Children.map(children, child => ({\n        id: child.props.id,\n        color: child.props.color,\n        label: child.props.label,\n        value: child.props.value,\n    }));\n    const displayedData = data.filter(child => visibleItems[child.id]);\n\n    const total = displayedData.reduce((accum, entry) => accum + entry.value, 0);\n    const showTooltip = (!showLegend || legendPosition === 'bottom') && displayedData.length > 0;\n\n    const handleLegendClick = (entry: DonutChartSegmentProps | DonutChartSegmentProps[]): void => {\n        if (legendPosition === 'bottom' && !Array.isArray(entry)) {\n            setVisibleItems({ ...visibleItems, [entry.id]: !visibleItems[entry.id] });\n        } else {\n            const nextSelectedItem = Array.isArray(entry) ? entry.map(entryItem => entryItem.id) : [entry.id];\n\n            // Using slice to avoid mutation of the react state 'selectedItem'\n            const isCurrentSegmentActive = selectedItem.slice().sort().join(',') === nextSelectedItem.sort().join(',');\n\n            if (onClick && !isCurrentSegmentActive) {\n                onClick(entry);\n            }\n\n            setSelectedItem(isCurrentSegmentActive ? [] : nextSelectedItem);\n        }\n    };\n    const handlePieClick = React.useCallback(\n        (pieId: string | undefined) => {\n            if (onClick && pieId !== undefined) {\n                const pieProps = displayedData.find(item => item.id === pieId);\n\n                onClick(pieProps as DonutChartSegmentProps);\n            }\n        },\n        [onClick, displayedData]\n    );\n\n    const singlePieDonutChart = displayedData.length === 1;\n    const activeShapeColor = React.useMemo(() => {\n        const getSegmentColor = (item: SegmentIds) =>\n            item.reduce((colors, itemId) => {\n                const visibleHoveredItem = displayedData.find(dataItem => dataItem.id === itemId);\n\n                if (visibleHoveredItem) {\n                    colors[visibleHoveredItem.id] = visibleHoveredItem.color;\n                }\n\n                return colors;\n            }, {} as Record<string, string>);\n\n        const hoveredSegmentColor = getSegmentColor(hoveredItem);\n        const selectedSegmentColor = getSegmentColor(selectedItem);\n\n        return legendPosition === 'bottom' || hoveredItem.length !== 0 ? hoveredSegmentColor : selectedSegmentColor;\n    }, [hoveredItem, selectedItem, legendPosition]);\n\n    if (ref.current && !radius) {\n        return null;\n    }\n\n    const getActiveIndex = () => {\n        if (hoveredItem.length > 0) {\n            return hoveredItem.map(itemId => displayedData.findIndex(element => element.id === itemId));\n        }\n\n        return selectedItem.map(selectedItemId => displayedData.findIndex(element => element.id === selectedItemId));\n    };\n\n    const content = () => {\n        const elements = React.Children.toArray(children).filter(\n            (child): child is React.ReactElement<DonutChartSegmentProps> =>\n                React.isValidElement<DonutChartSegmentProps>(child) && visibleItems[child.props.id]\n        );\n\n        return elements.length > 0 ? (\n            elements.map((child, index) => {\n                return (\n                    <Recharts.Cell\n                        key={`cell-${index}`}\n                        name={child.props.label}\n                        fill={getThemeColor(child.props.color) ?? getThemeColor('blue-300')}\n                    />\n                );\n            })\n        ) : (\n            <Recharts.Cell key=\"empty-chart\" name={''} fill={getThemeColor('grey-200')} />\n        );\n    };\n\n    return (\n        <div\n            className={cn('relative h-full w-full', {\n                [`flex `]: showLegend,\n                'flex-col items-center': legendPosition === 'bottom',\n            })}\n            ref={ref}>\n            <CenteredLabel\n                radius={radius}\n                legendPosition={legendPosition}\n                label={label}\n                total={total}\n                formatter={formatter}\n                showLegend={showLegend}\n            />\n\n            <Recharts.PieChart data={data} height={diameter} width={diameter} style={{ transform: 'rotate(90deg) scale(-1,1)' }}>\n                {showTooltip ? (\n                    <Recharts.Tooltip\n                        {...getTooltipProps({\n                            style: { transform: 'rotate(90deg) scale(-1,1)' },\n                            singlePieDonutChart,\n                        })}\n                    />\n                ) : null}\n                <Recharts.Pie\n                    isAnimationActive={false}\n                    activeIndex={getActiveIndex()}\n                    activeShape={<ActiveShape pieColors={activeShapeColor} onClick={handlePieClick} />}\n                    data={displayedData.length > 0 ? displayedData : []}\n                    dataKey=\"value\"\n                    innerRadius={radius - HOVER_DONUT_WIDTH - DONUT_WIDTH} // offset the 12px wider hover state, and then make the donut 16px wide\n                    onMouseEnter={(segment: DonutChartSegmentProps) => displayedData.length > 0 && setHoveredItem([segment.id])}\n                    onMouseLeave={() => setHoveredItem([])}\n                    outerRadius={radius - HOVER_DONUT_WIDTH} // offset the 12px wide hover state\n                    paddingAngle={2}\n                    // Prevents the pie group element from being focusable\n                    rootTabIndex={-1}>\n                    {content()}\n                </Recharts.Pie>\n            </Recharts.PieChart>\n            {showLegend && (\n                <Legend\n                    data={data}\n                    visibleItems={visibleItems}\n                    onClick={handleLegendClick}\n                    total={total}\n                    setHoveredItem={setHoveredItem}\n                    label={label}\n                    legendPosition={legendPosition}\n                    hoveredItem={hoveredItem}\n                    selectedItem={selectedItem}\n                    formatter={formatter}\n                />\n            )}\n        </div>\n    );\n};\n\nDonutChart.Segment = Segment;\n"],"names":["Segment","_","DonutChart","children","formatter","onClick","showLegend","legendPosition","label","ref","React","useRef","radius","setRadius","useState","hoveredItem","setHoveredItem","selectedItem","setSelectedItem","visibleItems","setVisibleItems","keys","Children","forEach","child","props","id","useEffect","current","_ref$current$parentEl","rect","parentElement","getBoundingClientRect","width","max","height","diameter","data","map","color","value","displayedData","filter","total","reduce","accum","entry","showTooltip","length","handleLegendClick","Array","isArray","nextSelectedItem","entryItem","isCurrentSegmentActive","slice","sort","join","handlePieClick","useCallback","pieId","undefined","pieProps","find","item","singlePieDonutChart","activeShapeColor","useMemo","getSegmentColor","colors","itemId","visibleHoveredItem","dataItem","hoveredSegmentColor","selectedSegmentColor","getActiveIndex","findIndex","element","selectedItemId","content","elements","toArray","isValidElement","index","Recharts","key","name","fill","_getThemeColor","getThemeColor","className","cn","CenteredLabel","style","transform","getTooltipProps","isAnimationActive","activeIndex","activeShape","ActiveShape","pieColors","dataKey","innerRadius","HOVER_DONUT_WIDTH","DONUT_WIDTH","onMouseEnter","segment","onMouseLeave","outerRadius","paddingAngle","rootTabIndex","Legend"],"mappings":";;;;;;;;;;AAWA,MAAMA,OAAO,GAAIC,CAAyB,IAAK,IAAI;MAoBtCC,UAAU,GAAG,SAASA,UAAUA,CAAC;EAC1CC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPC,UAAU,GAAG,KAAK;EAClBC,cAAc,GAAG,QAAQ;EACzBC;CACc;EACd,MAAMC,GAAG,GAAGC,cAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;EAC9C,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGH,cAAK,CAACI,QAAQ,CAAS,CAAC,CAAC;EAErD,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGN,cAAK,CAACI,QAAQ,CAAa,EAAE,CAAC;;EAEpE,MAAM,CAACG,YAAY,EAAEC,eAAe,CAAC,GAAGR,cAAK,CAACI,QAAQ,CAAa,EAAE,CAAC;;EAEtE,MAAM,CAACK,YAAY,EAAEC,eAAe,CAAC,GAAGV,cAAK,CAACI,QAAQ,CAA0B;IAC5E,MAAMO,IAAI,GAA4B,EAAE;IAExCX,cAAK,CAACY,QAAQ,CAACC,OAAO,CAACpB,QAAQ,EAAEqB,KAAK;MAClCH,IAAI,CAACG,KAAK,CAACC,KAAK,CAACC,EAAE,CAAC,GAAG,IAAI;KAC9B,CAAC;IAEF,OAAOL,IAAI;GACd,CAAC;EAEFX,cAAK,CAACiB,SAAS,CAAC;IACZ,IAAIlB,GAAG,CAACmB,OAAO,EAAE;MAAA,IAAAC,qBAAA;MACb,MAAMC,IAAI,IAAAD,qBAAA,GAAGpB,GAAG,CAACmB,OAAO,CAACG,aAAa,cAAAF,qBAAA,uBAAzBA,qBAAA,CAA2BG,qBAAqB,EAAE;MAE/D,IAAIF,IAAI,EAAE;QACN,MAAMG,KAAK,GAAG3B,UAAU,GAAGwB,IAAI,CAACG,KAAK,GAAG,CAAC,GAAGH,IAAI,CAACG,KAAK;QACtD,MAAMC,GAAG,GAAWJ,IAAI,CAACK,MAAM,GAAGF,KAAK,GAAGH,IAAI,CAACK,MAAM,GAAGF,KAAK;QAC7DpB,SAAS,CAACqB,GAAG,GAAG,CAAC,CAAC;;;GAG7B,EAAE,CAAC5B,UAAU,CAAC,CAAC;EAEhB,MAAM8B,QAAQ,GAAGxB,MAAM,GAAG,CAAC,CAAC;EAC5B,MAAMyB,IAAI,GAA6B3B,cAAK,CAACY,QAAQ,CAACgB,GAAG,CAACnC,QAAQ,EAAEqB,KAAK,KAAK;IAC1EE,EAAE,EAAEF,KAAK,CAACC,KAAK,CAACC,EAAE;IAClBa,KAAK,EAAEf,KAAK,CAACC,KAAK,CAACc,KAAK;IACxB/B,KAAK,EAAEgB,KAAK,CAACC,KAAK,CAACjB,KAAK;IACxBgC,KAAK,EAAEhB,KAAK,CAACC,KAAK,CAACe;GACtB,CAAC,CAAC;EACH,MAAMC,aAAa,GAAGJ,IAAI,CAACK,MAAM,CAAClB,KAAK,IAAIL,YAAY,CAACK,KAAK,CAACE,EAAE,CAAC,CAAC;EAElE,MAAMiB,KAAK,GAAGF,aAAa,CAACG,MAAM,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAKD,KAAK,GAAGC,KAAK,CAACN,KAAK,EAAE,CAAC,CAAC;EAC5E,MAAMO,WAAW,GAAG,CAAC,CAACzC,UAAU,IAAIC,cAAc,KAAK,QAAQ,KAAKkC,aAAa,CAACO,MAAM,GAAG,CAAC;EAE5F,MAAMC,iBAAiB,GAAIH,KAAwD;IAC/E,IAAIvC,cAAc,KAAK,QAAQ,IAAI,CAAC2C,KAAK,CAACC,OAAO,CAACL,KAAK,CAAC,EAAE;MACtD1B,eAAe,CAAC;QAAE,GAAGD,YAAY;QAAE,CAAC2B,KAAK,CAACpB,EAAE,GAAG,CAACP,YAAY,CAAC2B,KAAK,CAACpB,EAAE;OAAG,CAAC;KAC5E,MAAM;MACH,MAAM0B,gBAAgB,GAAGF,KAAK,CAACC,OAAO,CAACL,KAAK,CAAC,GAAGA,KAAK,CAACR,GAAG,CAACe,SAAS,IAAIA,SAAS,CAAC3B,EAAE,CAAC,GAAG,CAACoB,KAAK,CAACpB,EAAE,CAAC;;MAGjG,MAAM4B,sBAAsB,GAAGrC,YAAY,CAACsC,KAAK,EAAE,CAACC,IAAI,EAAE,CAACC,IAAI,CAAC,GAAG,CAAC,KAAKL,gBAAgB,CAACI,IAAI,EAAE,CAACC,IAAI,CAAC,GAAG,CAAC;MAE1G,IAAIpD,OAAO,IAAI,CAACiD,sBAAsB,EAAE;QACpCjD,OAAO,CAACyC,KAAK,CAAC;;MAGlB5B,eAAe,CAACoC,sBAAsB,GAAG,EAAE,GAAGF,gBAAgB,CAAC;;GAEtE;EACD,MAAMM,cAAc,GAAGhD,cAAK,CAACiD,WAAW,CACnCC,KAAyB;IACtB,IAAIvD,OAAO,IAAIuD,KAAK,KAAKC,SAAS,EAAE;MAChC,MAAMC,QAAQ,GAAGrB,aAAa,CAACsB,IAAI,CAACC,IAAI,IAAIA,IAAI,CAACtC,EAAE,KAAKkC,KAAK,CAAC;MAE9DvD,OAAO,CAACyD,QAAkC,CAAC;;GAElD,EACD,CAACzD,OAAO,EAAEoC,aAAa,CAAC,CAC3B;EAED,MAAMwB,mBAAmB,GAAGxB,aAAa,CAACO,MAAM,KAAK,CAAC;EACtD,MAAMkB,gBAAgB,GAAGxD,cAAK,CAACyD,OAAO,CAAC;IACnC,MAAMC,eAAe,GAAIJ,IAAgB,IACrCA,IAAI,CAACpB,MAAM,CAAC,CAACyB,MAAM,EAAEC,MAAM;MACvB,MAAMC,kBAAkB,GAAG9B,aAAa,CAACsB,IAAI,CAACS,QAAQ,IAAIA,QAAQ,CAAC9C,EAAE,KAAK4C,MAAM,CAAC;MAEjF,IAAIC,kBAAkB,EAAE;QACpBF,MAAM,CAACE,kBAAkB,CAAC7C,EAAE,CAAC,GAAG6C,kBAAkB,CAAChC,KAAK;;MAG5D,OAAO8B,MAAM;KAChB,EAAE,EAA4B,CAAC;IAEpC,MAAMI,mBAAmB,GAAGL,eAAe,CAACrD,WAAW,CAAC;IACxD,MAAM2D,oBAAoB,GAAGN,eAAe,CAACnD,YAAY,CAAC;IAE1D,OAAOV,cAAc,KAAK,QAAQ,IAAIQ,WAAW,CAACiC,MAAM,KAAK,CAAC,GAAGyB,mBAAmB,GAAGC,oBAAoB;GAC9G,EAAE,CAAC3D,WAAW,EAAEE,YAAY,EAAEV,cAAc,CAAC,CAAC;EAE/C,IAAIE,GAAG,CAACmB,OAAO,IAAI,CAAChB,MAAM,EAAE;IACxB,OAAO,IAAI;;EAGf,MAAM+D,cAAc,GAAGA;IACnB,IAAI5D,WAAW,CAACiC,MAAM,GAAG,CAAC,EAAE;MACxB,OAAOjC,WAAW,CAACuB,GAAG,CAACgC,MAAM,IAAI7B,aAAa,CAACmC,SAAS,CAACC,OAAO,IAAIA,OAAO,CAACnD,EAAE,KAAK4C,MAAM,CAAC,CAAC;;IAG/F,OAAOrD,YAAY,CAACqB,GAAG,CAACwC,cAAc,IAAIrC,aAAa,CAACmC,SAAS,CAACC,OAAO,IAAIA,OAAO,CAACnD,EAAE,KAAKoD,cAAc,CAAC,CAAC;GAC/G;EAED,MAAMC,OAAO,GAAGA;IACZ,MAAMC,QAAQ,GAAGtE,cAAK,CAACY,QAAQ,CAAC2D,OAAO,CAAC9E,QAAQ,CAAC,CAACuC,MAAM,CACnDlB,KAAK,iBACFd,cAAK,CAACwE,cAAc,CAAyB1D,KAAK,CAAC,IAAIL,YAAY,CAACK,KAAK,CAACC,KAAK,CAACC,EAAE,CAAC,CAC1F;IAED,OAAOsD,QAAQ,CAAChC,MAAM,GAAG,CAAC,GACtBgC,QAAQ,CAAC1C,GAAG,CAAC,CAACd,KAAK,EAAE2D,KAAK;;MACtB,oBACIzE,6BAAC0E,IAAa;QACVC,GAAG,EAAE,QAAQF,KAAK,EAAE;QACpBG,IAAI,EAAE9D,KAAK,CAACC,KAAK,CAACjB,KAAK;QACvB+E,IAAI,GAAAC,cAAA,GAAEC,aAAa,CAACjE,KAAK,CAACC,KAAK,CAACc,KAAK,CAAC,cAAAiD,cAAA,cAAAA,cAAA,GAAIC,aAAa,CAAC,UAAU;QACpE;KAET,CAAC,iBAEF/E,6BAAC0E,IAAa;MAACC,GAAG,EAAC,aAAa;MAACC,IAAI,EAAE,EAAE;MAAEC,IAAI,EAAEE,aAAa,CAAC,UAAU;MAAK,CACjF;GACJ;EAED,oBACI/E;IACIgF,SAAS,EAAEC,EAAE,CAAC,wBAAwB,EAAE;MACpC,CAAC,OAAO,GAAGrF,UAAU;MACrB,uBAAuB,EAAEC,cAAc,KAAK;KAC/C,CAAC;IACFE,GAAG,EAAEA;kBACLC,6BAACkF,aAAa;IACVhF,MAAM,EAAEA,MAAM;IACdL,cAAc,EAAEA,cAAc;IAC9BC,KAAK,EAAEA,KAAK;IACZmC,KAAK,EAAEA,KAAK;IACZvC,SAAS,EAAEA,SAAS;IACpBE,UAAU,EAAEA;IACd,eAEFI,6BAAC0E,QAAiB;IAAC/C,IAAI,EAAEA,IAAI;IAAEF,MAAM,EAAEC,QAAQ;IAAEH,KAAK,EAAEG,QAAQ;IAAEyD,KAAK,EAAE;MAAEC,SAAS,EAAE;;KACjF/C,WAAW,iBACRrC,6BAAC0E,OAAgB,oBACTW,eAAe,CAAC;IAChBF,KAAK,EAAE;MAAEC,SAAS,EAAE;KAA6B;IACjD7B;GACH,CAAC,EACJ,IACF,IAAI,eACRvD,6BAAC0E,GAAY;IACTY,iBAAiB,EAAE,KAAK;IACxBC,WAAW,EAAEtB,cAAc,EAAE;IAC7BuB,WAAW,eAAExF,6BAACyF,WAAW;MAACC,SAAS,EAAElC,gBAAgB;MAAE7D,OAAO,EAAEqD;MAAkB;IAClFrB,IAAI,EAAEI,aAAa,CAACO,MAAM,GAAG,CAAC,GAAGP,aAAa,GAAG,EAAE;IACnD4D,OAAO,EAAC,OAAO;IACfC,WAAW,EAAE1F,MAAM,GAAG2F,iBAAiB,GAAGC,WAAW;IACrDC,YAAY,EAAGC,OAA+B,IAAKjE,aAAa,CAACO,MAAM,GAAG,CAAC,IAAIhC,cAAc,CAAC,CAAC0F,OAAO,CAAChF,EAAE,CAAC,CAAC;IAC3GiF,YAAY,EAAEA,MAAM3F,cAAc,CAAC,EAAE,CAAC;IACtC4F,WAAW,EAAEhG,MAAM,GAAG2F,iBAAiB;IACvCM,YAAY,EAAE,CAAC;;IAEfC,YAAY,EAAE,CAAC;KACd/B,OAAO,EAAE,CACC,CACC,EACnBzE,UAAU,kBACPI,6BAACqG,MAAM;IACH1E,IAAI,EAAEA,IAAI;IACVlB,YAAY,EAAEA,YAAY;IAC1Bd,OAAO,EAAE4C,iBAAiB;IAC1BN,KAAK,EAAEA,KAAK;IACZ3B,cAAc,EAAEA,cAAc;IAC9BR,KAAK,EAAEA,KAAK;IACZD,cAAc,EAAEA,cAAc;IAC9BQ,WAAW,EAAEA,WAAW;IACxBE,YAAY,EAAEA,YAAY;IAC1Bb,SAAS,EAAEA;IACb,CACL,CACC;AAEd;AAEAF,UAAU,CAACF,OAAO,GAAGA,OAAO;;;;"}

package/dist/esm/packages/taco/src/charts/components/Donut/Legend.js

@@ -84,6 +84,7 @@ import '../../../components/Header/Header.js';
 import '../../../components/Layout/Layout.js';
 import '../../../components/Navigation2/components/Link.js';
 import '../../../components/Navigation2/Navigation2.js';
+import '../../../primitives/Table/useTableDataLoader2.js';
 import '../../../hooks/useBoundaryOverflowDetection.js';
 import '../../../utils/hooks/useOnClickOutside.js';
 

package/dist/esm/packages/taco/src/charts/components/Donut/Legend.js.map

@@ -1 +1 @@
-{"version":3,"file":"Legend.js","sources":["../../../../../../../../src/charts/components/Donut/Legend.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Button, Icon, OverflowGroup } from '../../../index';\n\nimport { getThemeColor } from '../../utils/color';\nimport { DonutChartProps, DonutChartSegmentProps, SegmentIds } from './DonutChart';\n\ntype LegendProps = Pick<DonutChartProps, 'formatter' | 'label' | 'legendPosition'> & {\n    data: DonutChartSegmentProps[];\n    hoveredItem: SegmentIds;\n    onClick: (entry: DonutChartSegmentProps | DonutChartSegmentProps[]) => void;\n    selectedItem: SegmentIds;\n    setHoveredItem: React.Dispatch<React.SetStateAction<SegmentIds>>;\n    total: number;\n    visibleItems: Record<string, boolean>;\n};\n\nexport const Legend = ({\n    legendPosition,\n    hoveredItem,\n    selectedItem,\n    data,\n    onClick,\n    setHoveredItem,\n    formatter,\n    total,\n    visibleItems,\n    label,\n}: LegendProps) => {\n    const isTotalLegendSelected = selectedItem.length === data.length;\n    const isTotalLegendHovered = hoveredItem.length === data.length;\n\n    const handleMouseLeave = () => setHoveredItem([]);\n\n    const renderLegendItem = (entry: DonutChartSegmentProps | null, index?: number) => {\n        const isTotal = entry === null;\n        // We can't use `isTotal` here because TypeScript is unable to infer the type when `entry` is not null.\n        const itemData = entry === null ? { id: 'total', label, value: total, color: 'grey-300' } : entry;\n        const isSelected = isTotal ? isTotalLegendSelected : selectedItem.includes(itemData.id);\n        const isHovered = isTotal ? isTotalLegendHovered : hoveredItem.includes(itemData.id);\n\n        return (\n            <li\n                key={isTotal ? 'total' : `${itemData.label}-${index}`}\n                className={cn('mr-2 flex cursor-pointer gap-2 rounded pl-0 pr-1', {\n                    'bg-grey-100': isHovered && (!isTotal || legendPosition === 'right'),\n                    'bg-grey-200': isSelected && (!isTotal || legendPosition === 'right'),\n                })}\n                onClick={() => onClick(isTotal ? data : itemData)}\n                onMouseEnter={() => setHoveredItem(isTotal ? data.map(item => item.id) : [itemData.id])}\n                onMouseLeave={handleMouseLeave}>\n                {legendPosition === 'bottom' ? (\n                    <div className=\"flex items-center gap-1\">\n                        <span\n                            className={cn('ml-1 h-3 w-3 rounded-sm', {\n                                'border-grey-300 border !bg-white': !visibleItems[itemData.id],\n                            })}\n                            style={{ backgroundColor: getThemeColor(itemData.color) }}>\n                            {visibleItems[itemData.id] && isHovered && (\n                                <Icon name=\"tick-bold\" className=\"mb-2.5 !h-full !w-full text-white\" />\n                            )}\n                        </span>\n                        <div>{itemData.label}</div>\n                    </div>\n                ) : (\n                    <>\n                        <span\n                            className=\"ml-1 mt-1 h-9 w-2 rounded-[1px]\"\n                            style={{ backgroundColor: getThemeColor(itemData.color) }}\n                        />\n                        <div>\n                            {itemData.label}\n                            <span className=\"-mt-1 flex w-full text-lg font-bold\">\n                                {formatter ? formatter(itemData.value) : itemData.value}\n                            </span>\n                        </div>\n                    </>\n                )}\n            </li>\n        );\n    };\n\n    const moreButton = moreButtonText => (\n        <Button appearance=\"transparent\" className=\"text-grey-700\">\n            {moreButtonText}\n        </Button>\n    );\n\n    const className = cn('flex-grow pl-4', {\n        'w-full': legendPosition === 'bottom',\n    });\n    return (\n        <div className={className}>\n            <ul\n                className={cn(\n                    'mb-0 ml-0 mt-4 flex justify-center space-y-1',\n                    legendPosition === 'right' ? 'flex-col gap-1' : 'flex-row'\n                )}>\n                {legendPosition === 'right' ? (\n                    <>\n                        {renderLegendItem(null)}\n                        {data.map(renderLegendItem)}\n                    </>\n                ) : (\n                    <OverflowGroup className=\"w-full items-center py-1\" moreButton={moreButton}>\n                        {data.map(renderLegendItem)}\n                    </OverflowGroup>\n                )}\n            </ul>\n        </div>\n    );\n};\n"],"names":["Legend","legendPosition","hoveredItem","selectedItem","data","onClick","setHoveredItem","formatter","total","visibleItems","label","isTotalLegendSelected","length","isTotalLegendHovered","handleMouseLeave","renderLegendItem","entry","index","isTotal","itemData","id","value","color","isSelected","includes","isHovered","React","key","className","cn","onMouseEnter","map","item","onMouseLeave","style","backgroundColor","getThemeColor","Icon","name","moreButton","moreButtonText","Button","appearance","OverflowGroup"],"mappings":"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"}
+{"version":3,"file":"Legend.js","sources":["../../../../../../../../src/charts/components/Donut/Legend.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Button, Icon, OverflowGroup } from '../../../index';\n\nimport { getThemeColor } from '../../utils/color';\nimport { DonutChartProps, DonutChartSegmentProps, SegmentIds } from './DonutChart';\n\ntype LegendProps = Pick<DonutChartProps, 'formatter' | 'label' | 'legendPosition'> & {\n    data: DonutChartSegmentProps[];\n    hoveredItem: SegmentIds;\n    onClick: (entry: DonutChartSegmentProps | DonutChartSegmentProps[]) => void;\n    selectedItem: SegmentIds;\n    setHoveredItem: React.Dispatch<React.SetStateAction<SegmentIds>>;\n    total: number;\n    visibleItems: Record<string, boolean>;\n};\n\nexport const Legend = ({\n    legendPosition,\n    hoveredItem,\n    selectedItem,\n    data,\n    onClick,\n    setHoveredItem,\n    formatter,\n    total,\n    visibleItems,\n    label,\n}: LegendProps) => {\n    const isTotalLegendSelected = selectedItem.length === data.length;\n    const isTotalLegendHovered = hoveredItem.length === data.length;\n\n    const handleMouseLeave = () => setHoveredItem([]);\n\n    const renderLegendItem = (entry: DonutChartSegmentProps | null, index?: number) => {\n        const isTotal = entry === null;\n        // We can't use `isTotal` here because TypeScript is unable to infer the type when `entry` is not null.\n        const itemData = entry === null ? { id: 'total', label, value: total, color: 'grey-300' } : entry;\n        const isSelected = isTotal ? isTotalLegendSelected : selectedItem.includes(itemData.id);\n        const isHovered = isTotal ? isTotalLegendHovered : hoveredItem.includes(itemData.id);\n\n        return (\n            <li\n                key={isTotal ? 'total' : `${itemData.label}-${index}`}\n                className={cn('mr-2 flex cursor-pointer gap-2 rounded pl-0 pr-1', {\n                    'bg-grey-100': isHovered && (!isTotal || legendPosition === 'right'),\n                    'bg-grey-200': isSelected && (!isTotal || legendPosition === 'right'),\n                })}\n                onClick={() => onClick(isTotal ? data : itemData)}\n                onMouseEnter={() => setHoveredItem(isTotal ? data.map(item => item.id) : [itemData.id])}\n                onMouseLeave={handleMouseLeave}>\n                {legendPosition === 'bottom' ? (\n                    <div className=\"flex items-center gap-1\">\n                        <span\n                            className={cn('ml-1 h-3 w-3 rounded-sm', {\n                                'border-grey-300 border !bg-white': !visibleItems[itemData.id],\n                            })}\n                            style={{ backgroundColor: getThemeColor(itemData.color) }}>\n                            {visibleItems[itemData.id] && isHovered && (\n                                <Icon name=\"tick-bold\" className=\"mb-2.5 !h-full !w-full text-white\" />\n                            )}\n                        </span>\n                        <div>{itemData.label}</div>\n                    </div>\n                ) : (\n                    <>\n                        <span\n                            className=\"ml-1 mt-1 h-9 w-2 rounded-[1px]\"\n                            style={{ backgroundColor: getThemeColor(itemData.color) }}\n                        />\n                        <div>\n                            {itemData.label}\n                            <span className=\"-mt-1 flex w-full text-lg font-bold\">\n                                {formatter ? formatter(itemData.value) : itemData.value}\n                            </span>\n                        </div>\n                    </>\n                )}\n            </li>\n        );\n    };\n\n    const moreButton = (moreButtonText: string) => (\n        <Button appearance=\"transparent\" className=\"text-grey-700\">\n            {moreButtonText}\n        </Button>\n    );\n\n    const className = cn('flex-grow pl-4', {\n        'w-full': legendPosition === 'bottom',\n    });\n    return (\n        <div className={className}>\n            <ul\n                className={cn(\n                    'mb-0 ml-0 mt-4 flex justify-center space-y-1',\n                    legendPosition === 'right' ? 'flex-col gap-1' : 'flex-row'\n                )}>\n                {legendPosition === 'right' ? (\n                    <>\n                        {renderLegendItem(null)}\n                        {data.map(renderLegendItem)}\n                    </>\n                ) : (\n                    <OverflowGroup className=\"w-full items-center py-1\" moreButton={moreButton}>\n                        {data.map(renderLegendItem)}\n                    </OverflowGroup>\n                )}\n            </ul>\n        </div>\n    );\n};\n"],"names":["Legend","legendPosition","hoveredItem","selectedItem","data","onClick","setHoveredItem","formatter","total","visibleItems","label","isTotalLegendSelected","length","isTotalLegendHovered","handleMouseLeave","renderLegendItem","entry","index","isTotal","itemData","id","value","color","isSelected","includes","isHovered","React","key","className","cn","onMouseEnter","map","item","onMouseLeave","style","backgroundColor","getThemeColor","Icon","name","moreButton","moreButtonText","Button","appearance","OverflowGroup"],"mappings":"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"}

package/dist/esm/packages/taco/src/charts/components/Legend.js

@@ -83,6 +83,7 @@ import '../../components/Header/Header.js';
 import '../../components/Layout/Layout.js';
 import '../../components/Navigation2/components/Link.js';
 import '../../components/Navigation2/Navigation2.js';
+import '../../primitives/Table/useTableDataLoader2.js';
 import '../../hooks/useBoundaryOverflowDetection.js';
 import '../../utils/hooks/useOnClickOutside.js';
 

package/dist/esm/packages/taco/src/charts/components/Legend.js.map

@@ -1 +1 @@
-{"version":3,"file":"Legend.js","sources":["../../../../../../../src/charts/components/Legend.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport cn from 'clsx';\nimport { Icon, OverflowGroup, Button } from '../../index';\n\nimport { ActiveChartItems, PayloadType } from './types';\n\ntype InternalProps<TType> = {\n    payload: PayloadType<TType>[];\n    layout: string;\n    activeIndex: number | undefined;\n};\n\nexport type LegendProps<TType> = {\n    activeItems: ActiveChartItems<TType>;\n    onMouseEnter: (entry: PayloadType<TType>, index: number) => void;\n    onMouseLeave: () => void;\n    onClick: (entry: PayloadType<TType>) => void;\n};\n\nexport type Props<TType> = LegendProps<TType> & InternalProps<TType>;\n\nexport function Legend<TType>(props: LegendProps<TType>) {\n    const { activeIndex, onMouseEnter, onMouseLeave, onClick, payload, layout, activeItems } = props as Props<TType>;\n    const [hoverIndex, setHoverIndex] = useState<number | null>(null);\n\n    const handleMouseEnter = (entry: PayloadType<TType>, index: number) => {\n        setHoverIndex(index);\n        if (activeItems[entry.dataKey]) onMouseEnter(entry, index);\n    };\n\n    const handleMouseLeave = () => {\n        onMouseLeave();\n        setHoverIndex(null);\n    };\n\n    const moreButton = moreButtonText => (\n        <Button appearance=\"transparent\" className=\"text-grey-700\">\n            {moreButtonText}\n        </Button>\n    );\n\n    return (\n        <div className=\"mx-auto w-auto max-w-full overflow-hidden\">\n            <div className={cn('mb-0 ml-0 flex justify-center', { 'flex-col': layout === 'vertical' })}>\n                {/** py-1 is need to make sure the more button focus outline doesn't get cropped */}\n                <OverflowGroup className=\"w-full items-center py-1\" moreButton={moreButton}>\n                    {payload.map((entry, index) => (\n                        <span\n                            key={`${entry.dataKey}-${index}`}\n                            className={cn(' hover:bg-grey-100 cursor-pointer px-[8px] py-[2px] hover:rounded-[4px]', {\n                                'bg-grey-100 rounded': activeIndex === index,\n                            })}\n                            onMouseEnter={() => handleMouseEnter(entry, index)}\n                            onMouseLeave={handleMouseLeave}\n                            onClick={onClick ? () => onClick(entry) : undefined}>\n                            <span className=\"text-grey-700 flex items-center gap-[4px]\">\n                                <span\n                                    className={cn('-mt-px ml-1 flex h-3 w-3 rounded-sm', {\n                                        'border-grey-300 border !bg-white': !activeItems[entry.dataKey],\n                                    })}\n                                    style={{ backgroundColor: entry.color }}>\n                                    {hoverIndex === index && activeItems[entry.dataKey] && (\n                                        <Icon name=\"tick-bold\" className=\"!h-full !w-full text-white\" />\n                                    )}\n                                </span>\n                                {entry.value}\n                            </span>\n                        </span>\n                    ))}\n                </OverflowGroup>\n            </div>\n        </div>\n    );\n}\n"],"names":["Legend","props","activeIndex","onMouseEnter","onMouseLeave","onClick","payload","layout","activeItems","hoverIndex","setHoverIndex","useState","handleMouseEnter","entry","index","dataKey","handleMouseLeave","moreButton","moreButtonText","React","Button","appearance","className","cn","OverflowGroup","map","key","undefined","style","backgroundColor","color","Icon","name","value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAqBgBA,MAAMA,CAAQC,KAAyB;EACnD,MAAM;IAAEC,WAAW;IAAEC,YAAY;IAAEC,YAAY;IAAEC,OAAO;IAAEC,OAAO;IAAEC,MAAM;IAAEC;GAAa,GAAGP,KAAqB;EAChH,MAAM,CAACQ,UAAU,EAAEC,aAAa,CAAC,GAAGC,QAAQ,CAAgB,IAAI,CAAC;EAEjE,MAAMC,gBAAgB,GAAGA,CAACC,KAAyB,EAAEC,KAAa;IAC9DJ,aAAa,CAACI,KAAK,CAAC;IACpB,IAAIN,WAAW,CAACK,KAAK,CAACE,OAAO,CAAC,EAAEZ,YAAY,CAACU,KAAK,EAAEC,KAAK,CAAC;GAC7D;EAED,MAAME,gBAAgB,GAAGA;IACrBZ,YAAY,EAAE;IACdM,aAAa,CAAC,IAAI,CAAC;GACtB;EAED,MAAMO,UAAU,GAAGC,cAAc,kBAC7BC,6BAACC,MAAM;IAACC,UAAU,EAAC,aAAa;IAACC,SAAS,EAAC;KACtCJ,cAAc,CACV,CACZ;EAED,oBACIC;IAAKG,SAAS,EAAC;kBACXH;IAAKG,SAAS,EAAEC,EAAE,CAAC,+BAA+B,EAAE;MAAE,UAAU,EAAEhB,MAAM,KAAK;KAAY;kBAErFY,6BAACK,aAAa;IAACF,SAAS,EAAC,0BAA0B;IAACL,UAAU,EAAEA;KAC3DX,OAAO,CAACmB,GAAG,CAAC,CAACZ,KAAK,EAAEC,KAAK,mBACtBK;IACIO,GAAG,EAAE,GAAGb,KAAK,CAACE,OAAO,IAAID,KAAK,EAAE;IAChCQ,SAAS,EAAEC,EAAE,CAAC,yEAAyE,EAAE;MACrF,qBAAqB,EAAErB,WAAW,KAAKY;KAC1C,CAAC;IACFX,YAAY,EAAEA,MAAMS,gBAAgB,CAACC,KAAK,EAAEC,KAAK,CAAC;IAClDV,YAAY,EAAEY,gBAAgB;IAC9BX,OAAO,EAAEA,OAAO,GAAG,MAAMA,OAAO,CAACQ,KAAK,CAAC,GAAGc;kBAC1CR;IAAMG,SAAS,EAAC;kBACZH;IACIG,SAAS,EAAEC,EAAE,CAAC,qCAAqC,EAAE;MACjD,kCAAkC,EAAE,CAACf,WAAW,CAACK,KAAK,CAACE,OAAO;KACjE,CAAC;IACFa,KAAK,EAAE;MAAEC,eAAe,EAAEhB,KAAK,CAACiB;;KAC/BrB,UAAU,KAAKK,KAAK,IAAIN,WAAW,CAACK,KAAK,CAACE,OAAO,CAAC,kBAC/CI,6BAACY,IAAI;IAACC,IAAI,EAAC,WAAW;IAACV,SAAS,EAAC;IAA+B,CACnE,CACE,EACNT,KAAK,CAACoB,KAAK,CACT,CACJ,CACV,CAAC,CACU,CACd,CACJ;AAEd;;;;"}
+{"version":3,"file":"Legend.js","sources":["../../../../../../../src/charts/components/Legend.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport cn from 'clsx';\nimport { Icon, OverflowGroup, Button } from '../../index';\n\nimport { ActiveChartItems, PayloadType } from './types';\n\ntype InternalProps<TType> = {\n    payload: PayloadType<TType>[];\n    layout: string;\n    activeIndex: number | undefined;\n};\n\nexport type LegendProps<TType> = {\n    activeItems: ActiveChartItems<TType>;\n    onMouseEnter: (entry: PayloadType<TType>, index: number) => void;\n    onMouseLeave: () => void;\n    onClick: (entry: PayloadType<TType>) => void;\n};\n\nexport type Props<TType> = LegendProps<TType> & InternalProps<TType>;\n\nexport function Legend<TType>(props: LegendProps<TType>) {\n    const { activeIndex, onMouseEnter, onMouseLeave, onClick, payload, layout, activeItems } = props as Props<TType>;\n    const [hoverIndex, setHoverIndex] = useState<number | null>(null);\n\n    const handleMouseEnter = (entry: PayloadType<TType>, index: number) => {\n        setHoverIndex(index);\n        if (activeItems[entry.dataKey]) onMouseEnter(entry, index);\n    };\n\n    const handleMouseLeave = () => {\n        onMouseLeave();\n        setHoverIndex(null);\n    };\n\n    const moreButton = (moreButtonText: string) => (\n        <Button appearance=\"transparent\" className=\"text-grey-700\">\n            {moreButtonText}\n        </Button>\n    );\n\n    return (\n        <div className=\"mx-auto w-auto max-w-full overflow-hidden\">\n            <div className={cn('mb-0 ml-0 flex justify-center', { 'flex-col': layout === 'vertical' })}>\n                {/** py-1 is need to make sure the more button focus outline doesn't get cropped */}\n                <OverflowGroup className=\"w-full items-center py-1\" moreButton={moreButton}>\n                    {payload.map((entry, index) => (\n                        <span\n                            key={`${entry.dataKey}-${index}`}\n                            className={cn(' hover:bg-grey-100 cursor-pointer px-[8px] py-[2px] hover:rounded-[4px]', {\n                                'bg-grey-100 rounded': activeIndex === index,\n                            })}\n                            onMouseEnter={() => handleMouseEnter(entry, index)}\n                            onMouseLeave={handleMouseLeave}\n                            onClick={onClick ? () => onClick(entry) : undefined}>\n                            <span className=\"text-grey-700 flex items-center gap-[4px]\">\n                                <span\n                                    className={cn('-mt-px ml-1 flex h-3 w-3 rounded-sm', {\n                                        'border-grey-300 border !bg-white': !activeItems[entry.dataKey],\n                                    })}\n                                    style={{ backgroundColor: entry.color }}>\n                                    {hoverIndex === index && activeItems[entry.dataKey] && (\n                                        <Icon name=\"tick-bold\" className=\"!h-full !w-full text-white\" />\n                                    )}\n                                </span>\n                                {entry.value}\n                            </span>\n                        </span>\n                    ))}\n                </OverflowGroup>\n            </div>\n        </div>\n    );\n}\n"],"names":["Legend","props","activeIndex","onMouseEnter","onMouseLeave","onClick","payload","layout","activeItems","hoverIndex","setHoverIndex","useState","handleMouseEnter","entry","index","dataKey","handleMouseLeave","moreButton","moreButtonText","React","Button","appearance","className","cn","OverflowGroup","map","key","undefined","style","backgroundColor","color","Icon","name","value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAqBgBA,MAAMA,CAAQC,KAAyB;EACnD,MAAM;IAAEC,WAAW;IAAEC,YAAY;IAAEC,YAAY;IAAEC,OAAO;IAAEC,OAAO;IAAEC,MAAM;IAAEC;GAAa,GAAGP,KAAqB;EAChH,MAAM,CAACQ,UAAU,EAAEC,aAAa,CAAC,GAAGC,QAAQ,CAAgB,IAAI,CAAC;EAEjE,MAAMC,gBAAgB,GAAGA,CAACC,KAAyB,EAAEC,KAAa;IAC9DJ,aAAa,CAACI,KAAK,CAAC;IACpB,IAAIN,WAAW,CAACK,KAAK,CAACE,OAAO,CAAC,EAAEZ,YAAY,CAACU,KAAK,EAAEC,KAAK,CAAC;GAC7D;EAED,MAAME,gBAAgB,GAAGA;IACrBZ,YAAY,EAAE;IACdM,aAAa,CAAC,IAAI,CAAC;GACtB;EAED,MAAMO,UAAU,GAAIC,cAAsB,kBACtCC,6BAACC,MAAM;IAACC,UAAU,EAAC,aAAa;IAACC,SAAS,EAAC;KACtCJ,cAAc,CACV,CACZ;EAED,oBACIC;IAAKG,SAAS,EAAC;kBACXH;IAAKG,SAAS,EAAEC,EAAE,CAAC,+BAA+B,EAAE;MAAE,UAAU,EAAEhB,MAAM,KAAK;KAAY;kBAErFY,6BAACK,aAAa;IAACF,SAAS,EAAC,0BAA0B;IAACL,UAAU,EAAEA;KAC3DX,OAAO,CAACmB,GAAG,CAAC,CAACZ,KAAK,EAAEC,KAAK,mBACtBK;IACIO,GAAG,EAAE,GAAGb,KAAK,CAACE,OAAO,IAAID,KAAK,EAAE;IAChCQ,SAAS,EAAEC,EAAE,CAAC,yEAAyE,EAAE;MACrF,qBAAqB,EAAErB,WAAW,KAAKY;KAC1C,CAAC;IACFX,YAAY,EAAEA,MAAMS,gBAAgB,CAACC,KAAK,EAAEC,KAAK,CAAC;IAClDV,YAAY,EAAEY,gBAAgB;IAC9BX,OAAO,EAAEA,OAAO,GAAG,MAAMA,OAAO,CAACQ,KAAK,CAAC,GAAGc;kBAC1CR;IAAMG,SAAS,EAAC;kBACZH;IACIG,SAAS,EAAEC,EAAE,CAAC,qCAAqC,EAAE;MACjD,kCAAkC,EAAE,CAACf,WAAW,CAACK,KAAK,CAACE,OAAO;KACjE,CAAC;IACFa,KAAK,EAAE;MAAEC,eAAe,EAAEhB,KAAK,CAACiB;;KAC/BrB,UAAU,KAAKK,KAAK,IAAIN,WAAW,CAACK,KAAK,CAACE,OAAO,CAAC,kBAC/CI,6BAACY,IAAI;IAACC,IAAI,EAAC,WAAW;IAACV,SAAS,EAAC;IAA+B,CACnE,CACE,EACNT,KAAK,CAACoB,KAAK,CACT,CACJ,CACV,CAAC,CACU,CACd,CACJ;AAEd;;;;"}

package/dist/esm/packages/taco/src/charts/components/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../../../../src/charts/components/Tooltip.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { getThemeColor } from '../utils/color';\n\ntype TooltipProps = {\n    active?: boolean;\n    formatter: (value: any) => any;\n    payload: any;\n    style?: CSSProperties;\n    singlePieDonutChart?: boolean;\n};\n\nexport const Tooltip = ({ active, formatter, payload, style, singlePieDonutChart }: TooltipProps) => {\n    const getColor = entry => {\n        if (singlePieDonutChart) {\n            // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie\n            // and one with multiple pies.\n            return getThemeColor(entry.payload.color);\n        }\n\n        return entry.color ?? entry.payload.fill ?? 'blue-500';\n    };\n\n    if (active && payload && payload.length) {\n        return (\n            <dl\n                className=\"z-20 grid grid-cols-[max-content_max-content] gap-x-4 rounded-md bg-white p-4 text-xs shadow-[0px_0px_1px_rgba(0,0,0,0.1),_0px_6px_18px_rgba(47,51,68,0.2)]\"\n                style={style}>\n                {payload.map((entry, index) => (\n                    <React.Fragment key={`${entry.name}-${index}`}>\n                        <dt className=\"text-grey-700 mb-0 flex items-center gap-1 font-normal\">\n                            <span className=\"-mt-px h-2.5 w-2.5 rounded-sm\" style={{ background: getColor(entry) }} />\n                            {\n                                // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie\n                                // and one with multiple pies.\n                                singlePieDonutChart ? entry.payload.label : entry.name\n                            }\n                        </dt>\n                        <dd className=\"mb-0 text-right font-bold text-black \">\n                            {formatter ? formatter(entry.value) : entry.value}\n                        </dd>\n                    </React.Fragment>\n                ))}\n            </dl>\n        );\n    }\n\n    return null;\n};\n"],"names":["Tooltip","active","formatter","payload","style","singlePieDonutChart","getColor","entry","getThemeColor","color","_ref","_entry$color","fill","length","React","className","map","index","Fragment","key","name","background","label","value"],"mappings":";;;MAWaA,OAAO,GAAGA,CAAC;EAAEC,MAAM;EAAEC,SAAS;EAAEC,OAAO;EAAEC,KAAK;EAAEC;CAAmC;EAC5F,MAAMC,QAAQ,GAAGC,KAAK;;IAClB,IAAIF,mBAAmB,EAAE;;;MAGrB,OAAOG,aAAa,CAACD,KAAK,CAACJ,OAAO,CAACM,KAAK,CAAC;;IAG7C,QAAAC,IAAA,IAAAC,YAAA,GAAOJ,KAAK,CAACE,KAAK,cAAAE,YAAA,cAAAA,YAAA,GAAIJ,KAAK,CAACJ,OAAO,CAACS,IAAI,cAAAF,IAAA,cAAAA,IAAA,GAAI,UAAU;GACzD;EAED,IAAIT,MAAM,IAAIE,OAAO,IAAIA,OAAO,CAACU,MAAM,EAAE;IACrC,oBACIC;MACIC,SAAS,EAAC,6JAA6J;MACvKX,KAAK,EAAEA;OACND,OAAO,CAACa,GAAG,CAAC,CAACT,KAAK,EAAEU,KAAK,mBACtBH,6BAACA,cAAK,CAACI,QAAQ;MAACC,GAAG,EAAE,GAAGZ,KAAK,CAACa,IAAI,IAAIH,KAAK;oBACvCH;MAAIC,SAAS,EAAC;oBACVD;MAAMC,SAAS,EAAC,+BAA+B;MAACX,KAAK,EAAE;QAAEiB,UAAU,EAAEf,QAAQ,CAACC,KAAK;;MAAO;;;IAItFF,mBAAmB,GAAGE,KAAK,CAACJ,OAAO,CAACmB,KAAK,GAAGf,KAAK,CAACa,IAAI,CAEzD,eACLN;MAAIC,SAAS,EAAC;OACTb,SAAS,GAAGA,SAAS,CAACK,KAAK,CAACgB,KAAK,CAAC,GAAGhB,KAAK,CAACgB,KAAK,CAChD,CACQ,CACpB,CAAC,CACD;;EAIb,OAAO,IAAI;AACf;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../../../../src/charts/components/Tooltip.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { getThemeColor } from '../utils/color';\n\ntype TooltipProps = {\n    active?: boolean;\n    formatter: (value: any) => any;\n    payload: any;\n    style?: CSSProperties;\n    singlePieDonutChart?: boolean;\n};\n\nexport const Tooltip = ({ active, formatter, payload, style, singlePieDonutChart }: TooltipProps) => {\n    const getColor = (entry: any) => {\n        if (singlePieDonutChart) {\n            // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie\n            // and one with multiple pies.\n            return getThemeColor(entry.payload.color);\n        }\n\n        return entry.color ?? entry.payload.fill ?? 'blue-500';\n    };\n\n    if (active && payload && payload.length) {\n        return (\n            <dl\n                className=\"z-20 grid grid-cols-[max-content_max-content] gap-x-4 rounded-md bg-white p-4 text-xs shadow-[0px_0px_1px_rgba(0,0,0,0.1),_0px_6px_18px_rgba(47,51,68,0.2)]\"\n                style={style}>\n                {payload.map((entry: any, index: number) => (\n                    <React.Fragment key={`${entry.name}-${index}`}>\n                        <dt className=\"text-grey-700 mb-0 flex items-center gap-1 font-normal\">\n                            <span className=\"-mt-px h-2.5 w-2.5 rounded-sm\" style={{ background: getColor(entry) }} />\n                            {\n                                // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie\n                                // and one with multiple pies.\n                                singlePieDonutChart ? entry.payload.label : entry.name\n                            }\n                        </dt>\n                        <dd className=\"mb-0 text-right font-bold text-black \">\n                            {formatter ? formatter(entry.value) : entry.value}\n                        </dd>\n                    </React.Fragment>\n                ))}\n            </dl>\n        );\n    }\n\n    return null;\n};\n"],"names":["Tooltip","active","formatter","payload","style","singlePieDonutChart","getColor","entry","getThemeColor","color","_ref","_entry$color","fill","length","React","className","map","index","Fragment","key","name","background","label","value"],"mappings":";;;MAWaA,OAAO,GAAGA,CAAC;EAAEC,MAAM;EAAEC,SAAS;EAAEC,OAAO;EAAEC,KAAK;EAAEC;CAAmC;EAC5F,MAAMC,QAAQ,GAAIC,KAAU;;IACxB,IAAIF,mBAAmB,EAAE;;;MAGrB,OAAOG,aAAa,CAACD,KAAK,CAACJ,OAAO,CAACM,KAAK,CAAC;;IAG7C,QAAAC,IAAA,IAAAC,YAAA,GAAOJ,KAAK,CAACE,KAAK,cAAAE,YAAA,cAAAA,YAAA,GAAIJ,KAAK,CAACJ,OAAO,CAACS,IAAI,cAAAF,IAAA,cAAAA,IAAA,GAAI,UAAU;GACzD;EAED,IAAIT,MAAM,IAAIE,OAAO,IAAIA,OAAO,CAACU,MAAM,EAAE;IACrC,oBACIC;MACIC,SAAS,EAAC,6JAA6J;MACvKX,KAAK,EAAEA;OACND,OAAO,CAACa,GAAG,CAAC,CAACT,KAAU,EAAEU,KAAa,mBACnCH,6BAACA,cAAK,CAACI,QAAQ;MAACC,GAAG,EAAE,GAAGZ,KAAK,CAACa,IAAI,IAAIH,KAAK;oBACvCH;MAAIC,SAAS,EAAC;oBACVD;MAAMC,SAAS,EAAC,+BAA+B;MAACX,KAAK,EAAE;QAAEiB,UAAU,EAAEf,QAAQ,CAACC,KAAK;;MAAO;;;IAItFF,mBAAmB,GAAGE,KAAK,CAACJ,OAAO,CAACmB,KAAK,GAAGf,KAAK,CAACa,IAAI,CAEzD,eACLN;MAAIC,SAAS,EAAC;OACTb,SAAS,GAAGA,SAAS,CAACK,KAAK,CAACgB,KAAK,CAAC,GAAGhB,KAAK,CAACgB,KAAK,CAChD,CACQ,CACpB,CAAC,CACD;;EAIb,OAAO,IAAI;AACf;;;;"}

package/dist/esm/packages/taco/src/charts/utils/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","sources":["../../../../../../../src/charts/utils/color.ts"],"sourcesContent":["import themeColors from '../../../tailwind.colors.js';\n\nconst mapColor = (palette, prefix = ''): any => {\n    return Object.keys(palette).reduce((accum, color) => {\n        if (color === 'current') {\n            return accum;\n        } else if (typeof palette[color] === 'string') {\n            return {\n                ...accum,\n                [prefix ? (color === 'DEFAULT' ? prefix : `${prefix}-${color}`) : color]: palette[color],\n            };\n        } else {\n            return {\n                ...accum,\n                ...mapColor(palette[color], color),\n            };\n        }\n    }, {});\n};\n\nexport const colors: Record<string, string> = mapColor(themeColors);\n\nexport type Color = keyof typeof colors;\n\nexport const getThemeColor = (color: string) => colors[color];\n"],"names":["mapColor","palette","prefix","Object","keys","reduce","accum","color","colors","themeColors","getThemeColor"],"mappings":";;AAEA,MAAMA,QAAQ,GAAGA,CAACC,OAAO,EAAEC,MAAM,GAAG,EAAE;EAClC,OAAOC,MAAM,CAACC,IAAI,CAACH,OAAO,CAAC,CAACI,MAAM,CAAC,CAACC,KAAK,EAAEC,KAAK;IAC5C,IAAIA,KAAK,KAAK,SAAS,EAAE;MACrB,OAAOD,KAAK;KACf,MAAM,IAAI,OAAOL,OAAO,CAACM,KAAK,CAAC,KAAK,QAAQ,EAAE;MAC3C,OAAO;QACH,GAAGD,KAAK;QACR,CAACJ,MAAM,GAAIK,KAAK,KAAK,SAAS,GAAGL,MAAM,GAAG,GAAGA,MAAM,IAAIK,KAAK,EAAE,GAAIA,KAAK,GAAGN,OAAO,CAACM,KAAK;OAC1F;KACJ,MAAM;MACH,OAAO;QACH,GAAGD,KAAK;QACR,GAAGN,QAAQ,CAACC,OAAO,CAACM,KAAK,CAAC,EAAEA,KAAK;OACpC;;GAER,EAAE,EAAE,CAAC;AACV,CAAC;MAEYC,MAAM,gBAA2BR,QAAQ,CAACS,WAAW;MAIrDC,aAAa,GAAIH,KAAa,IAAKC,MAAM,CAACD,KAAK;;;;"}
+{"version":3,"file":"color.js","sources":["../../../../../../../src/charts/utils/color.ts"],"sourcesContent":["import themeColors from '../../../tailwind.colors';\n\nconst mapColor = (palette: any, prefix = ''): any => {\n    return Object.keys(palette).reduce((accum, color) => {\n        if (color === 'current') {\n            return accum;\n        } else if (typeof palette[color] === 'string') {\n            return {\n                ...accum,\n                [prefix ? (color === 'DEFAULT' ? prefix : `${prefix}-${color}`) : color]: palette[color],\n            };\n        } else {\n            return {\n                ...accum,\n                ...mapColor(palette[color], color),\n            };\n        }\n    }, {});\n};\n\nexport const colors: Record<string, string> = mapColor(themeColors);\n\nexport type Color = keyof typeof colors;\n\nexport const getThemeColor = (color: string) => colors[color];\n"],"names":["mapColor","palette","prefix","Object","keys","reduce","accum","color","colors","themeColors","getThemeColor"],"mappings":";;AAEA,MAAMA,QAAQ,GAAGA,CAACC,OAAY,EAAEC,MAAM,GAAG,EAAE;EACvC,OAAOC,MAAM,CAACC,IAAI,CAACH,OAAO,CAAC,CAACI,MAAM,CAAC,CAACC,KAAK,EAAEC,KAAK;IAC5C,IAAIA,KAAK,KAAK,SAAS,EAAE;MACrB,OAAOD,KAAK;KACf,MAAM,IAAI,OAAOL,OAAO,CAACM,KAAK,CAAC,KAAK,QAAQ,EAAE;MAC3C,OAAO;QACH,GAAGD,KAAK;QACR,CAACJ,MAAM,GAAIK,KAAK,KAAK,SAAS,GAAGL,MAAM,GAAG,GAAGA,MAAM,IAAIK,KAAK,EAAE,GAAIA,KAAK,GAAGN,OAAO,CAACM,KAAK;OAC1F;KACJ,MAAM;MACH,OAAO;QACH,GAAGD,KAAK;QACR,GAAGN,QAAQ,CAACC,OAAO,CAACM,KAAK,CAAC,EAAEA,KAAK;OACpC;;GAER,EAAE,EAAE,CAAC;AACV,CAAC;MAEYC,MAAM,gBAA2BR,QAAQ,CAACS,WAAW;MAIrDC,aAAa,GAAIH,KAAa,IAAKC,MAAM,CAACD,KAAK;;;;"}

package/dist/esm/packages/taco/src/components/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport * as AccordionPrimitive from '@radix-ui/react-accordion';\nimport { Icon } from '../Icon/Icon';\n\ntype AccordionContext = {\n    as: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n};\nconst AccordionContext = React.createContext<AccordionContext>({\n    as: 'h2',\n});\n\nexport type AccordionTriggerProps = React.HTMLAttributes<HTMLElement>;\n\nconst StyledTrigger = React.forwardRef(function AccordionStyledTrigger(\n    props: AccordionPrimitive.AccordionTriggerProps,\n    ref: React.Ref<HTMLButtonElement>\n) {\n    const isExpanded = !!props['aria-expanded'];\n\n    const className = cn(\n        'w-full inline-flex justify-between items-center align-middle',\n        'focus:rounded-sm focus:border-blue-500 focus:yt-focus',\n        props.className\n    );\n\n    return (\n        <button {...props} ref={ref} className={className}>\n            {props.children}\n            <Icon name={isExpanded ? 'chevron-up' : 'chevron-down'} />\n        </button>\n    );\n});\n\nconst Trigger = React.forwardRef(function AccordionTrigger(props: AccordionTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n    const { children } = props;\n    const { as: Heading } = React.useContext(AccordionContext);\n\n    return (\n        <AccordionPrimitive.Header asChild>\n            <Heading className=\"my-3\">\n                <AccordionPrimitive.Trigger ref={ref} asChild>\n                    <StyledTrigger>{children}</StyledTrigger>\n                </AccordionPrimitive.Trigger>\n            </Heading>\n        </AccordionPrimitive.Header>\n    );\n});\n\nexport type AccordionContentProps = React.HTMLAttributes<HTMLElement>;\nconst Content = React.forwardRef(function AccordionContent(props: AccordionContentProps, ref: React.Ref<HTMLDivElement>) {\n    return <AccordionPrimitive.Content {...props} ref={ref} />;\n});\n\nexport type AccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {\n    id: string;\n    disabled?: boolean;\n};\nconst Item = (props: AccordionItemProps) => {\n    const { id, ...otherProps } = props;\n    return <AccordionPrimitive.Item {...otherProps} value={id} />;\n};\n\ntype AccordionBaseProps = {\n    children: React.ReactNode[];\n\n    /** Change what heading element accordion regions will render */\n    as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n    /** Additional classes for Accordion root element */\n    className?: string;\n};\n\nexport interface AccordionUncontrolledProps extends AccordionBaseProps {\n    /** Default expanded accordion(s) */\n    defaultId?: string | string[];\n\n    id?: never;\n    onChange?: never;\n}\n\nexport interface AccordionMultipleControlledProps extends AccordionBaseProps {\n    /** Expanded accordions */\n    id: string[];\n\n    /** onChange function to receive ids of expanded accordions */\n    onChange: (id: string[]) => void;\n\n    defaultId?: never;\n}\nexport interface AccordionSingleControlledProps extends AccordionBaseProps {\n    /** Expanded accordion */\n    id: string;\n\n    /** onChange function to receive id of expanded accordion */\n    onChange: (id: string) => void;\n\n    defaultId?: never;\n}\n\nexport type AccordionProps = AccordionUncontrolledProps | AccordionMultipleControlledProps | AccordionSingleControlledProps;\n\nexport const Accordion = (props: AccordionProps) => {\n    const { id, defaultId, onChange, as = 'h2', ...otherProps } = props;\n    const context = React.useMemo(() => ({ as }), [as]);\n\n    let valueProps;\n\n    if (defaultId) {\n        valueProps = {\n            defaultValue: defaultId || undefined,\n        };\n    } else {\n        valueProps = {\n            onValueChange: onChange,\n            value: id || undefined,\n        };\n    }\n\n    const type = typeof valueProps.defaultValue === 'string' || typeof valueProps.value === 'string' ? 'single' : 'multiple';\n    const className = cn('divide-y divide-grey-200', props.className);\n\n    return (\n        <AccordionContext.Provider value={context}>\n            <AccordionPrimitive.Root {...otherProps} {...valueProps} data-taco=\"accordion\" className={className} type={type} />\n        </AccordionContext.Provider>\n    );\n};\n\nAccordion.Item = Item;\nAccordion.Trigger = Trigger;\nAccordion.Content = Content;\n"],"names":["AccordionContext","React","createContext","as","StyledTrigger","forwardRef","AccordionStyledTrigger","props","ref","isExpanded","className","cn","children","Icon","name","Trigger","AccordionTrigger","Heading","useContext","AccordionPrimitive","asChild","Content","AccordionContent","Item","id","otherProps","value","Accordion","defaultId","onChange","context","useMemo","valueProps","defaultValue","undefined","onValueChange","type","Provider"],"mappings":"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"}
+{"version":3,"file":"Accordion.js","sources":["../../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport * as AccordionPrimitive from '@radix-ui/react-accordion';\nimport { Icon } from '../Icon/Icon';\n\ntype AccordionContext = {\n    as: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n};\nconst AccordionContext = React.createContext<AccordionContext>({\n    as: 'h2',\n});\n\nexport type AccordionTriggerProps = React.HTMLAttributes<HTMLElement>;\n\nconst StyledTrigger = React.forwardRef(function AccordionStyledTrigger(\n    props: AccordionPrimitive.AccordionTriggerProps,\n    ref: React.Ref<HTMLButtonElement>\n) {\n    const isExpanded = !!props['aria-expanded'];\n\n    const className = cn(\n        'w-full inline-flex justify-between items-center align-middle',\n        'focus:rounded-sm focus:border-blue-500 focus:yt-focus',\n        props.className\n    );\n\n    return (\n        <button {...props} ref={ref} className={className}>\n            {props.children}\n            <Icon name={isExpanded ? 'chevron-up' : 'chevron-down'} />\n        </button>\n    );\n});\n\nconst Trigger = React.forwardRef(function AccordionTrigger(props: AccordionTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n    const { children } = props;\n    const { as: Heading } = React.useContext(AccordionContext);\n\n    return (\n        <AccordionPrimitive.Header asChild>\n            <Heading className=\"my-3\">\n                <AccordionPrimitive.Trigger ref={ref} asChild>\n                    <StyledTrigger>{children}</StyledTrigger>\n                </AccordionPrimitive.Trigger>\n            </Heading>\n        </AccordionPrimitive.Header>\n    );\n});\n\nexport type AccordionContentProps = React.HTMLAttributes<HTMLElement>;\nconst Content = React.forwardRef(function AccordionContent(props: AccordionContentProps, ref: React.Ref<HTMLDivElement>) {\n    return <AccordionPrimitive.Content {...props} ref={ref} />;\n});\n\nexport type AccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {\n    id: string;\n    disabled?: boolean;\n};\nconst Item = (props: AccordionItemProps) => {\n    const { id, ...otherProps } = props;\n    return <AccordionPrimitive.Item {...otherProps} value={id} />;\n};\n\ntype AccordionBaseProps = {\n    children: React.ReactNode[];\n\n    /** Change what heading element accordion regions will render */\n    as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n    /** Additional classes for Accordion root element */\n    className?: string;\n};\n\nexport interface AccordionUncontrolledProps extends AccordionBaseProps {\n    /** Default expanded accordion(s) */\n    defaultId?: string | string[];\n\n    id?: never;\n    onChange?: never;\n}\n\nexport interface AccordionMultipleControlledProps extends AccordionBaseProps {\n    /** Expanded accordions */\n    id: string[];\n\n    /** onChange function to receive ids of expanded accordions */\n    onChange: (id: string[]) => void;\n\n    defaultId?: never;\n}\nexport interface AccordionSingleControlledProps extends AccordionBaseProps {\n    /** Expanded accordion */\n    id: string;\n\n    /** onChange function to receive id of expanded accordion */\n    onChange: (id: string) => void;\n\n    defaultId?: never;\n}\n\nexport type AccordionProps = AccordionUncontrolledProps | AccordionMultipleControlledProps | AccordionSingleControlledProps;\n\nexport const Accordion = (props: AccordionProps) => {\n    const { id, defaultId, onChange, as = 'h2', ...otherProps } = props;\n    const context = React.useMemo(() => ({ as }), [as]);\n\n    let valueProps;\n\n    if (defaultId) {\n        valueProps = {\n            defaultValue: defaultId || undefined,\n        };\n    } else {\n        valueProps = {\n            onValueChange: onChange,\n            value: id || undefined,\n        };\n    }\n\n    const type = typeof valueProps.defaultValue === 'string' || typeof valueProps.value === 'string' ? 'single' : 'multiple';\n    const className = cn('divide-y divide-grey-200', props.className);\n\n    return (\n        <AccordionContext.Provider value={context}>\n            <AccordionPrimitive.Root\n                {...(otherProps as any)}\n                {...valueProps}\n                data-taco=\"accordion\"\n                className={className}\n                type={type}\n            />\n        </AccordionContext.Provider>\n    );\n};\n\nAccordion.Item = Item;\nAccordion.Trigger = Trigger;\nAccordion.Content = Content;\n"],"names":["AccordionContext","React","createContext","as","StyledTrigger","forwardRef","AccordionStyledTrigger","props","ref","isExpanded","className","cn","children","Icon","name","Trigger","AccordionTrigger","Heading","useContext","AccordionPrimitive","asChild","Content","AccordionContent","Item","id","otherProps","value","Accordion","defaultId","onChange","context","useMemo","valueProps","defaultValue","undefined","onValueChange","type","Provider"],"mappings":"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"}