@telefonica/mistica 11.2.0 → 11.4.0

package/dist/list.d.ts

@@ -15,7 +15,11 @@ interface CommonProps {
     extra?: React.ReactNode;
     dataAttributes?: DataAttributes;
     disabled?: boolean;
+    withChevron?: boolean;
 }
+declare type Right = (({ centerY }: {
+    centerY: boolean;
+}) => React.ReactNode) | React.ReactNode;
 declare type ControlProps = {
     name?: string;
     value?: boolean;
@@ -31,7 +35,7 @@ interface BasicRowContentProps extends CommonProps {
     radioValue?: undefined;
     newTab?: undefined;
     fullPageOnWebView?: undefined;
-    right?: React.ReactNode;
+    right?: Right;
 }
 interface SwitchRowContentProps extends CommonProps {
     href?: undefined;
@@ -76,7 +80,7 @@ interface HrefRowContentProps extends CommonProps {
     newTab?: boolean;
     onPress?: undefined;
     to?: undefined;
-    right?: React.ReactNode;
+    right?: Right;
 }
 interface ToRowContentProps extends CommonProps {
     checkbox?: undefined;
@@ -89,7 +93,7 @@ interface ToRowContentProps extends CommonProps {
     replace?: boolean;
     href?: undefined;
     onPress?: undefined;
-    right?: React.ReactNode;
+    right?: Right;
 }
 interface OnPressRowContentProps extends CommonProps {
     checkbox?: undefined;
@@ -100,7 +104,7 @@ interface OnPressRowContentProps extends CommonProps {
     onPress: () => void;
     href?: undefined;
     to?: undefined;
-    right?: React.ReactNode;
+    right?: Right;
 }
 declare type RowContentProps = BasicRowContentProps | SwitchRowContentProps | RadioRowContentProps | CheckboxRowContentProps | HrefRowContentProps | ToRowContentProps | OnPressRowContentProps;
 export declare const Row: React.ForwardRefExoticComponent<RowContentProps & React.RefAttributes<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>>;

package/dist/list.js

@@ -129,58 +129,60 @@ var useStyles = (0, _jss).createUseStyles(function(param1) {
             opacity: 0.5
         },
         hover: _defineProperty({}, mq.supportsHover, {
-            '&:hover': {
+            "&:hover": {
                 background: function background(param) {
                     var isInverse = param.isInverse, disabled = param.disabled;
-                    return isInverse || disabled ? 'initial' : colors.backgroundAlternative;
+                    return isInverse || disabled ? "initial" : colors.backgroundAlternative;
                 }
             }
         }),
         rowContent: {
-            width: '100%',
+            width: "100%",
             cursor: function cursor(param) {
                 var disabled = param.disabled;
-                return disabled ? 'default' : 'pointer';
+                return disabled ? "default" : "pointer";
             }
         },
         hoverDisabled: {
-            cursor: 'initial',
-            '&:hover': {
+            cursor: function cursor() {
+                return "initial";
+            },
+            "&:hover": {
                 background: function background() {
-                    return 'none';
+                    return "none";
                 }
             }
         },
         content: {
-            display: 'flex',
-            width: '100%',
+            display: "flex",
+            width: "100%",
             minHeight: 72
         },
         asset: {
-            display: 'flex',
+            display: "flex",
             flexShrink: 0,
             flexGrow: 0
         },
         rowBody: {
-            display: 'flex',
-            flexDirection: 'column',
+            display: "flex",
+            flexDirection: "column",
             flex: 1
         },
         center: {
-            display: 'flex',
-            alignItems: 'center'
+            display: "flex",
+            alignItems: "center"
         },
         badge: {
-            justifyContent: 'center',
+            justifyContent: "center",
             minWidth: 16,
-            height: '100%',
+            height: "100%",
             flexShrink: 0
         },
         control: {
             marginLeft: 16,
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
             flexGrow: 0,
             flexShrink: 0
         },
@@ -188,32 +190,45 @@ var useStyles = (0, _jss).createUseStyles(function(param1) {
             marginLeft: 16
         },
         centeredControl: {
-            display: 'flex',
-            alignItems: 'center',
-            height: '100%'
+            display: "flex",
+            alignItems: "center",
+            height: "100%"
         },
         dualActionContainer: {
-            display: 'flex',
-            flexDirection: 'row'
+            display: "flex",
+            flexDirection: "row"
         },
         dualActionLeft: {
             flexGrow: 1,
-            padding: '0 16px'
+            padding: "0 16px"
         },
         dualActionRight: {
-            padding: '0 16px',
-            margin: '16px 0',
+            padding: "0 16px",
+            margin: "16px 0",
             borderLeft: "1px solid ".concat(colors.divider),
-            display: 'flex',
-            alignItems: 'center',
+            display: "flex",
+            alignItems: "center",
             flexGrow: 0,
-            width: 'auto',
+            width: "auto",
             lineHeight: 0
         }
     };
 });
+var renderRight = function renderRight(right, centerY) {
+    if (typeof right === "function") return right === null || right === void 0 ? void 0 : right({
+        centerY: centerY
+    });
+    return centerY ? /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            height: "100%"
+        },
+        children: right
+    }) : right;
+};
 var Content = function Content(param) {
-    var headline = param.headline, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, asset = param.asset, _type = param.type, type = _type === void 0 ? 'basic' : _type, badge = param.badge, right = param.right, extra = param.extra, labelId = param.labelId, disabled = param.disabled;
+    var withChevron = param.withChevron, headline = param.headline, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, asset = param.asset, _type = param.type, type = _type === void 0 ? "basic" : _type, badge = param.badge, right = param.right, extra = param.extra, labelId = param.labelId, disabled = param.disabled;
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var classes = useStyles({
         isInverse: isInverse
@@ -226,12 +241,12 @@ var Content = function Content(param) {
         description,
         extra
     ].filter(Boolean).length;
-    var shouldCenter = numTextLines === 1;
+    var centerY = numTextLines === 1;
     var renderBadge = function renderBadge() {
         if (!badge) {
             return null;
         }
-        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
             paddingLeft: 16,
             children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                 className: (0, _classnames).default(classes.center, classes.badge, _defineProperty({}, classes.disabled, disabled)),
@@ -239,41 +254,16 @@ var Content = function Content(param) {
                     value: badge
                 })
             })
-        }));
-    };
-    var renderRight = function renderRight() {
-        switch(type){
-            case 'chevron':
-                return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
-                    paddingLeft: 16,
-                    className: (0, _classnames).default(classes.center, _defineProperty({}, classes.disabled, disabled)),
-                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconChevron.default, {
-                        color: isInverse ? colors.inverse : colors.neutralMedium,
-                        direction: "right"
-                    })
-                }));
-            case 'control':
-                return(/*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.right,
-                    children: right
-                }));
-            case 'custom':
-                return(/*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: (0, _classnames).default(classes.right, _defineProperty({}, classes.disabled, disabled)),
-                    children: right
-                }));
-            default:
-                return null;
-        }
+        });
     };
     var _obj;
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_box.default, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsxs(_box.default, {
         paddingY: 16,
         className: classes.content,
         children: [
             asset && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
                 paddingRight: 16,
-                className: (0, _classnames).default((_obj = {}, _defineProperty(_obj, classes.center, shouldCenter), _defineProperty(_obj, classes.disabled, disabled), _obj)),
+                className: (0, _classnames).default((_obj = {}, _defineProperty(_obj, classes.center, centerY), _defineProperty(_obj, classes.disabled, disabled), _obj)),
                 children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.asset,
                     children: asset
@@ -282,7 +272,7 @@ var Content = function Content(param) {
             /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                 className: (0, _classnames).default(classes.rowBody, _defineProperty({}, classes.disabled, disabled)),
                 style: {
-                    justifyContent: shouldCenter ? 'center' : 'flex-start'
+                    justifyContent: centerY ? "center" : "flex-start"
                 },
                 children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
                     space: 4,
@@ -325,9 +315,42 @@ var Content = function Content(param) {
                 })
             }),
             renderBadge(),
-            renderRight()
+            type === "chevron" && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                paddingLeft: 16,
+                className: (0, _classnames).default(classes.center, _defineProperty({}, classes.disabled, disabled)),
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconChevron.default, {
+                    color: isInverse ? colors.inverse : colors.neutralMedium,
+                    direction: "right"
+                })
+            }),
+            type === "control" && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                className: classes.right,
+                children: renderRight(right, centerY)
+            }),
+            type === "custom" && /*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: (0, _classnames).default(classes.right, _defineProperty({}, classes.disabled, disabled)),
+                        children: renderRight(right, centerY)
+                    }),
+                    withChevron && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: (0, _classnames).default(classes.right, _defineProperty({}, classes.disabled, disabled)),
+                        children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                            style: {
+                                display: "flex",
+                                alignItems: "center",
+                                height: "100%"
+                            },
+                            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconChevron.default, {
+                                color: isInverse ? colors.inverse : colors.neutralMedium,
+                                direction: "right"
+                            })
+                        })
+                    })
+                ]
+            })
         ]
-    }));
+    });
 };
 var useControlState = function useControlState(param) {
     var value = param.value, defaultValue = param.defaultValue, onChange = param.onChange;
@@ -352,7 +375,7 @@ var useControlState = function useControlState(param) {
         toggle
     ];
 };
-var RowContent = /*#__PURE__*/ React.forwardRef(function(props1, ref5) {
+var RowContent = /*#__PURE__*/ React.forwardRef(function(props1, ref) {
     var titleId = (0, _hooks).useAriaId();
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var asset = props1.asset, headline = props1.headline, title = props1.title, titleLinesMax = props1.titleLinesMax, subtitle = props1.subtitle, subtitleLinesMax = props1.subtitleLinesMax, description = props1.description, descriptionLinesMax = props1.descriptionLinesMax, badge = props1.badge, role = props1.role, extra = props1.extra, dataAttributes = props1.dataAttributes;
@@ -362,10 +385,10 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props1, ref5) {
         isInverse: isInverse,
         disabled: disabled
     });
-    var ref1 = _slicedToArray(useControlState(props1.switch || props1.checkbox || {}), 2), isChecked = ref1[0], toggle = ref1[1];
+    var _$ref4 = _slicedToArray(useControlState(props1.switch || props1.checkbox || {}), 2), isChecked = _$ref4[0], toggle = _$ref4[1];
     var renderContent = function renderContent(param) {
         var type = param.type, right = param.right, labelId = param.labelId;
-        /*#__PURE__*/ return (0, _jsxRuntime).jsx(Content, {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx(Content, {
             asset: asset,
             headline: headline,
             title: title,
@@ -379,29 +402,30 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props1, ref5) {
             right: right,
             extra: extra,
             labelId: labelId,
-            disabled: disabled
+            disabled: disabled,
+            withChevron: !!props1.onPress || !!props1.href || !!props1.to
         });
     };
     var renderTouchableContent = function renderTouchableContent(props) {
-        var type = 'chevron';
+        var type = "chevron";
         if (props.right === null) {
-            type = 'basic';
+            type = "basic";
         }
         if (props.right) {
-            type = 'custom';
+            type = "custom";
         }
-        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
             paddingX: 16,
-            ref: ref5,
+            ref: ref,
             children: renderContent({
                 type: type,
                 right: props.right
             })
-        }));
+        });
     };
     if (props1.onPress && props1.switch === undefined && props1.radioValue === undefined && props1.checkbox === undefined) {
-        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, {
-            ref: ref5,
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, {
+            ref: ref,
             className: (0, _classnames).default(classes.rowContent, classes.hover),
             trackingEvent: props1.trackingEvent,
             onPress: props1.onPress,
@@ -409,10 +433,10 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props1, ref5) {
             dataAttributes: dataAttributes,
             disabled: disabled,
             children: renderTouchableContent(props1)
-        }));
+        });
     }
     if (props1.to) {
-        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, {
             className: (0, _classnames).default(classes.rowContent, classes.hover),
             trackingEvent: props1.trackingEvent,
             to: props1.to,
@@ -421,10 +445,10 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props1, ref5) {
             dataAttributes: dataAttributes,
             disabled: disabled,
             children: renderTouchableContent(props1)
-        }));
+        });
     }
     if (props1.href) {
-        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, {
             className: (0, _classnames).default(classes.rowContent, classes.hover),
             trackingEvent: props1.trackingEvent,
             href: props1.href,
@@ -433,12 +457,12 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props1, ref5) {
             dataAttributes: dataAttributes,
             disabled: disabled,
             children: renderTouchableContent(props1)
-        }));
+        });
     }
     var renderRowWithControl = function renderRowWithControl(Control) {
-        var ref, ref2;
-        var ref3, ref4;
-        var name = (ref4 = (ref3 = (ref = props1.switch) === null || ref === void 0 ? void 0 : ref.name) !== null && ref3 !== void 0 ? ref3 : (ref2 = props1.checkbox) === null || ref2 === void 0 ? void 0 : ref2.name) !== null && ref4 !== void 0 ? ref4 : titleId;
+        var _$ref, _$ref1;
+        var _$ref2, _$ref3;
+        var name = (_$ref3 = (_$ref2 = (_$ref = props1.switch) === null || _$ref === void 0 ? void 0 : _$ref.name) !== null && _$ref2 !== void 0 ? _$ref2 : (_$ref1 = props1.checkbox) === null || _$ref1 === void 0 ? void 0 : _$ref1.name) !== null && _$ref3 !== void 0 ? _$ref3 : titleId;
         return props1.onPress ? /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
             className: classes.dualActionContainer,
             children: [
@@ -448,7 +472,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props1, ref5) {
                     role: role,
                     className: (0, _classnames).default(classes.dualActionLeft, classes.hover),
                     children: renderContent({
-                        type: 'basic',
+                        type: "basic",
                         labelId: titleId
                     })
                 }),
