tinywidgets 0.0.5 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinywidgets",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "author": "jamesgpearce",
   "repository": "github:tinyplex/tinywidgets",
   "module": "index.ts",
@@ -18,7 +18,7 @@
     "@vanilla-extract/css": "^1.15.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tinybase": "^5.3.0-beta.1"
+    "tinybase": "^5.3.0-beta.2"
   },
   "exports": {
     ".": "./index.ts",

package/src/Collapsible/index.tsx

@@ -1,8 +1,8 @@
 /** @jsx createElement */
 
-import type { ComponentType, ReactNode } from 'react';
-import { ChevronDown, ChevronRight } from 'lucide-react';
-import { Button } from '../Button/index.tsx';
+import type {ComponentType, ReactNode} from 'react';
+import {ChevronDown, ChevronRight} from 'lucide-react';
+import {Button} from '../Button/index.tsx';
 import {
   classNames,
   createElement,
@@ -27,6 +27,7 @@ export const Collapsible = ({
   icon: Icon,
   label = <div />,
   labelRight = <div />,
+  startOpen = false,
   className,
   children,
 }: {
@@ -34,19 +35,20 @@ export const Collapsible = ({
   icon?: ComponentType<{className?: string}>;
   label?: ReactNode;
   labelRight?: ReactNode;
+  startOpen?: boolean;
   className?: string;
   children: ReactNode;
 }) => {
   // State is in session Store if id is present, otherwise here in component.
-  const storedIsOpen = useCollapsibleOpen(id) ?? false;
+  const storedIsOpen = useCollapsibleOpen(id) ?? startOpen;
   const setStoredIsOpen = useSetCollapsibleOpen(id);
-  const [stateIsOpen, setStateIsOpen] = useState(false);
+  const [stateIsOpen, setStateIsOpen] = useState(startOpen);
 
   const isOpen = id ? storedIsOpen : stateIsOpen;
   const setIsOpen = id ? setStoredIsOpen : setStateIsOpen;
 
   const [render, setRender] = useState(isOpen);
-  const timer = useRef<NodeJS.Timer>();
+  const timer = useRef<Timer>();
 
   const toggle = useCallback(() => {
     setIsOpen(!isOpen);

package/src/stores/LocalStore.tsx

@@ -1,5 +1,5 @@
-import { createStore } from 'tinybase';
-import { createLocalPersister } from 'tinybase/persisters/persister-browser';
+import {createStore} from 'tinybase';
+import {createLocalPersister} from 'tinybase/persisters/persister-browser';
 import {
   useCreatePersister,
   useCreateStore,
@@ -7,11 +7,11 @@ import {
   useSetValueCallback,
   useValue,
 } from 'tinybase/ui-react';
-import { useEffect } from '../';
+import {useEffect} from '../';
 
 const PREFERS_DARK = matchMedia?.('(prefers-color-scheme: dark)');
 
-const LOCAL_STORE = 'uiLocal';
+const LOCAL_STORE = 'tinywidgets/Local';
 const DARK_PREFERENCE_VALUE = 'darkPreference';
 const DARK_CHOICE_VALUE = 'darkChoice';
 

package/src/stores/SessionStore.tsx

@@ -10,7 +10,7 @@ import {
   useValue,
 } from 'tinybase/ui-react';
 
-const SESSION_STORE = 'uiSession';
+const SESSION_STORE = 'tinywidgets/Session';
 
 const COLLAPSIBLE_TABLE = 'collapsible';
 const COLLAPSIBLE_OPEN_CELL = 'open';