tinywidgets 1.3.4 → 1.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinywidgets",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "author": "jamesgpearce",
   "repository": "github:tinyplex/tinywidgets",
   "license": "MIT",
@@ -19,28 +19,29 @@
     "prePublishPackage": "prettier --check . && eslint . && cspell --quiet . && tsc && cp ../README.md ./README.md"
   },
   "devDependencies": {
-    "@eslint/js": "^9.27.0",
-    "@types/react": "^19.1.4",
-    "cspell": "^9.0.1",
-    "eslint": "^9.27.0",
-    "eslint-plugin-import": "^2.31.0",
+    "@eslint/js": "^9.30.1",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "cspell": "^9.1.3",
+    "eslint": "^9.30.1",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "globals": "^16.1.0",
-    "prettier": "^3.5.3",
+    "globals": "^16.3.0",
+    "prettier": "^3.6.2",
     "prettier-plugin-organize-imports": "^4.1.0",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.32.1"
+    "typescript-eslint": "^8.36.0"
   },
   "exports": {
     ".": "./src/index.ts",
     "./css": "./src/index.css.ts"
   },
   "dependencies": {
-    "@vanilla-extract/css": "^1.17.2",
-    "lucide-react": "^0.511.0",
+    "@vanilla-extract/css": "^1.17.4",
+    "lucide-react": "^0.525.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "tinybase": "^6.2.0-beta.1"
+    "tinybase": "^6.4.0"
   }
 }

package/src/components/App/index.tsx

@@ -1,5 +1,11 @@
 import {Menu, Moon, Sun, SunMoon, X} from 'lucide-react';
-import type {ComponentType, ReactNode} from 'react';
+import {
+  createContext,
+  useContext,
+  useRef,
+  type ComponentType,
+  type ReactNode,
+} from 'react';
 import * as UiReact from 'tinybase/ui-react/with-schemas';
 import type {OptionalSchemas} from 'tinybase/with-schemas';
 import {classNames, renderComponentOrNode} from '../../common/functions.tsx';
@@ -105,6 +111,11 @@ export const App = (props: {
   );
 };
 