@@ -479,16 +503,18 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props1, ref5) {
                 onChange: toggle,
                 render: function render(param) {
                     var controlElement = param.controlElement, labelId = param.labelId;
-                    /*#__PURE__*/ return (0, _jsxRuntime).jsx(_box.default, {
+                    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
                         paddingX: 16,
                         role: role,
                         children: renderContent({
                             labelId: labelId,
-                            type: 'control',
-                            right: /*#__PURE__*/ (0, _jsxRuntime).jsx(_stack.default, {
-                                space: "around",
-                                children: controlElement
-                            })
+                            type: "control",
+                            right: function right() {
+                                return /*#__PURE__*/ (0, _jsxRuntime).jsx(_stack.default, {
+                                    space: "around",
+                                    children: controlElement
+                                });
+                            }
                         })
                     });
                 }
@@ -502,56 +528,58 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props1, ref5) {
         return renderRowWithControl(_checkbox.default);
     }
     if (props1.radioValue) {
-        return(/*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
             className: (0, _classnames).default(classes.rowContent, classes.hover),
             role: role,
-            ref: ref5,
+            ref: ref,
             children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_radioButton.default, {
                 dataAttributes: dataAttributes,
                 value: props1.radioValue,
                 "aria-labelledby": titleId,
                 render: function render(param) {
                     var controlElement = param.controlElement;
-                    /*#__PURE__*/ return (0, _jsxRuntime).jsx(_box.default, {
+                    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
                         paddingX: 16,
                         children: renderContent({
-                            type: 'control',
-                            right: /*#__PURE__*/ (0, _jsxRuntime).jsx(_stack.default, {
-                                space: "around",
-                                children: controlElement
-                            })
+                            type: "control",
+                            right: function right() {
+                                return /*#__PURE__*/ (0, _jsxRuntime).jsx(_stack.default, {
+                                    space: "around",
+                                    children: controlElement
+                                });
+                            }
                         })
                     });
                 }
             })
