@roomstay/frontend 2.6.89-2 → 2.6.90

package/dist/src/components/generic/RadioButtonGroup/RadioButton.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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 };
 };

package/dist/src/components/generic/RadioButtonGroup/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sourceRoot":"/","sources":["src/components/generic/RadioButtonGroup/RadioButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4DAAoC;AACpC,+CAA0F;AAE1F,iFAAyD;AAEzD,wFAA+C;AAa/C,MAAM,WAAW,GAA+D,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACxK,OAAO,CACH,uCACI,SAAS,EAAE,IAAA,oBAAU,EAAC,iCAAM,CAAC,IAAI,EAAE,SAAS,EAAE;YAC1C,CAAC,iCAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,iCAAM,CAAC,OAAO,CAAC,EAAE,OAAO;SAC5B,CAAC,EACF,OAAO,EAAE,QAAQ,EACjB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK;QAEZ,uCAAK,SAAS,EAAE,iCAAM,CAAC,MAAM,EAAE,GAAG,EAAE,SAAS;YACzC,uCAAK,SAAS,EAAE,iCAAM,CAAC,MAAM,GAAI;YACjC,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI,IAAG,KAAK,CAAO,CACxC;QACL,aAAa,IAAI,OAAO,IAAI,CACzB,8BAAC,wBAAc,IAAC,IAAI;YAChB,uCAAK,SAAS,EAAE,iCAAM,CAAC,OAAO,IAAG,aAAa,EAAE,CAAO,CAC1C,CACpB,CACC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,IAAA,kBAAU,EAAC,WAAW,CAAC,CAAC;AAEpB,8CAAW","sourcesContent":["import classNames from 'classnames';\nimport React, { forwardRef, ForwardRefRenderFunction, LegacyRef, ReactNode } from 'react';\n\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\n\nimport styles from './RadioButton.module.scss';\n\nexport interface RadioButtonProps {\n    checked: boolean;\n    onChange: JSX.IntrinsicElements['div']['onChange'];\n    label?: ReactNode;\n    disabled?: boolean;\n    renderContent?: () => ReactNode;\n    className?: string;\n    headerRef?: LegacyRef<HTMLDivElement>;\n    style?: React.CSSProperties;\n}\n\nconst RadioButton: ForwardRefRenderFunction<HTMLDivElement, RadioButtonProps> = ({ checked, onChange, disabled, label, renderContent, className, headerRef, style }, ref) => {\n    return (\n        <div\n            className={classNames(styles.root, className, {\n                [styles.disabled]: disabled,\n                [styles.checked]: checked,\n            })}\n            onClick={onChange}\n            ref={ref}\n            style={style}\n        >\n            <div className={styles.header} ref={headerRef}>\n                <div className={styles.design} />\n                <div className={styles.text}>{label}</div>\n            </div>\n            {renderContent && checked && (\n                <AutoAutoHeight open>\n                    <div className={styles.content}>{renderContent()}</div>\n                </AutoAutoHeight>\n            )}\n        </div>\n    );\n};\n\nconst ForwardedRefRadioButton = forwardRef(RadioButton);\n\nexport { ForwardedRefRadioButton as RadioButton };\n"]}
+{"version":3,"file":"RadioButton.js","sourceRoot":"/","sources":["src/components/generic/RadioButtonGroup/RadioButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4DAAoC;AACpC,+CAA0F;AAE1F,iFAAyD;AAEzD,wFAA+C;AAa/C,MAAM,WAAW,GAA+D,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACxK,OAAO,CACH,uCACI,SAAS,EAAE,IAAA,oBAAU,EAAC,iCAAM,CAAC,IAAI,EAAE,SAAS,EAAE;YAC1C,CAAC,iCAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,iCAAM,CAAC,OAAO,CAAC,EAAE,OAAO;SAC5B,CAAC,EACF,OAAO,EAAE,QAAQ,EACjB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK;QAEZ,uCAAK,SAAS,EAAE,iCAAM,CAAC,MAAM,EAAE,GAAG,EAAE,SAAS;YACzC,uCAAK,SAAS,EAAE,iCAAM,CAAC,MAAM,GAAI;YACjC,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI,IAAG,KAAK,CAAO,CACxC;QACL,aAAa,IAAI,OAAO,IAAI,CACzB,8BAAC,wBAAc,IAAC,IAAI;YAChB,uCAAK,SAAS,EAAE,iCAAM,CAAC,OAAO,IAAG,aAAa,EAAE,CAAO,CAC1C,CACpB,CACC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,IAAA,kBAAU,EAAC,WAAW,CAAC,CAAC;AAEpB,8CAAW","sourcesContent":["import classNames from 'classnames';\nimport React, { forwardRef, ForwardRefRenderFunction, LegacyRef, ReactNode } from 'react';\n\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\n\nimport styles from './RadioButton.module.scss';\n\nexport interface RadioButtonProps {\n    checked: boolean;\n    onChange: JSX.IntrinsicElements['div']['onChange'];\n    label?: ReactNode;\n    disabled?: boolean;\n    renderContent?: () => ReactNode;\n    className?: string;\n    headerRef?: LegacyRef<HTMLDivElement>;\n    style?: React.CSSProperties;\n}\n\nconst RadioButton: ForwardRefRenderFunction<HTMLDivElement, RadioButtonProps> = ({ checked, onChange, disabled, label, renderContent, className, headerRef, style }, ref) => {\n    return (\n        <div\n            className={classNames(styles.root, className, {\n                [styles.disabled]: disabled,\n                [styles.checked]: checked,\n            })}\n            onClick={onChange}\n            ref={ref}\n            style={style}\n        >\n            <div className={styles.header} ref={headerRef}>\n                <div className={styles.design} />\n                <div className={styles.text}>{label}</div>\n            </div>\n            {renderContent && checked && (\n                <AutoAutoHeight open>\n                    <div className={styles.content}>{renderContent()}</div>\n                </AutoAutoHeight>\n            )}\n        </div>\n    );\n};\n\nconst ForwardedRefRadioButton = forwardRef(RadioButton);\n\nexport { ForwardedRefRadioButton as RadioButton };\n"]}

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

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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 __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonGroup.js","sourceRoot":"/","sources":["src/components/generic/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiE;AAEjE,uEAAgE;AAChE,kEAA+D;AAC/D,mFAAgF;AAChF,mFAA2D;AAE3D,kGAAoD;AAoBpD,MAAM,MAAM,GAAG,CAAiC,EAC5C,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,SAAS,EAChB,QAAQ,EACR,qBAAqB,EACrB,WAAW,GAOd,EAAe,EAAE;IACd,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;IACnC,MAAM,OAAO,GAAG,CAAC,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,CAAA,CAAC;IAClC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,IAAA,gBAAQ,EAAwB,IAAI,CAAC,CAAC;IAC5D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IACjD,MAAM,MAAM,GAA2C,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,KAAK,SAAS,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;IAC1J,MAAM,WAAW,GAAG,CAChB,8BAAC,yBAAW,IACR,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,sCAAM,CAAC,IAAI,EACtB,GAAG,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EAClB,OAAO,EAAE,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAA,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,MAAK,SAAS,EACzD,QAAQ,EAAE,GAAG,EAAE;YACX,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ;gBAAE,OAAO;YAC7B,IAAI,OAAO;gBAAE,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC;iBACvB,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,KAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,MAAK,SAAS;gBAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;QACtG,CAAC,EACD,KAAK,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EACpB,QAAQ,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,EAC1B,aAAa,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa,GACtC,CACL,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,OAAO,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,MAAK,SAAS,CAAC;IAC3D,MAAM,UAAU,GAAG,OAAO,IAAI,IAAI,CAAC;IACnC,MAAM,sBAAsB,GACxB,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa,CAAA,IAAI,CAAC,OAAO;QAC9B,CAAC,CAAC,EAAE,SAAS,EAAE,iDAAiD,EAAE;QAClE,CAAC,CAAC,UAAU,IAAI,UAAU;YAC1B,CAAC,CAAC,EAAE,SAAS,EAAE,4BAA4B,EAAE;YAC7C,CAAC,CAAC,SAAS,CAAC;IAEpB,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,MAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,CAAA,EAAE;QAC5C,OAAO,CACH,8BAAC,iBAAO,IAAC,GAAG,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EAAE,cAAc,EAAE,sCAAM,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,IACrF,WAAW,CACN,CACb,CAAC;KACL;IAED,OAAO,CACH;QACI,uCAAK,GAAG,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EAAE,SAAS,EAAE,sCAAM,CAAC,OAAO;YAC7C,WAAW;YACX,CAAC,WAAW,IAAI,CACb,uCAAK,SAAS,EAAE,sCAAM,CAAC,iBAAiB,EAAE,KAAK,EAAE,sBAAsB;gBACnE,8BAAC,cAAI,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,eAAQ,CAAC,QAAQ,GAAI,CAC3C,CACT,CACC;QACL,OAAO,IAAI,CACR,8BAAC,iBAAO,IACJ,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,sCAAM,CAAC,OAAO,EACzB,UAAU,QACV,kBAAkB,EAAC,SAAS,EAC5B,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,GAAG,IAAI,SAAS,EAC/B,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EACd,SAAS,EAAC,cAAc;YAExB,8BAAC,gBAAgB,IACb,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;oBAC5B,MAAM,EAAE,aAAa,KAAc,MAAM,EAAf,IAAI,UAAK,MAAM,EAAnC,iBAA0B,CAAS,CAAC;oBAC1C,IAAI,CAAC,qBAAqB;wBAAE,OAAO,IAAI,CAAC;oBACxC,OAAO,MAAM,CAAC;gBAClB,CAAC,CAAC,EACF,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;oBACnB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;oBACvC,OAAO,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,KAAK,EAAE,SAAS,EAChB,UAAU,SACZ,CACI,CACb,CACF,CACN,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAiC,EACtD,OAAO,GAAG,EAAE,EACZ,KAAK,EAAE,SAAS,EAChB,QAAQ,EACR,qBAAqB,EACrB,UAAU,GACmB,EAAuB,EAAE;IACtD,OAAO,CACH,uCAAK,SAAS,EAAE,sCAAM,CAAC,IAAI,IACtB,OAAO,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CACxB,8BAAC,MAAM,IAAC,GAAG,EAAE,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,WAAW,EAAE,UAAU,GAAI,CACnK,CAAC,CACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,gBAAgB,CAAC","sourcesContent":["import React, { ReactElement, ReactNode, useState } from 'react';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { Overlay } from '@/components/generic/Overlay/Overlay';\nimport { RadioButton } from '@/components/generic/RadioButtonGroup/RadioButton';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\n\nimport styles from './RadioButtonGroup.module.scss';\n\nexport interface IRadioButtonOption<TValue extends string = string> {\n    value: TValue;\n    label?: ReactNode;\n    disabled?: boolean;\n    /** Enabled a tooltip that gives more info on why the field is disabled */\n    disabledReason?: string;\n    renderContent?: () => ReactNode;\n    options?: IRadioButtonOption<TValue>[];\n}\n\nexport interface IRadioButtonGroupProps<TValue extends string = string> {\n    options?: IRadioButtonOption<TValue>[];\n    value?: TValue;\n    onChange?: (value: TValue, optionValue?: TValue) => void;\n    renderChildrenContent?: boolean;\n    isSubGroup?: boolean;\n}\n\nconst Option = <TValue extends string = string>({\n    option: optionProp,\n    value: valueProp,\n    onChange,\n    renderChildrenContent,\n    isSubOption,\n}: {\n    option: IRadioButtonOption<TValue>;\n    value?: TValue;\n    onChange?: (value: TValue, optionValue?: TValue) => void;\n    renderChildrenContent?: boolean;\n    isSubOption?: boolean;\n}): JSX.Element => {\n    const options = optionProp.options;\n    const isGroup = !!options?.length;\n    const [ref, setRef] = useState<HTMLDivElement | null>(null);\n    const [open, setOpen] = useState<boolean>(false);\n    const option: IRadioButtonOption<TValue> | undefined = isGroup && valueProp ? options.find(({ value }) => value === valueProp) || optionProp : optionProp;\n    const radioButton = (\n        <RadioButton\n            headerRef={setRef}\n            className={styles.item}\n            key={option?.value}\n            checked={!option?.disabled && option?.value === valueProp}\n            onChange={() => {\n                if (option?.disabled) return;\n                if (isGroup) setOpen(!open);\n                else if (option?.value && option?.value !== valueProp) onChange?.(option.value, optionProp.value);\n            }}\n            label={option?.label}\n            disabled={option?.disabled}\n            renderContent={option?.renderContent}\n        />\n    );\n\n    const isSelected = !isGroup && option?.value === valueProp;\n    const isExpanded = isGroup && open;\n    const dropDownIndicatorStyle: React.CSSProperties | undefined =\n        !option?.renderContent && !isGroup\n            ? { transform: 'translateX(1px) translateY(-2px) rotate(270deg)' }\n            : isSelected || isExpanded\n            ? { transform: 'scaleY(-1) translateY(2px)' }\n            : undefined;\n\n    if (option?.disabled && option?.disabledReason) {\n        return (\n            <Tooltip key={option?.value} wrapperClasses={styles.wrapper} title={option?.disabledReason}>\n                {radioButton}\n            </Tooltip>\n        );\n    }\n\n    return (\n        <>\n            <div key={option?.value} className={styles.wrapper}>\n                {radioButton}\n                {!isSubOption && (\n                    <div className={styles.childrenIndicator} style={dropDownIndicatorStyle}>\n                        <Icon size=\"24px\" icon={IconType.Dropdown} />\n                    </div>\n                )}\n            </div>\n            {options && (\n                <Overlay\n                    onClose={() => setOpen(false)}\n                    className={styles.overlay}\n                    hideStyles\n                    containerClassName=\"u-w-100\"\n                    open={open}\n                    followElement={ref || undefined}\n                    offset={[0, 0]}\n                    placement=\"bottom-start\"\n                >\n                    <RadioButtonGroup\n                        options={options.map((option) => {\n                            const { renderContent, ...rest } = option;\n                            if (!renderChildrenContent) return rest;\n                            return option;\n                        })}\n                        onChange={(subValue) => {\n                            onChange?.(optionProp.value, subValue);\n                            setOpen(false);\n                        }}\n                        value={valueProp}\n                        isSubGroup\n                    />\n                </Overlay>\n            )}\n        </>\n    );\n};\n\nconst RadioButtonGroup = <TValue extends string = string>({\n    options = [],\n    value: valueProp,\n    onChange,\n    renderChildrenContent,\n    isSubGroup,\n}: IRadioButtonGroupProps<TValue>): ReactElement | null => {\n    return (\n        <div className={styles.root}>\n            {options.map((rawOption) => (\n                <Option key={rawOption.value} option={rawOption} value={valueProp} onChange={onChange} renderChildrenContent={renderChildrenContent} isSubOption={isSubGroup} />\n            ))}\n        </div>\n    );\n};\n\nexport default RadioButtonGroup;\n"]}
+{"version":3,"file":"RadioButtonGroup.js","sourceRoot":"/","sources":["src/components/generic/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactElement, ReactNode, useState } from 'react';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { Overlay } from '@/components/generic/Overlay/Overlay';\nimport { RadioButton } from '@/components/generic/RadioButtonGroup/RadioButton';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\n\nimport styles from './RadioButtonGroup.module.scss';\n\nexport interface IRadioButtonOption<TValue extends string = string> {\n    value: TValue;\n    label?: ReactNode;\n    disabled?: boolean;\n    /** Enabled a tooltip that gives more info on why the field is disabled */\n    disabledReason?: string;\n    renderContent?: () => ReactNode;\n    options?: IRadioButtonOption<TValue>[];\n}\n\nexport interface IRadioButtonGroupProps<TValue extends string = string> {\n    options?: IRadioButtonOption<TValue>[];\n    value?: TValue;\n    onChange?: (value: TValue, optionValue?: TValue) => void;\n    renderChildrenContent?: boolean;\n    isSubGroup?: boolean;\n}\n\nconst Option = <TValue extends string = string>({\n    option: optionProp,\n    value: valueProp,\n    onChange,\n    renderChildrenContent,\n    isSubOption,\n}: {\n    option: IRadioButtonOption<TValue>;\n    value?: TValue;\n    onChange?: (value: TValue, optionValue?: TValue) => void;\n    renderChildrenContent?: boolean;\n    isSubOption?: boolean;\n}): JSX.Element => {\n    const options = optionProp.options;\n    const isGroup = !!options?.length;\n    const [ref, setRef] = useState<HTMLDivElement | null>(null);\n    const [open, setOpen] = useState<boolean>(false);\n    const option: IRadioButtonOption<TValue> | undefined = isGroup && valueProp ? options.find(({ value }) => value === valueProp) || optionProp : optionProp;\n    const radioButton = (\n        <RadioButton\n            headerRef={setRef}\n            className={styles.item}\n            key={option?.value}\n            checked={!option?.disabled && option?.value === valueProp}\n            onChange={() => {\n                if (option?.disabled) return;\n                if (isGroup) setOpen(!open);\n                else if (option?.value && option?.value !== valueProp) onChange?.(option.value, optionProp.value);\n            }}\n            label={option?.label}\n            disabled={option?.disabled}\n            renderContent={option?.renderContent}\n        />\n    );\n\n    const isSelected = !isGroup && option?.value === valueProp;\n    const isExpanded = isGroup && open;\n    const dropDownIndicatorStyle: React.CSSProperties | undefined =\n        !option?.renderContent && !isGroup\n            ? { transform: 'translateX(1px) translateY(-2px) rotate(270deg)' }\n            : isSelected || isExpanded\n            ? { transform: 'scaleY(-1) translateY(2px)' }\n            : undefined;\n\n    if (option?.disabled && option?.disabledReason) {\n        return (\n            <Tooltip key={option?.value} wrapperClasses={styles.wrapper} title={option?.disabledReason}>\n                {radioButton}\n            </Tooltip>\n        );\n    }\n\n    return (\n        <>\n            <div key={option?.value} className={styles.wrapper}>\n                {radioButton}\n                {!isSubOption && (\n                    <div className={styles.childrenIndicator} style={dropDownIndicatorStyle}>\n                        <Icon size=\"24px\" icon={IconType.Dropdown} />\n                    </div>\n                )}\n            </div>\n            {options && (\n                <Overlay\n                    onClose={() => setOpen(false)}\n                    className={styles.overlay}\n                    hideStyles\n                    containerClassName=\"u-w-100\"\n                    open={open}\n                    followElement={ref || undefined}\n                    offset={[0, 0]}\n                    placement=\"bottom-start\"\n                >\n                    <RadioButtonGroup\n                        options={options.map((option) => {\n                            const { renderContent, ...rest } = option;\n                            if (!renderChildrenContent) return rest;\n                            return option;\n                        })}\n                        onChange={(subValue) => {\n                            onChange?.(optionProp.value, subValue);\n                            setOpen(false);\n                        }}\n                        value={valueProp}\n                        isSubGroup\n                    />\n                </Overlay>\n            )}\n        </>\n    );\n};\n\nconst RadioButtonGroup = <TValue extends string = string>({\n    options = [],\n    value: valueProp,\n    onChange,\n    renderChildrenContent,\n    isSubGroup,\n}: IRadioButtonGroupProps<TValue>): ReactElement | null => {\n    return (\n        <div className={styles.root}>\n            {options.map((rawOption) => (\n                <Option key={rawOption.value} option={rawOption} value={valueProp} onChange={onChange} renderChildrenContent={renderChildrenContent} isSubOption={isSubGroup} />\n            ))}\n        </div>\n    );\n};\n\nexport default RadioButtonGroup;\n"]}

package/dist/src/components/generic/RecentSearchesCard.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 import BasketRow from '../../models/BasketRow';
 export interface RecentSearchesCardProps {
     basketRow: BasketRow;
     onViewRatesClicked: () => void;
     onRemove: () => void;
 }
-declare const RecentSearchesCard: ({ basketRow, onRemove, onViewRatesClicked }: RecentSearchesCardProps) => JSX.Element;
+declare const RecentSearchesCard: ({ basketRow, onRemove, onViewRatesClicked }: RecentSearchesCardProps) => React.JSX.Element;
 export default RecentSearchesCard;

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

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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 };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"RecentSearchesCard.js","sourceRoot":"/","sources":["src/components/generic/RecentSearchesCard.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iDAA0D;AAC1D,kDAA0B;AAC1B,+CAA0C;AAC1C,iDAA+C;AAC/C,0DAAuD;AAEvD,6EAAqD;AACrD,uEAAgE;AAChE,kEAA2D;AAC3D,oGAA4E;AAE5E,wCAAqC;AACrC,mEAA2C;AAS3C,MAAM,kBAAkB,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,kBAAkB,EAA2B,EAAE,EAAE;;IAChG,MAAM,KAAK,GAAG,IAAA,eAAK,EAAC,SAAS,CAAC,YAAY,EAAE,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IACnE,MAAM,GAAG,GAAG,IAAA,eAAK,EAAC,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IAE/D,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IAEnD,OAAO,CACH,uCAAK,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,EAAE,SAAS,EAAC,sBAAsB;QACrE,uCAAK,SAAS,EAAC,+BAA+B;YAC1C,8BAAC,4BAAkB,IAAC,MAAM,EAAE,SAAS,CAAC,OAAO,EAAE,CAAC,MAAM,IAAI,EAAE,EAAE,gBAAgB,SAAG,CAC/E;QACN,uCAAK,SAAS,EAAC,mCAAmC,EAAC,OAAO,EAAE,kBAAkB;YAC1E,uCAAK,SAAS,EAAC,6BAA6B;gBACxC,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,IAAI,EAAE,IAAI,QAAC,KAAK,EAAE,aAAK,CAAC,MAAM,IAC9C,SAAS,CAAC,OAAO,EAAE,CAAC,IAAI,CACtB;gBACP,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ,EAAE,SAAS,EAAC,sBAAsB,IAC9E,MAAA,SAAS,CAAC,OAAO,EAAE,0CAAE,IAAI,CACvB,CACL;YAEN,uCAAK,SAAS,EAAC,sDAAsD;gBACjE,uCAAK,SAAS,EAAC,aAAa;oBACxB,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK;wBACrB,KAAK;;wBAAI,GAAG,CACV,CACL;gBACN;oBACI,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ;wBAC5C,SAAS,CAAC,SAAS,EAAE;;wBAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;;wBAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,GAAG,CAAC;;wBAAG,SAAS,CAAC,WAAW,EAAE;wBAAE,GAAG;wBACtH,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CACnC,CACL,CACJ;YACN,8BAAC,kBAAQ,IAAC,IAAI,EAAE,eAAQ,CAAC,UAAU,EAAE,YAAY,EAAC,OAAO,EAAC,MAAM,QAAC,OAAO,QAAC,IAAI,EAAE,SAAS,CAAC,UAAU,IAAI,oBAAU,CAAC,MAAM,EAAE,OAAO,EAAE,kBAAkB,IAChJ,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CACrC,CACT;QACN,uCAAK,SAAS,EAAC,6BAA6B;YACxC,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ,EAAE,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,QAAQ,GAAI,CAClF,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,kBAAkB,CAAC","sourcesContent":["import { BookingEngineContext } from '@frontend/contexts';\nimport dayjs from 'dayjs';\nimport React, { useContext } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nimport BEButton from '@/components/generic/BEButton';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport Text, { TextType } from '@/components/generic/Text';\nimport ImageGallerySlider from '@/components/steps/room/ImageGallerySlider';\nimport BasketRow from '@/models/BasketRow';\nimport { Color } from '@/util/Color';\nimport ScreenSize from '@/util/ScreenSize';\n\nexport interface RecentSearchesCardProps {\n    basketRow: BasketRow;\n\n    onViewRatesClicked: () => void;\n    onRemove: () => void;\n}\n\nconst RecentSearchesCard = ({ basketRow, onRemove, onViewRatesClicked }: RecentSearchesCardProps) => {\n    const start = dayjs(basketRow.getStartDate()).format('ddd DD MMM');\n    const end = dayjs(basketRow.getEndDate()).format('ddd DD MMM');\n\n    const { t } = useTranslation();\n\n    const beContext = useContext(BookingEngineContext);\n\n    return (\n        <div style={{ backgroundColor: '#fff' }} className=\"recent-searches-card\">\n            <div className=\"recent-searches-card--gallery\">\n                <ImageGallerySlider images={basketRow.getRoom().images || []} hideLightboxIcon />\n            </div>\n            <div className=\"recent-searches-card--information\" onClick={onViewRatesClicked}>\n                <div className=\"recent-searches-card--title\">\n                    <Text type={TextType.Body} bold color={Color.Accent}>\n                        {basketRow.getRoom().name}\n                    </Text>\n                    <Text type={TextType.Small} color={Color.DarkGrey} className=\"u-marg-bottom--light\">\n                        {basketRow.getRate()?.name}\n                    </Text>\n                </div>\n\n                <div className=\"u-marg-bottom u-flex flex-wrap justify-content-start\">\n                    <div className=\"u-pad-right\">\n                        <Text type={TextType.Small}>\n                            {start}, {end}\n                        </Text>\n                    </div>\n                    <div>\n                        <Text type={TextType.Small} color={Color.DarkGrey}>\n                            {basketRow.getAdults()} {t(Translation.Step.Date.Adult_plural)} {t(Translation.Misc.And)} {basketRow.getChildren()}{' '}\n                            {t(Translation.Step.Date.Child_plural)}\n                        </Text>\n                    </div>\n                </div>\n                <BEButton icon={IconType.ArrowRight} iconPosition=\"right\" filled primary wide={beContext.screenSize <= ScreenSize.Medium} onClick={onViewRatesClicked}>\n                    {t(Translation.Step.Room.RoomInfo.ViewRates)}\n                </BEButton>\n            </div>\n            <div className=\"recent-searches-card--close\">\n                <Icon icon={IconType.Close} color={Color.DarkGrey} size=\"24px\" onClick={onRemove} />\n            </div>\n        </div>\n    );\n};\n\nexport default RecentSearchesCard;\n"]}
+{"version":3,"file":"RecentSearchesCard.js","sourceRoot":"/","sources":["src/components/generic/RecentSearchesCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BookingEngineContext } from '@frontend/contexts';\nimport dayjs from 'dayjs';\nimport React, { useContext } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nimport BEButton from '@/components/generic/BEButton';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport Text, { TextType } from '@/components/generic/Text';\nimport ImageGallerySlider from '@/components/steps/room/ImageGallerySlider';\nimport BasketRow from '@/models/BasketRow';\nimport { Color } from '@/util/Color';\nimport ScreenSize from '@/util/ScreenSize';\n\nexport interface RecentSearchesCardProps {\n    basketRow: BasketRow;\n\n    onViewRatesClicked: () => void;\n    onRemove: () => void;\n}\n\nconst RecentSearchesCard = ({ basketRow, onRemove, onViewRatesClicked }: RecentSearchesCardProps) => {\n    const start = dayjs(basketRow.getStartDate()).format('ddd DD MMM');\n    const end = dayjs(basketRow.getEndDate()).format('ddd DD MMM');\n\n    const { t } = useTranslation();\n\n    const beContext = useContext(BookingEngineContext);\n\n    return (\n        <div style={{ backgroundColor: '#fff' }} className=\"recent-searches-card\">\n            <div className=\"recent-searches-card--gallery\">\n                <ImageGallerySlider images={basketRow.getRoom().images || []} hideLightboxIcon />\n            </div>\n            <div className=\"recent-searches-card--information\" onClick={onViewRatesClicked}>\n                <div className=\"recent-searches-card--title\">\n                    <Text type={TextType.Body} bold color={Color.Accent}>\n                        {basketRow.getRoom().name}\n                    </Text>\n                    <Text type={TextType.Small} color={Color.DarkGrey} className=\"u-marg-bottom--light\">\n                        {basketRow.getRate()?.name}\n                    </Text>\n                </div>\n\n                <div className=\"u-marg-bottom u-flex flex-wrap justify-content-start\">\n                    <div className=\"u-pad-right\">\n                        <Text type={TextType.Small}>\n                            {start}, {end}\n                        </Text>\n                    </div>\n                    <div>\n                        <Text type={TextType.Small} color={Color.DarkGrey}>\n                            {basketRow.getAdults()} {t(Translation.Step.Date.Adult_plural)} {t(Translation.Misc.And)} {basketRow.getChildren()}{' '}\n                            {t(Translation.Step.Date.Child_plural)}\n                        </Text>\n                    </div>\n                </div>\n                <BEButton icon={IconType.ArrowRight} iconPosition=\"right\" filled primary wide={beContext.screenSize <= ScreenSize.Medium} onClick={onViewRatesClicked}>\n                    {t(Translation.Step.Room.RoomInfo.ViewRates)}\n                </BEButton>\n            </div>\n            <div className=\"recent-searches-card--close\">\n                <Icon icon={IconType.Close} color={Color.DarkGrey} size=\"24px\" onClick={onRemove} />\n            </div>\n        </div>\n    );\n};\n\nexport default RecentSearchesCard;\n"]}

package/dist/src/components/generic/RoomstayMark.d.ts

@@ -1 +1,2 @@
-export declare const RoomstayMark: () => JSX.Element;
+import React from 'react';
+export declare const RoomstayMark: () => React.JSX.Element;

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

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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 };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"RoomstayMark.js","sourceRoot":"/","sources":["src/components/generic/RoomstayMark.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,uDAA+C;AAE/C,kEAA2D;AAC3D,wCAAqC;AACrC,wDAAiD;AAE1C,MAAM,YAAY,GAAG,GAAG,EAAE;IAC7B,MAAM,QAAQ,GAAG,IAAA,8BAAW,GAAE,CAAC;IAC/B,OAAO,CACH,uCACI,KAAK,EAAE;YACH,eAAe,EAAE,QAAQ,CAAC,QAAQ,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;SAClF;QAED,uCAAK,SAAS,EAAC,wBAAwB;YACnC,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,yBAAS,CAAC,KAAK;;gBAC1D,GAAG;gBACd,qCAAG,GAAG,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAC,0BAA0B;oBAC/D;wBACI,uDAAkB,CAClB,CACJ,CACD,CACL,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AApBW,QAAA,YAAY,gBAoBvB","sourcesContent":["import React from 'react';\nimport { useLocation } from 'react-router-dom';\n\nimport Text, { TextType } from '@/components/generic/Text';\nimport { Color } from '@/util/Color';\nimport { TextAlign } from '@/util/TextAlignment';\n\nexport const RoomstayMark = () => {\n    const location = useLocation();\n    return (\n        <div\n            style={{\n                backgroundColor: location.pathname.startsWith('/account') ? 'white' : undefined,\n            }}\n        >\n            <div className=\"container u-pad-bottom\">\n                <Text type={TextType.Small} color={Color.Graphite} align={TextAlign.Right}>\n                    Powered by{' '}\n                    <a rel=\"noreferrer\" target=\"_blank\" href=\"https://www.roomstay.io/\">\n                        <u>\n                            <i>Roomstay.io</i>\n                        </u>\n                    </a>\n                </Text>\n            </div>\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"RoomstayMark.js","sourceRoot":"/","sources":["src/components/generic/RoomstayMark.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,uDAA+C;AAE/C,kEAA2D;AAC3D,wCAAqC;AACrC,wDAAiD;AAE1C,MAAM,YAAY,GAAG,GAAG,EAAE;IAC7B,MAAM,QAAQ,GAAG,IAAA,8BAAW,GAAE,CAAC;IAC/B,OAAO,CACH,uCACI,KAAK,EAAE;YACH,eAAe,EAAE,QAAQ,CAAC,QAAQ,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;SAClF;QAED,uCAAK,SAAS,EAAC,wBAAwB;YACnC,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,yBAAS,CAAC,KAAK;;gBAC1D,GAAG;gBACd,qCAAG,GAAG,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAC,0BAA0B;oBAC/D;wBACI,uDAAkB,CAClB,CACJ,CACD,CACL,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AApBW,QAAA,YAAY,gBAoBvB","sourcesContent":["import React from 'react';\nimport { useLocation } from 'react-router-dom';\n\nimport Text, { TextType } from '@/components/generic/Text';\nimport { Color } from '@/util/Color';\nimport { TextAlign } from '@/util/TextAlignment';\n\nexport const RoomstayMark = () => {\n    const location = useLocation();\n    return (\n        <div\n            style={{\n                backgroundColor: location.pathname.startsWith('/account') ? 'white' : undefined,\n            }}\n        >\n            <div className=\"container u-pad-bottom\">\n                <Text type={TextType.Small} color={Color.Graphite} align={TextAlign.Right}>\n                    Powered by{' '}\n                    <a rel=\"noreferrer\" target=\"_blank\" href=\"https://www.roomstay.io/\">\n                        <u>\n                            <i>Roomstay.io</i>\n                        </u>\n                    </a>\n                </Text>\n            </div>\n        </div>\n    );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollToTop.js","sourceRoot":"/","sources":["src/components/generic/ScrollToTop.tsx"],"names":[],"mappings":";;AAAA,iCAAkC;AAClC,uDAA+C;AAE/C,SAAS,WAAW;IAChB,MAAM,QAAQ,GAAG,IAAA,8BAAW,GAAE,CAAC;IAE/B,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACX,MAAM,aAAa,GACf,CAAA,MAAA,QAAQ,CAAC,KAAK,0CAAE,gBAAgB,MAAK,IAAI,IAAI,oCAAoC;aACjF,MAAA,MAAA,QAAQ,CAAC,KAAK,0CAAE,gBAAgB,0CAAG,QAAQ,CAAC,QAAQ,CAAC,CAAA,CAAC,CAAC,0DAA0D;QAErH,IAAI,aAAa,EAAE;YACf,OAAO;SACV;QAED,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC;IAExB,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,kBAAe,WAAW,CAAC","sourcesContent":["import { useEffect } from 'react';\nimport { useLocation } from 'react-router-dom';\n\nfunction ScrollToTop(): null {\n    const location = useLocation();\n\n    useEffect(() => {\n        const preventScroll =\n            location.state?.preventScrollTop === true || // Handle state passed down via Tabs\n            location.state?.preventScrollTop?.[location.pathname]; // Handle state passed down via HistoryConsistentPush hook\n\n        if (preventScroll) {\n            return;\n        }\n\n        window.scrollTo(0, 0);\n    }, [location.pathname]);\n\n    return null;\n}\n\nexport default ScrollToTop;\n"]}
+{"version":3,"file":"ScrollToTop.js","sourceRoot":"/","sources":["src/components/generic/ScrollToTop.tsx"],"names":[],"mappings":";;AAAA,iCAAkC;AAClC,uDAA+C;AAE/C,SAAS,WAAW;IAChB,MAAM,QAAQ,GAAG,IAAA,8BAAW,GAAE,CAAC;IAE/B,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACX,MAAM,aAAa,GACf,CAAA,MAAA,QAAQ,CAAC,KAAK,0CAAE,gBAAgB,MAAK,IAAI,IAAI,oCAAoC;aACjF,MAAA,MAAA,QAAQ,CAAC,KAAK,0CAAE,gBAAgB,0CAAG,QAAQ,CAAC,QAAQ,CAAC,CAAA,CAAC,CAAC,0DAA0D;QAErH,IAAI,aAAa,EAAE,CAAC;YAChB,OAAO;QACX,CAAC;QAED,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC;IAExB,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,kBAAe,WAAW,CAAC","sourcesContent":["import { useEffect } from 'react';\nimport { useLocation } from 'react-router-dom';\n\nfunction ScrollToTop(): null {\n    const location = useLocation();\n\n    useEffect(() => {\n        const preventScroll =\n            location.state?.preventScrollTop === true || // Handle state passed down via Tabs\n            location.state?.preventScrollTop?.[location.pathname]; // Handle state passed down via HistoryConsistentPush hook\n\n        if (preventScroll) {\n            return;\n        }\n\n        window.scrollTo(0, 0);\n    }, [location.pathname]);\n\n    return null;\n}\n\nexport default ScrollToTop;\n"]}

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

@@ -15,17 +15,28 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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 });
+exports.default = InputSelect;
 const react_1 = __importStar(require("react"));
 const Select_1 = require("./Select");
 const TextBox_1 = __importDefault(require("../TextBox"));
@@ -53,5 +64,4 @@ function InputSelect({ value, onChange, options, keyName, labelName, label, plac
                 onChange === null || onChange === void 0 ? void 0 : onChange(value);
             }, value: value, open: isDropdownOpen })));
 }
