@veritone-ce/design-system 2.6.1-alpha.1 → 2.6.1-alpha.2

package/dist/cjs/Select/controlled.js

@@ -180,6 +180,7 @@ function ControlledSelect({
         matchAnchorWidth: true,
         onDismiss: () => {
           setOpen(false);
+          props.onBlur?.();
         },
         options: filteredOptions.map((option) => ({
           label: option.label,

package/dist/cjs/extras/markdown/index.js

@@ -1,8 +1,6 @@
 'use strict';
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var ReactMarkdown = require('react-markdown');
 var styles_module = require('./styles.module.scss.js');
@@ -245,4 +243,4 @@ function Markdown({
   );
 }
 
-exports.default = Markdown;
+exports.Markdown = Markdown;

package/dist/cjs/unstable/extras/forms/button.js

@@ -1,4 +1,5 @@
 'use strict';
+'use client';
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/dist/cjs/unstable/extras/forms/checkbox.js

@@ -0,0 +1,35 @@
+'use strict';
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactHookForm = require('react-hook-form');
+var shared = require('./shared.js');
+var index$1 = require('../../../Checkbox/index.js');
+var index = require('../../../FormControl/index.js');
+
+function FormCheckbox(props) {
+  const { controllerProps, formControlProps, inputProps } = shared.extractControllerProps(props);
+  const { label, ...restFormControlProps } = formControlProps;
+  const { field, fieldState } = reactHookForm.useController(controllerProps);
+  const errorMessage = shared.useFormErrorMessage(fieldState.error);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      disabled: field.disabled,
+      ...restFormControlProps,
+      error: errorMessage,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        index$1.default,
+        {
+          ...inputProps,
+          ...field,
+          label,
+          checked: field.value ?? false
+        }
+      )
+    }
+  );
+}
+
+exports.FormCheckbox = FormCheckbox;

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

@@ -2,14 +2,18 @@
 'use strict';
 
 var button = require('./button.js');
+var checkbox = require('./checkbox.js');
 var input = require('./input.js');
+var select = require('./select.js');
 var shared = require('./shared.js');
 var textarea = require('./textarea.js');
 
 
 
 exports.FormSubmitButton = button.FormSubmitButton;
+exports.FormCheckbox = checkbox.FormCheckbox;
 exports.FormInput = input.FormInput;
+exports.FormSelect = select.FormSelect;
 exports.extractControllerProps = shared.extractControllerProps;
 exports.useFormErrorMessage = shared.useFormErrorMessage;
 exports.FormTextarea = textarea.FormTextarea;

package/dist/cjs/unstable/extras/forms/input.js

@@ -1,4 +1,5 @@
 'use strict';
+'use client';
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/dist/cjs/unstable/extras/forms/select.js

@@ -0,0 +1,46 @@
+'use strict';
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactHookForm = require('react-hook-form');
+var shared = require('./shared.js');
+require('../../../Select/controlled.js');
+var uncontrolled = require('../../../Select/uncontrolled.js');
+require('react');
+var index = require('../../../FormControl/index.js');
+
+function FormSelect(props) {
+  const { controllerProps, formControlProps, inputProps } = shared.extractControllerProps(props);
+  const { field, fieldState } = reactHookForm.useController(controllerProps);
+  const { onChange, ref: _ref, ...restFieldProps } = field;
+  const errorMessage = shared.useFormErrorMessage(fieldState.error);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      disabled: field.disabled,
+      ...formControlProps,
+      error: errorMessage,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        uncontrolled.default,
+        {
+          ...inputProps,
+          ...restFieldProps,
+          value: field.value,
+          onChange: (e, newValue) => {
+            console.log(newValue);
+            onChange({
+              ...e,
+              target: {
+                ...e.target,
+                value: newValue
+              }
+            });
+          }
+        }
+      )
+    }
+  );
+}
+
+exports.FormSelect = FormSelect;

package/dist/cjs/unstable/extras/forms/shared.js

@@ -1,4 +1,5 @@
 'use strict';
+'use client';
 'use strict';
 
 var React = require('react');

package/dist/cjs/unstable/extras/forms/textarea.js

@@ -1,4 +1,5 @@
 'use strict';
+'use client';
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/dist/esm/Select/controlled.js

@@ -176,6 +176,7 @@ function ControlledSelect({
         matchAnchorWidth: true,
         onDismiss: () => {
           setOpen(false);
+          props.onBlur?.();
         },
         options: filteredOptions.map((option) => ({
           label: option.label,

package/dist/esm/extras/markdown/index.js

@@ -241,4 +241,4 @@ function Markdown({
   );
 }
 
-export { Markdown as default };
+export { Markdown };

package/dist/esm/unstable/extras/forms/button.js

@@ -1,4 +1,5 @@
 'use strict';
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useFormState } from 'react-hook-form';
 import { SuccessIcon } from '../../../Icon/internal.js';

package/dist/esm/unstable/extras/forms/checkbox.js

@@ -0,0 +1,33 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useController } from 'react-hook-form';
+import { extractControllerProps, useFormErrorMessage } from './shared.js';
+import Checkbox from '../../../Checkbox/index.js';
+import FormControl from '../../../FormControl/index.js';
+
+function FormCheckbox(props) {
+  const { controllerProps, formControlProps, inputProps } = extractControllerProps(props);
+  const { label, ...restFormControlProps } = formControlProps;
+  const { field, fieldState } = useController(controllerProps);
+  const errorMessage = useFormErrorMessage(fieldState.error);
+  return /* @__PURE__ */ jsx(
+    FormControl,
+    {
+      disabled: field.disabled,
+      ...restFormControlProps,
+      error: errorMessage,
+      children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          ...inputProps,
+          ...field,
+          label,
+          checked: field.value ?? false
+        }
+      )
+    }
+  );
+}
+
+export { FormCheckbox };

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

@@ -1,5 +1,7 @@
 'use strict';
 export { FormSubmitButton } from './button.js';
+export { FormCheckbox } from './checkbox.js';
 export { FormInput } from './input.js';
+export { FormSelect } from './select.js';
 export { extractControllerProps, useFormErrorMessage } from './shared.js';
 export { FormTextarea } from './textarea.js';

package/dist/esm/unstable/extras/forms/input.js

@@ -1,4 +1,5 @@
 'use strict';
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useController } from 'react-hook-form';
 import { extractControllerProps, useFormErrorMessage } from './shared.js';

