@veritone-ce/design-system 2.8.2 → 2.8.4

package/dist/cjs/Dialog/components.js

@@ -20,6 +20,7 @@ require('../styles/css-vars.js');
 var index$1 = require('../Button/index.js');
 var index = require('../Typography/index.js');
 var index$2 = require('../IconButton/index.js');
+var internal = require('../Icon/internal.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -221,7 +222,7 @@ const DialogCloseButton = React__namespace.forwardRef(function DialogCloseButton
     }
   );
 });
-const DialogCloseIconButton = React__namespace.forwardRef(function DialogCloseIconButton2(props, ref) {
+const DialogCloseIconButton = React__namespace.forwardRef(function DialogCloseIconButton2({ children = /* @__PURE__ */ jsxRuntime.jsx(internal.CloseIcon, {}), ...props }, ref) {
   const { dismiss } = state.useDialogContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     index$2.default,
@@ -231,7 +232,8 @@ const DialogCloseIconButton = React__namespace.forwardRef(function DialogCloseIc
       onClick: (e) => {
         dismiss();
         props.onClick?.(e);
-      }
+      },
+      children
     }
   );
 });

package/dist/cjs/Drawer/components.js

@@ -20,6 +20,7 @@ require('../styles/css-vars.js');
 var index$1 = require('../Button/index.js');
 var index = require('../Typography/index.js');
 var index$2 = require('../IconButton/index.js');
+var internal = require('../Icon/internal.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -262,7 +263,7 @@ const DrawerCloseButton = React__namespace.forwardRef(function DrawerCloseButton
     }
   );
 });
-const DrawerCloseIconButton = React__namespace.forwardRef(function DrawerCloseIconButton2(props, ref) {
+const DrawerCloseIconButton = React__namespace.forwardRef(function DrawerCloseIconButton2({ children = /* @__PURE__ */ jsxRuntime.jsx(internal.CloseIcon, {}), ...props }, ref) {
   const { dismiss } = state.useDrawerContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     index$2.default,
@@ -272,7 +273,8 @@ const DrawerCloseIconButton = React__namespace.forwardRef(function DrawerCloseIc
       onClick: (e) => {
         dismiss();
         props.onClick?.(e);
-      }
+      },
+      children
     }
   );
 });

package/dist/cjs/unstable/extras/dialogs/index.js

@@ -0,0 +1,48 @@
+'use strict';
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var components = require('../../../Dialog/components.js');
+var index = require('../../../ErrorBoundary/index.js');
+var vanilla = require('../../../bundled_modules/jotai/esm/vanilla.js');
+var react = require('../../../bundled_modules/jotai/esm/react.js');
+
+function createDialog(config, store = vanilla.getDefaultStore()) {
+  const dialogAtom = vanilla.atom(false);
+  return {
+    Component: createBoundDialogComponent(dialogAtom, config),
+    useDialog: () => react.useAtom(dialogAtom),
+    setOpen(open) {
+      store.set(dialogAtom, open);
+    }
+  };
+}
+function createBoundDialogComponent(dialogAtom, config) {
+  return function BoundDialog() {
+    const [open, setOpen] = react.useAtom(dialogAtom);
+    const cachedOpenRef = React.useRef(open);
+    React.useEffect(() => {
+      if (open !== false) {
+        cachedOpenRef.current = open;
+      }
+    }, [open]);
+    const cachedOpen = cachedOpenRef.current !== false ? cachedOpenRef.current : open;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      components.default,
+      {
+        ...config.dialogProps,
+        open: open !== false,
+        onDismiss: () => {
+          setOpen(false);
+          config.dialogProps?.onDismiss?.();
+        },
+        className: config.dialogProps?.className,
+        children: cachedOpen !== false && /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { fallback: config.errorFallback, children: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: config.loadingFallback, children: /* @__PURE__ */ jsxRuntime.jsx(config.Content, { open: cachedOpen }) }) }) }, JSON.stringify(cachedOpen))
+      }
+    );
+  };
+}
+
+exports.createDialog = createDialog;

package/dist/cjs/unstable/extras/drawers/index.js

@@ -5,7 +5,6 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var index_module = require('./index.module.scss.js');
-var internal = require('../../../Icon/internal.js');
 var components = require('../../../Drawer/components.js');
 var cx = require('../../../styles/cx.js');
 require('../../../styles/defaultThemeOptions.js');
