Some updates to item-select component

Author: davenquinn

packages/form-components/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [0.2.1] - 2025-02-22
+
+- `ItemSelect` component: add option to not fill width, and add active highlight
+
 ## [0.2.0] - 2025-02-20
 
 - Add `ItemSelect` component for general selections (items must have a `name`

packages/form-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/form-components",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Form components for user input into Macrostrat apps",
   "type": "module",
   "source": "src/index.ts",

packages/form-components/src/item-select/examples.ts

@@ -46,7 +46,7 @@ export function BaseDataTypeSelect({ state, setState, ...rest }) {
     onSelectItem: setState,
     label: "data type",
     icon: "tag",
-    itemComponent: ({ item, ...rest }) => {
+    itemComponent: ({ item, selected, icon, ...rest }) => {
       return h(MenuItem, {
         icon: h(Box, {
           is: "span",
@@ -56,6 +56,7 @@ export function BaseDataTypeSelect({ state, setState, ...rest }) {
           borderRadius: "3px",
         }),
         text: item.name,
+        active: selected,
         ...rest,
       });
     },

packages/form-components/src/item-select/index.module.sass

@@ -5,8 +5,13 @@
   display: flex
   flex-direction: row
 
+  &.fill-width .target-select
+    flex-grow: 1
+
 .target-select
   list-style: none
   padding: 0
   margin: 0
-  flex-grow: 1
+
+.selected
+  font-weight: 600

packages/form-components/src/item-select/index.ts

@@ -1,8 +1,9 @@
 import hyper from "@macrostrat/hyper";
-import { IconName, MenuItem, Spinner, Button } from "@blueprintjs/core";
+import { IconName, MenuItem, Spinner, Button, Intent } from "@blueprintjs/core";
 import { ComponentType, MouseEventHandler, ReactNode } from "react";
 import { Select } from "@blueprintjs/select";
 import styles from "./index.module.sass";
+import classNames from "classnames";
 
 const h = hyper.styled(styles);
 
@@ -19,6 +20,7 @@ export function ItemSelect<T extends Nameable>({
   minimal = true,
   usePortal = true,
   nullable = false,
+  fill = true,
 }: {
   items: T[] | null;
   selectedItem: T | null;
@@ -31,6 +33,7 @@ export function ItemSelect<T extends Nameable>({
   minimal?: boolean;
   usePortal?: boolean;
   nullable?: boolean;
+  fill?: boolean;
 }) {
   let placeholder = `Select ${singularReferent(label)}`;
   let _icon: IconName | ReactNode = icon;
@@ -58,61 +61,75 @@ export function ItemSelect<T extends Nameable>({
       {
         items: items ?? [],
         itemRenderer: (item, { handleClick }) => {
-          return h(itemComponent, { item, onClick: handleClick, icon });
+          return h(itemComponent, {
+            key: item.name,
+            item,
+            onClick: handleClick,
+            icon,
+            selected: selectedItem == item,
+          });
         },
         onItemSelect: onSelectItem,
         popoverProps: {
           minimal,
           usePortal,
-          matchTargetWidth: true,
+          matchTargetWidth: fill,
         },
         filterable,
-        fill: true,
+        fill,
       },
-      h("div.target-container", [
-        h("ul.target-select", content),
-        h.if(nullable)(Button, {
-          minimal: true,
-          icon: "cross",
-          intent: "danger",
-          onClick(evt) {
-            onSelectItem(null);
-            evt.stopPropagation();
-          },
-          disabled: selectedItem == null,
-        }),
-      ])
+      h(
+        "div.target-container",
+        {
+          className: classNames({ "fill-width": fill }),
+        },
+        [
+          h("ul.target-select", content),
+          h.if(nullable)(Button, {
+            minimal: true,
+            icon: "cross",
+            intent: "danger",
+            onClick(evt) {
+              onSelectItem(null);
+              evt.stopPropagation();
+            },
+            disabled: selectedItem == null,
+          }),
+        ]
+      )
     )
   );
 }
 
 interface Nameable {
   name: string;
   icon?: IconName | ReactNode;
+  intent?: Intent;
 }
 
 interface ItemComponentProps<T> {
   item: T;
   className?: string;
   onClick?: MouseEventHandler<HTMLElement>;
   icon?: IconName | ReactNode;
+  selected?: boolean;
+  intent?: Intent;
 }
 
 function DefaultItemComponent<T extends Nameable>({
   item,
   className,
   onClick,
   icon,
-}: {
-  item: T;
-  className?: string;
-  onClick?: MouseEventHandler<HTMLElement>;
-  icon?: IconName | ReactNode;
-}) {
+  selected,
+  intent,
+}: ItemComponentProps<T>) {
   return h(MenuItem, {
     icon: item.icon ?? icon,
     text: item.name,
-    className,
+    intent: item.intent ?? intent,
+    className: classNames({ selected }),
+    active: selected,
     onClick,
   });
 }

packages/form-components/src/item-select/item-select.stories.ts

@@ -43,3 +43,15 @@ export function Nullable() {
     nullable: true,
   });
 }
+
+export function NotFillArea() {
+  const [state, setState] = useState<DataType | null>(null);
+  return h(BaseDataTypeSelect, {
+    state,
+    setState(dt) {
+      console.log(dt), setState(dt);
+    },
+    nullable: true,
+    fill: false,
+  });
+}