diff --git a/packages/ui/src/Bento/animation/microinteractions/NumberSlider.tsx b/packages/ui/src/Bento/animation/microinteractions/NumberSlider.tsx
index 5eea4cab8..9b65165a6 100644
--- a/packages/ui/src/Bento/animation/microinteractions/NumberSlider.tsx
+++ b/packages/ui/src/Bento/animation/microinteractions/NumberSlider.tsx
@@ -97,4 +97,4 @@ const AnimatedNumber = styled(Text, {
'$group-window-xs': {
fontSize: '$8',
},
-});
+} as any);
diff --git a/packages/ui/src/Bento/ecommerce/cart/Fullpage.tsx b/packages/ui/src/Bento/ecommerce/cart/Fullpage.tsx
index 15cdd5f7d..2fade6837 100644
--- a/packages/ui/src/Bento/ecommerce/cart/Fullpage.tsx
+++ b/packages/ui/src/Bento/ecommerce/cart/Fullpage.tsx
@@ -233,7 +233,8 @@ const Item = ({ item }: { item: Items[number] }) => {
borderRadius="$12"
theme="green"
>
- Remove
+ {/* Remove */}
+ Remove
diff --git a/packages/ui/src/Bento/ecommerce/product_list/ProductList.tsx b/packages/ui/src/Bento/ecommerce/product_list/ProductList.tsx
index 02b28cd6e..955e35cd5 100644
--- a/packages/ui/src/Bento/ecommerce/product_list/ProductList.tsx
+++ b/packages/ui/src/Bento/ecommerce/product_list/ProductList.tsx
@@ -21,7 +21,8 @@ const StyledText = styled(Text, {
lineHeight: '$4',
});
-function Item({ item }: { item: Product }) {
+function Item({ item }: { item: Product | null }) {
+ if (!item) return null;
return (
// Note: you can also use `Link` from solito/link
- {products.map((item, index) => (
-
- ))}
+ {products.map(
+ (item, index) => item && ,
+ )}
{someSpacers}
);
diff --git a/packages/ui/src/Bento/ecommerce/product_list/ProductListBestItems.tsx b/packages/ui/src/Bento/ecommerce/product_list/ProductListBestItems.tsx
index e84a10278..aa18c3a93 100644
--- a/packages/ui/src/Bento/ecommerce/product_list/ProductListBestItems.tsx
+++ b/packages/ui/src/Bento/ecommerce/product_list/ProductListBestItems.tsx
@@ -24,7 +24,8 @@ const StyledText = styled(Text, {
type Product = ReturnType[0];
-function Item({ item }: { item: Product }) {
+function Item({ item }: { item: Product | null }) {
+ if (!item) return null;
return (
// Note: you can also use `Link` from solito/link
- {products.map((item, index) => (
-
- ))}
+ {products.map(
+ (item, index) => item && ,
+ )}
);
}
diff --git a/packages/ui/src/Bento/ecommerce/product_list/ProductListGridThumbs.tsx b/packages/ui/src/Bento/ecommerce/product_list/ProductListGridThumbs.tsx
index a4bf1adc7..3ddad0828 100644
--- a/packages/ui/src/Bento/ecommerce/product_list/ProductListGridThumbs.tsx
+++ b/packages/ui/src/Bento/ecommerce/product_list/ProductListGridThumbs.tsx
@@ -12,7 +12,8 @@ const StyledText = styled(Text, {
lineHeight: '$4',
});
-function Item({ item }: { item: Product }) {
+function Item({ item }: { item: Product | null }) {
+ if (!item) return null;
return (
// Note: you can also use `Link` from solito/link
- {products.map((item, index) => (
-
- ))}
+ {products.map(
+ (item, index) => item && ,
+ )}
{someSpacers}
);
diff --git a/packages/ui/src/Bento/ecommerce/product_list/ProductListWithFeatures.tsx b/packages/ui/src/Bento/ecommerce/product_list/ProductListWithFeatures.tsx
index 90bf23143..1dfa81dc2 100644
--- a/packages/ui/src/Bento/ecommerce/product_list/ProductListWithFeatures.tsx
+++ b/packages/ui/src/Bento/ecommerce/product_list/ProductListWithFeatures.tsx
@@ -23,7 +23,8 @@ const StyledText = styled(Text, {
lineHeight: '$4',
});
-function Item({ item }: { item: Product }) {
+function Item({ item }: { item: Product | null }) {
+ if (!item) return null;
return (
- {products.map((item, index) => (
-
- ))}
+ {products.map(
+ (item, index) => item && ,
+ )}
{someSpacers}
);
diff --git a/packages/ui/src/Bento/ecommerce/product_list/ProductListWithLabel.tsx b/packages/ui/src/Bento/ecommerce/product_list/ProductListWithLabel.tsx
index 2c96234c6..3c0489570 100644
--- a/packages/ui/src/Bento/ecommerce/product_list/ProductListWithLabel.tsx
+++ b/packages/ui/src/Bento/ecommerce/product_list/ProductListWithLabel.tsx
@@ -18,7 +18,8 @@ type Product = ReturnType[0];
const premiums = [3, 6, 12, 15, 20, 25];
const bestSellers = [1, 5, 10, 13, 18, 23];
-function Item({ item, index }: { item: Product; index: number }) {
+function Item({ item, index }: { item: Product | null; index: number }) {
+ if (!item) return null;
const isPremium = premiums.includes(index);
const isBestSeller = bestSellers.includes(index);
const showLabel = isPremium || isBestSeller;
@@ -121,9 +122,10 @@ export function ProductListWithLabel() {
paddingHorizontal: '$3',
}}
>
- {products.map((item, index) => (
-
- ))}
+ {products.map(
+ (item, index) =>
+ item && ,
+ )}
{someSpacers}
);
diff --git a/packages/ui/src/Bento/ecommerce/product_list/data/products.tsx b/packages/ui/src/Bento/ecommerce/product_list/data/products.tsx
index a5210986e..49083e9af 100644
--- a/packages/ui/src/Bento/ecommerce/product_list/data/products.tsx
+++ b/packages/ui/src/Bento/ecommerce/product_list/data/products.tsx
@@ -56,8 +56,9 @@ export const getProducts = () => {
.fill(0)
.map((_, i) => {
const category = allImages[i % allImages.length];
- const name = Object.keys(category)[i % 10];
- const image = category[name];
+ if (!category) return null;
+ const name = Object.keys(category ?? {})[i % 10];
+ const image = name ? category[name] : '';
return {
id: i,
name,
diff --git a/packages/ui/src/Bento/ecommerce/product_page/ProductHorizontalGallery.tsx b/packages/ui/src/Bento/ecommerce/product_page/ProductHorizontalGallery.tsx
index b960863f0..2b08533ca 100644
--- a/packages/ui/src/Bento/ecommerce/product_page/ProductHorizontalGallery.tsx
+++ b/packages/ui/src/Bento/ecommerce/product_page/ProductHorizontalGallery.tsx
@@ -89,7 +89,7 @@ export const SizableText = styled(Text, {
/** ------ EXAMPLE ------ */
export function ProductHorizontalGallery() {
const [selectedPicture, setSelectedPicture] = useState(
- product.pictures[0].picture,
+ product.pictures?.[0]?.picture || '',
);
const [tempPicture, setTempPicture] = useState(null);
const setDebounceTempPicture = debounce(setTempPicture, 100);
diff --git a/packages/ui/src/Bento/ecommerce/product_page/ProductWithReview.tsx b/packages/ui/src/Bento/ecommerce/product_page/ProductWithReview.tsx
index fa06bf8b0..5147128d4 100644
--- a/packages/ui/src/Bento/ecommerce/product_page/ProductWithReview.tsx
+++ b/packages/ui/src/Bento/ecommerce/product_page/ProductWithReview.tsx
@@ -86,7 +86,7 @@ export const SizableText = styled(Text, {
/** ------ EXAMPLE ------ */
export function ProductWithReview() {
const [selectedPicture, setSelectedPicture] = useState(
- product.pictures[0].picture,
+ product.pictures?.[0]?.picture || '',
);
const [tempPicture, setTempPicture] = useState(null);
const setDebounceTempPicture = debounce(setTempPicture, 100);
diff --git a/packages/ui/src/Bento/elements/datepickers/DatePicker.tsx b/packages/ui/src/Bento/elements/datepickers/DatePicker.tsx
index 007fb7a07..38a6831e0 100644
--- a/packages/ui/src/Bento/elements/datepickers/DatePicker.tsx
+++ b/packages/ui/src/Bento/elements/datepickers/DatePicker.tsx
@@ -1,4 +1,7 @@
-import { useDatePickerContext } from '@rehookify/datepicker';
+import {
+ useDatePickerContext,
+ DatePickerProvider as _DatePickerProvider,
+} from '@rehookify/datepicker';
import type { DPDay } from '@rehookify/datepicker';
import { ChevronLeft, ChevronRight } from '@tamagui/lucide-icons';
import { useEffect, useMemo, useState } from 'react';
@@ -21,7 +24,9 @@ function CalendarHeader() {
propGetters: { subtractOffset },
} = useDatePickerContext();
const { type: header, setHeader } = useHeaderType();
- const { year, month } = calendars[0];
+ const calendar = calendars[0];
+ if (!calendar) return null;
+ const { year, month } = calendar;
if (header === 'year') {
return ;
@@ -125,21 +130,29 @@ export function useDateAnimation({
useEffect(() => {
if (listenTo === 'month') {
- if (currentMonth !== calendars[0].month) {
- setCurrentMonth(calendars[0].month);
+ const calendar = calendars[0];
+ if (!calendar) return;
+ if (currentMonth !== calendar.month) {
+ setCurrentMonth(calendar.month);
}
}
- }, [calendars[0][listenTo], currentMonth]);
+ }, [calendars[0]?.[listenTo], currentMonth]);
useEffect(() => {
if (listenTo === 'year') {
- if (currentYear !== calendars[0].year) {
- setCurrentYear(calendars[0].year);
+ const calendar = calendars[0];
+ if (!calendar) return;
+ if (currentYear !== calendar.year) {
+ setCurrentYear(calendar.year);
}
}
- }, [calendars[0][listenTo], currentYear]);
+ }, [calendars[0]?.[listenTo], currentYear]);
const prevNextAnimation = () => {
+ const c0 = calendars[0];
+ if (!c0) {
+ return { enterStyle: { opacity: 0 } };
+ }
if (listenTo === 'years') {
if (currentYearsSum === null) return { enterStyle: { opacity: 0 } };
@@ -149,19 +162,19 @@ export function useDateAnimation({
};
}
if (listenTo === 'month') {
- if (currentMonth === null) return { enterStyle: { opacity: 0 } };
- const newDate = new Date(
- `${calendars[0][listenTo]} 1, ${calendars[0].year}`,
+ if (!c0 || currentMonth === null) return { enterStyle: { opacity: 0 } };
+ const newDate = new Date(`${c0.month} 1, ${c0.year}`);
+ const currentDate = new Date(
+ `${currentMonth ?? c0.month} 1, ${currentYear ?? c0.year}`,
);
- const currentDate = new Date(`${currentMonth} 1, ${calendars[0].year}`);
- if (currentMonth === 'December' && calendars[0].month === 'January') {
+ if (currentMonth === 'December' && c0.month === 'January') {
return {
enterStyle: { opacity: 0, x: 15 },
exitStyle: { opacity: 0, x: 15 },
};
}
- if (currentMonth === 'January' && calendars[0].month === 'December') {
+ if (currentMonth === 'January' && c0.month === 'December') {
return {
enterStyle: { opacity: 0, x: -15 },
exitStyle: { opacity: 0, x: -15 },
@@ -174,8 +187,8 @@ export function useDateAnimation({
}
if (listenTo === 'year') {
if (currentYear === null) return { enterStyle: { opacity: 0 } };
- const newDate = new Date(`${calendars[0].month} 1, ${calendars[0].year}`);
- const currentDate = new Date(`${calendars[0].month} 1, ${currentYear}`);
+ const newDate = new Date(`${c0.month} 1, ${c0.year}`);
+ const currentDate = new Date(`${c0.month} 1, ${currentYear ?? c0.year}`);
return {
enterStyle: { opacity: 0, x: newDate < currentDate ? -15 : 15 },
@@ -186,7 +199,7 @@ export function useDateAnimation({
return {
prevNextAnimation,
prevNextAnimationKey:
- listenTo === 'years' ? sumYears() : calendars[0][listenTo],
+ listenTo === 'years' ? sumYears() : calendars[0]?.[listenTo],
};
}
@@ -196,7 +209,7 @@ function DayPicker() {
propGetters: { dayButton },
} = useDatePickerContext();
- const { days } = calendars[0];
+ const { days = [] } = calendars[0] || {};
const { prevNextAnimation, prevNextAnimationKey } = useDateAnimation({
listenTo: 'month',
@@ -205,14 +218,14 @@ function DayPicker() {
// divide days array into sub arrays that each has 7 days, for better stylings
const subDays = useMemo(
() =>
- days.reduce((acc, day, i) => {
+ calendars[0]?.days?.reduce((acc, day, i) => {
if (i % 7 === 0) {
acc.push([]);
}
- acc[acc.length - 1].push(day);
+ acc[acc.length - 1]?.push(day);
return acc;
- }, [] as DPDay[][]),
- [days],
+ }, [] as DPDay[][]) ?? [],
+ [calendars],
);
return (
@@ -228,7 +241,11 @@ function DayPicker() {
{subDays.map((days) => {
return (
-
+
{days.map((d) => (
diff --git a/packages/ui/src/Bento/elements/datepickers/YearPicker.tsx b/packages/ui/src/Bento/elements/datepickers/YearPicker.tsx
index 6838b0cae..b81916ad8 100644
--- a/packages/ui/src/Bento/elements/datepickers/YearPicker.tsx
+++ b/packages/ui/src/Bento/elements/datepickers/YearPicker.tsx
@@ -32,27 +32,7 @@ export function YearPickerInput() {
}, [offsetDate]);
return (
- {
- if (offset) {
- offset.setMonth(0);
- }
- setOffsetDate(offset);
- },
- calendar: {
- startDay: 1,
- },
- }}
- >
+
-
+ <_DatePickerProvider
+ config={{
+ onDatesChange,
+ selectedDates,
+ offsetDate,
+ onOffsetChange: (offset) => {
+ if (offset) {
+ offset.setMonth(0);
+ }
+ setOffsetDate(offset);
+ },
+ calendar: {
+ startDay: 1,
+ },
+ }}
+ >
+
+
);
diff --git a/packages/ui/src/Bento/elements/datepickers/common/dateParts.tsx b/packages/ui/src/Bento/elements/datepickers/common/dateParts.tsx
index 7dda725a7..13a7dfc0e 100644
--- a/packages/ui/src/Bento/elements/datepickers/common/dateParts.tsx
+++ b/packages/ui/src/Bento/elements/datepickers/common/dateParts.tsx
@@ -206,7 +206,7 @@ export function YearPicker({
data: { years, calendars },
propGetters: { yearButton },
} = useDatePickerContext();
- const selectedYear = calendars[0].year;
+ const selectedYear = calendars?.[0]?.year;
const { prevNextAnimation, prevNextAnimationKey } = useDateAnimation({
listenTo: 'years',
@@ -273,7 +273,7 @@ export function YearRangeSlider() {
- {`${years[0].year} - ${years[years.length - 1].year}`}
+ {`${years?.[0]?.year} - ${years?.[years.length - 1]?.year}`}
@@ -291,7 +291,7 @@ export function YearSlider() {
propGetters: { subtractOffset },
} = useDatePickerContext();
const { type: header, setHeader } = useHeaderType();
- const { year } = calendars[0];
+ const { year } = calendars?.[0] || {};
return (
-
+
diff --git a/packages/ui/src/Bento/elements/list/List.tsx b/packages/ui/src/Bento/elements/list/List.tsx
index 6a11bcdea..24249df3f 100644
--- a/packages/ui/src/Bento/elements/list/List.tsx
+++ b/packages/ui/src/Bento/elements/list/List.tsx
@@ -117,7 +117,7 @@ function Item({ person }: { person: PersonList[number] }) {
zIndex={1}
size={12}
position="absolute"
- backgroundColor={person.status.color as ColorTokens}
+ backgroundColor={person.status?.color as ColorTokens}
/>
@@ -129,7 +129,7 @@ function Item({ person }: { person: PersonList[number] }) {
fontWeight="$2"
theme="alt1"
>
- {person.status.status}
+ {person.status?.status}
diff --git a/packages/ui/src/Bento/elements/list/data/products.tsx b/packages/ui/src/Bento/elements/list/data/products.tsx
index f420aed84..186afc76f 100644
--- a/packages/ui/src/Bento/elements/list/data/products.tsx
+++ b/packages/ui/src/Bento/elements/list/data/products.tsx
@@ -59,8 +59,8 @@ export const getProducts = () => {
.fill(0)
.map((_, i) => {
const category = allImages[i % allImages.length];
- const name = Object.keys(category)[i % 10];
- const image = category[name];
+ const name = Object.keys(category || {})[i % 10];
+ const image = category && name ? category[name] : '';
return {
id: i,
name,
diff --git a/packages/ui/src/Bento/elements/tables/Basic.tsx b/packages/ui/src/Bento/elements/tables/Basic.tsx
index cb407beb7..689bad695 100644
--- a/packages/ui/src/Bento/elements/tables/Basic.tsx
+++ b/packages/ui/src/Bento/elements/tables/Basic.tsx
@@ -38,19 +38,24 @@ export function BasicTable({
gap="$3"
p="$3"
>
- {row.getVisibleCells().map((cell) => (
-
-
- {flexRender(
- cell.column.columnDef.header,
- headerGroup.headers[cell.column.getIndex()].getContext(),
- )}
-
-
- {flexRender(cell.column.columnDef.cell, cell.getContext())}
-
-
- ))}
+ {row.getVisibleCells().map((cell) => {
+ const headerCtx =
+ headerGroup.headers[cell.column.getIndex()]?.getContext() ??
+ {};
+ return (
+
+
+ {flexRender(cell.column.columnDef.header, headerCtx)}
+
+
+ {flexRender(
+ cell.column.columnDef.cell,
+ cell.getContext(),
+ )}
+
+
+ );
+ })}
);
})}
diff --git a/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx b/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx
index a0fcd01e6..6b93873f5 100644
--- a/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx
+++ b/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx
@@ -146,7 +146,7 @@ export function PaginatedSortedTable({
{flexRender(
cell.column.columnDef.header,
- cell.getContext(),
+ cell.getContext() as any,
)}
{value}
@@ -202,7 +202,7 @@ export function PaginatedSortedTable({
cellWidth="$18"
cellHeight="$5"
borderWidth={0.5}
- maxWidth={getTokenValue('$25') * columns.length}
+ maxWidth={getTokenValue('$25' as any) * columns.length}
>
{table.getHeaderGroups().map((headerGroup) => (
@@ -213,7 +213,7 @@ export function PaginatedSortedTable({
>
{headerGroup.headers.map((header) => (
- header.column.getToggleSortingHandler()}>
+ header.column.getToggleSortingHandler()}>
{flexRender(
header.column.columnDef.header,
header.getContext(),
diff --git a/packages/ui/src/Bento/forms/checkboxes/GroupedCheckbox.tsx b/packages/ui/src/Bento/forms/checkboxes/GroupedCheckbox.tsx
index dc78e3522..14ccbb7a2 100644
--- a/packages/ui/src/Bento/forms/checkboxes/GroupedCheckbox.tsx
+++ b/packages/ui/src/Bento/forms/checkboxes/GroupedCheckbox.tsx
@@ -58,7 +58,7 @@ export function GroupedCheckbox() {
{items.map((item) => (
-
+
))}
diff --git a/packages/ui/src/Bento/forms/checkboxes/HorizontalCheckboxes.tsx b/packages/ui/src/Bento/forms/checkboxes/HorizontalCheckboxes.tsx
index f2082bd96..cf6eecc90 100644
--- a/packages/ui/src/Bento/forms/checkboxes/HorizontalCheckboxes.tsx
+++ b/packages/ui/src/Bento/forms/checkboxes/HorizontalCheckboxes.tsx
@@ -60,7 +60,7 @@ export function HorizontalCheckboxes() {
value={id}
key={id}
>
-
+
))}
diff --git a/packages/ui/src/Bento/forms/inputs/OneTimeCodeInput.tsx b/packages/ui/src/Bento/forms/inputs/OneTimeCodeInput.tsx
index cb0580ce9..e3c825c01 100644
--- a/packages/ui/src/Bento/forms/inputs/OneTimeCodeInput.tsx
+++ b/packages/ui/src/Bento/forms/inputs/OneTimeCodeInput.tsx
@@ -28,6 +28,8 @@ import {
} from '@tamagui/lucide-icons';
import { InputWithLabelDemo } from './InputWithLabel';
+const isWeb = typeof window !== 'undefined';
+
interface CodeConfirmationInputProps {
id: number;
size?: SizeTokens;
@@ -94,9 +96,9 @@ function CodeConfirmationInput({
onKeyPress={(e) => {
const event = e.nativeEvent;
if (event.key === 'Backspace') {
- // Prevent the backspace key from navigating back
- event.preventDefault();
-
+ if (isWeb && (event as any).preventDefault) {
+ (event as any).preventDefault();
+ }
if (value !== '') {
// Reset input field
onChange('');
diff --git a/packages/ui/src/Bento/forms/inputs/PhoneInput.tsx b/packages/ui/src/Bento/forms/inputs/PhoneInput.tsx
index 511aec25a..1d7fed247 100644
--- a/packages/ui/src/Bento/forms/inputs/PhoneInput.tsx
+++ b/packages/ui/src/Bento/forms/inputs/PhoneInput.tsx
@@ -101,7 +101,7 @@ function RegionFilterInput(props: RegionFilterInputProps) {
setRegionCode(item.name);
setOpen(false);
}}
- group="item"
+ group
borderColor="$borderColor"
borderWidth={0}
borderBottomWidth={1}
diff --git a/packages/ui/src/Bento/forms/layouts/SignUpTwoSide.tsx b/packages/ui/src/Bento/forms/layouts/SignUpTwoSide.tsx
index f1b7d7726..f1595b52b 100644
--- a/packages/ui/src/Bento/forms/layouts/SignUpTwoSide.tsx
+++ b/packages/ui/src/Bento/forms/layouts/SignUpTwoSide.tsx
@@ -304,9 +304,9 @@ function CountrySelect({ data, id }: { data: typeof countries; id: string }) {
justifyContent="center"
alignItems="center"
>
-
- {`${selectedItem.name} ${
- selectedItem.shortName ? `(${selectedItem.shortName})` : ''
+
+ {`${selectedItem?.name} ${
+ selectedItem?.shortName ? `(${selectedItem?.shortName})` : ''
}`}
diff --git a/packages/ui/src/Bento/forms/layouts/SignupValidatedTsForm.tsx b/packages/ui/src/Bento/forms/layouts/SignupValidatedTsForm.tsx
index a5abedd53..eb8179c51 100644
--- a/packages/ui/src/Bento/forms/layouts/SignupValidatedTsForm.tsx
+++ b/packages/ui/src/Bento/forms/layouts/SignupValidatedTsForm.tsx
@@ -390,14 +390,8 @@ const SchemaForm: typeof _SchemaForm = ({ ...props }) => {
return (
<_SchemaForm {...props} renderAfter={renderAfter}>
- {(
- fields: Record>,
- context: any,
- ) => {
- //@ts-ignore
- return props.children
- ? props.children(fields, context)
- : Object.values(fields);
+ {(fields /* , context */) => {
+ return props.children ? props.children(fields) : Object.values(fields);
}}
);
diff --git a/packages/ui/src/Bento/forms/layouts/components/layoutParts.tsx b/packages/ui/src/Bento/forms/layouts/components/layoutParts.tsx
index c25a6f6ef..147379903 100644
--- a/packages/ui/src/Bento/forms/layouts/components/layoutParts.tsx
+++ b/packages/ui/src/Bento/forms/layouts/components/layoutParts.tsx
@@ -26,7 +26,7 @@ export const FormCard = styled(View, {
borderRadius: 0,
paddingHorizontal: '$1',
},
-});
+} as any);
export const Hide = ({
children,
diff --git a/packages/ui/src/Bento/forms/switches/index.tsx b/packages/ui/src/Bento/forms/switches/index.tsx
index 770d01284..c374b6cf5 100644
--- a/packages/ui/src/Bento/forms/switches/index.tsx
+++ b/packages/ui/src/Bento/forms/switches/index.tsx
@@ -1,2 +1,2 @@
-export * from './IconTitleSwitch';
+// remove: export * from './IconTitleSwitch';
export * from './SwitchCustomIcons';
diff --git a/packages/ui/src/Bento/general/_Showcase.tsx b/packages/ui/src/Bento/general/_Showcase.tsx
index 8c9f615ac..cf975172a 100644
--- a/packages/ui/src/Bento/general/_Showcase.tsx
+++ b/packages/ui/src/Bento/general/_Showcase.tsx
@@ -311,11 +311,11 @@ const MessagesFrame = (props: {
const PHONE_SCALE = 0.75;
const PhoneFrame = (props: any) => {
- const query = useRouter().query;
+ // const query = useRouter().query;
return (
(
>
@@ -592,7 +592,7 @@ export const WithSize = ({ children }: { children: any }) => {
return React.cloneElement(children, { size });
};
-export const SizeController = YGroup.styleable((props, ref) => {
+const SizeController = YGroup.styleable((props, ref) => {
const { size, sizes, setSize, showController } = useSize();
if (!showController) return null;
return (
@@ -612,7 +612,9 @@ export const SizeController = YGroup.styleable((props, ref) => {
py="$6"
onPress={() => {
const index = sizes.indexOf(size);
- setSize(sizes[index + 1 >= sizes.length ? 4 : index + 1]);
+ const newSize =
+ sizes[index + 1 >= sizes.length ? 4 : index + 1] || '$4';
+ setSize(newSize);
}}
>
@@ -627,7 +629,8 @@ export const SizeController = YGroup.styleable((props, ref) => {
py="$6"
onPress={() => {
const index = sizes.indexOf(size);
- setSize(sizes[index - 1 < 0 ? 0 : index - 1]);
+ const newSize = sizes[index - 1 < 0 ? 0 : index - 1] || '$4';
+ setSize(newSize);
}}
>
diff --git a/packages/ui/src/Bento/general/_sizeController.tsx b/packages/ui/src/Bento/general/_sizeController.tsx
index e2ca55868..e3a04dde1 100644
--- a/packages/ui/src/Bento/general/_sizeController.tsx
+++ b/packages/ui/src/Bento/general/_sizeController.tsx
@@ -32,7 +32,7 @@ export const SizeController = YGroup.styleable<{
size="$3"
onPress={() => {
const index = sizes.indexOf(size);
- setSize(sizes[index - 1 < 0 ? 0 : index - 1]);
+ setSize(sizes[index - 1 < 0 ? 0 : index - 1] ?? '$4');
}}
>
@@ -45,7 +45,9 @@ export const SizeController = YGroup.styleable<{
size="$3"
onPress={() => {
const index = sizes.indexOf(size);
- setSize(sizes[index + 1 >= sizes.length ? 4 : index + 1]);
+ setSize(
+ sizes[index + 1 >= sizes.length ? 4 : index + 1] ?? '$4',
+ );
}}
>
diff --git a/packages/ui/src/Bento/panels/walkthrough/WalkThroughFluid.tsx b/packages/ui/src/Bento/panels/walkthrough/WalkThroughFluid.tsx
index 0c69db810..8bb25a914 100644
--- a/packages/ui/src/Bento/panels/walkthrough/WalkThroughFluid.tsx
+++ b/packages/ui/src/Bento/panels/walkthrough/WalkThroughFluid.tsx
@@ -106,9 +106,10 @@ function WalkThroughComp({
useEffect(() => {
if (itemsDim.length !== numberOfSteps) return;
- popoverRef.current?.anchorTo(
- itemsDim[activeStep] || itemsDim[numberOfSteps - 1],
- );
+ const activeRect = itemsDim[activeStep] || itemsDim[numberOfSteps - 1];
+ if (activeRect) {
+ popoverRef.current?.anchorTo(activeRect);
+ }
}, [activeStep, itemsDim]);
return (
diff --git a/packages/ui/src/Bento/shells/navbars/TopNavBarWithLogo.tsx b/packages/ui/src/Bento/shells/navbars/TopNavBarWithLogo.tsx
index 5c2c4f663..6061ec8ab 100644
--- a/packages/ui/src/Bento/shells/navbars/TopNavBarWithLogo.tsx
+++ b/packages/ui/src/Bento/shells/navbars/TopNavBarWithLogo.tsx
@@ -325,7 +325,7 @@ const DropDownItem = styled(View, {
paddingHorizontal: '$2',
paddingVertical: '$1',
},
-});
+} as any);
const DropDownText = styled(Text, {
fontWeight: '$2',
@@ -336,7 +336,7 @@ const DropDownText = styled(Text, {
fontSize: '$1',
lineHeight: '$1',
},
-});
+} as any);
const NavLink = View.styleable<{ href: string }>(
({ children, href = '#', ...rest }, ref) => {
diff --git a/packages/ui/src/Bento/shells/navbars/TopNavBarWithUnderLineTabs.tsx b/packages/ui/src/Bento/shells/navbars/TopNavBarWithUnderLineTabs.tsx
index 6b10cb6af..e39da1d41 100644
--- a/packages/ui/src/Bento/shells/navbars/TopNavBarWithUnderLineTabs.tsx
+++ b/packages/ui/src/Bento/shells/navbars/TopNavBarWithUnderLineTabs.tsx
@@ -320,7 +320,7 @@ const DropDownItem = styled(View, {
paddingHorizontal: '$2',
paddingVertical: '$1',
},
-});
+} as any);
const DropDownText = styled(Text, {
fontWeight: '$2',
@@ -331,7 +331,7 @@ const DropDownText = styled(Text, {
fontSize: '$1',
lineHeight: '$1',
},
-});
+} as any);
const NavLink = View.styleable<{ href: string }>(
({ children, href = '#', ...rest }, ref) => {
diff --git a/packages/ui/src/Bento/shells/sidebars/FullSideBar.tsx b/packages/ui/src/Bento/shells/sidebars/FullSideBar.tsx
index 3fa42d0ed..a23708dc2 100644
--- a/packages/ui/src/Bento/shells/sidebars/FullSideBar.tsx
+++ b/packages/ui/src/Bento/shells/sidebars/FullSideBar.tsx
@@ -43,7 +43,7 @@ const Link = styled(Text, {
'$group-window-xs': {
paddingVertical: '$2.5',
},
-});
+} as any);
/** ------ EXAMPLE ------ */
export function FullSideBar() {
@@ -220,7 +220,7 @@ const DropDownItem = styled(View, {
paddingHorizontal: '$2',
paddingVertical: '$1',
},
-});
+} as any);
const DropDownText = styled(Text, {
fontWeight: '$2',
@@ -231,7 +231,7 @@ const DropDownText = styled(Text, {
fontSize: '$1',
lineHeight: '$1',
},
-});
+} as any);
/** SIDEBAR AND DRAWER */
function Sidebar() {
diff --git a/packages/ui/src/Bento/shells/tabbars/TabBar.tsx b/packages/ui/src/Bento/shells/tabbars/TabBar.tsx
index 5c9e30395..968b08e4f 100644
--- a/packages/ui/src/Bento/shells/tabbars/TabBar.tsx
+++ b/packages/ui/src/Bento/shells/tabbars/TabBar.tsx
@@ -43,11 +43,12 @@ const CustomTabBar = View.styleable(
ref={ref}
>
{state.routes.map((route, index) => {
- const { options } = descriptors[route.key];
+ const descriptor = descriptors[route.key];
+ const { options } = descriptor ?? {};
const label =
- options.tabBarLabel !== undefined
+ options?.tabBarLabel !== undefined
? options.tabBarLabel
- : options.title !== undefined
+ : options?.title !== undefined
? options.title
: route.name;
@@ -165,7 +166,7 @@ export function Tabbar() {
justifyContent="center"
>
- {state.routes[state.index].key}
+ {state?.routes?.[state.index]?.key}
(
@@ -43,11 +44,12 @@ const CustomTabBar = View.styleable(
ref={ref}
>
{state.routes.map((route, index) => {
- const { options } = descriptors[route.key];
+ const descriptor = descriptors[route.key];
+ const { options } = descriptor ?? {};
const label =
- options.tabBarLabel !== undefined
+ options?.tabBarLabel !== undefined
? options.tabBarLabel
- : options.title !== undefined
+ : options?.title !== undefined
? options.title
: route.name;
@@ -72,7 +74,7 @@ const CustomTabBar = View.styleable(
return (
- {state.routes[state.index].key}
+ {state?.routes?.[state.index]?.key}
diff --git a/packages/ui/src/Bento/user/preferences/LocationNotification.tsx b/packages/ui/src/Bento/user/preferences/LocationNotification.tsx
index 3f96ded1c..f5676799b 100644
--- a/packages/ui/src/Bento/user/preferences/LocationNotification.tsx
+++ b/packages/ui/src/Bento/user/preferences/LocationNotification.tsx
@@ -54,14 +54,18 @@ const countries = [
];
const languagesArray = Array.from({ length: 10 }, (_, i) => ({
- name: languages[i].name,
- shortcut: languages[i].shortcut,
- flag: `https://flagsapi.com/${languages[i].flag}/flat/64.png`,
+ name: languages[i]?.name || '',
+ shortcut: languages[i]?.shortcut,
+ flag: languages[i]
+ ? `https://flagsapi.com/${languages[i]?.flag}/flat/64.png`
+ : '',
}));
const locationsArray = Array.from({ length: 10 }, (_, i) => ({
- name: countries[i].name,
- flag: `https://flagsapi.com/${countries[i].flag}/flat/64.png`,
+ name: countries[i]?.name || '',
+ flag: countries[i]
+ ? `https://flagsapi.com/${countries[i]?.flag}/flat/64.png`
+ : '',
}));
type DataItem = {
@@ -90,10 +94,18 @@ function GeneralSelect({ data, ...rest }: SelectProps & { data: DataItem[] }) {
justifyContent="center"
alignItems="center"
>
-
- {`${selectedItem.name} ${
- selectedItem.shortcut ? `(${selectedItem.shortcut})` : ''
- }`}
+ {selectedItem && (
+ <>
+
+ {`${selectedItem.name} ${
+ selectedItem.shortcut ? `(${selectedItem.shortcut})` : ''
+ }`}
+ >
+ )}
@@ -348,7 +360,7 @@ const radioData = [
];
function RadioList() {
- const [value, setValue] = useState(radioData[0].title);
+ const [value, setValue] = useState(radioData[0]?.title || '');
return (
diff --git a/packages/ui/src/DateRangePicker/DateRangePicker.native.tsx b/packages/ui/src/DateRangePicker/DateRangePicker.native.tsx
index 76570ae17..39e769b36 100644
--- a/packages/ui/src/DateRangePicker/DateRangePicker.native.tsx
+++ b/packages/ui/src/DateRangePicker/DateRangePicker.native.tsx
@@ -1,14 +1,14 @@
import React, { useMemo, useState } from 'react';
import { View, Text, Modal } from 'react-native';
import { Calendar } from 'react-native-calendars';
-import { extendMoment } from 'moment-range';
-import Moment from 'moment';
+import { extendMoment, DateRange } from 'moment-range';
+import moment from 'moment';
import { Button } from 'tamagui';
import { DatePickerInput } from '../Bento/elements/datepickers/common/dateParts';
import RButton from '../RButton';
-const moment = extendMoment(Moment);
-type RangeDate = ReturnType;
+const extendedMoment = extendMoment(moment as any);
+type RangeDate = ReturnType;
interface RangePickerProps {
selectedDates: Date[];
@@ -30,23 +30,38 @@ const DateRangePicker = ({
return [];
}
- return selectedDates.map((date) => moment(date)) as [RangeDate, RangeDate];
+ return selectedDates.map((date) => extendedMoment(date)) as [
+ RangeDate,
+ RangeDate,
+ ];
});
const onDayPress = (day) => {
- const selectedDay = moment(day.dateString, 'YYYY-MM-DD');
+ const selectedDay = extendedMoment(day.dateString, 'YYYY-MM-DD');
if (range.length < 1 || selectedDay.isSame(range[0], 'day')) {
return setRange([selectedDay]);
}
- const newRange = moment.range(range[0], selectedDay);
- let rangeResult = [moment(newRange.start), moment(newRange.end)];
- if (rangeResult[0].isAfter(rangeResult[1])) {
- rangeResult = [rangeResult[1], rangeResult[0]];
- }
+ if (range && range[0] && selectedDay) {
+ const newRange = extendedMoment.range(range[0], selectedDay);
+ let rangeResult = [
+ extendedMoment(newRange.start),
+ extendedMoment(newRange.end),
+ ];
+ if (
+ rangeResult[0] &&
+ rangeResult[1] &&
+ rangeResult[0].isAfter(rangeResult[1])
+ ) {
+ rangeResult = [rangeResult[1], rangeResult[0]];
+ }
- setRange(rangeResult);
- onDatesChange([range[0]?.toDate(), range[1]?.toDate()]);
- setOpen(false);
+ setRange([rangeResult[0], rangeResult[1]]);
+ onDatesChange([
+ range[0]?.toDate() || new Date(),
+ range[1]?.toDate() || new Date(),
+ ]);
+ setOpen(false);
+ }
};
const markedDates = useMemo(() => {
@@ -60,28 +75,30 @@ const DateRangePicker = ({
const [start, end] = range;
if (start) {
- const dateString = moment(start).format('YYYY-MM-DD');
+ const dateString = extendedMoment(start).format('YYYY-MM-DD');
result[dateString] = { ...period, startingDay: true };
}
if (end) {
- const dateString = moment(end).format('YYYY-MM-DD');
+ const dateString = extendedMoment(end).format('YYYY-MM-DD');
result[dateString] = {
...period,
endingDay: true,
};
// Mark all dates between start and end
- const dates = Array.from(moment.range(start, end).by('day'));
- dates.forEach((date) => {
- const dateString = date.format('YYYY-MM-DD');
- if (
- dateString !== moment(start).format('YYYY-MM-DD') &&
- dateString !== moment(end).format('YYYY-MM-DD')
- ) {
- result[dateString] = period;
- }
- });
+ if (start && end) {
+ const dates = Array.from(extendedMoment.range(start, end).by('day'));
+ dates.forEach((date) => {
+ const dateString = date.format('YYYY-MM-DD');
+ if (
+ dateString !== extendedMoment(start).format('YYYY-MM-DD') &&
+ dateString !== extendedMoment(end).format('YYYY-MM-DD')
+ ) {
+ result[dateString] = period;
+ }
+ });
+ }
}
return result;
@@ -98,7 +115,7 @@ const DateRangePicker = ({
diff --git a/packages/ui/src/FullScreen/FullScreen.tsx b/packages/ui/src/FullScreen/FullScreen.tsx
index 027d43663..7d1e3baef 100644
--- a/packages/ui/src/FullScreen/FullScreen.tsx
+++ b/packages/ui/src/FullScreen/FullScreen.tsx
@@ -32,7 +32,7 @@ export const FullScreen: FC = ({
return (
{children}
diff --git a/packages/ui/src/FullScreen/useWebFullScreen.ts b/packages/ui/src/FullScreen/useWebFullScreen.ts
index 4d3f6e4f6..e509035f2 100644
--- a/packages/ui/src/FullScreen/useWebFullScreen.ts
+++ b/packages/ui/src/FullScreen/useWebFullScreen.ts
@@ -7,24 +7,24 @@ export const useWebFullScreen = () => {
const element = elementRef.current;
if (element && element.requestFullscreen) {
element.requestFullscreen();
- } else if (element && element.webkitRequestFullscreen) {
- element.webkitRequestFullscreen();
- } else if (element && element.mozRequestFullScreen) {
- element.mozRequestFullScreen();
- } else if (element && element.msRequestFullscreen) {
- element.msRequestFullscreen();
+ } else if (element && (element as any).webkitRequestFullscreen) {
+ (element as any).webkitRequestFullscreen();
+ } else if (element && (element as any).mozRequestFullScreen) {
+ (element as any).mozRequestFullScreen();
+ } else if (element && (element as any).msRequestFullscreen) {
+ (element as any).msRequestFullscreen();
}
};
const exitFullScreen = () => {
if (document.fullscreenElement) {
document.exitFullscreen();
- } else if (document.webkitExitFullscreen) {
- document.webkitExitFullscreen();
- } else if (document.mozCancelFullScreen) {
- document.mozCancelFullScreen();
- } else if (document.msExitFullscreen) {
- document.msExitFullscreen();
+ } else if ((document as any).webkitExitFullscreen) {
+ (document as any).webkitExitFullscreen();
+ } else if ((document as any).mozCancelFullScreen) {
+ (document as any).mozCancelFullScreen();
+ } else if ((document as any).msExitFullscreen) {
+ (document as any).msExitFullscreen();
}
};
diff --git a/packages/ui/src/ItemPickerOverlay/ItemPickerOverlay.tsx b/packages/ui/src/ItemPickerOverlay/ItemPickerOverlay.tsx
index d04878899..ccaa30592 100644
--- a/packages/ui/src/ItemPickerOverlay/ItemPickerOverlay.tsx
+++ b/packages/ui/src/ItemPickerOverlay/ItemPickerOverlay.tsx
@@ -57,7 +57,7 @@ export const ItemPickerOverlay: FC = ({
>
}
color="white"
- size="$3"
style={{
backgroundColor: '#232323',
color: 'white',
- textAlign: 'center'
+ textAlign: 'center',
}}
onPress={handlePickImage}
>
@@ -81,7 +91,7 @@ export const ImageUpload = ({ hasProfileImage, previewElement, name, label }) =>
style={{
backgroundColor: '#232323',
color: 'white',
- textAlign: 'center'
+ textAlign: 'center',
}}
onPress={handleRemoveImage}
>
diff --git a/packages/ui/src/form/components/SubmitButton.tsx b/packages/ui/src/form/components/SubmitButton.tsx
index 055ccaec0..8f46ee8fa 100644
--- a/packages/ui/src/form/components/SubmitButton.tsx
+++ b/packages/ui/src/form/components/SubmitButton.tsx
@@ -11,12 +11,15 @@ export const SubmitButton = ({
const safeStyle = typeof style === 'object' && style !== null ? style : {};
return (
i.value !== item.value) ?? []
+ ? ((selection as Option[])?.filter((i) => i.value !== item.value) ?? [])
: [...((selection as Option[]) ?? []), item];
} else {
newVal = isSelected(item) ? null : item;
@@ -139,7 +139,7 @@ export function LmAutocomplete({
helperText={helperText}
helperTextProps={helperTextProps}
size={size}
- {...containerProps}
+ {...(containerProps as any)}
>
diff --git a/packages/ui/src/form/lib/LmInput.tsx b/packages/ui/src/form/lib/LmInput.tsx
index 675040826..43ee3a2ce 100644
--- a/packages/ui/src/form/lib/LmInput.tsx
+++ b/packages/ui/src/form/lib/LmInput.tsx
@@ -69,7 +69,7 @@ export const LmInput = forwardRef(function LmInputEl(
labelInline={labelInline}
helperText={helperText}
helperTextProps={helperTextProps}
- {...containerProps}
+ {...(containerProps as any)}
>
{multiline ? (