@@ -38,7 +37,7 @@ function createBoundDrawerComponent(drawerAtom, config) {
       }
     }, [open]);
     const cachedOpen = cachedOpenRef.current !== false ? cachedOpenRef.current : open;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       components.default,
       {
         disableAutoFocus: true,
@@ -50,17 +49,7 @@ function createBoundDrawerComponent(drawerAtom, config) {
           config.drawerProps?.onDismiss?.();
         },
         className: cx.cx(index_module.default.drawer, config.drawerProps?.className),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            components.DrawerTitle,
-            {
-              container: "text",
-              actions: /* @__PURE__ */ jsxRuntime.jsx(components.DrawerCloseIconButton, { variant: "primary", children: /* @__PURE__ */ jsxRuntime.jsx(internal.CloseIcon, {}) }),
-              children: config.title
-            }
-          ),
-          cachedOpen !== false && /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { children: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { children: /* @__PURE__ */ jsxRuntime.jsx(config.Content, { open: cachedOpen }) }) }) }, JSON.stringify(cachedOpen))
-        ]
+        children: cachedOpen !== false && /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { fallback: config.errorFallback, children: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: config.loadingFallback, children: /* @__PURE__ */ jsxRuntime.jsx(config.Content, { open: cachedOpen }) }) }) }, JSON.stringify(cachedOpen))
       }
     );
   };

package/dist/esm/Dialog/components.js

@@ -16,6 +16,7 @@ import '../styles/css-vars.js';
 import Button from '../Button/index.js';
 import Typography from '../Typography/index.js';
 import IconButton from '../IconButton/index.js';
+import { CloseIcon } from '../Icon/internal.js';
 
 const Dialog = React.forwardRef(function Dialog2({
   children,
@@ -198,7 +199,7 @@ const DialogCloseButton = React.forwardRef(function DialogCloseButton2(props, re
     }
   );
 });
-const DialogCloseIconButton = React.forwardRef(function DialogCloseIconButton2(props, ref) {
+const DialogCloseIconButton = React.forwardRef(function DialogCloseIconButton2({ children = /* @__PURE__ */ jsx(CloseIcon, {}), ...props }, ref) {
   const { dismiss } = useDialogContext();
   return /* @__PURE__ */ jsx(
     IconButton,
@@ -208,7 +209,8 @@ const DialogCloseIconButton = React.forwardRef(function DialogCloseIconButton2(p
       onClick: (e) => {
         dismiss();
         props.onClick?.(e);
-      }
+      },
+      children
     }
   );
 });

package/dist/esm/Drawer/components.js

@@ -16,6 +16,7 @@ import '../styles/css-vars.js';
 import Button from '../Button/index.js';
 import Typography from '../Typography/index.js';
 import IconButton from '../IconButton/index.js';
+import { CloseIcon } from '../Icon/internal.js';
 
 const Drawer = React.forwardRef(function Drawer2({
   placement = "end",
@@ -239,7 +240,7 @@ const DrawerCloseButton = React.forwardRef(function DrawerCloseButton2(props, re
     }
   );
 });
-const DrawerCloseIconButton = React.forwardRef(function DrawerCloseIconButton2(props, ref) {
+const DrawerCloseIconButton = React.forwardRef(function DrawerCloseIconButton2({ children = /* @__PURE__ */ jsx(CloseIcon, {}), ...props }, ref) {
   const { dismiss } = useDrawerContext();
   return /* @__PURE__ */ jsx(
     IconButton,
@@ -249,7 +250,8 @@ const DrawerCloseIconButton = React.forwardRef(function DrawerCloseIconButton2(p
       onClick: (e) => {
         dismiss();
         props.onClick?.(e);
-      }
+      },
+      children
     }
   );
 });

package/dist/esm/unstable/extras/dialogs/index.js

@@ -0,0 +1,46 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect, Fragment, Suspense } from 'react';
+import Dialog from '../../../Dialog/components.js';
+import ErrorBoundary from '../../../ErrorBoundary/index.js';
+import { getDefaultStore, atom } from '../../../bundled_modules/jotai/esm/vanilla.js';
+import { useAtom } from '../../../bundled_modules/jotai/esm/react.js';
+
+function createDialog(config, store = getDefaultStore()) {
+  const dialogAtom = atom(false);
+  return {
+    Component: createBoundDialogComponent(dialogAtom, config),
+    useDialog: () => useAtom(dialogAtom),
+    setOpen(open) {
+      store.set(dialogAtom, open);
+    }
+  };
+}
+function createBoundDialogComponent(dialogAtom, config) {
+  return function BoundDialog() {
+    const [open, setOpen] = useAtom(dialogAtom);
+    const cachedOpenRef = useRef(open);
+    useEffect(() => {
+      if (open !== false) {
+        cachedOpenRef.current = open;
+      }
+    }, [open]);
+    const cachedOpen = cachedOpenRef.current !== false ? cachedOpenRef.current : open;
+    return /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        ...config.dialogProps,
+        open: open !== false,
+        onDismiss: () => {
+          setOpen(false);
+          config.dialogProps?.onDismiss?.();
+        },
+        className: config.dialogProps?.className,
+        children: cachedOpen !== false && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: config.errorFallback, children: /* @__PURE__ */ jsx(Suspense, { fallback: config.loadingFallback, children: /* @__PURE__ */ jsx(config.Content, { open: cachedOpen }) }) }) }, JSON.stringify(cachedOpen))
+      }
+    );
+  };
+}
+
+export { createDialog };

