@cdx-ui/components 0.2.5 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/coverage.svg +1 -1
- package/docs/components/bottom-sheet/content.md +2 -0
- package/docs/components/calendar/content.md +25 -1
- package/docs/components/carousel/content.md +1 -1
- package/docs/components/data-grid/content.md +50 -8
- package/docs/components/icon-button/content.md +23 -1
- package/docs/components/month-calendar/content.md +2 -0
- package/docs/components/range-calendar/content.md +3 -1
- package/docs/components/toast/content.md +23 -7
- package/docs/llms.txt +2 -0
- package/docs/resources/release-notes/0.2.5/content.md +25 -0
- package/docs/resources/release-notes/0.3.0/content.md +19 -0
- package/docs/resources/release-notes/content.md +2 -0
- package/lib/commonjs/components/BottomSheet/index.js +25 -1
- package/lib/commonjs/components/BottomSheet/index.js.map +1 -1
- package/lib/commonjs/components/BottomSheet/styles.js +8 -2
- package/lib/commonjs/components/BottomSheet/styles.js.map +1 -1
- package/lib/commonjs/components/Calendar/CalendarMonthHeader.js +15 -5
- package/lib/commonjs/components/Calendar/CalendarMonthHeader.js.map +1 -1
- package/lib/commonjs/components/Calendar/CalendarYearList.js +116 -0
- package/lib/commonjs/components/Calendar/CalendarYearList.js.map +1 -0
- package/lib/commonjs/components/Calendar/CalendarYearPickerGrid.js +58 -31
- package/lib/commonjs/components/Calendar/CalendarYearPickerGrid.js.map +1 -1
- package/lib/commonjs/components/Calendar/flashCalendarAdapter.js +22 -3
- package/lib/commonjs/components/Calendar/flashCalendarAdapter.js.map +1 -1
- package/lib/commonjs/components/Calendar/index.js +6 -2
- package/lib/commonjs/components/Calendar/index.js.map +1 -1
- package/lib/commonjs/components/Calendar/styles.js +16 -2
- package/lib/commonjs/components/Calendar/styles.js.map +1 -1
- package/lib/commonjs/components/IconButton/styles.js +107 -2
- package/lib/commonjs/components/IconButton/styles.js.map +1 -1
- package/lib/commonjs/components/MonthCalendar/index.js +39 -13
- package/lib/commonjs/components/MonthCalendar/index.js.map +1 -1
- package/lib/commonjs/components/RangeCalendar/index.js +6 -2
- package/lib/commonjs/components/RangeCalendar/index.js.map +1 -1
- package/lib/commonjs/components/Toast/index.js +5 -2
- package/lib/commonjs/components/Toast/index.js.map +1 -1
- package/lib/module/components/BottomSheet/index.js +27 -3
- package/lib/module/components/BottomSheet/index.js.map +1 -1
- package/lib/module/components/BottomSheet/styles.js +8 -2
- package/lib/module/components/BottomSheet/styles.js.map +1 -1
- package/lib/module/components/Calendar/CalendarMonthHeader.js +15 -5
- package/lib/module/components/Calendar/CalendarMonthHeader.js.map +1 -1
- package/lib/module/components/Calendar/CalendarYearList.js +112 -0
- package/lib/module/components/Calendar/CalendarYearList.js.map +1 -0
- package/lib/module/components/Calendar/CalendarYearPickerGrid.js +61 -34
- package/lib/module/components/Calendar/CalendarYearPickerGrid.js.map +1 -1
- package/lib/module/components/Calendar/flashCalendarAdapter.js +20 -2
- package/lib/module/components/Calendar/flashCalendarAdapter.js.map +1 -1
- package/lib/module/components/Calendar/index.js +7 -3
- package/lib/module/components/Calendar/index.js.map +1 -1
- package/lib/module/components/Calendar/styles.js +15 -1
- package/lib/module/components/Calendar/styles.js.map +1 -1
- package/lib/module/components/IconButton/styles.js +107 -2
- package/lib/module/components/IconButton/styles.js.map +1 -1
- package/lib/module/components/MonthCalendar/index.js +42 -15
- package/lib/module/components/MonthCalendar/index.js.map +1 -1
- package/lib/module/components/RangeCalendar/index.js +7 -3
- package/lib/module/components/RangeCalendar/index.js.map +1 -1
- package/lib/module/components/Toast/index.js +5 -2
- package/lib/module/components/Toast/index.js.map +1 -1
- package/lib/typescript/components/BottomSheet/index.d.ts +8 -0
- package/lib/typescript/components/BottomSheet/index.d.ts.map +1 -1
- package/lib/typescript/components/BottomSheet/styles.d.ts +5 -1
- package/lib/typescript/components/BottomSheet/styles.d.ts.map +1 -1
- package/lib/typescript/components/Calendar/CalendarMonthHeader.d.ts.map +1 -1
- package/lib/typescript/components/Calendar/CalendarYearList.d.ts +23 -0
- package/lib/typescript/components/Calendar/CalendarYearList.d.ts.map +1 -0
- package/lib/typescript/components/Calendar/CalendarYearPickerGrid.d.ts +5 -1
- package/lib/typescript/components/Calendar/CalendarYearPickerGrid.d.ts.map +1 -1
- package/lib/typescript/components/Calendar/flashCalendarAdapter.d.ts +8 -0
- package/lib/typescript/components/Calendar/flashCalendarAdapter.d.ts.map +1 -1
- package/lib/typescript/components/Calendar/index.d.ts.map +1 -1
- package/lib/typescript/components/Calendar/styles.d.ts +7 -1
- package/lib/typescript/components/Calendar/styles.d.ts.map +1 -1
- package/lib/typescript/components/IconButton/styles.d.ts +2 -2
- package/lib/typescript/components/IconButton/styles.d.ts.map +1 -1
- package/lib/typescript/components/MonthCalendar/index.d.ts.map +1 -1
- package/lib/typescript/components/RangeCalendar/index.d.ts.map +1 -1
- package/lib/typescript/components/Toast/index.d.ts.map +1 -1
- package/lib/typescript/components/ToggleButton/styles.d.ts +1 -1
- package/package.json +5 -5
- package/src/components/BottomSheet/index.tsx +174 -138
- package/src/components/BottomSheet/styles.ts +11 -3
- package/src/components/Calendar/CalendarMonthHeader.tsx +29 -22
- package/src/components/Calendar/CalendarYearList.tsx +136 -0
- package/src/components/Calendar/CalendarYearPickerGrid.tsx +60 -33
- package/src/components/Calendar/flashCalendarAdapter.ts +27 -2
- package/src/components/Calendar/index.tsx +8 -3
- package/src/components/Calendar/styles.ts +17 -1
- package/src/components/IconButton/styles.ts +111 -0
- package/src/components/MonthCalendar/index.tsx +55 -33
- package/src/components/RangeCalendar/index.tsx +8 -3
- package/src/components/Toast/index.tsx +13 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/BottomSheet/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/BottomSheet/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
|
+
import { type VariantProps } from '@cdx-ui/utils';
|
|
1
2
|
/** Keep gorhom's animated container unclipped so web transforms can settle correctly. */
|
|
2
3
|
export declare const bottomSheetModalContainerClassName = "rounded-t-4xl";
|
|
3
4
|
/** Clip the static background for rounded corners without clipping the animated sheet. */
|
|
4
5
|
export declare const bottomSheetBackgroundClassName = "rounded-t-4xl overflow-hidden bg-surface-primary";
|
|
5
|
-
export declare const bottomSheetContentVariants: (props?:
|
|
6
|
+
export declare const bottomSheetContentVariants: (props?: ({
|
|
7
|
+
fullBleed?: boolean | null | undefined;
|
|
8
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
9
|
+
export type BottomSheetContentVariantProps = VariantProps<typeof bottomSheetContentVariants>;
|
|
6
10
|
export declare const bottomSheetFooterVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
7
11
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/BottomSheet/styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/BottomSheet/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAEvD,yFAAyF;AACzF,eAAO,MAAM,kCAAkC,kBAAkB,CAAC;AAElE,0FAA0F;AAC1F,eAAO,MAAM,8BAA8B,qDAA6E,CAAC;AAEzH,eAAO,MAAM,0BAA0B;;8EAMrC,CAAC;AAEH,MAAM,MAAM,8BAA8B,GAAG,YAAY,CAAC,OAAO,0BAA0B,CAAC,CAAC;AAE7F,eAAO,MAAM,yBAAyB,oFAAiD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarMonthHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/Calendar/CalendarMonthHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAKL,KAAK,mBAAmB,EACxB,KAAK,OAAO,EACb,MAAM,oBAAoB,CAAC;AAa5B,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEtD,MAAM,WAAW,wBAAyB,SAAQ,SAAS;IACzD,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,sBAAsB,CAAC;IAC7B,YAAY,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;CACvC;AAED,eAAO,MAAM,mBAAmB,
|
|
1
|
+
{"version":3,"file":"CalendarMonthHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/Calendar/CalendarMonthHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAKL,KAAK,mBAAmB,EACxB,KAAK,OAAO,EACb,MAAM,oBAAoB,CAAC;AAa5B,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEtD,MAAM,WAAW,wBAAyB,SAAQ,SAAS;IACzD,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,sBAAsB,CAAC;IAC7B,YAAY,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;CACvC;AAED,eAAO,MAAM,mBAAmB,2GA8F/B,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { type ReactElement } from 'react';
|
|
2
|
+
/** Pill cell (40px) plus its vertical margins and row gap; fixed so the initial offset is exact. */
|
|
3
|
+
export declare const YEAR_ROW_HEIGHT = 52;
|
|
4
|
+
export interface YearRange {
|
|
5
|
+
first: number;
|
|
6
|
+
last: number;
|
|
7
|
+
}
|
|
8
|
+
export declare function getYearRange(minYear: number | undefined, maxYear: number | undefined, visibleYear: number, todayYear: number): YearRange;
|
|
9
|
+
export interface CalendarYearListProps extends YearRange {
|
|
10
|
+
selectedYear: number;
|
|
11
|
+
/** Fixed list height, matched to the sibling view so switching views does not resize. */
|
|
12
|
+
height: number;
|
|
13
|
+
renderYear: (year: number) => ReactElement;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Three-up year list shared by the Calendar, RangeCalendar, and MonthCalendar year views.
|
|
17
|
+
*
|
|
18
|
+
* A plain `ScrollView` rather than a `FlatList`: the pickers render this inside their popover
|
|
19
|
+
* `ScrollView`, and a nested `VirtualizedList` breaks windowing there. The list is a few hundred
|
|
20
|
+
* light cells at most, so virtualization buys little.
|
|
21
|
+
*/
|
|
22
|
+
export declare function CalendarYearList({ first, last, selectedYear, height, renderYear, }: CalendarYearListProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
//# sourceMappingURL=CalendarYearList.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CalendarYearList.d.ts","sourceRoot":"","sources":["../../../../src/components/Calendar/CalendarYearList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0C,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAYlF,oGAAoG;AACpG,eAAO,MAAM,eAAe,KAAK,CAAC;AAIlC,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,YAAY,CAC1B,OAAO,EAAE,MAAM,GAAG,SAAS,EAC3B,OAAO,EAAE,MAAM,GAAG,SAAS,EAC3B,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,MAAM,GAChB,SAAS,CAKX;AAMD,MAAM,WAAW,qBAAsB,SAAQ,SAAS;IACtD,YAAY,EAAE,MAAM,CAAC;IACrB,yFAAyF;IACzF,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,YAAY,CAAC;CAC5C;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,UAAU,GACX,EAAE,qBAAqB,2CA6EvB"}
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import { View, type ViewProps } from 'react-native';
|
|
2
|
-
import { type DateComponentLabels, type MonthId } from '@cdx-ui/formatters';
|
|
2
|
+
import { type DateComponentLabels, type DateId, type MonthId } from '@cdx-ui/formatters';
|
|
3
3
|
import type { CalendarNavigationView } from './CalendarMonthHeader';
|
|
4
4
|
export interface CalendarYearPickerGridProps extends ViewProps {
|
|
5
5
|
monthId: MonthId;
|
|
6
6
|
onMonthIdChange: (monthId: MonthId) => void;
|
|
7
|
+
/** Earliest selectable date; its year is the first year listed. */
|
|
8
|
+
minValue?: DateId;
|
|
9
|
+
/** Latest selectable date; its year is the last year listed. */
|
|
10
|
+
maxValue?: DateId;
|
|
7
11
|
disabled?: boolean;
|
|
8
12
|
onViewChange: (view: CalendarNavigationView) => void;
|
|
9
13
|
labels?: Partial<DateComponentLabels>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarYearPickerGrid.d.ts","sourceRoot":"","sources":["../../../../src/components/Calendar/CalendarYearPickerGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,
|
|
1
|
+
{"version":3,"file":"CalendarYearPickerGrid.d.ts","sourceRoot":"","sources":["../../../../src/components/Calendar/CalendarYearPickerGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAML,KAAK,mBAAmB,EACxB,KAAK,MAAM,EACX,KAAK,OAAO,EACb,MAAM,oBAAoB,CAAC;AAG5B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAQpE,MAAM,WAAW,2BAA4B,SAAQ,SAAS;IAC5D,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;CACvC;AAED,eAAO,MAAM,sBAAsB,8GA2FlC,CAAC"}
|
|
@@ -8,6 +8,14 @@ export declare function useFlashCalendarRangeTheme(range?: {
|
|
|
8
8
|
/** Keep range days flush so the band reads as one shape (filler covers residual sub-pixel gaps). */
|
|
9
9
|
export declare const FLASH_CALENDAR_RANGE_DAY_SPACING = 0;
|
|
10
10
|
export declare const FLASH_CALENDAR_DAY_HEIGHT = 36;
|
|
11
|
+
export declare const FLASH_CALENDAR_WEEK_HEADER_HEIGHT = 28;
|
|
12
|
+
export declare const FLASH_CALENDAR_ROW_VERTICAL_SPACING = 4;
|
|
13
|
+
/**
|
|
14
|
+
* Rendered height of the Flash Calendar month grid for `monthId`, derived from the same layout
|
|
15
|
+
* values passed to Flash Calendar (zero-height month row, weekday header, one row per week with
|
|
16
|
+
* Sunday as the first day). Lets the year view match the day view without measuring.
|
|
17
|
+
*/
|
|
18
|
+
export declare function getFlashCalendarGridHeight(monthId: MonthId): number;
|
|
11
19
|
export declare function formatFlashCalendarWeekdayShort(date: Date, locale: string): string;
|
|
12
20
|
/** Every day of the month Flash Calendar renders; days of adjacent months render as blanks. */
|
|
13
21
|
export declare function getMonthDateIds(monthId: MonthId): DateId[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flashCalendarAdapter.d.ts","sourceRoot":"","sources":["../../../../src/components/Calendar/flashCalendarAdapter.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAA8B,KAAK,MAAM,EAAE,KAAK,OAAO,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"flashCalendarAdapter.d.ts","sourceRoot":"","sources":["../../../../src/components/Calendar/flashCalendarAdapter.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAA8B,KAAK,MAAM,EAAE,KAAK,OAAO,EAAE,MAAM,oBAAoB,CAAC;AA4I3F,wBAAgB,qBAAqB,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,aAAa,CAqF5E;AAED,wBAAgB,0BAA0B,CAAC,KAAK,CAAC,EAAE;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,aAAa,CAiHhB;AAED,oGAAoG;AACpG,eAAO,MAAM,gCAAgC,IAAI,CAAC;AAElD,eAAO,MAAM,yBAAyB,KAAW,CAAC;AAElD,eAAO,MAAM,iCAAiC,KAAK,CAAC;AAEpD,eAAO,MAAM,mCAAmC,IAAI,CAAC;AAErD;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAWnE;AAED,wBAAgB,+BAA+B,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAElF;AAED,+FAA+F;AAC/F,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,CAS1D;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAEnD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Calendar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACxF,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpD,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Calendar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACxF,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpD,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAC;AAe5B,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAYD,QAAA,MAAM,YAAY,gGAYjB,CAAC;AAIF,QAAA,MAAM,cAAc,4FAkBlB,CAAC;AAsBH,QAAA,MAAM,YAAY,4FA4DhB,CAAC;AAIH,QAAA,MAAM,kBAAkB,4FAkBtB,CAAC;AAIH,KAAK,gBAAgB,GAAG,OAAO,YAAY,GAAG;IAC5C,MAAM,EAAE,OAAO,cAAc,CAAC;IAC9B,IAAI,EAAE,OAAO,YAAY,CAAC;IAC1B,UAAU,EAAE,OAAO,kBAAkB,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAIf,gBAAgB,CAAC"}
|
|
@@ -8,8 +8,14 @@ export declare const calendarMonthHeaderLabelVariants: (props?: ({
|
|
|
8
8
|
export declare const calendarMonthHeaderIconVariants: (props?: ({
|
|
9
9
|
isYearView?: boolean | null | undefined;
|
|
10
10
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
11
|
-
export declare const calendarMonthHeaderNavVariants: (props?:
|
|
11
|
+
export declare const calendarMonthHeaderNavVariants: (props?: ({
|
|
12
|
+
hidden?: boolean | null | undefined;
|
|
13
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
12
14
|
export declare const calendarYearPickerGridVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
15
|
+
export declare const calendarYearPickerListVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
16
|
+
export declare const calendarYearPickerListContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
17
|
+
export declare const calendarYearPickerRowVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
18
|
+
export declare const calendarYearPickerPlaceholderVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
13
19
|
export declare const calendarPillCellVariants: (props?: ({
|
|
14
20
|
selected?: boolean | null | undefined;
|
|
15
21
|
disabled?: boolean | null | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Calendar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAGvD,eAAO,MAAM,oBAAoB,oFAI/B,CAAC;AAEH,eAAO,MAAM,2BAA2B,oFAA0D,CAAC;AAEnG,eAAO,MAAM,iCAAiC,oFAAoD,CAAC;AAEnG,eAAO,MAAM,gCAAgC;;8EAQ3C,CAAC;AAEH,eAAO,MAAM,+BAA+B;;8EAQ1C,CAAC;AAEH,eAAO,MAAM,8BAA8B,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Calendar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAGvD,eAAO,MAAM,oBAAoB,oFAI/B,CAAC;AAEH,eAAO,MAAM,2BAA2B,oFAA0D,CAAC;AAEnG,eAAO,MAAM,iCAAiC,oFAAoD,CAAC;AAEnG,eAAO,MAAM,gCAAgC;;8EAQ3C,CAAC;AAEH,eAAO,MAAM,+BAA+B;;8EAQ1C,CAAC;AAEH,eAAO,MAAM,8BAA8B;;8EAQzC,CAAC;AAEH,eAAO,MAAM,8BAA8B,oFAE1C,CAAC;AAEF,eAAO,MAAM,8BAA8B,oFAAgB,CAAC;AAE5D,eAAO,MAAM,qCAAqC,oFAAc,CAAC;AAEjE,eAAO,MAAM,6BAA6B,oFAA+C,CAAC;AAE1F,eAAO,MAAM,qCAAqC,oFAAiB,CAAC;AAEpE,eAAO,MAAM,wBAAwB;;;8EAwBpC,CAAC;AAEF,eAAO,MAAM,4BAA4B;;8EAQvC,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACjF,MAAM,MAAM,oCAAoC,GAAG,YAAY,CAC7D,OAAO,gCAAgC,CACxC,CAAC;AACF,MAAM,MAAM,4BAA4B,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC"}
|
|
@@ -6,7 +6,7 @@ export declare const iconButtonSizeClassNames: {
|
|
|
6
6
|
};
|
|
7
7
|
export declare const iconButtonRootVariants: (props?: ({
|
|
8
8
|
variant?: "solid" | "ghost" | "subtle" | null | undefined;
|
|
9
|
-
color?: "action" | "danger" | "neutral" | null | undefined;
|
|
9
|
+
color?: "action" | "danger" | "warning" | "success" | "info" | "neutral" | null | undefined;
|
|
10
10
|
size?: "small" | "default" | null | undefined;
|
|
11
11
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
12
12
|
export declare const iconButtonGlyphVariants: (props?: ({
|
|
@@ -14,7 +14,7 @@ export declare const iconButtonGlyphVariants: (props?: ({
|
|
|
14
14
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
15
15
|
export declare const iconButtonIconColorVariants: (props?: ({
|
|
16
16
|
variant?: "solid" | "ghost" | "subtle" | null | undefined;
|
|
17
|
-
color?: "action" | "danger" | "neutral" | null | undefined;
|
|
17
|
+
color?: "action" | "danger" | "warning" | "success" | "info" | "neutral" | null | undefined;
|
|
18
18
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
19
19
|
export type IconButtonVariantProps = VariantProps<typeof iconButtonRootVariants>;
|
|
20
20
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAGvD,yGAAyG;AACzG,eAAO,MAAM,wBAAwB;;;CAG3B,CAAC;AAEX,eAAO,MAAM,sBAAsB;;;;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAGvD,yGAAyG;AACzG,eAAO,MAAM,wBAAwB;;;CAG3B,CAAC;AAEX,eAAO,MAAM,sBAAsB;;;;8EAwOlC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;8EAUlC,CAAC;AAEH,eAAO,MAAM,2BAA2B;;;8EAwCtC,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/MonthCalendar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/MonthCalendar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAmB,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAOL,KAAK,sBAAsB,EAC5B,MAAM,oBAAoB,CAAC;AAkC5B,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAWD,QAAA,MAAM,iBAAiB,qGAYtB,CAAC;AAIF,QAAA,MAAM,mBAAmB,4FA4EvB,CAAC;AAIH,QAAA,MAAM,iBAAiB,4FA2CrB,CAAC;AAIH,QAAA,MAAM,iBAAiB;WAEZ,MAAM;gBAAc,MAAM;eAAa,SAAS;wCAwBzD,CAAC;AAIH,QAAA,MAAM,qBAAqB;UAEjB,MAAM;gBAAc,MAAM;eAAa,SAAS;wCAuBxD,CAAC;AAIH,KAAK,qBAAqB,GAAG,OAAO,iBAAiB,GAAG;IACtD,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,IAAI,EAAE,OAAO,iBAAiB,CAAC;IAC/B,IAAI,EAAE,OAAO,iBAAiB,CAAC;IAC/B,QAAQ,EAAE,OAAO,qBAAqB,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,aAAa,EAKpB,qBAAqB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/RangeCalendar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAKL,KAAK,sBAAsB,EAC5B,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/RangeCalendar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAKL,KAAK,sBAAsB,EAC5B,MAAM,oBAAoB,CAAC;AAe5B,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC7E,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAYD,QAAA,MAAM,iBAAiB,qGAYtB,CAAC;AAIF,QAAA,MAAM,mBAAmB,4FAkBvB,CAAC;AAIH,QAAA,MAAM,uBAAuB,4FAoB5B,CAAC;AAIF,QAAA,MAAM,iBAAiB,4FAkDrB,CAAC;AAIH,KAAK,qBAAqB,GAAG,OAAO,iBAAiB,GAAG;IACtD,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,IAAI,EAAE,OAAO,iBAAiB,CAAC;IAC/B,UAAU,EAAE,OAAO,uBAAuB,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,aAAa,EAIpB,qBAAqB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/index.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAY,IAAI,EAAE,MAAM,cAAc,CAAC;AAmC9C,OAAO,KAAK,EACV,iBAAiB,EAKjB,qBAAqB,EACrB,cAAc,EACd,UAAU,EACV,eAAe,EAChB,MAAM,SAAS,CAAC;AA6CjB,QAAA,MAAM,SAAS,6FA0Ob,CAAC;AAIH,QAAA,MAAM,UAAU,kGAoBd,CAAC;AAIH,QAAA,MAAM,gBAAgB,wGAiBpB,CAAC;AAIH,QAAA,MAAM,SAAS;kDAAiD,cAAc;;CA4B7E,CAAC;AAMF,QAAA,MAAM,WAAW,2GAqBf,CAAC;AAIH,QAAA,MAAM,UAAU;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/index.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAY,IAAI,EAAE,MAAM,cAAc,CAAC;AAmC9C,OAAO,KAAK,EACV,iBAAiB,EAKjB,qBAAqB,EACrB,cAAc,EACd,UAAU,EACV,eAAe,EAChB,MAAM,SAAS,CAAC;AA6CjB,QAAA,MAAM,SAAS,6FA0Ob,CAAC;AAIH,QAAA,MAAM,UAAU,kGAoBd,CAAC;AAIH,QAAA,MAAM,gBAAgB,wGAiBpB,CAAC;AAIH,QAAA,MAAM,SAAS;kDAAiD,cAAc;;CA4B7E,CAAC;AAMF,QAAA,MAAM,WAAW,2GAqBf,CAAC;AAIH,QAAA,MAAM,UAAU;;wCA0Cd,CAAC;AAIH;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAiEpD;AAWD,KAAK,sBAAsB,GAAG,OAAO,SAAS,GAAG;IAC/C,KAAK,EAAE,OAAO,UAAU,CAAC;IACzB,WAAW,EAAE,OAAO,gBAAgB,CAAC;IACrC,IAAI,EAAE,OAAO,SAAS,CAAC;IACvB,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,KAAK,EAAE,OAAO,UAAU,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK,EAMZ,sBAAsB,CAAC;AAE7B,YAAY,EACV,UAAU,EACV,cAAc,EACd,kBAAkB,EAClB,UAAU,EACV,eAAe,EACf,qBAAqB,EACrB,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,YAAY,EACZ,iBAAiB,GAClB,MAAM,SAAS,CAAC"}
|
|
@@ -12,7 +12,7 @@ export declare const toggleButtonRootVariants: (props?: ({
|
|
|
12
12
|
*/
|
|
13
13
|
export declare const toggleButtonAttachedVariants: (props?: ({
|
|
14
14
|
orientation?: "vertical" | "horizontal" | null | undefined;
|
|
15
|
-
position?: "middle" | "first" | "
|
|
15
|
+
position?: "middle" | "first" | "last" | "only" | null | undefined;
|
|
16
16
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
17
17
|
export type ToggleButtonAttachedPosition = NonNullable<VariantProps<typeof toggleButtonAttachedVariants>['position']>;
|
|
18
18
|
export declare const toggleButtonGroupVariants: (props?: ({
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdx-ui/components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -106,10 +106,10 @@
|
|
|
106
106
|
"@marceloterreiro/flash-calendar": "2.0.0",
|
|
107
107
|
"react-native-reanimated-carousel": "5.0.0-beta.5",
|
|
108
108
|
"uniwind": "1.10.0",
|
|
109
|
-
"@cdx-ui/
|
|
110
|
-
"@cdx-ui/
|
|
111
|
-
"@cdx-ui/primitives": "0.
|
|
112
|
-
"@cdx-ui/
|
|
109
|
+
"@cdx-ui/formatters": "0.3.1",
|
|
110
|
+
"@cdx-ui/icons": "0.3.1",
|
|
111
|
+
"@cdx-ui/primitives": "0.3.1",
|
|
112
|
+
"@cdx-ui/utils": "0.3.1"
|
|
113
113
|
},
|
|
114
114
|
"devDependencies": {
|
|
115
115
|
"@dnd-kit/core": "6.3.1",
|
|
@@ -5,6 +5,7 @@ import React, {
|
|
|
5
5
|
useEffect,
|
|
6
6
|
useId,
|
|
7
7
|
useImperativeHandle,
|
|
8
|
+
useMemo,
|
|
8
9
|
useRef,
|
|
9
10
|
useState,
|
|
10
11
|
type ReactNode,
|
|
@@ -25,15 +26,21 @@ import {
|
|
|
25
26
|
type BottomSheetModalProps as GorhomBottomSheetModalProps,
|
|
26
27
|
} from '@gorhom/bottom-sheet';
|
|
27
28
|
import { useEscapeKey, useOverlayStackRegistration } from '@cdx-ui/primitives';
|
|
28
|
-
import { cn } from '@cdx-ui/utils';
|
|
29
|
+
import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
|
|
29
30
|
import { SheetHeader } from '../sheet-header';
|
|
30
31
|
import {
|
|
31
32
|
bottomSheetBackgroundClassName,
|
|
32
33
|
bottomSheetContentVariants,
|
|
33
34
|
bottomSheetFooterVariants,
|
|
34
35
|
bottomSheetModalContainerClassName,
|
|
36
|
+
type BottomSheetContentVariantProps,
|
|
35
37
|
} from './styles';
|
|
36
38
|
|
|
39
|
+
const SCOPE = 'BOTTOM_SHEET';
|
|
40
|
+
|
|
41
|
+
const useBottomSheetStyleContext = () =>
|
|
42
|
+
(useStyleContext(SCOPE) ?? {}) as BottomSheetContentVariantProps;
|
|
43
|
+
|
|
37
44
|
const ZERO_INSETS: EdgeInsets = { top: 0, bottom: 0, left: 0, right: 0 };
|
|
38
45
|
|
|
39
46
|
function useSafeInsets(): EdgeInsets {
|
|
@@ -100,13 +107,19 @@ export interface BottomSheetContentProps {
|
|
|
100
107
|
className?: string;
|
|
101
108
|
/** Adds bottom padding equal to the safe-area inset. */
|
|
102
109
|
hasSafeAreaInset?: boolean;
|
|
110
|
+
/** Removes horizontal padding. Inherits the parent `BottomSheet.Modal`'s `fullBleed` when omitted. */
|
|
111
|
+
fullBleed?: BottomSheetContentVariantProps['fullBleed'];
|
|
103
112
|
style?: ViewStyle;
|
|
104
113
|
}
|
|
105
114
|
|
|
106
115
|
const BottomSheetContent = forwardRef<View, BottomSheetContentProps>(
|
|
107
|
-
({ children, className, hasSafeAreaInset, style }, ref) => {
|
|
116
|
+
({ children, className, hasSafeAreaInset, fullBleed, style }, ref) => {
|
|
108
117
|
const insets = useSafeInsets();
|
|
109
|
-
const
|
|
118
|
+
const { fullBleed: fullBleedFromContext } = useBottomSheetStyleContext();
|
|
119
|
+
const computedClassName = cn(
|
|
120
|
+
bottomSheetContentVariants({ fullBleed: fullBleed ?? fullBleedFromContext }),
|
|
121
|
+
className,
|
|
122
|
+
);
|
|
110
123
|
return (
|
|
111
124
|
<View
|
|
112
125
|
ref={ref}
|
|
@@ -162,6 +175,11 @@ export interface BottomSheetModalProps extends GorhomBottomSheetModalProps {
|
|
|
162
175
|
* Pass it through this prop; a footer placed as a child does not animate with the sheet.
|
|
163
176
|
*/
|
|
164
177
|
footer?: ReactNode;
|
|
178
|
+
/**
|
|
179
|
+
* Removes `BottomSheet.Content`'s horizontal padding so content can span the sheet edge to edge.
|
|
180
|
+
* `BottomSheet.Content` inherits this unless it sets its own `fullBleed`. The footer keeps its padding.
|
|
181
|
+
*/
|
|
182
|
+
fullBleed?: BottomSheetContentVariantProps['fullBleed'];
|
|
165
183
|
}
|
|
166
184
|
|
|
167
185
|
const MAX_DYNAMIC_CONTENT_SIZE = Dimensions.get('window').height * 0.9;
|
|
@@ -185,151 +203,169 @@ const CustomBackground = (props: React.ComponentPropsWithoutRef<typeof View>) =>
|
|
|
185
203
|
const BottomSheetModalStyled = forwardRef<
|
|
186
204
|
React.ComponentRef<typeof BottomSheetModal>,
|
|
187
205
|
BottomSheetModalProps
|
|
188
|
-
>(
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
// Must stay a callback ref: gorhom hands this ref to its modal provider, which
|
|
204
|
-
// reads `.current` to minimize and restore stacked sheets. A ref object would
|
|
205
|
-
// switch that stacking on.
|
|
206
|
-
const setModalRef = useCallback((instance: BottomSheetModalRef | null) => {
|
|
207
|
-
modalRef.current = instance;
|
|
208
|
-
}, []);
|
|
209
|
-
|
|
210
|
-
// gorhom mounts the sheet a frame after `present()` and silently drops a
|
|
211
|
-
// `dismiss()` that arrives before then, never reporting `onDismiss`. Holding
|
|
212
|
-
// it until the sheet mounts keeps the early Escape/back claim releasable.
|
|
213
|
-
const dismissSheet = useCallback((...args: Parameters<BottomSheetModalRef['dismiss']>) => {
|
|
214
|
-
if (mountPendingRef.current) {
|
|
215
|
-
pendingDismissRef.current = args;
|
|
216
|
-
return;
|
|
217
|
-
}
|
|
218
|
-
modalRef.current?.dismiss(...args);
|
|
219
|
-
}, []);
|
|
206
|
+
>(
|
|
207
|
+
(
|
|
208
|
+
{ handleVisible = true, footer, fullBleed, children, onDismiss, onChange, onAnimate, ...rest },
|
|
209
|
+
ref,
|
|
210
|
+
) => {
|
|
211
|
+
const parent = useParentContext();
|
|
212
|
+
const ctx = useMemo(() => ({ ...parent, [SCOPE]: { fullBleed } }), [parent, fullBleed]);
|
|
213
|
+
|
|
214
|
+
const renderFooter = useCallback(
|
|
215
|
+
(props: GorhomBottomSheetFooterProps) => (
|
|
216
|
+
<GorhomBottomSheetFooter {...props}>{footer}</GorhomBottomSheetFooter>
|
|
217
|
+
),
|
|
218
|
+
[footer],
|
|
219
|
+
);
|
|
220
220
|
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
mountPendingRef
|
|
225
|
-
const
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
221
|
+
const modalRef = useRef<BottomSheetModalRef | null>(null);
|
|
222
|
+
const dismissedRef = useRef(false);
|
|
223
|
+
const sheetMountedRef = useRef(false);
|
|
224
|
+
const mountPendingRef = useRef(false);
|
|
225
|
+
const pendingDismissRef = useRef<Parameters<BottomSheetModalRef['dismiss']> | null>(null);
|
|
226
|
+
const [presented, setPresented] = useState(false);
|
|
227
|
+
|
|
228
|
+
// Must stay a callback ref: gorhom hands this ref to its modal provider, which
|
|
229
|
+
// reads `.current` to minimize and restore stacked sheets. A ref object would
|
|
230
|
+
// switch that stacking on.
|
|
231
|
+
const setModalRef = useCallback((instance: BottomSheetModalRef | null) => {
|
|
232
|
+
modalRef.current = instance;
|
|
233
|
+
}, []);
|
|
234
|
+
|
|
235
|
+
// gorhom mounts the sheet a frame after `present()` and silently drops a
|
|
236
|
+
// `dismiss()` that arrives before then, never reporting `onDismiss`. Holding
|
|
237
|
+
// it until the sheet mounts keeps the early Escape/back claim releasable.
|
|
238
|
+
const dismissSheet = useCallback((...args: Parameters<BottomSheetModalRef['dismiss']>) => {
|
|
239
|
+
if (mountPendingRef.current) {
|
|
240
|
+
pendingDismissRef.current = args;
|
|
241
|
+
return;
|
|
242
|
+
}
|
|
243
|
+
modalRef.current?.dismiss(...args);
|
|
244
|
+
}, []);
|
|
245
|
+
|
|
246
|
+
const markSheetMounted = useCallback(() => {
|
|
247
|
+
sheetMountedRef.current = true;
|
|
248
|
+
if (!mountPendingRef.current) return;
|
|
249
|
+
mountPendingRef.current = false;
|
|
250
|
+
const pendingDismiss = pendingDismissRef.current;
|
|
251
|
+
pendingDismissRef.current = null;
|
|
252
|
+
if (pendingDismiss) modalRef.current?.dismiss(...pendingDismiss);
|
|
253
|
+
}, []);
|
|
254
|
+
|
|
255
|
+
// `present()` claims Escape and back immediately; waiting for the first
|
|
256
|
+
// `onChange` would leave the overlay beneath in charge for the whole open animation.
|
|
257
|
+
useImperativeHandle(
|
|
258
|
+
ref,
|
|
259
|
+
(): BottomSheetModalRef => ({
|
|
260
|
+
present: (...args) => {
|
|
261
|
+
dismissedRef.current = false;
|
|
262
|
+
if (!sheetMountedRef.current) mountPendingRef.current = true;
|
|
263
|
+
setPresented(true);
|
|
264
|
+
modalRef.current?.present(...args);
|
|
265
|
+
},
|
|
266
|
+
dismiss: dismissSheet,
|
|
267
|
+
snapToIndex: (...args) => modalRef.current?.snapToIndex(...args),
|
|
268
|
+
snapToPosition: (...args) => modalRef.current?.snapToPosition(...args),
|
|
269
|
+
expand: (...args) => modalRef.current?.expand(...args),
|
|
270
|
+
collapse: (...args) => modalRef.current?.collapse(...args),
|
|
271
|
+
close: (...args) => modalRef.current?.close(...args),
|
|
272
|
+
forceClose: (...args) => modalRef.current?.forceClose(...args),
|
|
273
|
+
}),
|
|
274
|
+
[dismissSheet],
|
|
275
|
+
);
|
|
229
276
|
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
277
|
+
const handleDismiss = useCallback(() => {
|
|
278
|
+
sheetMountedRef.current = false;
|
|
279
|
+
mountPendingRef.current = false;
|
|
280
|
+
pendingDismissRef.current = null;
|
|
281
|
+
setPresented(false);
|
|
282
|
+
if (dismissedRef.current) return;
|
|
283
|
+
dismissedRef.current = true;
|
|
284
|
+
onDismiss?.();
|
|
285
|
+
}, [onDismiss]);
|
|
286
|
+
|
|
287
|
+
const handleChange = useCallback(
|
|
288
|
+
(...args: Parameters<NonNullable<BottomSheetModalProps['onChange']>>) => {
|
|
236
289
|
dismissedRef.current = false;
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
290
|
+
setPresented(args[0] >= 0);
|
|
291
|
+
if (args[0] >= 0) markSheetMounted();
|
|
292
|
+
onChange?.(...args);
|
|
240
293
|
},
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
snapToPosition: (...args) => modalRef.current?.snapToPosition(...args),
|
|
244
|
-
expand: (...args) => modalRef.current?.expand(...args),
|
|
245
|
-
collapse: (...args) => modalRef.current?.collapse(...args),
|
|
246
|
-
close: (...args) => modalRef.current?.close(...args),
|
|
247
|
-
forceClose: (...args) => modalRef.current?.forceClose(...args),
|
|
248
|
-
}),
|
|
249
|
-
[dismissSheet],
|
|
250
|
-
);
|
|
251
|
-
|
|
252
|
-
const handleDismiss = useCallback(() => {
|
|
253
|
-
sheetMountedRef.current = false;
|
|
254
|
-
mountPendingRef.current = false;
|
|
255
|
-
pendingDismissRef.current = null;
|
|
256
|
-
setPresented(false);
|
|
257
|
-
if (dismissedRef.current) return;
|
|
258
|
-
dismissedRef.current = true;
|
|
259
|
-
onDismiss?.();
|
|
260
|
-
}, [onDismiss]);
|
|
261
|
-
|
|
262
|
-
const handleChange = useCallback(
|
|
263
|
-
(...args: Parameters<NonNullable<BottomSheetModalProps['onChange']>>) => {
|
|
264
|
-
dismissedRef.current = false;
|
|
265
|
-
setPresented(args[0] >= 0);
|
|
266
|
-
if (args[0] >= 0) markSheetMounted();
|
|
267
|
-
onChange?.(...args);
|
|
268
|
-
},
|
|
269
|
-
[markSheetMounted, onChange],
|
|
270
|
-
);
|
|
294
|
+
[markSheetMounted, onChange],
|
|
295
|
+
);
|
|
271
296
|
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
297
|
+
const handleAnimate = useCallback(
|
|
298
|
+
(...args: Parameters<NonNullable<BottomSheetModalProps['onAnimate']>>) => {
|
|
299
|
+
if (args[1] >= 0) markSheetMounted();
|
|
300
|
+
onAnimate?.(...args);
|
|
301
|
+
},
|
|
302
|
+
[markSheetMounted, onAnimate],
|
|
303
|
+
);
|
|
279
304
|
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
});
|
|
294
|
-
|
|
295
|
-
useEffect(() => {
|
|
296
|
-
// BackHandler is native-only; react-native-web warns on every subscription.
|
|
297
|
-
if (!presented || Platform.OS === 'web') return;
|
|
298
|
-
|
|
299
|
-
const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
|
|
300
|
-
if (!isTopmost('back')) return false;
|
|
301
|
-
dismissSheet();
|
|
302
|
-
return true;
|
|
305
|
+
const id = useId();
|
|
306
|
+
const overlayId = `bottom-sheet-${id}`;
|
|
307
|
+
useEscapeKey(presented, dismissSheet, {
|
|
308
|
+
id: overlayId,
|
|
309
|
+
groupId: overlayId,
|
|
310
|
+
layer: 'modal',
|
|
311
|
+
});
|
|
312
|
+
const { isTopmost } = useOverlayStackRegistration({
|
|
313
|
+
active: presented && Platform.OS !== 'web',
|
|
314
|
+
capabilities: ['back'],
|
|
315
|
+
id: overlayId,
|
|
316
|
+
groupId: overlayId,
|
|
317
|
+
layer: 'modal',
|
|
303
318
|
});
|
|
304
319
|
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
}, [dismissSheet, isTopmost, presented]);
|
|
320
|
+
useEffect(() => {
|
|
321
|
+
// BackHandler is native-only; react-native-web warns on every subscription.
|
|
322
|
+
if (!presented || Platform.OS === 'web') return;
|
|
309
323
|
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
324
|
+
const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
|
|
325
|
+
if (!isTopmost('back')) return false;
|
|
326
|
+
dismissSheet();
|
|
327
|
+
return true;
|
|
328
|
+
});
|
|
314
329
|
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
}
|
|
330
|
+
return () => {
|
|
331
|
+
backHandler.remove();
|
|
332
|
+
};
|
|
333
|
+
}, [dismissSheet, isTopmost, presented]);
|
|
334
|
+
|
|
335
|
+
const sheetContainerStyle = useResolveClassNames(bottomSheetModalContainerClassName);
|
|
336
|
+
const handleIndicatorStyle = useResolveClassNames(
|
|
337
|
+
'bg-surface-neutral-subtle w-9 h-[5px] rounded-full',
|
|
338
|
+
);
|
|
339
|
+
|
|
340
|
+
return (
|
|
341
|
+
<BottomSheetModal
|
|
342
|
+
ref={setModalRef}
|
|
343
|
+
enableDynamicSizing
|
|
344
|
+
maxDynamicContentSize={MAX_DYNAMIC_CONTENT_SIZE}
|
|
345
|
+
style={sheetContainerStyle}
|
|
346
|
+
handleComponent={handleVisible ? undefined : null}
|
|
347
|
+
handleIndicatorStyle={handleVisible ? handleIndicatorStyle : undefined}
|
|
348
|
+
backdropComponent={CustomBackdrop}
|
|
349
|
+
backgroundComponent={CustomBackground}
|
|
350
|
+
{...rest}
|
|
351
|
+
onDismiss={handleDismiss}
|
|
352
|
+
onChange={handleChange}
|
|
353
|
+
onAnimate={handleAnimate}
|
|
354
|
+
{...(footer != null && { footerComponent: renderFooter })}
|
|
355
|
+
>
|
|
356
|
+
{typeof children === 'function' ? (
|
|
357
|
+
(props: { data?: unknown }) => (
|
|
358
|
+
<ParentContext.Provider value={ctx}>
|
|
359
|
+
{children(props) as ReactNode}
|
|
360
|
+
</ParentContext.Provider>
|
|
361
|
+
)
|
|
362
|
+
) : (
|
|
363
|
+
<ParentContext.Provider value={ctx}>{children}</ParentContext.Provider>
|
|
364
|
+
)}
|
|
365
|
+
</BottomSheetModal>
|
|
366
|
+
);
|
|
367
|
+
},
|
|
368
|
+
);
|
|
333
369
|
|
|
334
370
|
BottomSheetModalStyled.displayName = 'BottomSheet.Modal';
|
|
335
371
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { cva } from '@cdx-ui/utils';
|
|
1
|
+
import { cva, type VariantProps } from '@cdx-ui/utils';
|
|
2
2
|
|
|
3
3
|
/** Keep gorhom's animated container unclipped so web transforms can settle correctly. */
|
|
4
4
|
export const bottomSheetModalContainerClassName = 'rounded-t-4xl';
|
|
@@ -6,6 +6,14 @@ export const bottomSheetModalContainerClassName = 'rounded-t-4xl';
|
|
|
6
6
|
/** Clip the static background for rounded corners without clipping the animated sheet. */
|
|
7
7
|
export const bottomSheetBackgroundClassName = `${bottomSheetModalContainerClassName} overflow-hidden bg-surface-primary`;
|
|
8
8
|
|
|
9
|
-
export const bottomSheetContentVariants = cva(['bg-surface-primary', 'px-
|
|
9
|
+
export const bottomSheetContentVariants = cva(['bg-surface-primary', 'px-4 pb-4 gap-3'], {
|
|
10
|
+
variants: {
|
|
11
|
+
fullBleed: {
|
|
12
|
+
true: 'px-0',
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
});
|
|
10
16
|
|
|
11
|
-
export
|
|
17
|
+
export type BottomSheetContentVariantProps = VariantProps<typeof bottomSheetContentVariants>;
|
|
18
|
+
|
|
19
|
+
export const bottomSheetFooterVariants = cva(['px-4 pb-5 gap-2', 'bg-surface-primary']);
|