-exports.default = InputSelect;
 //# sourceMappingURL=InputSelect.js.map

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+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;AAxDD,8BAwDC","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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}

package/dist/src/components/generic/Select/Select.d.ts

@@ -32,9 +32,9 @@ export type SelectProps<TOption extends Option<KeyName>, KeyName extends string>
     disableNative?: boolean;
     renderNoOptions?: (targetRef: React.RefObject<HTMLSpanElement>) => ReactElement | null;
 };
-export declare const InnerSelect: <TOption extends Option<KeyName>, KeyName extends string>({ target, open, onClose, options, value, onChange, keyName, labelName, className, offset, renderOption, nativeOnMobile, overlay, renderLabel, hideExpandIcon, inputLabelColor, disableNative, renderNoOptions, }: SelectProps<TOption, KeyName>, ref: Ref<HTMLDivElement | null>) => JSX.Element;
+export declare const InnerSelect: <TOption extends Option<KeyName>, KeyName extends string>({ target, open, onClose, options, value, onChange, keyName, labelName, className, offset, renderOption, nativeOnMobile, overlay, renderLabel, hideExpandIcon, inputLabelColor, disableNative, renderNoOptions, }: SelectProps<TOption, KeyName>, ref: Ref<HTMLDivElement | null>) => React.JSX.Element;
 export declare const Select: <TOption extends Option<KeyName>, KeyName extends string>(p: SelectProps<TOption, KeyName> & {
-    ref?: React.Ref<HTMLDivElement> | undefined;
+    ref?: Ref<HTMLDivElement>;
 }) => JSX.Element;
 export interface IDefaultSelectOption {
     value: string;

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

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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 };
 };

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';\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"]}

