@northlight/ui 2.0.0 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1609 -0
- package/dist/es/northlight.d.mts +39 -5
- package/dist/es/northlight.mjs +108 -40
- package/dist/es/northlight.mjs.map +1 -1
- package/dist/ts/types.d.ts +39 -5
- package/dist/umd/northlight.js +113 -36
- package/dist/umd/northlight.js.map +1 -1
- package/dist/umd/northlight.min.js +3 -3
- package/dist/umd/northlight.min.js.map +1 -1
- package/package.json +2 -3
- package/LICENSE +0 -21
package/dist/es/northlight.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
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';
|
|
2
|
-
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, 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, 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, useMediaQuery, useMergeRefs, useNumberInput, useOutsideClick, usePrefersReducedMotion, useRadio, useRadioGroup, useTab, useTabs, useTheme, useToken } from '@chakra-ui/react';
|
|
2
|
+
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, 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, 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';
|
|
3
3
|
import * as React$1 from 'react';
|
|
4
4
|
import React__default, { ChangeEvent, ComponentType, InputHTMLAttributes, ReactNode, ReactElement } from 'react';
|
|
5
5
|
import { RegisterOptions, FieldValues, UseFormReturn as UseFormReturn$1, SetValueConfig, ControllerRenderProps, UseFormProps, FieldError, Merge, FieldErrorsImpl } from 'react-hook-form';
|
|
@@ -13,6 +13,7 @@ import { Props, GroupBase, ActionMeta, ChakraStylesConfig, SelectInstance, MenuL
|
|
|
13
13
|
export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect } from 'chakra-react-select';
|
|
14
14
|
import { DndContextProps, UseDroppableArguments, UseDraggableArguments, UniqueIdentifier, CollisionDetection, SensorDescriptor, SensorOptions } from '@dnd-kit/core';
|
|
15
15
|
export * from '@dnd-kit/core';
|
|
16
|
+
export { useInterval as dndUseInterval } from '@dnd-kit/core';
|
|
16
17
|
import { UseSortableArguments, SortingStrategy, SortableContextProps } from '@dnd-kit/sortable';
|
|
17
18
|
export * from '@dnd-kit/sortable';
|
|
18
19
|
import { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
|
|
@@ -310,6 +311,8 @@ interface CheckboxFieldProps extends CheckboxProps$1 {
|
|
|
310
311
|
isRequired?: boolean;
|
|
311
312
|
variant?: CheckboxVariants;
|
|
312
313
|
direction?: StackDirection;
|
|
314
|
+
labelPlacement?: 'left' | 'right';
|
|
315
|
+
labelSize?: '2xs' | 'xs' | 'md' | 'lg';
|
|
313
316
|
}
|
|
314
317
|
|
|
315
318
|
/**
|
|
@@ -346,9 +349,21 @@ declare const Checkbox: ({ value, onChange, name, size, variant, ...rest }: Chec
|
|
|
346
349
|
* meant to be used only inside <Form />
|
|
347
350
|
* @see Checkbox
|
|
348
351
|
* @see {@link https://northlight.dev/reference/checkbox-field}
|
|
352
|
+
* @example (Example)
|
|
353
|
+
* ## Basic
|
|
354
|
+
* (?
|
|
355
|
+
* <Form initialValues={{name: ''}}>
|
|
356
|
+
* <CheckboxField
|
|
357
|
+
* name="terms"
|
|
358
|
+
* label="I agree to the Terms & Conditions"
|
|
359
|
+
* labelPlacement="left"
|
|
360
|
+
* labelSize="md"
|
|
361
|
+
* />
|
|
362
|
+
* </Form>
|
|
363
|
+
* ?)
|
|
349
364
|
*
|
|
350
365
|
*/
|
|
351
|
-
declare const CheckboxField: ({ name, label, variant, isRequired, validate, direction, ...rest }: CheckboxFieldProps) => JSX.Element;
|
|
366
|
+
declare const CheckboxField: ({ name, label, variant, isRequired, validate, onChange: onChangeCallback, direction, labelPlacement, labelSize, ...rest }: CheckboxFieldProps) => JSX.Element;
|
|
352
367
|
|
|
353
368
|
type ColorPickerSize = 'sm' | 'md' | 'lg';
|
|
354
369
|
interface ColorPickerProps extends Omit<IconButtonProps$1, 'onChange' | 'value' | 'aria-label' | 'variant'> {
|
|
@@ -469,6 +484,7 @@ interface FlipButtonProps {
|
|
|
469
484
|
icon?: ComponentType<any>;
|
|
470
485
|
value: string;
|
|
471
486
|
label?: string;
|
|
487
|
+
iconPlacement?: 'left' | 'right' | 'none';
|
|
472
488
|
children?: ((props: CustomFlipButtonProps) => JSX.Element) | string;
|
|
473
489
|
}
|
|
474
490
|
interface FlipButtonGroupProps extends Omit<FlipButtonProps, 'value' | 'children' | 'label'> {
|
|
@@ -477,6 +493,7 @@ interface FlipButtonGroupProps extends Omit<FlipButtonProps, 'value' | 'children
|
|
|
477
493
|
children?: React__default.ReactNode[] | React__default.ReactNode;
|
|
478
494
|
name?: string;
|
|
479
495
|
value?: string | string[];
|
|
496
|
+
iconPlacement?: 'left' | 'right' | 'none';
|
|
480
497
|
/** This enables passing styles directly to the div closes to the flip buttons */
|
|
481
498
|
sx?: CSSObject;
|
|
482
499
|
}
|
|
@@ -486,6 +503,7 @@ interface FlipButtonGroupFieldProps extends FlipButtonGroupProps {
|
|
|
486
503
|
isRequired?: boolean;
|
|
487
504
|
validate?: RegisterOptions;
|
|
488
505
|
value?: string;
|
|
506
|
+
iconPlacement?: 'left' | 'right' | 'none';
|
|
489
507
|
}
|
|
490
508
|
|
|
491
509
|
/**
|
|
@@ -601,7 +619,7 @@ declare const FlipButtonGroup: (props: FlipButtonGroupProps) => JSX.Element;
|
|
|
601
619
|
* ?)
|
|
602
620
|
*
|
|
603
621
|
*/
|
|
604
|
-
declare const FlipButtonGroupField: ({ name, label, children, direction, isRequired, onChange: onChangeCallback, validate, ...rest }: FlipButtonGroupFieldProps) => JSX.Element;
|
|
622
|
+
declare const FlipButtonGroupField: ({ name, label, children, direction, isRequired, iconPlacement, onChange: onChangeCallback, validate, ...rest }: FlipButtonGroupFieldProps) => JSX.Element;
|
|
605
623
|
|
|
606
624
|
type Color = 'blue' | 'gray' | 'red' | 'pink' | 'green' | 'orange' | 'purple' | 'yellow' | 'mediatoolBlue';
|
|
607
625
|
type ColorGrade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
|
|
@@ -2570,6 +2588,7 @@ type SwitchFieldProps = SwitchProps$1 & {
|
|
|
2570
2588
|
validate?: RegisterOptions;
|
|
2571
2589
|
isRequired?: boolean;
|
|
2572
2590
|
direction?: StackDirection;
|
|
2591
|
+
labelPosition?: 'left' | 'right';
|
|
2573
2592
|
};
|
|
2574
2593
|
|
|
2575
2594
|
/**
|
|
@@ -2601,9 +2620,20 @@ declare const Switch: ({ value, onChange, name, size, ...rest }: SwitchProps) =>
|
|
|
2601
2620
|
* meant to be used only inside <Form />
|
|
2602
2621
|
* @see switch
|
|
2603
2622
|
* @see {@link https://northlight.dev/reference/switch-field}
|
|
2623
|
+
* @example (Example)
|
|
2624
|
+
* ## Basic
|
|
2625
|
+
* (?
|
|
2626
|
+
* <Form initialValues={{name: ''}}>
|
|
2627
|
+
* <SwitchField
|
|
2628
|
+
* name="terms"
|
|
2629
|
+
* label="I agree to the Terms & Conditions"
|
|
2630
|
+
* labelPosition="left"
|
|
2631
|
+
* />
|
|
2632
|
+
* </Form>
|
|
2633
|
+
* ?)
|
|
2604
2634
|
*
|
|
2605
2635
|
*/
|
|
2606
|
-
declare const SwitchField: ({ name, label, isRequired, validate, onChange: onChangeCallback, direction, ...rest }: SwitchFieldProps) => JSX.Element;
|
|
2636
|
+
declare const SwitchField: ({ name, label, isRequired, validate, onChange: onChangeCallback, direction, labelPosition, ...rest }: SwitchFieldProps) => JSX.Element;
|
|
2607
2637
|
|
|
2608
2638
|
interface TabsProps extends TabsProps$1 {
|
|
2609
2639
|
}
|
|
@@ -3420,6 +3450,10 @@ It takes all the props that a normal stack takes, with the addition of a
|
|
|
3420
3450
|
*/
|
|
3421
3451
|
declare const StepStack: ({ children, spacing, rowHeight, ...rest }: StepStackProps) => JSX.Element;
|
|
3422
3452
|
|
|
3453
|
+
declare const useDebounce: <T>(value: T, delay: number) => T;
|
|
3454
|
+
|
|
3455
|
+
declare const useLoadingMessage: (prefix?: string, delay?: number) => string;
|
|
3456
|
+
|
|
3423
3457
|
declare const useArrowFocus: (columns: number) => {
|
|
3424
3458
|
defaultArrows: (e: any) => void;
|
|
3425
3459
|
focusPrevious: ({ repeat, wrap, }?: {
|
|
@@ -3452,4 +3486,4 @@ declare const useSelectCallbacks: <T extends BasicOption>({ onChange, onAdd, onR
|
|
|
3452
3486
|
declare const theme: Record<string, any>;
|
|
3453
3487
|
declare const tottTheme: Record<string, any>;
|
|
3454
3488
|
|
|
3455
|
-
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, useOverflowGroup, useSelectCallbacks, useSetValueRefreshed, useToast };
|
|
3489
|
+
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 };
|
package/dist/es/northlight.mjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { Accordion as Accordion$1, AccordionButton as AccordionButton$1, AccordionPanel as AccordionPanel$1, AccordionItem as AccordionItem$1, useMultiStyleConfig, chakra, Alert as Alert$2, AspectRatio as AspectRatio$1, forwardRef, useStyleConfig, Icon as Icon$2, Box, Heading, Text, FormLabel as FormLabel$1, VisuallyHidden, HStack, Badge as Badge$1, Button as Button$2, Checkbox as Checkbox$2, FormControl, Stack, FormErrorMessage, IconButton as IconButton$1, useDisclosure, useBoolean, useToken as useToken$1, Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, SimpleGrid, SlideFade as SlideFade$1, Table, Thead, Tbody, Tr, Select as Select$2,
|
|
2
|
-
export { AbsoluteCenter, AccordionIcon, AlertDescription, AlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertIcon, AlertTitle, Box, 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, 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, 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, useMediaQuery, useMergeRefs, useNumberInput, useOutsideClick, usePrefersReducedMotion, useRadio, useRadioGroup, useTab, useTabs, useTheme, useToken } from '@chakra-ui/react';
|
|
1
|
+
import { Accordion as Accordion$1, AccordionButton as AccordionButton$1, AccordionPanel as AccordionPanel$1, AccordionItem as AccordionItem$1, useMultiStyleConfig, chakra, Alert as Alert$2, AspectRatio as AspectRatio$1, forwardRef, useStyleConfig, Icon as Icon$2, Box, Heading, Text, FormLabel as FormLabel$1, VisuallyHidden, HStack, Badge as Badge$1, Button as Button$2, Checkbox as Checkbox$2, useInterval, FormControl, Stack, FormErrorMessage, Flex, IconButton as IconButton$1, useDisclosure, useBoolean, useToken as useToken$1, Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, SimpleGrid, SlideFade as SlideFade$1, Table, Thead, Tbody, Tr, Select as Select$2, PopoverAnchor, InputGroup, InputRightElement, Link as Link$1, Fade as Fade$1, ScaleFade as ScaleFade$1, Slide as Slide$1, Collapse as Collapse$1, Portal, CloseButton as CloseButton$1, Radio as Radio$2, RadioGroup as RadioGroup$1, Center, Tag as Tag$2, TagLabel, TagRightIcon, useEditableControls, useEditableState, Editable, InputLeftElement, Input as Input$1, EditablePreview, EditableInput, Modal as Modal$2, ModalOverlay, ModalContent, ModalCloseButton, ModalHeader, ModalBody, Slider, SliderTrack, SliderFilledTrack, SliderThumb, ModalFooter, VStack, Progress, Spinner as Spinner$2, Image as Image$1, keyframes, extendTheme, ChakraProvider, NumberInputStepper as NumberInputStepper$1, Divider, NumberIncrementStepper, NumberDecrementStepper, NumberInput as NumberInput$2, NumberInputField as NumberInputField$1, PinInput as PinInput$2, Switch as Switch$2, TabPanel as TabPanel$1, Tabs as Tabs$2, Textarea as Textarea$2, useToast as useToast$1, Circle, TagLeftIcon, AlertTitle, AlertDescription, Tab, TabList, useClipboard, Tooltip as Tooltip$1, Grid, GridItem } from '@chakra-ui/react';
|
|
2
|
+
export { AbsoluteCenter, AccordionIcon, AlertDescription, AlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertIcon, AlertTitle, Box, 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, 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, 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';
|
|
3
3
|
import React, { isValidElement, cloneElement, Children, createContext, useContext, useState, useRef, useEffect, forwardRef as forwardRef$1, useImperativeHandle, memo, useMemo, useCallback } from 'react';
|
|
4
4
|
import { UserSquareDuo, BusinessContactDuo, CheckDuo, ChevronUpDuo, ChevronDownDuo, ColorsDuo, CheckSolid, CalendarDuo, ChevronLeftSolid, ChevronRightSolid, XCloseSolid, ChevronUpSolid, ChevronDownSolid, ArrowCircleLeftDuo, ArrowCircleRightDuo, ChevronSelectorVerticalSolid, SearchDuo, DotsMatrixSolid, DragDuo, EditDuo, ZoomInDuo, Image03Solid, UploadCloudSolid, FileBlankDuo, EditBoxDuo, DownloadDuo, TrashFullDuo, Image03Duo, CheckCircleSolid, AlertTriangleSolid, AlertCircleSolid, BellSolid, StatusWorkingSolid, HourglassSolid, CDeleteSolid, CopyDuo } from '@northlight/icons';
|
|
5
5
|
import { useToken, useMultiStyleConfig as useMultiStyleConfig$1, chakra as chakra$1 } from '@chakra-ui/system';
|
|
6
6
|
import { palette, coreZIndex, WebappSkin as WebappSkin$1, typography, TottSkin as TottSkin$1, coreSizing, coreSpacing, coreFontWeight, coreBoxShadow, coreFontSize, coreLineHeight, coreBorderRadius } from '@northlight/tokens';
|
|
7
|
-
import { replace, split, path, T, ifElse, gt, always, identity, defaultTo, take, inc, dec, forEach, is, trim, keys, values, equals, isNil, last, map, prop, difference, omit,
|
|
7
|
+
import { replace, split, path, T, ifElse, gt, always, identity, defaultTo, take, inc, dec, forEach, is, trim, keys, values, equals, isNil, last, map, prop, difference, omit, mergeAll, toLower, find, times, any, has, not, all, merge, filter, test, isEmpty, indexOf, remove, insert, intersection, findIndex, concat, head, match, length } from 'ramda';
|
|
8
8
|
import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-form';
|
|
9
9
|
export { useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
|
|
10
10
|
import { useFocusManager, FocusScope, useFocusRing } from '@react-aria/focus';
|
|
@@ -27,6 +27,7 @@ import { chakraComponents, AsyncSelect, Select as Select$3 } from 'chakra-react-
|
|
|
27
27
|
export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect } from 'chakra-react-select';
|
|
28
28
|
import { DndContext, useDraggable, useDroppable, useSensors, useSensor, PointerSensor, KeyboardSensor, rectIntersection, DragOverlay } from '@dnd-kit/core';
|
|
29
29
|
export * from '@dnd-kit/core';
|
|
30
|
+
export { useInterval as dndUseInterval } from '@dnd-kit/core';
|
|
30
31
|
import { CSS } from '@dnd-kit/utilities';
|
|
31
32
|
export * from '@dnd-kit/utilities';
|
|
32
33
|
import { SortableContext, useSortable, sortableKeyboardCoordinates, arrayMove, rectSortingStrategy } from '@dnd-kit/sortable';
|
|
@@ -1514,6 +1515,31 @@ const FormLabel = (_a) => {
|
|
|
1514
1515
|
);
|
|
1515
1516
|
};
|
|
1516
1517
|
|
|
1518
|
+
const useDebounce = (value, delay) => {
|
|
1519
|
+
const [debouncedValue, setDebouncedValue] = useState(value);
|
|
1520
|
+
useEffect(() => {
|
|
1521
|
+
const handler = setTimeout(() => {
|
|
1522
|
+
setDebouncedValue(value);
|
|
1523
|
+
}, delay);
|
|
1524
|
+
return () => {
|
|
1525
|
+
clearTimeout(handler);
|
|
1526
|
+
};
|
|
1527
|
+
}, [value, delay]);
|
|
1528
|
+
return debouncedValue;
|
|
1529
|
+
};
|
|
1530
|
+
|
|
1531
|
+
const useLoadingMessage = (prefix = "", delay = 300) => {
|
|
1532
|
+
const [dots, setDots] = useState(".");
|
|
1533
|
+
useInterval(() => {
|
|
1534
|
+
if (dots.length === 3) {
|
|
1535
|
+
setDots(".");
|
|
1536
|
+
} else {
|
|
1537
|
+
setDots(`${dots}.`);
|
|
1538
|
+
}
|
|
1539
|
+
}, delay);
|
|
1540
|
+
return `${prefix}${dots}`;
|
|
1541
|
+
};
|
|
1542
|
+
|
|
1517
1543
|
const useArrowFocus = (columns) => {
|
|
1518
1544
|
const {
|
|
1519
1545
|
focusNext: next,
|
|
@@ -1688,35 +1714,59 @@ const CheckboxField = (_a) => {
|
|
|
1688
1714
|
variant,
|
|
1689
1715
|
isRequired,
|
|
1690
1716
|
validate,
|
|
1691
|
-
|
|
1717
|
+
onChange: onChangeCallback = identity,
|
|
1718
|
+
direction = "row",
|
|
1719
|
+
labelPlacement = "left",
|
|
1720
|
+
labelSize = "md"
|
|
1692
1721
|
} = _b, rest = __objRest$15(_b, [
|
|
1693
1722
|
"name",
|
|
1694
1723
|
"label",
|
|
1695
1724
|
"variant",
|
|
1696
1725
|
"isRequired",
|
|
1697
1726
|
"validate",
|
|
1698
|
-
"
|
|
1727
|
+
"onChange",
|
|
1728
|
+
"direction",
|
|
1729
|
+
"labelPlacement",
|
|
1730
|
+
"labelSize"
|
|
1699
1731
|
]);
|
|
1700
|
-
return /* @__PURE__ */ React.createElement(
|
|
1701
|
-
|
|
1732
|
+
return /* @__PURE__ */ React.createElement(
|
|
1733
|
+
Box,
|
|
1702
1734
|
{
|
|
1703
|
-
|
|
1704
|
-
|
|
1705
|
-
direction,
|
|
1706
|
-
isRequired,
|
|
1707
|
-
validate
|
|
1735
|
+
w: label ? "full" : "fit-content",
|
|
1736
|
+
display: "inline-flex"
|
|
1708
1737
|
},
|
|
1709
|
-
|
|
1710
|
-
|
|
1711
|
-
|
|
1738
|
+
/* @__PURE__ */ React.createElement(
|
|
1739
|
+
Field,
|
|
1740
|
+
{
|
|
1712
1741
|
name,
|
|
1713
|
-
|
|
1714
|
-
|
|
1715
|
-
|
|
1716
|
-
|
|
1717
|
-
},
|
|
1742
|
+
label: "",
|
|
1743
|
+
isRequired,
|
|
1744
|
+
direction,
|
|
1745
|
+
validate
|
|
1746
|
+
},
|
|
1747
|
+
({ onChange, value }) => /* @__PURE__ */ React.createElement(
|
|
1748
|
+
Flex,
|
|
1749
|
+
{
|
|
1750
|
+
gap: 2,
|
|
1751
|
+
direction: labelPlacement === "left" ? "row-reverse" : "row"
|
|
1752
|
+
},
|
|
1753
|
+
/* @__PURE__ */ React.createElement(
|
|
1754
|
+
Checkbox$1,
|
|
1755
|
+
__spreadValues$1B({
|
|
1756
|
+
name,
|
|
1757
|
+
onChange: (e) => {
|
|
1758
|
+
onChange(e);
|
|
1759
|
+
onChangeCallback(e);
|
|
1760
|
+
},
|
|
1761
|
+
value,
|
|
1762
|
+
variant,
|
|
1763
|
+
"data-testid": "checkbox-field-test-id"
|
|
1764
|
+
}, rest)
|
|
1765
|
+
),
|
|
1766
|
+
/* @__PURE__ */ React.createElement(Label$1, { htmlFor: name, sx: { fontWeight: "normal" }, size: labelSize }, label)
|
|
1767
|
+
)
|
|
1718
1768
|
)
|
|
1719
|
-
)
|
|
1769
|
+
);
|
|
1720
1770
|
};
|
|
1721
1771
|
|
|
1722
1772
|
var __defProp$1A = Object.defineProperty;
|
|
@@ -2145,7 +2195,8 @@ const FlipButton$1 = (props) => {
|
|
|
2145
2195
|
isMulti,
|
|
2146
2196
|
isDisabled = false,
|
|
2147
2197
|
icon,
|
|
2148
|
-
value
|
|
2198
|
+
value,
|
|
2199
|
+
iconPlacement = "left"
|
|
2149
2200
|
} = _a, rest = __objRest$11(_a, [
|
|
2150
2201
|
"children",
|
|
2151
2202
|
"size",
|
|
@@ -2153,7 +2204,8 @@ const FlipButton$1 = (props) => {
|
|
|
2153
2204
|
"isMulti",
|
|
2154
2205
|
"isDisabled",
|
|
2155
2206
|
"icon",
|
|
2156
|
-
"value"
|
|
2207
|
+
"value",
|
|
2208
|
+
"iconPlacement"
|
|
2157
2209
|
]);
|
|
2158
2210
|
const state = useContext(FlipButtonContext);
|
|
2159
2211
|
const ref = useRef(null);
|
|
@@ -2195,13 +2247,13 @@ const FlipButton$1 = (props) => {
|
|
|
2195
2247
|
HStack,
|
|
2196
2248
|
{
|
|
2197
2249
|
spacing: isSelected || icon ? 2 : 0,
|
|
2198
|
-
sx:
|
|
2250
|
+
sx: mergeAll([button, isFocused ? focusStyles : {}, { flexDirection: iconPlacement === "left" ? "row" : "row-reverse" }]),
|
|
2199
2251
|
"aria-checked": isSelected,
|
|
2200
2252
|
"aria-disabled": isDisabled,
|
|
2201
2253
|
as: "label"
|
|
2202
2254
|
},
|
|
2203
2255
|
/* @__PURE__ */ React.createElement("input", __spreadValues$1w({}, flipButtonProps)),
|
|
2204
|
-
icon ? /* @__PURE__ */ React.createElement(Icon$1, { as: icon || CheckSolid, sx: buttonIcon }) : isSelected && /* @__PURE__ */ React.createElement(SlideFade$1, { in: isSelected }, /* @__PURE__ */ React.createElement(Icon$1, { as: icon || CheckSolid, sx: buttonIcon })),
|
|
2256
|
+
icon && iconPlacement !== "none" ? /* @__PURE__ */ React.createElement(Icon$1, { as: icon || CheckSolid, sx: buttonIcon }) : isSelected && iconPlacement !== "none" && /* @__PURE__ */ React.createElement(SlideFade$1, { in: isSelected }, /* @__PURE__ */ React.createElement(Icon$1, { as: icon || CheckSolid, sx: buttonIcon })),
|
|
2205
2257
|
/* @__PURE__ */ React.createElement(Text, { textAlign: "center" }, children)
|
|
2206
2258
|
);
|
|
2207
2259
|
};
|
|
@@ -2244,6 +2296,7 @@ const FlipButtonGroup = (props) => {
|
|
|
2244
2296
|
children,
|
|
2245
2297
|
direction = "row",
|
|
2246
2298
|
isDisabled = false,
|
|
2299
|
+
iconPlacement = "left",
|
|
2247
2300
|
size,
|
|
2248
2301
|
variant,
|
|
2249
2302
|
icon,
|
|
@@ -2254,6 +2307,7 @@ const FlipButtonGroup = (props) => {
|
|
|
2254
2307
|
"children",
|
|
2255
2308
|
"direction",
|
|
2256
2309
|
"isDisabled",
|
|
2310
|
+
"iconPlacement",
|
|
2257
2311
|
"size",
|
|
2258
2312
|
"variant",
|
|
2259
2313
|
"icon",
|
|
@@ -2267,6 +2321,7 @@ const FlipButtonGroup = (props) => {
|
|
|
2267
2321
|
isMulti,
|
|
2268
2322
|
variant,
|
|
2269
2323
|
isDisabled,
|
|
2324
|
+
iconPlacement,
|
|
2270
2325
|
icon,
|
|
2271
2326
|
size
|
|
2272
2327
|
}, child.props)) : child
|
|
@@ -2325,6 +2380,7 @@ const FlipButtonGroupField = (_a) => {
|
|
|
2325
2380
|
children,
|
|
2326
2381
|
direction,
|
|
2327
2382
|
isRequired,
|
|
2383
|
+
iconPlacement = "left",
|
|
2328
2384
|
onChange: onChangeCallback = identity,
|
|
2329
2385
|
validate
|
|
2330
2386
|
} = _b, rest = __objRest$$(_b, [
|
|
@@ -2333,6 +2389,7 @@ const FlipButtonGroupField = (_a) => {
|
|
|
2333
2389
|
"children",
|
|
2334
2390
|
"direction",
|
|
2335
2391
|
"isRequired",
|
|
2392
|
+
"iconPlacement",
|
|
2336
2393
|
"onChange",
|
|
2337
2394
|
"validate"
|
|
2338
2395
|
]);
|
|
@@ -2354,7 +2411,8 @@ const FlipButtonGroupField = (_a) => {
|
|
|
2354
2411
|
onChangeCallback(e);
|
|
2355
2412
|
},
|
|
2356
2413
|
direction,
|
|
2357
|
-
value
|
|
2414
|
+
value,
|
|
2415
|
+
iconPlacement
|
|
2358
2416
|
}, rest),
|
|
2359
2417
|
children
|
|
2360
2418
|
)
|
|
@@ -10907,35 +10965,45 @@ const SwitchField = (_a) => {
|
|
|
10907
10965
|
isRequired,
|
|
10908
10966
|
validate,
|
|
10909
10967
|
onChange: onChangeCallback = identity,
|
|
10910
|
-
direction = "row"
|
|
10968
|
+
direction = "row",
|
|
10969
|
+
labelPosition = "right"
|
|
10911
10970
|
} = _b, rest = __objRest$d(_b, [
|
|
10912
10971
|
"name",
|
|
10913
10972
|
"label",
|
|
10914
10973
|
"isRequired",
|
|
10915
10974
|
"validate",
|
|
10916
10975
|
"onChange",
|
|
10917
|
-
"direction"
|
|
10976
|
+
"direction",
|
|
10977
|
+
"labelPosition"
|
|
10918
10978
|
]);
|
|
10919
10979
|
return /* @__PURE__ */ React.createElement(Box, { w: label ? "full" : "fit-content" }, /* @__PURE__ */ React.createElement(
|
|
10920
10980
|
Field,
|
|
10921
10981
|
{
|
|
10922
10982
|
name,
|
|
10923
|
-
label,
|
|
10983
|
+
label: "",
|
|
10924
10984
|
isRequired,
|
|
10925
10985
|
direction,
|
|
10926
10986
|
validate
|
|
10927
10987
|
},
|
|
10928
10988
|
({ onChange, value }) => /* @__PURE__ */ React.createElement(
|
|
10929
|
-
|
|
10930
|
-
|
|
10931
|
-
|
|
10932
|
-
|
|
10933
|
-
|
|
10934
|
-
|
|
10935
|
-
|
|
10936
|
-
|
|
10937
|
-
|
|
10938
|
-
|
|
10989
|
+
Flex,
|
|
10990
|
+
{
|
|
10991
|
+
gap: 2,
|
|
10992
|
+
direction: labelPosition === "left" ? "row-reverse" : "row"
|
|
10993
|
+
},
|
|
10994
|
+
/* @__PURE__ */ React.createElement(
|
|
10995
|
+
Switch,
|
|
10996
|
+
__spreadValues$i({
|
|
10997
|
+
name,
|
|
10998
|
+
onChange: (e) => {
|
|
10999
|
+
onChange(e);
|
|
11000
|
+
onChangeCallback(e);
|
|
11001
|
+
},
|
|
11002
|
+
value,
|
|
11003
|
+
"data-testid": "switch-field-test-id"
|
|
11004
|
+
}, rest)
|
|
11005
|
+
),
|
|
11006
|
+
label && /* @__PURE__ */ React.createElement(Label$1, { htmlFor: name }, label)
|
|
10939
11007
|
)
|
|
10940
11008
|
));
|
|
10941
11009
|
};
|
|
@@ -11940,5 +12008,5 @@ const StepStack = (_a) => {
|
|
|
11940
12008
|
));
|
|
11941
12009
|
};
|
|
11942
12010
|
|
|
11943
|
-
export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert$1 as Alert, AspectRatio, AsyncError, Avatar$1 as Avatar, AvatarGroup, Badge, Blinker$1 as Blinker, Blockquote$1 as Blockquote, Button$1 as Button, Capitalized$1 as Capitalized, Carousel$1 as Carousel, Checkbox$1 as Checkbox, CheckboxField, Clickable, ClipboardInput, Collapse, ColorPicker$1 as ColorPicker, ColorPickerField, CustomTheme, DatePicker$1 as DatePicker, DatePickerField, DateRangePicker, DateRangePickerField, DragAndDrop$1 as DragAndDrop, DragHandle, DragItem, Draggable, DropZone, Droppable, EditableText$1 as EditableText, Fade, FastGrid, FastList, Field, FilePicker$1 as FilePicker, FilePickerField, FlipButton$1 as FlipButton, FlipButtonGroup, FlipButtonGroupField, Form, FormLabel, FormattedNumberInput, H1$1 as H1, H2$1 as H2, H3$1 as H3, H4$1 as H4, H5$1 as H5, H6$1 as H6, Icon$1 as Icon, IconButton, Label$1 as Label, Lead$1 as Lead, MaskedTextInput, MediatoolThemeProvider, Modal$1 as Modal, MultiFileList, MultiFilePicker, MultiFilePickerField, MultiFileUploader, MultiSort, NotificationIconButton, NumberInput, NumberInputField, OrganizationLogo, OverflowGroup, P$1 as P, PaneDivider, PaneItem, PinInput, ProgressBar, Radio$1 as Radio, RadioGroup, RadioGroupField, ScaleFade, SearchBar, SearchBarField, Select, SelectField, Slide, SlideFade, Small$1 as Small, Sortable, SortableContainer, SortableItem, SortableList, Spinner$1 as Spinner, SplitPane, StatusBlock, StatusPin, Step, StepList, StepPanel, StepStack, Steps, Switch, SwitchField, TabPanel, Tabs, Tag$1 as Tag, TagGroup, TextField, Textarea, TextareaField, Tiny$1 as Tiny, Toast, Toolbox$1 as Toolbox, ToolboxContent, ToolboxFooter, ToolboxHeader, addAlpha, advancedParseFloat, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useOverflowGroup, useSelectCallbacks, useSetValueRefreshed, useToast };
|
|
12011
|
+
export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert$1 as Alert, AspectRatio, AsyncError, Avatar$1 as Avatar, AvatarGroup, Badge, Blinker$1 as Blinker, Blockquote$1 as Blockquote, Button$1 as Button, Capitalized$1 as Capitalized, Carousel$1 as Carousel, Checkbox$1 as Checkbox, CheckboxField, Clickable, ClipboardInput, Collapse, ColorPicker$1 as ColorPicker, ColorPickerField, CustomTheme, DatePicker$1 as DatePicker, DatePickerField, DateRangePicker, DateRangePickerField, DragAndDrop$1 as DragAndDrop, DragHandle, DragItem, Draggable, DropZone, Droppable, EditableText$1 as EditableText, Fade, FastGrid, FastList, Field, FilePicker$1 as FilePicker, FilePickerField, FlipButton$1 as FlipButton, FlipButtonGroup, FlipButtonGroupField, Form, FormLabel, FormattedNumberInput, H1$1 as H1, H2$1 as H2, H3$1 as H3, H4$1 as H4, H5$1 as H5, H6$1 as H6, Icon$1 as Icon, IconButton, Label$1 as Label, Lead$1 as Lead, MaskedTextInput, MediatoolThemeProvider, Modal$1 as Modal, MultiFileList, MultiFilePicker, MultiFilePickerField, MultiFileUploader, MultiSort, NotificationIconButton, NumberInput, NumberInputField, OrganizationLogo, OverflowGroup, P$1 as P, PaneDivider, PaneItem, PinInput, ProgressBar, Radio$1 as Radio, RadioGroup, RadioGroupField, ScaleFade, SearchBar, SearchBarField, Select, SelectField, Slide, SlideFade, Small$1 as Small, Sortable, SortableContainer, SortableItem, SortableList, Spinner$1 as Spinner, SplitPane, StatusBlock, StatusPin, Step, StepList, StepPanel, StepStack, Steps, Switch, SwitchField, TabPanel, Tabs, Tag$1 as Tag, TagGroup, TextField, Textarea, TextareaField, Tiny$1 as Tiny, Toast, Toolbox$1 as Toolbox, ToolboxContent, ToolboxFooter, ToolboxHeader, addAlpha, advancedParseFloat, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useLoadingMessage, useOverflowGroup, useSelectCallbacks, useSetValueRefreshed, useToast };
|
|
11944
12012
|
//# sourceMappingURL=northlight.mjs.map
|