@northlight/ui 2.2.0 → 2.4.0

package/dist/ts/types.d.ts

@@ -1,8 +1,8 @@
 import { AccordionProps, AccordionButtonProps, AccordionPanelProps, AccordionItemProps, AvatarProps as AvatarProps$1, AlertProps as AlertProps$1, AspectRatioProps, StackProps, BadgeProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, StackDirection, IconButtonProps as IconButtonProps$1, InputProps, FlexProps, BoxProps, TagProps as TagProps$1, IconProps as IconProps$1, SystemStyleObject, HeadingProps as HeadingProps$1, TextProps, FormLabelProps as FormLabelProps$1, Heading, Text, ModalProps as ModalProps$1, NumberInputProps as NumberInputProps$1, PinInputProps as PinInputProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SpinnerProps as SpinnerProps$1, SwitchProps as SwitchProps$1, TabsProps as TabsProps$1, TabPanelProps as TabPanelProps$1, TextareaProps as TextareaProps$1, UseToastOptions as UseToastOptions$1, FadeProps as FadeProps$1, ScaleFadeProps as ScaleFadeProps$1, SlideProps as SlideProps$1, SlideFadeProps as SlideFadeProps$1, CollapseProps as CollapseProps$1, TabListProps, TabProps, LinkProps, GridProps, GridItemProps, EditableProps as EditableProps$1 } from '@chakra-ui/react';
 export { AbsoluteCenter, AccordionButtonProps, AccordionIcon, AccordionIconProps, AccordionItemProps, AccordionPanelProps, AccordionProps, AlertDescription, AlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertIcon, AlertTitle, AspectRatioProps, BadgeProps, Box, BoxProps, BreadcrumbItem as Breadcrumb, BreadcrumbLink, BreadcrumbSeparator, Breadcrumb as Breadcrumbs, ButtonGroup, Card, CardBody, CardFooter, CardHeader, Center, Modal as ChakraModal, CheckboxGroup, Circle, CircularProgress, CircularProgressLabel, CloseButton, Code, Container, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay, Editable, EditableInput, EditablePreview, Flex, FormControl, FormErrorMessage, FormHelperText, Grid, GridItem, HStack, Heading, Hide, Highlight, Image, Input, InputAddon, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Kbd, Link, LinkOverlay, List, ListIcon, ListItem, Menu, MenuButton, MenuCommand, MenuDivider, MenuGroup, MenuIcon, MenuItem, MenuItemOption, MenuList, MenuOptionGroup, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, NumberDecrementStepper, NumberIncrementStepper, OrderedList, PinInputField, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, RangeSlider, RangeSliderFilledTrack, RangeSliderMark, RangeSliderThumb, RangeSliderTrack, Show, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, Slider, SliderFilledTrack, SliderMark, SliderThumb, SliderTrack, Spacer, Stack, StackDivider, Stat, StatArrow, StatGroup, StatHelpText, StatLabel, StatNumber, TabIndicator as StepIndicator, TabPanels as StepPanels, Tab, TabIndicator, TabList, TabPanels, Table, TableCaption, TableContainer, TagCloseButton, TagLabel, TagLeftIcon, TagRightIcon, Tbody, Td, Text, Tfoot, Th, Thead, Tooltip, Tr, UnorderedList, VStack, VisuallyHidden, VisuallyHiddenInput, Wrap, WrapItem, useBoolean, useBreakpoint, useBreakpointValue, useClipboard, useControllableProp, useControllableState, useDisclosure, useEditable, useEditableControls, useEditableState, useInterval, useMediaQuery, useMergeRefs, useNumberInput, useOutsideClick, usePrefersReducedMotion, useRadio, useRadioGroup, useTab, useTabs, useTheme, useToken } from '@chakra-ui/react';
 import * as React$1 from 'react';
