@xyo-network/react-card 2.37.23 → 2.37.25

package/dist/esm/components/CardContentEx.d.ts

@@ -2,6 +2,8 @@
 import { CardContentProps } from '@mui/material';
 export declare type CardContentExProps = CardContentProps & {
     variant?: 'scrollable' | 'normal';
+    scrollToTop?: boolean;
 };
-export declare const CardContentEx: React.FC<CardContentExProps>;
+export declare const CardContentExWithRef: import("react").ForwardRefExoticComponent<Pick<CardContentExProps, keyof import("@mui/material/OverridableComponent").CommonProps | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "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" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "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" | "sx" | "variant" | "scrollToTop"> & import("react").RefAttributes<HTMLDivElement | null>>;
+export declare const CardContentEx: import("react").ForwardRefExoticComponent<Pick<CardContentExProps, keyof import("@mui/material/OverridableComponent").CommonProps | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "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" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "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" | "sx" | "variant" | "scrollToTop"> & import("react").RefAttributes<HTMLDivElement | null>>;
 //# sourceMappingURL=CardContentEx.d.ts.map

package/dist/esm/components/CardContentEx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardContentEx.d.ts","sourceRoot":"","sources":["../../../src/components/CardContentEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,gBAAgB,EAAU,MAAM,eAAe,CAAA;AAgBrE,oBAAY,kBAAkB,GAAG,gBAAgB,GAAG;IAClD,OAAO,CAAC,EAAE,YAAY,GAAG,QAAQ,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAEtD,CAAA"}
+{"version":3,"file":"CardContentEx.d.ts","sourceRoot":"","sources":["../../../src/components/CardContentEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,gBAAgB,EAAU,MAAM,eAAe,CAAA;AAiBrE,oBAAY,kBAAkB,GAAG,gBAAgB,GAAG;IAClD,OAAO,CAAC,EAAE,YAAY,GAAG,QAAQ,CAAA;IACjC,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,oBAAoB,8rJAO/B,CAAA;AAIF,eAAO,MAAM,aAAa,8rJAAuB,CAAA"}

package/dist/esm/components/CardContentEx.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CardContent, styled } from '@mui/material';
+import { forwardRef, useEffect } from 'react';
 const CardContentExRoot = styled(CardContent, {
     name: 'CardContentEx',
     shouldForwardProp: (prop) => prop !== 'variant',
@@ -13,7 +14,14 @@ const CardContentExRoot = styled(CardContent, {
         paddingTop: 0,
     }),
 }));
-export const CardContentEx = (props) => {
-    return _jsx(CardContentExRoot, { ...props });
-};
+export const CardContentExWithRef = forwardRef(({ scrollToTop, ...props }, ref) => {
+    useEffect(() => {
+        if (ref !== null && typeof ref === 'object') {
+            ref?.current?.scroll({ behavior: 'smooth', top: 0 });
+        }
+    }, [ref, scrollToTop]);
+    return _jsx(CardContentExRoot, { ref: ref, ...props });
+});
+CardContentExWithRef.displayName = 'CardContentEx';
+export const CardContentEx = CardContentExWithRef;
 //# sourceMappingURL=CardContentEx.js.map

