@asdp/ferryui 0.1.22-dev.9151 → 0.1.22-dev.9152
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/dist/index.d.mts +13 -1
- package/dist/index.d.ts +13 -1
- package/dist/index.js +325 -54
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +325 -55
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -827,6 +827,7 @@ interface InputDynamicProps<T extends FieldValues = FieldValues> {
|
|
|
827
827
|
validate?: (value: any) => string | boolean;
|
|
828
828
|
};
|
|
829
829
|
helperText?: string;
|
|
830
|
+
helperIcon?: string;
|
|
830
831
|
className?: string;
|
|
831
832
|
layout?: 'horizontal' | 'vertical';
|
|
832
833
|
size?: 'small' | 'medium' | 'large';
|
|
@@ -3592,4 +3593,15 @@ interface ModalPreviewImageProps {
|
|
|
3592
3593
|
|
|
3593
3594
|
declare const ModalPreviewImage: React$1.FC<ModalPreviewImageProps>;
|
|
3594
3595
|
|
|
3595
|
-
|
|
3596
|
+
interface ModalListMenuServiceProps {
|
|
3597
|
+
open?: boolean;
|
|
3598
|
+
onClose?: () => void;
|
|
3599
|
+
title?: string;
|
|
3600
|
+
menuItems?: CardServiceMenuItem[];
|
|
3601
|
+
onItemClick?: (item: CardServiceMenuItem) => void;
|
|
3602
|
+
showDescriptions?: boolean;
|
|
3603
|
+
}
|
|
3604
|
+
|
|
3605
|
+
declare const ModalListMenuService: React$1.FC<ModalListMenuServiceProps>;
|
|
3606
|
+
|
|
3607
|
+
export { API_CONFIG, API_ENDPOINTS, API_ERROR_MESSAGES, BackgroundTicketCard, BackgroundTicketCardVertical, type BadgeConfig, type BillingDetail, COUNTRIES, CardAddon, type CardAddonProps, CardBanner, type CardBannerProps, CardBookingTicket, type CardBookingTicketProps, CardFAQ, type CardFAQProps, CardMealCatalog, type CardMealCatalogProps, CardOrdererInfo, type CardOrdererInfoProps, CardPassengerList, type CardPassengerListProps, CardPaymentGuide, type CardPaymentGuideProps, CardPaymentInfo, type CardPaymentInfoProps, CardPaymentMethodList, type CardPaymentMethodListProps, CardPriceDetails, type CardPriceDetailsProps, CardProfileMenu, type CardProfileMenuLabels, type CardProfileMenuProps, CardPromo, type CardPromoProps, CardReview, CardReviewPassenger, type CardReviewPassengerProps, type CardReviewProps, CardServiceMenu, type CardServiceMenuProps, CardStatusOrder, type CardStatusOrderProps, CardTicket, type CardTicketProps, CardTicketSearch, DEFAULT_LABELS$3 as CardTicketSearchDefaultLabels, type CardTicketSearchFormData, type CardTicketSearchLabels, type CardTicketSearchProps, type ServiceMenuItem as CardTicketSearchServiceMenuItem, CardTicketSearchSummary, DEFAULT_LABELS$2 as CardTicketSearchSummaryDefaultLabels, type CardTicketSearchSummaryProps, CardVehicleDetail, type CardVehicleDetailProps, CardVehicleOwnerForm, type CardVehicleOwnerFormProps, type CargoItem, CarouselWithCustomNav, type CarouselWithCustomNavProps, type CountryOption, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS as DateFilterDefaultLabels, type DateFilterLabels, type DateFilterProps, type DateItem, type DepartureItem, FileUpload, type FileUploadProps, type FilterCount, GENDER, type GENDER_TYPE, HTTP_STATUS, type HarborItem, IDENTITY_TYPE, type IDENTITY_TYPE_TYPE, InputDynamic, type InputDynamicProps, type InputType, LOAD_TYPE, type LOAD_TYPE_TYPE, MODAL_PRESETS, MY_TICKET_STATUS, type MY_TICKET_STATUS_TYPE, MY_TICKET_TAB, type MY_TICKET_TAB_TYPE, type MealCategory, type MealItem, ModalFilterTicket, DEFAULT_LABELS$1 as ModalFilterTicketDefaultLabels, type ModalFilterTicketLabels, type ModalFilterTicketProps, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, ModalListMenuService, type ModalListMenuServiceProps, ModalListPassenger, type PassengerItem as ModalListPassengerItem, type ModalListPassengerProps, ModalPassengerForm, type ModalPassengerFormProps, type ModalPresetKey, ModalPreviewImage, type ModalPreviewImageProps, ModalPriceDetail, type ModalPriceDetailProps, ModalSearchHarbor, type ModalSearchHarborProps, ModalSearchTicket, type ModalSearchTicketProps, ModalSelectDate, type ModalSelectDateProps, ModalService, type CardServiceMenuItem as ModalServiceItem, type ModalServiceProps, ModalTotalPassengers, type ModalTotalPassengersProps, ModalTypeOfService, type ModalTypeOfServiceProps, PASSENGER_TYPE, type PASSENGER_TYPE_TYPE, type Passenger, type PassengerClass, type PassengerFormData, type PassengerListItem, type PassengerService, type PassengerType, type PaymentGuideStep, type PaymentMethodCategory, type PaymentStep, type PriceDetailItem, type ProfileMenuSection, type ProfileMenuTab, type Provider, type RadioOption, type ReservationStep, type ReviewPassengerItem, type RouteItem, type SearchSummaryField, type SearchTicketFormData, type SelectOption, type SelectedPassengerItem, type ServiceId, type ServiceItem, SortMenu, type SortMenuProps, type SortOption, type StepStatus, Stepper, type StepperProps, type StepperStep, type TabType, type TypeOfService, type VehicleOwner, getBadgeConfig, getModalPreset, getSortLabel };
|
package/dist/index.d.ts
CHANGED
|
@@ -827,6 +827,7 @@ interface InputDynamicProps<T extends FieldValues = FieldValues> {
|
|
|
827
827
|
validate?: (value: any) => string | boolean;
|
|
828
828
|
};
|
|
829
829
|
helperText?: string;
|
|
830
|
+
helperIcon?: string;
|
|
830
831
|
className?: string;
|
|
831
832
|
layout?: 'horizontal' | 'vertical';
|
|
832
833
|
size?: 'small' | 'medium' | 'large';
|
|
@@ -3592,4 +3593,15 @@ interface ModalPreviewImageProps {
|
|
|
3592
3593
|
|
|
3593
3594
|
declare const ModalPreviewImage: React$1.FC<ModalPreviewImageProps>;
|
|
3594
3595
|
|
|
3595
|
-
|
|
3596
|
+
interface ModalListMenuServiceProps {
|
|
3597
|
+
open?: boolean;
|
|
3598
|
+
onClose?: () => void;
|
|
3599
|
+
title?: string;
|
|
3600
|
+
menuItems?: CardServiceMenuItem[];
|
|
3601
|
+
onItemClick?: (item: CardServiceMenuItem) => void;
|
|
3602
|
+
showDescriptions?: boolean;
|
|
3603
|
+
}
|
|
3604
|
+
|
|
3605
|
+
declare const ModalListMenuService: React$1.FC<ModalListMenuServiceProps>;
|
|
3606
|
+
|
|
3607
|
+
export { API_CONFIG, API_ENDPOINTS, API_ERROR_MESSAGES, BackgroundTicketCard, BackgroundTicketCardVertical, type BadgeConfig, type BillingDetail, COUNTRIES, CardAddon, type CardAddonProps, CardBanner, type CardBannerProps, CardBookingTicket, type CardBookingTicketProps, CardFAQ, type CardFAQProps, CardMealCatalog, type CardMealCatalogProps, CardOrdererInfo, type CardOrdererInfoProps, CardPassengerList, type CardPassengerListProps, CardPaymentGuide, type CardPaymentGuideProps, CardPaymentInfo, type CardPaymentInfoProps, CardPaymentMethodList, type CardPaymentMethodListProps, CardPriceDetails, type CardPriceDetailsProps, CardProfileMenu, type CardProfileMenuLabels, type CardProfileMenuProps, CardPromo, type CardPromoProps, CardReview, CardReviewPassenger, type CardReviewPassengerProps, type CardReviewProps, CardServiceMenu, type CardServiceMenuProps, CardStatusOrder, type CardStatusOrderProps, CardTicket, type CardTicketProps, CardTicketSearch, DEFAULT_LABELS$3 as CardTicketSearchDefaultLabels, type CardTicketSearchFormData, type CardTicketSearchLabels, type CardTicketSearchProps, type ServiceMenuItem as CardTicketSearchServiceMenuItem, CardTicketSearchSummary, DEFAULT_LABELS$2 as CardTicketSearchSummaryDefaultLabels, type CardTicketSearchSummaryProps, CardVehicleDetail, type CardVehicleDetailProps, CardVehicleOwnerForm, type CardVehicleOwnerFormProps, type CargoItem, CarouselWithCustomNav, type CarouselWithCustomNavProps, type CountryOption, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS as DateFilterDefaultLabels, type DateFilterLabels, type DateFilterProps, type DateItem, type DepartureItem, FileUpload, type FileUploadProps, type FilterCount, GENDER, type GENDER_TYPE, HTTP_STATUS, type HarborItem, IDENTITY_TYPE, type IDENTITY_TYPE_TYPE, InputDynamic, type InputDynamicProps, type InputType, LOAD_TYPE, type LOAD_TYPE_TYPE, MODAL_PRESETS, MY_TICKET_STATUS, type MY_TICKET_STATUS_TYPE, MY_TICKET_TAB, type MY_TICKET_TAB_TYPE, type MealCategory, type MealItem, ModalFilterTicket, DEFAULT_LABELS$1 as ModalFilterTicketDefaultLabels, type ModalFilterTicketLabels, type ModalFilterTicketProps, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, ModalListMenuService, type ModalListMenuServiceProps, ModalListPassenger, type PassengerItem as ModalListPassengerItem, type ModalListPassengerProps, ModalPassengerForm, type ModalPassengerFormProps, type ModalPresetKey, ModalPreviewImage, type ModalPreviewImageProps, ModalPriceDetail, type ModalPriceDetailProps, ModalSearchHarbor, type ModalSearchHarborProps, ModalSearchTicket, type ModalSearchTicketProps, ModalSelectDate, type ModalSelectDateProps, ModalService, type CardServiceMenuItem as ModalServiceItem, type ModalServiceProps, ModalTotalPassengers, type ModalTotalPassengersProps, ModalTypeOfService, type ModalTypeOfServiceProps, PASSENGER_TYPE, type PASSENGER_TYPE_TYPE, type Passenger, type PassengerClass, type PassengerFormData, type PassengerListItem, type PassengerService, type PassengerType, type PaymentGuideStep, type PaymentMethodCategory, type PaymentStep, type PriceDetailItem, type ProfileMenuSection, type ProfileMenuTab, type Provider, type RadioOption, type ReservationStep, type ReviewPassengerItem, type RouteItem, type SearchSummaryField, type SearchTicketFormData, type SelectOption, type SelectedPassengerItem, type ServiceId, type ServiceItem, SortMenu, type SortMenuProps, type SortOption, type StepStatus, Stepper, type StepperProps, type StepperStep, type TabType, type TypeOfService, type VehicleOwner, getBadgeConfig, getModalPreset, getSortLabel };
|
package/dist/index.js
CHANGED
|
@@ -1884,50 +1884,74 @@ var ALIAS_MENU_ITEMS = [
|
|
|
1884
1884
|
"sortOrder": 4
|
|
1885
1885
|
}
|
|
1886
1886
|
];
|
|
1887
|
+
var BP_TABLET = `max-width: ${extendedTokens.breakpointXl}`;
|
|
1888
|
+
var BP_MOBILE = `max-width: ${extendedTokens.breakpointMd}`;
|
|
1887
1889
|
var useStyles6 = reactComponents.makeStyles({
|
|
1888
1890
|
card: {
|
|
1889
1891
|
width: "100%",
|
|
1890
1892
|
boxSizing: "border-box",
|
|
1891
1893
|
padding: "0px",
|
|
1892
|
-
borderRadius: reactComponents.tokens.borderRadiusXLarge
|
|
1894
|
+
borderRadius: reactComponents.tokens.borderRadiusXLarge,
|
|
1895
|
+
[`@media (${BP_MOBILE})`]: {
|
|
1896
|
+
borderRadius: reactComponents.tokens.borderRadiusLarge
|
|
1897
|
+
}
|
|
1893
1898
|
},
|
|
1899
|
+
// Desktop: vertical column list
|
|
1894
1900
|
menuList: {
|
|
1895
1901
|
display: "flex",
|
|
1896
1902
|
flexDirection: "column",
|
|
1897
|
-
|
|
1903
|
+
justifyContent: "space-around",
|
|
1904
|
+
// Tablet + Mobile: horizontal scroll row
|
|
1905
|
+
[`@media (${BP_TABLET})`]: {
|
|
1898
1906
|
flexDirection: "row",
|
|
1899
1907
|
overflowX: "auto",
|
|
1908
|
+
overflowY: "visible",
|
|
1900
1909
|
flexWrap: "nowrap",
|
|
1901
|
-
gap: "0px",
|
|
1902
1910
|
WebkitOverflowScrolling: "touch",
|
|
1903
|
-
|
|
1904
|
-
|
|
1911
|
+
scrollSnapType: "x mandatory",
|
|
1912
|
+
// Thin scrollbar on tablet, hidden on mobile
|
|
1913
|
+
scrollbarWidth: "thin"
|
|
1914
|
+
},
|
|
1915
|
+
[`@media (${BP_MOBILE})`]: {
|
|
1916
|
+
scrollbarWidth: "none"
|
|
1905
1917
|
}
|
|
1906
1918
|
},
|
|
1919
|
+
// Desktop: full-width horizontal row (icon left, text right)
|
|
1907
1920
|
menuItem: {
|
|
1908
1921
|
display: "flex",
|
|
1909
1922
|
flexDirection: "row",
|
|
1910
1923
|
alignItems: "center",
|
|
1911
1924
|
justifyContent: "flex-start",
|
|
1912
|
-
padding: "12px",
|
|
1925
|
+
padding: "12px 16px",
|
|
1913
1926
|
borderRadius: reactComponents.tokens.borderRadiusMedium,
|
|
1914
1927
|
cursor: "pointer",
|
|
1915
1928
|
textAlign: "left",
|
|
1916
1929
|
transition: "background-color 0.2s ease",
|
|
1917
|
-
textDecoration: "none",
|
|
1918
1930
|
color: reactComponents.tokens.colorNeutralForeground1,
|
|
1919
1931
|
backgroundColor: reactComponents.tokens.colorNeutralBackground1,
|
|
1920
1932
|
border: "none",
|
|
1921
1933
|
gap: "12px",
|
|
1934
|
+
width: "100%",
|
|
1922
1935
|
"&:hover": {
|
|
1923
1936
|
backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover
|
|
1924
1937
|
},
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
flexShrink: 0,
|
|
1938
|
+
// Tablet: compact column, fixed width, description visible (1 line)
|
|
1939
|
+
[`@media (${BP_TABLET})`]: {
|
|
1928
1940
|
flexDirection: "column",
|
|
1929
1941
|
alignItems: "center",
|
|
1930
|
-
textAlign: "center"
|
|
1942
|
+
textAlign: "center",
|
|
1943
|
+
padding: "10px 8px",
|
|
1944
|
+
flexShrink: 0,
|
|
1945
|
+
width: "90px",
|
|
1946
|
+
// compact fixed width
|
|
1947
|
+
gap: "4px",
|
|
1948
|
+
scrollSnapAlign: "start"
|
|
1949
|
+
},
|
|
1950
|
+
// Mobile: even tighter, no description
|
|
1951
|
+
[`@media (${BP_MOBILE})`]: {
|
|
1952
|
+
padding: "8px 6px",
|
|
1953
|
+
width: "72px",
|
|
1954
|
+
gap: "4px"
|
|
1931
1955
|
}
|
|
1932
1956
|
},
|
|
1933
1957
|
menuItemActive: {
|
|
@@ -1937,47 +1961,92 @@ var useStyles6 = reactComponents.makeStyles({
|
|
|
1937
1961
|
backgroundColor: reactComponents.tokens.colorNeutralBackground3Hover
|
|
1938
1962
|
}
|
|
1939
1963
|
},
|
|
1964
|
+
// Icon wrapper — rounded bg on mobile
|
|
1965
|
+
logoWrapper: {
|
|
1966
|
+
display: "flex",
|
|
1967
|
+
alignItems: "center",
|
|
1968
|
+
justifyContent: "center",
|
|
1969
|
+
flexShrink: 0
|
|
1970
|
+
},
|
|
1940
1971
|
logo: {
|
|
1941
1972
|
height: "32px",
|
|
1942
1973
|
width: "32px",
|
|
1943
|
-
flexShrink: 0
|
|
1974
|
+
flexShrink: 0,
|
|
1975
|
+
objectFit: "contain",
|
|
1976
|
+
[`@media (${BP_TABLET})`]: {
|
|
1977
|
+
height: "28px",
|
|
1978
|
+
width: "28px"
|
|
1979
|
+
},
|
|
1980
|
+
[`@media (${BP_MOBILE})`]: {
|
|
1981
|
+
height: "24px",
|
|
1982
|
+
width: "24px"
|
|
1983
|
+
}
|
|
1944
1984
|
},
|
|
1945
1985
|
textContent: {
|
|
1946
1986
|
display: "flex",
|
|
1947
1987
|
flexDirection: "column",
|
|
1948
1988
|
gap: "4px",
|
|
1949
|
-
|
|
1950
|
-
|
|
1989
|
+
minWidth: 0,
|
|
1990
|
+
width: "100%",
|
|
1991
|
+
// allow ellipsis to work
|
|
1992
|
+
[`@media (${BP_TABLET})`]: {
|
|
1993
|
+
alignItems: "center",
|
|
1994
|
+
gap: "2px"
|
|
1951
1995
|
}
|
|
1952
1996
|
},
|
|
1953
1997
|
label: {
|
|
1954
1998
|
fontSize: reactComponents.tokens.fontSizeBase300,
|
|
1955
1999
|
fontWeight: reactComponents.tokens.fontWeightSemibold,
|
|
1956
|
-
lineHeight: "1.2"
|
|
2000
|
+
lineHeight: "1.2",
|
|
2001
|
+
[`@media (${BP_TABLET})`]: {
|
|
2002
|
+
fontSize: reactComponents.tokens.fontSizeBase200,
|
|
2003
|
+
whiteSpace: "nowrap",
|
|
2004
|
+
overflow: "hidden",
|
|
2005
|
+
textOverflow: "ellipsis",
|
|
2006
|
+
width: "100%",
|
|
2007
|
+
textAlign: "center"
|
|
2008
|
+
},
|
|
2009
|
+
[`@media (${BP_MOBILE})`]: {
|
|
2010
|
+
fontSize: reactComponents.tokens.fontSizeBase100
|
|
2011
|
+
}
|
|
1957
2012
|
},
|
|
1958
2013
|
description: {
|
|
1959
2014
|
fontSize: reactComponents.tokens.fontSizeBase200,
|
|
1960
2015
|
fontWeight: reactComponents.tokens.fontWeightRegular,
|
|
1961
2016
|
color: reactComponents.tokens.colorNeutralForeground2,
|
|
1962
|
-
//
|
|
2017
|
+
// 2-line clamp on desktop
|
|
1963
2018
|
display: "-webkit-box",
|
|
1964
2019
|
WebkitLineClamp: 2,
|
|
1965
2020
|
WebkitBoxOrient: "vertical",
|
|
1966
2021
|
overflow: "hidden",
|
|
1967
2022
|
textOverflow: "ellipsis",
|
|
1968
2023
|
lineHeight: "1.4",
|
|
1969
|
-
|
|
2024
|
+
// Tablet: 1-line clamp, compact
|
|
2025
|
+
[`@media (${BP_TABLET})`]: {
|
|
1970
2026
|
fontSize: reactComponents.tokens.fontSizeBase100,
|
|
1971
|
-
|
|
2027
|
+
WebkitLineClamp: 1,
|
|
2028
|
+
whiteSpace: "nowrap",
|
|
2029
|
+
width: "100%",
|
|
2030
|
+
textAlign: "center"
|
|
2031
|
+
},
|
|
2032
|
+
// Mobile: hide description entirely
|
|
2033
|
+
[`@media (${BP_MOBILE})`]: {
|
|
2034
|
+
display: "none"
|
|
1972
2035
|
}
|
|
1973
2036
|
},
|
|
2037
|
+
// Dividers
|
|
1974
2038
|
dividerVertical: {
|
|
1975
|
-
|
|
2039
|
+
// Only visible on tablet (horizontal layout)
|
|
2040
|
+
[`@media (min-width: ${extendedTokens.breakpointXl})`]: {
|
|
2041
|
+
display: "none"
|
|
2042
|
+
},
|
|
2043
|
+
[`@media (${BP_MOBILE})`]: {
|
|
1976
2044
|
display: "none"
|
|
1977
2045
|
}
|
|
1978
2046
|
},
|
|
1979
2047
|
dividerHorizontal: {
|
|
1980
|
-
|
|
2048
|
+
// Only visible on desktop (vertical layout)
|
|
2049
|
+
[`@media (${BP_TABLET})`]: {
|
|
1981
2050
|
display: "none"
|
|
1982
2051
|
}
|
|
1983
2052
|
}
|
|
@@ -2006,14 +2075,14 @@ var CardServiceMenu = ({
|
|
|
2006
2075
|
onClick: () => onServiceClick?.(item.id),
|
|
2007
2076
|
"aria-label": item.name,
|
|
2008
2077
|
children: [
|
|
2009
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2078
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2010
2079
|
"img",
|
|
2011
2080
|
{
|
|
2012
2081
|
src: item.imageUrl,
|
|
2013
2082
|
alt: item.name,
|
|
2014
2083
|
className: styles.logo
|
|
2015
2084
|
}
|
|
2016
|
-
),
|
|
2085
|
+
) }),
|
|
2017
2086
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContent, children: [
|
|
2018
2087
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.label, children: item.name }),
|
|
2019
2088
|
showDescriptions && /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -2034,13 +2103,16 @@ var CardServiceMenu = ({
|
|
|
2034
2103
|
] }, item.id);
|
|
2035
2104
|
}) }) });
|
|
2036
2105
|
};
|
|
2037
|
-
|
|
2106
|
+
var MenuItemDescription = ({ description, className }) => {
|
|
2038
2107
|
const ref = React.useRef(null);
|
|
2039
2108
|
const [isClamped, setIsClamped] = React.useState(false);
|
|
2109
|
+
const [tooltipVisible, setTooltipVisible] = React.useState(false);
|
|
2040
2110
|
React.useEffect(() => {
|
|
2041
2111
|
const el = ref.current;
|
|
2042
2112
|
if (!el) return;
|
|
2043
|
-
const check = () => setIsClamped(
|
|
2113
|
+
const check = () => setIsClamped(
|
|
2114
|
+
el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
|
|
2115
|
+
);
|
|
2044
2116
|
const timer = setTimeout(check, 0);
|
|
2045
2117
|
const observer = new ResizeObserver(check);
|
|
2046
2118
|
observer.observe(el);
|
|
@@ -2048,25 +2120,29 @@ function useIsClamped(deps) {
|
|
|
2048
2120
|
clearTimeout(timer);
|
|
2049
2121
|
observer.disconnect();
|
|
2050
2122
|
};
|
|
2051
|
-
},
|
|
2052
|
-
return
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2123
|
+
}, [description]);
|
|
2124
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2125
|
+
reactComponents.Tooltip,
|
|
2126
|
+
{
|
|
2127
|
+
appearance: "inverted",
|
|
2128
|
+
content: description,
|
|
2129
|
+
relationship: "description",
|
|
2130
|
+
positioning: "after",
|
|
2131
|
+
visible: tooltipVisible,
|
|
2132
|
+
onVisibleChange: (_, data) => setTooltipVisible(isClamped && data.visible),
|
|
2133
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2134
|
+
"span",
|
|
2135
|
+
{
|
|
2136
|
+
ref,
|
|
2137
|
+
className,
|
|
2138
|
+
style: { pointerEvents: "auto" },
|
|
2139
|
+
onMouseEnter: () => isClamped && setTooltipVisible(true),
|
|
2140
|
+
onMouseLeave: () => setTooltipVisible(false),
|
|
2141
|
+
children: description
|
|
2142
|
+
}
|
|
2143
|
+
)
|
|
2144
|
+
}
|
|
2145
|
+
);
|
|
2070
2146
|
};
|
|
2071
2147
|
var DatePickerInput = React.forwardRef(
|
|
2072
2148
|
({
|
|
@@ -2584,6 +2660,7 @@ var InputDynamic = ({
|
|
|
2584
2660
|
appearance = "outline",
|
|
2585
2661
|
validationRules,
|
|
2586
2662
|
helperText,
|
|
2663
|
+
helperIcon,
|
|
2587
2664
|
className,
|
|
2588
2665
|
layout,
|
|
2589
2666
|
size = "large",
|
|
@@ -3504,7 +3581,7 @@ var InputDynamic = ({
|
|
|
3504
3581
|
if (!stringValue) return true;
|
|
3505
3582
|
const detectedType = detectEmailOrPhoneStrict(stringValue);
|
|
3506
3583
|
if (detectedType === "email") {
|
|
3507
|
-
if (!/^[
|
|
3584
|
+
if (!/^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$/i.test(stringValue)) {
|
|
3508
3585
|
return "Format email tidak valid";
|
|
3509
3586
|
}
|
|
3510
3587
|
} else if (detectedType === "phone") {
|
|
@@ -3533,7 +3610,7 @@ var InputDynamic = ({
|
|
|
3533
3610
|
if (!stringValue) return true;
|
|
3534
3611
|
const detectedType = detectIdentityType(stringValue);
|
|
3535
3612
|
if (detectedType === "email") {
|
|
3536
|
-
if (!/^[
|
|
3613
|
+
if (!/^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$/i.test(stringValue)) {
|
|
3537
3614
|
return "Format email tidak valid";
|
|
3538
3615
|
}
|
|
3539
3616
|
} else if (detectedType === "phone") {
|
|
@@ -3580,15 +3657,29 @@ var InputDynamic = ({
|
|
|
3580
3657
|
}
|
|
3581
3658
|
),
|
|
3582
3659
|
renderInput(field, error?.message),
|
|
3583
|
-
helperText && !error && /* @__PURE__ */ jsxRuntime.
|
|
3584
|
-
|
|
3585
|
-
|
|
3586
|
-
|
|
3587
|
-
|
|
3588
|
-
|
|
3589
|
-
|
|
3590
|
-
|
|
3591
|
-
|
|
3660
|
+
helperText && !error && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "4px", marginTop: "4px" }, children: [
|
|
3661
|
+
helperIcon && /* @__PURE__ */ jsxRuntime.jsx(
|
|
3662
|
+
react.Icon,
|
|
3663
|
+
{
|
|
3664
|
+
icon: helperIcon,
|
|
3665
|
+
style: {
|
|
3666
|
+
color: reactComponents.tokens.colorNeutralForeground3,
|
|
3667
|
+
flexShrink: 0
|
|
3668
|
+
},
|
|
3669
|
+
width: 16,
|
|
3670
|
+
height: 16
|
|
3671
|
+
}
|
|
3672
|
+
),
|
|
3673
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3674
|
+
reactComponents.Text,
|
|
3675
|
+
{
|
|
3676
|
+
size: 200,
|
|
3677
|
+
style: { textAlign: "left" },
|
|
3678
|
+
className: styles.helperText,
|
|
3679
|
+
children: helperText
|
|
3680
|
+
}
|
|
3681
|
+
)
|
|
3682
|
+
] })
|
|
3592
3683
|
]
|
|
3593
3684
|
}
|
|
3594
3685
|
)
|
|
@@ -13513,6 +13604,185 @@ var CardProfileMenu = ({
|
|
|
13513
13604
|
}
|
|
13514
13605
|
) });
|
|
13515
13606
|
};
|
|
13607
|
+
var BP_TABLET2 = `max-width: ${extendedTokens.breakpointXl}`;
|
|
13608
|
+
var BP_MOBILE2 = `max-width: ${extendedTokens.breakpointMd}`;
|
|
13609
|
+
var useStyles41 = reactComponents.makeStyles({
|
|
13610
|
+
dialogSurface: {
|
|
13611
|
+
maxWidth: "900px",
|
|
13612
|
+
width: "100%"
|
|
13613
|
+
},
|
|
13614
|
+
closeButton: {
|
|
13615
|
+
minWidth: "32px",
|
|
13616
|
+
minHeight: "32px"
|
|
13617
|
+
},
|
|
13618
|
+
content: {
|
|
13619
|
+
paddingTop: "8px",
|
|
13620
|
+
paddingBottom: "16px"
|
|
13621
|
+
},
|
|
13622
|
+
// Horizontal row layout: icon left, text right — same as CardServiceMenu desktop
|
|
13623
|
+
menuItem: {
|
|
13624
|
+
display: "flex",
|
|
13625
|
+
flexDirection: "row",
|
|
13626
|
+
alignItems: "center",
|
|
13627
|
+
justifyContent: "flex-start",
|
|
13628
|
+
padding: "12px 16px",
|
|
13629
|
+
borderRadius: reactComponents.tokens.borderRadiusMedium,
|
|
13630
|
+
cursor: "pointer",
|
|
13631
|
+
textAlign: "left",
|
|
13632
|
+
transition: "background-color 0.2s ease",
|
|
13633
|
+
color: reactComponents.tokens.colorNeutralForeground1,
|
|
13634
|
+
backgroundColor: reactComponents.tokens.colorNeutralBackground1,
|
|
13635
|
+
border: "none",
|
|
13636
|
+
gap: "12px",
|
|
13637
|
+
width: "100%",
|
|
13638
|
+
"&:hover": {
|
|
13639
|
+
backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover
|
|
13640
|
+
},
|
|
13641
|
+
[`@media (${BP_TABLET2})`]: {
|
|
13642
|
+
padding: "10px 10px",
|
|
13643
|
+
gap: "8px"
|
|
13644
|
+
},
|
|
13645
|
+
[`@media (${BP_MOBILE2})`]: {
|
|
13646
|
+
flexDirection: "column",
|
|
13647
|
+
alignItems: "center",
|
|
13648
|
+
textAlign: "center",
|
|
13649
|
+
padding: "8px 6px",
|
|
13650
|
+
gap: "4px"
|
|
13651
|
+
}
|
|
13652
|
+
},
|
|
13653
|
+
logoWrapper: {
|
|
13654
|
+
display: "flex",
|
|
13655
|
+
alignItems: "center",
|
|
13656
|
+
justifyContent: "center",
|
|
13657
|
+
flexShrink: 0
|
|
13658
|
+
},
|
|
13659
|
+
logo: {
|
|
13660
|
+
height: "32px",
|
|
13661
|
+
width: "32px",
|
|
13662
|
+
flexShrink: 0,
|
|
13663
|
+
objectFit: "contain",
|
|
13664
|
+
[`@media (${BP_TABLET2})`]: {
|
|
13665
|
+
height: "28px",
|
|
13666
|
+
width: "28px"
|
|
13667
|
+
},
|
|
13668
|
+
[`@media (${BP_MOBILE2})`]: {
|
|
13669
|
+
height: "24px",
|
|
13670
|
+
width: "24px"
|
|
13671
|
+
}
|
|
13672
|
+
},
|
|
13673
|
+
textContent: {
|
|
13674
|
+
display: "flex",
|
|
13675
|
+
flexDirection: "column",
|
|
13676
|
+
gap: "2px",
|
|
13677
|
+
minWidth: 0,
|
|
13678
|
+
width: "100%",
|
|
13679
|
+
[`@media (${BP_MOBILE2})`]: {
|
|
13680
|
+
alignItems: "center"
|
|
13681
|
+
}
|
|
13682
|
+
},
|
|
13683
|
+
label: {
|
|
13684
|
+
fontSize: reactComponents.tokens.fontSizeBase300,
|
|
13685
|
+
fontWeight: reactComponents.tokens.fontWeightSemibold,
|
|
13686
|
+
lineHeight: "1.2",
|
|
13687
|
+
whiteSpace: "nowrap",
|
|
13688
|
+
overflow: "hidden",
|
|
13689
|
+
textOverflow: "ellipsis",
|
|
13690
|
+
width: "100%",
|
|
13691
|
+
[`@media (${BP_TABLET2})`]: {
|
|
13692
|
+
fontSize: reactComponents.tokens.fontSizeBase200
|
|
13693
|
+
},
|
|
13694
|
+
[`@media (${BP_MOBILE2})`]: {
|
|
13695
|
+
fontSize: reactComponents.tokens.fontSizeBase100,
|
|
13696
|
+
textAlign: "center"
|
|
13697
|
+
}
|
|
13698
|
+
},
|
|
13699
|
+
description: {
|
|
13700
|
+
fontSize: reactComponents.tokens.fontSizeBase200,
|
|
13701
|
+
fontWeight: reactComponents.tokens.fontWeightRegular,
|
|
13702
|
+
color: reactComponents.tokens.colorNeutralForeground2,
|
|
13703
|
+
display: "-webkit-box",
|
|
13704
|
+
WebkitLineClamp: 2,
|
|
13705
|
+
WebkitBoxOrient: "vertical",
|
|
13706
|
+
overflow: "hidden",
|
|
13707
|
+
textOverflow: "ellipsis",
|
|
13708
|
+
lineHeight: "1.4",
|
|
13709
|
+
[`@media (${BP_TABLET2})`]: {
|
|
13710
|
+
fontSize: reactComponents.tokens.fontSizeBase100,
|
|
13711
|
+
WebkitLineClamp: 1
|
|
13712
|
+
},
|
|
13713
|
+
[`@media (${BP_MOBILE2})`]: {
|
|
13714
|
+
display: "none"
|
|
13715
|
+
}
|
|
13716
|
+
}
|
|
13717
|
+
});
|
|
13718
|
+
var ModalListMenuService = ({
|
|
13719
|
+
open = false,
|
|
13720
|
+
onClose = () => {
|
|
13721
|
+
},
|
|
13722
|
+
title = "",
|
|
13723
|
+
menuItems = ALIAS_MENU_ITEMS,
|
|
13724
|
+
onItemClick,
|
|
13725
|
+
showDescriptions = true
|
|
13726
|
+
}) => {
|
|
13727
|
+
const styles = useStyles41();
|
|
13728
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
13729
|
+
reactComponents.Dialog,
|
|
13730
|
+
{
|
|
13731
|
+
open,
|
|
13732
|
+
onOpenChange: (_, data) => {
|
|
13733
|
+
if (!data.open) {
|
|
13734
|
+
onClose();
|
|
13735
|
+
}
|
|
13736
|
+
},
|
|
13737
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
|
|
13738
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13739
|
+
reactComponents.DialogTitle,
|
|
13740
|
+
{
|
|
13741
|
+
action: /* @__PURE__ */ jsxRuntime.jsx(
|
|
13742
|
+
reactComponents.Button,
|
|
13743
|
+
{
|
|
13744
|
+
appearance: "subtle",
|
|
13745
|
+
"aria-label": "close",
|
|
13746
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:dismiss-24-regular" }),
|
|
13747
|
+
onClick: onClose,
|
|
13748
|
+
className: styles.closeButton
|
|
13749
|
+
}
|
|
13750
|
+
),
|
|
13751
|
+
children: title
|
|
13752
|
+
}
|
|
13753
|
+
),
|
|
13754
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { className: styles.content, children: /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { gutterWidth: 0, children: menuItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 6, sm: 6, md: 3, lg: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
13755
|
+
reactComponents.Button,
|
|
13756
|
+
{
|
|
13757
|
+
className: styles.menuItem,
|
|
13758
|
+
onClick: () => onItemClick?.(item),
|
|
13759
|
+
"aria-label": item.name,
|
|
13760
|
+
children: [
|
|
13761
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
13762
|
+
"img",
|
|
13763
|
+
{
|
|
13764
|
+
src: item.imageUrl,
|
|
13765
|
+
alt: item.name,
|
|
13766
|
+
className: styles.logo
|
|
13767
|
+
}
|
|
13768
|
+
) }),
|
|
13769
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContent, children: [
|
|
13770
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.label, children: item.name }),
|
|
13771
|
+
showDescriptions && /* @__PURE__ */ jsxRuntime.jsx(
|
|
13772
|
+
MenuItemDescription,
|
|
13773
|
+
{
|
|
13774
|
+
description: item.description,
|
|
13775
|
+
className: styles.description
|
|
13776
|
+
}
|
|
13777
|
+
)
|
|
13778
|
+
] })
|
|
13779
|
+
]
|
|
13780
|
+
}
|
|
13781
|
+
) }, item.id)) }) })
|
|
13782
|
+
] }) })
|
|
13783
|
+
}
|
|
13784
|
+
);
|
|
13785
|
+
};
|
|
13516
13786
|
|
|
13517
13787
|
exports.API_CONFIG = API_CONFIG;
|
|
13518
13788
|
exports.API_ENDPOINTS = API_ENDPOINTS;
|
|
@@ -13566,6 +13836,7 @@ exports.MY_TICKET_TAB = MY_TICKET_TAB;
|
|
|
13566
13836
|
exports.ModalFilterTicket = ModalFilterTicket;
|
|
13567
13837
|
exports.ModalFilterTicketDefaultLabels = DEFAULT_LABELS16;
|
|
13568
13838
|
exports.ModalIllustration = ModalIllustration;
|
|
13839
|
+
exports.ModalListMenuService = ModalListMenuService;
|
|
13569
13840
|
exports.ModalListPassenger = ModalListPassenger;
|
|
13570
13841
|
exports.ModalPassengerForm = ModalPassengerForm;
|
|
13571
13842
|
exports.ModalPreviewImage = ModalPreviewImage;
|