package/dist/esm/unstable/extras/drawers/index.js

@@ -1,10 +1,9 @@
 'use strict';
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useRef, useEffect, Fragment, Suspense } from 'react';
 import styles from './index.module.scss.js';
-import { CloseIcon } from '../../../Icon/internal.js';
-import Drawer, { DrawerTitle, DrawerCloseIconButton } from '../../../Drawer/components.js';
+import Drawer from '../../../Drawer/components.js';
 import { cx } from '../../../styles/cx.js';
 import '../../../styles/defaultThemeOptions.js';
 import '@capsizecss/core';
@@ -36,7 +35,7 @@ function createBoundDrawerComponent(drawerAtom, config) {
       }
     }, [open]);
     const cachedOpen = cachedOpenRef.current !== false ? cachedOpenRef.current : open;
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       Drawer,
       {
         disableAutoFocus: true,
@@ -48,17 +47,7 @@ function createBoundDrawerComponent(drawerAtom, config) {
           config.drawerProps?.onDismiss?.();
         },
         className: cx(styles.drawer, config.drawerProps?.className),
-        children: [
-          /* @__PURE__ */ jsx(
-            DrawerTitle,
-            {
-              container: "text",
-              actions: /* @__PURE__ */ jsx(DrawerCloseIconButton, { variant: "primary", children: /* @__PURE__ */ jsx(CloseIcon, {}) }),
-              children: config.title
-            }
-          ),
-          cachedOpen !== false && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(config.Content, { open: cachedOpen }) }) }) }, JSON.stringify(cachedOpen))
-        ]
+        children: cachedOpen !== false && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: config.errorFallback, children: /* @__PURE__ */ jsx(Suspense, { fallback: config.loadingFallback, children: /* @__PURE__ */ jsx(config.Content, { open: cachedOpen }) }) }) }, JSON.stringify(cachedOpen))
       }
     );
   };

package/dist/types/unstable/extras/dialogs/index.d.ts

@@ -0,0 +1,19 @@
+import { createStore } from 'jotai';
+import { ReactNode } from 'react';
+import { type DialogProps } from '../../../Dialog/index.js';
+export type DialogAtom<O> = O | false;
+export type OpenDialogContentProps<O> = {
+    open: O;
+};
+export type OpenDialogContentComponent<O> = (props: OpenDialogContentProps<O>) => ReactNode;
+export type DialogConfig<O> = {
+    Content: OpenDialogContentComponent<O>;
+    loadingFallback?: ReactNode;
+    errorFallback?: ReactNode;
+    dialogProps?: Partial<Omit<DialogProps, 'open' | 'children'>>;
+};
+export declare function createDialog<O = true>(config: DialogConfig<O>, store?: ReturnType<typeof createStore>): {
+    Component: () => import("react/jsx-runtime").JSX.Element;
+    useDialog: () => [false | Awaited<O>, (args_0: DialogAtom<O> | ((prev: DialogAtom<O>) => DialogAtom<O>)) => void];
+    setOpen(open: DialogAtom<O>): void;
+};

package/dist/types/unstable/extras/drawers/index.d.ts