package/dist/esm/unstable/extras/forms/select.js

@@ -0,0 +1,44 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useController } from 'react-hook-form';
+import { extractControllerProps, useFormErrorMessage } from './shared.js';
+import '../../../Select/controlled.js';
+import Select from '../../../Select/uncontrolled.js';
+import 'react';
+import FormControl from '../../../FormControl/index.js';
+
+function FormSelect(props) {
+  const { controllerProps, formControlProps, inputProps } = extractControllerProps(props);
+  const { field, fieldState } = useController(controllerProps);
+  const { onChange, ref: _ref, ...restFieldProps } = field;
+  const errorMessage = useFormErrorMessage(fieldState.error);
+  return /* @__PURE__ */ jsx(
+    FormControl,
+    {
+      disabled: field.disabled,
+      ...formControlProps,
+      error: errorMessage,
+      children: /* @__PURE__ */ jsx(
+        Select,
+        {
+          ...inputProps,
+          ...restFieldProps,
+          value: field.value,
+          onChange: (e, newValue) => {
+            console.log(newValue);
+            onChange({
+              ...e,
+              target: {
+                ...e.target,
+                value: newValue
+              }
+            });
+          }
+        }
+      )
+    }
+  );
+}
+
+export { FormSelect };

package/dist/esm/unstable/extras/forms/shared.js

@@ -1,4 +1,5 @@
 'use strict';
+'use client';
 import { useMemo } from 'react';
 
 function useFormErrorMessage(error) {

package/dist/esm/unstable/extras/forms/textarea.js

@@ -1,4 +1,5 @@
 'use strict';
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useController } from 'react-hook-form';
 import { extractControllerProps, useFormErrorMessage } from './shared.js';

package/dist/types/Select/controlled.d.ts

@@ -9,6 +9,7 @@ export type ControlledSelectProps<OptionValue, Multiple extends boolean | undefi
      */
     multiple: Multiple;
     onChange(event: React.SyntheticEvent<HTMLElement>, newValue: Multiple extends true ? SelectMultiValue<OptionValue> : SelectSingleValue<OptionValue>): void;
+    onBlur?(): void;
     onInputChange(event: React.SyntheticEvent<HTMLElement>, newValue: string): void;
     'data-pendo'?: string;
     tight?: boolean;

package/dist/types/Select/uncontrolled.d.ts

@@ -6,6 +6,7 @@ export type SelectProps<OptionValue, Multiple extends boolean | undefined> = Com
     value?: Multiple extends true ? SelectMultiValue<OptionValue> : SelectSingleValue<OptionValue>;
     inputValue?: string;
     onChange?(event: React.SyntheticEvent<HTMLElement>, newValue: Multiple extends true ? SelectMultiValue<OptionValue> : SelectSingleValue<OptionValue>): void;
+    onBlur?(): void;
     onInputChange?(event: React.SyntheticEvent<HTMLElement>, newValue: string, tight?: boolean): void;
     tight?: boolean;
 };

package/dist/types/extras/markdown/index.d.ts

@@ -23,5 +23,5 @@ export type MarkdownProps = Options & {
         [key in keyof DefaultComponentsType]?: string;
     };
 };
-export default function Markdown({ components, headerIncrement, paragraphIncrement, style, className, styles: componentStyles, classNames: componentClassNames, ...props }: MarkdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function Markdown({ components, headerIncrement, paragraphIncrement, style, className, styles: componentStyles, classNames: componentClassNames, ...props }: MarkdownProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,5 @@
+import { FieldValues, UseControllerProps } from 'react-hook-form';
+import type { FormControlProps } from '../../../FormControl/index.js';
+import { CheckboxProps } from '../../../Checkbox/index.js';
+export type FormCheckboxProps<FormValues extends FieldValues> = UseControllerProps<FormValues> & FormControlProps & Omit<CheckboxProps, 'checked'>;
+export declare function FormCheckbox<FormValues extends FieldValues>(props: FormCheckboxProps<FormValues>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,6 @@
 export * from './button.js';
+export * from './checkbox.js';
 export * from './input.js';
+export * from './select.js';
 export * from './shared.js';
 export * from './textarea.js';

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

@@ -0,0 +1,5 @@
+import { FieldValues, UseControllerProps } from 'react-hook-form';
+import type { FormControlProps } from '../../../FormControl/index.js';
+import { SelectProps } from '../../../Select/index.js';
+export type FormSelectProps<FormValues extends FieldValues, OptionValue, Multiple extends boolean | undefined> = UseControllerProps<FormValues> & FormControlProps & SelectProps<OptionValue, Multiple>;
+export declare function FormSelect<FormValues extends FieldValues, OptionValue, Multiple extends boolean | undefined>(props: FormSelectProps<FormValues, OptionValue, Multiple>): import("react/jsx-runtime").JSX.Element;

package/package.json

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