@roomstay/frontend 2.0.12 → 2.1.0

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

@@ -1,23 +1,51 @@
 "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 (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = exports.InnerSelect = void 0;
-const React = require("react");
-const react_1 = require("react");
-const Icon_1 = require("../Icon/Icon");
-const classNames = require("classnames");
+const react_1 = __importStar(require("react"));
+const Icon_1 = __importStar(require("../Icon/Icon"));
+const classnames_1 = __importDefault(require("classnames"));
 require("./Select.global.scss");
 const Overlay_1 = require("components/generic/Overlay/Overlay");
 const KeyboardControlOnSelect_1 = require("hooks/KeyboardControlOnSelect");
 const Color_1 = require("util/Color");
 const CombineState_1 = require("hooks/CombineState");
 const WindowSize_1 = require("hooks/WindowSize");
-const Text_1 = require("components/generic/Text");
+const Text_1 = __importStar(require("components/generic/Text"));
 const MOBILE_BREAKPOINT = 992;
-const InnerSelect = ({ target, open, onClose, options = [], value, onChange, keyName, labelName, className, offset, renderOption, nativeOnMobile = false }, ref) => {
+const InnerSelect = ({ target, open, onClose, options = [], value, onChange, keyName, labelName, className, offset, renderOption, nativeOnMobile = false, overlay, renderLabel, }, ref) => {
+    var _a, _b;
     const { width } = (0, WindowSize_1.useWindowSize)();
     const targetRef = (0, react_1.useRef)(null);
+    const optionRefs = (0, react_1.useRef)({});
+    const optionContainerRef = (0, react_1.useRef)(null);
     const [_open, _setIsOpen] = (0, CombineState_1.useCombinedState)(open, false);
-    // Force to fix later
+    // TODO: Force to fix later
     nativeOnMobile = false;
     const _onClose = (e) => {
         _setIsOpen(false);
@@ -30,7 +58,21 @@ const InnerSelect = ({ target, open, onClose, options = [], value, onChange, key
         _setIsOpen(false);
     };
     const _getOption = (value) => {
-        return options === null || options === void 0 ? void 0 : options.find((option) => option[keyName] === value);
+        for (const option of options) {
+            if (option.options && Array.isArray(option.options)) {
+                for (const childOption of option.options) {
+                    if (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) {
+                    return option;
+                }
+            }
+        }
     };
     const { selectingItem, onItemMouseMove, onItemMouseLeave, onItemMouseEnter } = (0, KeyboardControlOnSelect_1.useKeyboardControlOnSelect)({
         onSelected: (item) => _onSelected(item[keyName]),
@@ -39,28 +81,53 @@ const InnerSelect = ({ target, open, onClose, options = [], value, onChange, key
         idName: keyName,
         overlayRef: overlayRef.current,
         defaultOption: _getOption(value),
+        optionRefs,
+        optionContainerRef,
     });
     const _getLabel = (value) => {
-        const option = options === null || options === void 0 ? void 0 : options.find((option) => option[keyName] === value);
-        return (option === null || option === void 0 ? void 0 : option[labelName]) || value;
+        const option = _getOption(value);
+        if (renderLabel) {
+            return renderLabel(option);
+        }
+        return (option === null || option === void 0 ? void 0 : option[labelName]) || value || '';
+    };
+    const _renderOptions = (options) => {
+        if (!options)
+            return null;
+        return options.map((option, index) => {
+            const isGroup = option.options;
+            if (isGroup) {
+                return _renderGroup(option.name, option.options);
+            }
+            return _renderOption({ option: option, key: index });
+        });
+    };
+    const _renderGroup = (name, options) => {
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: "rs-select--suggest-list-item --group-title" },
+                react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey }, name)),
+            _renderOptions(options)));
+    };
+    const _renderOption = ({ option, key }) => {
+        const isSelected = option[keyName] === value;
+        const isSelecting = 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() },
+            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, className: "rs-select--suggest-list-option-name" }, renderOption ? renderOption(option) : labelName ? option[labelName] : ''),
+            isSelected && (react_1.default.createElement("span", { className: "rs-select--suggest-list-option-icon" },
+                react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Check })))));
     };
     const native = width && width < MOBILE_BREAKPOINT && nativeOnMobile;
