@ssa-ui-kit/core 3.3.0 → 3.5.0

package/dist/index.js

@@ -15239,7 +15239,7 @@ const TextareaBase = /*#__PURE__*/base_default()('textarea',  true ? {
   status = 'basic'
 }) => getStatusBoxShadow(theme, status, 'rest'), ";color:", ({
   theme
-}) => theme.colors.greyDarker, ";width:100%;min-height:114px;padding:14px;font-weight:400;font-size:0.875rem;line-height:1rem;&::placeholder{color:", ({
+}) => theme.colors.greyDarker, ";width:100%;max-width:100%;box-sizing:border-box;min-height:114px;padding:14px;font-weight:400;font-size:0.875rem;line-height:1rem;&::placeholder{color:", ({
   theme
 }) => theme.colors.greyDarker60, ";}&[readonly]{cursor:default;}&:disabled{color:", ({
   theme
@@ -15247,7 +15247,7 @@ const TextareaBase = /*#__PURE__*/base_default()('textarea',  true ? {
   theme
 }) => `inset 0 0 1.5px 0 ${theme.colors.grey}`, ";background:", ({
   theme
-}) => theme.colors.greyLighter, ";&::placeholder{color:", ({
+}) => theme.colors.greyLighter, ";resize:none;&::placeholder{color:", ({
   theme
 }) => theme.colors.grey, ";}}&:hover:not(:disabled, [readonly]){box-shadow:", ({
   theme,
@@ -15357,7 +15357,8 @@ const Textarea = /*#__PURE__*/external_react_default().forwardRef(function Texta
   onPaste,
   register,
   setCountChar,
-  status = 'basic'
+  status = 'basic',
+  ...rest
 }, ref) {
   (0,external_react_namespaceObject.useEffect)(() => {
     if (!register) {
@@ -15376,6 +15377,7 @@ const Textarea = /*#__PURE__*/external_react_default().forwardRef(function Texta
     onPaste: onPaste,
     title: title,
     status: status,
+    ...rest,
     ...registerResult,
     onChange: (0,utils_namespaceObject.callAll)(setCountChar, onChange),
     ref: (0,external_floating_ui_react_namespaceObject.useMergeRefs)([registerResult?.ref, ref])
@@ -17033,7 +17035,9 @@ const DropdownContext = /*#__PURE__*/external_react_namespaceObject.createContex
   onChange: () => {
     /* noop */
   },
-  maxHeight: 200
+  maxHeight: 200,
+  listRef: undefined,
+  placement: 'bottom'
 });
 function useDropdownContext() {
   return external_react_namespaceObject.useContext(DropdownContext);
@@ -17074,7 +17078,9 @@ function DropdownOptions_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tri
 
 const DropdownOptionsBase = /*#__PURE__*/base_default()("ul",  true ? {
   target: "e1qg2z4z0"
-} : 0)("position:absolute;width:100%;min-width:max-content;list-style:none;margin:4px 0 0;padding:0;background:", ({
+} : 0)("position:absolute;width:100%;min-width:max-content;list-style:none;padding:0;", ({
+  placement = 'bottom'
+}) => placement === 'top' ? 'bottom: 100%; top: auto; margin: 0 0 4px;' : 'top: 100%; bottom: auto; margin: 4px 0 0;', " background:", ({
   theme
 }) => theme.colors.white, ";border-radius:8px;max-height:", ({
   maxHeight = 200
@@ -17102,6 +17108,11 @@ const noItemsMsg = {
  * Renders the scrollable list of options that appears when the dropdown is open.
  * Provides proper ARIA attributes for accessibility and keyboard navigation.
  *
+ * Placement (opening upward or downward) is driven entirely by the parent
+ * Dropdown via context — this component does not calculate position itself.
+ * A ref is attached to the list element so Dropdown can measure its actual
+ * rendered height when determining the correct placement on each open.
+ *
  * @category Form Controls
  * @subcategory Selection
  *
@@ -17135,7 +17146,9 @@ const DropdownOptions = ({
   const {
     onChange,
     activeItem,
-    maxHeight
+    maxHeight,
+    listRef,
+    placement
   } = useDropdownContext();
   const childrenArray = external_react_default().Children.toArray(children).filter(Boolean);
 
@@ -17169,11 +17182,13 @@ const DropdownOptions = ({
     }, noItemsMsg.id));
   }
   return (0,jsx_runtime_namespaceObject.jsx)(DropdownOptionsBase, {
+    ref: listRef,
     role: "listbox",
     tabindex: "-1",
     id: id,
     "aria-labelledby": ariaLabelledby,
     maxHeight: maxHeight,
+    placement: placement,
     children: options
   });
 };
@@ -17223,6 +17238,64 @@ const Avatar = /*#__PURE__*/base_default()("div",  true ? {
   image
 }) => `url(${image})`, " center/contain no-repeat;" + ( true ? "" : 0));
 /* harmony default export */ const Avatar_Avatar = (Avatar);
+;// ./src/components/Dropdown/types.ts
+let DropdownPositions = /*#__PURE__*/function (DropdownPositions) {
+  DropdownPositions["top"] = "top";
+  DropdownPositions["bottom"] = "bottom";
+  DropdownPositions["auto"] = "auto";
+  return DropdownPositions;
+}({});
+
+/**
+ * Props that are controlled by Dropdown component
+ * These props cannot be passed via dropdownProps.toggleButton
+ */
+
+/**
+ * Props for the Dropdown component
+ *
+ * A select-like dropdown component that allows users to choose one option from
+ * a list. Uses compound component pattern with DropdownOption children.
+ * Provides keyboard navigation, accessibility, customizable styling, and
+ * automatic viewport-aware placement of the options list.
+ *
+ * @example
+ * ```tsx
+ * const items = [
+ *   { id: 1, value: 'Option 1' },
+ *   { id: 2, value: 'Option 2' },
+ * ];
+ *
+ * <Dropdown
+ *   selectedItem={items[0]}
+ *   onChange={(item) => console.log(item)}
+ *   placeholder="Select an option"
+ * >
+ *   {items.map(item => (
+ *     <DropdownOption key={item.id} value={item.id}>
+ *       {item.value}
+ *     </DropdownOption>
+ *   ))}
+ * </Dropdown>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Force the list to always open upward (e.g. component near the bottom of the page)
+ * <Dropdown
+ *   selectedItem={selected}
+ *   onChange={handleChange}
+ *   dropdownProps={{ dropdownPosition: DropdownPositions.top }}
+ * >
+ *   ...
+ * </Dropdown>
+ * ```
+ */
+
+/**
+ * Dropdown context value
+ * Provides selection state and change handler to child DropdownOption components
+ */
 ;// ./src/components/Dropdown/Dropdown.tsx
 
 function Dropdown_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
@@ -17235,6 +17308,7 @@ function Dropdown_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to s
 
 
 
+
 const DropdownBase = /*#__PURE__*/base_default()("div",  true ? {
   target: "eizhqtp1"
 } : 0)( true ? {
@@ -17253,8 +17327,13 @@ const SelectedContent = /*#__PURE__*/base_default()("span",  true ? {
  *
  * A flexible dropdown component that allows users to select one option from
  * a list of choices. Uses a compound component pattern with DropdownOption
- * children. Provides keyboard navigation, accessibility features, and click-outside
- * to close functionality.
+ * children. Provides keyboard navigation, accessibility features, click-outside
+ * to close functionality, and automatic viewport-aware placement of the options list.
+ *
+ * On every open the component measures available space below the toggle button
+ * and flips the list upward when there is not enough room, preventing the list
+ * from being clipped by the viewport edge. This behavior can be overridden via
+ * dropdownProps.dropdownPosition.
  *
  * Component structure:
  * - Dropdown (root container with context)
@@ -17305,14 +17384,15 @@ const SelectedContent = /*#__PURE__*/base_default()("span",  true ? {
  *
  * @example
  * ```tsx
- * // With custom props for sub-components
+ * // With custom props for sub-components and forced upward placement
  * <Dropdown
  *   selectedItem={selected}
  *   onChange={handleChange}
  *   dropdownProps={{
  *     base: { id: 'my-dropdown' },
  *     toggleButton: { 'data-testid': 'dropdown-toggle' },
- *     toggleButtonArrow: { className: 'custom-arrow' }
+ *     toggleButtonArrow: { className: 'custom-arrow' },
+ *     dropdownPosition: DropdownPositions.top,
  *   }}
  * >
  *   {options.map(opt => (
@@ -17347,14 +17427,19 @@ const Dropdown = ({
   maxHeight = 200,
   dropdownProps: componentProps
 }) => {
+  const {
+    dropdownPosition = DropdownPositions.auto
+  } = componentProps ?? {};
   const theme = (0,react_namespaceObject.useTheme)();
   const dropdownRef = (0,external_react_namespaceObject.useRef)(null);
+  const listRef = (0,external_react_namespaceObject.useRef)(null);
   const dropdownId = (0,external_react_namespaceObject.useId)();
   const options = [];
   const [isFocused, setIsFocused] = (0,external_react_namespaceObject.useState)(false);
   const [isOpen, setIsOpen] = (0,external_react_namespaceObject.useState)(isInitOpen || false);
   const [colors, setColors] = (0,external_react_namespaceObject.useState)([]);
   const [activeItem, setActiveItem] = (0,external_react_namespaceObject.useState)(selectedItem);
+  const [placement, setPlacement] = (0,external_react_namespaceObject.useState)('bottom');
   const onChange = item => {
     const innerItem = options.filter(option => option.value === item)[0];
     setIsOpen(false);
@@ -17387,6 +17472,17 @@ const Dropdown = ({
       setIsOpen(false);
     }
   }, [isDisabled]);
+  (0,external_react_namespaceObject.useLayoutEffect)(() => {
+    if (!isOpen || !dropdownRef.current) return;
+    if (dropdownPosition !== DropdownPositions.auto) {
+      setPlacement(dropdownPosition);
+      return;
+    }
+    const rect = dropdownRef.current.getBoundingClientRect();
+    const listHeight = listRef.current?.offsetHeight || maxHeight;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    setPlacement(spaceBelow < listHeight ? 'top' : 'bottom');
+  }, [isOpen]);
   const childrenArray = external_react_default().Children.toArray(children).filter(Boolean);
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -17401,8 +17497,10 @@ const Dropdown = ({
   const contextValue = external_react_default().useMemo(() => ({
     onChange,
     activeItem,
-    maxHeight
-  }), [onChange, activeItem, maxHeight]);
+    maxHeight,
+    listRef,
+    placement
+  }), [onChange, activeItem, maxHeight, placement]);
   const value = activeItem ? activeItem.label || activeItem.children || activeItem.value || activeItem || placeholder : placeholder;
   const rawAvatar = activeItem && activeItem.avatar;
   const selectedAvatar = rawAvatar != null ? typeof rawAvatar === 'string' ? (0,jsx_runtime_namespaceObject.jsx)(Avatar_Avatar, {
@@ -40289,21 +40387,6 @@ const BarLineComplexChartTooltip = /*#__PURE__*/(0,external_react_namespaceObjec
 });
 ;// ./src/components/Charts/BarLineComplexChart/constants.ts
 const FONT_FAMILY = 'Manrope, sans-serif';
-const TITLE_PADDING_LEFT = {
-  mobile: 10,
-  md: 10,
-  other: 20
-};
-const TITLE_PADDING_TOP = {
-  mobile: 13,
-  md: 18,
-  other: 20
-};
-const TITLE_FONT_SIZE = {
-  mobile: 16,
-  md: 16,
-  other: 20
-};
 ;// ./src/components/Charts/hooks/usePlotlyDefaultConfig.ts
 
 const usePlotlyDefaultConfig = () => {
@@ -40348,6 +40431,7 @@ function BarLineComplexChartView_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You
 
 
 
+
 var BarLineComplexChartView_ref =  true ? {
   name: "sj7adp",
   styles: "background:#fff;border-radius:8px;box-shadow:-2px 2px 8px 0px rgba(43, 45, 49, 0.24);padding:4px 8px"
@@ -40366,7 +40450,6 @@ const BarLineComplexChartView = ({
   const theme = (0,react_namespaceObject.useTheme)();
   const plotlyWrapperRef = (0,external_react_namespaceObject.useRef)(null);
   const plotlyDefaultLayoutConfig = usePlotlyDefaultConfig();
-  const deviceType = (0,hooks_namespaceObject.useDeviceType)();
   const {
     data
   } = useBarLineComplexChartContext();
@@ -40381,6 +40464,9 @@ const BarLineComplexChartView = ({
   const {
     setIsOpen
   } = useTooltipContext();
+  const {
+    features
+  } = useBarLineComplexChartContext();
   const {
     layout = {},
     config = {},
@@ -40388,8 +40474,6 @@ const BarLineComplexChartView = ({
   } = props;
   const {
     margin = {},
-    title = {},
-    titlefont = {},
     yaxis = {},
     yaxis2 = {},
     xaxis = {},
@@ -40402,9 +40486,6 @@ const BarLineComplexChartView = ({
     size: isFullscreenMode ? 16 : 12,
     weight: 500
   };
-  if (typeof props.cardProps?.title === 'string' && typeof title !== 'string' && typeof title.text !== 'string') {
-    title.text = props.cardProps.title;
-  }
   const formattedTicks = timestamps.map((timestamp, index) => {
     const dateTime = new Date(timestamp);
     const monthYear = dateTime.toLocaleDateString('en-US', {
@@ -40474,11 +40555,15 @@ const BarLineComplexChartView = ({
       window.removeEventListener('resize', handleDebouncedFn, false);
     };
   }, []);
+  // title is rendered as an absolutely positioned overlay so it shares the same
+  // visual row as Plotly's mode bar buttons, matching the original Plotly title behavior.
+  // Plotly does not support JSX in layout.title, so this DOM overlay is used instead.
+  // The Wrapper is kept `position: relative` so the overlay coordinates are relative to the chart.
   return (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
     className: "bar-line-complex-chart-wrapper",
     ref: plotlyWrapperRef,
     css: /*#__PURE__*/(0,react_namespaceObject.css)({
-      position: isFullscreenMode ? 'fixed' : 'static',
+      position: isFullscreenMode ? 'fixed' : 'relative',
       top: isFullscreenMode ? '2.5%' : 'unset',
       left: isFullscreenMode ? '2.5%' : 'unset',
       width: isFullscreenMode ? '95%' : width,
@@ -40486,6 +40571,7 @@ const BarLineComplexChartView = ({
       borderRadius: 20,
       zIndex: isFullscreenMode ? 2 : 1,
       overflow: 'hidden',
+      background: theme.colors.white,
       boxShadow: 'rgba(42, 48, 57, 0.08) 0px 10px 40px 0px',
       '& .plotly': {
         '& > div': isFullscreenMode && {
@@ -40499,7 +40585,28 @@ const BarLineComplexChartView = ({
         }
       }
     },  true ? "" : 0,  true ? "" : 0),
-    children: [(0,jsx_runtime_namespaceObject.jsx)((external_react_plotly_js_default()), {
+    children: [features?.includes('header') && props.cardProps?.title && (0,jsx_runtime_namespaceObject.jsx)(CardHeader_CardHeader, {
+      css: /*#__PURE__*/(0,react_namespaceObject.css)({
+        position: 'absolute',
+        top: isFullscreenMode ? '13px' : '10px',
+        left: '10px',
+        width: 'auto',
+        marginBottom: 0,
+        zIndex: 1
+      },  true ? "" : 0,  true ? "" : 0),
+      children: (0,jsx_runtime_namespaceObject.jsx)(WidgetCardTitle, {
+        variant: "h3",
+        weight: "bold",
+        css: /*#__PURE__*/(0,react_namespaceObject.css)({
+          flexDirection: 'row',
+          fontSize: isFullscreenMode ? '24px' : '12px',
+          [theme.mediaQueries.md]: {
+            fontSize: isFullscreenMode ? '24px' : '16px'
+          }
+        },  true ? "" : 0,  true ? "" : 0),
+        children: props.cardProps.title
+      })
+    }), (0,jsx_runtime_namespaceObject.jsx)((external_react_plotly_js_default()), {
       divId: 'bar-line-complex-chart-graph',
       css: /*#__PURE__*/(0,react_namespaceObject.css)({
         width: isFullscreenMode ? '100%' : width,
@@ -40519,27 +40626,12 @@ const BarLineComplexChartView = ({
         orientation: 1,
         margin: {
           b: isFullscreenMode ? 15 : 0,
-          l: orientation === 'v' ? (0,utils_namespaceObject.propOr)(TITLE_PADDING_LEFT.other, deviceType)(TITLE_PADDING_LEFT) : isFullscreenMode ? 30 : 15,
+          l: orientation === 'v' ? 10 : isFullscreenMode ? 30 : 15,
           r: orientation === 'v' ? 40 : 0,
-          t: (0,utils_namespaceObject.propOr)(TITLE_PADDING_TOP.other, deviceType)(TITLE_PADDING_TOP) + 25,
+          t: features?.includes('header') && props.cardProps?.title ? isFullscreenMode ? 45 : 43 : 10,
           pad: 10,
           ...margin
         },
-        title: typeof title === 'string' ? title : {
-          x: 0,
-          y: 1,
-          font: {
-            size: isFullscreenMode ? 24 : (0,utils_namespaceObject.propOr)(TITLE_FONT_SIZE.other, deviceType)(TITLE_FONT_SIZE),
-            weight: 700,
-            family: FONT_FAMILY,
-            ...titlefont
-          },
-          pad: {
-            l: (0,utils_namespaceObject.propOr)(TITLE_PADDING_LEFT.other, deviceType)(TITLE_PADDING_LEFT),
-            t: (0,utils_namespaceObject.propOr)(TITLE_PADDING_TOP.other, deviceType)(TITLE_PADDING_TOP)
-          },
-          ...title
-        },
         barmode: 'group',
         autosize: false,
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -40689,6 +40781,8 @@ const BarLineComplexChartComponent = ({
   onFullscreenModeChange,
   ...rest
 }) => {
+  const effectiveTitle = cardProps?.title ?? title;
+  const effectiveFeatures = effectiveTitle && !features.includes('header') ? [...features, 'header'] : features;
   const tooltip = useTooltip();
   const {
     isFullscreenMode,
@@ -40711,14 +40805,14 @@ const BarLineComplexChartComponent = ({
     lineShape: lineShape,
     maxVisibleBars: maxVisibleBars,
     maxVisibleLines: maxVisibleLines,
-    features: features,
+    features: effectiveFeatures,
     children: (0,jsx_runtime_namespaceObject.jsx)(TooltipContext.Provider, {
       value: tooltip,
       children: (0,jsx_runtime_namespaceObject.jsx)(BarLineComplexChartInternal, {
         ...rest,
         cardProps: {
           ...cardProps,
-          title: cardProps?.title || title
+          title: effectiveTitle
         }
       })
     })
@@ -47706,6 +47800,7 @@ const getCandlestickPlotData = (style, data, increasingColor, decreasingColor) =
   }];
 };
 ;// ./src/components/Charts/CandlestickChart/CandlestickChart.tsx
+
 function CandlestickChart_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 
@@ -47716,14 +47811,23 @@ function CandlestickChart_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tr
 
 
 
+
 var CandlestickChart_ref =  true ? {
+  name: "zxsb69",
+  styles: "position:relative;width:100%;height:100%"
+} : 0;
+var CandlestickChart_ref2 =  true ? {
+  name: "1j8nx2m",
+  styles: "position:absolute;top:1px;left:10px;width:auto;margin-bottom:0;z-index:1"
+} : 0;
+var CandlestickChart_ref3 =  true ? {
   name: "w1atjl",
   styles: "width:100%;height:100%"
 } : 0;
 const CandlestickChartComponent = ({
   title,
   data,
-  features,
+  features = [],
   widgetCardProps,
   style = 'hollow',
   ...plotParams
@@ -47755,57 +47859,66 @@ const CandlestickChartComponent = ({
       gravity: '1'
     });
   }
-  return (0,jsx_runtime_namespaceObject.jsx)(WithWidgetCard, {
-    features: features,
-    cardProps: {
-      ...widgetCardProps
-    },
-    children: (0,jsx_runtime_namespaceObject.jsx)((external_react_plotly_js_default()), {
-      layout: {
-        ...plotlyDefaultLayoutConfig.layout,
-        title: {
-          text: title,
-          x: 0,
-          y: 1,
-          pad: {
-            l: 10,
-            t: 5
-          },
-          font: {
-            size: 24,
-            weight: 700,
-            family: 'Manrope, sans-serif'
-          }
-        },
-        dragmode: 'zoom',
-        xaxis: {
-          rangeslider: {
-            visible: false
-          }
-        },
-        yaxis: {
-          side: 'right'
-        },
-        margin: {
-          t: 20,
-          b: 40,
-          l: 20,
-          r: 20
-        },
-        showlegend: false,
-        ...layout
-      },
-      css: CandlestickChart_ref,
-      useResizeHandler: true,
-      data: plotData,
-      config: {
-        ...plotlyDefaultLayoutConfig.config,
-        modeBarButtons: [extraModeBarButtons, ['zoom2d', 'pan2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d']],
-        ...config
+  return (
+    // title is rendered as an absolutely positioned overlay so it shares the same
+    // visual row as Plotly's mode bar buttons, matching the original Plotly title behavior.
+    // Plotly does not support JSX in layout.title, so this DOM overlay is used instead.
+    (0,jsx_runtime_namespaceObject.jsx)(WithWidgetCard, {
+      features: features,
+      cardProps: {
+        ...widgetCardProps
       },
-      ...restPlotParams
+      children: (0,jsx_runtime_namespaceObject.jsxs)("div", {
+        css: CandlestickChart_ref,
+        children: [title && (0,jsx_runtime_namespaceObject.jsx)(CardHeader_CardHeader, {
+          css: CandlestickChart_ref2,
+          children: (0,jsx_runtime_namespaceObject.jsx)(WidgetCardTitle, {
+            variant: "h3",
+            weight: "bold",
+            css: /*#__PURE__*/(0,react_namespaceObject.css)({
+              flexDirection: 'row',
+              lineHeight: 1,
+              fontSize: '24px',
+              [theme.mediaQueries.md]: {
+                fontSize: '24px'
+              }
+            },  true ? "" : 0,  true ? "" : 0),
+            children: title
+          })
+        }), (0,jsx_runtime_namespaceObject.jsx)((external_react_plotly_js_default()), {
+          layout: {
+            ...plotlyDefaultLayoutConfig.layout,
+            dragmode: 'zoom',
+            xaxis: {
+              rangeslider: {
+                visible: false
+              }
+            },
+            yaxis: {
+              side: 'right'
+            },
+            margin: {
+              t: 20,
+              b: 40,
+              l: 20,
+              r: 20
+            },
+            showlegend: false,
+            ...layout
+          },
+          css: CandlestickChart_ref3,
+          useResizeHandler: true,
+          data: plotData,
+          config: {
+            ...plotlyDefaultLayoutConfig.config,
+            modeBarButtons: [extraModeBarButtons, ['zoom2d', 'pan2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d']],
+            ...config
+          },
+          ...restPlotParams
+        })]
+      })
     })
-  });
+  );
 };
 const CandlestickChart = WithFullscreenMode(CandlestickChartComponent);
 ;// ./src/components/Charts/CandlestickChart/index.ts
@@ -49630,6 +49743,7 @@ const RowsPerPageDropdown = ({
   selectedItem = DEFAULT_PER_PAGE_VALUE,
   rowsPerPageList = ROWS_PER_PAGE_LIST,
   rowsPerPageText = 'Rows per page',
+  dropdownPosition,
   ...rest
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
@@ -49675,7 +49789,8 @@ const RowsPerPageDropdown = ({
               stroke: theme.colors.greyDarker
             }
           }
-        }
+        },
+        dropdownPosition
       },
       ...rest,
       children: rowsPerPageList.map(item => (0,jsx_runtime_namespaceObject.jsx)(DropdownOption_DropdownOption, {