Updates made to App.tsx and created ToggleDemo.tsx

src/@commonsku/styles/AlertNotification.tsx

@@ -56,15 +56,15 @@ const StyledNotification = styled.div<{alertType?: string }>`
     }
 `;
 
-export default function AlertNotification({
+const AlertNotification = React.forwardRef<HTMLDivElement, AlertNotificationProps>(({
     alertType="neutral",
     learnMore=false,
     href,
     linkText,
     children, 
     style={},
     ...props
-}: AlertNotificationProps){
+}: AlertNotificationProps, ref) => {
 
     function notificationIcon(){
         if(alertType === "success") {
@@ -79,7 +79,7 @@ export default function AlertNotification({
     NotificationVariantStyles(alertType);
 
     return (
-        <StyledNotification alertType={alertType} {...props}>
+        <StyledNotification ref={ref} alertType={alertType} {...props}>
             {notificationIcon()}
             {children}
             {learnMore ? 
@@ -91,4 +91,6 @@ export default function AlertNotification({
             }
         </StyledNotification>
     )
-};
+});
+
+export default AlertNotification

src/@commonsku/styles/Artwork.tsx

@@ -105,13 +105,13 @@ export type ArtworkProps = {
   inputEl?:React.ReactNode,
 };
 
-export const Artwork = ({
+export const Artwork = React.forwardRef<HTMLDivElement, ArtworkProps>(({
     inputProps={},
     onError,
     ...props
-  }: ArtworkProps & SharedStyleTypes) => {
+  }: ArtworkProps & SharedStyleTypes, ref) => {
   /* TODO: 20 is arbitrary; ideally a component should know its width, and that should be used to compute the max length */
-  return <ArtworkWrapper cssHeight={props.cssHeight ? props.cssHeight : props.picture ? 17 : 0} onClick={!props.picture && props.onClick ? props.onClick : undefined}>
+  return <ArtworkWrapper ref={ref} cssHeight={props.cssHeight ? props.cssHeight : props.picture ? 17 : 0} onClick={!props.picture && props.onClick ? props.onClick : undefined}>
     {props.picture?
       <ArtworkPicture onClick={(e) => props.onClick ? props.onClick(e) : null} cssHeight={props.cssHeight ? props.cssHeight : 17}>
         <Img src={props.picture} style={{objectFit:"contain", width:"100%", height: "100%"}} onError={onError}/>
@@ -143,4 +143,4 @@ export const Artwork = ({
        <UpdateDate>Updated {props.date}</UpdateDate> : null}
     </ArtworkInfo>
   </ArtworkWrapper>
-}
+});

src/@commonsku/styles/Avatar.tsx

@@ -104,21 +104,20 @@ const AvatarInitials = styled.p<_AvatarProps>`
 `
 
 const Avatar: React.FC<
-  Omit<_AvatarProps, 'size'> & {pic?: string, size?: AvatarSize, shape?: AvatarShape, color?: AvatarColor, initials?: string, icon?: boolean}
-> = ({ pic, size='small', shape='square', color, initials, icon, children, ...props }) => {
+  Omit<_AvatarProps, 'size'> & {pic?: string, size?: AvatarSize}> = React.forwardRef(({ 
+    pic, size='small', shape='square', color, initials, icon, children, ...props }, ref: React.Ref<HTMLDivElement>) => {
   if(pic) {
-    return <AvatarWrapper hasPic={true} size={get(avatarSizes, [size ?? 'small', 'size'], size) as AvatarSize} shape={get(avatarShapes, shape ?? 'square', shape) as AvatarShape} {...props}>
+    return <AvatarWrapper ref={ref} hasPic={true} size={get(avatarSizes, [size ?? 'small', 'size'], size) as AvatarSize} shape={get(avatarShapes, shape ?? 'square', shape) as AvatarShape} {...props}>
     <AvatarPic src={pic ?? placeholder } size={size}/>
   </AvatarWrapper>
   } else if (!pic && icon){
-    return <AvatarWrapper size={get(avatarSizes, [size ?? 'small', 'size'], size) as AvatarSize} shape={get(avatarShapes, shape ?? 'square', shape) as AvatarShape} style={{backgroundColor: neutrals['50']}} {...props}><UserIcon color={neutrals[70]} size={size} style={{position:'relative', top: '50%', transform: 'translate(0, -50%)'}}/>
+    return <AvatarWrapper ref={ref} size={get(avatarSizes, [size ?? 'small', 'size'], size) as AvatarSize} shape={get(avatarShapes, shape ?? 'square', shape) as AvatarShape} style={{backgroundColor: neutrals['50']}} {...props}><UserIcon color={neutrals[70]} size={size} style={{position:'relative', top: '50%', transform: 'translate(0, -50%)'}}/>
   </AvatarWrapper>
   } else {
-    return <AvatarWrapper size={get(avatarSizes, [size ?? 'small', 'size'], size) as AvatarSize} shape={get(avatarShapes, shape ?? 'square', shape) as AvatarShape} color={color} initials={initials} {...props}>
+    return <AvatarWrapper ref={ref} size={get(avatarSizes, [size ?? 'small', 'size'], size) as AvatarSize} shape={get(avatarShapes, shape ?? 'square', shape) as AvatarShape} color={color} initials={initials} {...props}>
       <AvatarInitials size={size}>{initials ?? children}</AvatarInitials>
   </AvatarWrapper>
-  }
-
-}
+  } 
+});
 
 export { Avatar }

src/@commonsku/styles/Box.tsx

@@ -18,14 +18,15 @@ type BoxProps = React.PropsWithChildren<{
   title?: string | React.ReactNode,
   controls?: React.ReactNode
 } & SharedStyleTypes>;
-const Box = ({
+
+const Box = React.forwardRef<HTMLDivElement, BoxProps>(({
   title,
   controls,
   children,
   ...props
-}: BoxProps) => {
+}: BoxProps, ref) => {
 
-  return (<StyledBox padded={props.padded} borderless={props.borderless} {...props}>
+  return (<StyledBox ref={ref} padded={props.padded} borderless={props.borderless} {...props}>
     {title || controls ?
       <Row>
         <Col xs={8}>
@@ -39,6 +40,6 @@ const Box = ({
     {children}
   </StyledBox>
   )
-}
+});
 
 export { Box }

src/@commonsku/styles/CancelButton.tsx

@@ -10,13 +10,15 @@ export type CancelButtonProps = {
     variant?: ButtonVariant;
 } & SharedStyleTypes & SizerTypes;
 
-export default function CancelButton({
+const CancelButton = React.forwardRef<HTMLButtonElement, CancelButtonProps>(({
     size="medium",
     variant="error",
     style={},
     ...Props
-}: CancelButtonProps){
+}: CancelButtonProps, ref) => {
     return (
-        <Button variant={variant} size={size} {...Props} >Cancel</Button>
+      <Button ref ={ref} variant={variant} size={size} {...Props} >Cancel</Button>
     )
-};
+});
+
+export default CancelButton

src/@commonsku/styles/Collapsible.tsx

@@ -10,7 +10,8 @@ export type CollapseStyledProps = {
 }
 export type CollapseWrapperProps = CollapseStyledProps
 export type CollapsiblePanelTitleProps = {}
-export type CollapsibleProps = CollapseWrapperProps & CollapsiblePanelTitleProps & {
+
+export type CollapsibleProps = React.PropsWithChildren<CollapseWrapperProps & CollapsiblePanelTitleProps & {
     style?: React.CSSProperties,
     isOpen?: boolean;
     padded?: boolean;
@@ -19,7 +20,8 @@ export type CollapsibleProps = CollapseWrapperProps & CollapsiblePanelTitleProps
     onExit?: Function;
     onExiting?: Function;
     onExited?: Function;
-}
+}>
+
 export type CollapsiblePanelProps = React.PropsWithChildren<Omit<
 CollapsibleProps & {onClick?: null | ((i?: number|null) => void);}, "isOpen"> & {
     title?: string;
@@ -28,11 +30,11 @@ CollapsibleProps & {onClick?: null | ((i?: number|null) => void);}, "isOpen"> &
     titleProps?: { [key in string]: any };
 }>
 
-export type CollapsiblePanelsProps = {
+export type CollapsiblePanelsProps = React.PropsWithChildren<{
     panels?: Array<CollapsiblePanelProps & {wrapperProps?: { [key in string]: any }}>;
     spaceBetween?: boolean; // space between panels
     onClickPanel?: null | ((i?: number|null) => void);
-}
+}>
 
 export const CollapseStyled = styled.div<CollapseStyledProps>`
 &&& {
@@ -88,10 +90,10 @@ function getNodeHeight(node: HTMLElement) {
     return node.scrollHeight;
 }
 
-export function Collapsible({
+export const Collapsible = React.forwardRef<HTMLDivElement, CollapsibleProps>(({
     onEntering, onEntered, onExit, onExiting, onExited,
     duration=300, isOpen=false, children, style={}, padded=false, ...props
-}: React.PropsWithChildren<CollapsibleProps>) {
+}: React.PropsWithChildren<CollapsibleProps>, ref) => {
     const [height, setHeight] = React.useState<null | number>(null);
     const onHandleEnters = (type: string) => (node: HTMLElement, isAppearing: boolean) => {
         switch (type) {
@@ -129,7 +131,7 @@ export function Collapsible({
     }
 
     const bodyStyles = _.omit(style, ['padding', 'paddingTop', 'paddingBottom']);
-    return (<CollapseStyled duration={duration}>
+    return (<CollapseStyled ref={ref} duration={duration}>
         <Transition in={isOpen} timeout={duration}
             onEntering={onHandleEnters('onEntering')}
             onEntered={onHandleEnters('onEntered')}
@@ -147,12 +149,12 @@ export function Collapsible({
             )}
         </Transition>
     </CollapseStyled>);
-}
+});
 
 
-export function CollapsiblePanel({
+export const CollapsiblePanel = React.forwardRef<HTMLDivElement, CollapsiblePanelProps>(({
     title, duration=300, isDefaultOpen=false, components, children, titleProps={}, ...props
-}: React.PropsWithChildren<CollapsiblePanelProps>) {
+}: React.PropsWithChildren<CollapsiblePanelProps>, ref) => {
     const [open, setOpen] = React.useState(isDefaultOpen);
     const togglePanel = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
         e && e.preventDefault();
@@ -163,15 +165,17 @@ export function CollapsiblePanel({
         onClick: togglePanel,
         ...titleProps
     }
-    return (<CollapseWrapper duration={duration}>
+    return (<CollapseWrapper ref={ref} duration={duration}>
         {components && components.Title
             ? <components.Title {..._titleProps} />
             : <CollapsiblePanelTitle {..._titleProps}>{title}</CollapsiblePanelTitle>}
         <Collapsible {...props} duration={duration} isOpen={open}>{children}</Collapsible>
     </CollapseWrapper>);
-}
+});
 
-export function CollapsiblePanels({panels=[], spaceBetween=false, onClickPanel=null}: CollapsiblePanelsProps) {
+export const CollapsiblePanels = React.forwardRef<HTMLDivElement, CollapsiblePanelsProps>(({
+    panels=[], spaceBetween=false, onClickPanel=null
+}: React.PropsWithChildren<CollapsiblePanelsProps>, ref) => {
     const [openIndex, setOpenIndex] = React.useState<number | null>(null);
     const updatePanelIndex = (i: number | null) => {
         let idx: number|null = null;
@@ -207,7 +211,7 @@ export function CollapsiblePanels({panels=[], spaceBetween=false, onClickPanel=n
             }
             const { style={}, ..._wrapperProps } = wrapperProps;
             return (
-                <CollapseWrapper key={`CSKU_CollapsiblePanels_${i}`} duration={duration} style={{
+                <CollapseWrapper ref={ref} key={`CSKU_CollapsiblePanels_${i}`} duration={duration} style={{
                     ...(spaceBetween ? {marginBottom: 10} : {}),
                     ...style,
                 }} {..._wrapperProps}>
@@ -219,4 +223,4 @@ export function CollapsiblePanels({panels=[], spaceBetween=false, onClickPanel=n
             );
         })}
     </>);
-}
+});

src/@commonsku/styles/CollapsibleV2.tsx

@@ -14,7 +14,9 @@ type BaseCollapsibleProps = React.PropsWithChildren<{
   isOpen?: boolean;
   handleToggle?: React.MouseEventHandler<HTMLDivElement>;
 }>;
-export const BaseCollapsible = (props: BaseCollapsibleProps) => {
+
+export const BaseCollapsible = React.forwardRef<HTMLDivElement, BaseCollapsibleProps>((
+  props: BaseCollapsibleProps, forwardedRef) => {
   const {
     children,
     style,
@@ -48,7 +50,7 @@ export const BaseCollapsible = (props: BaseCollapsibleProps) => {
   }, [isOpen]);
 
   return (
-    <div style={style}>
+    <div ref={forwardedRef} style={style}>
       <Row style={{
         alignItems: 'center',
         padding: 10,
@@ -80,17 +82,19 @@ export const BaseCollapsible = (props: BaseCollapsibleProps) => {
       </Row>
     </div>
   );
-};
+});
 
-type CollapsibleProps = React.PropsWithChildren<{
+type CollapsibleProps = {
+  children: React.ReactNode;
   style?: React.CSSProperties;
   label: TReactNode;
   controls?: TReactNode;
   open?: boolean;
   onToggleOpen?: (v: boolean) => void;
-}>;
+};
 
-const Collapsible = (props: CollapsibleProps) => {
+const Collapsible = React.forwardRef<HTMLDivElement, CollapsibleProps>((
+  props: React.PropsWithChildren<CollapsibleProps>, ref) => {
   const {
     children,
     open,
@@ -108,11 +112,11 @@ const Collapsible = (props: CollapsibleProps) => {
   };
 
   return (
-    <BaseCollapsible isOpen={isOpen} handleToggle={handleToggle} {...rest}>
+    <BaseCollapsible ref={ref} isOpen={isOpen} handleToggle={handleToggle} {...rest}>
       {children}
     </BaseCollapsible>
   );
-};
+});
 
 type CollapsibleHeaderProps = {
   children: TReactNode;
@@ -232,7 +236,8 @@ type CollapsiblesProps = {
   list: CollapsibleProps[];
   controls?: TReactNode;
 };
-export function Collapsibles(props: CollapsiblesProps) {
+export const Collapsibles = React.forwardRef<HTMLDivElement, CollapsiblesProps> ((
+  props: React.PropsWithChildren<CollapsiblesProps>, ref) => {
   const { list, controls } = props;
   const [open, setOpen] = useState(-1);
   const handleOpen = (i: number) => setOpen(s => s === i ? -1 : i);
@@ -241,6 +246,7 @@ export function Collapsibles(props: CollapsiblesProps) {
     <div>{
       list.map((v, i) => (
         <BaseCollapsible
+          ref={ref}
           key={`Collapsible-key-${i}`}
           label={v.label}
           style={{ paddingBottom: 10, ...v.style }}
@@ -253,6 +259,6 @@ export function Collapsibles(props: CollapsiblesProps) {
       ))
     }</div>
   );
-}
+});
 
 export default Collapsible;

src/@commonsku/styles/ConfirmPopup.tsx

@@ -10,7 +10,9 @@ export type ConfirmPopupProps = {
   onDelete?: () => void;
   onClose?: () => void;
 };
-const ConfirmPopup = (props: ConfirmPopupProps) => {
+
+const ConfirmPopup = React.forwardRef<HTMLDivElement, ConfirmPopupProps>((
+  props: ConfirmPopupProps, ref) => {
   const {
     confirmText='Are you sure you want to delete?',
     disableDelete = false,
@@ -20,6 +22,7 @@ const ConfirmPopup = (props: ConfirmPopupProps) => {
 
   return (
     <Popup
+      ref={ref}
       width={'auto'}
       height={'auto'}
       padding={'36px'}
@@ -56,6 +59,6 @@ const ConfirmPopup = (props: ConfirmPopupProps) => {
       </div>
     </Popup>
   );
-};
+});
 
 export default ConfirmPopup;

src/@commonsku/styles/DefaultStar.tsx

@@ -54,7 +54,7 @@ type DefaultStarProps = React.PropsWithChildren<{
     color?: string;
 }>
 
-export default function DefaultStar({
+const DefaultStar = React.forwardRef<HTMLDivElement, DefaultStarProps>(({
     initialSelected=false,
     forceSelected=false,
     hoverText,
@@ -63,7 +63,7 @@ export default function DefaultStar({
     width,
     color=teal.main,
     ...props
-}: DefaultStarProps ) {
+}: DefaultStarProps, ref ) => {
 
     if(!hoverText) {
         hoverText = children
@@ -74,6 +74,7 @@ export default function DefaultStar({
 
     return (
        <DefaultStarContainer 
+            ref={ref}
             onClick={() => setClicked(!isClicked)} 
             onMouseEnter={() => setHover(true)} 
             onMouseLeave={() => setHover(false)} 
@@ -98,6 +99,8 @@ export default function DefaultStar({
                 }
        </DefaultStarContainer>
     );
-}
+});
+
+export default DefaultStar