Fix datalist and menu and choice widgets.

notebooks/using_show_and_widgets.ipynb

@@ -191,9 +191,9 @@
    "id": "b78f64fa",
    "metadata": {},
    "source": [
-    "## Tight columns and Wrapped rows\n",
+    "## Tight columns and wrapped rows\n",
     "\n",
-    "A few useful `show.style` instances are predefined as constants.  For example, `show.style(display='inline-flex')` is also called `show.TIGHT`, because it provides a tight layout of rows that are sized to fit the content instead of making the flexbox expand to fill its container.  Similaly `show.WRAP` makes a row that packs the data to the left and wraps it (like the way text flows), instad of as spaced-out columns."
+    "A few useful `show.style` instances are predefined as constants.  For example, `show.style(display='inline-flex')` is also called `show.TIGHT`, because it provides a tight layout of rows that are sized to fit the content instead of making the flexbox expand to fill its container.  Similaly `show.WRAP` makes a row that packs the data to the left and wraps it (like the way text flows), instead of as spaced-out columns."
    ]
   },
   {
@@ -213,7 +213,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "show(show.TIGHT,\n",
+    "show(show.TIGHT, show.style(gap=0),\n",
     "     [[[show.style(font='italic 24px serif'), 'lots of data',\n",
     "        show.style(background='gainsboro'),\n",
     "     show.WRAP, [f'({a},{b})' for a in range(i) for b in range(j)]]\n",
@@ -361,6 +361,80 @@
     "show([[div, show.style(flex=7), ra3]])"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "21ecb0c0",
+   "metadata": {},
+   "source": [
+    "## Menus, Choices, and Datalists\n",
+    "\n",
+    "You can make dropdown menus using `Menu`; radio button choices using `Choice`; and editable dropdowns (combobox) using `Datalist`."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "8f3032e1",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from baukit import Menu\n",
+    "\n",
+    "menu = Menu(choices=list(range(0,101,10)))\n",
+    "ra4 = Range(step=10)\n",
+    "menu.value = ra4.prop('value')\n",
+    "\n",
+    "show([[menu, show.style(flex=7), ra4]])"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "20d1070c",
+   "metadata": {},
+   "source": [
+    "Radio button choice arrays can be arranged horizontally or vertically based on the level of nesting."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "8df5514a",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from baukit import Choice\n",
+    "\n",
+    "choice = Choice(choices=list(range(0,101,50)))\n",
+    "ra6 = Range(step=50)\n",
+    "choice.value = ra6.prop('value')\n",
+    "\n",
+    "show([[choice, show.style(flex=6), ra6]])\n",
+    "show([[[choice], show.style(flex=6), ra6]])"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "8d85174a",
+   "metadata": {},
+   "source": [
+    "A Datalist allows free-form input while also providing a dropdown menu for choices."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "07a2ed9e",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from baukit import Datalist\n",
+    "dl = Datalist(choices=list(range(0,101,20)))\n",
+    "ra5 = Range(step=1)\n",
+    "dl.value = ra5.prop('value')\n",
+    "\n",
+    "show([[dl, show.style(flex=7), ra5]])"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "8b8a23a9",