@roomstay/frontend 2.9.0 → 2.9.1-1

package/dist/src/components/generic/BookingWizard/BookingWizardBottomSheet/BookingWizardBottomSheet.js

@@ -20,15 +20,21 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importDefault(require("react"));
 const react_i18next_1 = require("react-i18next");
 const react_spring_bottom_sheet_1 = require("react-spring-bottom-sheet");
+const ShadowDomContext_1 = require("../../../../contexts/ShadowDomContext/ShadowDomContext");
 const Translation_1 = require("../../../../translations/Translation");
 const BEButton_1 = __importDefault(require("../../BEButton"));
 const BookingWizard_1 = require("../BookingWizard");
 const BookingWizard_module_scss_1 = __importDefault(require("../BookingWizard.module.scss"));
 const BookingWizardContext_1 = require("../BookingWizardContext");
+const ShadowDomBottomSheet_1 = __importDefault(require("./ShadowDomBottomSheet"));
 const BookingWizardBottomSheet = (props) => {
     const { children, className } = props, bottomSheetProps = __rest(props, ["children", "className"]);
     const { style, className: bwClassname } = react_1.default.useContext(BookingWizardContext_1.BookingWizardContext);
+    const { isShadowDom } = (0, ShadowDomContext_1.useShadowDom)();
     const classes = (0, classnames_1.default)('roomstay-booking-container', bwClassname, className);
+    if (isShadowDom) {
+        return (react_1.default.createElement(ShadowDomBottomSheet_1.default, { className: classes, style: style, open: bottomSheetProps.open, onDismiss: bottomSheetProps.onDismiss, header: bottomSheetProps.header, footer: bottomSheetProps.footer, snapPoints: bottomSheetProps.snapPoints, defaultSnap: bottomSheetProps.defaultSnap, blocking: bottomSheetProps.blocking }, children));
+    }
     return (react_1.default.createElement(react_spring_bottom_sheet_1.BottomSheet, Object.assign({ className: classes, style: style }, bottomSheetProps), children));
 };
 const BWBottomSheetFooter = ({ onPrev, onNext, hidePrev = false, preLabel, nextLabel, disabledNext = false }) => {

package/dist/src/components/generic/BookingWizard/BookingWizardBottomSheet/BookingWizardBottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"BookingWizardBottomSheet.js","sourceRoot":"/","sources":["src/components/generic/BookingWizard/BookingWizardBottomSheet/BookingWizardBottomSheet.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,qCAA8C;AAC9C,4DAAoC;AACpC,kDAAyC;AACzC,iDAA+C;AAC/C,yEAA0E;AAE1E,4DAAyD;AAEzD,8DAAsC;AACtC,oDAAuD;AACvD,6FAAkD;AAClD,kEAAiF;AACjF,MAAM,wBAAwB,GAA+B,CAAC,KAAK,EAAE,EAAE;IACnE,MAAM,EAAE,QAAQ,EAAE,SAAS,KAA0B,KAAK,EAA1B,gBAAgB,UAAK,KAAK,EAApD,yBAA4C,CAAQ,CAAC;IAE3D,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,eAAK,CAAC,UAAU,CAAC,2CAAoB,CAAC,CAAC;IAEjF,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,4BAA4B,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;IAEjF,OAAO,CACH,8BAAC,uCAAW,kBAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,IAAM,gBAAgB,GAC9D,QAAQ,CACC,CACjB,CAAC;AACN,CAAC,CAAC;AAWK,MAAM,mBAAmB,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,GAAG,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,GAAG,KAAK,EAA4B,EAAE,EAAE;IAC7I,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uCAAgB,GAAE,CAAC;IACrC,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAC/B,IAAI,KAAK,KAAK,mCAAmB,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEtD,OAAO,CACH,uCAAK,SAAS,EAAE,mCAAM,CAAC,MAAM;QACxB,CAAC,QAAQ,CAAC,CAAC,CAAC,CACT,8BAAC,kBAAQ,IAAC,OAAO,QAAC,MAAM,QAAC,OAAO,QAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAA,oBAAU,EAAC,mCAAM,CAAC,GAAG,EAAE,mCAAM,CAAC,YAAY,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,IACjH,QAAQ,IAAI,CAAC,CAAC,yBAAW,CAAC,UAAU,CAAC,IAAI,CAAC,CACpC,CACd,CAAC,CAAC,CAAC,CACA,0CAAW,CACd;QAED,8BAAC,kBAAQ,IAAC,QAAQ,EAAE,YAAY,EAAE,OAAO,QAAC,OAAO,QAAC,MAAM,QAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAA,oBAAU,EAAC,mCAAM,CAAC,GAAG,EAAE,mCAAM,CAAC,UAAU,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,IACvI,SAAS,IAAI,CAAC,CAAC,yBAAW,CAAC,UAAU,CAAC,IAAI,CAAC,CACrC,CACT,CACT,CAAC;AACN,CAAC,CAAC;AApBW,QAAA,mBAAmB,uBAoB9B;AAEK,MAAM,mBAAmB,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAA6C,EAAE,EAAE;IACjG,MAAM,EAAE,aAAa,EAAE,GAAG,IAAA,uCAAgB,GAAE,CAAC;IAC7C,OAAO,CACH,uCAAK,SAAS,EAAE,mCAAM,CAAC,MAAM;QACzB,uCACI,SAAS,EAAE,IAAA,oBAAU,EAAC;gBAClB,CAAC,mCAAM,CAAC,KAAK,CAAC,EAAE,aAAa;aAChC,CAAC,IAED,KAAK,CACJ;QACN,8BAAC,SAAI,IAAC,IAAI,EAAE,aAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,CAC9C,CACT,CAAC;AACN,CAAC,CAAC;AAdW,QAAA,mBAAmB,uBAc9B;AAEF,kBAAe,wBAAwB,CAAC","sourcesContent":["import { Icon, IconType } from '@roomstay/ui';\nimport classNames from 'classnames';\nimport React, { ReactNode } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { BottomSheet, BottomSheetProps } from 'react-spring-bottom-sheet';\n\nimport { Translation } from '@/translations/Translation';\n\nimport BEButton from '../../BEButton';\nimport { EBookingWizardTheme } from '../BookingWizard';\nimport styles from '../BookingWizard.module.scss';\nimport { BookingWizardContext, useBookingWizard } from '../BookingWizardContext';\nconst BookingWizardBottomSheet: React.FC<BottomSheetProps> = (props) => {\n    const { children, className, ...bottomSheetProps } = props;\n\n    const { style, className: bwClassname } = React.useContext(BookingWizardContext);\n\n    const classes = classNames('roomstay-booking-container', bwClassname, className);\n\n    return (\n        <BottomSheet className={classes} style={style} {...bottomSheetProps}>\n            {children}\n        </BottomSheet>\n    );\n};\n\ninterface BWBottomSheetFooterProps {\n    onPrev?: () => void;\n    onNext?: () => void;\n    hidePrev?: boolean;\n    preLabel?: string; // defaults to \"Back\"\n    nextLabel?: string; // defaults to \"Next\"\n    disabledNext?: boolean;\n}\n\nexport const BWBottomSheetFooter = ({ onPrev, onNext, hidePrev = false, preLabel, nextLabel, disabledNext = false }: BWBottomSheetFooterProps) => {\n    const { theme } = useBookingWizard();\n    const { t } = useTranslation();\n    if (theme !== EBookingWizardTheme.Images) return null;\n\n    return (\n        <div className={styles.footer}>\n            {!hidePrev ? (\n                <BEButton rounded isText primary size=\"small\" className={classNames(styles.btn, styles['btn-cancel'])} onClick={onPrev}>\n                    {preLabel || t(Translation.Navigation.Back)}\n                </BEButton>\n            ) : (\n                <div></div>\n            )}\n\n            <BEButton disabled={disabledNext} rounded primary filled size=\"small\" className={classNames(styles.btn, styles['btn-next'])} onClick={onNext}>\n                {nextLabel || t(Translation.Navigation.Next)}\n            </BEButton>\n        </div>\n    );\n};\n\nexport const BWBottomSheetHeader = ({ title, onClose }: { title: ReactNode; onClose: () => void }) => {\n    const { isImagesTheme } = useBookingWizard();\n    return (\n        <div className={styles.header}>\n            <div\n                className={classNames({\n                    [styles.title]: isImagesTheme,\n                })}\n            >\n                {title}\n            </div>\n            <Icon icon={IconType.Close} onClick={onClose} />\n        </div>\n    );\n};\n\nexport default BookingWizardBottomSheet;\n"]}
+{"version":3,"file":"BookingWizardBottomSheet.js","sourceRoot":"/","sources":["src/components/generic/BookingWizard/BookingWizardBottomSheet/BookingWizardBottomSheet.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Icon, IconType } from '@roomstay/ui';\nimport classNames from 'classnames';\nimport React, { ReactNode } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { BottomSheet, BottomSheetProps } from 'react-spring-bottom-sheet';\n\nimport { useShadowDom } from '@/contexts/ShadowDomContext/ShadowDomContext';\nimport { Translation } from '@/translations/Translation';\n\nimport BEButton from '../../BEButton';\nimport { EBookingWizardTheme } from '../BookingWizard';\nimport styles from '../BookingWizard.module.scss';\nimport { BookingWizardContext, useBookingWizard } from '../BookingWizardContext';\nimport ShadowDomBottomSheet, { ShadowDomBottomSheetProps } from './ShadowDomBottomSheet';\n\nconst BookingWizardBottomSheet: React.FC<BottomSheetProps> = (props) => {\n    const { children, className, ...bottomSheetProps } = props;\n\n    const { style, className: bwClassname } = React.useContext(BookingWizardContext);\n    const { isShadowDom } = useShadowDom();\n\n    const classes = classNames('roomstay-booking-container', bwClassname, className);\n\n    if (isShadowDom) {\n        return (\n            <ShadowDomBottomSheet\n                className={classes}\n                style={style}\n                open={bottomSheetProps.open}\n                onDismiss={bottomSheetProps.onDismiss}\n                header={bottomSheetProps.header}\n                footer={bottomSheetProps.footer}\n                snapPoints={bottomSheetProps.snapPoints as ShadowDomBottomSheetProps['snapPoints']}\n                defaultSnap={bottomSheetProps.defaultSnap as ShadowDomBottomSheetProps['defaultSnap']}\n                blocking={bottomSheetProps.blocking}\n            >\n                {children}\n            </ShadowDomBottomSheet>\n        );\n    }\n\n    return (\n        <BottomSheet className={classes} style={style} {...bottomSheetProps}>\n            {children}\n        </BottomSheet>\n    );\n};\n\ninterface BWBottomSheetFooterProps {\n    onPrev?: () => void;\n    onNext?: () => void;\n    hidePrev?: boolean;\n    preLabel?: string; // defaults to \"Back\"\n    nextLabel?: string; // defaults to \"Next\"\n    disabledNext?: boolean;\n}\n\nexport const BWBottomSheetFooter = ({ onPrev, onNext, hidePrev = false, preLabel, nextLabel, disabledNext = false }: BWBottomSheetFooterProps) => {\n    const { theme } = useBookingWizard();\n    const { t } = useTranslation();\n    if (theme !== EBookingWizardTheme.Images) return null;\n\n    return (\n        <div className={styles.footer}>\n            {!hidePrev ? (\n                <BEButton rounded isText primary size=\"small\" className={classNames(styles.btn, styles['btn-cancel'])} onClick={onPrev}>\n                    {preLabel || t(Translation.Navigation.Back)}\n                </BEButton>\n            ) : (\n                <div></div>\n            )}\n\n            <BEButton disabled={disabledNext} rounded primary filled size=\"small\" className={classNames(styles.btn, styles['btn-next'])} onClick={onNext}>\n                {nextLabel || t(Translation.Navigation.Next)}\n            </BEButton>\n        </div>\n    );\n};\n\nexport const BWBottomSheetHeader = ({ title, onClose }: { title: ReactNode; onClose: () => void }) => {\n    const { isImagesTheme } = useBookingWizard();\n    return (\n        <div className={styles.header}>\n            <div\n                className={classNames({\n                    [styles.title]: isImagesTheme,\n                })}\n            >\n                {title}\n            </div>\n            <Icon icon={IconType.Close} onClick={onClose} />\n        </div>\n    );\n};\n\nexport default BookingWizardBottomSheet;\n"]}

package/dist/src/components/generic/BookingWizard/BookingWizardBottomSheet/ShadowDomBottomSheet.d.ts

@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react';
+export interface ShadowDomBottomSheetProps {
+    open: boolean;
+    children: ReactNode;
+    onDismiss?: () => void;
+    header?: ReactNode | false;
+    footer?: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    snapPoints?: (props: any) => number[] | number;
+    defaultSnap?: number | ((props: any) => number);
+    blocking?: boolean;
+}
+/**
+ * A Shadow DOM-compatible bottom sheet that renders via RoomstayPortal
+ * instead of portaling to document.body (which react-spring-bottom-sheet does).
+ *
+ * Provides slide-up animation, backdrop, dismiss on outside click,
+ * and basic snap point support (min-height vs full-height).
+ */
+declare const ShadowDomBottomSheet: React.FC<ShadowDomBottomSheetProps>;
+export default ShadowDomBottomSheet;

package/dist/src/components/generic/BookingWizard/BookingWizardBottomSheet/ShadowDomBottomSheet.js

@@ -0,0 +1,131 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const Portal_1 = require("../../Portal/Portal");
+/**
+ * A Shadow DOM-compatible bottom sheet that renders via RoomstayPortal
+ * instead of portaling to document.body (which react-spring-bottom-sheet does).
+ *
+ * Provides slide-up animation, backdrop, dismiss on outside click,
+ * and basic snap point support (min-height vs full-height).
+ */
+const ShadowDomBottomSheet = ({ open, children, onDismiss, header, footer, className, style, snapPoints, blocking = true }) => {
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [animating, setAnimating] = (0, react_1.useState)(false);
+    const sheetRef = (0, react_1.useRef)(null);
+    const contentRef = (0, react_1.useRef)(null);
+    // Determine target height from snapPoints
+    const getTargetHeight = (0, react_1.useCallback)(() => {
+        if (!snapPoints)
+            return 'auto';
+        const maxHeight = window.innerHeight;
+        const result = snapPoints({ maxHeight, minHeight: 0 });
+        const points = Array.isArray(result) ? result : [result];
+        const maxSnap = Math.max(...points);
+        if (maxSnap >= maxHeight * 0.9)
+            return '100vh';
+        return 'auto';
+    }, [snapPoints]);
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            setVisible(true);
+            // Trigger animation on next frame
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => setAnimating(true));
+            });
+        }
+        else {
+            setAnimating(false);
+            const timer = setTimeout(() => setVisible(false), 300);
+            return () => clearTimeout(timer);
+        }
+    }, [open]);
+    // Close on Escape
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape')
+                onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [open, onDismiss]);
+    const handleBackdropClick = (0, react_1.useCallback)(() => {
+        if (blocking)
+            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+    }, [blocking, onDismiss]);
+    if (!visible)
+        return null;
+    const targetHeight = getTargetHeight();
+    const isFullHeight = targetHeight === '100vh';
+    return (react_1.default.createElement(Portal_1.RoomstayPortal, { target: document.body },
+        react_1.default.createElement("div", { style: {
+                position: 'fixed',
+                inset: 0,
+                zIndex: 999,
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                opacity: animating ? 1 : 0,
+                transition: 'opacity 300ms ease',
+                pointerEvents: blocking ? 'auto' : 'none',
+            }, onClick: handleBackdropClick }),
+        react_1.default.createElement("div", { ref: sheetRef, className: (0, classnames_1.default)(className), style: Object.assign({ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 1000, backgroundColor: 'white', borderRadius: isFullHeight ? '0' : '16px 16px 0 0', boxShadow: '0 -4px 20px rgba(0, 0, 0, 0.15)', transform: animating ? 'translateY(0)' : 'translateY(100%)', transition: 'transform 300ms cubic-bezier(0.32, 0.72, 0, 1)', maxHeight: isFullHeight ? '100vh' : '85vh', display: 'flex', flexDirection: 'column' }, style) },
+            header !== false && (react_1.default.createElement("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    padding: '8px 0 0',
+                    flexShrink: 0,
+                } },
+                react_1.default.createElement("div", { style: {
+                        width: 36,
+                        height: 4,
+                        borderRadius: 2,
+                        backgroundColor: '#dfe1e5',
+                    } }))),
+            header && header !== false && react_1.default.createElement("div", { style: { flexShrink: 0 } }, header),
+            react_1.default.createElement("div", { ref: contentRef, style: {
+                    flex: 1,
+                    overflowY: 'auto',
+                    WebkitOverflowScrolling: 'touch',
+                } }, children),
+            footer && react_1.default.createElement("div", { style: { flexShrink: 0 } }, footer))));
+};
+exports.default = ShadowDomBottomSheet;
+//# sourceMappingURL=ShadowDomBottomSheet.js.map