-    return (React.createElement(React.Fragment, null,
-        (native || !target) && (React.createElement("span", { className: classNames('be-select', className), onClick: () => _setIsOpen(true), ref: targetRef },
-            native ? (React.createElement("select", { value: value, onChange: (e) => onChange(e.target.value) }, options.map((item) => {
-                return React.createElement("option", { value: value, key: item[keyName], label: _getLabel(item[keyName]) });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        (native || !target) && (react_1.default.createElement("span", { className: (0, classnames_1.default)('be-select', className), onClick: () => _setIsOpen(true), ref: targetRef },
+            native ? (react_1.default.createElement("select", { value: value, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value) }, options.map((item) => {
+                //@ts-ignore TODO: This needs to support opt groups
+                return react_1.default.createElement("option", { value: value, key: item[keyName], label: _getLabel(item[keyName]) });
             }))) : (_getLabel(value)),
-            React.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown, color: Color_1.Color.DarkGrey }))),
-        !native && (React.createElement(Overlay_1.Overlay, { offset: offset, usePortal: true, followElement: target || targetRef.current, placement: "bottom-start", open: open === undefined ? _open : open, onClose: _onClose, className: "rs-select--suggest-list", overlayRef: overlayRef }, options.map((option, index) => {
-            const isSelected = option[keyName] === value;
-            const isSelecting = option[keyName] === (selectingItem === null || selectingItem === void 0 ? void 0 : selectingItem[keyName]);
-            return (React.createElement("div", { key: index, className: classNames('rs-select--suggest-list-item', { '--selected': isSelected || isSelecting }), onClick: () => _onSelected(option[keyName]), onMouseEnter: () => {
-                    onItemMouseEnter(option);
-                }, onMouseLeave: () => onItemMouseLeave(), onMouseMove: () => onItemMouseMove() },
-                React.createElement(Text_1.default, { type: Text_1.TextType.Small, className: "rs-select--suggest-list-option-name" }, renderOption ? renderOption(option) : labelName ? option[labelName] : ''),
-                isSelected && (React.createElement("span", { className: "rs-select--suggest-list-option-icon" },
-                    React.createElement(Icon_1.default, { icon: Icon_1.IconType.Check })))));
-        })))));
+            react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown, color: Color_1.Color.DarkGrey }))),
+        !native && (react_1.default.createElement(Overlay_1.Overlay, { offset: offset, usePortal: (_a = overlay === null || overlay === void 0 ? void 0 : overlay.usePortal) !== null && _a !== void 0 ? _a : true, followElement: target || targetRef.current || undefined, placement: (_b = overlay === null || overlay === void 0 ? void 0 : overlay.placement) !== null && _b !== void 0 ? _b : 'bottom-start', strategy: overlay === null || overlay === void 0 ? void 0 : overlay.strategy, open: open === undefined ? _open : open, onClose: _onClose, containerClassName: overlay === null || overlay === void 0 ? void 0 : overlay.containerClassName, overlayRef: overlayRef },
+            react_1.default.createElement("div", { ref: optionContainerRef, className: (0, classnames_1.default)('rs-select--suggest-list', overlay === null || overlay === void 0 ? void 0 : overlay.className) }, _renderOptions(options))))));
 };
 exports.InnerSelect = InnerSelect;
 exports.Select = (0, react_1.forwardRef)(exports.InnerSelect);

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 * as React from 'react';\nimport { forwardRef, ReactNode, Ref, useImperativeHandle, useRef } from 'react';\nimport Icon, { IconType } from '../Icon/Icon';\n\nimport * as classNames from 'classnames';\n\nimport './Select.global.scss';\nimport { Overlay } from 'components/generic/Overlay/Overlay';\nimport { useKeyboardControlOnSelect } from 'hooks/KeyboardControlOnSelect';\nimport { Color } from 'util/Color';\nimport { useCombinedState } from 'hooks/CombineState';\nimport { useWindowSize } from 'hooks/WindowSize';\nimport Text, { TextType } from 'components/generic/Text';\n\nexport type Option<KeyName extends string> = {\n    [keyName in KeyName]: string;\n} & Record<any, any>;\n\ntype Select<TOption extends Option<KeyName>, KeyName extends string> = {\n    options: TOption[];\n    value: TOption[KeyName];\n    keyName: KeyName;\n\n    labelName?: TOption[keyof TOption];\n    target?: HTMLElement;\n    open?: boolean;\n    onClose?: (e: MouseEvent) => void;\n    onChange?: (value: TOption[KeyName]) => void;\n    className?: string;\n    offset?: [number, number];\n    renderOption?: (option: TOption) => ReactNode;\n    nativeOnMobile?: boolean;\n};\n\nconst MOBILE_BREAKPOINT = 992;\n\nexport const InnerSelect = <TOption extends Option<KeyName>, KeyName extends string>(\n    { target, open, onClose, options = [], value, onChange, keyName, labelName, className, offset, renderOption, nativeOnMobile = false }: Select<TOption, KeyName>,\n    ref: Ref<HTMLDivElement>\n) => {\n    const { width } = useWindowSize();\n    const targetRef = useRef<HTMLSpanElement>(null);\n    const [_open, _setIsOpen] = useCombinedState<boolean>(open, false);\n\n    // Force to fix later\n    nativeOnMobile = false;\n\n    const _onClose = (e: MouseEvent): void => {\n        _setIsOpen(false);\n        onClose?.(e);\n    };\n\n    const overlayRef = useRef<HTMLDivElement>(null);\n    useImperativeHandle(ref, () => overlayRef.current);\n\n    const _onSelected = (value: TOption[KeyName]) => {\n        onChange?.(value);\n        _setIsOpen(false);\n    };\n\n    const _getOption = (value: TOption[keyof TOption]): TOption | undefined => {\n        return options?.find((option) => option[keyName] === value);\n    };\n\n    const { selectingItem, onItemMouseMove, onItemMouseLeave, onItemMouseEnter } = useKeyboardControlOnSelect<TOption>({\n        onSelected: (item) => _onSelected(item[keyName]),\n        isEnabled: _open,\n        options,\n        idName: keyName,\n        overlayRef: overlayRef.current,\n        defaultOption: _getOption(value),\n    });\n\n    const _getLabel = (value: TOption[keyof TOption]): string => {\n        const option = options?.find((option) => option[keyName] === value);\n        return option?.[labelName] || value;\n    };\n\n    const native = width && width < MOBILE_BREAKPOINT && nativeOnMobile;\n\n    return (\n        <>\n            {(native || !target) && (\n                <span className={classNames('be-select', className)} onClick={() => _setIsOpen(true)} ref={targetRef}>\n                    {native ? (\n                        <select value={value} onChange={(e) => onChange(e.target.value as TOption[KeyName])}>\n                            {options.map((item) => {\n                                return <option value={value} key={item[keyName]} label={_getLabel(item[keyName])}></option>;\n                            })}\n                        </select>\n                    ) : (\n                        _getLabel(value)\n                    )}\n                    <Icon icon={IconType.Dropdown} color={Color.DarkGrey} />\n                </span>\n            )}\n            {!native && (\n                <Overlay\n                    offset={offset}\n                    usePortal={true}\n                    followElement={target || targetRef.current}\n                    placement=\"bottom-start\"\n                    open={open === undefined ? _open : open}\n                    onClose={_onClose}\n                    className=\"rs-select--suggest-list\"\n                    overlayRef={overlayRef}\n                >\n                    {options.map((option, index) => {\n                        const isSelected = option[keyName] === value;\n                        const isSelecting = option[keyName] === selectingItem?.[keyName];\n\n                        return (\n                            <div\n                                key={index}\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                </Overlay>\n            )}\n        </>\n    );\n};\n\nexport const Select = forwardRef(InnerSelect) as <TOption extends Option<KeyName>, KeyName extends string>(\n    p: Select<TOption, KeyName> & { ref?: Ref<HTMLDivElement> }\n) => JSX.Element;\n"]}
+{"version":3,"file":"Select.js","sourceRoot":"/","sources":["src/components/generic/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, ReactElement, ReactNode, Ref, useImperativeHandle, useRef } from 'react';\nimport Icon, { IconType } from '../Icon/Icon';\n\nimport classNames from 'classnames';\n\nimport './Select.global.scss';\nimport { Overlay, OverlayProps } from 'components/generic/Overlay/Overlay';\nimport { useKeyboardControlOnSelect } from 'hooks/KeyboardControlOnSelect';\nimport { Color } from 'util/Color';\nimport { useCombinedState } from 'hooks/CombineState';\nimport { useWindowSize } from 'hooks/WindowSize';\nimport Text, { TextType } from 'components/generic/Text';\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\ntype Select<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;\n    open?: boolean;\n    onClose?: (e: MouseEvent) => 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};\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    }: Select<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\n    // TODO: Force to fix later\n    nativeOnMobile = false;\n\n    const _onClose = (e: MouseEvent): void => {\n        _setIsOpen(false);\n        onClose?.(e);\n    };\n\n    const overlayRef = useRef<HTMLDivElement | null>(null);\n    useImperativeHandle(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 _getLabel = (value?: TOption[KeyName]): string | ReactNode => {\n        const option = _getOption(value);\n\n        if (renderLabel) {\n            return renderLabel(option);\n        }\n\n        return option?.[labelName] || 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    return (\n        <>\n            {(native || !target) && (\n                <span className={classNames('be-select', className)} onClick={() => _setIsOpen(true)} ref={targetRef}>\n                    {native ? (\n                        <select value={value} onChange={(e) => onChange?.(e.target.value as TOption[KeyName])}>\n                            {options.map((item) => {\n                                //@ts-ignore TODO: This needs to support opt groups\n                                return <option value={value} key={item[keyName]} label={_getLabel(item[keyName])}></option>;\n                            })}\n                        </select>\n                    ) : (\n                        _getLabel(value)\n                    )}\n                    <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                >\n                    <div ref={optionContainerRef} className={classNames('rs-select--suggest-list', overlay?.className)}>\n                        {_renderOptions(options)}\n                    </div>\n                </Overlay>\n            )}\n        </>\n    );\n};\n\nexport const Select = forwardRef(InnerSelect) as <TOption extends Option<KeyName>, KeyName extends string>(\n    p: Select<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.js

@@ -1,10 +1,36 @@
 "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 (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Slider = void 0;
-const React = require("react");
+const React = __importStar(require("react"));
 const react_1 = require("react");
-const classnames = require("classnames");
-const Slider_module_scss_1 = require("./Slider.module.scss");
+const classnames = __importStar(require("classnames"));
+const Slider_module_scss_1 = __importDefault(require("./Slider.module.scss"));
 const SliderMarker = (props) => {
     const markerClasses = classnames(Slider_module_scss_1.default['marker'], {
         [Slider_module_scss_1.default['--fixed']]: props.fixed,

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 * as React from 'react';\nimport { useState, useRef, useEffect } from 'react';\nimport * as classnames from 'classnames';\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);\n\n    const sliderRef = useRef(null);\n\n    const funcMarkers = props.markers.map(() => {});\n\n    const changeTrigger = (e: MouseEvent | React.MouseEvent, isOnDown = false) => {\n        const rect = (sliderRef?.current as HTMLElement)?.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 = 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        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) => {\n                    // TODO: Add labels if we\n                    // TODO: Possibly animate these with Spring library to make them smoother?\n                    return <SliderMarker offset={mapValueToPercent(marker.value)} marker={marker} fixed={true} 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) => {\n                    return <SliderMarker 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 * as React from 'react';\nimport { useState, useRef, useEffect } from 'react';\nimport * as classnames from 'classnames';\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);\n\n    const sliderRef = useRef(null);\n\n    const funcMarkers = props.markers.map(() => {});\n\n    const changeTrigger = (e: MouseEvent | React.MouseEvent, isOnDown = false) => {\n        const rect = (sliderRef?.current as HTMLElement)?.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 = 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        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) => {\n                    // TODO: Add labels if we\n                    // TODO: Possibly animate these with Spring library to make them smoother?\n                    return <SliderMarker offset={mapValueToPercent(marker.value)} marker={marker} fixed={true} 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) => {\n                    return <SliderMarker offset={mapValueToPercent(marker.value)} marker={marker} />;\n                })}\n            </div>\n        </div>\n    );\n};\n"]}

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

@@ -1,7 +1,30 @@
 "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 (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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.reactMap = exports.reactForEach = void 0;
-const React = require("react");
+const React = __importStar(require("react"));
 function reactForEach(children, func) {
     let index = 0;
     React.Children.forEach(children, (child) => {

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,+BAA+B;AAE/B,SAAgB,YAAY,CAAU,QAAa,EAAE,IAAwD;IACzG,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACvC,IAAI,KAAK,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,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,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 * as 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":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,SAAgB,YAAY,CAAU,QAAa,EAAE,IAAwD;IACzG,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACvC,IAAI,KAAK,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,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,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 * as 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"]}

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

@@ -1,7 +1,30 @@
 "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 (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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tab = void 0;
-const React = require("react");
+const React = __importStar(require("react"));
 const Tab = () => {
     throw new Error('The `Tab` component is not meant to be rendered! ' +
         "It's an abstract component that is only valid as a direct Child of the `Tabs` Component. " +

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"/","sources":["src/components/generic/Tabs/Tab.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAUxB,MAAM,GAAG,GAAuB,GAAG,EAAE;IACxC,MAAM,IAAI,KAAK,CACX,mDAAmD;QAC/C,2FAA2F;QAC3F,mEAAmE,CAC1E,CAAC;IACF,mCAAmC;IACnC,OAAO,yCAAK,CAAC;AACjB,CAAC,CAAC;AARW,QAAA,GAAG,OAQd","sourcesContent":["import * as React from 'react';\n\nexport interface TabProps {\n    title: React.ReactNode;\n    navPath: string;\n    disabled?: boolean;\n    tabClassName?: string;\n    tabAttrs?: Record<string, any>;\n}\n\nexport const Tab: React.FC<TabProps> = () => {\n    throw new Error(\n        'The `Tab` component is not meant to be rendered! ' +\n            \"It's an abstract component that is only valid as a direct Child of the `Tabs` Component. \" +\n            'For custom tabs components use TabPane and TabsContainer directly'\n    );\n    // Needed otherwise docs error out.\n    return <></>;\n};\n"]}
+{"version":3,"file":"Tab.js","sourceRoot":"/","sources":["src/components/generic/Tabs/Tab.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAUxB,MAAM,GAAG,GAAuB,GAAG,EAAE;IACxC,MAAM,IAAI,KAAK,CACX,mDAAmD;QAC/C,2FAA2F;QAC3F,mEAAmE,CAC1E,CAAC;IACF,mCAAmC;IACnC,OAAO,yCAAK,CAAC;AACjB,CAAC,CAAC;AARW,QAAA,GAAG,OAQd","sourcesContent":["import * as React from 'react';\n\nexport interface TabProps {\n    title: React.ReactNode;\n    navPath: string;\n    disabled?: boolean;\n    tabClassName?: string;\n    tabAttrs?: Record<string, any>;\n}\n\nexport const Tab: React.FC<TabProps> = () => {\n    throw new Error(\n        'The `Tab` component is not meant to be rendered! ' +\n            \"It's an abstract component that is only valid as a direct Child of the `Tabs` Component. \" +\n            'For custom tabs components use TabPane and TabsContainer directly'\n    );\n    // Needed otherwise docs error out.\n    return <></>;\n};\n"]}

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

@@ -1,7 +1,30 @@
 "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 (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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabContextProvider = exports.default = void 0;
-const React = require("react");
+const React = __importStar(require("react"));
 const react_1 = require("react");
 const TabContext = React.createContext({
     activeKey: '',

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

@@ -1 +1 @@
-{"version":3,"file":"TabContext.js","sourceRoot":"/","sources":["src/components/generic/Tabs/TabContext.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAA4C;AAU5C,MAAM,UAAU,GAAG,KAAK,CAAC,aAAa,CAAkB;IACpD,SAAS,EAAE,EAAE;IACb,SAAS,EAAE,CAAC;IACZ,YAAY,EAAE,CAAC;IACf,QAAQ,EAAE,GAAG,EAAE;QACX,EAAE;IACN,CAAC;CACJ,CAAC,CAAC;AAmCoB,6BAAO;AA3B9B,MAAM,kBAAkB,GAAsC,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,EAAE,EAAE,EAAE;IACvG,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAW,EAAE,CAAC,CAAC;IACzD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAS,CAAC,CAAC,CAAC;IACtD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAS,CAAC,CAAC,CAAC;IAE5D,MAAM,SAAS,GAAG;QACd,SAAS;QACT,SAAS;QACT,YAAY;QACZ,QAAQ,EAAE,CAAC,MAAgB,EAAE,KAAa,EAAE,EAAE;YAC1C,+CAA+C;YAC/C,uGAAuG;YACvG,kCAAkC;YAClC,QAAQ,CAAC,MAAM,CAAC,CAAC;YACjB,YAAY,CAAC,YAAY,CAAC,CAAC;YAC3B,eAAe,CAAC,KAAK,CAAC,CAAC;YACvB,YAAY,CAAC,MAAM,CAAC,CAAC;QACzB,CAAC;KACJ,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,YAAY,CAAC,gBAAgB,CAAC,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,oBAAC,UAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,IAAG,QAAQ,CAAuB,CAAC;AACnF,CAAC,CAAC;AAE8B,gDAAkB","sourcesContent":["import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { EventKey } from 'components/generic/Tabs/Tabs';\n\ninterface TabContextProps {\n    activeKey: EventKey;\n    lastIndex: number;\n    currentIndex: number;\n    onChange: (newKey: EventKey, index: number) => void;\n}\n\nconst TabContext = React.createContext<TabContextProps>({\n    activeKey: '',\n    lastIndex: 0,\n    currentIndex: 0,\n    onChange: () => {\n        //\n    },\n});\n\ninterface TabContextProviderProps {\n    children: any;\n    defaultActiveKey: EventKey;\n    onChange: (key: EventKey) => void;\n}\n\nconst TabContextProvider: React.FC<TabContextProviderProps> = ({ children, defaultActiveKey, onChange }) => {\n    const [activeKey, setActiveKey] = useState<EventKey>('');\n    const [lastIndex, setLastIndex] = useState<number>(0);\n    const [currentIndex, setCurrentIndex] = useState<number>(0);\n\n    const tabValues = {\n        activeKey,\n        lastIndex,\n        currentIndex,\n        onChange: (newKey: EventKey, index: number) => {\n            // TODO: Add checks for Tab state being \"Dirty\"\n            // This means if you're in the middle of editing a form, and you press back / forward, we don't want to\n            // yank the user out of their flow\n            onChange(newKey);\n            setLastIndex(currentIndex);\n            setCurrentIndex(index);\n            setActiveKey(newKey);\n        },\n    };\n\n    useEffect(() => {\n        setActiveKey(defaultActiveKey);\n    }, []);\n\n    return <TabContext.Provider value={tabValues}>{children}</TabContext.Provider>;\n};\n\nexport { TabContext as default, TabContextProvider };\n"]}
+{"version":3,"file":"TabContext.js","sourceRoot":"/","sources":["src/components/generic/Tabs/TabContext.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,iCAA4C;AAU5C,MAAM,UAAU,GAAG,KAAK,CAAC,aAAa,CAAkB;IACpD,SAAS,EAAE,EAAE;IACb,SAAS,EAAE,CAAC;IACZ,YAAY,EAAE,CAAC;IACf,QAAQ,EAAE,GAAG,EAAE;QACX,EAAE;IACN,CAAC;CACJ,CAAC,CAAC;AAmCoB,6BAAO;AA3B9B,MAAM,kBAAkB,GAAsC,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,EAAE,EAAE,EAAE;IACvG,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAW,EAAE,CAAC,CAAC;IACzD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAS,CAAC,CAAC,CAAC;IACtD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAS,CAAC,CAAC,CAAC;IAE5D,MAAM,SAAS,GAAG;QACd,SAAS;QACT,SAAS;QACT,YAAY;QACZ,QAAQ,EAAE,CAAC,MAAgB,EAAE,KAAa,EAAE,EAAE;YAC1C,+CAA+C;YAC/C,uGAAuG;YACvG,kCAAkC;YAClC,QAAQ,CAAC,MAAM,CAAC,CAAC;YACjB,YAAY,CAAC,YAAY,CAAC,CAAC;YAC3B,eAAe,CAAC,KAAK,CAAC,CAAC;YACvB,YAAY,CAAC,MAAM,CAAC,CAAC;QACzB,CAAC;KACJ,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,YAAY,CAAC,gBAAgB,CAAC,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,oBAAC,UAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,IAAG,QAAQ,CAAuB,CAAC;AACnF,CAAC,CAAC;AAE8B,gDAAkB","sourcesContent":["import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { EventKey } from 'components/generic/Tabs/Tabs';\n\ninterface TabContextProps {\n    activeKey: EventKey;\n    lastIndex: number;\n    currentIndex: number;\n    onChange: (newKey: EventKey, index: number) => void;\n}\n\nconst TabContext = React.createContext<TabContextProps>({\n    activeKey: '',\n    lastIndex: 0,\n    currentIndex: 0,\n    onChange: () => {\n        //\n    },\n});\n\ninterface TabContextProviderProps {\n    children: any;\n    defaultActiveKey: EventKey;\n    onChange: (key: EventKey) => void;\n}\n\nconst TabContextProvider: React.FC<TabContextProviderProps> = ({ children, defaultActiveKey, onChange }) => {\n    const [activeKey, setActiveKey] = useState<EventKey>('');\n    const [lastIndex, setLastIndex] = useState<number>(0);\n    const [currentIndex, setCurrentIndex] = useState<number>(0);\n\n    const tabValues = {\n        activeKey,\n        lastIndex,\n        currentIndex,\n        onChange: (newKey: EventKey, index: number) => {\n            // TODO: Add checks for Tab state being \"Dirty\"\n            // This means if you're in the middle of editing a form, and you press back / forward, we don't want to\n            // yank the user out of their flow\n            onChange(newKey);\n            setLastIndex(currentIndex);\n            setCurrentIndex(index);\n            setActiveKey(newKey);\n        },\n    };\n\n    useEffect(() => {\n        setActiveKey(defaultActiveKey);\n    }, []);\n\n    return <TabContext.Provider value={tabValues}>{children}</TabContext.Provider>;\n};\n\nexport { TabContext as default, TabContextProvider };\n"]}

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

@@ -1,12 +1,38 @@
 "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 (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabLink = void 0;
-const React = require("react");
-const classnames_1 = require("classnames");
-const TabContext_1 = require("components/generic/Tabs/TabContext");
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const TabContext_1 = __importDefault(require("components/generic/Tabs/TabContext"));
 const react_router_dom_1 = require("react-router-dom");
 const react_1 = require("react");
-const Text_1 = require("components/generic/Text");
+const Text_1 = __importDefault(require("components/generic/Text"));
 const Color_1 = require("util/Color");
 const TabLink = (props) => {
     const tabContext = (0, react_1.useContext)(TabContext_1.default);

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

@@ -1 +1 @@
-{"version":3,"file":"TabLink.js","sourceRoot":"/","sources":["src/components/generic/Tabs/TabLink.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,2CAA4B;AAC5B,mEAA4D;AAC5D,uDAA2C;AAC3C,iCAAmC;AACnC,kDAA2C;AAC3C,sCAAmC;AAE5B,MAAM,OAAO,GAAG,CAAC,KAAU,EAAE,EAAE;IAClC,MAAM,UAAU,GAAG,IAAA,kBAAU,EAAC,oBAAU,CAAC,CAAC;IAE1C,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAElD,IAAI,CAAC,KAAK,EAAE;QACR,OAAO,IAAI,CAAC;KACf;IAED,OAAO,CACH;QACI,oBAAC,0BAAO,IACJ,EAAE,EAAE,OAAO,EACX,eAAe,EAAC,QAAQ,EACxB,SAAS,EAAE,IAAA,oBAAE,EAAC,aAAa,EAAE,EAAE,QAAQ,EAAE,CAAC,EAC1C,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACX,IAAI,QAAQ,EAAE;oBACV,CAAC,CAAC,cAAc,EAAE,CAAC;iBACtB;qBAAM;oBACH,UAAU,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;iBACvC;YACL,CAAC;YAED,8BAAM,SAAS,EAAE,IAAA,oBAAE,EAAC,YAAY,CAAC;gBAC7B,oBAAC,cAAI,IAAC,KAAK,EAAE,aAAK,CAAC,QAAQ,EAAE,IAAI,UAC5B,KAAK,CACH,CACJ,CACD,CACT,CACR,CAAC;AACN,CAAC,CAAC;AA/BW,QAAA,OAAO,WA+BlB","sourcesContent":["import * as React from 'react';\nimport cx from 'classnames';\nimport TabContext from 'components/generic/Tabs/TabContext';\nimport { NavLink } from 'react-router-dom';\nimport { useContext } from 'react';\nimport Text from 'components/generic/Text';\nimport { Color } from 'util/Color';\n\nexport const TabLink = (props: any) => {\n    const tabContext = useContext(TabContext);\n\n    const { title, navPath, disabled, index } = props;\n\n    if (!title) {\n        return null;\n    }\n\n    return (\n        <li>\n            <NavLink\n                to={navPath}\n                activeClassName=\"active\"\n                className={cx('c-nav-item ', { disabled })}\n                onClick={(e) => {\n                    if (disabled) {\n                        e.preventDefault();\n                    } else {\n                        tabContext.onChange(navPath, index);\n                    }\n                }}\n            >\n                <span className={cx('c-nav-link')}>\n                    <Text color={Color.DarkGrey} bold>\n                        {title}\n                    </Text>\n                </span>\n            </NavLink>\n        </li>\n    );\n};\n"]}
+{"version":3,"file":"TabLink.js","sourceRoot":"/","sources":["src/components/generic/Tabs/TabLink.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,4DAA4B;AAC5B,oFAA4D;AAC5D,uDAA2C;AAC3C,iCAAmC;AACnC,mEAA2C;AAC3C,sCAAmC;AAE5B,MAAM,OAAO,GAAG,CAAC,KAAU,EAAE,EAAE;IAClC,MAAM,UAAU,GAAG,IAAA,kBAAU,EAAC,oBAAU,CAAC,CAAC;IAE1C,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAElD,IAAI,CAAC,KAAK,EAAE;QACR,OAAO,IAAI,CAAC;KACf;IAED,OAAO,CACH;QACI,oBAAC,0BAAO,IACJ,EAAE,EAAE,OAAO,EACX,eAAe,EAAC,QAAQ,EACxB,SAAS,EAAE,IAAA,oBAAE,EAAC,aAAa,EAAE,EAAE,QAAQ,EAAE,CAAC,EAC1C,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACX,IAAI,QAAQ,EAAE;oBACV,CAAC,CAAC,cAAc,EAAE,CAAC;iBACtB;qBAAM;oBACH,UAAU,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;iBACvC;YACL,CAAC;YAED,8BAAM,SAAS,EAAE,IAAA,oBAAE,EAAC,YAAY,CAAC;gBAC7B,oBAAC,cAAI,IAAC,KAAK,EAAE,aAAK,CAAC,QAAQ,EAAE,IAAI,UAC5B,KAAK,CACH,CACJ,CACD,CACT,CACR,CAAC;AACN,CAAC,CAAC;AA/BW,QAAA,OAAO,WA+BlB","sourcesContent":["import * as React from 'react';\nimport cx from 'classnames';\nimport TabContext from 'components/generic/Tabs/TabContext';\nimport { NavLink } from 'react-router-dom';\nimport { useContext } from 'react';\nimport Text from 'components/generic/Text';\nimport { Color } from 'util/Color';\n\nexport const TabLink = (props: any) => {\n    const tabContext = useContext(TabContext);\n\n    const { title, navPath, disabled, index } = props;\n\n    if (!title) {\n        return null;\n    }\n\n    return (\n        <li>\n            <NavLink\n                to={navPath}\n                activeClassName=\"active\"\n                className={cx('c-nav-item ', { disabled })}\n                onClick={(e) => {\n                    if (disabled) {\n                        e.preventDefault();\n                    } else {\n                        tabContext.onChange(navPath, index);\n                    }\n                }}\n            >\n                <span className={cx('c-nav-link')}>\n                    <Text color={Color.DarkGrey} bold>\n                        {title}\n                    </Text>\n                </span>\n            </NavLink>\n        </li>\n    );\n};\n"]}

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

@@ -1,12 +1,38 @@
 "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 (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabRouteContainer = void 0;
 const web_1 = require("@react-spring/web");
-const React = require("react");
+const React = __importStar(require("react"));
 const react_1 = require("react");
 const react_router_1 = require("react-router");
 const ElementChildren_1 = require("components/generic/Tabs/ElementChildren");
-const TabContext_1 = require("components/generic/Tabs/TabContext");
+const TabContext_1 = __importDefault(require("components/generic/Tabs/TabContext"));
 function TabRouteContainer({ children }) {
     const tabContext = (0, react_1.useContext)(TabContext_1.default);
     const transitions = (0, web_1.useTransition)(tabContext.activeKey, {

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

@@ -1 +1 @@
-{"version":3,"file":"TabRouteContainer.js","sourceRoot":"/","sources":["src/components/generic/Tabs/TabRouteContainer.tsx"],"names":[],"mappings":";;;AAAA,2CAA4D;AAC5D,+BAA+B;AAC/B,iCAA8C;AAC9C,+CAAuD;AACvD,6EAAmE;AACnE,mEAA4D;AAM5D,SAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAA0B;IAClE,MAAM,UAAU,GAAG,IAAA,kBAAU,EAAC,oBAAU,CAAC,CAAC;IAE1C,MAAM,WAAW,GAAG,IAAA,mBAAa,EAAC,UAAU,CAAC,SAAS,EAAE;QACpD,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE;QAC1C,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE;QACxC,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE;QAC3C,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE;QAC3C,MAAM,EAAE;YACJ,QAAQ,EAAE,EAAE;SACf;KACJ,CAAC,CAAC;IAEH,OAAO,CACH,6BAAK,SAAS,EAAC,WAAW,IACrB,WAAW,CAAC,CAAC,KAAK,EAAE,EAAE;QACnB,OAAO,CACH,oBAAC,cAAQ,CAAC,GAAG,IAAC,KAAK,kBAAI,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,IAAM,KAAa;YACvD,oBAAC,qBAAM;gBACF,IAAA,0BAAQ,EAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAC3B,oBAAC,oBAAK,IAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,IAAG,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAS,CACnE,CAAC;gBAEF,oBAAC,oBAAK,IAAC,IAAI,EAAC,GAAG;oBACX,oBAAC,uBAAQ,IAAC,EAAE,EAAG,QAAgB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,GAAI,CAC7D,CACH,CACE,CAClB,CAAC;IACN,CAAC,CAAC,CACA,CACT,CAAC;AACN,CAAC;AAhCD,8CAgCC","sourcesContent":["import { animated, useTransition } from '@react-spring/web';\nimport * as React from 'react';\nimport { ReactNode, useContext } from 'react';\nimport { Switch, Route, Redirect } from 'react-router';\nimport { reactMap } from 'components/generic/Tabs/ElementChildren';\nimport TabContext from 'components/generic/Tabs/TabContext';\n\ninterface TabRouteContainerProps {\n    children: ReactNode[];\n}\n\nexport function TabRouteContainer({ children }: TabRouteContainerProps) {\n    const tabContext = useContext(TabContext);\n\n    const transitions = useTransition(tabContext.activeKey, {\n        from: { opacity: 0, position: 'absolute' },\n        to: { opacity: 1, position: 'relative' },\n        enter: { opacity: 1, position: 'absolute' },\n        leave: { opacity: 0, position: 'absolute' },\n        config: {\n            friction: 25,\n        },\n    });\n\n    return (\n        <div className=\"u-pos-rel\">\n            {transitions((props) => {\n                return (\n                    <animated.div style={{ left: 0, right: 0, ...(props as any) }}>\n                        <Switch>\n                            {reactMap(children, (child) => (\n                                <Route path={child.props.navPath}>{child.props.children}</Route>\n                            ))}\n                            {/* Adding a redirect if no route is matched */}\n                            <Route path=\"*\">\n                                <Redirect to={(children as any)[0].props.navPath} push={false} />\n                            </Route>\n                        </Switch>\n                    </animated.div>\n                );\n            })}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"TabRouteContainer.js","sourceRoot":"/","sources":["src/components/generic/Tabs/TabRouteContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA4D;AAC5D,6CAA+B;AAC/B,iCAA8C;AAC9C,+CAAuD;AACvD,6EAAmE;AACnE,oFAA4D;AAM5D,SAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAA0B;IAClE,MAAM,UAAU,GAAG,IAAA,kBAAU,EAAC,oBAAU,CAAC,CAAC;IAE1C,MAAM,WAAW,GAAG,IAAA,mBAAa,EAAC,UAAU,CAAC,SAAS,EAAE;QACpD,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE;QAC1C,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE;QACxC,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE;QAC3C,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE;QAC3C,MAAM,EAAE;YACJ,QAAQ,EAAE,EAAE;SACf;KACJ,CAAC,CAAC;IAEH,OAAO,CACH,6BAAK,SAAS,EAAC,WAAW,IACrB,WAAW,CAAC,CAAC,KAAK,EAAE,EAAE;QACnB,OAAO,CACH,oBAAC,cAAQ,CAAC,GAAG,IAAC,KAAK,kBAAI,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,IAAM,KAAa;YACvD,oBAAC,qBAAM;gBACF,IAAA,0BAAQ,EAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAC3B,oBAAC,oBAAK,IAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,IAAG,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAS,CACnE,CAAC;gBAEF,oBAAC,oBAAK,IAAC,IAAI,EAAC,GAAG;oBACX,oBAAC,uBAAQ,IAAC,EAAE,EAAG,QAAgB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,GAAI,CAC7D,CACH,CACE,CAClB,CAAC;IACN,CAAC,CAAC,CACA,CACT,CAAC;AACN,CAAC;AAhCD,8CAgCC","sourcesContent":["import { animated, useTransition } from '@react-spring/web';\nimport * as React from 'react';\nimport { ReactNode, useContext } from 'react';\nimport { Switch, Route, Redirect } from 'react-router';\nimport { reactMap } from 'components/generic/Tabs/ElementChildren';\nimport TabContext from 'components/generic/Tabs/TabContext';\n\ninterface TabRouteContainerProps {\n    children: ReactNode[];\n}\n\nexport function TabRouteContainer({ children }: TabRouteContainerProps) {\n    const tabContext = useContext(TabContext);\n\n    const transitions = useTransition(tabContext.activeKey, {\n        from: { opacity: 0, position: 'absolute' },\n        to: { opacity: 1, position: 'relative' },\n        enter: { opacity: 1, position: 'absolute' },\n        leave: { opacity: 0, position: 'absolute' },\n        config: {\n            friction: 25,\n        },\n    });\n\n    return (\n        <div className=\"u-pos-rel\">\n            {transitions((props) => {\n                return (\n                    <animated.div style={{ left: 0, right: 0, ...(props as any) }}>\n                        <Switch>\n                            {reactMap(children, (child) => (\n                                <Route path={child.props.navPath}>{child.props.children}</Route>\n                            ))}\n                            {/* Adding a redirect if no route is matched */}\n                            <Route path=\"*\">\n                                <Redirect to={(children as any)[0].props.navPath} push={false} />\n                            </Route>\n                        </Switch>\n                    </animated.div>\n                );\n            })}\n        </div>\n    );\n}\n"]}

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

@@ -1,14 +1,40 @@
 "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 (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
+const React = __importStar(require("react"));
 const uncontrollable_1 = require("uncontrollable");
 const react_1 = require("swiper/react");
-const LineBreak_1 = require("components/generic/LineBreak");
+const LineBreak_1 = __importDefault(require("components/generic/LineBreak"));
 const ElementChildren_1 = require("components/generic/Tabs/ElementChildren");
 const TabContext_1 = require("components/generic/Tabs/TabContext");
 const TabLink_1 = require("components/generic/Tabs/TabLink");
 const TabRouteContainer_1 = require("components/generic/Tabs/TabRouteContainer");
-const tabs_module_scss_1 = require("./tabs.module.scss");
+const tabs_module_scss_1 = __importDefault(require("./tabs.module.scss"));
 const getDefaultActiveKey = (children) => {
     let defaultActiveKey;
     (0, ElementChildren_1.reactForEach)(children, (child) => {