-        }));
+        });
     }
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
         paddingX: 16,
         className: (0, _classnames).default(classes.rowContent, classes.hover, classes.hoverDisabled),
         role: role,
         children: props1.right ? renderContent({
-            type: 'custom',
+            type: "custom",
             right: props1.right
         }) : renderContent({
-            type: 'basic'
+            type: "basic"
         })
-    }));
+    });
 });
 var Row = /*#__PURE__*/ React.forwardRef(function(props, ref) {
-    /*#__PURE__*/ return (0, _jsxRuntime).jsx(RowContent, _objectSpread({}, props, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(RowContent, _objectSpread({}, props, {
         ref: ref
     }));
 });
 exports.Row = Row;
 var RowList = function RowList(param) {
     var children = param.children, ariaLabelledby = param.ariaLabelledby, role = param.role, dataAttributes = param.dataAttributes;
-    /*#__PURE__*/ return (0, _jsxRuntime).jsx("div", _objectSpread({
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
         role: role,
         "aria-labelledby": ariaLabelledby
     }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         children: React.Children.toArray(children).filter(Boolean).map(function(child, index) {
-            /*#__PURE__*/ return (0, _jsxRuntime).jsxs(React.Fragment, {
+            return /*#__PURE__*/ (0, _jsxRuntime).jsxs(React.Fragment, {
                 children: [
                     child,
                     /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
@@ -565,7 +593,7 @@ var RowList = function RowList(param) {
 };
 exports.RowList = RowList;
 var BoxedRow = /*#__PURE__*/ React.forwardRef(function(props, ref) {
-    /*#__PURE__*/ return (0, _jsxRuntime).jsx(_boxed.Boxed, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_boxed.Boxed, {
         isInverse: props.isInverse,
         ref: ref,
         children: /*#__PURE__*/ (0, _jsxRuntime).jsx(RowContent, _objectSpread({}, props))
@@ -574,7 +602,7 @@ var BoxedRow = /*#__PURE__*/ React.forwardRef(function(props, ref) {
 exports.BoxedRow = BoxedRow;
 var BoxedRowList = function BoxedRowList(param) {
     var children = param.children, ariaLabelledby = param.ariaLabelledby, role = param.role, dataAttributes = param.dataAttributes;
-    /*#__PURE__*/ return (0, _jsxRuntime).jsx(_stack.default, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_stack.default, {
         space: 16,
         role: role,
         "aria-labelledby": ariaLabelledby,

package/dist/list.js.flow

@@ -16,7 +16,13 @@ declare type CommonProps = {
   extra?: React.Node,
   dataAttributes?: DataAttributes,
   disabled?: boolean,
+  withChevron?: boolean,
 };
+declare type Right =
+  | ((x: {
+      centerY: boolean,
+    }) => React.Node)
+  | React.Node;
 declare type ControlProps = {
   name?: string,
   value?: boolean,
@@ -25,7 +31,7 @@ declare type ControlProps = {
 };
 declare type BasicRowContentProps = {
   ...$Exact<CommonProps>,
-  right?: React.Node,
+  right?: Right,
 };
 declare type SwitchRowContentProps = {
   ...$Exact<CommonProps>,
@@ -46,7 +52,7 @@ declare type HrefRowContentProps = {
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
   href: string,
   newTab?: boolean,
-  right?: React.Node,
+  right?: Right,
 };
 declare type ToRowContentProps = {
   ...$Exact<CommonProps>,
@@ -54,13 +60,13 @@ declare type ToRowContentProps = {
   to: string,
   fullPageOnWebView?: boolean,
   replace?: boolean,
-  right?: React.Node,
+  right?: Right,
 };
 declare type OnPressRowContentProps = {
   ...$Exact<CommonProps>,
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
   onPress: () => void,
-  right?: React.Node,
+  right?: Right,
 };
 declare type RowContentProps =
   | BasicRowContentProps
@@ -70,10 +76,7 @@ declare type RowContentProps =
   | HrefRowContentProps
   | ToRowContentProps
   | OnPressRowContentProps;
-declare export var Row: React.ComponentType<{
-  ...RowContentProps,
-  ref?: React.Ref<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>,
-}>;
+declare export var Row: React.AbstractComponent<RowContentProps, HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>;
 declare type RowListProps = {
   children: React.Node,
   ariaLabelledby?: string,
@@ -120,10 +123,7 @@ declare type BoxedRowProps =
   | HrefBoxedRowProps
   | ToBoxedRowProps
   | OnPressBoxedRowProps;
-declare export var BoxedRow: React.ComponentType<{
-  ...BoxedRowProps,
-  ref?: React.Ref<HTMLDivElement>,
-}>;
+declare export var BoxedRow: React.AbstractComponent<BoxedRowProps, HTMLDivElement>;
 declare type BoxedRowListProps = {
   children: React.Node,
   ariaLabelledby?: string,