package/dist/src/components/generic/Slider/Slider.d.ts

@@ -18,5 +18,5 @@ type SliderProps = {
  * Specifically a ranged slider, specifically for the Filter section of the Step Room display.
  * @param props
  */
-export declare const Slider: (props: SliderProps) => JSX.Element;
+export declare const Slider: (props: SliderProps) => React.JSX.Element;
 export {};

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

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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 };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"/","sources":["src/components/generic/Slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport styles from './Slider.module.scss';\n\nexport type MarkerType = {\n    isVisible: boolean;\n\n    label?: string | React.ReactNode;\n    value: number;\n};\n\nexport type BackgroundMarkerType = {\n    isEdge?: 'start' | 'end';\n} & MarkerType;\n\ntype SliderMakerProps = {\n    isEdge?: 'start' | 'end';\n    fixed?: boolean;\n\n    marker?: MarkerType;\n\n    /**\n     * On a scale of 0 to 100, how far should the marker be shown.\n     * @param offset number\n     */\n    offset?: number;\n};\n\nconst SliderMarker = (props: SliderMakerProps) => {\n    const markerClasses = classNames(styles['marker'], {\n        [styles['--fixed']]: props.fixed,\n        [styles['--hidden']]: !props.marker?.isVisible,\n        [(styles as any)[`--${props.isEdge}`]]: !!props.isEdge,\n    });\n\n    const markerLabelClasses = classNames(styles['marker-label'], {\n        [styles['--fixed']]: props.fixed,\n        [(styles as any)[`--${props.isEdge}`]]: !!props.isEdge,\n    });\n\n    const markerStyles: React.CSSProperties = {};\n    if (props.offset) {\n        markerStyles.left = Math.max(Math.min(100, props.offset), 0) + '%';\n    }\n\n    return (\n        <span className={markerClasses} style={markerStyles}>\n            {props.marker && !!props.marker.label && <span className={markerLabelClasses}>{props.marker.label}</span>}\n        </span>\n    );\n};\n\ntype SliderProps = {\n    min: number;\n    max: number;\n\n    onChange?: (markers: MarkerType[]) => void;\n\n    markers: MarkerType[];\n    backgroundMarkers?: BackgroundMarkerType[];\n};\n\n/**\n * Specifically a ranged slider, specifically for the Filter section of the Step Room display.\n * @param props\n */\nexport const Slider = (props: SliderProps) => {\n    const { min = 0, max = 100 } = props;\n\n    const [isMouseDown, setIsMouseDown] = useState(false);\n    const [movingIndex, setMovingIndex] = useState<number | null>(null);\n\n    const sliderRef = useRef<HTMLDivElement | null>(null);\n\n    const changeTrigger = (e: MouseEvent | React.MouseEvent, isOnDown = false) => {\n        const rect = sliderRef?.current?.getBoundingClientRect();\n        if (!rect) {\n            return;\n        }\n\n        const startX = rect.x;\n        const endX = rect.x + rect.width;\n\n        const newValue = Math.max(Math.min(Math.round(min + ((max - min) * (e.clientX - startX)) / (endX - startX)), props.max), props.min);\n\n        let closestIndex: number | null = movingIndex;\n        const markers = props.markers;\n\n        for (let i = 0; i < markers.length; i++) {\n            if (!markers[i].isVisible) continue;\n            if (closestIndex === null || Math.abs(newValue - markers[closestIndex].value) > Math.abs(newValue - markers[i].value)) {\n                closestIndex = i;\n            }\n        }\n\n        const newMarkers = [...props.markers];\n        if (closestIndex !== null) newMarkers[closestIndex].value = newValue;\n\n        props.onChange?.(newMarkers);\n        setMovingIndex(closestIndex);\n    };\n\n    const onMouseDown = (e: React.MouseEvent) => {\n        setIsMouseDown(true);\n        changeTrigger(e);\n    };\n\n    const mapValueToPercent = (value: number) => {\n        let newValue = 0;\n\n        const totalDiff = max - min;\n        const baseNewValue = value - min;\n\n        newValue = (baseNewValue / totalDiff) * 100;\n\n        return Math.min(Math.max(newValue, 0), 100);\n    };\n\n    useEffect(() => {\n        let cancelled = false;\n        // Creating a bounding rect here to figure out how big the slider is,\n        // assumption is while the mouse is dragging, the screen size isn't going to change, right?\n        // If this is wrong, add a screen size listener to check on screen size change.\n        const rect = (sliderRef?.current as HTMLElement)?.getBoundingClientRect();\n\n        if (!rect) {\n            return;\n        }\n\n        const startX = rect.x;\n        const endX = rect.x + rect.width;\n\n        const mouseMoveListener = (e: MouseEvent) => {\n            if (!cancelled && movingIndex !== null) {\n                changeTrigger(e);\n            }\n        };\n\n        const mouseUpListener = () => {\n            setIsMouseDown(false);\n            setMovingIndex(null);\n        };\n\n        document.body.addEventListener('mouseup', mouseUpListener);\n        document.body.addEventListener('mousemove', mouseMoveListener);\n\n        return () => {\n            cancelled = true;\n\n            document.body.removeEventListener('mouseup', mouseUpListener);\n            document.body.removeEventListener('mousemove', mouseMoveListener);\n        };\n    }, [movingIndex]);\n\n    return (\n        <div className={styles.slider} onMouseDown={onMouseDown} ref={sliderRef}>\n            <div className={styles['slider-track']}>\n                {(props.backgroundMarkers ?? [])?.map((marker, index) => {\n                    // TODO: Add labels if we\n                    // TODO: Possibly animate these with Spring library to make them smoother?\n                    return <SliderMarker key={index} offset={mapValueToPercent(marker.value)} marker={marker} fixed isEdge={marker.isEdge} />;\n                })}\n\n                <div\n                    className={styles['slider-rail']}\n                    style={{ left: `${mapValueToPercent(props.markers[0].value)}%`, right: `${100 - mapValueToPercent(props.markers[1].value)}%` }}\n                ></div>\n                {props.markers.map((marker, index) => {\n                    return <SliderMarker key={index} offset={mapValueToPercent(marker.value)} marker={marker} />;\n                })}\n            </div>\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"Slider.js","sourceRoot":"/","sources":["src/components/generic/Slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport styles from './Slider.module.scss';\n\nexport type MarkerType = {\n    isVisible: boolean;\n\n    label?: string | React.ReactNode;\n    value: number;\n};\n\nexport type BackgroundMarkerType = {\n    isEdge?: 'start' | 'end';\n} & MarkerType;\n\ntype SliderMakerProps = {\n    isEdge?: 'start' | 'end';\n    fixed?: boolean;\n\n    marker?: MarkerType;\n\n    /**\n     * On a scale of 0 to 100, how far should the marker be shown.\n     * @param offset number\n     */\n    offset?: number;\n};\n\nconst SliderMarker = (props: SliderMakerProps) => {\n    const markerClasses = classNames(styles['marker'], {\n        [styles['--fixed']]: props.fixed,\n        [styles['--hidden']]: !props.marker?.isVisible,\n        [(styles as any)[`--${props.isEdge}`]]: !!props.isEdge,\n    });\n\n    const markerLabelClasses = classNames(styles['marker-label'], {\n        [styles['--fixed']]: props.fixed,\n        [(styles as any)[`--${props.isEdge}`]]: !!props.isEdge,\n    });\n\n    const markerStyles: React.CSSProperties = {};\n    if (props.offset) {\n        markerStyles.left = Math.max(Math.min(100, props.offset), 0) + '%';\n    }\n\n    return (\n        <span className={markerClasses} style={markerStyles}>\n            {props.marker && !!props.marker.label && <span className={markerLabelClasses}>{props.marker.label}</span>}\n        </span>\n    );\n};\n\ntype SliderProps = {\n    min: number;\n    max: number;\n\n    onChange?: (markers: MarkerType[]) => void;\n\n    markers: MarkerType[];\n    backgroundMarkers?: BackgroundMarkerType[];\n};\n\n/**\n * Specifically a ranged slider, specifically for the Filter section of the Step Room display.\n * @param props\n */\nexport const Slider = (props: SliderProps) => {\n    const { min = 0, max = 100 } = props;\n\n    const [isMouseDown, setIsMouseDown] = useState(false);\n    const [movingIndex, setMovingIndex] = useState<number | null>(null);\n\n    const sliderRef = useRef<HTMLDivElement | null>(null);\n\n    const changeTrigger = (e: MouseEvent | React.MouseEvent, isOnDown = false) => {\n        const rect = sliderRef?.current?.getBoundingClientRect();\n        if (!rect) {\n            return;\n        }\n\n        const startX = rect.x;\n        const endX = rect.x + rect.width;\n\n        const newValue = Math.max(Math.min(Math.round(min + ((max - min) * (e.clientX - startX)) / (endX - startX)), props.max), props.min);\n\n        let closestIndex: number | null = movingIndex;\n        const markers = props.markers;\n\n        for (let i = 0; i < markers.length; i++) {\n            if (!markers[i].isVisible) continue;\n            if (closestIndex === null || Math.abs(newValue - markers[closestIndex].value) > Math.abs(newValue - markers[i].value)) {\n                closestIndex = i;\n            }\n        }\n\n        const newMarkers = [...props.markers];\n        if (closestIndex !== null) newMarkers[closestIndex].value = newValue;\n\n        props.onChange?.(newMarkers);\n        setMovingIndex(closestIndex);\n    };\n\n    const onMouseDown = (e: React.MouseEvent) => {\n        setIsMouseDown(true);\n        changeTrigger(e);\n    };\n\n    const mapValueToPercent = (value: number) => {\n        let newValue = 0;\n\n        const totalDiff = max - min;\n        const baseNewValue = value - min;\n\n        newValue = (baseNewValue / totalDiff) * 100;\n\n        return Math.min(Math.max(newValue, 0), 100);\n    };\n\n    useEffect(() => {\n        let cancelled = false;\n        // Creating a bounding rect here to figure out how big the slider is,\n        // assumption is while the mouse is dragging, the screen size isn't going to change, right?\n        // If this is wrong, add a screen size listener to check on screen size change.\n        const rect = (sliderRef?.current as HTMLElement)?.getBoundingClientRect();\n\n        if (!rect) {\n            return;\n        }\n\n        const startX = rect.x;\n        const endX = rect.x + rect.width;\n\n        const mouseMoveListener = (e: MouseEvent) => {\n            if (!cancelled && movingIndex !== null) {\n                changeTrigger(e);\n            }\n        };\n\n        const mouseUpListener = () => {\n            setIsMouseDown(false);\n            setMovingIndex(null);\n        };\n\n        document.body.addEventListener('mouseup', mouseUpListener);\n        document.body.addEventListener('mousemove', mouseMoveListener);\n\n        return () => {\n            cancelled = true;\n\n            document.body.removeEventListener('mouseup', mouseUpListener);\n            document.body.removeEventListener('mousemove', mouseMoveListener);\n        };\n    }, [movingIndex]);\n\n    return (\n        <div className={styles.slider} onMouseDown={onMouseDown} ref={sliderRef}>\n            <div className={styles['slider-track']}>\n                {(props.backgroundMarkers ?? [])?.map((marker, index) => {\n                    // TODO: Add labels if we\n                    // TODO: Possibly animate these with Spring library to make them smoother?\n                    return <SliderMarker key={index} offset={mapValueToPercent(marker.value)} marker={marker} fixed isEdge={marker.isEdge} />;\n                })}\n\n                <div\n                    className={styles['slider-rail']}\n                    style={{ left: `${mapValueToPercent(props.markers[0].value)}%`, right: `${100 - mapValueToPercent(props.markers[1].value)}%` }}\n                ></div>\n                {props.markers.map((marker, index) => {\n                    return <SliderMarker key={index} offset={mapValueToPercent(marker.value)} marker={marker} />;\n                })}\n            </div>\n        </div>\n    );\n};\n"]}

package/dist/src/components/generic/Tabs/ElementChildren.js

@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reactMap = exports.reactForEach = void 0;
+exports.reactForEach = reactForEach;
+exports.reactMap = reactMap;
 const react_1 = __importDefault(require("react"));
 function reactForEach(children, func) {
     let index = 0;
@@ -12,10 +13,8 @@ function reactForEach(children, func) {
             func(child, index++);
     });
 }
-exports.reactForEach = reactForEach;
 function reactMap(children, func) {
     let index = 0;
     return react_1.default.Children.map(children, (child) => (react_1.default.isValidElement(child) ? func(child, index++) : child));
 }
-exports.reactMap = reactMap;
 //# sourceMappingURL=ElementChildren.js.map

package/dist/src/components/generic/Tabs/ElementChildren.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElementChildren.js","sourceRoot":"/","sources":["src/components/generic/Tabs/ElementChildren.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,SAAgB,YAAY,CAAU,QAAa,EAAE,IAAwD;IACzG,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACvC,IAAI,eAAK,CAAC,cAAc,CAAI,KAAK,CAAC;YAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;AACP,CAAC;AALD,oCAKC;AAED,SAAgB,QAAQ,CAAU,QAAa,EAAE,IAAuD;IACpG,IAAI,KAAK,GAAG,CAAC,CAAC;IAEd,OAAO,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,eAAK,CAAC,cAAc,CAAI,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;AACpH,CAAC;AAJD,4BAIC","sourcesContent":["import React from 'react';\n\nexport function reactForEach<P = any>(children: any, func: (el: React.ReactElement<P>, index: number) => void) {\n    let index = 0;\n    React.Children.forEach(children, (child) => {\n        if (React.isValidElement<P>(child)) func(child, index++);\n    });\n}\n\nexport function reactMap<P = any>(children: any, func: (el: React.ReactElement<P>, index: number) => any) {\n    let index = 0;\n\n    return React.Children.map(children, (child) => (React.isValidElement<P>(child) ? func(child, index++) : child));\n}\n"]}
+{"version":3,"file":"ElementChildren.js","sourceRoot":"/","sources":["src/components/generic/Tabs/ElementChildren.tsx"],"names":[],"mappings":";;;;;AAEA,oCAKC;AAED,4BAIC;AAbD,kDAA0B;AAE1B,SAAgB,YAAY,CAAU,QAAa,EAAE,IAAwD;IACzG,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACvC,IAAI,eAAK,CAAC,cAAc,CAAI,KAAK,CAAC;YAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;AACP,CAAC;AAED,SAAgB,QAAQ,CAAU,QAAa,EAAE,IAAuD;IACpG,IAAI,KAAK,GAAG,CAAC,CAAC;IAEd,OAAO,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,eAAK,CAAC,cAAc,CAAI,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;AACpH,CAAC","sourcesContent":["import React from 'react';\n\nexport function reactForEach<P = any>(children: any, func: (el: React.ReactElement<P>, index: number) => void) {\n    let index = 0;\n    React.Children.forEach(children, (child) => {\n        if (React.isValidElement<P>(child)) func(child, index++);\n    });\n}\n\nexport function reactMap<P = any>(children: any, func: (el: React.ReactElement<P>, index: number) => any) {\n    let index = 0;\n\n    return React.Children.map(children, (child) => (React.isValidElement<P>(child) ? func(child, index++) : child));\n}\n"]}