package/dist/src/components/generic/BookingWizard/BookingWizardBottomSheet/ShadowDomBottomSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShadowDomBottomSheet.js","sourceRoot":"/","sources":["src/components/generic/BookingWizard/BookingWizardBottomSheet/ShadowDomBottomSheet.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4DAAoC;AACpC,+CAAmF;AAEnF,gDAAqD;AAiBrD;;;;;;GAMG;AACH,MAAM,oBAAoB,GAAwC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,GAAG,IAAI,EAAE,EAAE,EAAE;IAC/J,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEhD,0CAA0C;IAC1C,MAAM,eAAe,GAAG,IAAA,mBAAW,EAAC,GAAW,EAAE;QAC7C,IAAI,CAAC,UAAU;YAAE,OAAO,MAAM,CAAC;QAE/B,MAAM,SAAS,GAAG,MAAM,CAAC,WAAW,CAAC;QACrC,MAAM,MAAM,GAAG,UAAU,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC;QACvD,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QACzD,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC;QAEpC,IAAI,OAAO,IAAI,SAAS,GAAG,GAAG;YAAE,OAAO,OAAO,CAAC;QAC/C,OAAO,MAAM,CAAC;IAClB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,IAAI,EAAE,CAAC;YACP,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,kCAAkC;YAClC,qBAAqB,CAAC,GAAG,EAAE;gBACvB,qBAAqB,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;YACpD,CAAC,CAAC,CAAC;QACP,CAAC;aAAM,CAAC;YACJ,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC;YACvD,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,kBAAkB;IAClB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,MAAM,aAAa,GAAG,CAAC,CAAgB,EAAE,EAAE;YACvC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;gBAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,EAAI,CAAC;QAC1C,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IACxE,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAEtB,MAAM,mBAAmB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACzC,IAAI,QAAQ;YAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,EAAI,CAAC;IAChC,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC;IAE1B,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,MAAM,YAAY,GAAG,YAAY,KAAK,OAAO,CAAC;IAE9C,OAAO,CACH,8BAAC,uBAAc,IAAC,MAAM,EAAE,QAAQ,CAAC,IAAI;QAEjC,uCACI,KAAK,EAAE;gBACH,QAAQ,EAAE,OAAO;gBACjB,KAAK,EAAE,CAAC;gBACR,MAAM,EAAE,GAAG;gBACX,eAAe,EAAE,oBAAoB;gBACrC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC1B,UAAU,EAAE,oBAAoB;gBAChC,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;aAC5C,EACD,OAAO,EAAE,mBAAmB,GAC9B;QAGF,uCACI,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,CAAC,EAChC,KAAK,kBACD,QAAQ,EAAE,OAAO,EACjB,MAAM,EAAE,CAAC,EACT,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,IAAI,EACZ,eAAe,EAAE,OAAO,EACxB,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAClD,SAAS,EAAE,iCAAiC,EAC5C,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,EAC3D,UAAU,EAAE,gDAAgD,EAC5D,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAC1C,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,IACpB,KAAK;YAIX,MAAM,KAAK,KAAK,IAAI,CACjB,uCACI,KAAK,EAAE;oBACH,OAAO,EAAE,MAAM;oBACf,cAAc,EAAE,QAAQ;oBACxB,OAAO,EAAE,SAAS;oBAClB,UAAU,EAAE,CAAC;iBAChB;gBAED,uCACI,KAAK,EAAE;wBACH,KAAK,EAAE,EAAE;wBACT,MAAM,EAAE,CAAC;wBACT,YAAY,EAAE,CAAC;wBACf,eAAe,EAAE,SAAS;qBAC7B,GACH,CACA,CACT;YAGA,MAAM,IAAI,MAAM,KAAK,KAAK,IAAI,uCAAK,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,IAAG,MAAM,CAAO;YAG5E,uCACI,GAAG,EAAE,UAAU,EACf,KAAK,EAAE;oBACH,IAAI,EAAE,CAAC;oBACP,SAAS,EAAE,MAAM;oBACjB,uBAAuB,EAAE,OAAO;iBACnC,IAEA,QAAQ,CACP;YAGL,MAAM,IAAI,uCAAK,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,IAAG,MAAM,CAAO,CACtD,CACO,CACpB,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,oBAAoB,CAAC","sourcesContent":["import classNames from 'classnames';\nimport React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { RoomstayPortal } from '../../Portal/Portal';\n\nexport interface ShadowDomBottomSheetProps {\n    open: boolean;\n    children: ReactNode;\n    onDismiss?: () => void;\n    header?: ReactNode | false;\n    footer?: ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    snapPoints?: (props: any) => number[] | number;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    defaultSnap?: number | ((props: any) => number);\n    blocking?: boolean;\n}\n\n/**\n * A Shadow DOM-compatible bottom sheet that renders via RoomstayPortal\n * instead of portaling to document.body (which react-spring-bottom-sheet does).\n *\n * Provides slide-up animation, backdrop, dismiss on outside click,\n * and basic snap point support (min-height vs full-height).\n */\nconst ShadowDomBottomSheet: React.FC<ShadowDomBottomSheetProps> = ({ open, children, onDismiss, header, footer, className, style, snapPoints, blocking = true }) => {\n    const [visible, setVisible] = useState(false);\n    const [animating, setAnimating] = useState(false);\n    const sheetRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    // Determine target height from snapPoints\n    const getTargetHeight = useCallback((): string => {\n        if (!snapPoints) return 'auto';\n\n        const maxHeight = window.innerHeight;\n        const result = snapPoints({ maxHeight, minHeight: 0 });\n        const points = Array.isArray(result) ? result : [result];\n        const maxSnap = Math.max(...points);\n\n        if (maxSnap >= maxHeight * 0.9) return '100vh';\n        return 'auto';\n    }, [snapPoints]);\n\n    useEffect(() => {\n        if (open) {\n            setVisible(true);\n            // Trigger animation on next frame\n            requestAnimationFrame(() => {\n                requestAnimationFrame(() => setAnimating(true));\n            });\n        } else {\n            setAnimating(false);\n            const timer = setTimeout(() => setVisible(false), 300);\n            return () => clearTimeout(timer);\n        }\n    }, [open]);\n\n    // Close on Escape\n    useEffect(() => {\n        if (!open) return;\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (e.key === 'Escape') onDismiss?.();\n        };\n        document.addEventListener('keydown', handleKeyDown);\n        return () => document.removeEventListener('keydown', handleKeyDown);\n    }, [open, onDismiss]);\n\n    const handleBackdropClick = useCallback(() => {\n        if (blocking) onDismiss?.();\n    }, [blocking, onDismiss]);\n\n    if (!visible) return null;\n\n    const targetHeight = getTargetHeight();\n    const isFullHeight = targetHeight === '100vh';\n\n    return (\n        <RoomstayPortal target={document.body}>\n            {/* Backdrop */}\n            <div\n                style={{\n                    position: 'fixed',\n                    inset: 0,\n                    zIndex: 999,\n                    backgroundColor: 'rgba(0, 0, 0, 0.5)',\n                    opacity: animating ? 1 : 0,\n                    transition: 'opacity 300ms ease',\n                    pointerEvents: blocking ? 'auto' : 'none',\n                }}\n                onClick={handleBackdropClick}\n            />\n\n            {/* Sheet */}\n            <div\n                ref={sheetRef}\n                className={classNames(className)}\n                style={{\n                    position: 'fixed',\n                    bottom: 0,\n                    left: 0,\n                    right: 0,\n                    zIndex: 1000,\n                    backgroundColor: 'white',\n                    borderRadius: isFullHeight ? '0' : '16px 16px 0 0',\n                    boxShadow: '0 -4px 20px rgba(0, 0, 0, 0.15)',\n                    transform: animating ? 'translateY(0)' : 'translateY(100%)',\n                    transition: 'transform 300ms cubic-bezier(0.32, 0.72, 0, 1)',\n                    maxHeight: isFullHeight ? '100vh' : '85vh',\n                    display: 'flex',\n                    flexDirection: 'column',\n                    ...style,\n                }}\n            >\n                {/* Drag handle */}\n                {header !== false && (\n                    <div\n                        style={{\n                            display: 'flex',\n                            justifyContent: 'center',\n                            padding: '8px 0 0',\n                            flexShrink: 0,\n                        }}\n                    >\n                        <div\n                            style={{\n                                width: 36,\n                                height: 4,\n                                borderRadius: 2,\n                                backgroundColor: '#dfe1e5',\n                            }}\n                        />\n                    </div>\n                )}\n\n                {/* Header */}\n                {header && header !== false && <div style={{ flexShrink: 0 }}>{header}</div>}\n\n                {/* Scrollable content */}\n                <div\n                    ref={contentRef}\n                    style={{\n                        flex: 1,\n                        overflowY: 'auto',\n                        WebkitOverflowScrolling: 'touch',\n                    }}\n                >\n                    {children}\n                </div>\n\n                {/* Footer */}\n                {footer && <div style={{ flexShrink: 0 }}>{footer}</div>}\n            </div>\n        </RoomstayPortal>\n    );\n};\n\nexport default ShadowDomBottomSheet;\n"]}

package/dist/src/components/generic/Portal/Portal.js

@@ -6,8 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RoomstayPortal = void 0;
 const react_1 = __importDefault(require("react"));
 const react_dom_1 = require("react-dom");
+const ShadowDomContext_1 = require("../../../contexts/ShadowDomContext/ShadowDomContext");
 const RoomstayPortal = (props) => {
-    return (0, react_dom_1.createPortal)(react_1.default.createElement("div", { className: 'roomstay-booking-container' + (props.preventZIndex ? ' --no-z' : '') }, props.children), props.target);
+    const { isShadowDom, portalTarget } = (0, ShadowDomContext_1.useShadowDom)();
+    // If target is document.body and we're in Shadow DOM, redirect to shadow root container
+    const effectiveTarget = props.target === document.body && isShadowDom ? portalTarget : props.target;
+    return (0, react_dom_1.createPortal)(react_1.default.createElement("div", { className: 'roomstay-booking-container' + (props.preventZIndex ? ' --no-z' : '') }, props.children), effectiveTarget);
 };
 exports.RoomstayPortal = RoomstayPortal;
 //# sourceMappingURL=Portal.js.map

package/dist/src/components/generic/Portal/Portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.js","sourceRoot":"/","sources":["src/components/generic/Portal/Portal.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyC;AACzC,yCAAyC;AASlC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAE,EAAE;IACzD,OAAO,IAAA,wBAAY,EAAC,uCAAK,SAAS,EAAE,4BAA4B,GAAG,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,IAAG,KAAK,CAAC,QAAQ,CAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;AACrJ,CAAC,CAAC;AAFW,QAAA,cAAc,kBAEzB","sourcesContent":["import React, { ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\n\ntype RoomstayPortalProps = {\n    target: HTMLElement;\n    children: ReactNode | ReactNode[];\n\n    preventZIndex?: boolean;\n};\n\nexport const RoomstayPortal = (props: RoomstayPortalProps) => {\n    return createPortal(<div className={'roomstay-booking-container' + (props.preventZIndex ? ' --no-z' : '')}>{props.children}</div>, props.target);\n};\n"]}
+{"version":3,"file":"Portal.js","sourceRoot":"/","sources":["src/components/generic/Portal/Portal.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyC;AACzC,yCAAyC;AAEzC,mFAA4E;AASrE,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAE,EAAE;IACzD,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,IAAA,+BAAY,GAAE,CAAC;IAErD,wFAAwF;IACxF,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,KAAK,QAAQ,CAAC,IAAI,IAAI,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC;IAEpG,OAAO,IAAA,wBAAY,EAAC,uCAAK,SAAS,EAAE,4BAA4B,GAAG,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,IAAG,KAAK,CAAC,QAAQ,CAAO,EAAE,eAAe,CAAC,CAAC;AACxJ,CAAC,CAAC;AAPW,QAAA,cAAc,kBAOzB","sourcesContent":["import React, { ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useShadowDom } from '@/contexts/ShadowDomContext/ShadowDomContext';\n\ntype RoomstayPortalProps = {\n    target: HTMLElement;\n    children: ReactNode | ReactNode[];\n\n    preventZIndex?: boolean;\n};\n\nexport const RoomstayPortal = (props: RoomstayPortalProps) => {\n    const { isShadowDom, portalTarget } = useShadowDom();\n\n    // If target is document.body and we're in Shadow DOM, redirect to shadow root container\n    const effectiveTarget = props.target === document.body && isShadowDom ? portalTarget : props.target;\n\n    return createPortal(<div className={'roomstay-booking-container' + (props.preventZIndex ? ' --no-z' : '')}>{props.children}</div>, effectiveTarget);\n};\n"]}

package/dist/src/components/generic/Select/InputSelect.js

@@ -41,14 +41,15 @@ const react_1 = __importStar(require("react"));
 const Select_1 = require("./Select");
 const TextBox_1 = __importDefault(require("../TextBox"));
 const AutoFocusOnSelect_1 = require("../../../hooks/AutoFocusOnSelect");
+const ObjectHelper_1 = require("../../../util/ObjectHelper");
 const Icon_1 = require("../Icon/Icon");
 const InputSelect_module_scss_1 = __importDefault(require("./InputSelect.module.scss"));
 function InputSelect({ value, onChange, options, keyName, labelName, label, placeholder, required, validationStatus, }) {
     var _a;
     const [container, setContainer] = (0, react_1.useState)(null);
     const innerRef = (0, react_1.useRef)(null);
-    const getOption = (key) => {
-        return options.find((option) => option[keyName] === key);
+    const getOption = (optionValue) => {
+        return options.find((option) => (0, ObjectHelper_1.matchesOptionValue)(option[keyName], optionValue));
     };
     const { onDropdownClosed, onItemSelected, onTriggerClicked, isDropdownOpen } = (0, AutoFocusOnSelect_1.useAutoFocusOnSelect)({
         ref: innerRef.current,

package/dist/src/components/generic/Select/InputSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputSelect.js","sourceRoot":"/","sources":["src/components/generic/Select/InputSelect.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,8BAwDC;AAtED,+CAA8D;AAE9D,+DAAiF;AACjF,2EAAqE;AACrE,iEAAiE;AAEjE,uCAAwC;AACxC,wFAA+C;AAO/C,SAAwB,WAAW,CAA0D,EACzF,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,EACR,gBAAgB,GACkB;;IAClC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAwB,IAAI,CAAC,CAAC;IACxE,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAEhD,MAAM,SAAS,GAAG,CAAC,GAAsB,EAAuB,EAAE;QAC9D,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC;IAC7D,CAAC,CAAC;IAEF,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,EAAE,cAAc,EAAE,GAAG,IAAA,wCAAoB,EAAC;QAChG,GAAG,EAAE,QAAQ,CAAC,OAAO;KACxB,CAAC,CAAC;IAEH,OAAO,CACH;QACI,8BAAC,iBAAO,IACJ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE;gBACR,OAAO,EAAE,gBAAgB;gBACzB,YAAY,EAAE,KAAK;aACtB,EACD,KAAK,EAAE,CAAA,MAAA,SAAS,CAAC,KAAK,CAAC,0CAAG,SAAS,CAAC,KAAI,EAAE,EAC1C,GAAG,EAAE,QAAQ,EACb,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,iCAAM,CAAC,YAAY,CAAC,EAC/B,IAAI,EAAE,eAAQ,CAAC,QAAQ,EACvB,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAC3B,YAAY,EAAC,OAAO,GACtB;QACF,uCAAK,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAI;QACtE,8BAAC,eAAM,IACH,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;gBAChB,cAAc,EAAE,CAAC;gBACjB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,CAAC,CAAC;YACtB,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,cAAc,GACtB,CACH,CACN,CAAC;AACN,CAAC","sourcesContent":["import React, { ReactElement, useRef, useState } from 'react';\n\nimport { Option, Select, SelectProps } from '@/components/generic/Select/Select';\nimport TextBox, { TextBoxProps } from '@/components/generic/TextBox';\nimport { useAutoFocusOnSelect } from '@/hooks/AutoFocusOnSelect';\n\nimport { IconType } from '../Icon/Icon';\nimport styles from './InputSelect.module.scss';\n\ntype IInputSelectProps<TOption extends Option<KeyName>, KeyName extends string> = Pick<SelectProps<TOption, KeyName>, 'value' | 'onChange' | 'keyName' | 'labelName'> &\n    Pick<TextBoxProps, 'label' | 'placeholder' | 'required' | 'validationStatus'> & {\n        options: TOption[];\n    };\n\nexport default function InputSelect<TOption extends Option<KeyName>, KeyName extends string>({\n    value,\n    onChange,\n    options,\n    keyName,\n    labelName,\n    label,\n    placeholder,\n    required,\n    validationStatus,\n}: IInputSelectProps<TOption, KeyName>): ReactElement | null {\n    const [container, setContainer] = useState<HTMLDivElement | null>(null);\n    const innerRef = useRef<HTMLInputElement>(null);\n\n    const getOption = (key?: TOption[KeyName]): TOption | undefined => {\n        return options.find((option) => option[keyName] === key);\n    };\n\n    const { onDropdownClosed, onItemSelected, onTriggerClicked, isDropdownOpen } = useAutoFocusOnSelect({\n        ref: innerRef.current,\n    });\n\n    return (\n        <>\n            <TextBox\n                label={label}\n                inputProps={{\n                    onClick: onTriggerClicked,\n                    autoComplete: 'off',\n                }}\n                value={getOption(value)?.[labelName] || ''}\n                ref={innerRef}\n                placeholder={placeholder}\n                required={required}\n                validationStatus={validationStatus}\n                className={styles['text-input']}\n                icon={IconType.Dropdown}\n                iconProps={{ size: '18px' }}\n                iconPosition=\"right\"\n            />\n            <div ref={setContainer} style={{ width: '100%', display: 'block' }} />\n            <Select<TOption, KeyName>\n                keyName={keyName}\n                labelName={labelName}\n                options={options}\n                target={container}\n                onClose={onDropdownClosed}\n                onChange={(value) => {\n                    onItemSelected();\n                    onChange?.(value);\n                }}\n                value={value}\n                open={isDropdownOpen}\n            />\n        </>\n    );\n}\n"]}
+{"version":3,"file":"InputSelect.js","sourceRoot":"/","sources":["src/components/generic/Select/InputSelect.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,8BAwDC;AAvED,+CAA8D;AAE9D,+DAAiF;AACjF,2EAAqE;AACrE,iEAAiE;AACjE,sDAAyD;AAEzD,uCAAwC;AACxC,wFAA+C;AAO/C,SAAwB,WAAW,CAA0D,EACzF,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,EACR,gBAAgB,GACkB;;IAClC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAwB,IAAI,CAAC,CAAC;IACxE,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAEhD,MAAM,SAAS,GAAG,CAAC,WAA8B,EAAuB,EAAE;QACtE,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,IAAA,iCAAkB,EAAC,MAAM,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC;IACtF,CAAC,CAAC;IAEF,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,EAAE,cAAc,EAAE,GAAG,IAAA,wCAAoB,EAAC;QAChG,GAAG,EAAE,QAAQ,CAAC,OAAO;KACxB,CAAC,CAAC;IAEH,OAAO,CACH;QACI,8BAAC,iBAAO,IACJ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE;gBACR,OAAO,EAAE,gBAAgB;gBACzB,YAAY,EAAE,KAAK;aACtB,EACD,KAAK,EAAE,CAAA,MAAA,SAAS,CAAC,KAAK,CAAC,0CAAG,SAAS,CAAC,KAAI,EAAE,EAC1C,GAAG,EAAE,QAAQ,EACb,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,iCAAM,CAAC,YAAY,CAAC,EAC/B,IAAI,EAAE,eAAQ,CAAC,QAAQ,EACvB,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAC3B,YAAY,EAAC,OAAO,GACtB;QACF,uCAAK,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAI;QACtE,8BAAC,eAAM,IACH,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;gBAChB,cAAc,EAAE,CAAC;gBACjB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,CAAC,CAAC;YACtB,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,cAAc,GACtB,CACH,CACN,CAAC;AACN,CAAC","sourcesContent":["import React, { ReactElement, useRef, useState } from 'react';\n\nimport { Option, Select, SelectProps } from '@/components/generic/Select/Select';\nimport TextBox, { TextBoxProps } from '@/components/generic/TextBox';\nimport { useAutoFocusOnSelect } from '@/hooks/AutoFocusOnSelect';\nimport { matchesOptionValue } from '@/util/ObjectHelper';\n\nimport { IconType } from '../Icon/Icon';\nimport styles from './InputSelect.module.scss';\n\ntype IInputSelectProps<TOption extends Option<KeyName>, KeyName extends string> = Pick<SelectProps<TOption, KeyName>, 'value' | 'onChange' | 'keyName' | 'labelName'> &\n    Pick<TextBoxProps, 'label' | 'placeholder' | 'required' | 'validationStatus'> & {\n        options: TOption[];\n    };\n\nexport default function InputSelect<TOption extends Option<KeyName>, KeyName extends string>({\n    value,\n    onChange,\n    options,\n    keyName,\n    labelName,\n    label,\n    placeholder,\n    required,\n    validationStatus,\n}: IInputSelectProps<TOption, KeyName>): ReactElement | null {\n    const [container, setContainer] = useState<HTMLDivElement | null>(null);\n    const innerRef = useRef<HTMLInputElement>(null);\n\n    const getOption = (optionValue?: TOption[KeyName]): TOption | undefined => {\n        return options.find((option) => matchesOptionValue(option[keyName], optionValue));\n    };\n\n    const { onDropdownClosed, onItemSelected, onTriggerClicked, isDropdownOpen } = useAutoFocusOnSelect({\n        ref: innerRef.current,\n    });\n\n    return (\n        <>\n            <TextBox\n                label={label}\n                inputProps={{\n                    onClick: onTriggerClicked,\n                    autoComplete: 'off',\n                }}\n                value={getOption(value)?.[labelName] || ''}\n                ref={innerRef}\n                placeholder={placeholder}\n                required={required}\n                validationStatus={validationStatus}\n                className={styles['text-input']}\n                icon={IconType.Dropdown}\n                iconProps={{ size: '18px' }}\n                iconPosition=\"right\"\n            />\n            <div ref={setContainer} style={{ width: '100%', display: 'block' }} />\n            <Select<TOption, KeyName>\n                keyName={keyName}\n                labelName={labelName}\n                options={options}\n                target={container}\n                onClose={onDropdownClosed}\n                onChange={(value) => {\n                    onItemSelected();\n                    onChange?.(value);\n                }}\n                value={value}\n                open={isDropdownOpen}\n            />\n        </>\n    );\n}\n"]}

package/dist/src/components/generic/Select/Select.js

@@ -46,6 +46,7 @@ const CombineState_1 = require("../../../hooks/CombineState");
 const KeyboardControlOnSelect_1 = require("../../../hooks/KeyboardControlOnSelect");
 const WindowSize_1 = require("../../../hooks/WindowSize");
 const Color_1 = require("../../../util/Color");
+const ObjectHelper_1 = require("../../../util/ObjectHelper");
 const Icon_1 = __importStar(require("../Icon/Icon"));
 const MOBILE_BREAKPOINT = 992;
 const InnerSelect = ({ target, open, onClose, options = [], value, onChange, keyName, labelName, className, offset, renderOption, nativeOnMobile = false, overlay, renderLabel, hideExpandIcon, inputLabelColor, disableNative, renderNoOptions, }, ref) => {
@@ -78,14 +79,13 @@ const InnerSelect = ({ target, open, onClose, options = [], value, onChange, key
         for (const option of options) {
             if (option.options && Array.isArray(option.options)) {
                 for (const childOption of option.options) {
-                    if (childOption[keyName] === value) {
+                    if ((0, ObjectHelper_1.matchesOptionValue)(childOption[keyName], value)) {
                         return childOption;
                     }
                 }
             }
             else {
-                // If we're in here it means that this option doesn't have children and is in fact an individual group
-                if (option[keyName] === value) {
+                if ((0, ObjectHelper_1.matchesOptionValue)(option[keyName], value)) {
                     return option;
                 }
             }
@@ -130,8 +130,8 @@ const InnerSelect = ({ target, open, onClose, options = [], value, onChange, key
             _renderOptions(options)));
     };
     const _renderOption = ({ option, key }) => {
-        const isSelected = option[keyName] === value;
-        const isSelecting = option[keyName] === (selectingItem === null || selectingItem === void 0 ? void 0 : selectingItem[keyName]);
+        const isSelected = (0, ObjectHelper_1.matchesOptionValue)(option[keyName], value);
+        const isSelecting = (0, ObjectHelper_1.matchesOptionValue)(option[keyName], selectingItem === null || selectingItem === void 0 ? void 0 : selectingItem[keyName]);
         return (react_1.default.createElement("div", { ref: (ref) => (optionRefs.current[option[keyName]] = ref), key: key, className: (0, classnames_1.default)('rs-select--suggest-list-item', { '--selected': isSelected || isSelecting }), onClick: () => _onSelected(option[keyName]), onMouseEnter: () => {
                 onItemMouseEnter(option);
             }, onMouseLeave: () => onItemMouseLeave(), onMouseMove: () => onItemMouseMove() },

package/dist/src/components/generic/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"/","sources":["src/components/generic/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import './Select.global.scss';\n\nimport classNames from 'classnames';\nimport React, { forwardRef, ReactElement, ReactNode, Ref, useImperativeHandle, useMemo, useRef } from 'react';\n\nimport { Overlay, OverlayProps } from '@/components/generic/Overlay/Overlay';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { useCombinedState } from '@/hooks/CombineState';\nimport { useKeyboardControlOnSelect } from '@/hooks/KeyboardControlOnSelect';\nimport { useWindowSize } from '@/hooks/WindowSize';\nimport { Color } from '@/util/Color';\n\nimport Icon, { IconType } from '../Icon/Icon';\n\nexport type Option<KeyName extends string> = {\n    [keyName in KeyName]: string;\n} & Record<any, any> & { options?: Option<KeyName>[] };\n\nexport type TOptionGroup<T> = {\n    name: string;\n    options: T[];\n};\n\nexport type TSelectOptionKey<T> = TOptionGroup<T> | T;\n\nexport type SelectProps<TOption extends Option<KeyName>, KeyName extends string> = {\n    options: TSelectOptionKey<TOption>[];\n    keyName: KeyName;\n\n    value?: TOption[KeyName];\n    labelName?: TOption[keyof TOption];\n    target?: HTMLElement | null;\n    open?: boolean;\n    onClose?: (e: Event) => void;\n    onChange?: (value: TOption[KeyName]) => void;\n    className?: string;\n    offset?: [number, number];\n    renderOption?: (option?: TOption) => ReactElement | null;\n    renderLabel?: (option?: TOption | null) => ReactElement | null;\n    nativeOnMobile?: boolean;\n    overlay?: Partial<Omit<OverlayProps, 'children' | 'open' | 'container' | 'followElement' | 'onClose' | 'overlayRef'>>;\n    hideExpandIcon?: boolean;\n\n    inputLabelColor?: Color;\n    disableNative?: boolean;\n    renderNoOptions?: (targetRef: React.RefObject<HTMLSpanElement>) => ReactElement | null;\n};\n\nconst MOBILE_BREAKPOINT = 992;\n\nexport const InnerSelect = <TOption extends Option<KeyName>, KeyName extends string>(\n    {\n        target,\n        open,\n        onClose,\n        options = [],\n        value,\n        onChange,\n        keyName,\n        labelName,\n        className,\n        offset,\n        renderOption,\n        nativeOnMobile = false,\n        overlay,\n        renderLabel,\n        hideExpandIcon,\n        inputLabelColor,\n        disableNative,\n        renderNoOptions,\n    }: SelectProps<TOption, KeyName>,\n    ref: Ref<HTMLDivElement | null>\n) => {\n    const { width } = useWindowSize();\n    const targetRef = useRef<HTMLSpanElement>(null);\n    const optionRefs = useRef<{ [id: string]: HTMLDivElement | null }>({});\n    const optionContainerRef = useRef<HTMLDivElement | null>(null);\n    const [_open, _setIsOpen] = useCombinedState<boolean>(open, false);\n    const flattenOptions = useMemo<TOption[]>(() => {\n        return options.reduce<TOption[]>((result, optionGroupProbably) => {\n            if (optionGroupProbably.options) return result.concat(optionGroupProbably.options);\n            return result.concat(optionGroupProbably as TOption);\n        }, []);\n    }, [options]);\n\n    // TODO: Force to fix later\n    nativeOnMobile = false;\n\n    const _onClose = (e: Event): void => {\n        _setIsOpen(false);\n        onClose?.(e);\n    };\n\n    const overlayRef = useRef<HTMLDivElement | null>(null);\n    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => overlayRef.current);\n\n    const _onSelected = (value: TOption[KeyName]) => {\n        onChange?.(value);\n        _setIsOpen(false);\n    };\n\n    const _getOption = (value?: TOption[KeyName]): TOption | undefined => {\n        for (const option of options) {\n            if (option.options && Array.isArray(option.options)) {\n                for (const childOption of option.options) {\n                    if (childOption[keyName] === value) {\n                        return childOption;\n                    }\n                }\n            } else {\n                // If we're in here it means that this option doesn't have children and is in fact an individual group\n                if ((option as TOption)[keyName] === value) {\n                    return option as TOption;\n                }\n            }\n        }\n    };\n\n    const { selectingItem, onItemMouseMove, onItemMouseLeave, onItemMouseEnter } = useKeyboardControlOnSelect<TOption, KeyName>({\n        onSelected: (item) => _onSelected(item[keyName]),\n        isEnabled: !!_open,\n        options,\n        idName: keyName,\n        overlayRef: overlayRef.current,\n        defaultOption: _getOption(value),\n        optionRefs,\n        optionContainerRef,\n    });\n\n    const _getStringLabel = (value?: TOption[KeyName]): string => {\n        const option = _getOption(value);\n        return option?.[labelName] || value || '';\n    };\n\n    const _getLabel = (value?: TOption[KeyName]): string | ReactNode => {\n        const option = _getOption(value);\n\n        if (renderLabel) {\n            return renderLabel(option);\n        }\n\n        return _getStringLabel(value);\n    };\n\n    const _renderOptions = (options?: TSelectOptionKey<TOption>[]): ReactElement | JSX.Element[] | null => {\n        if (!options) return null;\n        return options.map((option, index) => {\n            const isGroup = option.options;\n\n            if (isGroup) {\n                return _renderGroup(option.name, option.options);\n            }\n\n            return _renderOption({ option: option as TOption, key: index });\n        });\n    };\n\n    const _renderGroup = (name: string, options?: TSelectOptionKey<TOption>[]) => {\n        return (\n            <>\n                <div className=\"rs-select--suggest-list-item --group-title\">\n                    <Text type={TextType.Small} color={Color.DarkGrey}>\n                        {name}\n                    </Text>\n                </div>\n                {_renderOptions(options)}\n            </>\n        );\n    };\n\n    const _renderOption = ({ option, key }: { option: TOption; key: any }) => {\n        const isSelected = option[keyName] === value;\n        const isSelecting = option[keyName] === selectingItem?.[keyName];\n\n        return (\n            <div\n                ref={(ref) => (optionRefs.current[option[keyName]] = ref)}\n                key={key}\n                className={classNames('rs-select--suggest-list-item', { '--selected': isSelected || isSelecting })}\n                onClick={() => _onSelected(option[keyName])}\n                onMouseEnter={() => {\n                    onItemMouseEnter(option);\n                }}\n                onMouseLeave={() => onItemMouseLeave()}\n                onMouseMove={() => onItemMouseMove()}\n            >\n                <Text type={TextType.Small} className=\"rs-select--suggest-list-option-name\">\n                    {renderOption ? renderOption(option) : labelName ? option[labelName] : ''}\n                </Text>\n                {isSelected && (\n                    <span className=\"rs-select--suggest-list-option-icon\">\n                        <Icon icon={IconType.Check} />\n                    </span>\n                )}\n            </div>\n        );\n    };\n\n    const native = width && width < MOBILE_BREAKPOINT && nativeOnMobile;\n\n    const labelProps: any = {};\n\n    if (inputLabelColor) {\n        labelProps.style = { color: inputLabelColor };\n    }\n\n    return (\n        <>\n            {(native || !target || disableNative) && (\n                <span className={classNames('be-select', className)} onClick={() => _setIsOpen(true)} ref={targetRef} {...labelProps}>\n                    {native ? (\n                        <select value={value} onChange={(e) => onChange?.(e.target.value as TOption[KeyName])}>\n                            {flattenOptions.map((item) => {\n                                return <option value={value} key={item[keyName]} label={_getStringLabel(item[keyName])}></option>;\n                            })}\n                        </select>\n                    ) : (\n                        _getLabel(value)\n                    )}\n                    {hideExpandIcon ? null : <Icon icon={IconType.Dropdown} color={Color.DarkGrey} />}\n                </span>\n            )}\n            {!native && (\n                <Overlay\n                    offset={offset}\n                    usePortal={overlay?.usePortal ?? true}\n                    followElement={target || targetRef.current || undefined}\n                    placement={overlay?.placement ?? 'bottom-start'}\n                    strategy={overlay?.strategy}\n                    open={open === undefined ? !!_open : open}\n                    onClose={_onClose}\n                    containerClassName={overlay?.containerClassName}\n                    overlayRef={overlayRef}\n                    hideStyles={overlay?.hideStyles}\n                >\n                    <div ref={optionContainerRef} className={classNames('rs-select--suggest-list', overlay?.className)}>\n                        {options.length ? _renderOptions(options) : <div className=\"rs-select--suggest-list-item\">{renderNoOptions?.(targetRef)}</div>}\n                    </div>\n                </Overlay>\n            )}\n        </>\n    );\n};\n\nexport const Select = forwardRef(InnerSelect) as <TOption extends Option<KeyName>, KeyName extends string>(\n    p: SelectProps<TOption, KeyName> & { ref?: Ref<HTMLDivElement> }\n) => JSX.Element;\n\nexport interface IDefaultSelectOption {\n    value: string;\n    text: string;\n}\n"]}
+{"version":3,"file":"Select.js","sourceRoot":"/","sources":["src/components/generic/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import './Select.global.scss';\n\nimport classNames from 'classnames';\nimport React, { forwardRef, ReactElement, ReactNode, Ref, useImperativeHandle, useMemo, useRef } from 'react';\n\nimport { Overlay, OverlayProps } from '@/components/generic/Overlay/Overlay';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { useCombinedState } from '@/hooks/CombineState';\nimport { useKeyboardControlOnSelect } from '@/hooks/KeyboardControlOnSelect';\nimport { useWindowSize } from '@/hooks/WindowSize';\nimport { Color } from '@/util/Color';\nimport { matchesOptionValue } from '@/util/ObjectHelper';\n\nimport Icon, { IconType } from '../Icon/Icon';\n\nexport type Option<KeyName extends string> = {\n    [keyName in KeyName]: string;\n} & Record<any, any> & { options?: Option<KeyName>[] };\n\nexport type TOptionGroup<T> = {\n    name: string;\n    options: T[];\n};\n\nexport type TSelectOptionKey<T> = TOptionGroup<T> | T;\n\nexport type SelectProps<TOption extends Option<KeyName>, KeyName extends string> = {\n    options: TSelectOptionKey<TOption>[];\n    keyName: KeyName;\n\n    value?: TOption[KeyName];\n    labelName?: TOption[keyof TOption];\n    target?: HTMLElement | null;\n    open?: boolean;\n    onClose?: (e: Event) => void;\n    onChange?: (value: TOption[KeyName]) => void;\n    className?: string;\n    offset?: [number, number];\n    renderOption?: (option?: TOption) => ReactElement | null;\n    renderLabel?: (option?: TOption | null) => ReactElement | null;\n    nativeOnMobile?: boolean;\n    overlay?: Partial<Omit<OverlayProps, 'children' | 'open' | 'container' | 'followElement' | 'onClose' | 'overlayRef'>>;\n    hideExpandIcon?: boolean;\n\n    inputLabelColor?: Color;\n    disableNative?: boolean;\n    renderNoOptions?: (targetRef: React.RefObject<HTMLSpanElement>) => ReactElement | null;\n};\n\nconst MOBILE_BREAKPOINT = 992;\n\nexport const InnerSelect = <TOption extends Option<KeyName>, KeyName extends string>(\n    {\n        target,\n        open,\n        onClose,\n        options = [],\n        value,\n        onChange,\n        keyName,\n        labelName,\n        className,\n        offset,\n        renderOption,\n        nativeOnMobile = false,\n        overlay,\n        renderLabel,\n        hideExpandIcon,\n        inputLabelColor,\n        disableNative,\n        renderNoOptions,\n    }: SelectProps<TOption, KeyName>,\n    ref: Ref<HTMLDivElement | null>\n) => {\n    const { width } = useWindowSize();\n    const targetRef = useRef<HTMLSpanElement>(null);\n    const optionRefs = useRef<{ [id: string]: HTMLDivElement | null }>({});\n    const optionContainerRef = useRef<HTMLDivElement | null>(null);\n    const [_open, _setIsOpen] = useCombinedState<boolean>(open, false);\n    const flattenOptions = useMemo<TOption[]>(() => {\n        return options.reduce<TOption[]>((result, optionGroupProbably) => {\n            if (optionGroupProbably.options) return result.concat(optionGroupProbably.options);\n            return result.concat(optionGroupProbably as TOption);\n        }, []);\n    }, [options]);\n\n    // TODO: Force to fix later\n    nativeOnMobile = false;\n\n    const _onClose = (e: Event): void => {\n        _setIsOpen(false);\n        onClose?.(e);\n    };\n\n    const overlayRef = useRef<HTMLDivElement | null>(null);\n    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => overlayRef.current);\n\n    const _onSelected = (value: TOption[KeyName]) => {\n        onChange?.(value);\n        _setIsOpen(false);\n    };\n\n    const _getOption = (value?: TOption[KeyName]): TOption | undefined => {\n        for (const option of options) {\n            if (option.options && Array.isArray(option.options)) {\n                for (const childOption of option.options) {\n                    if (matchesOptionValue(childOption[keyName], value)) {\n                        return childOption;\n                    }\n                }\n            } else {\n                if (matchesOptionValue((option as TOption)[keyName], value)) {\n                    return option as TOption;\n                }\n            }\n        }\n    };\n\n    const { selectingItem, onItemMouseMove, onItemMouseLeave, onItemMouseEnter } = useKeyboardControlOnSelect<TOption, KeyName>({\n        onSelected: (item) => _onSelected(item[keyName]),\n        isEnabled: !!_open,\n        options,\n        idName: keyName,\n        overlayRef: overlayRef.current,\n        defaultOption: _getOption(value),\n        optionRefs,\n        optionContainerRef,\n    });\n\n    const _getStringLabel = (value?: TOption[KeyName]): string => {\n        const option = _getOption(value);\n        return option?.[labelName] || value || '';\n    };\n\n    const _getLabel = (value?: TOption[KeyName]): string | ReactNode => {\n        const option = _getOption(value);\n\n        if (renderLabel) {\n            return renderLabel(option);\n        }\n\n        return _getStringLabel(value);\n    };\n\n    const _renderOptions = (options?: TSelectOptionKey<TOption>[]): ReactElement | JSX.Element[] | null => {\n        if (!options) return null;\n        return options.map((option, index) => {\n            const isGroup = option.options;\n\n            if (isGroup) {\n                return _renderGroup(option.name, option.options);\n            }\n\n            return _renderOption({ option: option as TOption, key: index });\n        });\n    };\n\n    const _renderGroup = (name: string, options?: TSelectOptionKey<TOption>[]) => {\n        return (\n            <>\n                <div className=\"rs-select--suggest-list-item --group-title\">\n                    <Text type={TextType.Small} color={Color.DarkGrey}>\n                        {name}\n                    </Text>\n                </div>\n                {_renderOptions(options)}\n            </>\n        );\n    };\n\n    const _renderOption = ({ option, key }: { option: TOption; key: any }) => {\n        const isSelected = matchesOptionValue(option[keyName], value);\n        const isSelecting = matchesOptionValue(option[keyName], selectingItem?.[keyName]);\n\n        return (\n            <div\n                ref={(ref) => (optionRefs.current[option[keyName]] = ref)}\n                key={key}\n                className={classNames('rs-select--suggest-list-item', { '--selected': isSelected || isSelecting })}\n                onClick={() => _onSelected(option[keyName])}\n                onMouseEnter={() => {\n                    onItemMouseEnter(option);\n                }}\n                onMouseLeave={() => onItemMouseLeave()}\n                onMouseMove={() => onItemMouseMove()}\n            >\n                <Text type={TextType.Small} className=\"rs-select--suggest-list-option-name\">\n                    {renderOption ? renderOption(option) : labelName ? option[labelName] : ''}\n                </Text>\n                {isSelected && (\n                    <span className=\"rs-select--suggest-list-option-icon\">\n                        <Icon icon={IconType.Check} />\n                    </span>\n                )}\n            </div>\n        );\n    };\n\n    const native = width && width < MOBILE_BREAKPOINT && nativeOnMobile;\n\n    const labelProps: any = {};\n\n    if (inputLabelColor) {\n        labelProps.style = { color: inputLabelColor };\n    }\n\n    return (\n        <>\n            {(native || !target || disableNative) && (\n                <span className={classNames('be-select', className)} onClick={() => _setIsOpen(true)} ref={targetRef} {...labelProps}>\n                    {native ? (\n                        <select value={value} onChange={(e) => onChange?.(e.target.value as TOption[KeyName])}>\n                            {flattenOptions.map((item) => {\n                                return <option value={value} key={item[keyName]} label={_getStringLabel(item[keyName])}></option>;\n                            })}\n                        </select>\n                    ) : (\n                        _getLabel(value)\n                    )}\n                    {hideExpandIcon ? null : <Icon icon={IconType.Dropdown} color={Color.DarkGrey} />}\n                </span>\n            )}\n            {!native && (\n                <Overlay\n                    offset={offset}\n                    usePortal={overlay?.usePortal ?? true}\n                    followElement={target || targetRef.current || undefined}\n                    placement={overlay?.placement ?? 'bottom-start'}\n                    strategy={overlay?.strategy}\n                    open={open === undefined ? !!_open : open}\n                    onClose={_onClose}\n                    containerClassName={overlay?.containerClassName}\n                    overlayRef={overlayRef}\n                    hideStyles={overlay?.hideStyles}\n                >\n                    <div ref={optionContainerRef} className={classNames('rs-select--suggest-list', overlay?.className)}>\n                        {options.length ? _renderOptions(options) : <div className=\"rs-select--suggest-list-item\">{renderNoOptions?.(targetRef)}</div>}\n                    </div>\n                </Overlay>\n            )}\n        </>\n    );\n};\n\nexport const Select = forwardRef(InnerSelect) as <TOption extends Option<KeyName>, KeyName extends string>(\n    p: SelectProps<TOption, KeyName> & { ref?: Ref<HTMLDivElement> }\n) => JSX.Element;\n\nexport interface IDefaultSelectOption {\n    value: string;\n    text: string;\n}\n"]}

package/dist/src/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField.d.ts

@@ -1,11 +1,11 @@
 import './EnhancedPhoneNumberField.global.scss';
 import React, { ChangeEvent, PropsWithChildren } from 'react';
-export interface EnhancedPhoneNumberField extends PropsWithChildren<any> {
+export interface EnhancedPhoneNumberFieldProps extends PropsWithChildren<any> {
     validationStatus?: 'success' | 'error';
     name?: string;
     value?: string;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     disabled?: boolean;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<EnhancedPhoneNumberField>, keyof EnhancedPhoneNumberField> & React.RefAttributes<HTMLInputElement>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<EnhancedPhoneNumberFieldProps>, keyof EnhancedPhoneNumberFieldProps> & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/dist/src/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnhancedPhoneNumberField.js","sourceRoot":"/","sources":["src/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAAgD;AAEhD,2CAAkD;AAClD,4DAAoC;AACpC,+CAAwI;AACxI,iDAA+C;AAC/C,0DAAuD;AAEvD,uEAAgE;AAChE,iEAAiE;AACjE,4EAAiH;AAEjH,gDAA6C;AAU7C,MAAM,sBAAsB,GAAG,GAAG,CAAC;AAEnC,MAAM,wBAAwB,GAAyE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAClH,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IACpC,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAChD,IAAA,2BAAmB,EAAmD,GAAG,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACnG,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,IAAA,wCAAoB,EAAC;QAC3G,GAAG,EAAE,QAAQ,CAAC,OAAO;QACrB,0BAA0B,EAAE,IAAI;QAChC,kBAAkB,EAAE,IAAI;KAC3B,CAAC,CAAC;IAEH,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,MAAM,kBAAkB,GAAkB,IAAA,eAAO,EAAC,GAAG,EAAE;QACnD,OAAO,gDAAuB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACzC,OAAO,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;QAC9G,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,gDAAuB,CAAC,CAAC,CAAC;IAE9B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAwB,IAAI,CAAC,CAAC;IAExE,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAE1D,MAAM,CAAC,eAAe,EAAE,cAAc,CAAC,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;;QACnD,MAAM,kBAAkB,GAAG,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,KAAI,kBAAkB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QAC7E,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,sBAAsB,CAAC,mCAAI,EAAE,CAAC;QACpE,MAAM,UAAU,GAAG,MAAM,IAAI,kBAAkB,CAAC;QAEhD,MAAM,eAAe,GAAG,MAAA,kBAAkB,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,KAAK,UAAU,CAAC,mCAAI,kBAAkB,CAAC,CAAC,CAAC,CAAC;QAE9G,OAAO,CAAC,eAAe,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,CAAC,CAAC,CAAC;IAEpD,MAAM,SAAS,GAAG,CAAC,GAAwB,EAAe,EAAE;QACxD,OAAO,kBAAkB,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,KAAK,GAAG,CAAgB,CAAC;IAC9E,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,MAAoB,EAAE,MAAe,EAAE,EAAE;;QACjE,IAAI,SAAS,GAAG,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,cAAc,CAAC;QAEzC,IAAI,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YAC5B,SAAS,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QACvC,CAAC;QAED,MAAM,QAAQ,GAAG,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,mCAAI,eAAe,CAAC,KAAK,GAAG,sBAAsB,GAAG,SAAS,EAAE,CAAC;QAElG,IAAI,KAAK,IAAI,QAAQ,EAAE,CAAC;YACpB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAS,CAAC,CAAC;QAC7D,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,CAAgC,EAAE,EAAE;QACxD,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAC7B,kBAAkB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,eAA4B,EAAE,EAAE;QACrD,cAAc,EAAE,CAAC;QACjB,kBAAkB,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;IACnD,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,IAAA,oBAAU,EAAC,yBAAyB,EAAE;QACvD,CAAC,KAAK,gBAAgB,EAAE,CAAC,EAAE,CAAC,CAAC,gBAAgB;QAC7C,WAAW,EAAE,SAAS;QACtB,YAAY,EAAE,KAAK,CAAC,QAAQ;KAC/B,CAAC,CAAC;IACH,MAAM,cAAc,GAAG,CAAC,OAAoB,EAAE,EAAE;QAC5C,eAAe,CAAC,OAAO,CAAC,CAAC;QACzB,OAAO;IACX,CAAC,CAAC;IAEF,OAAO,CACH,uCAAK,SAAS,EAAE,YAAY;QACxB,uCAAK,SAAS,EAAC,kCAAkC,EAAC,OAAO,EAAE,gBAAgB;YACvE,uCAAK,SAAS,EAAC,uCAAuC,IAAE,IAAA,iDAAwB,EAAC,eAAe,CAAC,IAAI,CAAC,CAAO;YAC7G,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,QAAQ,GAAI,CAC/B;QACN,uCAAK,SAAS,EAAC,iCAAiC;YAC5C,wCAAM,SAAS,EAAC,wCAAwC;;gBAAG,eAAe,CAAC,KAAK,CAAQ;YACxF,yCACI,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,GAAG,EAAE,QAAQ,EACb,WAAW,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,EACjE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,WAAW,EAAE,eAAe,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,EAAE,GAAG,IAAI,EAAE,EACpE,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,cAAc,GACvB;YAEF,uCAAK,SAAS,EAAC,wCAAwC,GAAO,CAC5D;QACN,uCAAK,SAAS,EAAC,iCAAiC,EAAC,GAAG,EAAE,YAAY,GAAQ;QAC1E,8BAAC,eAAM,IACH,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,gBAAgB,EACzB,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,kBAAkB,EAC3B,KAAK,EAAE,eAAe,CAAC,IAAI,EAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EACrD,SAAS,EAAC,MAAM,EAChB,OAAO,EAAC,MAAM,EACd,YAAY,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CACvB,uCAAK,SAAS,EAAC,+CAA+C;gBAC1D,uCAAK,SAAS,EAAC,oDAAoD,IAAE,IAAA,iDAAwB,EAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAc,CAAC,CAAO;gBAC7H,uCAAK,SAAS,EAAC,oDAAoD,IAC9D,OAAO,aAAP,OAAO;oBAAP,OAAO,CAAE,KAAK;;oBAAE;6BAAQ,OAAO,aAAP,OAAO;wBAAP,OAAO,CAAE,KAAK,CAAQ,CAC7C,CACJ,CACT,GACH,CACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,eAAK,CAAC,UAAU,CAAsE,wBAAwB,CAAC,CAAC","sourcesContent":["import './EnhancedPhoneNumberField.global.scss';\n\nimport { useCurrentHotel } from '@frontend/hooks';\nimport classNames from 'classnames';\nimport React, { ChangeEvent, ForwardRefRenderFunction, PropsWithChildren, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { useAutoFocusOnSelect } from '@/hooks/AutoFocusOnSelect';\nimport { convertCountryCodeToFlag, CountryType, ListOfCountriesAndCodes } from '@/models/CountryCodesAndNumbers';\n\nimport { Select } from '../../Select/Select';\n\nexport interface EnhancedPhoneNumberField extends PropsWithChildren<any> {\n    validationStatus?: 'success' | 'error';\n    name?: string;\n    value?: string;\n    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n    disabled?: boolean;\n}\n\nconst PHONE_AND_PREFIX_SPLIT = ' ';\n\nconst EnhancedPhoneNumberField: ForwardRefRenderFunction<HTMLInputElement, EnhancedPhoneNumberField> = (props, ref) => {\n    const { hotel } = useCurrentHotel();\n    const innerRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(ref, () => innerRef.current);\n    const { onDropdownClosed, onItemSelected, onTriggerClicked, isDropdownOpen, isFocused } = useAutoFocusOnSelect({\n        ref: innerRef.current,\n        onlyAutoOpenWhenInputEmpty: true,\n        disableOpenOnFocus: true,\n    });\n\n    const { t } = useTranslation();\n\n    const organizedCountries: CountryType[] = useMemo(() => {\n        return ListOfCountriesAndCodes.sort((a, b) => {\n            return `${(a.suggested ? '000' : '') + a.label}`.localeCompare(`${(b.suggested ? '000' : '') + b.label}`);\n        });\n    }, [ListOfCountriesAndCodes]);\n\n    const [container, setContainer] = useState<HTMLDivElement | null>(null);\n\n    const { validationStatus, name, onChange, value } = props;\n\n    const [selectedCountry, subscriberCode] = useMemo(() => {\n        const defaultCountryCode = hotel?.countryCode || organizedCountries[0].phone;\n        const [prefix, number] = value?.split(PHONE_AND_PREFIX_SPLIT) ?? [];\n        const codeToFind = prefix || defaultCountryCode;\n\n        const selectedCountry = organizedCountries.find(({ phone }) => phone === codeToFind) ?? organizedCountries[0];\n\n        return [selectedCountry, number ?? ''];\n    }, [value, organizedCountries, hotel?.countryCode]);\n\n    const getOption = (key: CountryType['code']): CountryType => {\n        return organizedCountries.find(({ code }) => code === key) as CountryType;\n    };\n\n    const raiseOnChangeEvent = (prefix?: CountryType, suffix?: string) => {\n        let newSuffix = suffix ?? subscriberCode;\n\n        if (newSuffix.startsWith('0')) {\n            newSuffix = newSuffix.substring(1);\n        }\n\n        const newValue = `${prefix?.phone ?? selectedCountry.phone}${PHONE_AND_PREFIX_SPLIT}${newSuffix}`;\n\n        if (value != newValue) {\n            onChange?.({ target: { name, value: newValue } } as any);\n        }\n    };\n\n    const onInputChanged = (e: ChangeEvent<HTMLInputElement>) => {\n        const value = e.target.value;\n        raiseOnChangeEvent(undefined, value);\n    };\n\n    const onPrefixChanged = (selectedCountry: CountryType) => {\n        onItemSelected();\n        raiseOnChangeEvent(selectedCountry, undefined);\n    };\n\n    const fieldClasses = classNames('rs-enhanced-phone-field', {\n        [`--${validationStatus}`]: !!validationStatus,\n        '--focused': isFocused,\n        '--disabled': props.disabled,\n    });\n    const onCountryClick = (country: CountryType) => {\n        onPrefixChanged(country);\n        return;\n    };\n\n    return (\n        <div className={fieldClasses}>\n            <div className=\"rs-enhanced-phone-field--country\" onClick={onTriggerClicked}>\n                <div className=\"rs-enhanced-phone-field--country-icon\">{convertCountryCodeToFlag(selectedCountry.code)}</div>\n                <Icon icon={IconType.Dropdown} />\n            </div>\n            <div className=\"rs-enhanced-phone-field--number\">\n                <span className=\"rs-enhanced-phone-field--number-prefix\">+{selectedCountry.phone}</span>\n                <input\n                    disabled={props.disabled}\n                    ref={innerRef}\n                    placeholder={t(Translation.Step.Confirmation.Inputs.Phone) + ' *'}\n                    type=\"number\"\n                    style={{ paddingLeft: selectedCountry.phone.length * 8 + 20 + 'px' }}\n                    onChange={onInputChanged}\n                    value={subscriberCode}\n                />\n\n                <div className=\"rs-enhanced-phone-field--number-status\"></div>\n            </div>\n            <div className=\"rs-enhanced-phone-field--anchor\" ref={setContainer}></div>\n            <Select<CountryType, 'code'>\n                open={isDropdownOpen}\n                onClose={onDropdownClosed}\n                target={container}\n                options={organizedCountries}\n                value={selectedCountry.code}\n                onChange={(value) => onCountryClick(getOption(value))}\n                labelName=\"code\"\n                keyName=\"code\"\n                renderOption={(country) => (\n                    <div className=\"rs-enhanced-phone-field--suggest-list-country\">\n                        <div className=\"rs-enhanced-phone-field--suggest-list-country-icon\">{convertCountryCodeToFlag(country?.code as string)}</div>\n                        <div className=\"rs-enhanced-phone-field--suggest-list-country-name\">\n                            {country?.label} <span>+{country?.phone}</span>\n                        </div>\n                    </div>\n                )}\n            />\n        </div>\n    );\n};\n\nexport default React.forwardRef<HTMLInputElement, React.PropsWithChildren<EnhancedPhoneNumberField>>(EnhancedPhoneNumberField);\n"]}
+{"version":3,"file":"EnhancedPhoneNumberField.js","sourceRoot":"/","sources":["src/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAAgD;AAEhD,2CAAkD;AAClD,4DAAoC;AACpC,+CAAwI;AACxI,iDAA+C;AAC/C,0DAAuD;AAEvD,uEAAgE;AAChE,iEAAiE;AACjE,4EAAiH;AAEjH,gDAA6C;AAU7C,MAAM,sBAAsB,GAAG,GAAG,CAAC;AAEnC,MAAM,wBAAwB,GAA8E,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACvH,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IACpC,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAChD,IAAA,2BAAmB,EAAmD,GAAG,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACnG,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,IAAA,wCAAoB,EAAC;QAC3G,GAAG,EAAE,QAAQ,CAAC,OAAO;QACrB,0BAA0B,EAAE,IAAI;QAChC,kBAAkB,EAAE,IAAI;KAC3B,CAAC,CAAC;IAEH,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,MAAM,kBAAkB,GAAkB,IAAA,eAAO,EAAC,GAAG,EAAE;QACnD,OAAO,gDAAuB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACzC,OAAO,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;QAC9G,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,gDAAuB,CAAC,CAAC,CAAC;IAE9B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAwB,IAAI,CAAC,CAAC;IAExE,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAE1D,MAAM,CAAC,eAAe,EAAE,cAAc,CAAC,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;;QACnD,MAAM,kBAAkB,GAAG,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,KAAI,kBAAkB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QAC7E,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,sBAAsB,CAAC,mCAAI,EAAE,CAAC;QACpE,MAAM,UAAU,GAAG,MAAM,IAAI,kBAAkB,CAAC;QAEhD,MAAM,eAAe,GAAG,MAAA,kBAAkB,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,KAAK,UAAU,CAAC,mCAAI,kBAAkB,CAAC,CAAC,CAAC,CAAC;QAE9G,OAAO,CAAC,eAAe,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,CAAC,CAAC,CAAC;IAEpD,MAAM,SAAS,GAAG,CAAC,GAAwB,EAAe,EAAE;QACxD,OAAO,kBAAkB,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,KAAK,GAAG,CAAgB,CAAC;IAC9E,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,MAAoB,EAAE,MAAe,EAAE,EAAE;;QACjE,IAAI,SAAS,GAAG,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,cAAc,CAAC;QAEzC,IAAI,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YAC5B,SAAS,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QACvC,CAAC;QAED,MAAM,QAAQ,GAAG,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,mCAAI,eAAe,CAAC,KAAK,GAAG,sBAAsB,GAAG,SAAS,EAAE,CAAC;QAElG,IAAI,KAAK,IAAI,QAAQ,EAAE,CAAC;YACpB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAS,CAAC,CAAC;QAC7D,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,CAAgC,EAAE,EAAE;QACxD,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAC7B,kBAAkB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,eAA4B,EAAE,EAAE;QACrD,cAAc,EAAE,CAAC;QACjB,kBAAkB,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;IACnD,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,IAAA,oBAAU,EAAC,yBAAyB,EAAE;QACvD,CAAC,KAAK,gBAAgB,EAAE,CAAC,EAAE,CAAC,CAAC,gBAAgB;QAC7C,WAAW,EAAE,SAAS;QACtB,YAAY,EAAE,KAAK,CAAC,QAAQ;KAC/B,CAAC,CAAC;IACH,MAAM,cAAc,GAAG,CAAC,OAAoB,EAAE,EAAE;QAC5C,eAAe,CAAC,OAAO,CAAC,CAAC;QACzB,OAAO;IACX,CAAC,CAAC;IAEF,OAAO,CACH,uCAAK,SAAS,EAAE,YAAY;QACxB,uCAAK,SAAS,EAAC,kCAAkC,EAAC,OAAO,EAAE,gBAAgB;YACvE,uCAAK,SAAS,EAAC,uCAAuC,IAAE,IAAA,iDAAwB,EAAC,eAAe,CAAC,IAAI,CAAC,CAAO;YAC7G,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,QAAQ,GAAI,CAC/B;QACN,uCAAK,SAAS,EAAC,iCAAiC;YAC5C,wCAAM,SAAS,EAAC,wCAAwC;;gBAAG,eAAe,CAAC,KAAK,CAAQ;YACxF,yCACI,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,GAAG,EAAE,QAAQ,EACb,WAAW,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,EACjE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,WAAW,EAAE,eAAe,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,EAAE,GAAG,IAAI,EAAE,EACpE,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,cAAc,GACvB;YAEF,uCAAK,SAAS,EAAC,wCAAwC,GAAO,CAC5D;QACN,uCAAK,SAAS,EAAC,iCAAiC,EAAC,GAAG,EAAE,YAAY,GAAQ;QAC1E,8BAAC,eAAM,IACH,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,gBAAgB,EACzB,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,kBAAkB,EAC3B,KAAK,EAAE,eAAe,CAAC,IAAI,EAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EACrD,SAAS,EAAC,MAAM,EAChB,OAAO,EAAC,MAAM,EACd,YAAY,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CACvB,uCAAK,SAAS,EAAC,+CAA+C;gBAC1D,uCAAK,SAAS,EAAC,oDAAoD,IAAE,IAAA,iDAAwB,EAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAc,CAAC,CAAO;gBAC7H,uCAAK,SAAS,EAAC,oDAAoD,IAC9D,OAAO,aAAP,OAAO;oBAAP,OAAO,CAAE,KAAK;;oBAAE;6BAAQ,OAAO,aAAP,OAAO;wBAAP,OAAO,CAAE,KAAK,CAAQ,CAC7C,CACJ,CACT,GACH,CACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,eAAK,CAAC,UAAU,CAA2E,wBAAwB,CAAC,CAAC","sourcesContent":["import './EnhancedPhoneNumberField.global.scss';\n\nimport { useCurrentHotel } from '@frontend/hooks';\nimport classNames from 'classnames';\nimport React, { ChangeEvent, ForwardRefRenderFunction, PropsWithChildren, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { useAutoFocusOnSelect } from '@/hooks/AutoFocusOnSelect';\nimport { convertCountryCodeToFlag, CountryType, ListOfCountriesAndCodes } from '@/models/CountryCodesAndNumbers';\n\nimport { Select } from '../../Select/Select';\n\nexport interface EnhancedPhoneNumberFieldProps extends PropsWithChildren<any> {\n    validationStatus?: 'success' | 'error';\n    name?: string;\n    value?: string;\n    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n    disabled?: boolean;\n}\n\nconst PHONE_AND_PREFIX_SPLIT = ' ';\n\nconst EnhancedPhoneNumberField: ForwardRefRenderFunction<HTMLInputElement, EnhancedPhoneNumberFieldProps> = (props, ref) => {\n    const { hotel } = useCurrentHotel();\n    const innerRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(ref, () => innerRef.current);\n    const { onDropdownClosed, onItemSelected, onTriggerClicked, isDropdownOpen, isFocused } = useAutoFocusOnSelect({\n        ref: innerRef.current,\n        onlyAutoOpenWhenInputEmpty: true,\n        disableOpenOnFocus: true,\n    });\n\n    const { t } = useTranslation();\n\n    const organizedCountries: CountryType[] = useMemo(() => {\n        return ListOfCountriesAndCodes.sort((a, b) => {\n            return `${(a.suggested ? '000' : '') + a.label}`.localeCompare(`${(b.suggested ? '000' : '') + b.label}`);\n        });\n    }, [ListOfCountriesAndCodes]);\n\n    const [container, setContainer] = useState<HTMLDivElement | null>(null);\n\n    const { validationStatus, name, onChange, value } = props;\n\n    const [selectedCountry, subscriberCode] = useMemo(() => {\n        const defaultCountryCode = hotel?.countryCode || organizedCountries[0].phone;\n        const [prefix, number] = value?.split(PHONE_AND_PREFIX_SPLIT) ?? [];\n        const codeToFind = prefix || defaultCountryCode;\n\n        const selectedCountry = organizedCountries.find(({ phone }) => phone === codeToFind) ?? organizedCountries[0];\n\n        return [selectedCountry, number ?? ''];\n    }, [value, organizedCountries, hotel?.countryCode]);\n\n    const getOption = (key: CountryType['code']): CountryType => {\n        return organizedCountries.find(({ code }) => code === key) as CountryType;\n    };\n\n    const raiseOnChangeEvent = (prefix?: CountryType, suffix?: string) => {\n        let newSuffix = suffix ?? subscriberCode;\n\n        if (newSuffix.startsWith('0')) {\n            newSuffix = newSuffix.substring(1);\n        }\n\n        const newValue = `${prefix?.phone ?? selectedCountry.phone}${PHONE_AND_PREFIX_SPLIT}${newSuffix}`;\n\n        if (value != newValue) {\n            onChange?.({ target: { name, value: newValue } } as any);\n        }\n    };\n\n    const onInputChanged = (e: ChangeEvent<HTMLInputElement>) => {\n        const value = e.target.value;\n        raiseOnChangeEvent(undefined, value);\n    };\n\n    const onPrefixChanged = (selectedCountry: CountryType) => {\n        onItemSelected();\n        raiseOnChangeEvent(selectedCountry, undefined);\n    };\n\n    const fieldClasses = classNames('rs-enhanced-phone-field', {\n        [`--${validationStatus}`]: !!validationStatus,\n        '--focused': isFocused,\n        '--disabled': props.disabled,\n    });\n    const onCountryClick = (country: CountryType) => {\n        onPrefixChanged(country);\n        return;\n    };\n\n    return (\n        <div className={fieldClasses}>\n            <div className=\"rs-enhanced-phone-field--country\" onClick={onTriggerClicked}>\n                <div className=\"rs-enhanced-phone-field--country-icon\">{convertCountryCodeToFlag(selectedCountry.code)}</div>\n                <Icon icon={IconType.Dropdown} />\n            </div>\n            <div className=\"rs-enhanced-phone-field--number\">\n                <span className=\"rs-enhanced-phone-field--number-prefix\">+{selectedCountry.phone}</span>\n                <input\n                    disabled={props.disabled}\n                    ref={innerRef}\n                    placeholder={t(Translation.Step.Confirmation.Inputs.Phone) + ' *'}\n                    type=\"number\"\n                    style={{ paddingLeft: selectedCountry.phone.length * 8 + 20 + 'px' }}\n                    onChange={onInputChanged}\n                    value={subscriberCode}\n                />\n\n                <div className=\"rs-enhanced-phone-field--number-status\"></div>\n            </div>\n            <div className=\"rs-enhanced-phone-field--anchor\" ref={setContainer}></div>\n            <Select<CountryType, 'code'>\n                open={isDropdownOpen}\n                onClose={onDropdownClosed}\n                target={container}\n                options={organizedCountries}\n                value={selectedCountry.code}\n                onChange={(value) => onCountryClick(getOption(value))}\n                labelName=\"code\"\n                keyName=\"code\"\n                renderOption={(country) => (\n                    <div className=\"rs-enhanced-phone-field--suggest-list-country\">\n                        <div className=\"rs-enhanced-phone-field--suggest-list-country-icon\">{convertCountryCodeToFlag(country?.code as string)}</div>\n                        <div className=\"rs-enhanced-phone-field--suggest-list-country-name\">\n                            {country?.label} <span>+{country?.phone}</span>\n                        </div>\n                    </div>\n                )}\n            />\n        </div>\n    );\n};\n\nexport default React.forwardRef<HTMLInputElement, React.PropsWithChildren<EnhancedPhoneNumberFieldProps>>(EnhancedPhoneNumberField);\n"]}

package/dist/src/components/members/SignInModal/EmailAndFullnameMemberModal.d.ts

@@ -2,6 +2,10 @@ import { FC } from 'react';
 import { CommonMemberModalProps } from './ExternalMemberModal';
 type EmailAndFullnameMemberModalProps = CommonMemberModalProps & {
     isMemberNumberRequired?: boolean;
+    enableMemberNumber?: boolean;
+    enablePostcode?: boolean;
+    enableMobilePhone?: boolean;
+    enableMarketingOptIn?: boolean;
 };
 declare const EmailAndFullnameMemberModal: FC<EmailAndFullnameMemberModalProps>;
 export default EmailAndFullnameMemberModal;