From c76e0f3f52b4091e11d200ebf8f9388c2b6d6e0c Mon Sep 17 00:00:00 2001
From: Jason Quense <monastic.panic@gmail.com>
Date: Wed, 7 Jul 2021 15:56:38 -0400
Subject: [PATCH] feat: add low level List.renderList()

---
 packages/react-widgets/src/List.tsx           | 36 +++++++++----------
 .../react-widgets/src/scss/number-picker.scss |  2 +-
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/react-widgets/src/List.tsx b/packages/react-widgets/src/List.tsx
index 08fda1913..382fba055 100644
--- a/packages/react-widgets/src/List.tsx
+++ b/packages/react-widgets/src/List.tsx
@@ -208,6 +208,7 @@ const List: List = React.forwardRef(function List<TDataItem>(
     groupBy,
     elementRef,
     optionComponent: Option = ListOption,
+    renderList,
     // onKeyDown,
     ...props
   }: ListProps<TDataItem>,
@@ -263,7 +264,7 @@ const List: List = React.forwardRef(function List<TDataItem>(
     )
   }
 
-  const children = groupedData
+  const items = groupedData
     ? groupedData.map(([group, items], idx) => (
         <div role="group" key={`group_${idx}`}>
           <ListOptionGroup>
@@ -274,23 +275,22 @@ const List: List = React.forwardRef(function List<TDataItem>(
       ))
     : data.map(renderOption)
 
-  return (
-    <div
-      id={id}
-      tabIndex={0}
-      ref={divRef}
-      {...elementProps}
-      aria-multiselectable={!!multiple}
-      className={cn(className, 'rw-list')}
-      role={elementProps.role ?? 'listbox'}
-    >
-      {React.Children.count(children) ? (
-        children
-      ) : (
-        <div className="rw-list-empty">{emptyList()}</div>
-      )}
-    </div>
-  )
+  const rootProps = {
+    id,
+    tabIndex: 0,
+    ref: divRef,
+    ...elementProps,
+    'aria-multiselectable': !!multiple,
+    className: cn(className, 'rw-list'),
+    role: elementProps.role ?? 'listbox',
+    children: React.Children.count(items) ? (
+      items
+    ) : (
+      <div className="rw-list-empty">{emptyList()}</div>
+    ),
+  }
+
+  return renderList ? renderList(rootProps) : <div {...rootProps} />
 })
 
 List.displayName = 'List'
diff --git a/packages/react-widgets/src/scss/number-picker.scss b/packages/react-widgets/src/scss/number-picker.scss
index 802e4e103..432565adb 100644
--- a/packages/react-widgets/src/scss/number-picker.scss
+++ b/packages/react-widgets/src/scss/number-picker.scss
@@ -3,7 +3,7 @@
 
 @mixin NumberPicker() {
   .rw-number-picker {
-    $half-width: math.div($input-height, 2);
+    $half-width: $input-height * 0.5;
   }
 
   .rw-number-picker-spinners {