@northlight/ui 2.15.3 → 2.15.4

package/dist/es/northlight.d.ts

@@ -3,7 +3,7 @@ export { AbsoluteCenter, AccordionButtonProps, AccordionIcon, AccordionIconProps
 import { Props, GroupBase, MultiValue, SingleValue, ActionMeta, MenuListProps, SelectInstance, ChakraStylesConfig } from 'chakra-react-select';
 export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect, MultiValue, SingleValue } from 'chakra-react-select';
 import * as React$1 from 'react';
-import React__default, { ComponentType, Ref, RefObject, ChangeEvent, InputHTMLAttributes, ReactNode, ReactElement, MutableRefObject, EffectCallback, DependencyList } from 'react';
+import React__default, { ComponentType, Ref, ChangeEvent, InputHTMLAttributes, ReactNode, ReactElement, RefObject, MutableRefObject, EffectCallback, DependencyList } from 'react';
 import * as react_hook_form from 'react-hook-form';
 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';
@@ -143,15 +143,6 @@ interface SelectProps<T, K extends boolean> extends Omit<Props<T, K, GroupBase<T
     customOption?: ((option: T) => JSX.Element) | null;
     isMulti?: K;
     ref?: Ref<SelectInstance<T, K, GroupBase<T>>>;
-    /** Points to the container that the select refers to when deciding where to fit menu.
-     * E.g if you render the select in a modal you may want to sent
-     *  containerRef equal to a ref pointing to that modal,
-     *  because in that case the select dropdown change placement to try and stay within the modal */
-    containerRef?: UseAdaptiveMenuPlacementProps['containerRef'];
-    /** The min height that will be reserveed for the select dropdown, used to determine wheter to put
-     * dropdown on top of or bottom of select
-    */
-    dropdownMinHeightPx?: number;
 }
 type SelectFieldProps<T, K extends boolean = false> = SelectProps<T, K> & Omit<InputFieldProps, 'isMulti'> & {
     direction?: StackDirection;
@@ -160,10 +151,6 @@ type SelectFieldProps<T, K extends boolean = false> = SelectProps<T, K> & Omit<I
     validate?: RegisterOptions;
     isRequired?: boolean;
 };