package/dist/esm/components/CardContentEx.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardContentEx.js","sourceRoot":"","sources":["../../../src/components/CardContentEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAoB,MAAM,EAAE,MAAM,eAAe,CAAA;AAErE,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,EAAE;IAC5C,IAAI,EAAE,eAAe;IACrB,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,SAAS;IAC/C,IAAI,EAAE,MAAM;CACb,CAAC,CAAqB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;IACvC,GAAG,CAAC,OAAO,KAAK,YAAY,IAAI;QAC9B,CAAC,aAAa,CAAC,EAAE;YACf,aAAa,EAAE,CAAC;SACjB;QACD,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,CAAC;KACd,CAAC;CACH,CAAC,CAAC,CAAA;AAMH,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,KAAK,EAAE,EAAE;IACnE,OAAO,KAAC,iBAAiB,OAAK,KAAK,GAAI,CAAA;AACzC,CAAC,CAAA"}
+{"version":3,"file":"CardContentEx.js","sourceRoot":"","sources":["../../../src/components/CardContentEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAoB,MAAM,EAAE,MAAM,eAAe,CAAA;AACrE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE7C,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,EAAE;IAC5C,IAAI,EAAE,eAAe;IACrB,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,SAAS;IAC/C,IAAI,EAAE,MAAM;CACb,CAAC,CAAqB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;IACvC,GAAG,CAAC,OAAO,KAAK,YAAY,IAAI;QAC9B,CAAC,aAAa,CAAC,EAAE;YACf,aAAa,EAAE,CAAC;SACjB;QACD,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,CAAC;KACd,CAAC;CACH,CAAC,CAAC,CAAA;AAOH,MAAM,CAAC,MAAM,oBAAoB,GAAG,UAAU,CAA4C,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC3H,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,GAAG,KAAK,IAAI,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;YAC3C,GAAG,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAA;SACrD;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC,CAAA;IACtB,OAAO,KAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAAA;AACnD,CAAC,CAAC,CAAA;AAEF,oBAAoB,CAAC,WAAW,GAAG,eAAe,CAAA;AAElD,MAAM,CAAC,MAAM,aAAa,GAAG,oBAAoB,CAAA"}

package/dist/esm/components/CardEx.d.ts

@@ -3,5 +3,6 @@ import { CardProps } from '@mui/material';
 export declare type CardExProps = CardProps & {
     gradient?: 'border' | 'background';
 };
-export declare const CardEx: React.FC<CardExProps>;
+export declare const CardExWithRef: React.FC<CardExProps>;
+export declare const CardEx: import("react").FC<CardExProps>;
 //# sourceMappingURL=CardEx.d.ts.map

package/dist/esm/components/CardEx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardEx.d.ts","sourceRoot":"","sources":["../../../src/components/CardEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAQ,SAAS,EAAE,MAAM,eAAe,CAAA;AAG/C,oBAAY,WAAW,GAAG,SAAS,GAAG;IACpC,QAAQ,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAYxC,CAAA"}
+{"version":3,"file":"CardEx.d.ts","sourceRoot":"","sources":["../../../src/components/CardEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAQ,SAAS,EAAE,MAAM,eAAe,CAAA;AAI/C,oBAAY,WAAW,GAAG,SAAS,GAAG;IACpC,QAAQ,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAa9C,CAAA;AAIF,eAAO,MAAM,MAAM,iCAAgB,CAAA"}

package/dist/esm/components/CardEx.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Card } from '@mui/material';
 import { useGradientStyles } from '@xyo-network/react-shared';
-export const CardEx = ({ style, gradient, ...props }) => {
+import { forwardRef } from 'react';
+export const CardExWithRef = forwardRef(({ style, gradient, ...props }, ref) => {
     const { styles } = useGradientStyles();
     const gradientStyle = gradient === 'border' ? styles.border : gradient === 'background' ? styles.background : {};
     return (_jsx(Card, { style: {
             ...gradientStyle,
             ...style,
-        }, ...props }));
-};
+        }, ref: ref, ...props }));
+});
+CardExWithRef.displayName = 'CardEx';
+export const CardEx = CardExWithRef;
 //# sourceMappingURL=CardEx.js.map

package/dist/esm/components/CardEx.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardEx.js","sourceRoot":"","sources":["../../../src/components/CardEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAa,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAM7D,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC7E,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IACtC,MAAM,aAAa,GAAG,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAA;IAChH,OAAO,CACL,KAAC,IAAI,IACH,KAAK,EAAE;YACL,GAAG,aAAa;YAChB,GAAG,KAAK;SACT,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"CardEx.js","sourceRoot":"","sources":["../../../src/components/CardEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAa,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAMlC,MAAM,CAAC,MAAM,aAAa,GAA0B,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACpG,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IACtC,MAAM,aAAa,GAAG,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAA;IAChH,OAAO,CACL,KAAC,IAAI,IACH,KAAK,EAAE;YACL,GAAG,aAAa;YAChB,GAAG,KAAK;SACT,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,aAAa,CAAC,WAAW,GAAG,QAAQ,CAAA;AAEpC,MAAM,CAAC,MAAM,MAAM,GAAG,aAAa,CAAA"}

