@popsure/dirty-swan 0.27.14 → 0.27.16

package/dist/lib/components/button/index.d.ts

@@ -9,5 +9,5 @@ declare const _default: React.ForwardRefExoticComponent<Pick<{
     buttonType?: ButtonType | undefined;
     leftIcon?: Icon | undefined;
     loading?: boolean | undefined;
-} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children">, "hidden" | "title" | "className" | "form" | "slot" | "style" | "value" | "onChange" | "dir" | "onBlur" | "onFocus" | "onKeyDown" | "tabIndex" | "leftIcon" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "loading" | "buttonTitle" | "buttonType"> & React.RefAttributes<HTMLButtonElement>>;
+} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children">, "className" | "form" | "slot" | "style" | "title" | "onClick" | "hidden" | "value" | "onChange" | "dir" | "onBlur" | "onFocus" | "onKeyDown" | "tabIndex" | "leftIcon" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "loading" | "buttonTitle" | "buttonType"> & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/dist/lib/components/comparisonTable/components/AccordionItem/AccordionItem.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const AccordionItem: ({ children, className, headerClassName, isOpen, onOpen, onClose, label, }: {
+    children: React.ReactNode | string;
+    className?: string | undefined;
+    headerClassName?: string | undefined;
+    isOpen: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    label: React.ReactNode;
+}) => JSX.Element;

package/dist/lib/components/comparisonTable/components/AccordionItem/index.d.ts

@@ -0,0 +1 @@
+export { AccordionItem } from './AccordionItem';

package/dist/lib/components/comparisonTable/components/Row/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Cell } from '../../index';
+import type { Cell } from '../../index';
 interface RowProps<T> {
     cell: Cell<T>;
     data: Array<T>;

package/dist/lib/components/comparisonTable/components/TableArrows/index.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
-import { ActiveTableArrows } from '../../hooks/useActiveTableArrows';
 export declare type ArrowValues = 'prev' | 'next';
 interface TableArrowsProps {
     onClick: (value: ArrowValues) => void;
-    active: ActiveTableArrows;
+    active: {
+        left: boolean;
+        right: boolean;
+    };
 }
 declare const TableArrows: (props: TableArrowsProps) => JSX.Element;
 export default TableArrows;

package/dist/lib/components/comparisonTable/hooks/useComparisonTable.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ArrowValues } from '../components/TableArrows';
+export declare const useComparisonTable: () => {
+    headerWidth: number;
+    contentContainerRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    selectedSection: string;
+    setSelectedSection: import("react").Dispatch<import("react").SetStateAction<string>>;
+    selectedTabIndex: number;
+    setSelectedTabIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    scrollContainerCallbackRef: (node: any) => void;
+    handleArrowsClick: (value: ArrowValues) => void;
+    toggleMoreRows: () => Promise<void>;
+    showMore: boolean;
+};

package/dist/lib/components/comparisonTable/index.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+/// <reference types="react" />
+import TableInfoButton from './components/TableInfoButton';
 import TableRating from './components/TableRating';
-import TableTrueFalse from './components/TableTrueFalse';
 import TableRowHeader from './components/TableRowHeader';