-interface UseAdaptiveMenuPlacementProps {
-    dropdownHeightPx: number;
-    containerRef?: RefObject<HTMLDivElement>;
-}
 
 /**
  * Select component that provides a customizable and accessible select input.
@@ -3829,4 +3816,4 @@ declare const useDidUpdateEffect: (effect: EffectCallback, dependencies: Depende
 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, FormattedNumberInputField, FormattedNumberInputFieldProps, FormattedNumberInputPreset, FormattedNumberInputProps, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, IntentButton, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Message, Modal, ModalBase, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumVal, NumValType, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, PresetOptions, 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, Table, TableProps, Tabs, TabsProps, Tag, TagGroup, TagGroupProps, TagProps, TagsInput, TagsInputProps, TextField, TextFieldProps, TextInputFormatter, TextSizeProps, Textarea, TextareaField, TextareaFieldProps, TextareaProps, Tiny, Toast, ToastProps, Toolbox, ToolboxContent, ToolboxContentProps, ToolboxFooter, ToolboxFooterProps, ToolboxHeader, ToolboxHeaderProps, ToolboxProps, TransitionDirection, UseAdaptiveMenuPlacementProps, UseFormReturn, UseSelectCallbacksProps, UseToastOptions, addAlpha, advancedParseFloat, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useScreenSize, useScrollToBottom, 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, FormattedNumberInputField, FormattedNumberInputFieldProps, FormattedNumberInputPreset, FormattedNumberInputProps, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, IntentButton, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Message, Modal, ModalBase, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumVal, NumValType, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, PresetOptions, 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, Table, TableProps, Tabs, TabsProps, Tag, TagGroup, TagGroupProps, TagProps, TagsInput, TagsInputProps, 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, getMatchingValue, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useScreenSize, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };

package/dist/es/northlight.js

@@ -11597,49 +11597,6 @@ const getMatchingValue = (value, options) => {
   return value;
 };
 
-const useAdaptiveMenuPlacement = ({
-  dropdownHeightPx,
-  containerRef
-}) => {
-  const [menuPlacement, setMenuPlacement] = useState("bottom");
-  const selectContainerRef = useRef(null);
-  const adjustMenuPlacement = () => {
-    if (isNil(selectContainerRef.current))
-      return;
-    let node = selectContainerRef.current.parentNode;
-    while (node.parentNode) {
-      const { overflowY, maxHeight, height } = getComputedStyle(node);
-      if (overflowY !== "visible" || maxHeight || height)
-        break;
-      node = node.parentNode;
-    }
-    const selectRect = selectContainerRef.current.getBoundingClientRect();
-    const containerRect = containerRef && containerRef.current ? containerRef.current.getBoundingClientRect() : node.getBoundingClientRect();
-    const pxToContainerBottom = Math.abs(
-      selectRect.bottom - containerRect.bottom
-    );
-    const pxToContainerTop = Math.abs(selectRect.top - containerRect.top);
-    const pxToWindowBottom = Math.abs(selectRect.bottom - window.innerHeight);
-    const shouldBeAtTop = dropdownHeightPx > pxToContainerBottom && pxToContainerTop > pxToContainerBottom || dropdownHeightPx > pxToWindowBottom && selectRect.top > pxToWindowBottom;
-    setMenuPlacement(shouldBeAtTop ? "top" : "bottom");
-  };
-  useEffect(() => {
-    adjustMenuPlacement();
-    window.addEventListener("resize", adjustMenuPlacement);
-    window.addEventListener("scroll", adjustMenuPlacement);
-    return () => {
-      window.removeEventListener("resize", adjustMenuPlacement);
-      window.addEventListener("scroll", adjustMenuPlacement);
-    };
-  }, []);
-  return { selectContainerRef, menuPlacement };
-};
-
-const DROPDOWN_MAX_HEIGHT = 300;
-const DROPDOWN_MIN_HEIGHT = 55;
-const DROPDOWN_OPTION_HEIGHT = 37;
-const DROPDOWN_PADDING = 30;
-
 var __defProp$m = Object.defineProperty;
 var __defProps$2 = Object.defineProperties;
 var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
@@ -11684,9 +11641,7 @@ const Select = forwardRef$1((_a, ref) => {
     customOption = null,
     customTag = null,
     value,
-    icon,
-    containerRef,
-    dropdownMinHeightPx = DROPDOWN_MIN_HEIGHT
+    icon
   } = _b, rest = __objRest$h(_b, [
     "options",
     "isMulti",
@@ -11699,9 +11654,7 @@ const Select = forwardRef$1((_a, ref) => {
     "customOption",
     "customTag",
     "value",
-    "icon",
-    "containerRef",
-    "dropdownMinHeightPx"
+    "icon"
   ]);
   const handleChange = useSelectCallbacks({
     onChange,
@@ -11723,18 +11676,7 @@ const Select = forwardRef$1((_a, ref) => {
     }
     return prevOptions.current;
   }, [options]);
-  const dropdownHeightPx = Math.max(
-    Math.min(
-      length(options || []) * DROPDOWN_OPTION_HEIGHT + DROPDOWN_PADDING,
-      DROPDOWN_MAX_HEIGHT
-    ),
-    dropdownMinHeightPx
-  );
-  const { selectContainerRef, menuPlacement } = useAdaptiveMenuPlacement({
-    dropdownHeightPx,
-    containerRef
-  });
-  return /* @__PURE__ */ React.createElement(Box, { w: "full", "data-testid": testId, "data-role": "select-container", ref: selectContainerRef }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Box, { w: "full", "data-testid": testId }, /* @__PURE__ */ React.createElement(
     Select$3,
     __spreadValues$m(__spreadProps$2(__spreadValues$m({
       isMulti,
@@ -11752,7 +11694,6 @@ const Select = forwardRef$1((_a, ref) => {
       customOption,
       customTag,
       icon,
-      menuPlacement,
       components: customComponents,
       ref
     }), rest)