package/dist/esm/components/PageCard.d.ts

@@ -6,5 +6,5 @@ export interface PageCardProps extends CardExProps {
     subheader?: CardHeaderProps['subheader'];
     action?: ReactNode;
 }
-export declare const PageCard: React.FC<PageCardProps>;
+export declare const PageCard: import("react").FC<PageCardProps>;
 //# sourceMappingURL=PageCard.d.ts.map

package/dist/esm/components/PageCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageCard.d.ts","sourceRoot":"","sources":["../../../src/components/PageCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,eAAe,EAAc,MAAM,eAAe,CAAA;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAA;AAE9C,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;IACxC,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA2B5C,CAAA"}
+{"version":3,"file":"PageCard.d.ts","sourceRoot":"","sources":["../../../src/components/PageCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,eAAe,EAAc,MAAM,eAAe,CAAA;AAEvE,OAAO,EAAc,SAAS,EAAE,MAAM,OAAO,CAAA;AAE7C,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAA;AAE9C,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;IACxC,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB;AAiCD,eAAO,MAAM,QAAQ,mCAAkB,CAAA"}

package/dist/esm/components/PageCard.js

@@ -2,8 +2,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { CardHeader, IconButton } from '@mui/material';
 import { TypographyEx } from '@xyo-network/react-shared';
+import { forwardRef } from 'react';
 import { CardEx } from './CardEx';
-export const PageCard = ({ subheader, title, onRefresh, children, action, style, ...props }) => {
-    return (_jsxs(CardEx, { style: { backgroundColor: 'transparent', position: 'relative', ...style }, elevation: 0, ...props, children: [_jsx(CardHeader, { title: _jsx(TypographyEx, { variant: "h5", gutterBottom: true, children: title }), subheader: _jsx(TypographyEx, { variant: "subtitle1", children: subheader }), action: action ? (action) : (_jsx(_Fragment, { children: onRefresh ? (_jsx(IconButton, { onClick: () => onRefresh?.(), children: _jsx(RefreshIcon, {}) })) : null })) }), children] }));
-};
+const PageCardWithRef = forwardRef(({ subheader, title, onRefresh, children, action, style, ...props }, ref) => {
+    return (_jsxs(CardEx, { style: { backgroundColor: 'transparent', position: 'relative', ...style }, elevation: 0, ref: ref, ...props, children: [_jsx(CardHeader, { title: _jsx(TypographyEx, { variant: "h5", gutterBottom: true, children: title }), subheader: _jsx(TypographyEx, { variant: "subtitle1", children: subheader }), action: action ? (action) : (_jsx(_Fragment, { children: onRefresh ? (_jsx(IconButton, { onClick: () => onRefresh?.(), children: _jsx(RefreshIcon, {}) })) : null })) }), children] }));
+});
+PageCardWithRef.displayName = 'PageCard';
+export const PageCard = PageCardWithRef;
 //# sourceMappingURL=PageCard.js.map

package/dist/esm/components/PageCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageCard.js","sourceRoot":"","sources":["../../../src/components/PageCard.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,MAAM,6BAA6B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAmB,UAAU,EAAE,MAAM,eAAe,CAAA;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAGxD,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAA;AAQ9C,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACtH,OAAO,CACL,MAAC,MAAM,IAAC,KAAK,EAAE,EAAE,eAAe,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,KAAM,KAAK,aACxG,KAAC,UAAU,IACT,KAAK,EACH,KAAC,YAAY,IAAC,OAAO,EAAC,IAAI,EAAC,YAAY,kBACpC,KAAK,GACO,EAEjB,SAAS,EAAE,KAAC,YAAY,IAAC,OAAO,EAAC,WAAW,YAAE,SAAS,GAAgB,EACvE,MAAM,EACJ,MAAM,CAAC,CAAC,CAAC,CACP,MAAM,CACP,CAAC,CAAC,CAAC,CACF,4BACG,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,EAAE,YACtC,KAAC,WAAW,KAAG,GACJ,CACd,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,GAEH,EACD,QAAQ,IACF,CACV,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"PageCard.js","sourceRoot":"","sources":["../../../src/components/PageCard.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,MAAM,6BAA6B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAmB,UAAU,EAAE,MAAM,eAAe,CAAA;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,UAAU,EAAa,MAAM,OAAO,CAAA;AAE7C,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAA;AAQ9C,MAAM,eAAe,GAA4B,UAAU,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACtI,OAAO,CACL,MAAC,MAAM,IAAC,KAAK,EAAE,EAAE,eAAe,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,KAAM,KAAK,aAClH,KAAC,UAAU,IACT,KAAK,EACH,KAAC,YAAY,IAAC,OAAO,EAAC,IAAI,EAAC,YAAY,kBACpC,KAAK,GACO,EAEjB,SAAS,EAAE,KAAC,YAAY,IAAC,OAAO,EAAC,WAAW,YAAE,SAAS,GAAgB,EACvE,MAAM,EACJ,MAAM,CAAC,CAAC,CAAC,CACP,MAAM,CACP,CAAC,CAAC,CAAC,CACF,4BACG,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,EAAE,YACtC,KAAC,WAAW,KAAG,GACJ,CACd,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,GAEH,EACD,QAAQ,IACF,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,CAAC,WAAW,GAAG,UAAU,CAAA;AAExC,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAA"}

package/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@xylabs/react-flexbox": "^2.15.1",
-    "@xyo-network/react-shared": "^2.37.23",
+    "@xyo-network/react-shared": "^2.37.25",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {
@@ -65,5 +65,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.37.23"
+  "version": "2.37.25"
 }

package/src/components/CardContentEx.stories.tsx

@@ -1,16 +1,32 @@
 /* eslint-disable import/no-internal-modules */
-import { Typography } from '@mui/material'
+import { Button, Typography } from '@mui/material'
 import { ComponentStory, DecoratorFn, Meta } from '@storybook/react'
 import { FlexGrowCol } from '@xylabs/react-flexbox'
+import { WithRefDecorator } from '@xyo-network/react-storybook'
+import { useRef, useState } from 'react'
 
 import { CardContentEx } from './CardContentEx'
 import { PageCard } from './PageCard'
 
-const ScrollableDecoratorFn: DecoratorFn = (Story, args) => (
-  <FlexGrowCol alignItems="stretch" position="absolute" height="calc(100vh - 2rem)" style={{ inset: 0 }}>
-    <Story {...args} />
-  </FlexGrowCol>
-)
+const ScrollableDecoratorFn: DecoratorFn = (Story, args) => {
+  const [scrollToTop, setScrollToTop] = useState(false)
+  const ref = useRef<HTMLDivElement | null>(null)
+
+  args.args.ref = ref
+  args.args.scrollToTop = scrollToTop
+
+  const onScrollToTop = () => {
+    setScrollToTop(!scrollToTop)
+  }
+  return (
+    <FlexGrowCol alignItems="stretch" position="absolute" height="calc(100vh - 2rem)" style={{ inset: 0 }}>
+      <Button variant="contained" onClick={onScrollToTop} sx={{ marginBottom: 2 }}>
+        ScrollToTop
+      </Button>
+      <Story {...args} />
+    </FlexGrowCol>
+  )
+}
 
 const StorybookEntry: Meta = {
   argTypes: {},
@@ -38,11 +54,14 @@ const Template: ComponentStory<typeof CardContentEx> = (props) => {
 const Default = Template.bind({})
 Default.args = {}
 
+const WithRef = Template.bind({})
+WithRef.decorators = [WithRefDecorator]
+
 const WithVariant = Template.bind({})
 WithVariant.args = { variant: 'scrollable' }
 WithVariant.decorators = [ScrollableDecoratorFn]
 
-export { Default, WithVariant }
+export { Default, WithRef, WithVariant }
 
 // eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/CardContentEx.tsx

@@ -1,4 +1,5 @@
 import { CardContent, CardContentProps, styled } from '@mui/material'
+import { forwardRef, useEffect } from 'react'
 
 const CardContentExRoot = styled(CardContent, {
   name: 'CardContentEx',
@@ -16,8 +17,18 @@ const CardContentExRoot = styled(CardContent, {
 
 export type CardContentExProps = CardContentProps & {
   variant?: 'scrollable' | 'normal'
+  scrollToTop?: boolean
 }
 
-export const CardContentEx: React.FC<CardContentExProps> = (props) => {
-  return <CardContentExRoot {...props} />
-}
+export const CardContentExWithRef = forwardRef<HTMLDivElement | null, CardContentExProps>(({ scrollToTop, ...props }, ref) => {
+  useEffect(() => {
+    if (ref !== null && typeof ref === 'object') {
+      ref?.current?.scroll({ behavior: 'smooth', top: 0 })
+    }
+  }, [ref, scrollToTop])
+  return <CardContentExRoot ref={ref} {...props} />
+})
+
+CardContentExWithRef.displayName = 'CardContentEx'
+
+export const CardContentEx = CardContentExWithRef

package/src/components/CardEx.tsx

@@ -1,11 +1,12 @@
 import { Card, CardProps } from '@mui/material'
 import { useGradientStyles } from '@xyo-network/react-shared'
+import { forwardRef } from 'react'
 
 export type CardExProps = CardProps & {
   gradient?: 'border' | 'background'
 }
 
-export const CardEx: React.FC<CardExProps> = ({ style, gradient, ...props }) => {
+export const CardExWithRef: React.FC<CardExProps> = forwardRef(({ style, gradient, ...props }, ref) => {
   const { styles } = useGradientStyles()
   const gradientStyle = gradient === 'border' ? styles.border : gradient === 'background' ? styles.background : {}
   return (
@@ -14,7 +15,12 @@ export const CardEx: React.FC<CardExProps> = ({ style, gradient, ...props }) =>
         ...gradientStyle,
         ...style,
       }}
+      ref={ref}
       {...props}
     />
   )
-}
+})
+
+CardExWithRef.displayName = 'CardEx'
+
+export const CardEx = CardExWithRef

package/src/components/PageCard.stories.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable import/no-internal-modules */
 import { CardContent, Typography } from '@mui/material'
 import { ComponentStory, Meta } from '@storybook/react'
+import { WithRefDecorator } from '@xyo-network/react-storybook'
 import { useState } from 'react'
 
 import { PageCard } from './PageCard'
@@ -56,7 +57,10 @@ WithNoOnRefresh.parameters = {
   actions: { argTypesRegex: '' },
 }
 
-export { Default, WithNoOnRefresh }
+const WithRef = Template.bind({})
+WithRef.decorators = [WithRefDecorator]
+
+export { Default, WithNoOnRefresh, WithRef }
 
 // eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/PageCard.tsx

@@ -1,7 +1,7 @@
 import RefreshIcon from '@mui/icons-material/Refresh'
 import { CardHeader, CardHeaderProps, IconButton } from '@mui/material'
 import { TypographyEx } from '@xyo-network/react-shared'
-import { ReactNode } from 'react'
+import { forwardRef, ReactNode } from 'react'
 
 import { CardEx, CardExProps } from './CardEx'
 
@@ -11,9 +11,9 @@ export interface PageCardProps extends CardExProps {
   action?: ReactNode
 }
 
-export const PageCard: React.FC<PageCardProps> = ({ subheader, title, onRefresh, children, action, style, ...props }) => {
+const PageCardWithRef: React.FC<PageCardProps> = forwardRef(({ subheader, title, onRefresh, children, action, style, ...props }, ref) => {
   return (
-    <CardEx style={{ backgroundColor: 'transparent', position: 'relative', ...style }} elevation={0} {...props}>
+    <CardEx style={{ backgroundColor: 'transparent', position: 'relative', ...style }} elevation={0} ref={ref} {...props}>
       <CardHeader
         title={
           <TypographyEx variant="h5" gutterBottom>
@@ -38,4 +38,8 @@ export const PageCard: React.FC<PageCardProps> = ({ subheader, title, onRefresh,
       {children}
     </CardEx>
   )
-}
+})
+
+PageCardWithRef.displayName = 'PageCard'
+
+export const PageCard = PageCardWithRef