@northlight/ui 1.5.4 → 1.5.6

package/README.md

@@ -2,12 +2,6 @@
 
 This awesome collection of components, built upon Chakra, powers all of Mediatool's features.
 
-## Get started
-
-1. Run `yarn`
-2. Run `yarn start`
-3. Navigate to http://localhost:3008
-
 ## Overview
 
 Below you'll find an overview of each part of the library.
@@ -16,14 +10,6 @@ Below you'll find an overview of each part of the library.
 
 In this folder you'll find components, hooks, utils and theme. This is the actual library and is what gets published to npm.
 
-### sandbox
-
-Sandbox is what you'd expect from the name - a sandbox environment. It serves as documentation as well as a playground for testing new components in an interactive enrivonment.
-Sandbox is built like a mini micro frontend, meaning that `docs` and `demo` are 2 separate mini apps. `Docs` is the default fallback when navigating to localhost:3008/.
-
-`Docs` works similarly to how Storybook works, without the need to write explicit stories. Simply follow existing structure and create a component under `docs/pages`, and write code just how you normally would.
-`Test` was created by Sebastian. However he was not aware that other main pages were documented here, thus he didn't write any explanation.
-
 ## Contribute
 
 Want to contribute? Awesome! Find what suits your use-case below and follow the steps.

package/dist/es/northlight.d.mts

@@ -1,4 +1,4 @@
-import { AccordionProps, AccordionButtonProps, AccordionPanelProps, AccordionItemProps, AvatarProps as AvatarProps$1, AlertProps as AlertProps$1, AspectRatioProps, BadgeProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, StackDirection, IconButtonProps as IconButtonProps$1, InputProps, FlexProps, BoxProps, StackProps, 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';
+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, 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';
 import * as React$1 from 'react';
 import React__default, { ChangeEvent, ComponentType, InputHTMLAttributes, ReactNode, ReactElement } from 'react';
@@ -145,7 +145,7 @@ interface AvatarProps extends Omit<AvatarProps$1, 'src' | 'srcSet' | 'getInitial
 interface AvatarBadgeProps {
     notificationCount?: number;
 }
-interface AvatarGroupProps {
+interface AvatarGroupProps extends StackProps {
     max: number;
     spacing?: number | string;
     /** The children should be avatar components */
@@ -469,7 +469,7 @@ interface FlipButtonProps {
     icon?: ComponentType<any>;
     value: string;
     label?: string;
-    children: ((props: CustomFlipButtonProps) => JSX.Element) | string;
+    children?: ((props: CustomFlipButtonProps) => JSX.Element) | string;
 }
 interface FlipButtonGroupProps extends Omit<FlipButtonProps, 'value' | 'children' | 'label'> {
     onChange?: (val: string | string[]) => void;
@@ -782,7 +782,7 @@ declare const DatePickerField: ({ name, minValue, maxValue, isRequired, directio
  * @see {@link https://northlight.dev/reference/date-range-picker-field}
  *
  */
-declare const DateRangePickerField: ({ name, minValue, maxValue, isRequired, direction, label, validate, firstDayOfWeek, onChange: onChangeCallback, ...rest }: DateRangePickerFieldProps) => JSX.Element;
+declare const DateRangePickerField: ({ name, minValue, maxValue, isRequired, direction, label, validate, firstDayOfWeek, onChange: onChangeCallback, isClearable, ...rest }: DateRangePickerFieldProps) => JSX.Element;
 
 interface ToolboxProps extends Omit<FlexProps, 'direction'> {
     isOpen: boolean;

package/dist/es/northlight.mjs

@@ -4042,7 +4042,7 @@ const RangeCalendar = (props) => {
     state,
     ref
   );
-  const { fiscalStartMonth, handleClose, resetDate } = props;
+  const { fiscalStartMonth, handleClose, resetDate, isClearable = true } = props;
   return /* @__PURE__ */ React.createElement(Box, __spreadProps$g(__spreadValues$1a({}, calendarProps), { ref, __css: rangeCalendarContainer }), /* @__PURE__ */ React.createElement(Stack, null, /* @__PURE__ */ React.createElement(Flex, { gap: 4 }, /* @__PURE__ */ React.createElement(
     QuickSelect,
     {
@@ -4058,7 +4058,7 @@ const RangeCalendar = (props) => {
       offset: { months: 1 },
       locale
     }
-  ), /* @__PURE__ */ React.createElement(AdjustRange, { state, adjust: "end" }), /* @__PURE__ */ React.createElement(HStack, { alignSelf: "end", pt: "2" }, /* @__PURE__ */ React.createElement(Button$1, { onClick: resetDate, variant: "ghost", size: "sm" }, "Clear"), /* @__PURE__ */ React.createElement(Button$1, { variant: "brand", onClick: handleClose, size: "sm" }, "Save"))))))));
+  ), /* @__PURE__ */ React.createElement(AdjustRange, { state, adjust: "end" }), /* @__PURE__ */ React.createElement(HStack, { alignSelf: "end", pt: "2" }, isClearable && /* @__PURE__ */ React.createElement(Button$1, { onClick: resetDate, variant: "ghost", size: "sm" }, "Clear"), /* @__PURE__ */ React.createElement(Button$1, { variant: "brand", onClick: handleClose, size: "sm" }, "Save"))))))));
 };
 
 var __defProp$19 = Object.defineProperty;