-import React__default, { ChangeEvent, ComponentType, InputHTMLAttributes, ReactNode, ReactElement } from 'react';
-import { RegisterOptions, FieldValues, UseFormReturn as UseFormReturn$1, SetValueConfig, ControllerRenderProps, UseFormProps, FieldError, Merge, FieldErrorsImpl } from 'react-hook-form';
+import React__default, { ChangeEvent, ComponentType, InputHTMLAttributes, ReactNode, ReactElement, RefObject } from 'react';
+import { RegisterOptions, FieldValues, UseFormReturn as UseFormReturn$1, SetValueConfig, FieldPath, Control, ControllerRenderProps, UseFormProps, FieldError, Merge, FieldErrorsImpl } from 'react-hook-form';
 export { useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
 import { CheckboxGroupState } from '@react-stately/checkbox';
 import { RadioGroupState } from '@react-stately/radio';
@@ -2143,8 +2143,8 @@ type UseFormReturn<T extends FieldValues> = UseFormReturn$1<T>;
 type Maybe<T> = T | undefined;
 type CustomSubmitHandler<TFieldValues extends FieldValues> = (data: TFieldValues, event: UseFormReturn<TFieldValues>) => any | Promise<any>;
 type SetValueOptionsType = Maybe<SetValueConfig>;
-interface FieldProps {
-    name: string;
+interface FieldProps<FormValues extends FieldValues = FieldValues, FieldName extends FieldPath<FormValues> = FieldPath<FormValues>> {
+    name: FieldName;
     /** Label displayed as text beside or under/over
      * (depending on direction prop) over children. Recommended for accesibility */
     label?: string;
@@ -2161,7 +2161,12 @@ interface FieldProps {
      * for more information view https://react-hook-form.com/api/useform/register/ docs. (Whatever you put into the validate object will be put as the second options arguments on the react hook form register method)
      * */
     validate?: RegisterOptions;
-    children: (field: ControllerRenderProps<FieldValues, string>, methods: UseFormReturn<FieldValues>) => JSX.Element | JSX.Element;
+    /**
+    * The value is taken from the formContext by default,
+    * but may be manually specified to ensure field type inference.
+    * */
+    control?: Control<FormValues>;
+    children: (field: ControllerRenderProps<FormValues, FieldName>, methods: UseFormReturn<FormValues>) => JSX.Element;
 }
 interface FormProps<FormValues extends FieldValues> {
     /** This should contain an object with the name of the fields and their default values. */
@@ -2468,7 +2473,6 @@ type SelectFieldProps<T> = Omit<SelectProps<T>, 'onChange'> & InputFieldProps &
  * <Select
  *   options={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]}
  *   onChange={(value, action) => console.log('Selected:', value)}
- *   isClearable={ true }
  * />
  * ?)
  *
@@ -3227,8 +3231,42 @@ declare const Form: <FormValues extends FieldValues>(props: FormProps<FormValues
  * }
  * ?)
  *
+ * @example (Example)
+ * ## Type-safety
+ * There are multiple ways to provide types for
+ * the field callback values. To ensure that each
+ * component within the field receives the correct
+ * value, it's essential to make the field aware
+ * of the form state values. When the Field component
+ * does not receive any types, the "value" callback
+ * argument will have the type of "any".
+ * <br /><br />
+ * ### Passing down the control prop (Recommended)
+ * (?
+ * <Form initialValues={{username: 'Alex'}}>
+ * {
+ * ({ control }) => {
+ * <Box p="2">
+ * <Field name="username" label="Input name" control={ control }>
+ * {({value, onChange}) => ( // "value" has type of "string"
+ * <Input value={value} onChange={onChange} />
+ * )}
+ * </Field>
+ * </Box>
+ * }
+ * }
+ * </Form>
+ * ?)
+ * <br /><br />
+ * ### Specifying generic arguments
+ * You can also specify generic arguments on the Field
+ * component to ensure that "value" has a valid type.
+ * The passed generic type combined with the valid
+ * "name" property ensures that "value" has the expected
+ * type received from the generic type:
+ * `<Field<MyFormBody> name="username">...</Field>`
  */
-declare function Field({ name, label, children, direction, isRequired, noLabelConnection, validate, }: FieldProps): JSX.Element;
+declare function Field<FormValues extends FieldValues = FieldValues, FieldName extends FieldPath<FormValues> = FieldPath<FormValues>>({ name, label, children, direction, isRequired, noLabelConnection, validate, control: passedControl, }: FieldProps<FormValues, FieldName>): JSX.Element;
 
 declare const useSetValueRefreshed: () => (name: any, value: any, options: SetValueOptionsType) => void;
 
@@ -3469,6 +3507,14 @@ declare const useDebounce: <T>(value: T, delay: number) => T;
 
 declare const useLoadingMessage: (prefix?: string, delay?: number) => string;
 
+interface Message {
+    content: string;
+    role: string;
+    type?: string;
+    data?: string;
+}
+declare const useScrollToBottom: (scrollView: RefObject<HTMLDivElement>, messages: Message[]) => void;
+
 declare const useArrowFocus: (columns: number) => {
     defaultArrows: (e: any) => void;
     focusPrevious: ({ repeat, wrap, }?: {
@@ -3501,4 +3547,4 @@ declare const useSelectCallbacks: <T extends BasicOption>({ onChange, onAdd, onR
 declare const theme: Record<string, any>;
 declare const tottTheme: Record<string, any>;
 
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertProps, AlertVariants, AspectRatio, AsyncError, AsyncErrorProps, Avatar, AvatarBadgeProps, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BasicOption, Blinker, BlinkerProps, BlockVariant, BlockVariantColorTuple, Blockquote, BodyType, Button, ButtonProps, ButtonVariants, Capitalized, Carousel, Checkbox, CheckboxField, CheckboxFieldProps, CheckboxProps, CheckboxVariants, ChildrenType, Clickable, ClickableProps, ClipboardInput, ClipboardInputProps, Collapse, CollapseProps, Color, ColorButtonProps, ColorGrade, ColorPicker, ColorPickerField, ColorPickerFieldProps, ColorPickerProps, ColorShades, ColorsExpandButtonProps, ConfirmDeleteModalProps, CurrentTheme, CustomContainerPropsType, CustomElementType, CustomFlipButtonProps, CustomFlipButtonPropsType, CustomTheme, DatePicker, DatePickerField, DatePickerFieldProps, DatePickerProps, DateRange, DateRangePicker, DateRangePickerField, DateRangePickerFieldProps, DateRangePickerProps, DragAndDrop, DragHandle, DragHandleProps, DragItem, DragItemProps, Draggable, DraggableProps, DropZone, DropZoneProps, Droppable, DroppableProps, DurationType, EditableControlsProps, EditableProps, EditableSizes, EditableText, Fade, FadeProps, FastGrid, FastGridProps, FastList, FastListProps, Field, FieldErrorType, FieldProps, FileEditorModalProps, FileFormat, FileIconButtonProps, FileItemProps, FilePicker, FilePickerField, FilePickerFieldProps, FilePickerProps, FileWithSizeAndType, FileWithSrcNameType, FileWithType, FlipButton, FlipButtonGroup, FlipButtonGroupField, FlipButtonGroupFieldProps, FlipButtonGroupProps, FlipButtonProps, Form, FormBody, FormLabel, FormLabelProps, FormProps, FormattedNumberInput, FormattedNumberInputProps, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Modal, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, ProgressBar, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, ScaleFade, ScaleFadeProps, SearchBar, SearchBarField, SearchBarFieldProps, SearchBarOptionType, SearchBarProps, Select, SelectActionMeta, SelectField, SelectFieldProps, SelectProps, SetValueOptionsType, Slide, SlideFade, SlideFadeProps, SlideProps, Small, Sortable, SortableContainer, SortableContainerProps, SortableItem, SortableItemProps, SortableList, SortableListProps, Spinner, SpinnerProps, SplitPane, SplitPaneProps, StatusBlock, StatusBlockProps, StatusPin, StatusPinProps, Step, StepList, StepListProps, StepPanel, StepPanelProps, StepProps, StepStack, Steps, StepsProps, StylizedType, Switch, SwitchField, SwitchFieldProps, SwitchProps, TabPanel, TabPanelProps, Tabs, TabsProps, Tag, TagGroup, TagGroupProps, TagProps, TextField, TextFieldProps, TextInputFormatter, TextSizeProps, Textarea, TextareaField, TextareaFieldProps, TextareaProps, Tiny, Toast, ToastProps, Toolbox, ToolboxContent, ToolboxContentProps, ToolboxFooter, ToolboxFooterProps, ToolboxHeader, ToolboxHeaderProps, ToolboxProps, TransitionDirection, UseFormReturn, UseSelectCallbacksProps, UseToastOptions, addAlpha, advancedParseFloat, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useLoadingMessage, useOverflowGroup, useSelectCallbacks, useSetValueRefreshed, useToast };
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertProps, AlertVariants, AspectRatio, AsyncError, AsyncErrorProps, Avatar, AvatarBadgeProps, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BasicOption, Blinker, BlinkerProps, BlockVariant, BlockVariantColorTuple, Blockquote, BodyType, Button, ButtonProps, ButtonVariants, Capitalized, Carousel, Checkbox, CheckboxField, CheckboxFieldProps, CheckboxProps, CheckboxVariants, ChildrenType, Clickable, ClickableProps, ClipboardInput, ClipboardInputProps, Collapse, CollapseProps, Color, ColorButtonProps, ColorGrade, ColorPicker, ColorPickerField, ColorPickerFieldProps, ColorPickerProps, ColorShades, ColorsExpandButtonProps, ConfirmDeleteModalProps, CurrentTheme, CustomContainerPropsType, CustomElementType, CustomFlipButtonProps, CustomFlipButtonPropsType, CustomTheme, DatePicker, DatePickerField, DatePickerFieldProps, DatePickerProps, DateRange, DateRangePicker, DateRangePickerField, DateRangePickerFieldProps, DateRangePickerProps, DragAndDrop, DragHandle, DragHandleProps, DragItem, DragItemProps, Draggable, DraggableProps, DropZone, DropZoneProps, Droppable, DroppableProps, DurationType, EditableControlsProps, EditableProps, EditableSizes, EditableText, Fade, FadeProps, FastGrid, FastGridProps, FastList, FastListProps, Field, FieldErrorType, FieldProps, FileEditorModalProps, FileFormat, FileIconButtonProps, FileItemProps, FilePicker, FilePickerField, FilePickerFieldProps, FilePickerProps, FileWithSizeAndType, FileWithSrcNameType, FileWithType, FlipButton, FlipButtonGroup, FlipButtonGroupField, FlipButtonGroupFieldProps, FlipButtonGroupProps, FlipButtonProps, Form, FormBody, FormLabel, FormLabelProps, FormProps, FormattedNumberInput, FormattedNumberInputProps, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Message, Modal, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, ProgressBar, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, ScaleFade, ScaleFadeProps, SearchBar, SearchBarField, SearchBarFieldProps, SearchBarOptionType, SearchBarProps, Select, SelectActionMeta, SelectField, SelectFieldProps, SelectProps, SetValueOptionsType, Slide, SlideFade, SlideFadeProps, SlideProps, Small, Sortable, SortableContainer, SortableContainerProps, SortableItem, SortableItemProps, SortableList, SortableListProps, Spinner, SpinnerProps, SplitPane, SplitPaneProps, StatusBlock, StatusBlockProps, StatusPin, StatusPinProps, Step, StepList, StepListProps, StepPanel, StepPanelProps, StepProps, StepStack, Steps, StepsProps, StylizedType, Switch, SwitchField, SwitchFieldProps, SwitchProps, TabPanel, TabPanelProps, Tabs, TabsProps, Tag, TagGroup, TagGroupProps, TagProps, TextField, TextFieldProps, TextInputFormatter, TextSizeProps, Textarea, TextareaField, TextareaFieldProps, TextareaProps, Tiny, Toast, ToastProps, Toolbox, ToolboxContent, ToolboxContentProps, ToolboxFooter, ToolboxFooterProps, ToolboxHeader, ToolboxHeaderProps, ToolboxProps, TransitionDirection, UseFormReturn, UseSelectCallbacksProps, UseToastOptions, addAlpha, advancedParseFloat, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useLoadingMessage, useOverflowGroup, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };

package/dist/umd/northlight.js

@@ -1505,6 +1505,32 @@
     return `${prefix}${dots}`;
   };
 
+  const smoothScrollToBottom = (div) => {
+    const totalSteps = 50;
+    let currentStep = 0;
+    const targetScrollTop = div.scrollHeight - div.clientHeight;
+    const originalScrollTop = div.scrollTop;
+    const scrollInterval = setInterval(() => {
+      if (currentStep >= totalSteps) {
+        clearInterval(scrollInterval);
+      } else {
+        currentStep += 1;
+        const scrollProgress = currentStep / totalSteps;
+        const easing = 1 - (1 - scrollProgress) * (1 - scrollProgress);
+        div.scrollTop = originalScrollTop + (targetScrollTop - originalScrollTop) * easing;
+      }
+    }, 20);
+  };
+
+  const useScrollToBottom = (scrollView, messages) => {
+    React.useEffect(() => {
+      const div = scrollView.current;
+      if (div) {
+        smoothScrollToBottom(div);
+      }
+    }, [messages]);
+  };
+
   const useArrowFocus = (columns) => {
     const {
       focusNext: next,
@@ -1607,13 +1633,12 @@
     direction = "column",
     isRequired = false,
     noLabelConnection = false,
-    validate
+    validate,
+    control: passedControl
   }) {
     const methods = reactHookForm.useFormContext();
-    const {
-      control,
-      formState: { errors }
-    } = methods;
+    const { formState: { errors } } = methods;
+    const control = passedControl != null ? passedControl : methods.control;
     const fieldError = getFieldError(name, errors);
     return /* @__PURE__ */ React.createElement(react.FormControl, { isInvalid: !!fieldError, isRequired }, /* @__PURE__ */ React.createElement(
       react.Stack,
@@ -10862,8 +10887,10 @@
           variant: "danger",
           size: "sm",
           fontSize: "xs",
-          hidden: value === "" || !isClearable,
-          onClick: onChange,
+          hidden: value === void 0 || !isClearable,
+          onClick: () => {
+            onChange(void 0);
+          },
           icon: /* @__PURE__ */ React.createElement(Icon$1, { as: icons.XCloseSolid })
         }
       ))
@@ -12848,6 +12875,7 @@
   exports.useDebounce = useDebounce;
   exports.useLoadingMessage = useLoadingMessage;
   exports.useOverflowGroup = useOverflowGroup;
+  exports.useScrollToBottom = useScrollToBottom;
   exports.useSelectCallbacks = useSelectCallbacks;
   exports.useSetValueRefreshed = useSetValueRefreshed;
   exports.useToast = useToast;