@kaizen/components 0.0.0-canary-fix-filter-select-jump-issue-useHasStableYPosition-20250120225815 → 0.0.0-canary-test-1-20250201010717

package/dist/cjs/Calendar/CalendarRange/CalendarRange.cjs

@@ -24,9 +24,11 @@ var CalendarRange = function (_a) {
     classNameOverride = _a.classNameOverride,
     selected = _a.selected,
     defaultMonth = _a.defaultMonth,
-    _d = _a.locale,
-    locale$1 = _d === undefined ? locale.enAU : _d,
-    restProps = tslib.__rest(_a, ["id", "onMount", "hasDivider", "classNameOverride", "selected", "defaultMonth", "locale"]);
+    _d = _a.numberOfMonths,
+    numberOfMonths = _d === undefined ? 2 : _d,
+    _e = _a.locale,
+    locale$1 = _e === undefined ? locale.enAU : _e,
+    restProps = tslib.__rest(_a, ["id", "onMount", "hasDivider", "classNameOverride", "selected", "defaultMonth", "numberOfMonths", "locale"]);
   var calendarRef = React.useRef(null);
   React.useEffect(function () {
     if (calendarRef.current) onMount === null || onMount === undefined ? undefined : onMount(calendarRef.current);
@@ -37,6 +39,7 @@ var CalendarRange = function (_a) {
   var classNames = tslib.__assign(tslib.__assign({}, baseCalendarClassNames.baseCalendarClassNames), {
     month: hasDivider ? CalendarRange_module.monthWithDivider : CalendarRange_module.month,
     caption_end: CalendarRange_module.captionEnd,
+    caption_start: CalendarRange_module.captionStart,
     nav: CalendarRange_module.nav,
     day_range_start: CalendarRange_module.dayRangeStart,
     day_range_end: CalendarRange_module.dayRangeEnd,
@@ -68,7 +71,7 @@ var CalendarRange = function (_a) {
         });
       }
     },
-    numberOfMonths: 2,
+    numberOfMonths: numberOfMonths,
     locale: locale$1
   }, restProps)));
 };

package/dist/cjs/Calendar/CalendarRange/CalendarRange.module.scss.cjs

@@ -5,6 +5,7 @@ var styles = {
   "monthWithDivider": "CalendarRange-module_monthWithDivider__JY-56",
   "nav": "CalendarRange-module_nav__OtaVb",
   "captionEnd": "CalendarRange-module_captionEnd__GSLQO",
+  "captionStart": "CalendarRange-module_captionStart__K5hlF",
   "dayRangeStart": "CalendarRange-module_dayRangeStart__TwdDT",
   "dayRangeEnd": "CalendarRange-module_dayRangeEnd__y6dEB",
   "dayRangeMiddle": "CalendarRange-module_dayRangeMiddle__SybKY"

package/dist/cjs/Filter/FilterDateRangePicker/FilterDateRangePicker.cjs

@@ -2,6 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var classnames = require('classnames');
 var getLocale = require('../../DatePicker/utils/getLocale.cjs');
 var Filter = require('../Filter/Filter.cjs');
 var FilterContents = require('../Filter/subcomponents/FilterContents/FilterContents.cjs');
@@ -9,12 +10,14 @@ var DateRangeDisplayLabel = require('./subcomponents/DateRangeDisplayLabel/DateR
 var FilterDateRangePickerField = require('./subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.cjs');
 var isValidRange = require('./subcomponents/FilterDateRangePickerField/utils/isValidRange.cjs');
 var isCompleteDateRange = require('./utils/isCompleteDateRange.cjs');
+var FilterDateRangePicker_module = require('./FilterDateRangePicker.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var FilterDateRangePicker = function (_a) {
   var propsId = _a.id,
     isOpen = _a.isOpen,
@@ -38,7 +41,9 @@ var FilterDateRangePicker = function (_a) {
         label: label
       }, triggerProps));
     }
