Merge remote-tracking branch 'upstream/main' into wildan/86116-fix-duplicate-workspace-distance-custom-unit

Author: wildan-m

config/eslint/eslint.config.mjs

@@ -269,6 +269,16 @@ const config = defineConfig([
             '@typescript-eslint/max-params': ['error', {max: 10}],
             '@typescript-eslint/naming-convention': [
                 'error',
+                {
+                    selector: ['variable', 'property'],
+                    format: null,
+                    // Allow __esModule because it is a well-known interop property injected by bundlers
+                    // (e.g. Babel/Webpack) and sometimes required by library internals (e.g. react-native-skia).
+                    filter: {
+                        regex: '^__esModule$',
+                        match: true,
+                    },
+                },
                 {
                     selector: ['variable', 'property'],
                     format: ['camelCase', 'UPPER_CASE', 'PascalCase'],

config/eslint/eslint.seatbelt.tsv

@@ -116,7 +116,6 @@
 "../../src/components/RadioButtonWithLabel.tsx"	"no-restricted-syntax"	1
 "../../src/components/Reactions/AddReactionBubble.tsx"	"react-hooks/refs"	1
 "../../src/components/Reactions/MiniQuickEmojiReactions.tsx"	"react-hooks/refs"	1
-"../../src/components/ReimbursementAccountLoadingIndicator.tsx"	"@typescript-eslint/no-deprecated"	1
 "../../src/components/ReportActionItem/MoneyRequestReceiptView.tsx"	"react-hooks/set-state-in-effect"	1
 "../../src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx"	"react-hooks/preserve-manual-memoization"	2
 "../../src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx"	"react-hooks/refs"	1

contributingGuides/NAVIGATION.md

@@ -750,11 +750,49 @@ KEYBOARD_SHORTCUTS: {
 > and makes it harder to reason about which screens can trigger a given flow.
 > When in doubt, prefer an explicit list.
 
-### Current limitations (work in progress)
+### Optional path parameters
 
-- **Optional path parameters:** Suffixes must not include optional path params (e.g. `a/:reportID?`). Required path parameters (e.g. `flag/:reportActionID`) and query parameters are supported - see [Dynamic routes with query parameters](#dynamic-routes-with-query-parameters).
+Dynamic route suffixes may declare optional path parameters by appending `?` to the parameter name.
+An optional parameter can be present or absent in the URL; when absent, the corresponding key is
+omitted from the navigation state's `params` (it is **not** set to `undefined`).
 
-If you try to use dynamic routes with optional path parameters now, you will either fail to navigate to the page at all or end up on a non-existent page, and the navigation will be broken.
+Optionals can appear anywhere in the suffix:
+
+- **Trailing optional:** `member-details/:accountID?` matches both `member-details` and `member-details/123`.
+- **Middle optional:** `wrap/:p?/end` matches both `wrap/end` and `wrap/x/end`.
+- **Multiple optionals:** `a/:p1?/b/:p2?` matches `a/b`, `a/x/b`, `a/b/y`, and `a/x/b/y`.
+
+#### Configuration example
+
+```ts
+DYNAMIC_ROUTES: {
+    MEMBER_DETAILS: {
+        path: 'member-details/:accountID?',
+        entryScreens: [SCREENS.WORKSPACE.MEMBERS],
+        getRoute: (accountID?: string) => (accountID ? `member-details/${accountID}` : 'member-details'),
+    },
+},
+```
+
+#### Precedence rules
+
+When several registered suffixes could match the same URL, the matcher uses a deterministic
+three-phase order. Each phase exhausts all sub-suffix lengths (longest to shortest) before the
+next phase begins:
+
+1. **Static beats everything.** All sub-suffix lengths are checked for an exact static match
+   first. A short static match (e.g. single-segment `country`) always beats a longer parametric
+   match (e.g. `:reportID/country`).
+2. **Strict parametric beats optional parametric.** After statics, all sub-suffix lengths are
+   checked for strict parametric patterns (no optional params, e.g. `flag/:reportID/:reportActionID`).
+   Only after those are exhausted does the matcher try optional parametric patterns
+   (e.g. `page/:id?`).
+3. **Longest match wins within each phase.** Within a single phase the algorithm iterates from
+   the longest candidate to the shortest, so a 3-segment match beats a 2-segment one when both
+   are registered.
+4. **Among patterns of the same kind: first registered wins.** If multiple patterns of the same
+   type (strict or optional) could match the same candidate, the one declared first in
+   `DYNAMIC_ROUTES` wins.
 
 ### Multi-segment dynamic routes
 

jest/setup.ts

@@ -76,7 +76,6 @@ jest.mock('expo-location', () => ({
 
 // Needed for: https://stackoverflow.com/questions/76903168/mocking-libraries-in-jest
 jest.mock('react-native/Libraries/LogBox/LogBox', () => ({
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     __esModule: true,
     default: {
         ignoreLogs: jest.fn(),
@@ -149,7 +148,6 @@ jest.mock('@libs/scheduleOnLiveMarkdownRuntime', () => {
 });
 
 jest.mock('@src/setup/telemetry', () => ({
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     __esModule: true,
     default: jest.fn(),
     navigationIntegration: {
@@ -280,7 +278,6 @@ jest.mock(
 );
 
 jest.mock('@libs/prepareRequestPayload/index.native.ts', () => ({
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     __esModule: true,
     default: jest.fn((command: string, data: Record<string, unknown>) => {
         const formData = new FormData();
@@ -303,7 +300,6 @@ jest.mock('@libs/prepareRequestPayload/index.native.ts', () => ({
 jest.mock('@components/ConfirmedRoute.tsx');
 
 jest.mock('@src/hooks/useWorkletStateMachine/runOnUISync', () => ({
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     __esModule: true,
     default: jest.fn(() => jest.fn()), // Return a function that returns a function
 }));
@@ -367,17 +363,14 @@ jest.mock('@src/components/KeyboardDismissibleFlatList/KeyboardDismissibleFlatLi
 // in triggerUnreadUpdate (also timer-based), this creates excessive timer churn that causes
 // heavy integration tests like SessionTest to exceed their timeout.
 jest.mock('@src/hooks/useDocumentTitle', () => ({
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     __esModule: true,
     default: jest.fn(),
 }));
 jest.mock('@src/hooks/useWorkspaceDocumentTitle', () => ({
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     __esModule: true,
     default: jest.fn(),
 }));
 jest.mock('@src/hooks/useDomainDocumentTitle', () => ({
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     __esModule: true,
     default: jest.fn(),
 }));

src/ROUTES.ts

@@ -304,6 +304,14 @@ const DYNAMIC_ROUTES = {
         path: 'imported',
         entryScreens: [SCREENS.WORKSPACE.CATEGORIES],
     },
+    WORKSPACE_CATEGORIES_SETTINGS: {
+        path: 'categories-settings',
+        entryScreens: [SCREENS.WORKSPACE.CATEGORIES],
+    },
+    WORKSPACE_CATEGORY_CREATE: {
+        path: 'category-new',
+        entryScreens: [SCREENS.WORKSPACE.CATEGORIES],
+    },
     SPEND_CATEGORY_SELECTOR: {
         path: 'spend-category-selector/:groupID',
         entryScreens: [SCREENS.WORKSPACE.CATEGORIES_SETTINGS, SCREENS.SETTINGS_CATEGORIES.SETTINGS_CATEGORIES_SETTINGS],
@@ -2361,14 +2369,6 @@ const ROUTES = {
         // eslint-disable-next-line no-restricted-syntax -- Legacy route generation
         getRoute: (backTo?: string) => getUrlWithBackToParam(`workspaces/pay-and-downgrade` as const, backTo),
     },
-    WORKSPACE_CATEGORIES_SETTINGS: {
-        route: 'workspaces/:policyID/categories/settings',
-        getRoute: (policyID: string) => `workspaces/${policyID}/categories/settings` as const,
-    },
-    WORKSPACE_CATEGORY_CREATE: {
-        route: 'workspaces/:policyID/categories/new',
-        getRoute: (policyID: string) => `workspaces/${policyID}/categories/new` as const,
-    },
     WORKSPACE_CATEGORY_EDIT: {
         route: 'workspaces/:policyID/category/:categoryName/edit',
         getRoute: (policyID: string, categoryName: string) => `workspaces/${policyID}/category/${encodeURIComponent(categoryName)}/edit` as const,

src/SCREENS.ts

@@ -777,6 +777,7 @@ const SCREENS = {
         NAME: 'Workspace_Overview_Name',
         CLIENT_ID: 'Workspace_Overview_Client_ID',
         CATEGORY_CREATE: 'Category_Create',
+        DYNAMIC_CATEGORY_CREATE: 'Dynamic_Category_Create',
         CATEGORY_EDIT: 'Category_Edit',
         CATEGORY_PAYROLL_CODE: 'Category_Payroll_Code',
         CATEGORY_GL_CODE: 'Category_GL_Code',
@@ -789,6 +790,7 @@ const SCREENS = {
         CATEGORY_REQUIRE_ITEMIZED_RECEIPTS_OVER: 'Category_Require_Itemized_Receipts_Over',
         CATEGORY_REQUIRED_FIELDS: 'Category_Required_Fields',
         CATEGORIES_SETTINGS: 'Categories_Settings',
+        DYNAMIC_CATEGORIES_SETTINGS: 'Dynamic_Categories_Settings',
         DYNAMIC_CATEGORIES_IMPORT: 'Dynamic_Categories_Import',
         DYNAMIC_CATEGORIES_IMPORTED: 'Dynamic_Categories_Imported',
         DYNAMIC_SPEND_CATEGORY_SELECTOR: 'Dynamic_Spend_Category_Selector',

src/components/Charts/BarChart/BarChartContent.tsx

@@ -10,7 +10,7 @@ import ChartTooltipLayer from '@components/Charts/components/ChartTooltipLayer';
 import ChartXAxisLabels from '@components/Charts/components/ChartXAxisLabels';
 import ChartYAxisLabels from '@components/Charts/components/ChartYAxisLabels';
 import {AXIS_LABEL_GAP, CHART_CONTENT_MIN_HEIGHT, CHART_PADDING, GLYPH_PADDING, X_AXIS_LINE_WIDTH, Y_AXIS_LINE_WIDTH, Y_AXIS_TICK_COUNT} from '@components/Charts/constants';
-import type {ComputeGeometryFn, HitTestArgs} from '@components/Charts/hooks';
+import type {HitTestArgs} from '@components/Charts/hooks';
 import {
     useChartFontManager,
     useChartInteractions,
@@ -22,7 +22,7 @@ import {
     useYAxisLabelWidth,
 } from '@components/Charts/hooks';
 import type {CartesianChartProps, ChartDataPoint} from '@components/Charts/types';
-import {calculateMinDomainPadding, DEFAULT_CHART_COLOR, getAdditionalOffset, getChartColor, rotatedLabelYOffset} from '@components/Charts/utils';
+import {calculateMinDomainPadding, DEFAULT_CHART_COLOR, getChartColor} from '@components/Charts/utils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
@@ -36,29 +36,6 @@ const BAR_INNER_PADDING = 0.3;
  */
 const BASE_DOMAIN_PADDING = {top: 32, bottom: 1, left: 0, right: 0};
 
-/**
- * Bar chart geometry for label hit-testing.
- * Labels are center-anchored: the 45° parallelogram's upper-right corner is offset
- * by (halfLabelWidth * sinA) right and up, so the box straddles the tick symmetrically.
- */
-const computeBarLabelGeometry: ComputeGeometryFn = ({ascent, descent, sinA, angleRad, labelWidths, padding}) => {
-    const maxLabelWidth = labelWidths.length > 0 ? Math.max(...labelWidths) : 0;
-    const centeredUpwardOffset = angleRad > 0 ? (maxLabelWidth / 2) * sinA : 0;
-    const halfLabelSins = labelWidths.map((w) => (w / 2) * sinA - variables.iconSizeExtraSmall / 3);
-    const halfWidths = labelWidths.map((w) => w / 2);
-    const additionalOffset = getAdditionalOffset(angleRad);
-    return {
-        labelYOffset: AXIS_LABEL_GAP + rotatedLabelYOffset(ascent, descent, angleRad) + centeredUpwardOffset - additionalOffset,
-        iconSin: variables.iconSizeExtraSmall * sinA,
-        labelSins: labelWidths.map((w) => w * sinA),
-        halfWidths,
-        cornerAnchorDX: halfLabelSins,
-        cornerAnchorDY: halfLabelSins.map((v) => -v),
-        yMin90Offsets: halfWidths.map((hw) => -hw + padding),
-        yMax90Offsets: halfWidths.map((hw) => hw + padding),
-    };
-};
-
 type BarChartProps = CartesianChartProps & {
     /** Callback when a bar is pressed */
     onBarPress?: (dataPoint: ChartDataPoint, index: number) => void;
@@ -141,14 +118,12 @@ function BarChartContent({data, isLoading, yAxisUnit, yAxisUnitPosition = 'left'
         labelRotation,
         labelSkipInterval,
         chartBottom,
-        computeGeometry: computeBarLabelGeometry,
     });
 
     const handleChartBoundsChange = (bounds: ChartBounds) => {
         const domainWidth = bounds.right - bounds.left;
         const calculatedBarWidth = ((1 - BAR_INNER_PADDING) * domainWidth) / data.length;
         barWidth.set(calculatedBarWidth);
-        chartBottom.set(bounds.bottom);
         yZero.set(0);
         setBarAreaWidth(domainWidth);
         setBoundsLeft(bounds.left);
@@ -216,6 +191,10 @@ function BarChartContent({data, isLoading, yAxisUnit, yAxisUnitPosition = 'left'
         if (!fontMgr || xAxisLabelHeight === undefined) {
             return null;
         }
+
+        const chartBoundsBottom = args.yScale(Math.min(...args.yTicks));
+        chartBottom.set(chartBoundsBottom);
+
         return (
             <>
                 <ChartXAxisLabels
@@ -231,8 +210,7 @@ function BarChartContent({data, isLoading, yAxisUnit, yAxisUnitPosition = 'left'
                     fontMgr={fontMgr}
                     labelColor={theme.textSupporting}
                     xScale={args.xScale}
-                    chartBoundsBottom={args.chartBounds.bottom}
-                    centerRotatedLabels
+                    chartBoundsBottom={chartBoundsBottom}
                 />
                 <ChartYAxisLabels
                     yTicks={args.yTicks}
@@ -258,7 +236,7 @@ function BarChartContent({data, isLoading, yAxisUnit, yAxisUnitPosition = 'left'
         fontMgr,
         variables.iconSizeExtraSmall,
     );
-    const chartPadding = {...CHART_PADDING, bottom: labelSpace + CHART_PADDING.bottom + variables.iconSizeExtraSmall, left: yAxisLabelWidth + GLYPH_PADDING};
+    const chartPadding = {...CHART_PADDING, bottom: labelSpace + CHART_PADDING.bottom, left: yAxisLabelWidth + GLYPH_PADDING};
 
     if (isLoading || !fontMgr) {
         const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'BarChartContent', isLoading, isFontLoading: !fontMgr};

src/components/Charts/LineChart/LineChartContent.tsx

@@ -12,7 +12,7 @@ import ChartYAxisLabels from '@components/Charts/components/ChartYAxisLabels';
 import LeftFrameLine from '@components/Charts/components/LeftFrameLine';
 import ScatterPoints from '@components/Charts/components/ScatterPoints';
 import {AXIS_LABEL_GAP, CHART_CONTENT_MIN_HEIGHT, CHART_PADDING, GLYPH_PADDING, X_AXIS_LINE_WIDTH, Y_AXIS_LINE_WIDTH, Y_AXIS_TICK_COUNT} from '@components/Charts/constants';
-import type {ComputeGeometryFn, HitTestArgs} from '@components/Charts/hooks';
+import type {HitTestArgs} from '@components/Charts/hooks';
 import {
     useChartFontManager,
     useChartInteractions,
@@ -24,7 +24,7 @@ import {
     useYAxisLabelWidth,
 } from '@components/Charts/hooks';
 import type {CartesianChartProps, ChartDataPoint} from '@components/Charts/types';
-import {calculateMinDomainPadding, DEFAULT_CHART_COLOR, getAdditionalOffset, rotatedLabelYOffset} from '@components/Charts/utils';
+import {calculateMinDomainPadding, DEFAULT_CHART_COLOR} from '@components/Charts/utils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
@@ -42,26 +42,6 @@ const MIN_SAFE_PADDING = DOT_RADIUS + DOT_HOVER_EXTRA_RADIUS;
 /** Base domain padding applied to all sides */
 const BASE_DOMAIN_PADDING = {top: 16, bottom: 16, left: 0, right: 0};
 
-/**
- * Line chart geometry for label hit-testing.
- * Labels are start-anchored at the tick: the 45° parallelogram's upper-right corner is
- * offset by (iconSize/3 * sinA) left and down, placing the box just below the axis line.
- */
-const computeLineLabelGeometry: ComputeGeometryFn = ({ascent, descent, sinA, angleRad, labelWidths, padding}) => {
-    const iconThirdSin = (variables.iconSizeExtraSmall / 3) * sinA;
-    const additionalOffset = getAdditionalOffset(angleRad);
-    return {
-        labelYOffset: AXIS_LABEL_GAP + rotatedLabelYOffset(ascent, descent, angleRad) - additionalOffset,
-        iconSin: variables.iconSizeExtraSmall * sinA,
-        labelSins: labelWidths.map((w) => w * sinA),
-        halfWidths: labelWidths.map((w) => w / 2),
-        cornerAnchorDX: labelWidths.map(() => -iconThirdSin),
-        cornerAnchorDY: labelWidths.map(() => iconThirdSin),
-        yMin90Offsets: labelWidths.map(() => padding),
-        yMax90Offsets: labelWidths.map((w) => w + padding),
-    };
-};
-
 type LineChartProps = CartesianChartProps & {
     /** Callback when a data point is pressed */
     onPointPress?: (dataPoint: ChartDataPoint, index: number) => void;
@@ -139,7 +119,6 @@ function LineChartContent({data, isLoading, yAxisUnit, yAxisUnitPosition = 'left
         labelAreaWidth: plotAreaWidth,
         firstTickLeftSpace: boundsLeft + domainPadding.left * paddingScale,
         lastTickRightSpace: chartWidth > 0 ? chartWidth - boundsRight + domainPadding.right * paddingScale : 0,
-        allowTightDiagonalPacking: true,
         measurements,
     });
 
@@ -158,14 +137,12 @@ function LineChartContent({data, isLoading, yAxisUnit, yAxisUnitPosition = 'left
         labelRotation,
         labelSkipInterval,
         chartBottom,
-        computeGeometry: computeLineLabelGeometry,
     });
 
     const handleChartBoundsChange = (bounds: ChartBounds) => {
         setPlotAreaWidth(bounds.right - bounds.left);
         setBoundsLeft(bounds.left);
         setBoundsRight(bounds.right);
-        chartBottom.set(bounds.bottom);
     };
 
     const checkIsOverDot = (args: HitTestArgs) => {
@@ -197,6 +174,8 @@ function LineChartContent({data, isLoading, yAxisUnit, yAxisUnitPosition = 'left
     }));
 
     const renderOutside = (args: CartesianChartRenderArg<{x: number; y: number}, 'y'>) => {
+        const chartBoundsBottom = args.yScale(Math.min(...args.yTicks));
+        chartBottom.set(chartBoundsBottom);
         return (
             <>
                 <LeftFrameLine
@@ -224,7 +203,7 @@ function LineChartContent({data, isLoading, yAxisUnit, yAxisUnitPosition = 'left
                         fontMgr={fontMgr}
                         labelColor={theme.textSupporting}
                         xScale={args.xScale}
-                        chartBoundsBottom={args.chartBounds.bottom}
+                        chartBoundsBottom={chartBoundsBottom}
                     />
                 )}
                 {!!fontMgr && (
@@ -253,7 +232,7 @@ function LineChartContent({data, isLoading, yAxisUnit, yAxisUnitPosition = 'left
         fontMgr,
         variables.iconSizeExtraSmall,
     );
-    const chartPadding = {...CHART_PADDING, bottom: labelSpace + CHART_PADDING.bottom + variables.iconSizeExtraSmall, left: yAxisLabelWidth + GLYPH_PADDING};
+    const chartPadding = {...CHART_PADDING, bottom: labelSpace + CHART_PADDING.bottom, left: yAxisLabelWidth + GLYPH_PADDING};
 
     if (isLoading || !fontMgr) {
         const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'LineChartContent', isLoading, isFontLoading: !fontMgr};