@spaced-out/ui-design-system 0.3.40 → 0.3.42

package/.all-contributorsrc

@@ -156,5 +156,5 @@
       ]
     }
   ],
-  "contributorsPerLine": 7
+  "contributorsPerLine": 5
 }

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 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.3.42](https://github.com/spaced-out/ui-design-system/compare/v0.3.41...v0.3.42) (2025-05-22)
+
+
+### Features
+
+* **GDS-511:** updated ux for date range picker ([#348](https://github.com/spaced-out/ui-design-system/issues/348)) ([04d12e5](https://github.com/spaced-out/ui-design-system/commit/04d12e5b0db0d7e8797e613350ac4d32001c95d9))
+
+
+### Bug Fixes
+
+* [GDS-522 & GDS-523]tooltip error in tokenListInput & glitch in Modal ([#349](https://github.com/spaced-out/ui-design-system/issues/349)) ([0482a91](https://github.com/spaced-out/ui-design-system/commit/0482a91ea01a10481224ef64af6c9c9125be9c84))
+* fixes chip accessibility ([#347](https://github.com/spaced-out/ui-design-system/issues/347)) ([ea2d231](https://github.com/spaced-out/ui-design-system/commit/ea2d231ff0508b13aeb3af2581405393077b72c1))
+
+### [0.3.41](https://github.com/spaced-out/ui-design-system/compare/v0.3.40...v0.3.41) (2025-05-19)
+
+
+### Features
+
+* **table:** added disabledKeys functionality in table component ([#345](https://github.com/spaced-out/ui-design-system/issues/345)) ([06b2bc3](https://github.com/spaced-out/ui-design-system/commit/06b2bc35047e50f988f552ca58d07262afdb1d10))
+
+
+### Bug Fixes
+
+* formatting fixes ([a091cce](https://github.com/spaced-out/ui-design-system/commit/a091cced24908ae2d0c42a1f6b4742b238046633))
+
 ### [0.3.40](https://github.com/spaced-out/ui-design-system/compare/v0.3.40-beta.0...v0.3.40) (2025-05-16)
 
 

package/README.md

@@ -260,32 +260,39 @@ Check out our [**Changelog here**](https://spaced-out.github.io/ui-design-system
 
 ## Contributors
 
+<div style="overflow-x: auto">
+
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 <!-- prettier-ignore-start -->
 <!-- markdownlint-disable -->
-<table>
+<table style="
+    width: -webkit-fill-available;
+    min-width: 800px;
+">
   <tbody>
     <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/superrover"><img src="https://avatars.githubusercontent.com/u/86281150?v=4?s=100" width="100px;" alt="Nishant Gaurav"/><br /><sub><b>Nishant Gaurav</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=superrover" title="Code">💻</a> <a href="#infra-superrover" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Anant-Raj"><img src="https://avatars.githubusercontent.com/u/8904071?v=4?s=100" width="100px;" alt="Anant Raj"/><br /><sub><b>Anant Raj</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=Anant-Raj" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/ashwinikemshetty"><img src="https://avatars.githubusercontent.com/u/12839599?v=4?s=100" width="100px;" alt="Ashwini Kemshetty"/><br /><sub><b>Ashwini Kemshetty</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=ashwinikemshetty" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/VivekJangid"><img src="https://avatars.githubusercontent.com/u/33223696?v=4?s=100" width="100px;" alt="Vivek Jangid"/><br /><sub><b>Vivek Jangid</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=VivekJangid" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/sharad-kushwah"><img src="https://avatars.githubusercontent.com/u/161806585?v=4?s=100" width="100px;" alt="Sharad Kushwah"/><br /><sub><b>Sharad Kushwah</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=sharad-kushwah" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/sanskar-s"><img src="https://avatars.githubusercontent.com/u/137482980?v=4?s=100" width="100px;" alt="Sanskar Saxena"/><br /><sub><b>Sanskar Saxena</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=sanskar-s" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/aditya-kaushal"><img src="https://avatars.githubusercontent.com/u/141118827?v=4?s=100" width="100px;" alt="aditya-kaushal"/><br /><sub><b>aditya-kaushal</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=aditya-kaushal" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/superrover"><img src="https://avatars.githubusercontent.com/u/86281150?v=4?s=100" width="100px;" alt="Nishant Gaurav"/><br /><sub><b>Nishant Gaurav</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=superrover" title="Code">💻</a> <a href="#infra-superrover" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/Anant-Raj"><img src="https://avatars.githubusercontent.com/u/8904071?v=4?s=100" width="100px;" alt="Anant Raj"/><br /><sub><b>Anant Raj</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=Anant-Raj" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/ashwinikemshetty"><img src="https://avatars.githubusercontent.com/u/12839599?v=4?s=100" width="100px;" alt="Ashwini Kemshetty"/><br /><sub><b>Ashwini Kemshetty</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=ashwinikemshetty" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/VivekJangid"><img src="https://avatars.githubusercontent.com/u/33223696?v=4?s=100" width="100px;" alt="Vivek Jangid"/><br /><sub><b>Vivek Jangid</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=VivekJangid" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/sharad-kushwah"><img src="https://avatars.githubusercontent.com/u/161806585?v=4?s=100" width="100px;" alt="Sharad Kushwah"/><br /><sub><b>Sharad Kushwah</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=sharad-kushwah" title="Code">💻</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/sanskar-s"><img src="https://avatars.githubusercontent.com/u/137482980?v=4?s=100" width="100px;" alt="Sanskar Saxena"/><br /><sub><b>Sanskar Saxena</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=sanskar-s" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/aditya-kaushal"><img src="https://avatars.githubusercontent.com/u/141118827?v=4?s=100" width="100px;" alt="aditya-kaushal"/><br /><sub><b>aditya-kaushal</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=aditya-kaushal" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/bhatiarush27"><img src="https://avatars.githubusercontent.com/u/161808754?v=4?s=100" width="100px;" alt="Arush Bhatia"/><br /><sub><b>Arush Bhatia</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=bhatiarush27" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/LakshayKumar-1"><img src="https://avatars.githubusercontent.com/u/183346574?v=4?s=100" width="100px;" alt="LakshayKumar-1"/><br /><sub><b>LakshayKumar-1</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=LakshayKumar-1" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/Swatantramishra1"><img src="https://avatars.githubusercontent.com/u/5427027?v=4?s=100" width="100px;" alt="Swatantra Mishra"/><br /><sub><b>Swatantra Mishra</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=Swatantramishra1" title="Code">💻</a></td>
     </tr>
     <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/bhatiarush27"><img src="https://avatars.githubusercontent.com/u/161808754?v=4?s=100" width="100px;" alt="Arush Bhatia"/><br /><sub><b>Arush Bhatia</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=bhatiarush27" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/LakshayKumar-1"><img src="https://avatars.githubusercontent.com/u/183346574?v=4?s=100" width="100px;" alt="LakshayKumar-1"/><br /><sub><b>LakshayKumar-1</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=LakshayKumar-1" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Swatantramishra1"><img src="https://avatars.githubusercontent.com/u/5427027?v=4?s=100" width="100px;" alt="Swatantra Mishra"/><br /><sub><b>Swatantra Mishra</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=Swatantramishra1" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/VishalBarnawal"><img src="https://avatars.githubusercontent.com/u/113020105?v=4?s=100" width="100px;" alt="Vishal-sense"/><br /><sub><b>Vishal-sense</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=VishalBarnawal" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/vish-sah"><img src="https://avatars.githubusercontent.com/u/108925162?v=4?s=100" width="100px;" alt="Vishwanath Sah"/><br /><sub><b>Vishwanath Sah</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=vish-sah" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/pearel-sense"><img src="https://avatars.githubusercontent.com/u/113005498?v=4?s=100" width="100px;" alt="Pearel Nazareth"/><br /><sub><b>Pearel Nazareth</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=pearel-sense" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/deepak-rao-96"><img src="https://avatars.githubusercontent.com/u/185754227?v=4?s=100" width="100px;" alt="deepak-rao-96"/><br /><sub><b>deepak-rao-96</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=deepak-rao-96" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/VishalBarnawal"><img src="https://avatars.githubusercontent.com/u/113020105?v=4?s=100" width="100px;" alt="Vishal-sense"/><br /><sub><b>Vishal-sense</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=VishalBarnawal" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/vish-sah"><img src="https://avatars.githubusercontent.com/u/108925162?v=4?s=100" width="100px;" alt="Vishwanath Sah"/><br /><sub><b>Vishwanath Sah</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=vish-sah" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/pearel-sense"><img src="https://avatars.githubusercontent.com/u/113005498?v=4?s=100" width="100px;" alt="Pearel Nazareth"/><br /><sub><b>Pearel Nazareth</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=pearel-sense" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/deepak-rao-96"><img src="https://avatars.githubusercontent.com/u/185754227?v=4?s=100" width="100px;" alt="deepak-rao-96"/><br /><sub><b>deepak-rao-96</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=deepak-rao-96" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/darsh-mecwan-sense"><img src="https://avatars.githubusercontent.com/u/186684223?v=4?s=100" width="100px;" alt="Darsh Mecwan"/><br /><sub><b>Darsh Mecwan</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=darsh-mecwan-sense" title="Code">💻</a></td>
     </tr>
     <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/darsh-mecwan-sense"><img src="https://avatars.githubusercontent.com/u/186684223?v=4?s=100" width="100px;" alt="Darsh Mecwan"/><br /><sub><b>Darsh Mecwan</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=darsh-mecwan-sense" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/diwakersurya"><img src="https://avatars.githubusercontent.com/u/7386665?v=4?s=100" width="100px;" alt="Diwaker Singh"/><br /><sub><b>Diwaker Singh</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=diwakersurya" title="Code">💻</a></td>
+      <td align="center" valign="top" width="20%"><a href="https://github.com/diwakersurya"><img src="https://avatars.githubusercontent.com/u/7386665?v=4?s=100" width="100px;" alt="Diwaker Singh"/><br /><sub><b>Diwaker Singh</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=diwakersurya" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>
@@ -294,3 +301,5 @@ Check out our [**Changelog here**](https://spaced-out.github.io/ui-design-system
 <!-- prettier-ignore-end -->
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
+
+</div>

package/lib/components/Avatar/Avatar.d.ts

@@ -57,7 +57,6 @@ export type AvatarProps = {
   style?: unknown;
   iconName?: string;
   iconType?: IconType;
-  ring?: boolean;
   status?: StatusSemanticType;
   statusBorderColorToken?: $Keys<typeof COLORS>;
 };

package/lib/components/Avatar/Avatar.js.flow

@@ -66,7 +66,6 @@ export type AvatarProps = {
   style?: mixed,
   iconName?: string,
   iconType?: IconType,
-  ring?: boolean,
   status?: StatusSemanticType,
   statusBorderColorToken?: $Keys<typeof COLORS>,
 };

package/lib/components/Chip/Chip.d.ts

@@ -128,13 +128,16 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
               [css.dismissable]: dismissable,
               [css.withIcon]: !!iconName && size !== 'small',
               [css.disabled]: disabled,
-              [css.noHoverState]: showStatusIndicator || disableHoverState,
+              [css.noHoverState]:
+                showStatusIndicator || disableHoverState || disabled,
             },
             classNames?.wrapper,
           )}
           onClick={onClick}
           onKeyDown={handleKeyDown}
-          tabIndex={showStatusIndicator || disableHoverState ? undefined : 0}
+          tabIndex={
+            showStatusIndicator || disableHoverState || disabled ? undefined : 0
+          }
           role={showStatusIndicator || disableHoverState ? undefined : 'button'}
         >
           {showStatusIndicator && size !== 'small' && (

package/lib/components/Chip/Chip.js

@@ -84,11 +84,11 @@ const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       [_ChipModule.default.dismissable]: dismissable,
       [_ChipModule.default.withIcon]: !!iconName && size !== 'small',
       [_ChipModule.default.disabled]: disabled,
-      [_ChipModule.default.noHoverState]: showStatusIndicator || disableHoverState
+      [_ChipModule.default.noHoverState]: showStatusIndicator || disableHoverState || disabled
     }, classNames?.wrapper),
     onClick: onClick,
     onKeyDown: handleKeyDown,
-    tabIndex: showStatusIndicator || disableHoverState ? undefined : 0,
+    tabIndex: showStatusIndicator || disableHoverState || disabled ? undefined : 0,
     role: showStatusIndicator || disableHoverState ? undefined : 'button'
   }), showStatusIndicator && size !== 'small' && /*#__PURE__*/React.createElement(_StatusIndicator.StatusIndicator, {
     status: semantic,

package/lib/components/Chip/Chip.js.flow

@@ -129,13 +129,16 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
               [css.dismissable]: dismissable,
               [css.withIcon]: !!iconName && size !== 'small',
               [css.disabled]: disabled,
-              [css.noHoverState]: showStatusIndicator || disableHoverState,
+              [css.noHoverState]:
+                showStatusIndicator || disableHoverState || disabled,
             },
             classNames?.wrapper,
           )}
           onClick={onClick}
           onKeyDown={handleKeyDown}
-          tabIndex={showStatusIndicator || disableHoverState ? undefined : 0}
+          tabIndex={
+            showStatusIndicator || disableHoverState || disabled ? undefined : 0
+          }
           role={showStatusIndicator || disableHoverState ? undefined : 'button'}
         >
           {showStatusIndicator && size !== 'small' && (

package/lib/components/DateRangePicker/Calendar.d.ts

@@ -15,7 +15,7 @@ import {
   WEEKDAYS,
 } from '../../utils';
 import {isAfter, isBefore, isSame} from '../../utils/date-range-picker';
-import {BodySmall, SubTitleExtraSmall, TEXT_COLORS} from '../Text';
+import {BodySmall, TEXT_COLORS} from '../Text';
 import {Day} from './Day';
 import css from './Calendar.module.css';
 type CalendarProps = {
@@ -36,21 +36,6 @@ type CalendarProps = {
   };
   today: string;
 };
-
-const getFormattedDate = (marker: string, dateRange: DateRange) => {
-  const {startDate, endDate} = dateRange;
-
-  switch (marker) {
-    case MARKERS.DATE_RANGE_START:
-      return startDate
-        ? moment.utc(startDate).format('MMMM D, YYYY')
-        : 'Start Date';
-
-    default:
-      return endDate ? moment.utc(endDate).format('MMMM D, YYYY') : 'End Date';
-  }
-};
-
 export const Calendar = ({
   value,
   marker,
@@ -63,13 +48,6 @@ export const Calendar = ({
   today,
 }: CalendarProps): React.ReactNode => (
   <div className={css.calendar}>
-    <SubTitleExtraSmall
-      className={css.selectedDate}
-      color={TEXT_COLORS.secondary}
-    >
-      {getFormattedDate(marker, dateRange)}
-    </SubTitleExtraSmall>
-
     <div className={css.calendarRow}>
       {WEEKDAYS.map((day) => (
         <BodySmall

package/lib/components/DateRangePicker/Calendar.js

@@ -17,18 +17,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 // $FlowFixMe[untyped-import]
 
-const getFormattedDate = (marker, dateRange) => {
-  const {
-    startDate,
-    endDate
-  } = dateRange;
-  switch (marker) {
-    case _utils.MARKERS.DATE_RANGE_START:
-      return startDate ? _moment.default.utc(startDate).format('MMMM D, YYYY') : 'Start Date';
-    default:
-      return endDate ? _moment.default.utc(endDate).format('MMMM D, YYYY') : 'End Date';
-  }
-};
 const Calendar = _ref => {
   let {
     value,
@@ -43,10 +31,7 @@ const Calendar = _ref => {
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     className: _CalendarModule.default.calendar
-  }, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
-    className: _CalendarModule.default.selectedDate,
-    color: _Text.TEXT_COLORS.secondary
-  }, getFormattedDate(marker, dateRange)), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: _CalendarModule.default.calendarRow
   }, _utils.WEEKDAYS.map(day => /*#__PURE__*/React.createElement(_Text.BodySmall, {
     key: day,

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

@@ -17,7 +17,7 @@ import {
   WEEKDAYS,
 } from '../../utils';
 import {isAfter, isBefore, isSame} from '../../utils/date-range-picker';
-import {BodySmall, SubTitleExtraSmall, TEXT_COLORS} from '../Text';
+import {BodySmall, TEXT_COLORS} from '../Text';
 
 import {Day} from './Day';
 
@@ -43,18 +43,6 @@ type CalendarProps = {
   today: string,
 };
 
-const getFormattedDate = (marker: string, dateRange: DateRange) => {
-  const {startDate, endDate} = dateRange;
-  switch (marker) {
-  case MARKERS.DATE_RANGE_START:
-    return startDate
-      ? moment.utc(startDate).format('MMMM D, YYYY')
-      : 'Start Date';
-  default:
-    return endDate ? moment.utc(endDate).format('MMMM D, YYYY') : 'End Date';
-  }
-};
-
 export const Calendar = ({
   value,
   marker,
@@ -67,13 +55,6 @@ export const Calendar = ({
   today,
 }: CalendarProps): React.Node => (
   <div className={css.calendar}>
-    <SubTitleExtraSmall
-      className={css.selectedDate}
-      color={TEXT_COLORS.secondary}
-    >
-      {getFormattedDate(marker, dateRange)}
-    </SubTitleExtraSmall>
-
     <div className={css.calendarRow}>
       {WEEKDAYS.map((day) => (
         <BodySmall

package/lib/components/DateRangePicker/DateRangeWrapper.d.ts

@@ -16,6 +16,7 @@ import classify from '../../utils/classify';
 import {
   addTimezoneEndOfDay,
   addTimezoneStartOfDay,
+  getFormattedDate,
   isAfter,
   isSameOrAfter,
   isSameOrBefore,
@@ -31,7 +32,8 @@ import {
 } from '../Card';
 import {Dropdown, SimpleDropdown} from '../Dropdown';
 import {FocusManager} from '../FocusManager';
-import {ClickableIcon} from '../Icon';
+import {ClickableIcon, Icon, ICON_SIZE, ICON_TYPE} from '../Icon';
+import {BodySmall, TEXT_COLORS} from '../Text';
 import {Calendar} from './Calendar';
 import css from './DateRangeWrapper.module.css';
 type HeaderProps = {
@@ -72,6 +74,8 @@ type DateRangeWrapperProps = {
     ) => void;
   };
   today: string;
+  startDateLabel?: string;
+  endDateLabel?: string;
 };
 
 const CalendarHeader = ({
@@ -176,6 +180,8 @@ export const DateRangeWrapper: React$AbstractComponent<
       cardWrapperClass,
       hideTimezone,
       today,
+      startDateLabel = 'Start Date',
+      endDateLabel = 'End Date',
     }: DateRangeWrapperProps,
     ref,
   ): React.ReactNode => {
@@ -218,6 +224,35 @@ export const DateRangeWrapper: React$AbstractComponent<
           ref={ref}
         >
           <CardHeader className={css.cardHeader}>
+            <BodySmall
+              className={css.selectedDate}
+              color={TEXT_COLORS.secondary}
+            >
+              {`${startDateLabel}: ${getFormattedDate(
+                MARKERS.DATE_RANGE_START,
+                dateRange,
+              )}`}
+            </BodySmall>
+
+            <Icon
+              name="minus"
+              size={ICON_SIZE.small}
+              type={ICON_TYPE.regular}
+              color={TEXT_COLORS.secondary}
+            />
+
+            <BodySmall
+              className={css.selectedDate}
+              color={TEXT_COLORS.secondary}
+            >
+              {`${endDateLabel}: ${getFormattedDate(
+                MARKERS.DATE_RANGE_END,
+                dateRange,
+              )}`}
+            </BodySmall>
+          </CardHeader>
+
+          <div className={css.calendarMenuContainer}>
             <CalendarHeader
               marker={MARKERS.DATE_RANGE_START}
               rangeStartMonth={rangeStartMonth}
@@ -258,7 +293,8 @@ export const DateRangeWrapper: React$AbstractComponent<
                 onMonthNavigate(MARKERS.DATE_RANGE_END, NAVIGATION_ACTION.PREV)
               }
             />
-          </CardHeader>
+          </div>
+
           <CardContent className={css.dateRangeCalendars}>
             <Calendar
               marker={MARKERS.DATE_RANGE_START}
@@ -272,7 +308,7 @@ export const DateRangeWrapper: React$AbstractComponent<
               {...commonProps}
             />
           </CardContent>
-          <CardFooter>
+          <CardFooter className={css.cardFooter}>
             <CardTitle className={css.timezoneDropdownContainer}>
               {!hideTimezone && (
                 <SimpleDropdown

package/lib/components/DateRangePicker/DateRangeWrapper.js

@@ -14,6 +14,7 @@ var _Card = require("../Card");
 var _Dropdown = require("../Dropdown");
 var _FocusManager = require("../FocusManager");
 var _Icon = require("../Icon");
+var _Text = require("../Text");
 var _Calendar = require("./Calendar.js");
 var _DateRangeWrapperModule = _interopRequireDefault(require("./DateRangeWrapper.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -112,7 +113,9 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     setRangeEndMonth,
     cardWrapperClass,
     hideTimezone,
-    today
+    today,
+    startDateLabel = 'Start Date',
+    endDateLabel = 'End Date'
   } = _ref2;
   const canNavigateCloser = _moment.default.utc(rangeStartMonth).year() !== _moment.default.utc(rangeEndMonth).year() || Math.abs(_moment.default.utc(rangeStartMonth).month() - _moment.default.utc(rangeEndMonth).month()) > 1;
   const handleApplyClick = () => {
@@ -149,6 +152,19 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ref: ref
   }, /*#__PURE__*/React.createElement(_Card.CardHeader, {
     className: _DateRangeWrapperModule.default.cardHeader
+  }, /*#__PURE__*/React.createElement(_Text.BodySmall, {
+    className: _DateRangeWrapperModule.default.selectedDate,
+    color: _Text.TEXT_COLORS.secondary
+  }, `${startDateLabel}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_START, dateRange)}`), /*#__PURE__*/React.createElement(_Icon.Icon, {
+    name: "minus",
+    size: _Icon.ICON_SIZE.small,
+    type: _Icon.ICON_TYPE.regular,
+    color: _Text.TEXT_COLORS.secondary
+  }), /*#__PURE__*/React.createElement(_Text.BodySmall, {
+    className: _DateRangeWrapperModule.default.selectedDate,
+    color: _Text.TEXT_COLORS.secondary
+  }, `${endDateLabel}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_END, dateRange)}`)), /*#__PURE__*/React.createElement("div", {
+    className: _DateRangeWrapperModule.default.calendarMenuContainer
   }, /*#__PURE__*/React.createElement(CalendarHeader, {
     marker: _utils.MARKERS.DATE_RANGE_START,
     rangeStartMonth: rangeStartMonth,
@@ -183,7 +199,9 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   }), /*#__PURE__*/React.createElement(_Calendar.Calendar, _extends({
     marker: _utils.MARKERS.DATE_RANGE_END,
     value: rangeEndMonth
-  }, commonProps))), /*#__PURE__*/React.createElement(_Card.CardFooter, null, /*#__PURE__*/React.createElement(_Card.CardTitle, {
+  }, commonProps))), /*#__PURE__*/React.createElement(_Card.CardFooter, {
+    className: _DateRangeWrapperModule.default.cardFooter
+  }, /*#__PURE__*/React.createElement(_Card.CardTitle, {
     className: _DateRangeWrapperModule.default.timezoneDropdownContainer
   }, !hideTimezone && /*#__PURE__*/React.createElement(_Dropdown.SimpleDropdown, {
     options: (0, _utils.getTimezones)(),

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

@@ -18,6 +18,7 @@ import classify from '../../utils/classify';
 import {
   addTimezoneEndOfDay,
   addTimezoneStartOfDay,
+  getFormattedDate,
   isAfter,
   isSameOrAfter,
   isSameOrBefore,
@@ -33,7 +34,8 @@ import {
 } from '../Card';
 import {Dropdown, SimpleDropdown} from '../Dropdown';
 import {FocusManager} from '../FocusManager';
-import {ClickableIcon} from '../Icon';
+import {ClickableIcon, Icon, ICON_SIZE, ICON_TYPE} from '../Icon';
+import {BodySmall, TEXT_COLORS} from '../Text';
 
 import {Calendar} from './Calendar.js';
 
@@ -79,6 +81,8 @@ type DateRangeWrapperProps = {
     ) => void,
   },
   today: string,
+  startDateLabel?: string,
+  endDateLabel?: string,
 };
 
 const CalendarHeader = ({
@@ -184,6 +188,8 @@ export const DateRangeWrapper: React$AbstractComponent<
       cardWrapperClass,
       hideTimezone,
       today,
+      startDateLabel = 'Start Date',
+      endDateLabel = 'End Date',
     }: DateRangeWrapperProps,
     ref,
   ): React.Node => {
@@ -228,6 +234,35 @@ export const DateRangeWrapper: React$AbstractComponent<
           ref={ref}
         >
           <CardHeader className={css.cardHeader}>
+            <BodySmall
+              className={css.selectedDate}
+              color={TEXT_COLORS.secondary}
+            >
+              {`${startDateLabel}: ${getFormattedDate(
+                MARKERS.DATE_RANGE_START,
+                dateRange,
+              )}`}
+            </BodySmall>
+
+            <Icon
+              name="minus"
+              size={ICON_SIZE.small}
+              type={ICON_TYPE.regular}
+              color={TEXT_COLORS.secondary}
+            />
+
+            <BodySmall
+              className={css.selectedDate}
+              color={TEXT_COLORS.secondary}
+            >
+              {`${endDateLabel}: ${getFormattedDate(
+                MARKERS.DATE_RANGE_END,
+                dateRange,
+              )}`}
+            </BodySmall>
+          </CardHeader>
+
+          <div className={css.calendarMenuContainer}>
             <CalendarHeader
               marker={MARKERS.DATE_RANGE_START}
               rangeStartMonth={rangeStartMonth}
@@ -268,7 +303,8 @@ export const DateRangeWrapper: React$AbstractComponent<
                 onMonthNavigate(MARKERS.DATE_RANGE_END, NAVIGATION_ACTION.PREV)
               }
             />
-          </CardHeader>
+          </div>
+
           <CardContent className={css.dateRangeCalendars}>
             <Calendar
               marker={MARKERS.DATE_RANGE_START}
@@ -282,7 +318,7 @@ export const DateRangeWrapper: React$AbstractComponent<
               {...commonProps}
             />
           </CardContent>
-          <CardFooter>
+          <CardFooter className={css.cardFooter}>
             <CardTitle className={css.timezoneDropdownContainer}>
               {!hideTimezone && (
                 <SimpleDropdown

package/lib/components/DateRangePicker/DateRangeWrapper.module.css

@@ -6,8 +6,11 @@
 @value (
   spaceNone, 
   spaceSmall,
-  spaceXSmall
+  spaceXSmall,
+  spaceMedium
 ) from '../../styles/variables/_space.css';
+@value (borderRadiusMedium) from '../../styles/variables/_border.css';
+@value (colorBackgroundPrimary) from '../../styles/variables/_color.css';
 
 .dateRangeWrapper {
   display: flex;
@@ -18,6 +21,15 @@
   width: sizeFluid;
   padding: spaceXSmall;
   gap: spaceSmall;
+  background-color: colorBackgroundPrimary;
+  border-top-left-radius: borderRadiusMedium;
+  border-top-right-radius: borderRadiusMedium;
+}
+
+.cardFooter {
+  background-color: colorBackgroundPrimary;
+  border-bottom-left-radius: borderRadiusMedium;
+  border-bottom-right-radius: borderRadiusMedium;
 }
 
 .calendarHeader {
@@ -62,3 +74,22 @@
 .mainContainer {
   width: sizeFluid;
 }
+
+.selectedDateContainer {
+  display: flex;
+  gap: spaceMedium;
+  padding: spaceXSmall spaceSmall;
+}
+
+.selectedDate {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+
+.calendarMenuContainer {
+  display: flex;
+  gap: spaceSmall;
+  width: sizeFluid;
+  padding: spaceXSmall;
+}

package/lib/components/Icon/ClickableIcon.d.ts

@@ -27,7 +27,7 @@ export const ClickableIcon: React$AbstractComponent<
       className,
       // Deprecated for Clickable Icon
       classNames,
-      disabled,
+      disabled = false,
       ...props
     }: ClickableIconProps,
     ref,

package/lib/components/Icon/ClickableIcon.js

@@ -22,7 +22,7 @@ const ClickableIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className,
     // Deprecated for Clickable Icon
     classNames,
-    disabled,
+    disabled = false,
     ...props
   } = _ref;
   const onKeyDownHandler = e => {

package/lib/components/Icon/ClickableIcon.js.flow

@@ -35,7 +35,7 @@ export const ClickableIcon: React$AbstractComponent<
       onClick,
       className, // Deprecated for Clickable Icon
       classNames,
-      disabled,
+      disabled = false,
       ...props
     }: ClickableIconProps,
     ref,

package/lib/components/Modal/Modal.d.ts

@@ -13,6 +13,7 @@ import {
   motionDurationNormal,
   motionDurationSlow,
 } from '../../styles/variables/_motion';
+import {opacity0, opacity100} from '../../styles/variables/_opacity';
 import {spaceNegHalfFluid} from '../../styles/variables/_space';
 import classify from '../../utils/classify';
 import {uuid} from '../../utils/helpers';
@@ -82,12 +83,15 @@ const DEFAULT_MODAL_ANIMATION = {
   },
   initial: {
     transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(0.95)`,
+    opacity: opacity0,
   },
   open: {
     transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(1)`,
+    opacity: opacity100,
   },
   close: {
     transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(0.95)`,
+    opacity: opacity0,
   },
 };
 export const ModalHeader = ({
@@ -270,7 +274,7 @@ export const Modal = ({
     };
   }, [isOpen, onClose]);
 
-  if (!isTransitioning && !isOpen) {
+  if (!isOpen && !isMounted) {
     // Check overflow after resetting the DOM for modal. This should always happen after DOM reset
     // TODO(Nishant): Better way to do this?
     setTimeout(() => {
@@ -311,6 +315,10 @@ export const Modal = ({
               classNames?.backdrop,
             )}
             onClick={onBackdropClick}
+            style={{
+              opacity: styles?.opacity,
+              transition: styles?.transition,
+            }}
           />
         )}
 

package/lib/components/Modal/Modal.js

@@ -9,6 +9,7 @@ var _reactDom = require("react-dom");
 var _react2 = require("@floating-ui/react");
 var _useMountTransition = _interopRequireDefault(require("../../hooks/useMountTransition"));
 var _motion = require("../../styles/variables/_motion");
+var _opacity = require("../../styles/variables/_opacity");
 var _space = require("../../styles/variables/_space");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _helpers = require("../../utils/helpers");
@@ -25,13 +26,16 @@ const DEFAULT_MODAL_ANIMATION = {
     close: parseInt(_motion.motionDurationNormal)
   },
   initial: {
-    transform: `translate(${_space.spaceNegHalfFluid}, ${_space.spaceNegHalfFluid}) scale(0.95)`
+    transform: `translate(${_space.spaceNegHalfFluid}, ${_space.spaceNegHalfFluid}) scale(0.95)`,
+    opacity: _opacity.opacity0
   },
   open: {
-    transform: `translate(${_space.spaceNegHalfFluid}, ${_space.spaceNegHalfFluid}) scale(1)`
+    transform: `translate(${_space.spaceNegHalfFluid}, ${_space.spaceNegHalfFluid}) scale(1)`,
+    opacity: _opacity.opacity100
   },
   close: {
-    transform: `translate(${_space.spaceNegHalfFluid}, ${_space.spaceNegHalfFluid}) scale(0.95)`
+    transform: `translate(${_space.spaceNegHalfFluid}, ${_space.spaceNegHalfFluid}) scale(0.95)`,
+    opacity: _opacity.opacity0
   }
 };
 const ModalHeader = _ref => {
@@ -193,7 +197,7 @@ const Modal = _ref4 => {
       window.removeEventListener('keyup', onKeyPress);
     };
   }, [isOpen, onClose]);
-  if (!isTransitioning && !isOpen) {
+  if (!isOpen && !isMounted) {
     // Check overflow after resetting the DOM for modal. This should always happen after DOM reset
     // TODO(Nishant): Better way to do this?
     setTimeout(() => {
@@ -222,7 +226,11 @@ const Modal = _ref4 => {
     className: (0, _classify.default)(_ModalModule.default.backdrop, {
       [_ModalModule.default.darkBackdrop]: !hideBackdrop
     }, classNames?.backdrop),
-    onClick: onBackdropClick
+    onClick: onBackdropClick,
+    style: {
+      opacity: styles?.opacity,
+      transition: styles?.transition
+    }
   }), isMounted && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_ModalModule.default.modal, {
       [_ModalModule.default.small]: size === 'small',

package/lib/components/Modal/Modal.js.flow

@@ -17,6 +17,7 @@ import {
   motionDurationNormal,
   motionDurationSlow,
 } from '../../styles/variables/_motion';
+import {opacity0, opacity100} from '../../styles/variables/_opacity';
 import {spaceNegHalfFluid} from '../../styles/variables/_space';
 import classify from '../../utils/classify';
 import {uuid} from '../../utils/helpers';
@@ -88,12 +89,15 @@ const DEFAULT_MODAL_ANIMATION = {
   },
   initial: {
     transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(0.95)`,
+    opacity: opacity0,
   },
   open: {
     transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(1)`,
+    opacity: opacity100,
   },
   close: {
     transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(0.95)`,
+    opacity: opacity0,
   },
 };
 
@@ -276,7 +280,7 @@ export const Modal = ({
     };
   }, [isOpen, onClose]);
 
-  if (!isTransitioning && !isOpen) {
+  if (!isOpen && !isMounted) {
     // Check overflow after resetting the DOM for modal. This should always happen after DOM reset
     // TODO(Nishant): Better way to do this?
     setTimeout(() => {
@@ -318,6 +322,10 @@ export const Modal = ({
               classNames?.backdrop,
             )}
             onClick={onBackdropClick}
+            style={{
+              opacity: styles?.opacity,
+              transition: styles?.transition,
+            }}
           />
         )}
 

package/lib/components/Table/DefaultRow.d.ts

@@ -125,6 +125,7 @@ export function DefaultRow<T extends GenericObject, U extends GenericObject>({
             data={data}
             extras={extras}
             selected={selected}
+            disabled={disabled}
             className={classify({
               [css.stickyCell]: sticky,
             })}

package/lib/components/Table/DefaultRow.js

@@ -85,6 +85,7 @@ function DefaultRow(_ref2) {
       data: data,
       extras: extras,
       selected: selected,
+      disabled: disabled,
       className: (0, _classify.default)({
         [_TableModule.default.stickyCell]: sticky
       })

package/lib/components/Table/DefaultRow.js.flow

@@ -135,6 +135,7 @@ export function DefaultRow<T: GenericObject, U: GenericObject>({
             data={data}
             extras={extras}
             selected={selected}
+            disabled={disabled}
             className={classify({[css.stickyCell]: sticky})}
           />
         ) : (

package/lib/components/Table/DefaultTableHeader.d.ts

@@ -29,6 +29,7 @@ export type GenericHeaderItem<
     extras?: U;
     className?: string;
     selected?: boolean;
+    disabled?: boolean;
   }>;
 };
 export type GenericHeaderItems<T, U> = GenericHeaderItem<T, U>[];

package/lib/components/Table/DefaultTableHeader.js.flow

@@ -32,6 +32,7 @@ export type GenericHeaderItem<T: GenericObject, U: GenericObject> = {
     extras?: U,
     className?: string,
     selected?: boolean,
+    disabled?: boolean,
   }>,
 };
 

package/lib/components/Table/StaticTable.d.ts

@@ -55,6 +55,7 @@ export function StaticTable<
     sortKey,
     sortDirection,
     selectedKeys,
+    disabledKeys = [],
     onSelect,
     isLoading,
     idName = 'id',
@@ -159,7 +160,13 @@ export function StaticTable<
 
               data as Data;
               const selected =
-                selectedKeys?.includes(get(data, idName)) ?? undefined;
+                selectedKeys && Array.isArray(selectedKeys)
+                  ? selectedKeys.includes(get(data, idName))
+                  : undefined;
+              const isRowDisabled =
+                disabledKeys && Array.isArray(disabledKeys)
+                  ? disabledKeys.includes(get(data, idName))
+                  : false;
               return TableRow ? (
                 <TableRow
                   key={key}
@@ -168,7 +175,7 @@ export function StaticTable<
                   extras={extras}
                   sortedKeys={rowKeys ?? mappedKeys}
                   selected={selected}
-                  disabled={disabled}
+                  disabled={disabled || isRowDisabled}
                 />
               ) : (
                 <DefaultRow
@@ -182,7 +189,7 @@ export function StaticTable<
                       ? (_v) => onSelect?.(xor(selectedKeys ?? [], [key]))
                       : undefined
                   }
-                  disabled={disabled}
+                  disabled={disabled || isRowDisabled}
                   classNames={{
                     tableRow: classNames?.tableRow,
                     checkbox: classNames?.checkbox,

package/lib/components/Table/StaticTable.js

@@ -51,6 +51,7 @@ function StaticTable(props) {
     sortKey,
     sortDirection,
     selectedKeys,
+    disabledKeys = [],
     onSelect,
     isLoading,
     idName = 'id',
@@ -128,7 +129,8 @@ function StaticTable(props) {
       return null;
     }
     data;
-    const selected = selectedKeys?.includes((0, _get.default)(data, idName)) ?? undefined;
+    const selected = selectedKeys && Array.isArray(selectedKeys) ? selectedKeys.includes((0, _get.default)(data, idName)) : undefined;
+    const isRowDisabled = disabledKeys && Array.isArray(disabledKeys) ? disabledKeys.includes((0, _get.default)(data, idName)) : false;
     return TableRow ? /*#__PURE__*/React.createElement(TableRow, {
       key: key,
       data: data,
@@ -138,7 +140,7 @@ function StaticTable(props) {
       extras: extras,
       sortedKeys: rowKeys ?? mappedKeys,
       selected: selected,
-      disabled: disabled
+      disabled: disabled || isRowDisabled
     }) : /*#__PURE__*/React.createElement(_DefaultRow.DefaultRow, {
       key: key,
       data: data,
@@ -146,7 +148,7 @@ function StaticTable(props) {
       headers: headers,
       selected: selected,
       onSelect: selectedKeys != null ? _v => onSelect?.((0, _xor.default)(selectedKeys ?? [], [key])) : undefined,
-      disabled: disabled,
+      disabled: disabled || isRowDisabled,
       classNames: {
         tableRow: classNames?.tableRow,
         checkbox: classNames?.checkbox

package/lib/components/Table/StaticTable.js.flow

@@ -60,6 +60,7 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
     sortKey,
     sortDirection,
     selectedKeys,
+    disabledKeys = [],
     onSelect,
     isLoading,
     idName = 'id',
@@ -104,7 +105,6 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
       }
     }
     : undefined;
-
   return (
     <div
       className={classify(css.tableContainer, classNames?.wrapper)}
@@ -165,7 +165,13 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
               }
               (data: Data);
               const selected =
-                selectedKeys?.includes(get(data, idName)) ?? undefined;
+                selectedKeys && Array.isArray(selectedKeys)
+                  ? selectedKeys.includes(get(data, idName))
+                  : undefined;
+              const isRowDisabled =
+                disabledKeys && Array.isArray(disabledKeys)
+                  ? disabledKeys.includes(get(data, idName))
+                  : false;
 
               return TableRow ? (
                 <TableRow
@@ -176,7 +182,7 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
                   extras={extras}
                   sortedKeys={rowKeys ?? mappedKeys}
                   selected={selected}
-                  disabled={disabled}
+                  disabled={disabled || isRowDisabled}
                 />
               ) : (
                 <DefaultRow
@@ -190,7 +196,7 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
                       ? (_v) => onSelect?.(xor(selectedKeys ?? [], [key]))
                       : undefined
                   }
-                  disabled={disabled}
+                  disabled={disabled || isRowDisabled}
                   classNames={{
                     tableRow: classNames?.tableRow,
                     checkbox: classNames?.checkbox,

package/lib/components/Table/Table.d.ts

@@ -31,6 +31,7 @@ export type TableProps<T, U> = {
   // Please start using this prop if you want internal sorting to work in the table
   enableInternalSorting?: boolean;
   selectedKeys?: string[];
+  disabledKeys?: string[];
   onSelect?: (keys: string[]) => unknown;
   idName?: $Keys<T>;
   onSort?: (key: $Keys<T>, direction: SortDirection) => void;

package/lib/components/Table/Table.docs.d.ts

@@ -116,6 +116,18 @@ export const TABLE_DOCS = {
         },
       },
     },
+    disabledKeys: {
+      description:
+        'array of keys which are disabled. This prop is used to disable the checkbox and its events for particular rows.',
+      control: {
+        type: 'object',
+      },
+      table: {
+        type: {
+          summary: 'string[]',
+        },
+      },
+    },
     //onSelect?: (keys: string[]) => mixed
     onSelect: {
       description: 'callback function when any row is selected',

package/lib/components/Table/Table.docs.js

@@ -114,6 +114,17 @@ const TABLE_DOCS = {
         }
       }
     },
+    disabledKeys: {
+      description: 'array of keys which are disabled. This prop is used to disable the checkbox and its events for particular rows.',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: 'string[]'
+        }
+      }
+    },
     //onSelect?: (keys: string[]) => mixed
     onSelect: {
       description: 'callback function when any row is selected',

package/lib/components/Table/Table.docs.js.flow

@@ -97,6 +97,16 @@ export const TABLE_DOCS = {
         type: {summary: 'string[]'},
       },
     },
+    disabledKeys: {
+      description:
+        'array of keys which are disabled. This prop is used to disable the checkbox and its events for particular rows.',
+      control: {
+        type: 'object',
+      },
+      table: {
+        type: {summary: 'string[]'},
+      },
+    },
     //onSelect?: (keys: string[]) => mixed
     onSelect: {
       description: 'callback function when any row is selected',

package/lib/components/Table/Table.js.flow

@@ -45,6 +45,7 @@ export type TableProps<T, U> = {
   enableInternalSorting?: boolean,
 
   selectedKeys?: string[],
+  disabledKeys?: string[],
   onSelect?: (keys: string[]) => mixed,
 
   idName?: $Keys<T>,

package/lib/components/TokenListInput/TokenValueChips.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {elevationMenu} from '../../styles/variables/_elevation';
 import {Chip} from '../Chip';
 import {Tooltip} from '../Tooltip';
 type Props<T> = {
@@ -23,7 +24,7 @@ function defaultResolveTokenValue<T>({
   // $FlowFixMe[prop-missing] - assumes token has label and key
   return (
     // $FlowFixMe - assumes token has label and key
-    <Tooltip body={token?.label}>
+    <Tooltip body={token?.label} elevation={elevationMenu}>
       <Chip // $FlowFixMe - assumes token has key
         key={token?.key}
         onDismiss={(_) => onDismiss?.(token)}

package/lib/components/TokenListInput/TokenValueChips.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TokenValueChips = TokenValueChips;
 var React = _interopRequireWildcard(require("react"));
+var _elevation = require("../../styles/variables/_elevation");
 var _Chip = require("../Chip");
 var _Tooltip = require("../Tooltip");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -22,7 +23,8 @@ function defaultResolveTokenValue(_ref) {
     /*#__PURE__*/
     // $FlowFixMe - assumes token has label and key
     React.createElement(_Tooltip.Tooltip, {
-      body: token?.label
+      body: token?.label,
+      elevation: _elevation.elevationMenu
     }, /*#__PURE__*/React.createElement(_Chip.Chip
     // $FlowFixMe - assumes token has key
     , {

package/lib/components/TokenListInput/TokenValueChips.js.flow

@@ -1,6 +1,7 @@
 // @flow strict
 import * as React from 'react';
 
+import {elevationMenu} from '../../styles/variables/_elevation';
 import {Chip} from '../Chip';
 import {Tooltip} from '../Tooltip';
 
@@ -29,7 +30,7 @@ function defaultResolveTokenValue<T>({
 
   return (
     // $FlowFixMe - assumes token has label and key
-    <Tooltip body={token?.label}>
+    <Tooltip body={token?.label} elevation={elevationMenu}>
       <Chip
         // $FlowFixMe - assumes token has key
         key={token?.key}

package/lib/utils/date-range-picker/date-range-picker.d.ts

@@ -116,8 +116,10 @@ export const wrangleMoment = (date?: string | Date): Date => {
 
   return date instanceof moment ? date.toDate() : parseISO(date);
 };
-export const formatIsoDate = (date?: string | Date): string =>
-  moment.utc(date).format('YYYY-MM-DD');
+export const formatIsoDate = (
+  date?: string | Date,
+  format: string = 'YYYY-MM-DD',
+): string => moment.utc(date).format(format);
 export const isStartOfRange = ({startDate}: DateRange, date: string): boolean =>
   Boolean(startDate) && moment.utc(date).isSame(moment.utc(startDate), 'd');
 export const isEndOfRange = ({endDate}: DateRange, date: string): boolean =>
@@ -389,3 +391,21 @@ export const isBetween = (
 // If the date results in a date that exists in the calendar
 export const isValid = (date?: string | null | undefined): boolean =>
   moment.utc(date).isValid();
+export const getFormattedDate = (
+  marker: string,
+  dateRange: DateRange,
+): string => {
+  const {startDate, endDate} = dateRange;
+
+  switch (marker) {
+    case MARKERS.DATE_RANGE_START:
+      return startDate
+        ? moment.utc(startDate).format('MMM DD, YYYY')
+        : 'MMM DD, YYYY';
+
+    default:
+      return endDate
+        ? moment.utc(endDate).format('MMM DD, YYYY')
+        : 'MMM DD, YYYY';
+  }
+};

package/lib/utils/date-range-picker/date-range-picker.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrangleMoment = exports.isValid = exports.isStartOfRange = exports.isStartDateEndDateSame = exports.isSameOrBefore = exports.isSameOrAfter = exports.isSame = exports.isEndOfRange = exports.isBetween = exports.isBefore = exports.isAfter = exports.inDateRange = exports.getValidDates = exports.getTimezones = exports.getSubtractedDate = exports.getMonthEndDate = exports.getDaysInMonth = exports.getAvailableMonths = exports.getAddedDate = exports.generateAvailableYears = exports.formatIsoDate = exports.checkRangeValidity = exports.WEEKDAYS = exports.NAVIGATION_ACTION = exports.MONTHS = exports.MARKERS = exports.DATE_RANGE_PICKER_ERRORS = void 0;
+exports.wrangleMoment = exports.isValid = exports.isStartOfRange = exports.isStartDateEndDateSame = exports.isSameOrBefore = exports.isSameOrAfter = exports.isSame = exports.isEndOfRange = exports.isBetween = exports.isBefore = exports.isAfter = exports.inDateRange = exports.getValidDates = exports.getTimezones = exports.getSubtractedDate = exports.getMonthEndDate = exports.getFormattedDate = exports.getDaysInMonth = exports.getAvailableMonths = exports.getAddedDate = exports.generateAvailableYears = exports.formatIsoDate = exports.checkRangeValidity = exports.WEEKDAYS = exports.NAVIGATION_ACTION = exports.MONTHS = exports.MARKERS = exports.DATE_RANGE_PICKER_ERRORS = void 0;
 var _parseISO = _interopRequireDefault(require("date-fns/parseISO"));
 var _invariant = _interopRequireDefault(require("invariant"));
 var _lodash = require("lodash");
@@ -104,7 +104,10 @@ const wrangleMoment = date => {
   return date instanceof _moment.default ? date.toDate() : (0, _parseISO.default)(date);
 };
 exports.wrangleMoment = wrangleMoment;
-const formatIsoDate = date => _moment.default.utc(date).format('YYYY-MM-DD');
+const formatIsoDate = function (date) {
+  let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'YYYY-MM-DD';
+  return _moment.default.utc(date).format(format);
+};
 exports.formatIsoDate = formatIsoDate;
 const isStartOfRange = (_ref, date) => {
   let {
@@ -323,4 +326,17 @@ const isBetween = (date, startRange, endRange) => _moment.default.utc(date).isBe
 // If the date results in a date that exists in the calendar
 exports.isBetween = isBetween;
 const isValid = date => _moment.default.utc(date).isValid();
-exports.isValid = isValid;
+exports.isValid = isValid;
+const getFormattedDate = (marker, dateRange) => {
+  const {
+    startDate,
+    endDate
+  } = dateRange;
+  switch (marker) {
+    case MARKERS.DATE_RANGE_START:
+      return startDate ? _moment.default.utc(startDate).format('MMM DD, YYYY') : 'MMM DD, YYYY';
+    default:
+      return endDate ? _moment.default.utc(endDate).format('MMM DD, YYYY') : 'MMM DD, YYYY';
+  }
+};
+exports.getFormattedDate = getFormattedDate;

package/lib/utils/date-range-picker/date-range-picker.js.flow

@@ -88,8 +88,10 @@ export const wrangleMoment = (date?: string | Date): Date => {
   return date instanceof moment ? date.toDate() : parseISO(date);
 };
 
-export const formatIsoDate = (date?: string | Date): string =>
-  moment.utc(date).format('YYYY-MM-DD');
+export const formatIsoDate = (
+  date?: string | Date,
+  format?: string = 'YYYY-MM-DD',
+): string => moment.utc(date).format(format);
 
 export const isStartOfRange = ({startDate}: DateRange, date: string): boolean =>
   Boolean(startDate) && moment.utc(date).isSame(moment.utc(startDate), 'd');
@@ -370,3 +372,20 @@ export const isBetween = (
 
 // If the date results in a date that exists in the calendar
 export const isValid = (date?: ?string): boolean => moment.utc(date).isValid();
+
+export const getFormattedDate = (
+  marker: string,
+  dateRange: DateRange,
+): string => {
+  const {startDate, endDate} = dateRange;
+  switch (marker) {
+  case MARKERS.DATE_RANGE_START:
+    return startDate
+      ? moment.utc(startDate).format('MMM DD, YYYY')
+      : 'MMM DD, YYYY';
+  default:
+    return endDate
+      ? moment.utc(endDate).format('MMM DD, YYYY')
+      : 'MMM DD, YYYY';
+  }
+};

package/package.json

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