@northlight/ui 2.1.0 → 2.2.0

package/dist/ts/types.d.ts

@@ -1,5 +1,5 @@
 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, useInterval, useMediaQuery, useMergeRefs, useNumberInput, useOutsideClick, usePrefersReducedMotion, useRadio, useRadioGroup, useTab, useTabs, useTheme, useToken } 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';
@@ -13,11 +13,11 @@ import { Props, GroupBase, ActionMeta, ChakraStylesConfig, SelectInstance, MenuL
 export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect } from 'chakra-react-select';
 import { DndContextProps, UseDroppableArguments, UseDraggableArguments, UniqueIdentifier, CollisionDetection, SensorDescriptor, SensorOptions } from '@dnd-kit/core';
 export * from '@dnd-kit/core';
-export { useInterval as dndUseInterval } from '@dnd-kit/core';
 import { UseSortableArguments, SortingStrategy, SortableContextProps } from '@dnd-kit/sortable';
 export * from '@dnd-kit/sortable';
 import { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
 export * from '@dnd-kit/utilities';
+export { useInterval as dndUseInterval } from '@dnd-kit/utilities';
 export * from '@dnd-kit/modifiers';
 import { VariableSizeListProps, VariableSizeList, VariableSizeGridProps, VariableSizeGrid } from 'react-window';
 import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
@@ -654,6 +654,7 @@ interface DateRangePickerProps extends Omit<AriaDateRangePickerProps<DateValue>,
     minValue?: string | undefined;
     maxValue?: string | undefined;
     fiscalStartMonth?: number;
+    fiscalStartDay?: number;
     mode?: DatePickerMode;
 }
 interface DatePickerFieldProps extends Omit<InputProps, 'onChange'>, InputFieldProps {
@@ -668,6 +669,7 @@ interface DatePickerFieldProps extends Omit<InputProps, 'onChange'>, InputFieldP
     onChange?: (date: DateValue) => void;
     isClearable?: boolean;
     fiscalStartMonth?: number;
+    fiscalStartDay?: number;
 }
 interface DateRangePickerFieldProps extends Omit<DatePickerFieldProps, 'onChange'> {
     onChange?: (date: null | DateRange) => void;
@@ -752,17 +754,19 @@ declare const DatePicker: (props: DatePickerProps) => JSX.Element;
  * ?)
  *
  * @example (Example)
- * ### Another example
+ * ## Sophisticated example
+ * The `DateRangePickerField` can have **fiscalStartMonth** and **fiscalStartDay** as a `number`
  * (?
  * <Form initialValues={{date: null}}>
   * <DateRangePickerField
   * name="date"
-  * mode="simple"
+  * mode="advanced"
   * variant="filled"
-  * fiscalStarMonth={3}
+  * fiscalStartMonth={3}
+  * fiscalStartDay={5}
   * dateFormat="mm|dd-yyyy"
   * minValue="2023-01-01"
-  * maxValue="2024-01-01"
+  * maxValue="2028-01-01"
   * />
  * </Form>
  * ?)
@@ -2464,6 +2468,17 @@ 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 }
+ * />
+ * ?)
+ *
+ * @example (Example)
+ * ## Clearable Select
+ * (?
+ * <Select
+ *   options={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]}
+ *   onChange={(value, action) => console.log('Selected:', value)}
+ *   isClearable={ true }
  * />
  * ?)
  *

package/dist/umd/northlight.js