@@ -7,8 +7,9 @@ export type OpenDrawerContentProps<O> = {
 };
 export type OpenDrawerContentComponent<O> = (props: OpenDrawerContentProps<O>) => ReactNode;
 export type DrawerConfig<O> = {
-    title: ReactNode;
     Content: OpenDrawerContentComponent<O>;
+    loadingFallback?: ReactNode;
+    errorFallback?: ReactNode;
     drawerProps?: Partial<Omit<DrawerProps, 'open' | 'children'>>;
 };
 export declare function createDrawer<O = true>(config: DrawerConfig<O>, store?: ReturnType<typeof createStore>): {

package/dist/types/unstable/extras/forms/select.d.ts

@@ -4,5 +4,5 @@ import { SelectProps } from '../../../Select/index.js';
 import type { ComponentType } from 'react';
 export type FormSelectControlledProps<OptionValue, Multiple extends boolean | undefined> = Pick<SelectProps<OptionValue, Multiple>, 'value' | 'onChange'>;
 export type FormSelectProps<TFieldValues extends FieldValues, OptionValue, Multiple extends boolean | undefined, S extends FormSelectControlledProps<OptionValue, Multiple>, TName extends FieldPathByValue<TFieldValues, OptionValue | OptionValue[]> = FieldPathByValue<TFieldValues, OptionValue | OptionValue[]>> = UseControllerProps<TFieldValues, TName> & FormControlProps & S;
-export declare function formSelectFactory<OptionValue, Multiple extends boolean | undefined = boolean | undefined, S extends FormSelectControlledProps<OptionValue, Multiple> = FormSelectControlledProps<OptionValue, Multiple>>(Component: ComponentType<S>): <TFieldValues extends FieldValues, TName extends FieldPathByValue<TFieldValues, OptionValue | OptionValue[]> = FieldPathByValue<TFieldValues, OptionValue | OptionValue[]>>(props: FormSelectProps<TFieldValues, OptionValue, Multiple, S, TName>) => import("react/jsx-runtime").JSX.Element;
-export declare const FormSelect: <TFieldValues extends FieldValues, TName extends FieldPathByValue<TFieldValues, unknown> = FieldPathByValue<TFieldValues, unknown>>(props: FormSelectProps<TFieldValues, unknown, boolean | undefined, SelectProps<unknown, boolean | undefined>, TName>) => import("react/jsx-runtime").JSX.Element;
+export declare function formSelectFactory<OptionValue, S extends FormSelectControlledProps<OptionValue, boolean | undefined> = FormSelectControlledProps<OptionValue, boolean | undefined>>(Component: ComponentType<S>): <Multiple extends boolean | undefined, TFieldValues extends FieldValues, TName extends FieldPathByValue<TFieldValues, OptionValue | OptionValue[]> = FieldPathByValue<TFieldValues, OptionValue | OptionValue[]>>(props: FormSelectProps<TFieldValues, OptionValue, Multiple, S, TName>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormSelect: <Multiple extends boolean | undefined, TFieldValues extends FieldValues, TName extends FieldPathByValue<TFieldValues, unknown> = FieldPathByValue<TFieldValues, unknown>>(props: FormSelectProps<TFieldValues, unknown, Multiple, SelectProps<unknown, boolean | undefined>, TName>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/unstable/extras/forms/upload.d.ts

@@ -1,7 +1,7 @@
 import { type FieldPathByValue, FieldValues, UseControllerProps } from 'react-hook-form';
 import type { FormControlProps } from '../../../FormControl/index.js';
 import { type FileLike, type FileState, type UploadDropzoneProps, type UploadListItemState, type UploadListProps } from '../../../FileUploader/index.js';
-type FilesFieldPath<TFieldValues extends FieldValues, F extends FileLike = FileLike> = FieldPathByValue<TFieldValues, F[]>;
+type FilesFieldPath<TFieldValues extends FieldValues, F extends FileLike = FileLike> = FieldPathByValue<TFieldValues, F | F[]>;
 type FormUploadDropzoneInputProps = Partial<UploadDropzoneProps> & Omit<UploadDropzoneProps, 'onDrop'>;
 export type FormUploadDropzoneProps<TFieldValues extends FieldValues, TName extends FilesFieldPath<TFieldValues> = FilesFieldPath<TFieldValues>> = UseControllerProps<TFieldValues, TName> & FormControlProps & FormUploadDropzoneInputProps;
 export declare function FormUploadDropzone<TFieldValues extends FieldValues, TName extends FilesFieldPath<TFieldValues> = FilesFieldPath<TFieldValues>>(props: FormUploadDropzoneProps<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "2.8.2",
+  "version": "2.8.4",
   "private": false,
   "description": "Design System for Veritone CE",
   "keywords": [