@@ -4094,7 +4094,7 @@ const SimpleRangeCalendar = (props) => {
     state,
     ref
   );
-  const { fiscalStartMonth, handleClose, resetDate } = props;
+  const { fiscalStartMonth, handleClose, resetDate, isClearable = true } = props;
   return /* @__PURE__ */ React.createElement(Box, __spreadProps$f(__spreadValues$19({}, calendarProps), { ref, __css: rangeCalendarContainer }), /* @__PURE__ */ React.createElement(Stack, null, /* @__PURE__ */ React.createElement(Flex, { gap: 4 }, /* @__PURE__ */ React.createElement(
     QuickSelect,
     {
@@ -4105,7 +4105,7 @@ const SimpleRangeCalendar = (props) => {
       fiscalStartMonth,
       height: "72"
     }
-  ), /* @__PURE__ */ React.createElement(Stack, null, /* @__PURE__ */ React.createElement(HStack, { spacing: 2, alignSelf: "center" }, /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$19({}, prevButtonProps), /* @__PURE__ */ React.createElement(Icon$1, { as: ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React.createElement(HStack, { w: "full", justify: "center" }, /* @__PURE__ */ React.createElement(MonthSelect, { state, offset: 0 }), /* @__PURE__ */ React.createElement(YearSelectRangeCalendar, { state, offset: 0 })), /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$19({}, nextButtonProps), /* @__PURE__ */ React.createElement(Icon$1, { as: ChevronRightSolid, boxSize: 4 }))), /* @__PURE__ */ React.createElement(Stack, { h: "full", justify: "space-between" }, /* @__PURE__ */ React.createElement(RangeCalendarGrid, { state, locale }), /* @__PURE__ */ React.createElement(HStack, { alignSelf: "end", pt: "2" }, /* @__PURE__ */ React.createElement(Button$1, { onClick: resetDate, variant: "ghost", size: "sm" }, "Clear"), /* @__PURE__ */ React.createElement(Button$1, { variant: "brand", onClick: handleClose, size: "sm" }, "Save")))))));
+  ), /* @__PURE__ */ React.createElement(Stack, null, /* @__PURE__ */ React.createElement(HStack, { spacing: 2, alignSelf: "center" }, /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$19({}, prevButtonProps), /* @__PURE__ */ React.createElement(Icon$1, { as: ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React.createElement(HStack, { w: "full", justify: "center" }, /* @__PURE__ */ React.createElement(MonthSelect, { state, offset: 0 }), /* @__PURE__ */ React.createElement(YearSelectRangeCalendar, { state, offset: 0 })), /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$19({}, nextButtonProps), /* @__PURE__ */ React.createElement(Icon$1, { as: ChevronRightSolid, boxSize: 4 }))), /* @__PURE__ */ React.createElement(Stack, { h: "full", justify: "space-between" }, /* @__PURE__ */ React.createElement(RangeCalendarGrid, { state, locale }), /* @__PURE__ */ React.createElement(HStack, { alignSelf: "end", pt: "2" }, isClearable && /* @__PURE__ */ React.createElement(Button$1, { onClick: resetDate, variant: "ghost", size: "sm" }, "Clear"), /* @__PURE__ */ React.createElement(Button$1, { variant: "brand", onClick: handleClose, size: "sm" }, "Save")))))));
 };
 
 const isValidDateRange = (value) => is(Object, value) && has("startDate", value) && has("endDate", value) && is(String, value.startDate) && is(String, value.endDate);
@@ -4234,14 +4234,16 @@ const DateRangePicker = (props) => {
       __spreadProps$e(__spreadValues$18({}, calendarProps), {
         resetDate,
         handleClose,
-        fiscalStartMonth: fiscalStartMonth || 0
+        fiscalStartMonth: fiscalStartMonth || 0,
+        isClearable
       })
     ), mode === "advanced" && /* @__PURE__ */ React.createElement(
       RangeCalendar,
       __spreadProps$e(__spreadValues$18({}, calendarProps), {
         resetDate,
         handleClose,
-        fiscalStartMonth: fiscalStartMonth || 0
+        fiscalStartMonth: fiscalStartMonth || 0,
+        isClearable
       })
     )))
   );
@@ -4427,7 +4429,8 @@ const DateRangePickerField = (_a) => {
     label,
     validate,
     firstDayOfWeek = "monday",
-    onChange: onChangeCallback = identity
+    onChange: onChangeCallback = identity,
+    isClearable = true
   } = _b, rest = __objRest$P(_b, [
     "name",
     "minValue",
@@ -4437,7 +4440,8 @@ const DateRangePickerField = (_a) => {
     "label",
     "validate",
     "firstDayOfWeek",
-    "onChange"
+    "onChange",
+    "isClearable"
   ]);
   const { setValue, setError, trigger } = useFormContext();
   const handleChange = (dateRange) => {
@@ -4472,7 +4476,8 @@ const DateRangePickerField = (_a) => {
         value,
         minValue,
         maxValue,
-        validationState: errors.name ? "invalid" : "valid"
+        validationState: errors.name ? "invalid" : "valid",
+        isClearable
       }, rest)
     )
   );