@hero-design/rn 8.112.5 → 8.113.1

package/src/components/DatePicker/hooks/__tests__/useFormatDate.spec.ts

@@ -1,5 +1,5 @@
 import { renderHook } from '@testing-library/react-hooks';
-import { format as formatDate } from 'date-fns/fp';
+import formatDate from 'date-fns/fp/format';
 import useFormatDate from '../useFormatDate';
 import { useDateTimeFormat } from '../../../LocaleProvider/hooks';
 
@@ -8,12 +8,10 @@ jest.mock('../../../LocaleProvider/hooks', () => ({
   useDateTimeFormat: jest.fn(),
 }));
 
-jest.mock('date-fns/fp', () => {
-  return {
-    format: jest.fn((format, date) => {
-      return `Formatted: ${format}, Date: ${date.toISOString()}`;
-    }),
-  };
+jest.mock('date-fns/fp/format', () => {
+  return jest.fn((format, date) => {
+    return `Formatted: ${format}, Date: ${date.toISOString()}`;
+  });
 });
 
 describe('useFormatDate', () => {

package/src/components/DatePicker/hooks/useFormatDate.ts

@@ -1,4 +1,4 @@
-import { format as formatDate } from 'date-fns/fp';
+import formatDate from 'date-fns/fp/format';
 import { useDateTimeFormat } from '../../LocaleProvider/hooks';
 import { getDateFormat } from './utils';
 

package/src/components/DatePicker/types.ts

@@ -43,7 +43,7 @@ export interface DatePickerProps {
   confirmLabel: string;
   /**
    * Date format. Default format is dd/MM/yyyy.
-   * Following date-fns's format (https://date-fns.org/v4.1.0/docs/format).
+   * Following date-fns's format (https://date-fns.org/v2.16.1/docs/format).
    */
   displayFormat?: string;
   /**

package/src/components/Drawer/DragableDrawer/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Animated, PanResponder, Easing, Platform } from 'react-native';
 
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import {
   StyledDragableContainer,
   StyledDragableDrawerContainer,
@@ -54,7 +54,7 @@ const DragableDrawer = ({
   onExpanded,
   onCollapsed,
   testID,
-}: DragableDrawerProps): JSX.Element => {
+}: DragableDrawerProps): ReactElement => {
   const [height, setHeight] = useState(0);
   const baseHeightForMeasure = useRef(0);
   const snapPointsData = useRef<SnapPointsData>({

package/src/components/Drawer/index.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
 import { Animated, Dimensions, Easing } from 'react-native';
 import DragableDrawer from './DragableDrawer';
@@ -40,7 +40,7 @@ const Drawer = ({
   hasBackdrop = true,
   onDismiss,
   testID,
-}: DrawerProps): JSX.Element => {
+}: DrawerProps): ReactElement => {
   const animatedValue = useRef(new Animated.Value(visible ? 1 : 0)).current;
   const [height, setHeight] = useState(Dimensions.get('window').height);
 

package/src/components/FAB/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import React, { createRef } from 'react';
-import { fireEvent } from '@testing-library/react-native';
+import { act, fireEvent, waitFor } from '@testing-library/react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import type { FABHandles } from '../../../index';
 import { theme } from '../../../index';
@@ -69,7 +69,7 @@ describe('FAB', () => {
   });
 
   describe('usage with ref', () => {
-    it('allow controlling inner fab states by ref', () => {
+    it('allow controlling inner fab states by ref', async () => {
       const fabRef = createRef<FABHandles>();
 
       const { queryByText } = renderWithTheme(
@@ -77,14 +77,39 @@ describe('FAB', () => {
       );
 
       expect(queryByText('Shout out')).toBeDefined();
-      fabRef.current!.collapse();
-      expect(queryByText('Shout out')).toBeFalsy();
 
-      fabRef.current!.show();
-      expect(queryByText('Shout out')).toBeDefined();
+      act(() => {
+        fabRef.current!.collapse();
+      });
 
-      fabRef.current!.hide();
-      expect(queryByText('Shout out')).toBeDefined();
+      await waitFor(
+        () => {
+          expect(queryByText('Shout out')).toBeFalsy();
+        },
+        { timeout: 1000 }
+      );
+
+      act(() => {
+        fabRef.current!.show();
+      });
+
+      await waitFor(
+        () => {
+          expect(queryByText('Shout out')).toBeDefined();
+        },
+        { timeout: 1000 }
+      );
+
+      act(() => {
+        fabRef.current!.hide();
+      });
+
+      await waitFor(
+        () => {
+          expect(queryByText('Shout out')).toBeDefined();
+        },
+        { timeout: 1000 }
+      );
     });
   });
 });

package/src/components/Icon/HeroIcon/glyphMap.json

@@ -1 +1 @@
-{"activate":59000,"add-emoji":59001,"add-person":59002,"adjustment":59003,"alignment":59004,"antenna":59005,"archive":59006,"assignment-warning":59007,"bank":59008,"bell":59009,"billing":59010,"bolt":59011,"bookmark-added":59012,"bookmark-checked":59013,"bookmark":59014,"box-check":59015,"box":59016,"bpay":59017,"buildings":59018,"cake":59019,"calendar-clock":59020,"calendar":59021,"candy-box-menu":59022,"caret-down-small":59023,"caret-down":59024,"caret-left-small":59025,"caret-left":59026,"caret-right-small":59027,"caret-right":59028,"caret-up-small":59029,"caret-up":59030,"check-radio":59031,"circle-add":59032,"circle-cancel":59033,"circle-check":59034,"circle-down":59035,"circle-info":59036,"circle-left":59037,"circle-ok":59038,"circle-pencil":59039,"circle-question":59040,"circle-remove":59041,"circle-right":59042,"circle-up":59043,"circle-warning":59044,"clock-3":59045,"clock":59046,"cloud-download":59047,"cloud-upload":59048,"cog":59049,"coin":59050,"contacts":59051,"credit-card":59052,"diamond":59053,"direction-arrows":59054,"directory":59055,"document":59056,"dollar-coin-shine":59057,"dot":59058,"double-buildings":59059,"edit-template":59060,"envelope":59061,"exclude":59062,"expand-content":59063,"expense":59064,"explore_nearby":59065,"eye-circle":59066,"eye-invisible":59067,"eye":59068,"face-meh":59069,"face-sad":59070,"face-smiley":59071,"feed":59072,"feedbacks":59073,"file-certified":59074,"file-clone":59075,"file-copy":59076,"file-csv":59077,"file-dispose":59078,"file-doc":59079,"file-excel":59080,"file-export":59081,"file-lock":59082,"file-pdf":59083,"file-powerpoint":59084,"file-search":59085,"file-secured":59086,"file-sheets":59087,"file-slide":59088,"file-verified":59089,"file-word":59090,"file":59091,"filter":59092,"folder-user":59093,"folder":59094,"format-bold":59095,"format-heading1":59096,"format-heading2":59097,"format-italic":59098,"format-list-bulleted":59099,"format-list-numbered":59100,"format-underlined":59101,"funnel-filter":59102,"global-dollar":59103,"global-pound":59104,"globe":59105,"graduation-cap":59106,"graph":59107,"happy-sun":59108,"health-bag":59109,"heart":59110,"hero-points":59111,"home":59112,"image":59113,"import":59114,"incident-siren":59115,"instapay-daily":59116,"instapay-now":59117,"instapay":59118,"list":59119,"loading-2":59120,"loading":59121,"location-on":59122,"location":59123,"lock":59124,"looks-one":59125,"looks-two":59126,"media-content":59127,"menu":59128,"money-notes":59129,"moneybag":59130,"moon":59131,"multiple-stars":59132,"multiple-users":59133,"near-me":59134,"node":59135,"open-folder":59136,"paperclip-vertical":59137,"paperclip":59138,"payment-summary":59139,"pencil":59140,"phone":59141,"piggy-bank":59142,"plane-up":59143,"plane":59144,"play-arrow":59145,"play-circle":59146,"pound-coin-shine":59147,"pound-sign":59148,"print":59149,"raising-hands":59150,"reply-arrow":59151,"reply":59152,"reschedule":59153,"rostering":59154,"salary-sacrifice":59155,"save":59156,"schedule-send":59157,"schedule":59158,"search-person":59159,"search":59160,"send":59161,"speaker-active":59162,"speaker":59163,"star-award":59164,"star-badge":59165,"star-circle":59166,"star-medal":59167,"star":59168,"steps-circle":59169,"stopwatch":59170,"suitcase":59171,"surfing":59172,"survey":59173,"swag-pillar-benefit":59174,"swag-pillar-career":59175,"swag-pillar-money":59176,"swag-pillar-work":59177,"swag":59178,"swipe-right":59179,"switch":59180,"tag":59181,"target":59182,"teams":59183,"thumb-down":59184,"thumb-up":59185,"timesheet":59186,"touch-id":59187,"trash-bin":59188,"unlock":59189,"user":59190,"video-1":59191,"video-2":59192,"wallet":59193,"warning":59194,"academic-hat-outlined":59195,"accommodation-outlined":59196,"activate-outlined":59197,"add-credit-card-outlined":59198,"add-person-outlined":59199,"add-section-outlined":59200,"add-time-outlined":59201,"add":59202,"adjustment-outlined":59203,"afternoon-outlined":59204,"ai-outlined":59205,"alignment-2-outlined":59206,"alignment-outlined":59207,"all-caps":59208,"application-outlined":59209,"arrow-down":59210,"arrow-downwards":59211,"arrow-left":59212,"arrow-leftwards":59213,"arrow-right":59214,"arrow-rightwards":59215,"arrow-up":59216,"arrow-upwards":59217,"article-outlined":59218,"at-sign":59219,"auto-graph-outlined":59220,"automotive-outlined":59221,"bakery-outlined":59222,"bar-outlined":59223,"beauty-outlined":59224,"beer-outlined":59225,"bell-active-outlined":59226,"bell-outlined":59227,"bell-slash-outlined":59228,"bill-management-outlined":59229,"billing-outlined":59230,"body-outlined":59231,"bold":59232,"bolt-outlined":59233,"book-outlined":59234,"bookmark-added-outlined":59235,"bookmark-checked-outlined":59236,"bookmark-outlined":59237,"box-1-outlined":59238,"box-check-outlined":59239,"box-outlined":59240,"bullet-points":59241,"cake-outlined":59242,"calculator-outlined":59243,"calendar-dates-outlined":59244,"calendar-star-outlined":59245,"call-outlined":59246,"call-split-outlined":59247,"camera-outlined":59248,"cancel":59249,"car-forward-outlined":59250,"cashback-outlined":59251,"charging-station-outlined":59252,"chat-bubble-outlined":59253,"chat-unread-outlined":59254,"checkmark":59255,"circle-add-outlined":59256,"circle-cancel-outlined":59257,"circle-down-outlined":59258,"circle-info-outlined":59259,"circle-left-outlined":59260,"circle-ok-outlined":59261,"circle-question-outlined":59262,"circle-remove-outlined":59263,"circle-right-outlined":59264,"circle-up-outlined":59265,"circle-warning-outlined":59266,"clock-2-outlined":59267,"clock-in-outlined":59268,"clock-out-outlined":59269,"clock-outlined":59270,"cog-outlined":59271,"coin-outlined":59272,"coin-super-outlined":59273,"comment-outlined":59274,"contacts-outlined":59275,"contacts-user-outlined":59276,"credit-card-outlined":59277,"cultural-site-outlined":59278,"cup-outlined":59279,"dentistry-outlined":59280,"direction-arrows-outlined":59281,"directory-outlined":59282,"document-outlined":59283,"dollar-box-outlined":59284,"dollar-card-outlined":59285,"dollar-coin-shine-outlined":59286,"dollar-credit-card-outlined":59287,"dollar-sign":59288,"double-buildings-outlined":59289,"double-left-arrows":59290,"double-right-arrows":59291,"download-box-outlined":59292,"download-outlined":59293,"edit-template-outlined":59294,"electronics-outlined":59295,"email-outlined":59296,"end-break-outlined":59297,"enter-arrow":59298,"entertainment-outlined":59299,"envelope-outlined":59300,"evening-outlined":59301,"expense-approval-outlined":59302,"expense-outlined":59303,"explore-outlined":59304,"extension-outlined":59305,"external-link":59306,"eye-invisible-outlined":59307,"eye-outlined":59308,"face-id":59309,"face-meh-outlined":59310,"face-open-smiley-outlined":59311,"face-sad-outlined":59312,"face-smiley-outlined":59313,"fastfood-outlined":59314,"feed-outlined":59315,"file-certified-outlined":59316,"file-clone-outlined":59317,"file-copy-outlined":59318,"file-dispose-outlined":59319,"file-dollar-certified-outlined":59320,"file-dollar-outlined":59321,"file-download-outlined":59322,"file-export-outlined":59323,"file-lock-outlined":59324,"file-outlined":59325,"file-pound-outlined":59326,"file-search-outlined":59327,"file-secured-outlined":59328,"file-statutory-outlined":59329,"file-verified-outlined":59330,"filter-outlined":59331,"fitness-outlined":59332,"folder-outlined":59333,"folder-upload-outlined":59334,"folder-user-outlined":59335,"form-outlined":59336,"funnel-filter-outline":59337,"goal-outlined":59338,"graph-outlined":59339,"grocery-outlined":59340,"hand-holding-user-outlined":59341,"handshake-outlined":59342,"happy-sun-outlined":59343,"health-bag-outlined":59344,"heart-outlined":59345,"home-active-outlined":59346,"home-outlined":59347,"id-card-outlined":59348,"image-outlined":59349,"import-outlined":59350,"instapay-outlined":59351,"italic":59352,"job-search-outlined":59353,"leave-approval-outlined":59354,"link-1":59355,"link-2":59356,"list-outlined":59357,"live-help-outlined":59358,"local_mall_outlined":59359,"location-on-outlined":59360,"location-outlined":59361,"lock-outlined":59362,"locked-file-outlined":59363,"log-out":59364,"mail-outlined":59365,"map-outlined":59366,"media-content-outlined":59367,"menu-close":59368,"menu-expand":59369,"menu-fold-outlined":59370,"menu-unfold-outlined":59371,"moneybag-outlined":59372,"moon-outlined":59373,"more-horizontal":59374,"more-vertical":59375,"morning-outlined":59376,"multiple-folders-outlined":59377,"multiple-users-outlined":59378,"near-me-outlined":59379,"node-outlined":59380,"number-points":59381,"number":59382,"overview-outlined":59383,"park-outlined":59384,"payment-summary-outlined":59385,"payslip-outlined":59386,"pencil-outlined":59387,"percentage":59388,"phone-outlined":59389,"piggy-bank-outlined":59390,"plane-outlined":59391,"play-circle-outlined":59392,"pound-box-outlined":59393,"pound-card-outlined":59394,"pound-coin-shine-outlined":59395,"pound-credit-card-outlined":59396,"print-outlined":59397,"propane-tank-outlined":59398,"qr-code-outlined":59399,"qualification-outlined":59400,"re-assign":59401,"redeem":59402,"refresh":59403,"remove":59404,"reply-outlined":59405,"restart":59406,"restaurant-outlined":59407,"resume-outlined":59408,"return-arrow":59409,"rostering-outlined":59410,"safety-outlined":59411,"save-outlined":59412,"schedule-outlined":59413,"search-outlined":59414,"search-secured-outlined":59415,"send-outlined":59416,"share-1":59417,"share-2":59418,"share-outlined-2":59419,"share-outlined":59420,"shield-check-outlined":59421,"shop-outlined":59422,"shopping_basket_outlined":59423,"show-chart-outlined":59424,"single-down-arrow":59425,"single-left-arrow":59426,"single-right-arrow":59427,"single-up-arrow":59428,"smart-match-outlined":59429,"sparkle-outlined":59430,"speaker-active-outlined":59431,"speaker-outlined":59432,"star-circle-outlined":59433,"star-outlined":59434,"start-break-outlined":59435,"stash-outlined":59436,"stopwatch-outlined":59437,"strikethrough":59438,"styler-outlined":59439,"suitcase-clock-outlined":59440,"suitcase-outlined":59441,"survey-outlined":59442,"switch-outlined":59443,"sync":59444,"tag-outlined":59445,"target-outlined":59446,"tennis-outlined":59447,"thumb-down-outlined":59448,"thumb-up-outlined":59449,"ticket-outlined":59450,"timesheet-outlined":59451,"timesheets-outlined":59452,"today-outlined":59453,"transfer":59454,"transportation-outlined":59455,"trash-bin-outlined":59456,"umbrela-outlined":59457,"unavailability-outlined":59458,"unavailable":59459,"underline":59460,"union-outlined":59461,"unlock-outlined":59462,"upload-outlined":59463,"user-circle-outlined":59464,"user-gear-outlined":59465,"user-outlined":59466,"user-rectangle-outlined":59467,"video-1-outlined":59468,"video-2-outlined":59469,"volunteer-outlined":59470,"wallet-outlined":59471,"wellness-outlined":59472}
+{"activate":59000,"add-emoji":59001,"add-person":59002,"adjustment":59003,"alignment":59004,"antenna":59005,"archive":59006,"assignment-warning":59007,"bank":59008,"bell":59009,"billing":59010,"bolt":59011,"bookmark-added":59012,"bookmark-checked":59013,"bookmark":59014,"box-check":59015,"box":59016,"bpay":59017,"buildings":59018,"cake":59019,"calendar-clock":59020,"calendar":59021,"candy-box-menu":59022,"caret-down-small":59023,"caret-down":59024,"caret-left-small":59025,"caret-left":59026,"caret-right-small":59027,"caret-right":59028,"caret-up-small":59029,"caret-up":59030,"check-radio":59031,"circle-add":59032,"circle-cancel":59033,"circle-check":59034,"circle-down":59035,"circle-info":59036,"circle-left":59037,"circle-ok":59038,"circle-pencil":59039,"circle-question":59040,"circle-remove":59041,"circle-right":59042,"circle-up":59043,"circle-warning":59044,"clock-3":59045,"clock":59046,"cloud-download":59047,"cloud-upload":59048,"cog":59049,"coin":59050,"contacts":59051,"credit-card":59052,"diamond":59053,"direction-arrows":59054,"directory":59055,"document":59056,"dollar-coin-shine":59057,"dot":59058,"double-buildings":59059,"edit-template":59060,"envelope":59061,"exclude":59062,"expand-content":59063,"expense":59064,"explore_nearby":59065,"eye-circle":59066,"eye-invisible":59067,"eye":59068,"face-meh":59069,"face-sad":59070,"face-smiley":59071,"feed":59072,"feedbacks":59073,"file-certified":59074,"file-clone":59075,"file-copy":59076,"file-csv":59077,"file-dispose":59078,"file-doc":59079,"file-excel":59080,"file-export":59081,"file-lock":59082,"file-pdf":59083,"file-powerpoint":59084,"file-search":59085,"file-secured":59086,"file-sheets":59087,"file-slide":59088,"file-verified":59089,"file-word":59090,"file":59091,"filter":59092,"folder-user":59093,"folder":59094,"format-bold":59095,"format-heading1":59096,"format-heading2":59097,"format-italic":59098,"format-list-bulleted":59099,"format-list-numbered":59100,"format-underlined":59101,"funnel-filter":59102,"global-dollar":59103,"global-pound":59104,"globe":59105,"graduation-cap":59106,"graph":59107,"happy-sun":59108,"health-bag":59109,"heart":59110,"hero-points":59111,"home":59112,"image":59113,"import":59114,"incident-siren":59115,"instapay-daily":59116,"instapay-now":59117,"instapay":59118,"list":59119,"loading-2":59120,"loading":59121,"location-on":59122,"location":59123,"lock":59124,"looks-one":59125,"looks-two":59126,"media-content":59127,"menu":59128,"money-notes":59129,"moneybag":59130,"moon":59131,"multiple-stars":59132,"multiple-users":59133,"near-me":59134,"node":59135,"open-folder":59136,"paperclip-vertical":59137,"paperclip":59138,"payment-summary":59139,"pencil":59140,"phone":59141,"piggy-bank":59142,"plane-up":59143,"plane":59144,"play-arrow":59145,"play-circle":59146,"pound-coin-shine":59147,"pound-sign":59148,"print":59149,"raising-hands":59150,"reply-arrow":59151,"reply":59152,"reschedule":59153,"rostering":59154,"salary-sacrifice":59155,"save":59156,"schedule-send":59157,"schedule":59158,"search-person":59159,"search":59160,"send":59161,"speaker-active":59162,"speaker":59163,"star-award":59164,"star-badge":59165,"star-circle":59166,"star-medal":59167,"star":59168,"steps-circle":59169,"stopwatch":59170,"suitcase":59171,"surfing":59172,"survey":59173,"swag-pillar-benefit":59174,"swag-pillar-career":59175,"swag-pillar-money":59176,"swag-pillar-work":59177,"swag":59178,"swipe-right":59179,"switch":59180,"tag":59181,"target":59182,"teams":59183,"thumb-down":59184,"thumb-up":59185,"timesheet":59186,"touch-id":59187,"trash-bin":59188,"unlock":59189,"user":59190,"video-1":59191,"video-2":59192,"wallet":59193,"warning":59194,"academic-hat-outlined":59195,"accommodation-outlined":59196,"activate-outlined":59197,"add-credit-card-outlined":59198,"add-person-outlined":59199,"add-section-outlined":59200,"add-time-outlined":59201,"add":59202,"adjustment-outlined":59203,"afternoon-outlined":59204,"ai-outlined":59205,"alignment-2-outlined":59206,"alignment-outlined":59207,"all-caps":59208,"application-outlined":59209,"arrow-down":59210,"arrow-downwards":59211,"arrow-left":59212,"arrow-leftwards":59213,"arrow-right":59214,"arrow-rightwards":59215,"arrow-up":59216,"arrow-upwards":59217,"article-outlined":59218,"at-sign":59219,"auto-graph-outlined":59220,"automotive-outlined":59221,"bakery-outlined":59222,"bar-outlined":59223,"beauty-outlined":59224,"beer-outlined":59225,"bell-active-outlined":59226,"bell-outlined":59227,"bell-slash-outlined":59228,"bill-management-outlined":59229,"billing-outlined":59230,"body-outlined":59231,"bold":59232,"bolt-outlined":59233,"book-outlined":59234,"bookmark-added-outlined":59235,"bookmark-checked-outlined":59236,"bookmark-outlined":59237,"box-1-outlined":59238,"box-check-outlined":59239,"box-outlined":59240,"bullet-points":59241,"cake-outlined":59242,"calculator-outlined":59243,"calendar-dates-outlined":59244,"calendar-star-outlined":59245,"call-outlined":59246,"call-split-outlined":59247,"camera-outlined":59248,"cancel":59249,"car-forward-outlined":59250,"cashback-outlined":59251,"charging-station-outlined":59252,"chat-bubble-outlined":59253,"chat-unread-outlined":59254,"checkmark":59255,"circle-add-outlined":59256,"circle-cancel-outlined":59257,"circle-down-outlined":59258,"circle-info-outlined":59259,"circle-left-outlined":59260,"circle-ok-outlined":59261,"circle-question-outlined":59262,"circle-remove-outlined":59263,"circle-right-outlined":59264,"circle-up-outlined":59265,"circle-warning-outlined":59266,"clock-2-outlined":59267,"clock-in-outlined":59268,"clock-out-outlined":59269,"clock-outlined":59270,"cog-outlined":59271,"coin-outlined":59272,"coin-super-outlined":59273,"comment-outlined":59274,"contacts-outlined":59275,"contacts-user-outlined":59276,"credit-card-outlined":59277,"cultural-site-outlined":59278,"cup-outlined":59279,"dentistry-outlined":59280,"direction-arrows-outlined":59281,"directory-outlined":59282,"document-outlined":59283,"dollar-box-outlined":59284,"dollar-card-outlined":59285,"dollar-coin-shine-outlined":59286,"dollar-credit-card-outlined":59287,"dollar-sign":59288,"double-buildings-outlined":59289,"double-left-arrows":59290,"double-right-arrows":59291,"download-box-outlined":59292,"download-outlined":59293,"edit-template-outlined":59294,"electronics-outlined":59295,"email-outlined":59296,"end-break-outlined":59297,"enter-arrow":59298,"entertainment-outlined":59299,"envelope-outlined":59300,"evening-outlined":59301,"expense-approval-outlined":59302,"expense-outlined":59303,"explore-outlined":59304,"extension-outlined":59305,"external-link":59306,"eye-invisible-outlined":59307,"eye-outlined":59308,"face-id":59309,"face-meh-outlined":59310,"face-open-smiley-outlined":59311,"face-sad-outlined":59312,"face-smiley-outlined":59313,"fastfood-outlined":59314,"feed-outlined":59315,"file-certified-outlined":59316,"file-clone-outlined":59317,"file-copy-outlined":59318,"file-dispose-outlined":59319,"file-dollar-certified-outlined":59320,"file-dollar-outlined":59321,"file-download-outlined":59322,"file-export-outlined":59323,"file-lock-outlined":59324,"file-outlined":59325,"file-pound-outlined":59326,"file-search-outlined":59327,"file-secured-outlined":59328,"file-statutory-outlined":59329,"file-verified-outlined":59330,"filter-outlined":59331,"fitness-outlined":59332,"folder-outlined":59333,"folder-upload-outlined":59334,"folder-user-outlined":59335,"form-outlined":59336,"funnel-filter-outline":59337,"goal-outlined":59338,"graph-outlined":59339,"grocery-outlined":59340,"hand-holding-user-outlined":59341,"handshake-outlined":59342,"happy-sun-outlined":59343,"health-bag-outlined":59344,"heart-outlined":59345,"home-active-outlined":59346,"home-outlined":59347,"id-card-outlined":59348,"image-outlined":59349,"import-outlined":59350,"instapay-outlined":59351,"italic":59352,"job-search-outlined":59353,"leave-approval-outlined":59354,"lighting-outlined":59355,"link-1":59356,"link-2":59357,"list-outlined":59358,"live-help-outlined":59359,"local_mall_outlined":59360,"location-on-outlined":59361,"location-outlined":59362,"lock-outlined":59363,"locked-file-outlined":59364,"log-out":59365,"mail-outlined":59366,"map-outlined":59367,"media-content-outlined":59368,"menu-close":59369,"menu-expand":59370,"menu-fold-outlined":59371,"menu-unfold-outlined":59372,"moneybag-outlined":59373,"moon-outlined":59374,"more-horizontal":59375,"more-vertical":59376,"morning-outlined":59377,"multiple-folders-outlined":59378,"multiple-users-outlined":59379,"near-me-outlined":59380,"node-outlined":59381,"number-points":59382,"number":59383,"overview-outlined":59384,"park-outlined":59385,"payment-summary-outlined":59386,"payslip-outlined":59387,"pencil-outlined":59388,"percentage":59389,"phone-outlined":59390,"piggy-bank-outlined":59391,"plane-outlined":59392,"play-circle-outlined":59393,"pound-box-outlined":59394,"pound-card-outlined":59395,"pound-coin-shine-outlined":59396,"pound-credit-card-outlined":59397,"print-outlined":59398,"propane-tank-outlined":59399,"qr-code-outlined":59400,"qualification-outlined":59401,"re-assign":59402,"redeem":59403,"refresh":59404,"remove":59405,"reply-outlined":59406,"restart":59407,"restaurant-outlined":59408,"resume-outlined":59409,"return-arrow":59410,"rostering-outlined":59411,"safety-outlined":59412,"save-outlined":59413,"schedule-outlined":59414,"search-outlined":59415,"search-secured-outlined":59416,"send-outlined":59417,"share-1":59418,"share-2":59419,"share-outlined-2":59420,"share-outlined":59421,"shield-check-outlined":59422,"shop-outlined":59423,"shopping_basket_outlined":59424,"show-chart-outlined":59425,"single-down-arrow":59426,"single-left-arrow":59427,"single-right-arrow":59428,"single-up-arrow":59429,"smart-match-outlined":59430,"sparkle-outlined":59431,"speaker-active-outlined":59432,"speaker-outlined":59433,"star-circle-outlined":59434,"star-outlined":59435,"start-break-outlined":59436,"stash-outlined":59437,"stopwatch-outlined":59438,"strikethrough":59439,"styler-outlined":59440,"suitcase-clock-outlined":59441,"suitcase-outlined":59442,"survey-outlined":59443,"switch-outlined":59444,"sync":59445,"tag-outlined":59446,"target-outlined":59447,"tennis-outlined":59448,"thumb-down-outlined":59449,"thumb-up-outlined":59450,"ticket-outlined":59451,"timesheet-outlined":59452,"timesheets-outlined":59453,"today-outlined":59454,"transfer":59455,"transportation-outlined":59456,"trash-bin-outlined":59457,"umbrela-outlined":59458,"unavailability-outlined":59459,"unavailable":59460,"underline":59461,"union-outlined":59462,"unlock-outlined":59463,"upload-outlined":59464,"user-circle-outlined":59465,"user-gear-outlined":59466,"user-outlined":59467,"user-rectangle-outlined":59468,"video-1-outlined":59469,"video-2-outlined":59470,"volunteer-outlined":59471,"wallet-outlined":59472,"wellness-outlined":59473}

package/src/components/Icon/IconList.ts

@@ -355,6 +355,7 @@ const IconList = [
   'italic',
   'job-search-outlined',
   'leave-approval-outlined',
+  'lighting-outlined',
   'link-1',
   'link-2',
   'list-outlined',

package/src/components/Image/index.tsx

@@ -1,3 +1,4 @@
+import type { ReactElement } from 'react';
 import React from 'react';
 import { Image as RNImage } from 'react-native';
 import type { ImageProps as RNImageProps } from 'react-native';
@@ -28,7 +29,7 @@ const Image = ({
   testID,
   style,
   ...imageNativeProps
-}: ImageProps): JSX.Element => {
+}: ImageProps): ReactElement => {
   useDeprecation(
     'Image component will soon be deprecated. Please use `Image` from `react-native` instead.'
   );

package/src/components/List/BasicListItem.tsx

@@ -1,3 +1,4 @@
+import type { ReactElement } from 'react';
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import Icon from '../Icon';
@@ -60,7 +61,7 @@ const BasicListItem = ({
   selected = false,
   disabled = false,
   onPress,
-}: ListItemProps): JSX.Element => {
+}: ListItemProps): ReactElement => {
   const theme = useTheme();
 
   return (

package/src/components/List/ListItem.tsx

@@ -81,7 +81,7 @@ const ListItem = ({
   variant = 'full-width',
   onPress,
   disabled = false,
-}: ListItemProps): JSX.Element => {
+}: ListItemProps): ReactElement => {
   const theme = useTheme();
 
   return (

package/src/components/LocaleProvider/__tests__/utils.specs.ts

@@ -1,4 +1,5 @@
-import { enAU, enCA } from 'date-fns/locale';
+import enAU from 'date-fns/locale/en-AU';
+import enCA from 'date-fns/locale/en-CA';
 import { getDateFnsLocale } from '../utils';
 
 describe('getDateFnsLocale', () => {

package/src/components/LocaleProvider/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { setDefaultOptions } from 'date-fns';
+import setDefaultOptions from 'date-fns/setDefaultOptions';
 import { LocaleContext } from './context';
 import { getDateFnsLocale } from './utils';
 import type { LocaleValues } from '../../locales/types';

package/src/components/LocaleProvider/utils.ts

@@ -1,5 +1,6 @@
-import { enAU, enCA } from 'date-fns/locale';
-import type { Locale } from 'date-fns/locale';
+import enAU from 'date-fns/locale/en-AU';
+import enCA from 'date-fns/locale/en-CA';
+import type { Locale } from 'date-fns';
 import type { LocaleCode } from '../../locales/types';
 
 const Locales = {

package/src/components/MapPin/Focussed.tsx

@@ -1,3 +1,4 @@
+import type { ReactElement } from 'react';
 import React from 'react';
 import type { ViewProps, StyleProp, ViewStyle } from 'react-native';
 import { StyledContainer, StyledFocusIcon } from './StyledMapPin';
@@ -17,7 +18,7 @@ const MapPinFocussed = ({
   style,
   testID,
   ...nativeProps
-}: MapPinFocussedProps): JSX.Element => {
+}: MapPinFocussedProps): ReactElement => {
   return (
     <StyledContainer {...nativeProps} style={style} testID={testID}>
       <StyledFocusIcon icon="location-on" intent="secondary" />

package/src/components/MapPin/index.tsx

@@ -1,3 +1,4 @@
+import type { ReactElement } from 'react';
 import React from 'react';
 import {
   StyledContainer,
@@ -30,7 +31,7 @@ const MapPin = ({
   image,
   icon,
   ...nativeProps
-}: MapPinProps): JSX.Element => {
+}: MapPinProps): ReactElement => {
   const badgeIcon = getBadgeIconName(state);
   return (
     <StyledContainer {...nativeProps} style={style} testID={testID}>

package/src/components/Modal/__tests__/index.spec.tsx

@@ -96,4 +96,50 @@ describe('Modal', () => {
     fireEvent.press(getByText('Close modal'));
     expect(onDismiss).toBeCalled();
   });
+
+  it('unmounts correctly when closed with slide animation', () => {
+    const ModalExample = () => {
+      const [modalVisible, setModalVisible] = React.useState(true);
+
+      return (
+        <Portal.Provider>
+          <Modal animationType="slide" visible={modalVisible} transparent>
+            <Typography.Body>Modal content</Typography.Body>
+            <Button text="Close modal" onPress={() => setModalVisible(false)} />
+          </Modal>
+        </Portal.Provider>
+      );
+    };
+
+    const { getByText, queryByText } = renderWithTheme(<ModalExample />);
+
+    expect(getByText('Modal content')).toBeTruthy();
+    fireEvent.press(getByText('Close modal'));
+
+    // Modal content should still be in DOM during animation
+    expect(queryByText('Modal content')).toBeTruthy();
+  });
+
+  it('unmounts correctly when closed with fade animation', () => {
+    const ModalExample = () => {
+      const [modalVisible, setModalVisible] = React.useState(true);
+
+      return (
+        <Portal.Provider>
+          <Modal animationType="fade" visible={modalVisible} transparent>
+            <Typography.Body>Modal content</Typography.Body>
+            <Button text="Close modal" onPress={() => setModalVisible(false)} />
+          </Modal>
+        </Portal.Provider>
+      );
+    };
+
+    const { getByText, queryByText } = renderWithTheme(<ModalExample />);
+
+    expect(getByText('Modal content')).toBeTruthy();
+    fireEvent.press(getByText('Close modal'));
+
+    // Modal content should still be in DOM during animation
+    expect(queryByText('Modal content')).toBeTruthy();
+  });
 });

package/src/components/Modal/index.tsx

@@ -1,12 +1,5 @@
 import type { ReactNode } from 'react';
-import React, {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-  useCallback,
-} from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   Animated,
   BackHandler,
@@ -18,11 +11,6 @@ import {
 import { useTheme } from '../../theme';
 import Portal from '../Portal';
 
-type ModalHandles = {
-  show: () => void;
-  hide: (callback: () => void) => void;
-};
-
 const DEFAULT_BACKDROP_OPACITY = 0.4;
 
 const DEFAULT_ANIMATION_CONFIG = {
@@ -66,152 +54,136 @@ export interface ModalProps {
   onDismiss?: () => void;
 }
 
-const Modal = forwardRef<ModalHandles, Omit<ModalProps, 'visible'>>(
-  (
-    {
-      children,
-      onShow,
-      onRequestClose,
-      testID,
-      animationType = 'none',
-      transparent = false,
-      onDismiss,
-    },
-    ref
-  ) => {
-    const theme = useTheme();
-    const animatedBackdropValue = useRef(new Animated.Value(0)).current;
-    const animatedModalValue = useRef(new Animated.Value(0)).current;
-
-    // Show or hide the backdrop and modal content
-    const animateBackdropAndContent = useCallback(
-      ({ toValue, callback }: { toValue: number; callback?: () => void }) => {
-        if (animationType !== 'none') {
-          // Backdrop animation
-          if (!transparent) {
-            Animated.timing(animatedBackdropValue, {
-              toValue,
-              ...DEFAULT_ANIMATION_CONFIG,
-            }).start();
-          }
+const Modal = ({
+  children,
+  visible = true,
+  onShow,
+  onRequestClose,
+  testID,
+  animationType = 'none',
+  transparent = false,
+  onDismiss,
+}: ModalProps) => {
+  const theme = useTheme();
+  const animatedBackdropValue = useRef(new Animated.Value(0)).current;
+  const animatedModalValue = useRef(new Animated.Value(0)).current;
+  const [mounted, setMounted] = useState(visible);
+  const previousVisible = useRef(false);
+
+  // Animate in/out based on visible prop
+  useEffect(() => {
+    if (visible && !previousVisible.current) {
+      // Show animation
+      setMounted(true);
+
+      if (animationType !== 'none') {
+        if (!transparent) {
+          Animated.timing(animatedBackdropValue, {
+            toValue: 1,
+            ...DEFAULT_ANIMATION_CONFIG,
+          }).start();
+        }
 
-          // Modal content animation
-          Animated.timing(animatedModalValue, {
-            toValue,
+        Animated.timing(animatedModalValue, {
+          toValue: 1,
+          ...DEFAULT_ANIMATION_CONFIG,
+        }).start(() => {
+          onShow?.();
+        });
+      } else {
+        onShow?.();
+      }
+    } else if (!visible && previousVisible.current) {
+      // Hide animation
+      if (animationType !== 'none') {
+        if (!transparent) {
+          Animated.timing(animatedBackdropValue, {
+            toValue: 0,
             ...DEFAULT_ANIMATION_CONFIG,
-          }).start(callback);
-        } else {
-          callback?.();
+          }).start();
         }
-      },
-      [animationType, onShow, transparent]
-    );
 
-    const backdropOpacityAnimation = animatedBackdropValue.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, DEFAULT_BACKDROP_OPACITY],
-    });
-
-    const modalAnimation = animatedModalValue.interpolate({
-      inputRange: [0, 1],
-      outputRange:
-        animationType === 'slide'
-          ? [Dimensions.get('window').height, 0]
-          : [0, 1],
-    });
-
-    useImperativeHandle(
-      ref,
+        Animated.timing(animatedModalValue, {
+          toValue: 0,
+          ...DEFAULT_ANIMATION_CONFIG,
+        }).start(() => {
+          setMounted(false);
+          if (Platform.OS === 'ios') {
+            onDismiss?.();
+          }
+        });
+      } else {
+        setMounted(false);
+        if (Platform.OS === 'ios') {
+          onDismiss?.();
+        }
+      }
+    }
+
+    previousVisible.current = visible;
+  }, [visible, animationType, transparent, onShow, onDismiss]);
+
+  // Back button handler
+  useEffect(() => {
+    if (!visible) return;
+
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
       () => {
-        return {
-          show: () => {
-            animateBackdropAndContent({ toValue: 1, callback: onShow });
-          },
-
-          hide: (wrapperCallback) => {
-            animateBackdropAndContent({
-              toValue: 0,
-              callback: () => {
-                if (Platform.OS === 'ios') {
-                  onDismiss?.();
-                }
-
-                wrapperCallback();
-              },
-            });
-          },
-        };
-      },
-      [onDismiss, onShow, animateBackdropAndContent]
+        onRequestClose?.();
+        return true;
+      }
     );
 
-    // Back button handler
-    useEffect(() => {
-      const backHandler = BackHandler.addEventListener(
-        'hardwareBackPress',
-        () => {
-          onRequestClose?.();
-          return true;
-        }
-      );
-
-      return () => backHandler.remove();
-    }, [onRequestClose]);
-
-    return (
-      <Portal>
-        <Animated.View
-          style={{
-            ...StyleSheet.absoluteFillObject,
-            backgroundColor: transparent
-              ? 'transparent'
-              : theme.colors.overlayGlobalSurface,
-            opacity:
-              animationType !== 'none'
-                ? backdropOpacityAnimation
-                : DEFAULT_BACKDROP_OPACITY,
-          }}
-        />
-
-        <Animated.View
-          testID={testID}
-          style={{
-            ...StyleSheet.absoluteFillObject,
-            opacity: animationType === 'fade' ? modalAnimation : 1,
-            transform: [
-              {
-                translateY: animationType === 'slide' ? modalAnimation : 0,
-              },
-            ],
-          }}
-        >
-          {children}
-        </Animated.View>
-      </Portal>
-    );
-  }
-);
+    return () => backHandler.remove();
+  }, [visible, onRequestClose]);
 
-const ModalWrapper = ({ visible = true, ...props }: ModalProps) => {
-  const modalRef = useRef<ModalHandles>(null);
-  const [internalVisible, setInternalVisible] = useState(visible);
+  const backdropOpacityAnimation = animatedBackdropValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, DEFAULT_BACKDROP_OPACITY],
+  });
 
-  useEffect(() => {
-    if (visible) {
-      setInternalVisible(true);
-    } else {
-      // Wait for animation to finish before hiding the modal
-      modalRef.current?.hide(() => setInternalVisible(false));
-    }
-  }, [visible]);
+  const modalAnimation = animatedModalValue.interpolate({
+    inputRange: [0, 1],
+    outputRange:
+      animationType === 'slide' ? [Dimensions.get('window').height, 0] : [0, 1],
+  });
 
-  useEffect(() => {
-    if (internalVisible) {
-      modalRef.current?.show();
-    }
-  }, [internalVisible]);
+  if (!visible && !mounted) {
+    return null;
+  }
 
-  return internalVisible ? <Modal ref={modalRef} {...props} /> : null;
+  return (
+    <Portal>
+      <Animated.View
+        style={{
+          ...StyleSheet.absoluteFillObject,
+          backgroundColor: transparent
+            ? 'transparent'
+            : theme.colors.overlayGlobalSurface,
+          opacity:
+            animationType !== 'none'
+              ? backdropOpacityAnimation
+              : DEFAULT_BACKDROP_OPACITY,
+        }}
+      />
+
+      <Animated.View
+        testID={testID}
+        style={{
+          ...StyleSheet.absoluteFillObject,
+          opacity: animationType === 'fade' ? modalAnimation : 1,
+          transform: [
+            {
+              translateY: animationType === 'slide' ? modalAnimation : 0,
+            },
+          ],
+        }}
+      >
+        {children}
+      </Animated.View>
+    </Portal>
+  );
 };
 
-export default ModalWrapper;
+export default Modal;