@spaced-out/ui-design-system 0.1.99 → 0.1.101

package/.cspell/custom-words.txt

@@ -90,6 +90,8 @@ senseai
 Stapleton
 storysource
 superrover
+sharad
+kushwah
 Syowa
 systemjs
 tablist

package/.github/workflows/publish_to_npm.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Check Permissions
         id: check-permissions
         env:
-          ALLOWED_USERS: superrover, Anant-Raj, ashwini-sensehq, vish-sah, VishalBarnawal, sanskar-s, VivekJangid
+          ALLOWED_USERS: superrover, Anant-Raj, ashwini-sensehq, vish-sah, VishalBarnawal, sanskar-s, VivekJangid, sharad-kushwah
         if: ${{ !contains(env.ALLOWED_USERS, github.actor) }}
         run: |
           echo "You don't have correct permissions to do this release"

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.101](https://github.com/spaced-out/ui-design-system/compare/v0.1.100...v0.1.101) (2024-06-21)
+
+
+### Features
+
+* [GDS-413] tz offset in dateRangePicker prop ([#230](https://github.com/spaced-out/ui-design-system/issues/230)) ([e155e85](https://github.com/spaced-out/ui-design-system/commit/e155e85779589fd0a3c31dbeb5818f212415bf48))
+* timeZone changed to timezone ([#231](https://github.com/spaced-out/ui-design-system/issues/231)) ([1a680f0](https://github.com/spaced-out/ui-design-system/commit/1a680f02d49095cc53a6c1d7a785e05cb6648f65))
+
+### [0.1.100](https://github.com/spaced-out/ui-design-system/compare/v0.1.99...v0.1.100) (2024-06-13)
+
+
+### Bug Fixes
+
+* circular loader default color ([#227](https://github.com/spaced-out/ui-design-system/issues/227)) ([fdf816b](https://github.com/spaced-out/ui-design-system/commit/fdf816b96e80f07d2b1c34f9f5ea58e137fca364))
+* responsive secondary pagination controls ([#225](https://github.com/spaced-out/ui-design-system/issues/225)) ([43b8d4d](https://github.com/spaced-out/ui-design-system/commit/43b8d4da02793e85c9a453c25ded86aab2ebb605))
+
 ### [0.1.99](https://github.com/spaced-out/ui-design-system/compare/v0.1.98...v0.1.99) (2024-06-03)
 
 

package/lib/components/CircularLoader/CircularLoader.js

@@ -16,7 +16,7 @@ const CircularLoader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     size = 'medium',
     className,
-    colorToken = 'colorFillPrimary',
+    colorToken = 'colorTextClickable',
     ariaLabel = 'Loading'
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {

package/lib/components/CircularLoader/CircularLoader.js.flow

@@ -24,7 +24,7 @@ export const CircularLoader: React$AbstractComponent<
     {
       size = 'medium',
       className,
-      colorToken = 'colorFillPrimary',
+      colorToken = 'colorTextClickable',
       ariaLabel = 'Loading',
     }: CircularLoaderProps,
     ref,

package/lib/components/DateRangePicker/DateRangePicker.js

@@ -21,16 +21,17 @@ const DateRangePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onApply,
     onCancel,
     classNames,
-    initialDateRange = {}
+    selectedDateRange = {},
+    hideTimezone = false
   } = _ref;
   const today = (0, _utils.formatIsoDate)();
-  const currentTimezone = _momentTimezone.default.tz.guess();
   const {
+    timezone: initialTimezone,
     dateRange: initialRange,
     monthRange
-  } = (0, _utils.getInitialDates)(initialDateRange);
+  } = (0, _utils.getInitialDates)(selectedDateRange);
   const [dateRange, setDateRange] = React.useState(initialRange);
-  const [timeZone, setTimeZone] = React.useState(currentTimezone);
+  const [timezone, setTimezone] = React.useState(initialTimezone);
   const [rangeStartMonth, setRangeStartMonth] = React.useState(monthRange.rangeStartMonth);
   const [rangeEndMonth, setRangeEndMonth] = React.useState(monthRange.rangeEndMonth);
   const [hoverDay, setHoverDay] = React.useState('');
@@ -92,14 +93,15 @@ const DateRangePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     handlers: handlers,
     hoverDay: hoverDay,
     onCancel: onCancel,
-    timeZone: timeZone,
+    timezone: timezone,
     dateRange: dateRange,
-    setTimeZone: setTimeZone,
+    setTimezone: setTimezone,
     rangeStartMonth: rangeStartMonth,
     rangeEndMonth: rangeEndMonth,
     inHoverRange: inHoverRange,
     setRangeStartMonth: setRangeStartMonthValidated,
     setRangeEndMonth: setRangeEndMonthValidated,
+    hideTimezone: hideTimezone,
     cardWrapperClass: (0, _classify.default)(_DateRangePickerModule.default.container, classNames?.wrapper)
   });
 });

package/lib/components/DateRangePicker/DateRangePicker.js.flow

@@ -25,9 +25,10 @@ type ClassNames = $ReadOnly<{wrapper?: string}>;
 
 export type DateRangePickerProps = {
   classNames?: ClassNames,
-  initialDateRange?: DateRange,
+  selectedDateRange?: DateRangeWithTimezone,
   onApply: (datePickerSelectedRange: DateRangeWithTimezone) => void,
   onCancel: () => void,
+  hideTimezone?: boolean,
 };
 
 export const DateRangePicker: React$AbstractComponent<
@@ -39,18 +40,21 @@ export const DateRangePicker: React$AbstractComponent<
       onApply,
       onCancel,
       classNames,
-      initialDateRange = {},
+      selectedDateRange = {},
+      hideTimezone = false,
     }: DateRangePickerProps,
     ref,
   ): React.Node => {
     const today = formatIsoDate();
-    const currentTimezone = moment.tz.guess();
 
-    const {dateRange: initialRange, monthRange} =
-      getInitialDates(initialDateRange);
+    const {
+      timezone: initialTimezone,
+      dateRange: initialRange,
+      monthRange,
+    } = getInitialDates(selectedDateRange);
 
     const [dateRange, setDateRange] = React.useState<DateRange>(initialRange);
-    const [timeZone, setTimeZone] = React.useState<string>(currentTimezone);
+    const [timezone, setTimezone] = React.useState<string>(initialTimezone);
     const [rangeStartMonth, setRangeStartMonth] = React.useState<string>(
       monthRange.rangeStartMonth,
     );
@@ -156,14 +160,15 @@ export const DateRangePicker: React$AbstractComponent<
         handlers={handlers}
         hoverDay={hoverDay}
         onCancel={onCancel}
-        timeZone={timeZone}
+        timezone={timezone}
         dateRange={dateRange}
-        setTimeZone={setTimeZone}
+        setTimezone={setTimezone}
         rangeStartMonth={rangeStartMonth}
         rangeEndMonth={rangeEndMonth}
         inHoverRange={inHoverRange}
         setRangeStartMonth={setRangeStartMonthValidated}
         setRangeEndMonth={setRangeEndMonthValidated}
+        hideTimezone={hideTimezone}
         cardWrapperClass={classify(css.container, classNames?.wrapper)}
       />
     );

package/lib/components/DateRangePicker/DateRangeWrapper.js

@@ -81,15 +81,16 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     onCancel,
     handlers,
     hoverDay,
-    timeZone,
+    timezone,
     dateRange,
     rangeStartMonth,
-    setTimeZone,
+    setTimezone,
     rangeEndMonth,
     inHoverRange,
     setRangeStartMonth,
     setRangeEndMonth,
-    cardWrapperClass
+    cardWrapperClass,
+    hideTimezone
   } = _ref2;
   const canNavigateCloser = (0, _momentTimezone.default)(rangeStartMonth).year() !== (0, _momentTimezone.default)(rangeEndMonth).year() || Math.abs((0, _momentTimezone.default)(rangeStartMonth).month() - (0, _momentTimezone.default)(rangeEndMonth).month()) > 1;
   const handleApplyClick = () => {
@@ -97,14 +98,14 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       startDate,
       endDate
     } = dateRange;
-    const startDateUTC = startDate && (0, _utils.addTimeZone)(startDate, timeZone);
-    const endDateUTC = endDate && (0, _utils.addTimeZone)(endDate, timeZone);
+    const startDateUTC = startDate && (0, _utils.addTimezone)(startDate, timezone);
+    const endDateUTC = endDate && (0, _utils.addTimezone)(endDate, timezone);
     onApply({
       startDate,
       endDate,
       startDateUTC,
       endDateUTC,
-      timeZone
+      timezone
     });
   };
   const {
@@ -155,13 +156,13 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     value: rangeEndMonth
   }, commonProps))), /*#__PURE__*/React.createElement(_Card.CardFooter, null, /*#__PURE__*/React.createElement(_Card.CardTitle, {
     className: _DateRangeWrapperModule.default.timezoneDropdownContainer
-  }, /*#__PURE__*/React.createElement(_Dropdown.SimpleDropdown, {
-    options: (0, _utils.getTimeZones)(),
+  }, !hideTimezone && /*#__PURE__*/React.createElement(_Dropdown.SimpleDropdown, {
+    options: (0, _utils.getTimezones)(),
     classNames: {
       box: _DateRangeWrapperModule.default.timezoneDropdown
     },
-    selectedKeys: [timeZone],
-    onChange: event => setTimeZone(event.key),
+    selectedKeys: [timezone],
+    onChange: event => setTimezone(event.key),
     size: "small",
     menuVirtualization: {
       enable: true

package/lib/components/DateRangePicker/DateRangeWrapper.js.flow

@@ -21,12 +21,12 @@ import {ClickableIcon} from '../Icon';
 import {Calendar} from './Calendar.js';
 import type {DateRange, DateRangeWithTimezone} from './utils';
 import {
-  addTimeZone,
+  addTimezone,
   generateAvailableYears,
   getAddedDate,
   getAvailableMonths,
   getMonthStartDate,
-  getTimeZones,
+  getTimezones,
   MARKERS,
   MONTHS,
   NAVIGATION_ACTION,
@@ -55,11 +55,12 @@ type DateRangeWrapperProps = {
   cardWrapperClass: ?string,
   setRangeStartMonth: (string) => void,
   setRangeEndMonth: (string) => void,
-  setTimeZone: (string) => void,
-  timeZone: string,
+  setTimezone: (string) => void,
+  timezone: string,
   onApply: (datePickerSelectedRange: DateRangeWithTimezone) => void,
   onCancel: () => void,
   inHoverRange: (day: string) => boolean,
+  hideTimezone: boolean,
   handlers: {
     onDayClick: (day: string) => void,
     onDayHover: (day: string) => void,
@@ -149,15 +150,16 @@ export const DateRangeWrapper: React$AbstractComponent<
       onCancel,
       handlers,
       hoverDay,
-      timeZone,
+      timezone,
       dateRange,
       rangeStartMonth,
-      setTimeZone,
+      setTimezone,
       rangeEndMonth,
       inHoverRange,
       setRangeStartMonth,
       setRangeEndMonth,
       cardWrapperClass,
+      hideTimezone,
     }: DateRangeWrapperProps,
     ref,
   ): React.Node => {
@@ -169,14 +171,14 @@ export const DateRangeWrapper: React$AbstractComponent<
 
     const handleApplyClick = () => {
       const {startDate, endDate} = dateRange;
-      const startDateUTC = startDate && addTimeZone(startDate, timeZone);
-      const endDateUTC = endDate && addTimeZone(endDate, timeZone);
+      const startDateUTC = startDate && addTimezone(startDate, timezone);
+      const endDateUTC = endDate && addTimezone(endDate, timezone);
       onApply({
         startDate,
         endDate,
         startDateUTC,
         endDateUTC,
-        timeZone,
+        timezone,
       });
     };
 
@@ -252,19 +254,21 @@ export const DateRangeWrapper: React$AbstractComponent<
           </CardContent>
           <CardFooter>
             <CardTitle className={css.timezoneDropdownContainer}>
-              <SimpleDropdown
-                options={getTimeZones()}
-                classNames={{
-                  box: css.timezoneDropdown,
-                }}
-                selectedKeys={[timeZone]}
-                onChange={(event) => setTimeZone(event.key)}
-                size="small"
-                menuVirtualization={{
-                  enable: true,
-                }}
-                allowSearch
-              />
+              {!hideTimezone && (
+                <SimpleDropdown
+                  options={getTimezones()}
+                  classNames={{
+                    box: css.timezoneDropdown,
+                  }}
+                  selectedKeys={[timezone]}
+                  onChange={(event) => setTimezone(event.key)}
+                  size="small"
+                  menuVirtualization={{
+                    enable: true,
+                  }}
+                  allowSearch
+                />
+              )}
             </CardTitle>
             <CardActions>
               <Button type="ghost" onClick={onCancel} size="small">

package/lib/components/DateRangePicker/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrangleMoment = exports.isStartOfRange = exports.isStartDateEndDateSame = exports.isEndOfRange = exports.inDateRange = exports.getTimeZones = exports.getSubtractedDate = exports.getMonthStartDate = exports.getInitialDates = exports.getDaysInMonth = exports.getAvailableMonths = exports.getAddedDate = exports.generateAvailableYears = exports.formatIsoDate = exports.addTimeZone = exports.WEEKDAYS = exports.NAVIGATION_ACTION = exports.MONTHS = exports.MARKERS = void 0;
+exports.wrangleMoment = exports.isStartOfRange = exports.isStartDateEndDateSame = exports.isEndOfRange = exports.inDateRange = exports.getTimezones = exports.getSubtractedDate = exports.getMonthStartDate = exports.getInitialDates = exports.getDaysInMonth = exports.getAvailableMonths = exports.getAddedDate = exports.generateAvailableYears = exports.formatIsoDate = exports.addTimezone = exports.WEEKDAYS = exports.NAVIGATION_ACTION = exports.MONTHS = exports.MARKERS = void 0;
 var _formatISO = _interopRequireDefault(require("date-fns/formatISO"));
 var _parseISO = _interopRequireDefault(require("date-fns/parseISO"));
 var _lodash = _interopRequireDefault(require("lodash"));
@@ -153,16 +153,16 @@ const getSubtractedDate = (date, subtractCount, timeUnit) => formatIsoDate((0, _
 exports.getSubtractedDate = getSubtractedDate;
 const getMonthStartDate = date => formatIsoDate((0, _momentTimezone.default)(date).startOf('M'));
 exports.getMonthStartDate = getMonthStartDate;
-const addTimeZone = (date, timeZone) => _momentTimezone.default.tz(date, timeZone).startOf('d').utc().toISOString();
-exports.addTimeZone = addTimeZone;
-const getTimeZones = () => Object.keys(_timezones.TIMEZONES).reduce((menuOptions, key) => {
+const addTimezone = (date, timezone) => _momentTimezone.default.tz(date, timezone).startOf('d').utc().toISOString();
+exports.addTimezone = addTimezone;
+const getTimezones = () => Object.keys(_timezones.TIMEZONES).reduce((menuOptions, key) => {
   menuOptions.push({
     key,
     label: _timezones.TIMEZONES[key]
   });
   return menuOptions;
 }, []);
-exports.getTimeZones = getTimeZones;
+exports.getTimezones = getTimezones;
 const generateAvailableYears = (count, firstCalendarDate, secondCalendarDate, marker) => {
   const startYear = (0, _momentTimezone.default)().year() - count + 1;
   const firstCalendarYear = (0, _momentTimezone.default)(firstCalendarDate).add(1, 'M').year();
@@ -201,12 +201,14 @@ const getAvailableMonths = (Months, first, second, marker) => {
   });
 };
 exports.getAvailableMonths = getAvailableMonths;
-const getInitialDates = initialDateRange => {
+const getInitialDates = selectedDateRange => {
   const today = formatIsoDate();
+  const currentTimezone = _momentTimezone.default.tz.guess();
   const {
     startDate,
-    endDate
-  } = initialDateRange;
+    endDate,
+    timezone
+  } = selectedDateRange;
   const isStartDateValid = (0, _momentTimezone.default)(startDate).isSameOrBefore(today);
   const isEndDateValid = (0, _momentTimezone.default)(endDate).isSameOrBefore(today);
   const dateRange = startDate && endDate && isStartDateValid && isEndDateValid && (0, _momentTimezone.default)(endDate).isSameOrAfter(startDate) ? {
@@ -227,7 +229,8 @@ const getInitialDates = initialDateRange => {
   };
   return {
     dateRange,
-    monthRange
+    monthRange,
+    timezone: timezone ?? currentTimezone
   };
 };
 exports.getInitialDates = getInitialDates;

package/lib/components/DateRangePicker/utils.js.flow

@@ -19,13 +19,14 @@ export type DateRangeWithTimezone = {|
   ...DateRange,
   startDateUTC?: string,
   endDateUTC?: string,
-  timeZone?: string,
+  timezone?: string,
 |};
 
 type MonthRange = {rangeStartMonth: string, rangeEndMonth: string};
-type InitialDateRanges = {
+type SelectedDateRangeTimezone = {
   dateRange: DateRange,
   monthRange: MonthRange,
+  timezone: string,
 };
 
 export const NAVIGATION_ACTION = Object.freeze({
@@ -141,10 +142,10 @@ export const getSubtractedDate = (
 export const getMonthStartDate = (date: string): string =>
   formatIsoDate(moment(date).startOf('M'));
 
-export const addTimeZone = (date: string, timeZone: string): string =>
-  moment.tz(date, timeZone).startOf('d').utc().toISOString();
+export const addTimezone = (date: string, timezone: string): string =>
+  moment.tz(date, timezone).startOf('d').utc().toISOString();
 
-export const getTimeZones = (): Array<MenuOption> =>
+export const getTimezones = (): Array<MenuOption> =>
   Object.keys(TIMEZONES).reduce((menuOptions, key) => {
     menuOptions.push({
       key,
@@ -206,10 +207,11 @@ export const getAvailableMonths = (
 };
 
 export const getInitialDates = (
-  initialDateRange: DateRange,
-): InitialDateRanges => {
+  selectedDateRange: DateRangeWithTimezone,
+): SelectedDateRangeTimezone => {
   const today = formatIsoDate();
-  const {startDate, endDate} = initialDateRange;
+  const currentTimezone = moment.tz.guess();
+  const {startDate, endDate, timezone} = selectedDateRange;
 
   const isStartDateValid = moment(startDate).isSameOrBefore(today);
   const isEndDateValid = moment(endDate).isSameOrBefore(today);
@@ -235,5 +237,9 @@ export const getInitialDates = (
   }
 
   const monthRange = {rangeStartMonth: startMonth, rangeEndMonth: endMonth};
-  return {dateRange, monthRange};
+  return {
+    dateRange,
+    monthRange,
+    timezone: timezone ?? currentTimezone,
+  };
 };

package/lib/components/Pagination/Pagination.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Pagination = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _usePagination = require("../../hooks/usePagination");
+var _useWindowSize = require("../../hooks/useWindowSize");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _helpers = require("../../utils/helpers");
 var _Dropdown = require("../Dropdown");
@@ -17,7 +18,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const LARGE_LIST_DROPDOWN_OPTIONS = 50;
+const TABLET_SCREEN_SIZE = 640;
 const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    width
+  } = (0, _useWindowSize.useWindowSize)();
+  const showExtraSecPaginationButtons = width > TABLET_SCREEN_SIZE;
   const {
     classNames,
     style = 'primary',
@@ -25,10 +31,11 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
     currentPage = 1,
     totalPages = 1,
     onChange,
-    showFirstButton = style !== 'primary',
-    showLastButton = style !== 'primary',
+    showFirstButton = style !== 'primary' && showExtraSecPaginationButtons,
+    showLastButton = style !== 'primary' && showExtraSecPaginationButtons,
     ...restPaginationProps
   } = props;
+  const showPageSelectionDropDown = style !== 'primary' && showExtraSecPaginationButtons;
   const {
     items
   } = (0, _usePagination.usePagination)({
@@ -56,7 +63,7 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
     className: (0, _classify.default)(_PaginationModule.default.childrenSlot, classNames?.children)
   }, children), /*#__PURE__*/React.createElement("div", {
     className: _PaginationModule.default.paginatorSlots
-  }, style === 'secondary' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
+  }, style === 'secondary' && showPageSelectionDropDown && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
     size: "small",
     classNames: {
       wrapper: _PaginationModule.default.dropdownWrapper

package/lib/components/Pagination/Pagination.js.flow

@@ -3,6 +3,7 @@
 import * as React from 'react';
 
 import {usePagination} from '../../hooks/usePagination';
+import {useWindowSize} from '../../hooks/useWindowSize';
 import classify from '../../utils/classify';
 import {range} from '../../utils/helpers';
 import {Dropdown} from '../Dropdown';
@@ -59,11 +60,15 @@ export type PaginationItemProps = {
 
 const LARGE_LIST_DROPDOWN_OPTIONS = 50;
 
+const TABLET_SCREEN_SIZE = 640;
+
 export const Pagination: React$AbstractComponent<
   PaginationProps,
   HTMLDivElement,
 > = React.forwardRef<PaginationProps, HTMLDivElement>(
   (props: PaginationProps, ref) => {
+    const {width} = useWindowSize();
+    const showExtraSecPaginationButtons = width > TABLET_SCREEN_SIZE;
     const {
       classNames,
       style = 'primary',
@@ -71,10 +76,13 @@ export const Pagination: React$AbstractComponent<
       currentPage = 1,
       totalPages = 1,
       onChange,
-      showFirstButton = style !== 'primary',
-      showLastButton = style !== 'primary',
+      showFirstButton = style !== 'primary' && showExtraSecPaginationButtons,
+      showLastButton = style !== 'primary' && showExtraSecPaginationButtons,
       ...restPaginationProps
     } = props;
+    const showPageSelectionDropDown =
+      style !== 'primary' && showExtraSecPaginationButtons;
+
     const {items} = usePagination({
       style,
       showFirstButton,
@@ -108,7 +116,7 @@ export const Pagination: React$AbstractComponent<
           {children}
         </div>
         <div className={css.paginatorSlots}>
-          {style === 'secondary' && (
+          {style === 'secondary' && showPageSelectionDropDown && (
             <>
               <Dropdown
                 size="small"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.99",
+  "version": "0.1.101",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {