feat: Added use-disclosure-data.

Author: Blankeos

README.md

@@ -62,7 +62,7 @@ Based on the [@mantine/hooks](https://github.com/mantinedev/mantine/tree/master/
 - [x] ~~use-debounced-state~~ use-debounced-signal
 - [x] use-debounced-value
 - [x] use-did-update
-- [ ] use-disclosure
+- [x] use-disclosure (✨ Improved, slightly better than mantine thanks to `set` for passing to stuff like `onOpenChange`)
 - [x] use-document-title
 - [x] use-document-visibility
 - [ ] use-event-listener
@@ -127,7 +127,8 @@ Based on the [@mantine/hooks](https://github.com/mantinedev/mantine/tree/master/
 
 ### New in Bagon Hooks
 
-- [x] use-keyboard
+- [x] use-keyboard (✨ Runs even on single keys as opposed useHotkeys that only runs on combinations, so more general usecases)
+- [x] use-disclosure-data (✨ Improved, an alternative to use-disclosure for data-driven disclosures. I use it)
 
 ### Others
 

dev/components/examples/use-disclosure-data/use-disclosure-data.code.mdx

@@ -0,0 +1,50 @@
+```tsx
+import { useDisclosureData } from 'bagon-hooks';
+
+import { For, Show } from 'solid-js';
+
+export function UseDisclosureDataExample() {
+  const items = [
+    { id: '1', title: 'Item 1' },
+    { id: '2', title: 'Item 2' },
+  ];
+
+  // If you have multiple modals,
+  // I recommend prefixing `data`, `open`, `handlers` with the same name.
+  // i.e. editModalData, editModalOpen, editModalHandlers
+  const [data, open, handlers] = useDisclosureData<(typeof items)[number]>(null);
+
+  return (
+    <div class="flex h-full w-full items-center justify-center gap-x-1 rounded-md border p-3 py-10 text-center text-sm">
+      <ul class="flex flex-col gap-2">
+        <For each={items}>
+          {item => (
+            <li>
+              <button
+                onClick={() => {
+                  handlers.open(item);
+                }}
+                class="rounded bg-blue-500 px-4 py-2 text-white"
+              >
+                Open Dialog for {item.title}
+              </button>
+            </li>
+          )}
+        </For>
+      </ul>
+
+      <Show when={open()}>
+        <div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+          <div class="rounded-lg bg-white p-6 shadow-lg">
+            <h2 class="mb-4 text-lg font-bold">{data()?.title || 'Dialog Title'}</h2>
+            <p class="mb-4">This is an example dialog using useDisclosure and data: {data()?.id}</p>
+            <button onClick={handlers.close} class="rounded bg-gray-500 px-4 py-2 text-white">
+              Close
+            </button>
+          </div>
+        </div>
+      </Show>
+    </div>
+  );
+}
+```

dev/components/examples/use-disclosure-data/use-disclosure-data.example.tsx

@@ -0,0 +1,61 @@
+import { useDisclosureData } from 'src';
+
+import { For, Show } from 'solid-js';
+import { useMDXComponents } from 'solid-jsx';
+import { ExampleBase } from '../example-base';
+import Code from './use-disclosure-data.code.mdx';
+
+export function UseDisclosureDataExample() {
+  const items = [
+    { id: '1', title: 'Item 1' },
+    { id: '2', title: 'Item 2' },
+  ];
+
+  // If you have multiple modals,
+  // I recommend prefixing `data`, `open`, `handlers` with the same name.
+  // i.e. editModalData, editModalOpen, editModalHandlers
+  const [data, open, handlers] = useDisclosureData<(typeof items)[number]>(null);
+
+  // @ts-ignore
+  const components: any = useMDXComponents();
+  return (
+    <ExampleBase
+      title="useDisclosureData"
+      description="For complex usecases where we only need to pass data to the disclosure. I.e. Edit Modals, Confirm Alerts with details about the item clicked, etc."
+      code={<Code components={components} />}
+    >
+      <div class="flex h-full w-full items-center justify-center gap-x-1 rounded-md border p-3 py-10 text-center text-sm">
+        <ul class="flex flex-col gap-2">
+          <For each={items}>
+            {item => (
+              <li>
+                <button
+                  onClick={() => {
+                    handlers.open(item);
+                  }}
+                  class="rounded bg-blue-500 px-4 py-2 text-white"
+                >
+                  Open Dialog for {item.title}
+                </button>
+              </li>
+            )}
+          </For>
+        </ul>
+
+        <Show when={open()}>
+          <div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+            <div class="rounded-lg bg-white p-6 shadow-lg">
+              <h2 class="mb-4 text-lg font-bold">{data()?.title || 'Dialog Title'}</h2>
+              <p class="mb-4">
+                This is an example dialog using useDisclosure and data: {data()?.id}
+              </p>
+              <button onClick={handlers.close} class="rounded bg-gray-500 px-4 py-2 text-white">
+                Close
+              </button>
+            </div>
+          </div>
+        </Show>
+      </div>
+    </ExampleBase>
+  );
+}

dev/pages/index/+Page.tsx

@@ -9,6 +9,7 @@ import { UseDebouncedCallbackExample } from 'dev/components/examples/use-debounc
 import { UseDebouncedSignalExample } from 'dev/components/examples/use-debounced-signal/use-debounced-signal.example';
 import { UseDebouncedValueExample } from 'dev/components/examples/use-debounced-value/use-debounced-value.example';
 import { UseDidUpdateExample } from 'dev/components/examples/use-did-update/use-did-update.example';
+import { UseDisclosureDataExample } from 'dev/components/examples/use-disclosure-data/use-disclosure-data.example';
 import { UseDisclosureExample } from 'dev/components/examples/use-disclosure/use-disclosure.example';
 import { UseDocumentTitleExample } from 'dev/components/examples/use-document-title/use-document-title.example';
 import { UseDocumentVisibilityExample } from 'dev/components/examples/use-document-visibility/use-document-visibility.example';
@@ -189,6 +190,10 @@ export default function HomePage() {
       title: 'useDisclosure',
       example: <UseDisclosureExample />,
     },
+    {
+      title: 'useDisclosureData',
+      example: <UseDisclosureDataExample />,
+    },
   ];
 
   const filteredList = createMemo(() => {

src/use-disclosure/use-disclosure.ts

@@ -1,5 +1,24 @@
 import { createSignal } from 'solid-js';
 
+/**
+ * For simple usecases where we only need to open/close a disclosure. I.e. accordions, modals, confirm yes or no alerts, etc.
+ *
+ * Example:
+ * ```
+ * const [isOpen, actions] = useDisclosure(false);
+ *
+ * return (
+ *   <div>
+ *     <button onClick={actions.open}>Open</button>
+ *     <button onClick={actions.close}>Close</button>
+ *     <Modal onOpenChange={(open) => {
+ *       if (open) actions.open();
+ *       else actions.close();
+ *     }} />
+ *   </div>
+ * )
+ * ```
+ */
 export function useDisclosure(
   initialState = false,
   callbacks?: { onOpen?: () => void; onClose?: () => void },
@@ -31,5 +50,71 @@ export function useDisclosure(
     opened() ? close() : open();
   };
 
-  return [opened, { open, close, toggle }] as const;
+  const set = (value: boolean) => {
+    setOpened(value);
+  };
+
+  return [opened, { open, close, toggle, set }] as const;
+}
+
+/**
+ * For complex usecases where we only need to pass data to the disclosure. I.e. Edit Modals, Confirm Alerts with details about the item clicked, etc.
+ *
+ * Example:
+ * ```
+ * const [editModalData, editModalIsOpen, editModalActions] = useDisclosureData<{ id: string, title: string }>(false);
+ *
+ * return (
+ *   <div>
+ *     <button onClick={() => actions.open({ id: "1", title: "Item 1" })}>Open</button>
+ *     <button onClick={actions.close}>Close</button>
+ *     <Modal
+ *       onOpenChange={(open) => {
+ *         if (open) actions.open();
+ *         else actions.close();
+ *       }}
+ *     >
+ *       Do you really want to delete {editModalData?.title}?
+ *       <button
+ *         onClick={() => {
+ *           // delete(editModalData?.id);
+ *           editModalActions.close();
+ *         }}
+ *       >
+ *         Yes
+ *       </button>
+ *     </Modal>
+ *   </div>
+ * )
+ * ```
+ */
+export function useDisclosureData<T>(
+  initialData: T | null = null,
+  initialIsOpen: boolean = false,
+  options?: {
+    onOpen?: () => void;
+    onClose?: () => void;
+    dataDisappearDelay?: number;
+  },
+) {
+  const [disclosureData, setDisclosureData] = createSignal<T | null>(initialData);
+  const [isOpen, setIsOpen] = createSignal<boolean>(initialIsOpen);
+
+  const open = (data: T | null) => {
+    setIsOpen(true);
+    setDisclosureData(() => data);
+    options?.onOpen?.();
+  };
+
+  const close = () => {
+    setIsOpen(false);
+
+    setTimeout(() => {
+      setDisclosureData(null);
+    }, options?.dataDisappearDelay ?? 250); // Only remove data after 250ms (usually when a modal has closed after animation)
+
+    options?.onClose?.();
+  };
+
+  return [disclosureData, isOpen, { open, close }] as const;
 }