@northlight/ui 2.24.5 → 2.25.0

package/dist/es/northlight.d.ts

@@ -877,6 +877,7 @@ interface DateRangePickerProps extends Omit<AriaDateRangePickerProps<DateValue>,
     maxValue?: string | undefined;
     fiscalStartMonth?: number;
     fiscalStartDay?: number;
+    renderInPortal?: boolean;
 }
 interface DatePickerFieldProps extends Omit<InputProps, 'onChange'>, InputFieldProps {
     name: string;
@@ -4181,6 +4182,12 @@ interface CreatableSelectDropdownProps<T extends string = string> {
      * Value of the initially selected option.
      */
     initialValue?: T;
+    /**
+     *
+      Default placement of the menu in relation to the control. 'auto'
+      will flip when there isn't enough space below the control. Defaults to "bottom".
+     */
+    menuPlacement?: 'top' | 'bottom' | 'auto';
 }
 
 /**
@@ -4251,7 +4258,7 @@ interface CreatableSelectDropdownProps<T extends string = string> {
  * }
  * ?)
  */
-declare const CreatableSelectDropdown: <T extends string = string>({ standardOptions, initialPlaceholder, addOptionPlaceholder, creationOption, onOptionChange, width, variant, initialValue, }: CreatableSelectDropdownProps<T>) => JSX.Element;
+declare const CreatableSelectDropdown: <T extends string = string>({ standardOptions, initialPlaceholder, addOptionPlaceholder, creationOption, onOptionChange, width, variant, initialValue, menuPlacement, }: CreatableSelectDropdownProps<T>) => JSX.Element;
 
 declare const useDebounce: <T>(value: T, delay: number) => T;
 

package/dist/es/northlight.js

@@ -7233,6 +7233,15 @@ const parseValue = (value) => {
     return null;
   return { start: parseDate(value.startDate), end: parseDate(value.endDate) };
 };
+const PortalWrapper = ({
+  renderInPortal,
+  children
+}) => {
+  if (renderInPortal) {
+    return /* @__PURE__ */ React.createElement(Portal, null, children);
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+};
 const DateRangePicker = (props) => {
   const {
     isDisabled,
@@ -7246,7 +7255,8 @@ const DateRangePicker = (props) => {
     onChange: onChangeCallback = identity,
     value,
     minValue = "1994-03-08",
-    maxValue
+    maxValue,
+    renderInPortal = false
   } = props;
   const ref = useRef();
   const { group } = useMultiStyleConfig("DatePicker");
@@ -7317,7 +7327,7 @@ const DateRangePicker = (props) => {
         icon: /* @__PURE__ */ React.createElement(Icon$1, { as: XCloseSolid })
       }
     ))),
-    /* @__PURE__ */ React.createElement(Portal, null, state.isOpen && /* @__PURE__ */ React.createElement(PopoverContent, __spreadProps$d(__spreadValues$1o({}, dialogProps), { ref, w: "max-content" }), /* @__PURE__ */ React.createElement(FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(PortalWrapper, { renderInPortal }, state.isOpen && /* @__PURE__ */ React.createElement(PopoverContent, __spreadProps$d(__spreadValues$1o({}, dialogProps), { ref, w: "max-content" }), /* @__PURE__ */ React.createElement(FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(
       RangeCalendar,
       __spreadProps$d(__spreadValues$1o({}, calendarProps), {
         resetDate,
@@ -13889,7 +13899,8 @@ const CreatableSelectDropdown = ({
   onOptionChange,
   width = "100%",
   variant = "outline",
-  initialValue
+  initialValue,
+  menuPlacement = "bottom"
 }) => {
   const initialSelectedOption = useMemo(
     () => {
@@ -13962,6 +13973,7 @@ const CreatableSelectDropdown = ({
   return /* @__PURE__ */ React.createElement(Box, { ref }, /* @__PURE__ */ React.createElement(
     CreatableSelect,
     {
+      menuPlacement,
       chakraStyles: __spreadProps(__spreadValues({}, customSelectStyles), {
         container: (provided) => __spreadProps(__spreadValues({}, provided), {
           width