-  }, React__default.default.createElement(FilterContents.FilterContents, null, React__default.default.createElement(FilterDateRangePickerField.FilterDateRangePickerField, tslib.__assign({
+  }, React__default.default.createElement(FilterContents.FilterContents, {
+    classNameOverride: classnames__default.default(FilterDateRangePicker_module.filterDateRangePickerContents)
+  }, React__default.default.createElement(FilterDateRangePickerField.FilterDateRangePickerField, tslib.__assign({
     id: "".concat(id, "--input"),
     label: label,
     locale: locale,

package/dist/cjs/Filter/FilterDateRangePicker/FilterDateRangePicker.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+var styles = {
+  "filterDateRangePickerContents": "FilterDateRangePicker-module_filterDateRangePickerContents__P7eNa"
+};
+module.exports = styles;

package/dist/cjs/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.cjs

@@ -13,6 +13,7 @@ require('react-day-picker');
 var parseDateFromTextFormatValue = require('../../../../Calendar/utils/parseDateFromTextFormatValue.cjs');
 var getLocale = require('../../../../DatePicker/utils/getLocale.cjs');
 var useDateInputHandlers = require('../../../FilterDatePicker/hooks/useDateInputHandlers.cjs');
+var useMediaQueries = require('../../../../utils/useMediaQueries.cjs');
 var DateRangeInputField = require('../DateRangeInputField/DateRangeInputField.cjs');
 var filterDateRangePickerFieldReducer = require('./filterDateRangePickerFieldReducer.cjs');
 var useEndDateValidation = require('./hooks/useEndDateValidation.cjs');
@@ -44,6 +45,7 @@ var FilterDateRangePickerField = function (_a) {
     restProps = tslib.__rest(_a, ["id", "label", "locale", "defaultMonth", "selectedRange", "onRangeChange", "disabledDays", "inputStartDateProps", "inputEndDateProps", "description", "validationMessage", "onValidate", "classNameOverride"]);
   var formatMessage = i18nReactIntl.useIntl().formatMessage;
   var locale = getLocale.getLocale(propsLocale);
+  var queries = useMediaQueries.useMediaQueries().queries;
   var translatedDateFrom = formatMessage({
     id: 'filterDateRangePicker.dateFrom',
     defaultMessage: 'Date from',
@@ -222,7 +224,7 @@ var FilterDateRangePickerField = function (_a) {
       dateStart: dateStartValidation.validationMessage,
       dateEnd: dateEndValidation.validationMessage
     },
-    classNameOverride: FilterDateRangePickerField_module.dateRangeInputField
+    classNameOverride: classnames__default.default(FilterDateRangePickerField_module.dateRangeInputField)
   }), React__default.default.createElement(CalendarRange.CalendarRange, {
     disabled: disabledDays,
     locale: locale,
@@ -232,6 +234,7 @@ var FilterDateRangePickerField = function (_a) {
     },
     onSelect: handleCalendarSelectRange,
     month: state.startMonth,
+    numberOfMonths: queries.isSmall ? 1 : 2,
     onMonthChange: function (value) {
       return dispatch({
         type: 'navigate_months',

package/dist/cjs/__rc__/Select/subcomponents/ListBox/ListBox.cjs

@@ -4,8 +4,8 @@ var tslib = require('tslib');
 var React = require('react');
 var listbox = require('@react-aria/listbox');
 var classnames = require('classnames');
+var useIsClientReady = require('../../../../__utilities__/useIsClientReady/useIsClientReady.cjs');
 var SelectContext = require('../../context/SelectContext.cjs');
-var useHasStableYPosition = require('../../hooks/useHasStableYPosition.cjs');
 var ListBox_module = require('./ListBox.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -43,31 +43,32 @@ var ListBox = function (_a) {
     menuProps = _a.menuProps,
     classNameOverride = _a.classNameOverride,
     restProps = tslib.__rest(_a, ["children", "menuProps", "classNameOverride"]);
+  var isClientReady = useIsClientReady.useIsClientReady();
   var state = SelectContext.useSelectContext().state;
   var ref = React.useRef(null);
-  var hasStableYPosition = useHasStableYPosition.useHasStableYPosition(ref);
   var listBoxProps = listbox.useListBox(tslib.__assign(tslib.__assign({}, menuProps), {
     disallowEmptySelection: true,
     // This is to ensure that the listbox doesn't use React Aria's auto focus feature for Listbox, which creates a visual bug
     autoFocus: false
   }), state, ref).listBoxProps;
   /**
-   * This uses the hasStableYPosition to determine if the position is stable within the window
+   * This uses the new useIsClientReady to ensure document exists before trying to querySelector and give the time to focus to the correct element
    */
   React.useEffect(function () {
     var _a;
-    if (hasStableYPosition) {
+    if (isClientReady) {
       var optionKey = getOptionKeyFromCollection(state);
       var focusToElement = safeQuerySelector("[data-key='".concat(optionKey, "']"));
       if (focusToElement) {
         focusToElement.focus();
       } else {
+        // If an element is not found, focus on the listbox. This ensures the list can still be navigated to via keyboard if the keys do not align to the data attributes of the list items.
         (_a = ref.current) === null || _a === undefined ? undefined : _a.focus();
       }
     }
     // Only run this effect for checking the first successful render
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hasStableYPosition]);
+  }, [isClientReady]);
   return React__default.default.createElement("ul", tslib.__assign({
     ref: ref,
     className: classnames__default.default(ListBox_module.listBox, classNameOverride)

package/dist/cjs/__utilities__/useIsClientReady/useIsClientReady.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * A hook that returns a truthy value indicating if the code can be run on client side.
+ * This is a useful hook for determining if the `document` or `window` objects are available.
+ */
+var useIsClientReady = function () {
+  var _a = React.useState(false),
+    isClientReady = _a[0],
+    setIsClientReady = _a[1];
+  React.useEffect(function () {
+    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+      setIsClientReady(true);
+    }
+  }, []);
+  return isClientReady;
+};
+exports.useIsClientReady = useIsClientReady;

package/dist/esm/Calendar/CalendarRange/CalendarRange.mjs

@@ -17,9 +17,11 @@ const CalendarRange = /*#__PURE__*/function () {
       classNameOverride = _a.classNameOverride,
       selected = _a.selected,
       defaultMonth = _a.defaultMonth,
-      _d = _a.locale,
-      locale = _d === undefined ? enAU : _d,
-      restProps = __rest(_a, ["id", "onMount", "hasDivider", "classNameOverride", "selected", "defaultMonth", "locale"]);
+      _d = _a.numberOfMonths,
+      numberOfMonths = _d === undefined ? 2 : _d,
+      _e = _a.locale,
+      locale = _e === undefined ? enAU : _e,
+      restProps = __rest(_a, ["id", "onMount", "hasDivider", "classNameOverride", "selected", "defaultMonth", "numberOfMonths", "locale"]);
     var calendarRef = useRef(null);
     useEffect(function () {
       if (calendarRef.current) onMount === null || onMount === undefined ? undefined : onMount(calendarRef.current);
@@ -30,6 +32,7 @@ const CalendarRange = /*#__PURE__*/function () {
     var classNames = __assign(__assign({}, baseCalendarClassNames), {
       month: hasDivider ? styles.monthWithDivider : styles.month,
       caption_end: styles.captionEnd,
+      caption_start: styles.captionStart,
       nav: styles.nav,
       day_range_start: styles.dayRangeStart,
       day_range_end: styles.dayRangeEnd,
@@ -61,7 +64,7 @@ const CalendarRange = /*#__PURE__*/function () {
           });
         }
       },
-      numberOfMonths: 2,
+      numberOfMonths: numberOfMonths,
       locale: locale
     }, restProps)));
   };

package/dist/esm/Calendar/CalendarRange/CalendarRange.module.scss.mjs

@@ -3,6 +3,7 @@ var styles = {
   "monthWithDivider": "CalendarRange-module_monthWithDivider__JY-56",
   "nav": "CalendarRange-module_nav__OtaVb",
   "captionEnd": "CalendarRange-module_captionEnd__GSLQO",
+  "captionStart": "CalendarRange-module_captionStart__K5hlF",
   "dayRangeStart": "CalendarRange-module_dayRangeStart__TwdDT",
   "dayRangeEnd": "CalendarRange-module_dayRangeEnd__y6dEB",
   "dayRangeMiddle": "CalendarRange-module_dayRangeMiddle__SybKY"

package/dist/esm/Filter/FilterDateRangePicker/FilterDateRangePicker.mjs

@@ -1,5 +1,6 @@
 import { __rest, __assign } from 'tslib';
 import React, { useId } from 'react';
+import classnames from 'classnames';
 import { getLocale } from '../../DatePicker/utils/getLocale.mjs';
 import { Filter } from '../Filter/Filter.mjs';
 import { FilterContents } from '../Filter/subcomponents/FilterContents/FilterContents.mjs';
@@ -7,6 +8,7 @@ import { DateRangeDisplayLabel } from './subcomponents/DateRangeDisplayLabel/Dat
 import { FilterDateRangePickerField } from './subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.mjs';
 import { isValidRange } from './subcomponents/FilterDateRangePickerField/utils/isValidRange.mjs';
 import { isCompleteDateRange } from './utils/isCompleteDateRange.mjs';
+import styles from './FilterDateRangePicker.module.css.mjs';
 const FilterDateRangePicker = /*#__PURE__*/function () {
   const FilterDateRangePicker = function (_a) {
     var propsId = _a.id,
@@ -31,7 +33,9 @@ const FilterDateRangePicker = /*#__PURE__*/function () {
           label: label
         }, triggerProps));
       }
-    }, /*#__PURE__*/React.createElement(FilterContents, null, /*#__PURE__*/React.createElement(FilterDateRangePickerField, __assign({
+    }, /*#__PURE__*/React.createElement(FilterContents, {
+      classNameOverride: classnames(styles.filterDateRangePickerContents)
+    }, /*#__PURE__*/React.createElement(FilterDateRangePickerField, __assign({
       id: "".concat(id, "--input"),
       label: label,
       locale: locale,

package/dist/esm/Filter/FilterDateRangePicker/FilterDateRangePicker.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "filterDateRangePickerContents": "FilterDateRangePicker-module_filterDateRangePickerContents__P7eNa"
+};
+export { styles as default };

package/dist/esm/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.mjs

@@ -11,6 +11,7 @@ import 'react-day-picker';
 import { parseDateFromTextFormatValue } from '../../../../Calendar/utils/parseDateFromTextFormatValue.mjs';
 import { getLocale } from '../../../../DatePicker/utils/getLocale.mjs';
 import { useDateInputHandlers } from '../../../FilterDatePicker/hooks/useDateInputHandlers.mjs';
+import { useMediaQueries } from '../../../../utils/useMediaQueries.mjs';
 import { DateRangeInputField } from '../DateRangeInputField/DateRangeInputField.mjs';
 import { filterDatePickerFieldReducer } from './filterDateRangePickerFieldReducer.mjs';
 import { useEndDateValidation } from './hooks/useEndDateValidation.mjs';
@@ -36,6 +37,7 @@ const FilterDateRangePickerField = /*#__PURE__*/function () {
       restProps = __rest(_a, ["id", "label", "locale", "defaultMonth", "selectedRange", "onRangeChange", "disabledDays", "inputStartDateProps", "inputEndDateProps", "description", "validationMessage", "onValidate", "classNameOverride"]);
     var formatMessage = useIntl().formatMessage;
     var locale = getLocale(propsLocale);
+    var queries = useMediaQueries().queries;
     var translatedDateFrom = formatMessage({
       id: 'filterDateRangePicker.dateFrom',
       defaultMessage: 'Date from',
@@ -214,7 +216,7 @@ const FilterDateRangePickerField = /*#__PURE__*/function () {
         dateStart: dateStartValidation.validationMessage,
         dateEnd: dateEndValidation.validationMessage
       },
-      classNameOverride: styles.dateRangeInputField
+      classNameOverride: classnames(styles.dateRangeInputField)
     }), /*#__PURE__*/React.createElement(CalendarRange, {
       disabled: disabledDays,
       locale: locale,
@@ -224,6 +226,7 @@ const FilterDateRangePickerField = /*#__PURE__*/function () {
       },
       onSelect: handleCalendarSelectRange,
       month: state.startMonth,
+      numberOfMonths: queries.isSmall ? 1 : 2,
       onMonthChange: function (value) {
         return dispatch({
           type: 'navigate_months',

package/dist/esm/__rc__/Select/subcomponents/ListBox/ListBox.mjs

@@ -2,8 +2,8 @@ import { __rest, __assign } from 'tslib';
 import React, { useRef, useEffect } from 'react';
 import { useListBox } from '@react-aria/listbox';
 import classnames from 'classnames';
+import { useIsClientReady } from '../../../../__utilities__/useIsClientReady/useIsClientReady.mjs';
 import { useSelectContext } from '../../context/SelectContext.mjs';
-import { useHasStableYPosition } from '../../hooks/useHasStableYPosition.mjs';
 import styles from './ListBox.module.scss.mjs';
 
 /** A util to retrieve the key of the correct focusable items based of the focus strategy
@@ -35,31 +35,32 @@ const ListBox = /*#__PURE__*/function () {
       menuProps = _a.menuProps,
       classNameOverride = _a.classNameOverride,
       restProps = __rest(_a, ["children", "menuProps", "classNameOverride"]);
+    var isClientReady = useIsClientReady();
     var state = useSelectContext().state;
     var ref = useRef(null);
-    var hasStableYPosition = useHasStableYPosition(ref);
     var listBoxProps = useListBox(__assign(__assign({}, menuProps), {
       disallowEmptySelection: true,
       // This is to ensure that the listbox doesn't use React Aria's auto focus feature for Listbox, which creates a visual bug
       autoFocus: false
     }), state, ref).listBoxProps;
     /**
-     * This uses the hasStableYPosition to determine if the position is stable within the window
+     * This uses the new useIsClientReady to ensure document exists before trying to querySelector and give the time to focus to the correct element
      */
     useEffect(function () {
       var _a;
-      if (hasStableYPosition) {
+      if (isClientReady) {
         var optionKey = getOptionKeyFromCollection(state);
         var focusToElement = safeQuerySelector("[data-key='".concat(optionKey, "']"));
         if (focusToElement) {
           focusToElement.focus();
         } else {
+          // If an element is not found, focus on the listbox. This ensures the list can still be navigated to via keyboard if the keys do not align to the data attributes of the list items.
           (_a = ref.current) === null || _a === undefined ? undefined : _a.focus();
         }
       }
       // Only run this effect for checking the first successful render
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [hasStableYPosition]);
+    }, [isClientReady]);
     return /*#__PURE__*/React.createElement("ul", __assign({
       ref: ref,
       className: classnames(styles.listBox, classNameOverride)

package/dist/esm/__utilities__/useIsClientReady/useIsClientReady.mjs

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * A hook that returns a truthy value indicating if the code can be run on client side.
+ * This is a useful hook for determining if the `document` or `window` objects are available.
+ */
+var useIsClientReady = function () {
+  var _a = useState(false),
+    isClientReady = _a[0],
+    setIsClientReady = _a[1];
+  useEffect(function () {
+    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+      setIsClientReady(true);
+    }
+  }, []);
+  return isClientReady;
+};
+export { useIsClientReady };

package/dist/styles.css

@@ -1863,6 +1863,10 @@
 .CalendarRange-module_captionEnd__GSLQO .CalendarRange-module_nav__OtaVb {
   flex-direction: row-reverse;
 }
+.CalendarRange-module_captionStart__K5hlF.CalendarRange-module_captionEnd__GSLQO .CalendarRange-module_nav__OtaVb {
+  justify-content: space-between;
+  flex-direction: row;
+}
 
 .CalendarRange-module_dayRangeStart__TwdDT,
 .CalendarRange-module_dayRangeEnd__y6dEB {
@@ -2390,12 +2394,13 @@
 /** THIS IS AN AUTOGENERATED FILE **/
 .Content-module_content__ZeTRs {
   max-width: 1392px;
-  padding: 0 72px;
+  margin: 0 72px;
   width: 100%;
 }
 @media (max-width: calc(1080px - 1px)) {
   .Content-module_content__ZeTRs {
-    padding: 0 12px;
+    margin: 0 12px;
+    width: calc(100% - 2 * 12px);
   }
 }
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -3710,6 +3715,14 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 .FilterDateRangePickerField-module_dateRangeInputField__EEU-X {
   margin-bottom: var(--spacing-24, 1.5rem);
 }
+@media (width <= 320px) {
+  .FilterDateRangePicker-module_filterDateRangePickerContents__P7eNa {
+    padding: var(--spacing-16);
+    max-width: 320px;
+    box-sizing: border-box;
+  }
+}
+
 /** THIS IS AN AUTOGENERATED FILE **/
 .ListBox-module_listBox__q95MO {
   list-style: none;

package/dist/types/Calendar/CalendarRange/CalendarRange.d.ts

@@ -7,6 +7,6 @@ export type CalendarRangeProps = {
     hasDivider?: boolean;
 } & OverrideClassName<Omit<DayPickerRangeProps, 'mode'>>;
 export declare const CalendarRange: {
-    ({ id, onMount, hasDivider, classNameOverride, selected, defaultMonth, locale, ...restProps }: CalendarRangeProps): JSX.Element;
+    ({ id, onMount, hasDivider, classNameOverride, selected, defaultMonth, numberOfMonths, locale, ...restProps }: CalendarRangeProps): JSX.Element;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-fix-filter-select-jump-issue-useHasStableYPosition-20250120225815",
+  "version": "0.0.0-canary-test-1-20250201010717",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -30,6 +30,13 @@
   "sideEffects": [
     "styles.css"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
   "bin": {
     "kaizen-codemod": "./bin/codemod.sh"
   },

package/src/Calendar/CalendarRange/CalendarRange.module.scss

@@ -47,6 +47,11 @@ $cell-border-radius: 3px;
   .captionEnd & {
     flex-direction: row-reverse;
   }
+
+  .captionStart.captionEnd & {
+    justify-content: space-between;
+    flex-direction: row;
+  }
 }
 
 .dayRangeStart,

package/src/Calendar/CalendarRange/CalendarRange.tsx

@@ -22,6 +22,7 @@ export const CalendarRange = ({
   classNameOverride,
   selected,
   defaultMonth,
+  numberOfMonths = 2,
   locale = enAU,
   ...restProps
 }: CalendarRangeProps): JSX.Element => {
@@ -39,6 +40,7 @@ export const CalendarRange = ({
     ...baseCalendarClassNames,
     month: hasDivider ? styles.monthWithDivider : styles.month,
     caption_end: styles.captionEnd,
+    caption_start: styles.captionStart,
     nav: styles.nav,
     day_range_start: styles.dayRangeStart,
     day_range_end: styles.dayRangeEnd,
@@ -57,7 +59,7 @@ export const CalendarRange = ({
           IconRight: () => <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
           IconLeft: () => <Icon name="arrow_back" isPresentational shouldMirrorInRTL />,
         }}
-        numberOfMonths={2}
+        numberOfMonths={numberOfMonths}
         locale={locale}
         {...restProps}
       />

package/src/Content/Content.module.scss

@@ -3,10 +3,11 @@
 
 .content {
   max-width: $layout-content-max-width;
-  padding: 0 $layout-content-side-margin;
+  margin: 0 $layout-content-side-margin;
   width: 100%;
 
   @media (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
-    padding: 0 $content-margin-width-on-medium-and-small;
+    margin: 0 $content-margin-width-on-medium-and-small;
+    width: calc(100% - 2 * #{$content-margin-width-on-medium-and-small});
   }
 }

package/src/Filter/FilterDateRangePicker/FilterDateRangePicker.module.css

@@ -0,0 +1,7 @@
+@media (width <= 320px) {
+  .filterDateRangePickerContents {
+    padding: var(--spacing-16);
+    max-width: 320px;
+    box-sizing: border-box;
+  }
+}

package/src/Filter/FilterDateRangePicker/FilterDateRangePicker.tsx

@@ -1,4 +1,5 @@
 import React, { useId } from 'react'
+import classNames from 'classnames'
 import { getLocale } from '~components/DatePicker/utils/getLocale'
 import { Filter, FilterContents, type FilterProps } from '~components/Filter/Filter'
 import { type FilterButtonProps } from '../FilterButton'
@@ -9,6 +10,7 @@ import {
 } from './subcomponents/FilterDateRangePickerField'
 import { isValidRange } from './subcomponents/FilterDateRangePickerField/utils/isValidRange'
 import { isCompleteDateRange } from './utils/isCompleteDateRange'
+import styles from './FilterDateRangePicker.module.css'
 
 export type FilterDateRangePickerProps = {
   id?: string
@@ -46,7 +48,7 @@ export const FilterDateRangePicker = ({
         })
       }
     >
-      <FilterContents>
+      <FilterContents classNameOverride={classNames(styles.filterDateRangePickerContents)}>
         <FilterDateRangePickerField
           id={`${id}--input`}
           label={label}

package/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.mdx

@@ -4,7 +4,7 @@ import * as FilterDRPStories from './FilterDateRangePicker.stories'
 
 <Meta of={FilterDRPStories} />
 
-# Filter
+# FilterDateRangePicker
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/FilterDateRangePicker"

package/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
-import { fn } from '@storybook/test'
+import { expect, fn, waitFor, within } from '@storybook/test'
 import Highlight from 'react-highlight'
 import { type DateRange } from '~components/Calendar'
 import { defaultMonthControls } from '~components/Calendar/_docs/controls/defaultMonthControls'
@@ -428,3 +428,38 @@ export const Validation: Story = {
     controls: { disable: true },
   },
 }
+
+export const OnSmallViewport: Story = {
+  parameters: { viewport: { defaultViewport: 'mobile1' } },
+  ...FilterDateRangePickerTemplate,
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement)
+
+    await step('initial render complete', async () => {
+      await waitFor(() => {
+        canvas.getByRole('button', {
+          name: 'Dates',
+        })
+      })
+    })
+
+    await step('Can open the date picker', async () => {
+      await waitFor(() => {
+        const button = canvas.getByRole('button', {
+          name: 'Dates',
+        })
+        button.click()
+      })
+    })
+
+    await step('Back and Forward arrow and both visible', async () => {
+      await waitFor(() => {
+        const prevMonth = canvas.getByLabelText('Go to previous month')
+        const nextMonth = canvas.getByLabelText('Go to next month')
+
+        expect(prevMonth).toBeVisible()
+        expect(nextMonth).toBeVisible()
+      })
+    })
+  },
+}

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx

@@ -15,6 +15,7 @@ import { type DateValidationResponse } from '~components/Filter/FilterDatePicker
 import { useDateInputHandlers } from '~components/Filter/FilterDatePicker/hooks/useDateInputHandlers'
 import { type DataAttributes } from '~components/types/DataAttributes'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
+import { useMediaQueries } from '~components/utils/useMediaQueries'
 import { DateRangeInputField, type DateRangeInputFieldProps } from '../DateRangeInputField'
 import { filterDatePickerFieldReducer } from './filterDateRangePickerFieldReducer'
 import { useEndDateValidation } from './hooks/useEndDateValidation'
@@ -84,6 +85,8 @@ export const FilterDateRangePickerField = ({
   const { formatMessage } = useIntl()
   const locale = getLocale(propsLocale)
 
+  const { queries } = useMediaQueries()
+
   const translatedDateFrom = formatMessage({
     id: 'filterDateRangePicker.dateFrom',
     defaultMessage: 'Date from',
@@ -292,7 +295,7 @@ export const FilterDateRangePickerField = ({
           dateStart: dateStartValidation.validationMessage,
           dateEnd: dateEndValidation.validationMessage,
         }}
-        classNameOverride={styles.dateRangeInputField}
+        classNameOverride={classnames(styles.dateRangeInputField)}
       />
       <CalendarRange
         disabled={disabledDays}
@@ -303,6 +306,7 @@ export const FilterDateRangePickerField = ({
         }}
         onSelect={handleCalendarSelectRange}
         month={state.startMonth}
+        numberOfMonths={queries.isSmall ? 1 : 2}
         onMonthChange={(value: Date) => dispatch({ type: 'navigate_months', date: value })}
       />
     </div>

package/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.mdx

@@ -4,7 +4,7 @@ import * as FilterMultiSelectStories from './FilterMultiSelect.stories'
 
 <Meta of={FilterMultiSelectStories} />
 
-# Filter Bar
+# FilterMultiSelect
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/FilterMultiSelect"

package/src/Filter/FilterSelect/_docs/FilterSelect.stories.tsx

@@ -100,48 +100,3 @@ export const AdditionalProperties: Story = {
   },
   name: 'Additional option properties',
 }
-
-/**
- * Extend the option type to have additional properties to use for rendering.
- */
-export const TestPageWithFilterSelect: Story = {
-  render: (args) => {
-    const [isOpen, setIsOpen] = useState<boolean>(false)
-
-    return (
-      <div>
-        <div style={{ color: 'coral', display: 'block', height: '1500px' }}>Content</div>
-        <FilterSelect<SelectOption & { isFruit: boolean }>
-          {...args}
-          label="Custom"
-          isOpen={isOpen}
-          setIsOpen={setIsOpen}
-          items={[
-            { label: 'Bubblegum', value: 'bubblegum', isFruit: false },
-            { label: 'Strawberry', value: 'strawberry', isFruit: true },
-            { label: 'Chocolate', value: 'chocolate', isFruit: false },
-            { label: 'Apple', value: 'apple', isFruit: true },
-            { label: 'Lemon', value: 'lemon', isFruit: true },
-          ]}
-        >
-          {({ items }): JSX.Element[] =>
-            items.map((item) =>
-              item.type === 'item' ? (
-                <FilterSelect.Option
-                  key={item.key}
-                  item={{
-                    ...item,
-                    rendered: item.value?.isFruit ? `${item.rendered} (Fruit)` : item.rendered,
-                  }}
-                />
-              ) : (
-                <FilterSelect.ItemDefaultRender key={item.key} item={item} />
-              ),
-            )
-          }
-        </FilterSelect>
-      </div>
-    )
-  },
-  name: 'Additional option properties',
-}

package/src/__rc__/Select/subcomponents/ListBox/ListBox.tsx

@@ -2,9 +2,9 @@ import React, { useEffect, useRef, type HTMLAttributes, type Key, type ReactNode
 import { useListBox, type AriaListBoxOptions } from '@react-aria/listbox'
 import { type SelectState } from '@react-stately/select'
 import classnames from 'classnames'
+import { useIsClientReady } from '~components/__utilities__/useIsClientReady'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { useSelectContext } from '../../context'
-import { useHasStableYPosition } from '../../hooks/useHasStableYPosition'
 import { type SelectItem, type SelectOption } from '../../types'
 import styles from './ListBox.module.scss'
 
@@ -47,9 +47,9 @@ export const ListBox = <Option extends SelectOption>({
   classNameOverride,
   ...restProps
 }: SingleListBoxProps<Option>): JSX.Element => {
+  const isClientReady = useIsClientReady()
   const { state } = useSelectContext<Option>()
   const ref = useRef<HTMLUListElement>(null)
-  const hasStableYPosition = useHasStableYPosition(ref)
   const { listBoxProps } = useListBox(
     {
       ...menuProps,
@@ -62,22 +62,23 @@ export const ListBox = <Option extends SelectOption>({
   )
 
   /**
-   * This uses the hasStableYPosition to determine if the position is stable within the window
+   * This uses the new useIsClientReady to ensure document exists before trying to querySelector and give the time to focus to the correct element
    */
   useEffect(() => {
-    if (hasStableYPosition) {
+    if (isClientReady) {
       const optionKey = getOptionKeyFromCollection(state)
       const focusToElement = safeQuerySelector(`[data-key='${optionKey}']`)
 
       if (focusToElement) {
         focusToElement.focus()
       } else {
+        // If an element is not found, focus on the listbox. This ensures the list can still be navigated to via keyboard if the keys do not align to the data attributes of the list items.
         ref.current?.focus()
       }
     }
     // Only run this effect for checking the first successful render
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hasStableYPosition])
+  }, [isClientReady])
 
   return (
     <ul

package/dist/cjs/__rc__/Select/hooks/useHasStableYPosition.cjs

@@ -1,36 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-/** This is a helper util to resolve the focus jumping issue with future Select and FilterSelect.
- * Due to the floating element's position starting as a negative value on render and then jumping to the correct position, this caused the focus to jump to the top of the page.
- * This now polls to check if the element's position is stable by comparing the first and last position.
- */
-var useHasStableYPosition = function (ref) {
-  var _a = React.useState(false),
-    isStable = _a[0],
-    setIsStable = _a[1];
-  var _b = React.useState(null),
-    lastYPosition = _b[0],
-    setLastYPosition = _b[1];
-  React.useEffect(function () {
-    var checkPosition = function () {
-      if (ref.current) {
-        var y = ref.current.getBoundingClientRect().y;
-        if (lastYPosition === null) {
-          setLastYPosition(y);
-        } else if (y === lastYPosition) {
-          setIsStable(true);
-        } else {
-          setLastYPosition(y);
-        }
-      }
-    };
-    var intervalId = setInterval(checkPosition, 1);
-    return function () {
-      return clearInterval(intervalId);
-    };
-  }, [ref, lastYPosition]);
-  return isStable;
-};
-exports.useHasStableYPosition = useHasStableYPosition;

package/dist/esm/__rc__/Select/hooks/useHasStableYPosition.mjs

@@ -1,34 +0,0 @@
-import { useState, useEffect } from 'react';
-
-/** This is a helper util to resolve the focus jumping issue with future Select and FilterSelect.
- * Due to the floating element's position starting as a negative value on render and then jumping to the correct position, this caused the focus to jump to the top of the page.
- * This now polls to check if the element's position is stable by comparing the first and last position.
- */
-var useHasStableYPosition = function (ref) {
-  var _a = useState(false),
-    isStable = _a[0],
-    setIsStable = _a[1];
-  var _b = useState(null),
-    lastYPosition = _b[0],
-    setLastYPosition = _b[1];
-  useEffect(function () {
-    var checkPosition = function () {
-      if (ref.current) {
-        var y = ref.current.getBoundingClientRect().y;
-        if (lastYPosition === null) {
-          setLastYPosition(y);
-        } else if (y === lastYPosition) {
-          setIsStable(true);
-        } else {
-          setLastYPosition(y);
-        }
-      }
-    };
-    var intervalId = setInterval(checkPosition, 1);
-    return function () {
-      return clearInterval(intervalId);
-    };
-  }, [ref, lastYPosition]);
-  return isStable;
-};
-export { useHasStableYPosition };

package/dist/types/__rc__/Select/hooks/useHasStableYPosition.d.ts

@@ -1,5 +0,0 @@
-/** This is a helper util to resolve the focus jumping issue with future Select and FilterSelect.
- * Due to the floating element's position starting as a negative value on render and then jumping to the correct position, this caused the focus to jump to the top of the page.
- * This now polls to check if the element's position is stable by comparing the first and last position.
- */
-export declare const useHasStableYPosition: (ref: React.RefObject<HTMLElement>) => boolean;

package/src/__rc__/Select/hooks/useHasStableYPosition.ts

@@ -1,31 +0,0 @@
-import { useEffect, useState } from 'react'
-
-/** This is a helper util to resolve the focus jumping issue with future Select and FilterSelect.
- * Due to the floating element's position starting as a negative value on render and then jumping to the correct position, this caused the focus to jump to the top of the page.
- * This now polls to check if the element's position is stable by comparing the first and last position.
- */
-export const useHasStableYPosition = (ref: React.RefObject<HTMLElement>): boolean => {
-  const [isStable, setIsStable] = useState(false)
-  const [lastYPosition, setLastYPosition] = useState<number | null>(null)
-
-  useEffect(() => {
-    const checkPosition = (): void => {
-      if (ref.current) {
-        const { y } = ref.current.getBoundingClientRect()
-        if (lastYPosition === null) {
-          setLastYPosition(y)
-        } else if (y === lastYPosition) {
-          setIsStable(true)
-        } else {
-          setLastYPosition(y)
-        }
-      }
-    }
-
-    const intervalId = setInterval(checkPosition, 1)
-
-    return () => clearInterval(intervalId)
-  }, [ref, lastYPosition])
-
-  return isStable
-}