-import TableInfoButton from './components/TableInfoButton';
+import TableTrueFalse from './components/TableTrueFalse';
 export interface CellBaseProps<T> {
     /** Used to display the row's title */
     label?: React.ReactNode;
@@ -34,6 +34,12 @@ export interface ComparisonTableProps<T> {
     headers: Array<TableHeader<T>>;
     data: Array<T>;
     hideDetails?: boolean;
+    hideScrollBars?: boolean;
+    collapsibleSections?: boolean;
+    cellWidth?: number;
+    firstColumnWidth?: number;
+    stickyHeaderTopOffset?: number;
+    growContent?: boolean;
     styles?: {
         header?: string;
         container?: string;
@@ -42,4 +48,4 @@ export interface ComparisonTableProps<T> {
 declare const ComparisonTable: <T extends {
     id: number;
 }>(props: ComparisonTableProps<T>) => JSX.Element;
-export { ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableInfoButton, };
+export { ComparisonTable, TableInfoButton, TableRating, TableRowHeader, TableTrueFalse, };

package/dist/lib/components/input/index.d.ts

@@ -6,5 +6,5 @@ export declare type InputProps = {
 declare const _default: React.ForwardRefExoticComponent<Pick<{
     error?: string | undefined;
     prefix?: string | undefined;
-} & Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "enterKeyHint"> & Partial<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "enterKeyHint">>, "error" | "hidden" | "title" | "children" | "className" | "form" | "slot" | "style" | "pattern" | "value" | "onChange" | "dir" | "onBlur" | "onFocus" | "onKeyDown" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "disabled" | "enterKeyHint" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "readOnly" | "required" | "size" | "src" | "type" | "width"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "enterKeyHint"> & Partial<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "enterKeyHint">>, "className" | "form" | "slot" | "style" | "title" | "pattern" | "children" | "onClick" | "error" | "hidden" | "value" | "onChange" | "dir" | "onBlur" | "onFocus" | "onKeyDown" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "disabled" | "enterKeyHint" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "readOnly" | "required" | "size" | "src" | "type" | "width"> & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.27.14",
+  "version": "0.27.16",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,
@@ -95,6 +95,7 @@
     "babel-runtime": "^6.26.0",
     "cross-env": "^7.0.3",
     "postcss": "^8.3.5",
+    "postcss-custom-properties": "^12.1.10",
     "prettier": "^2.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

package/src/lib/components/comparisonTable/components/AccordionItem/AccordionItem.module.scss

@@ -0,0 +1,44 @@
+@import '../../../../scss/public/colors';
+
+.container {
+  width: var(--growContent, min-content);
+  margin: 0 auto;
+}
+
+.container + .container {
+  margin-top: 8px;
+}
+
+.chevron {
+  transition: filter 0.3s ease-in-out, transform 0.2s ease-in-out;
+}
+
+.chevronClosed {
+  transform: rotate(180deg);
+}
+
+.iconAndTextContainer {
+  column-gap: 12px;
+}
+
+.headerButton {
+  border: none;
+  background: $ds-grey-100;
+  column-gap: 16px;
+  cursor: pointer;
+  font-family: inherit;
+  outline: none;
+  position: relative;
+  text-align: inherit;
+  transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
+
+  &:hover {
+    background: $ds-primary-100;
+  }
+}
+
+.headerButton:hover {
+  .chevron {
+    filter: brightness(0.425);
+  }
+}

package/src/lib/components/comparisonTable/components/AccordionItem/AccordionItem.tsx

@@ -0,0 +1,74 @@
+import AnimateHeight from 'react-animate-height';
+
+import styles from './AccordionItem.module.scss';
+
+const ChevronSVG = ({ className }: { className?: string }) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      d="M18 15L12 9L6 15"
+      stroke="#b4b4ba"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const AccordionItem = ({
+  children,
+  className = '',
+  headerClassName = '',
+  isOpen,
+  onOpen,
+  onClose,
+  label,
+}: {
+  children: React.ReactNode | string;
+  className?: string;
+  headerClassName?: string;
+  isOpen: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+  label: React.ReactNode;
+}) => {
+  const handleClick = () => {
+    if (!isOpen) {
+      onOpen();
+    } else {
+      onClose();
+    }
+  };
+
+  return (
+    <div className={`d-flex fd-column ${className} ${styles.container}`}>
+      <button
+        className={`d-flex ai-center jc-between ${styles.headerButton} ${headerClassName}`}
+        onClick={handleClick}
+        type="button"
+      >
+        <div className={`d-flex ai-center ${styles.iconAndTextContainer}`}>
+          {typeof label === 'string' ? (
+            <h4 className="p-h4">{label}</h4>
+          ) : (
+            <>{label}</>
+          )}
+        </div>
+        <ChevronSVG
+          className={`${styles.chevron} ${!isOpen && styles.chevronClosed}`}
+        />
+      </button>
+      {/* Min height is 0.1 so that the scroll position is correctly synced across accordion items but is not actually shown.
+      If set to 0, react-animate-height will set display to "none" which means scrolling is not synced. */}
+      <AnimateHeight duration={300} height={isOpen ? 'auto' : 0.1}>
+        {children}
+      </AnimateHeight>
+    </div>
+  );
+};

package/src/lib/components/comparisonTable/components/AccordionItem/index.tsx

@@ -0,0 +1 @@
+export { AccordionItem } from './AccordionItem';

package/src/lib/components/comparisonTable/components/Row/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import { Cell } from '../../index';
-
+import type { Cell } from '../../index';
 import styles from './style.module.scss';
 
 interface RowProps<T> {
@@ -25,7 +24,6 @@ const Row = <T extends { id: number }>(props: RowProps<T>) => {
     >
       <h4
         className={`
-          wmx4
           ${styles.cell}
           ${styles.sticky}
           ${isRowHeader ? `p-h2 p--serif ${styles.title}` : ''}

package/src/lib/components/comparisonTable/components/Row/style.module.scss

@@ -1,13 +1,14 @@
 @use "../../../../scss/public/colors" as *;
 @use "../../../../scss/public/grid" as *;
 
-$cell-min-width: 256px;
+$cell-min-width: var(--cellWidth, 256px);
 
 .header {
   position: relative;
 
   & > div {
-    width: 100vw;
+    width: var(--tableWidth);
+    max-width: var(--tableWidth);
 
     &:nth-child(n + 3) {
       margin: 0;
@@ -34,6 +35,7 @@ $cell-min-width: 256px;
   color: $ds-grey-700;
 
   width: 50vw;
+  max-width: calc(var(--tableWidth) / 2);
 
   &:first-child {
     background-color: white;
@@ -60,6 +62,13 @@ $cell-min-width: 256px;
   }
 }
 
+h4.cell {
+  // Set the max width of the first column to the supplied firstColumnWidth (or 288px if not specified) but only
+  // if this value does not exceed half of the table's width.
+  // This is to ensure that the first column is at most as wide as half the table, which will be the case on mobile where only the first column and one other are shown.
+  max-width: min(var(--firstColumnWidth, 288px), calc(var(--tableWidth) / 2));
+}
+
 .title {
   position: relative;
   color: $ds-grey-900;

package/src/lib/components/comparisonTable/components/TableArrows/index.tsx

@@ -2,15 +2,13 @@ import React from 'react';
 import classNames from 'classnames';
 
 import ArrowIcon from './Arrow';
-import { ActiveTableArrows } from '../../hooks/useActiveTableArrows';
-
 import styles from './style.module.scss';
 
 export type ArrowValues = 'prev' | 'next';
 
 interface TableArrowsProps {
   onClick: (value: ArrowValues) => void;
-  active: ActiveTableArrows;
+  active: { left: boolean; right: boolean };
 }
 
 const TableArrows = (props: TableArrowsProps) => {

package/src/lib/components/comparisonTable/components/TableArrows/style.module.scss

@@ -3,7 +3,7 @@
 
 .container {
   position: absolute;
-  width: 100vw;
+  width: 100%;
   padding: 0 16px;
   justify-content: space-between;
   z-index: 1;

package/src/lib/components/comparisonTable/hooks/useComparisonTable.ts

@@ -0,0 +1,124 @@
+import debounce from 'lodash.debounce';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { ArrowValues } from '../components/TableArrows';
+
+export const useComparisonTable = () => {
+  const [showMore, setShowMore] = useState<boolean>(false);
+  const [headerWidth, setHeaderWidth] = useState(0);
+
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+
+  const [selectedSection, setSelectedSection] = useState('');
+
+  const headerRef = useRef<HTMLDivElement | null>(null);
+  const contentContainerRef = useRef<HTMLDivElement | null>(null);
+  const observerRef = useRef<ResizeObserver | null>(null);
+
+  const scrollContainerCallbackRef = useCallback((node) => {
+    if (node) {
+      setHeaderWidth(node.clientWidth);
+    }
+
+    headerRef.current = node;
+  }, []);
+
+  useEffect(() => {
+    if (!observerRef.current) {
+      observerRef.current = new ResizeObserver((entries) => {
+        entries.forEach((entry) => {
+          const currentTabIndex = Math.round(
+            entry.target.scrollLeft / entry.contentRect.width
+          );
+
+          setHeaderWidth(entry.contentRect.width);
+
+          // Update selectedTabIndex to match the calculated current tab index
+          setSelectedTabIndex(currentTabIndex);
+        });
+      });
+    }
+
+    if (headerRef.current) {
+      observerRef.current.observe(headerRef.current);
+    }
+
+    return () => {
+      if (headerRef.current) {
+        observerRef.current?.unobserve(headerRef.current);
+      }
+      observerRef.current?.disconnect();
+    };
+  }, []);
+
+  const handleTableScroll = () => {
+    if (!headerRef.current) {
+      return;
+    }
+
+    const currentTabIndex = Math.round(
+      headerRef.current.scrollLeft /
+        headerRef.current.getBoundingClientRect().width
+    );
+
+    setSelectedTabIndex(currentTabIndex);
+  };
+
+  const debouncedTableScroll = debounce(handleTableScroll, 150);
+
+  useEffect(() => {
+    headerRef.current?.addEventListener('scroll', debouncedTableScroll, {
+      passive: true,
+    });
+
+    return headerRef.current?.removeEventListener('scroll', handleTableScroll);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleArrowsClick = (value: ArrowValues) => {
+    if (headerRef.current) {
+      const currentTabIndex = Math.round(
+        headerRef.current.scrollLeft / headerRef.current.clientWidth
+      );
+
+      const direction = value === 'next' ? 1 : -1;
+
+      const newTabIndex = currentTabIndex + direction;
+
+      headerRef.current.scroll({
+        top: 0,
+        left: headerWidth * newTabIndex,
+        behavior: 'smooth',
+      });
+
+      setSelectedTabIndex(() => {
+        return newTabIndex;
+      });
+    }
+  };
+
+  const toggleMoreRows = async () => {
+    if (showMore && headerRef.current && contentContainerRef.current) {
+      window.scroll(
+        0,
+        window.scrollY +
+          (contentContainerRef.current.getBoundingClientRect().y -
+            headerRef.current.getBoundingClientRect().bottom)
+      );
+    }
+
+    setShowMore(!showMore);
+  };
+
+  return {
+    headerWidth,
+    contentContainerRef,
+    selectedSection,
+    setSelectedSection,
+    selectedTabIndex,
+    setSelectedTabIndex,
+    scrollContainerCallbackRef,
+    handleArrowsClick,
+    toggleMoreRows,
+    showMore,
+  };
+};