@@ -1584,9 +1584,9 @@
     const handleChange = (val, event) => {
       var _a;
       onChange(val, event);
-      if (!isMulti && !ramda.isNil(value)) {
+      if (!isMulti && !ramda.isNil(val)) {
         onAdd(val.value);
-      } else if (val.length > items.current.length) {
+      } else if (!ramda.isNil(val) && val.length > items.current.length) {
         onAdd((_a = ramda.last(val)) == null ? void 0 : _a.value);
       } else {
         const removedItems = ramda.map(
@@ -3796,8 +3796,16 @@
     children
   )));
 
-  const getQuickSelectOptions = (state, locale, fiscalStartMonth) => {
+  const getQuickSelectOptions = (state, locale, fiscalStartMonth, fiscalStartDay) => {
     const thisDay = date.today(state.timeZone);
+    const startOfMonthWithDays = (date, { months, days }) => {
+      const start = date.add({ months }).set({ day: days });
+      return start;
+    };
+    const endOfMonthWithDays = (date, { months, days }) => {
+      const end = date.add({ months }).set({ day: days }).subtract({ days: 1 });
+      return end;
+    };
     const thisWeek = {
       value: {
         start: date.startOfWeek(thisDay, locale),
@@ -3870,66 +3878,78 @@
     };
     const thisFiscalYear = {
       value: {
-        start: date.startOfMonth(
-          date.startOfYear(thisDay).add({ months: fiscalStartMonth })
+        start: startOfMonthWithDays(
+          date.startOfYear(thisDay),
+          { months: fiscalStartMonth, days: fiscalStartDay }
         ),
-        end: date.endOfMonth(
-          date.startOfYear(thisDay).add({ months: fiscalStartMonth + 11 })
+        end: endOfMonthWithDays(
+          date.startOfYear(thisDay),
+          { months: fiscalStartMonth + 11, days: fiscalStartDay }
         )
       },
       label: "This Fiscal Year"
     };
     const lastFiscalYear = {
       value: {
-        start: date.startOfMonth(
-          date.startOfYear(thisDay).add({ months: fiscalStartMonth }).subtract({ years: 1 })
+        start: startOfMonthWithDays(
+          date.startOfYear(thisDay).subtract({ years: 1 }),
+          { months: fiscalStartMonth, days: fiscalStartDay - 1 }
         ),
-        end: date.endOfMonth(
-          date.startOfYear(thisDay).add({ months: fiscalStartMonth + 11 }).subtract({ years: 1 })
+        end: endOfMonthWithDays(
+          date.startOfYear(thisDay).subtract({ years: 1 }),
+          { months: fiscalStartMonth + 11, days: fiscalStartDay }
         )
       },
       label: "Last Fiscal Year"
     };
     const F1 = {
       value: {
-        start: date.startOfMonth(
-          date.startOfYear(thisDay).add({ months: fiscalStartMonth })
+        start: startOfMonthWithDays(
+          date.startOfYear(thisDay),
+          { months: fiscalStartMonth, days: fiscalStartDay }
         ),
-        end: date.endOfMonth(
-          date.startOfYear(thisDay).add({ months: fiscalStartMonth + 2 })
+        end: endOfMonthWithDays(
+          date.startOfYear(thisDay),
+          { months: fiscalStartMonth + 2, days: fiscalStartDay }
         )
       },
       label: fiscalStartMonth === 0 ? "Q1" : "FQ1"
     };
     const F2 = {
       value: {
-        start: date.startOfMonth(
-          date.startOfYear(thisDay).add({ months: fiscalStartMonth + 3 })
+        start: startOfMonthWithDays(
+          date.startOfYear(thisDay),
+          { months: fiscalStartMonth + 3, days: fiscalStartDay }
         ),
-        end: date.endOfMonth(
-          date.startOfYear(thisDay).add({ months: fiscalStartMonth + 5 })
+        end: endOfMonthWithDays(
+          date.startOfYear(thisDay),
+          { months: fiscalStartMonth + 5, days: fiscalStartDay }
         )
       },
       label: fiscalStartMonth === 0 ? "Q2" : "FQ2"
     };
     const F3 = {
       value: {
-        start: date.startOfMonth(
-          date.startOfYear(thisDay).add({ months: fiscalStartMonth + 6 })
+        start: startOfMonthWithDays(
+          date.startOfYear(thisDay),
+          { months: fiscalStartMonth + 6, days: fiscalStartDay }
         ),
-        end: date.endOfMonth(
-          date.startOfYear(thisDay).add({ months: fiscalStartMonth + 8 })
+        end: endOfMonthWithDays(
+          date.startOfYear(thisDay),
+          { months: fiscalStartMonth + 8, days: fiscalStartDay }
         )
       },
       label: fiscalStartMonth === 0 ? "Q3" : "FQ3"
     };
     const F4 = {
       value: {
-        start: date.startOfMonth(
-          date.startOfYear(thisDay).add({ months: fiscalStartMonth + 9 })
+        start: startOfMonthWithDays(
+          date.startOfYear(thisDay),
+          { months: fiscalStartMonth + 9, days: fiscalStartDay }
         ),
-        end: date.endOfMonth(
-          date.startOfYear(thisDay).add({ months: fiscalStartMonth + 11 })
+        end: endOfMonthWithDays(
+          date.startOfYear(thisDay),
+          { months: fiscalStartMonth + 11, days: fiscalStartDay }
         )
       },
       label: fiscalStartMonth === 0 ? "Q4" : "FQ4"
@@ -3956,12 +3976,13 @@
   const QuickSelect = ({
     state,
     fiscalStartMonth = 0,
+    fiscalStartDay = 0,
     updateVisibleRange,
     locale = "",
     height = "xs"
   }) => {
     const { quickDates, fiscalQuarters } = React.useMemo(
-      () => getQuickSelectOptions(state, locale, fiscalStartMonth),
+      () => getQuickSelectOptions(state, locale, fiscalStartMonth, fiscalStartDay),
       []
     );
     const updateDate = (newDate) => () => {
@@ -4065,14 +4086,15 @@
       state,
       ref
     );
-    const { fiscalStartMonth, handleClose, resetDate, isClearable = true } = props;
+    const { fiscalStartMonth, fiscalStartDay, handleClose, resetDate, isClearable = true } = props;
     return /* @__PURE__ */ React.createElement(react.Box, __spreadProps$g(__spreadValues$1a({}, calendarProps), { ref, __css: rangeCalendarContainer }), /* @__PURE__ */ React.createElement(react.Stack, null, /* @__PURE__ */ React.createElement(react.Flex, { gap: 4 }, /* @__PURE__ */ React.createElement(
       QuickSelect,
       {
         state,
         updateVisibleRange: () => setUpdateRange(true),
         locale,
-        fiscalStartMonth
+        fiscalStartMonth,
+        fiscalStartDay
       }
     ), /* @__PURE__ */ React.createElement(react.Stack, null, /* @__PURE__ */ React.createElement(react.HStack, { spacing: 2, alignSelf: "center" }, /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1a({}, prevButtonProps), /* @__PURE__ */ React.createElement(Icon$1, { as: icons.ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React.createElement(react.Box, { w: "52" }, /* @__PURE__ */ React.createElement(Label$1, { textAlign: "center" }, months[state.visibleRange.start.month - 1], " -", " ", months[state.visibleRange.start.month], " ", state.visibleRange.end.year)), /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1a({}, nextButtonProps), /* @__PURE__ */ React.createElement(Icon$1, { as: icons.ChevronRightSolid, boxSize: 4 }))), /* @__PURE__ */ React.createElement(react.HStack, { alignItems: "start", spacing: 4 }, /* @__PURE__ */ React.createElement(react.Stack, null, /* @__PURE__ */ React.createElement(react.HStack, { alignSelf: "center", spacing: "0a" }, /* @__PURE__ */ React.createElement(MonthSelect, { state, offset: 0 }), /* @__PURE__ */ React.createElement(YearSelectRangeCalendar, { state, offset: 0 }), /* @__PURE__ */ React.createElement(Icon$1, { as: icons.ChevronSelectorVerticalSolid, size: "xs", fontWeight: "bold" })), /* @__PURE__ */ React.createElement(RangeCalendarGrid, { state, locale }), /* @__PURE__ */ React.createElement(AdjustRange, { state, adjust: "start" })), /* @__PURE__ */ React.createElement(react.Stack, null, /* @__PURE__ */ React.createElement(react.HStack, { alignSelf: "center", spacing: "0a" }, /* @__PURE__ */ React.createElement(MonthSelect, { state, offset: 1 }), /* @__PURE__ */ React.createElement(YearSelectRangeCalendar, { state, offset: 1 }), /* @__PURE__ */ React.createElement(Icon$1, { as: icons.ChevronSelectorVerticalSolid, size: "xs", fontWeight: "bold" })), /* @__PURE__ */ React.createElement(
       RangeCalendarGrid,
@@ -4117,7 +4139,7 @@
       state,
       ref
     );
-    const { fiscalStartMonth, handleClose, resetDate, isClearable = true } = props;
+    const { fiscalStartMonth, fiscalStartDay, handleClose, resetDate, isClearable = true } = props;
     return /* @__PURE__ */ React.createElement(react.Box, __spreadProps$f(__spreadValues$19({}, calendarProps), { ref, __css: rangeCalendarContainer }), /* @__PURE__ */ React.createElement(react.Stack, null, /* @__PURE__ */ React.createElement(react.Flex, { gap: 4 }, /* @__PURE__ */ React.createElement(
       QuickSelect,
       {
@@ -4126,6 +4148,7 @@
         },
         locale,
         fiscalStartMonth,
+        fiscalStartDay,
         height: "72"
       }
     ), /* @__PURE__ */ React.createElement(react.Stack, null, /* @__PURE__ */ React.createElement(react.HStack, { spacing: 2, alignSelf: "center" }, /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$19({}, prevButtonProps), /* @__PURE__ */ React.createElement(Icon$1, { as: icons.ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React.createElement(react.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: icons.ChevronRightSolid, boxSize: 4 }))), /* @__PURE__ */ React.createElement(react.Stack, { h: "full", justify: "space-between" }, /* @__PURE__ */ React.createElement(RangeCalendarGrid, { state, locale }), /* @__PURE__ */ React.createElement(react.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")))))));
@@ -4165,6 +4188,7 @@
       isInvalid = false,
       dateFormat,
       fiscalStartMonth,
+      fiscalStartDay,
       mode = "advanced",
       variant = "outline",
       onChange: onChangeCallback = ramda.identity,
@@ -4258,6 +4282,7 @@
           resetDate,
           handleClose,
           fiscalStartMonth: fiscalStartMonth || 0,
+          fiscalStartDay: fiscalStartDay || 0,
           isClearable
         })
       ), mode === "advanced" && /* @__PURE__ */ React.createElement(
@@ -4266,6 +4291,7 @@
           resetDate,
           handleClose,
           fiscalStartMonth: fiscalStartMonth || 0,
+          fiscalStartDay: fiscalStartDay || 0,
           isClearable
         })
       )))
@@ -12173,6 +12199,10 @@
     enumerable: true,
     get: function () { return react.Heading; }
   });
+  Object.defineProperty(exports, 'Hide', {
+    enumerable: true,
+    get: function () { return react.Hide; }
+  });
   Object.defineProperty(exports, 'Highlight', {
     enumerable: true,
     get: function () { return react.Highlight; }
@@ -12369,6 +12399,10 @@
     enumerable: true,
     get: function () { return react.RangeSliderTrack; }
   });
+  Object.defineProperty(exports, 'Show', {
+    enumerable: true,
+    get: function () { return react.Show; }
+  });
   Object.defineProperty(exports, 'SimpleGrid', {
     enumerable: true,
     get: function () { return react.SimpleGrid; }
@@ -12679,7 +12713,7 @@
   });
   Object.defineProperty(exports, 'dndUseInterval', {
     enumerable: true,
-    get: function () { return core.useInterval; }
+    get: function () { return utilities.useInterval; }
   });
   exports.Accordion = Accordion;
   exports.AccordionButton = AccordionButton;