+const LayoutContext = createContext<{readonly portal: HTMLDivElement | null}>({
+  portal: null,
+});
+export const usePortal = () => useContext(LayoutContext).portal;
+
 const Layout = ({
   title: titleComponentOrNode,
   topNavLeft: topNavLeftComponentOrNode,
@@ -137,8 +148,11 @@ const Layout = ({
   const hasSideNav = sideNavComponentOrNode != null;
   const hasFooter = footerComponentOrNode != null;
 
-  return sessionStoreIsReady && routeStoreIsReady && localStoreIsReady ? (
+  const ref = useRef<HTMLDivElement>(null);
+
+  return (
     <div
+      ref={ref}
       className={classNames(
         app,
         hasLayout && appLayout,
@@ -148,53 +162,60 @@ const Layout = ({
       )}
     >
       {hasLayout ? (
-        <>
-          <header className={header}>
-            {hasSideNav ? (
-              <Button
-                variant="icon"
-                onClick={toggleSideNavIsOpen}
-                icon={sideNavIsOpen ? X : Menu}
-                className={sideNavButton}
-              />
-            ) : null}
-            <nav className={title}>
-              {renderComponentOrNode(titleComponentOrNode)}
-            </nav>
-            <nav className={topNav}>
-              {renderComponentOrNode(topNavLeftComponentOrNode, <div />)}
-              {renderComponentOrNode(topNavRightComponentOrNode, <div />)}
-            </nav>
-            <Button
-              variant="icon"
-              onClick={toggleDarkChoice}
-              icon={darkIcons[darkChoice]}
-              alt={darkChoices[darkChoice]}
-            />
-            {hasSideNav ? (
-              <nav
-                className={classNames(sideNav, sideNavIsOpen && sideNavOpen)}
+        <LayoutContext.Provider value={{portal: ref.current}}>
+          {sessionStoreIsReady && routeStoreIsReady && localStoreIsReady ? (
+            <>
+              <header className={header}>
+                {hasSideNav ? (
+                  <Button
+                    variant="icon"
+                    onClick={toggleSideNavIsOpen}
+                    icon={sideNavIsOpen ? X : Menu}
+                    className={sideNavButton}
+                  />
+                ) : null}
+                <nav className={title}>
+                  {renderComponentOrNode(titleComponentOrNode)}
+                </nav>
+                <nav className={topNav}>
+                  {renderComponentOrNode(topNavLeftComponentOrNode, <div />)}
+                  {renderComponentOrNode(topNavRightComponentOrNode, <div />)}
+                </nav>
+                <Button
+                  variant="icon"
+                  onClick={toggleDarkChoice}
+                  icon={darkIcons[darkChoice]}
+                  alt={darkChoices[darkChoice]}
+                />
+                {hasSideNav ? (
+                  <nav
+                    className={classNames(
+                      sideNav,
+                      sideNavIsOpen && sideNavOpen,
+                    )}
+                  >
+                    {renderComponentOrNode(sideNavComponentOrNode)}
+                  </nav>
+                ) : null}
+              </header>
+              <main
+                className={classNames(
+                  main,
+                  hasSideNav && mainHasSideNav,
+                  hasFooter && mainHasFooter,
+                )}
               >
-                {renderComponentOrNode(sideNavComponentOrNode)}
-              </nav>
-            ) : null}
-          </header>
-          <main
-            className={classNames(
-              main,
-              hasSideNav && mainHasSideNav,
-              hasFooter && mainHasFooter,
-            )}
-          >
-            {renderComponentOrNode(mainComponentOrNode)}
-          </main>
-          {hasFooter ? (
-            <footer className={footer}>
-              {renderComponentOrNode(footerComponentOrNode)}
-            </footer>
+                {renderComponentOrNode(mainComponentOrNode)}
+              </main>
+              {hasFooter ? (
+                <footer className={footer}>
+                  {renderComponentOrNode(footerComponentOrNode)}
+                </footer>
+              ) : null}
+            </>
           ) : null}
-        </>
+        </LayoutContext.Provider>
       ) : null}
     </div>
-  ) : null;
+  );
 };

package/src/components/Button/index.tsx

@@ -114,6 +114,7 @@ export const Button = ({
   href,
   alt,
   className,
+  anchorName,
   ref,
 }: {
   /**
@@ -167,6 +168,10 @@ export const Button = ({
    * An extra CSS class name for the component.
    */
   readonly className?: string;
+  /**
+   * An name for the component to be used as an anchor for other elements.
+   */
+  readonly anchorName?: string;
   ref?: React.RefObject<HTMLButtonElement | null>;
 }) => {
   const hrefClick = useCallback(
@@ -175,6 +180,7 @@ export const Button = ({
   );
 
   return (
+    // @ts-expect-error anchorName not typed for React yet
     <button
       className={classNames(
         button,
@@ -185,6 +191,7 @@ export const Button = ({
       onClick={onClick ?? hrefClick}
       title={alt}
       ref={ref}
+      {...(anchorName ? {style: {anchorName}} : {})}
     >
       {Icon ? <Icon className={iconSize} /> : null}
       {titleComponentOrNode ? (

package/src/components/Card/index.tsx

@@ -6,7 +6,7 @@ import {card} from './index.css';
  * The `Card` component displays a simple rectangular container.
  *
  * @param props The props for the component.
- * @returns Card Row component.
+ * @returns The Card component.
  * @example
  * ```tsx
  * <Card>
@@ -27,7 +27,7 @@ export const Card = ({
    */
   readonly className?: string;
   /**
-   * The children of the component, that go inside the card.
+   * The children of the component that go inside the card.
    */
   readonly children: ReactNode;
 }) => <div className={classNames(card, className)}>{children}</div>;

package/src/components/Checkbox/index.css.ts

@@ -0,0 +1,14 @@
+import {style} from '@vanilla-extract/css';
+import {dimensions} from '../../css/dimensions.css';
+import {colors} from '../../index.css';
+
+export const checkbox = style({
+  display: 'inline-block',
+  boxShadow: colors.shadow + ' inset',
+  borderRadius: dimensions.radius,
+  border: colors.border,
+  padding: '0.5rem',
+  height: '2rem',
+  width: '2rem',
+  margin: '5px',
+});

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,67 @@
+import {LucideCheck} from 'lucide-react';
+import {useCallback, useState} from 'react';
+import {classNames} from '../../common/functions.tsx';
+import {Button} from '../Button/index.tsx';
+import {checkbox} from './index.css.ts';
+
+/**
+ * The `Checkbox` component displays a managed checkbox with an optional default
+ * checked state.
+ *
+ * @param props The props for the component.
+ * @returns The Checkbox component.
+ * @example
+ * ```tsx
+ * <Checkbox onChange={(value) => console.log(value)} />
+ * ```
+ * This example shows the Checkbox component without a default checked state.
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   initialChecked={true}
+ *   onChange={(value) => console.log(value)}
+ * />
+ * ```
+ * This example shows the Checkbox component with a default checked state.
+ * @icon Lucide.LucideCheckSquare
+ */
+export const Checkbox = ({
+  initialChecked,
+  onChange,
+  alt,
+  className,
+  ref,
+}: {
+  /**
+   * An optional value for whether the box is checked.
+   */
+  readonly initialChecked?: boolean;
+  /**
+   * A handler called when the text is changed.
+   */
+  readonly onChange?: (checked: boolean) => void;
+  /**
+   * Alternative text shown when the user hovers over the input.
+   */
+  readonly alt?: string;
+  /**
+   * An extra CSS class name for the component.
+   */
+  readonly className?: string;
+  ref?: React.RefObject<HTMLButtonElement | null>;
+}) => {
+  const [checked, setChecked] = useState(initialChecked ?? false);
+  const handleClick = useCallback(() => {
+    setChecked(!checked);
+    onChange?.(!checked);
+  }, [checked, onChange]);
+  return (
+    <Button
+      className={classNames(checkbox, className)}
+      onClick={handleClick}
+      alt={alt}
+      ref={ref}
+      icon={checked ? LucideCheck : undefined}
+    />
+  );
+};

package/src/components/Collapsible/index.tsx

@@ -93,7 +93,7 @@ export const Collapsible = ({
    */
   readonly className?: string;
   /**
-   * The children of the component, that go inside the collapsible section.
+   * The children of the component that go inside the collapsible section.
    */
   readonly children: ReactNode;
 }) => {

package/src/components/Detail/index.tsx

@@ -19,7 +19,7 @@ import {detailCell, detailRow, detailTable} from './index.css';
  * />
  * ```
  * This example shows the basic Collapsible component.
- * @icon Lucide.Table
+ * @icon Lucide.TableProperties
  */
 export const Detail = ({
   data,

package/src/components/Flyout/index.css.ts

@@ -0,0 +1,25 @@
+import {style} from '@vanilla-extract/css';
+import {colors} from '../../css/colors.css';
+import {dimensions} from '../../css/dimensions.css';
+
+export const wrapper = style({
+  position: 'relative',
+});
+
+export const flyout = style({
+  padding: dimensions.padding,
+  borderRadius: dimensions.radius,
+  boxShadow: colors.shadow,
+  border: colors.border,
+  height: 'fit-content',
+  overflow: 'auto',
+  backgroundColor: colors.background,
+  position: 'absolute',
+  top: 'calc(2rem + 2px)',
+  left: 0,
+});
+
+export const anchoredFlyout = style({
+  top: 'anchor(bottom)',
+  left: 'anchor(left)',
+});

package/src/components/Flyout/index.tsx

@@ -0,0 +1,148 @@
+import {
+  ComponentType,
+  useCallback,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+import {createPortal} from 'react-dom';
+import {getUniqueId} from 'tinybase';
+import {classNames} from '../../common/functions';
+import {
+  useCollapsibleIsOpen,
+  useSetCollapsibleIsOpenCallback,
+} from '../../stores/SessionStore';
+import {usePortal} from '../App';
+import {Button} from '../Button';
+import {buttonVariants} from '../Button/index.css';
+import {anchoredFlyout, flyout, wrapper} from './index.css';
+
+const supportsAnchors = CSS.supports('anchor-name', '--');
+
+/**
+ * The `Flyout` component displays a simple rectangular container that pops up
+ * out of an icon.
+ *
+ * @param props The props for the component.
+ * @returns Flyout Row component.
+ * @example
+ * ```tsx
+ * <Flyout icon={Lucide.LucideHelpCircle}>
+ *   <h1>Welcome</h1>
+ *   <Hr />
+ *   <p>We hope you enjoy TinyWidgets</p>
+ * </Flyout>
+ * ```
+ * This example shows a flyout from a simple button.
+ * @example
+ * ```tsx
+ * <Flyout
+ *   title="Toggle"
+ *   icon={Lucide.LucidePanelTopOpen}
+ *   openIcon={Lucide.LucidePanelTopClose}
+ *   startOpen={true}
+ * >
+ *   <p>We hope you enjoy TinyWidgets</p>
+ * </Flyout>
+ * ```
+ * This example shows a flyout, starting off open, with a title on the button,
+ * and with a different icon for open and closed states.
+ * @icon Lucide.LucideArrowDownSquare
+ */
+export const Flyout = ({
+  icon,
+  openIcon,
+  title,
+  variant,
+  startOpen,
+  id = '',
+  className,
+  children,
+}: {
+  /**
+   * An icon to click on to open up the flyout, and which must accept a
+   * className prop.
+   */
+  readonly icon: ComponentType<{className?: string}>;
+  /**
+   * An optional icon to show when the flyout is open, and which must accept a
+   * className prop.
+   */
+  readonly openIcon?: ComponentType<{className?: string}>;
+  /**
+   * An optional component, element, or string which renders the title of
+   * the button.
+   */
+  readonly title?: ComponentType | ReactNode;
+  /**
+   * A variant of the button used for the flyout, one of:
+   * - `default`
+   * - `icon`
+   * - `accent`
+   * - `ghost`
+   * - `item`
+   */
+  readonly variant?: keyof typeof buttonVariants;
+  /**
+   * Whether the flyout should start opened up.
+   */
+  readonly startOpen?: boolean;
+  /**
+   * An Id which will allow the state to be preserved between page reloads.
+   */
+  readonly id?: string;
+  /**
+   * An extra CSS class name for the component.
+   */
+  readonly className?: string;
+  /**
+   * The children of the component that go inside the card.
+   */
+  readonly children: ReactNode;
+}) => {
+  const storedIsOpen = useCollapsibleIsOpen(id) ?? startOpen;
+  const setStoredIsOpen = useSetCollapsibleIsOpenCallback(id);
+  const [stateIsOpen, setStateIsOpen] = useState(startOpen);
+
+  const isOpen = id ? storedIsOpen : stateIsOpen;
+  const setIsOpen = id ? setStoredIsOpen : setStateIsOpen;
+
+  const handleClick = useCallback(
+    () => setIsOpen(!isOpen),
+    [setIsOpen, isOpen],
+  );
+
+  const anchor = useMemo(() => '--' + getUniqueId(5), []);
+  const portal = usePortal();
+
+  const buttonProps = {
+    icon: isOpen ? (openIcon ?? icon) : icon,
+    title,
+    variant,
+    onClick: handleClick,
+  };
+  return supportsAnchors ? (
+    <>
+      <Button {...buttonProps} anchorName={anchor} />
+      {isOpen && portal
+        ? createPortal(
+            <div
+              className={classNames(flyout, anchoredFlyout, className)}
+              // @ts-expect-error positionAnchor not typed for React yet
+              style={{positionAnchor: anchor}}
+            >
+              {children}
+            </div>,
+            portal,
+          )
+        : null}
+    </>
+  ) : (
+    <div className={wrapper}>
+      <Button {...buttonProps} />
+      {isOpen ? (
+        <div className={classNames(flyout, className)}>{children}</div>
+      ) : null}
+    </div>
+  );
+};

package/src/components/Select/index.css.ts

@@ -12,4 +12,6 @@ export const select = style({
   boxShadow: colors.shadow,
   border: colors.border,
   backgroundColor: colors.background,
+  boxSizing: 'content-box',
+  height: '1.5rem',
 });

package/src/components/Select/index.tsx

@@ -58,17 +58,14 @@ export const Select = ({
   );
   return (
     <select
+      value={option}
       className={classNames(select, className)}
       onChange={handleChange}
       title={alt}
       ref={ref}
     >
       {Object.entries(options).map(([eachOption, label]) => (
-        <option
-          key={eachOption}
-          value={eachOption}
-          {...(eachOption === option ? {selected: true} : {})}
-        >
+        <option key={eachOption} value={eachOption}>
           {label}
         </option>
       ))}

package/src/components/Table/index.css.ts

@@ -0,0 +1,26 @@
+import {globalStyle, style} from '@vanilla-extract/css';
+import {colors} from '../../css/colors.css';
+
+export const table = style({
+  width: '100%',
+  height: '100%',
+  padding: 0,
+  borderCollapse: 'collapse',
+  tableLayout: 'fixed',
+});
+
+globalStyle(`${table} th, ${table} td`, {
+  overflow: 'hidden',
+  padding: '0.25rem 1rem',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  borderWidth: '1px 0',
+  borderStyle: 'solid',
+  borderColor: colors.borderColor,
+  textAlign: 'left',
+});
+
+globalStyle(`${table} th`, {
+  fontWeight: 'inherit',
+  backgroundColor: colors.backgroundHover,
+});

package/src/components/Table/index.tsx

@@ -0,0 +1,33 @@
+import type {ReactNode} from 'react';
+import {classNames} from '../../common/functions';
+import {table} from './index.css';
+
+/**
+ * The `Table` component displays a table with some simple default styling.
+ *
+ * @param props The props for the component.
+ * @returns The Table component.
+ * @example
+ * ```tsx
+ * <Table>
+ *   <tr><th>Column 1</th><th>Column 2</th></tr>
+ *   <tr><td>Cell A</td><td>Cell B</td></tr>
+ *   <tr><td>Cell C</td><td>Cell D</td></tr>
+ * </Table>
+ * ```
+ * This example shows a simple table.
+ * @icon Lucide.LucideTable2
+ */
+export const Table = ({
+  className,
+  children,
+}: {
+  /**
+   * An extra CSS class name for the component.
+   */
+  readonly className?: string;
+  /**
+   * The children (`tr` rows) that go inside the table.
+   */
+  readonly children: ReactNode;
+}) => <table className={classNames(table, className)}>{children}</table>;

package/src/components/TextInput/index.css.ts

@@ -6,10 +6,9 @@ export const wrapper = style({
   flexShrink: 0,
   alignSelf: 'center',
   position: 'relative',
+  display: 'inline-block',
 });
 
-export const wrapperWithIcon = style({});
-
 export const input = style({
   borderRadius: dimensions.radius,
   padding: '0.5rem',
@@ -20,6 +19,7 @@ export const input = style({
   boxShadow: colors.shadow + ' inset',
   border: colors.border,
   backgroundColor: colors.background,
+  lineHeight: '1.5rem',
 });
 
 export const inputWithIcon = style({
@@ -29,7 +29,7 @@ export const inputWithIcon = style({
 export const icon = style({
   position: 'absolute',
   left: `calc(${dimensions.icon} * .5)`,
-  top: `calc(${dimensions.icon} * .65)`,
+  top: `calc(${dimensions.icon} * .8)`,
   color: colors.foregroundDim,
   backgroundColor: colors.background,
   borderRight: `calc(${dimensions.icon} * .25) solid ${colors.background}`,

package/src/components/TextInput/index.tsx

@@ -1,13 +1,7 @@
 import {useCallback, useState, type ComponentType} from 'react';
 import {classNames} from '../../common/functions.tsx';
 import {iconSize} from '../../css/dimensions.css.ts';
-import {
-  icon,
-  input,
-  inputWithIcon,
-  wrapper,
-  wrapperWithIcon,
-} from './index.css.ts';
+import {icon, input, inputWithIcon, wrapper} from './index.css.ts';
 
 /**
  * The `TextInput` component displays a managed text input with an existing
@@ -76,7 +70,7 @@ export const TextInput = ({
     [onChange],
   );
   return (
-    <div className={classNames(wrapper, Icon && wrapperWithIcon)}>
+    <div className={wrapper}>
       {Icon ? <Icon className={classNames(iconSize, icon)} /> : null}
       <input
         value={text}