@roomstay/frontend 2.1.6 → 2.1.7

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

@@ -45,6 +45,13 @@ const InnerSelect = ({ target, open, onClose, options = [], value, onChange, key
     const optionRefs = (0, react_1.useRef)({});
     const optionContainerRef = (0, react_1.useRef)(null);
     const [_open, _setIsOpen] = (0, CombineState_1.useCombinedState)(open, false);
+    const flattenOptions = (0, react_1.useMemo)(() => {
+        return options.reduce((result, optionGroupProbably) => {
+            if (optionGroupProbably.options)
+                return result.concat(optionGroupProbably.options);
+            return result.concat(optionGroupProbably);
+        }, []);
+    }, [options]);
     // TODO: Force to fix later
     nativeOnMobile = false;
     const _onClose = (e) => {
@@ -76,7 +83,7 @@ const InnerSelect = ({ target, open, onClose, options = [], value, onChange, key
     };
     const { selectingItem, onItemMouseMove, onItemMouseLeave, onItemMouseEnter } = (0, KeyboardControlOnSelect_1.useKeyboardControlOnSelect)({
         onSelected: (item) => _onSelected(item[keyName]),
-        isEnabled: _open,
+        isEnabled: !!_open,
         options,
         idName: keyName,
         overlayRef: overlayRef.current,
@@ -84,12 +91,16 @@ const InnerSelect = ({ target, open, onClose, options = [], value, onChange, key
         optionRefs,
         optionContainerRef,
     });
+    const _getStringLabel = (value) => {
+        const option = _getOption(value);
+        return (option === null || option === void 0 ? void 0 : option[labelName]) || value || '';
+    };
     const _getLabel = (value) => {
         const option = _getOption(value);
         if (renderLabel) {
             return renderLabel(option);
         }
-        return (option === null || option === void 0 ? void 0 : option[labelName]) || value || '';
+        return _getStringLabel(value);
     };
     const _renderOptions = (options) => {
         if (!options)
@@ -121,12 +132,11 @@ const InnerSelect = ({ target, open, onClose, options = [], value, onChange, key
     const native = width && width < MOBILE_BREAKPOINT && nativeOnMobile;
     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]) });
+            native ? (react_1.default.createElement("select", { value: value, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value) }, flattenOptions.map((item) => {
+                return react_1.default.createElement("option", { value: value, key: item[keyName], label: _getStringLabel(item[keyName]) });
             }))) : (_getLabel(value)),
             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 },
+        !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;

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 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"]}
+{"version":3,"file":"Select.js","sourceRoot":"/","sources":["src/components/generic/Select/Select.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8G;AAC9G,qDAA8C;AAE9C,4DAAoC;AAEpC,gCAA8B;AAC9B,kEAA6E;AAC7E,6EAA6E;AAC7E,wCAAqC;AACrC,uDAAwD;AACxD,mDAAmD;AACnD,kEAA2D;AA+B3D,MAAM,iBAAiB,GAAG,GAAG,CAAC;AAEvB,MAAM,WAAW,GAAG,CACvB,EACI,MAAM,EACN,IAAI,EACJ,OAAO,EACP,OAAO,GAAG,EAAE,EACZ,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,EACT,SAAS,EACT,MAAM,EACN,YAAY,EACZ,cAAc,GAAG,KAAK,EACtB,OAAO,EACP,WAAW,GACY,EAC3B,GAA+B,EACjC,EAAE;;IACA,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,0BAAa,GAAE,CAAC;IAClC,MAAM,SAAS,GAAG,IAAA,cAAM,EAAkB,IAAI,CAAC,CAAC;IAChD,MAAM,UAAU,GAAG,IAAA,cAAM,EAA0C,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IAC/D,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,GAAG,IAAA,+BAAgB,EAAU,IAAI,EAAE,KAAK,CAAC,CAAC;IACnE,MAAM,cAAc,GAAG,IAAA,eAAO,EAAY,GAAG,EAAE;QAC3C,OAAO,OAAO,CAAC,MAAM,CAAY,CAAC,MAAM,EAAE,mBAAmB,EAAE,EAAE;YAC7D,IAAI,mBAAmB,CAAC,OAAO;gBAAE,OAAO,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;YACnF,OAAO,MAAM,CAAC,MAAM,CAAC,mBAA8B,CAAC,CAAC;QACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IACX,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,2BAA2B;IAC3B,cAAc,GAAG,KAAK,CAAC;IAEvB,MAAM,QAAQ,GAAG,CAAC,CAAQ,EAAQ,EAAE;QAChC,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IACvD,IAAA,2BAAmB,EAA+C,GAAG,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAEjG,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;QAC5C,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,CAAC,CAAC;QAClB,UAAU,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,KAAwB,EAAuB,EAAE;QACjE,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;YAC1B,IAAI,MAAM,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE;gBACjD,KAAK,MAAM,WAAW,IAAI,MAAM,CAAC,OAAO,EAAE;oBACtC,IAAI,WAAW,CAAC,OAAO,CAAC,KAAK,KAAK,EAAE;wBAChC,OAAO,WAAW,CAAC;qBACtB;iBACJ;aACJ;iBAAM;gBACH,sGAAsG;gBACtG,IAAK,MAAkB,CAAC,OAAO,CAAC,KAAK,KAAK,EAAE;oBACxC,OAAO,MAAiB,CAAC;iBAC5B;aACJ;SACJ;IACL,CAAC,CAAC;IAEF,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,GAAG,IAAA,oDAA0B,EAAmB;QACxH,UAAU,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAChD,SAAS,EAAE,CAAC,CAAC,KAAK;QAClB,OAAO;QACP,MAAM,EAAE,OAAO;QACf,UAAU,EAAE,UAAU,CAAC,OAAO;QAC9B,aAAa,EAAE,UAAU,CAAC,KAAK,CAAC;QAChC,UAAU;QACV,kBAAkB;KACrB,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,CAAC,KAAwB,EAAU,EAAE;QACzD,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QACjC,OAAO,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,SAAS,CAAC,KAAI,KAAK,IAAI,EAAE,CAAC;IAC9C,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,KAAwB,EAAsB,EAAE;QAC/D,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QAEjC,IAAI,WAAW,EAAE;YACb,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC;SAC9B;QAED,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,OAAqC,EAAuC,EAAE;QAClG,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAC;QAC1B,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YACjC,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;YAE/B,IAAI,OAAO,EAAE;gBACT,OAAO,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;aACpD;YAED,OAAO,aAAa,CAAC,EAAE,MAAM,EAAE,MAAiB,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC;QACpE,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,IAAY,EAAE,OAAqC,EAAE,EAAE;QACzE,OAAO,CACH;YACI,uCAAK,SAAS,EAAC,4CAA4C;gBACvD,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ,IAC5C,IAAI,CACF,CACL;YACL,cAAc,CAAC,OAAO,CAAC,CACzB,CACN,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,EAAiC,EAAE,EAAE;QACrE,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,KAAK,CAAC;QAC7C,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,MAAK,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,OAAO,CAAC,CAAA,CAAC;QAEjE,OAAO,CACH,uCACI,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,GAAG,CAAC,EACzD,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAU,EAAC,8BAA8B,EAAE,EAAE,YAAY,EAAE,UAAU,IAAI,WAAW,EAAE,CAAC,EAClG,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,EAC3C,YAAY,EAAE,GAAG,EAAE;gBACf,gBAAgB,CAAC,MAAM,CAAC,CAAC;YAC7B,CAAC,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,gBAAgB,EAAE,EACtC,WAAW,EAAE,GAAG,EAAE,CAAC,eAAe,EAAE;YAEpC,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,SAAS,EAAC,qCAAqC,IACtE,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CACtE;YACN,UAAU,IAAI,CACX,wCAAM,SAAS,EAAC,qCAAqC;gBACjD,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,GAAI,CAC3B,CACV,CACC,CACT,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,KAAK,IAAI,KAAK,GAAG,iBAAiB,IAAI,cAAc,CAAC;IAEpE,OAAO,CACH;QACK,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,CACpB,wCAAM,SAAS,EAAE,IAAA,oBAAU,EAAC,WAAW,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,SAAS;YAC/F,MAAM,CAAC,CAAC,CAAC,CACN,0CAAQ,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,MAAM,CAAC,KAAyB,CAAC,IAChF,cAAc,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBACzB,OAAO,0CAAQ,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAW,CAAC;YACtG,CAAC,CAAC,CACG,CACZ,CAAC,CAAC,CAAC,CACA,SAAS,CAAC,KAAK,CAAC,CACnB;YACD,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,QAAQ,EAAE,KAAK,EAAE,aAAK,CAAC,QAAQ,GAAI,CACrD,CACV;QACA,CAAC,MAAM,IAAI,CACR,8BAAC,iBAAO,IACJ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,mCAAI,IAAI,EACrC,aAAa,EAAE,MAAM,IAAI,SAAS,CAAC,OAAO,IAAI,SAAS,EACvD,SAAS,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,mCAAI,cAAc,EAC/C,QAAQ,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,EAC3B,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EACzC,OAAO,EAAE,QAAQ,EACjB,kBAAkB,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,EAC/C,UAAU,EAAE,UAAU;YAEtB,uCAAK,GAAG,EAAE,kBAAkB,EAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,yBAAyB,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,CAAC,IAC7F,cAAc,CAAC,OAAO,CAAC,CACtB,CACA,CACb,CACF,CACN,CAAC;AACN,CAAC,CAAC;AArLW,QAAA,WAAW,eAqLtB;AAEW,QAAA,MAAM,GAAG,IAAA,kBAAU,EAAC,mBAAW,CAE5B,CAAC","sourcesContent":["import React, { forwardRef, ReactElement, ReactNode, Ref, useImperativeHandle, useMemo, 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 | 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};\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    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    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                            {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                    <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/Select.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=Select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"/","sources":["src/components/generic/Select.tsx"],"names":[],"mappings":"","sourcesContent":[""]}

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 export type MarkerType = {
     isVisible: boolean;
     label?: string | React.ReactNode;
@@ -8,8 +8,8 @@ export type BackgroundMarkerType = {
     isEdge?: 'start' | 'end';
 } & MarkerType;
 type SliderProps = {
-    min?: number;
-    max?: number;
+    min: number;
+    max: number;
     onChange?: (markers: MarkerType[]) => void;
     markers: MarkerType[];
     backgroundMarkers?: BackgroundMarkerType[];

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

@@ -1,43 +1,21 @@
 "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 = __importStar(require("react"));
-const react_1 = require("react");
-const classnames = __importStar(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
+const classnames_1 = __importDefault(require("classnames"));
 const Slider_module_scss_1 = __importDefault(require("./Slider.module.scss"));
 const SliderMarker = (props) => {
-    const markerClasses = classnames(Slider_module_scss_1.default['marker'], {
+    var _a;
+    const markerClasses = (0, classnames_1.default)(Slider_module_scss_1.default['marker'], {
         [Slider_module_scss_1.default['--fixed']]: props.fixed,
-        [Slider_module_scss_1.default['--hidden']]: !props.marker.isVisible,
+        [Slider_module_scss_1.default['--hidden']]: !((_a = props.marker) === null || _a === void 0 ? void 0 : _a.isVisible),
         [Slider_module_scss_1.default[`--${props.isEdge}`]]: !!props.isEdge,
     });
-    const markerLabelClasses = classnames(Slider_module_scss_1.default['marker-label'], {
+    const markerLabelClasses = (0, classnames_1.default)(Slider_module_scss_1.default['marker-label'], {
         [Slider_module_scss_1.default['--fixed']]: props.fixed,
         [Slider_module_scss_1.default[`--${props.isEdge}`]]: !!props.isEdge,
     });
@@ -45,7 +23,7 @@ const SliderMarker = (props) => {
     if (props.offset) {
         markerStyles.left = Math.max(Math.min(100, props.offset), 0) + '%';
     }
-    return (React.createElement("span", { className: markerClasses, style: markerStyles }, props.marker && !!props.marker.label && React.createElement("span", { className: markerLabelClasses }, props.marker.label)));
+    return (react_1.default.createElement("span", { className: markerClasses, style: markerStyles }, props.marker && !!props.marker.label && react_1.default.createElement("span", { className: markerLabelClasses }, props.marker.label)));
 };
 /**
  * Specifically a ranged slider, specifically for the Filter section of the Step Room display.
@@ -54,12 +32,11 @@ const SliderMarker = (props) => {
 const Slider = (props) => {
     var _a, _b;
     const { min = 0, max = 100 } = props;
-    const [isMouseDown, setIsMouseDown] = (0, react_1.useState)(false);
-    const [movingIndex, setMovingIndex] = (0, react_1.useState)(null);
-    const sliderRef = (0, react_1.useRef)(null);
-    const funcMarkers = props.markers.map(() => { });
+    const [isMouseDown, setIsMouseDown] = (0, react_2.useState)(false);
+    const [movingIndex, setMovingIndex] = (0, react_2.useState)(null);
+    const sliderRef = (0, react_2.useRef)(null);
     const changeTrigger = (e, isOnDown = false) => {
-        var _a;
+        var _a, _b;
         const rect = (_a = sliderRef === null || sliderRef === void 0 ? void 0 : sliderRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
         if (!rect) {
             return;
@@ -77,8 +54,9 @@ const Slider = (props) => {
             }
         }
         const newMarkers = [...props.markers];
-        newMarkers[closestIndex].value = newValue;
-        props.onChange(newMarkers);
+        if (closestIndex !== null)
+            newMarkers[closestIndex].value = newValue;
+        (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, newMarkers);
         setMovingIndex(closestIndex);
     };
     const onMouseDown = (e) => {
@@ -92,7 +70,7 @@ const Slider = (props) => {
         newValue = (baseNewValue / totalDiff) * 100;
         return Math.min(Math.max(newValue, 0), 100);
     };
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         var _a;
         let cancelled = false;
         // Creating a bounding rect here to figure out how big the slider is,
@@ -121,16 +99,16 @@ const Slider = (props) => {
             document.body.removeEventListener('mousemove', mouseMoveListener);
         };
     }, [movingIndex]);
-    return (React.createElement("div", { className: Slider_module_scss_1.default.slider, onMouseDown: onMouseDown, ref: sliderRef },
-        React.createElement("div", { className: Slider_module_scss_1.default['slider-track'] }, (_b = ((_a = props.backgroundMarkers) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 :
-            _b.map((marker) => {
+    return (react_1.default.createElement("div", { className: Slider_module_scss_1.default.slider, onMouseDown: onMouseDown, ref: sliderRef },
+        react_1.default.createElement("div", { className: Slider_module_scss_1.default['slider-track'] }, (_b = ((_a = props.backgroundMarkers) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 :
+            _b.map((marker, index) => {
                 // TODO: Add labels if we
                 // TODO: Possibly animate these with Spring library to make them smoother?
-                return React.createElement(SliderMarker, { offset: mapValueToPercent(marker.value), marker: marker, fixed: true, isEdge: marker.isEdge });
+                return react_1.default.createElement(SliderMarker, { key: index, offset: mapValueToPercent(marker.value), marker: marker, fixed: true, isEdge: marker.isEdge });
             }),
-            React.createElement("div", { className: Slider_module_scss_1.default['slider-rail'], style: { left: `${mapValueToPercent(props.markers[0].value)}%`, right: `${100 - mapValueToPercent(props.markers[1].value)}%` } }),
-            props.markers.map((marker) => {
-                return React.createElement(SliderMarker, { offset: mapValueToPercent(marker.value), marker: marker });
+            react_1.default.createElement("div", { className: Slider_module_scss_1.default['slider-rail'], style: { left: `${mapValueToPercent(props.markers[0].value)}%`, right: `${100 - mapValueToPercent(props.markers[1].value)}%` } }),
+            props.markers.map((marker, index) => {
+                return react_1.default.createElement(SliderMarker, { key: index, offset: mapValueToPercent(marker.value), marker: marker });
             }))));
 };
 exports.Slider = Slider;

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 React from 'react';\nimport { useState, useRef, useEffect } from 'react';\nimport 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>(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.d.ts

@@ -1,3 +1,3 @@
-import * as React from 'react';
+import React from 'react';
 export declare function reactForEach<P = any>(children: any, func: (el: React.ReactElement<P>, index: number) => void): void;
 export declare function reactMap<P = any>(children: any, func: (el: React.ReactElement<P>, index: number) => any): any;

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

@@ -1,41 +1,21 @@
 "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.reactMap = exports.reactForEach = void 0;
-const React = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 function reactForEach(children, func) {
     let index = 0;
-    React.Children.forEach(children, (child) => {
-        if (React.isValidElement(child))
+    react_1.default.Children.forEach(children, (child) => {
+        if (react_1.default.isValidElement(child))
             func(child, index++);
     });
 }
 exports.reactForEach = reactForEach;
 function reactMap(children, func) {
     let index = 0;
-    return React.Children.map(children, (child) => (React.isValidElement(child) ? func(child, index++) : child));
+    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,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"]}
+{"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"]}

package/dist/src/components/generic/Tabs/Tab.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 export interface TabProps {
     title: React.ReactNode;
     navPath: string;

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

@@ -1,36 +1,16 @@
 "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.Tab = void 0;
-const React = __importStar(require("react"));
+const react_1 = __importDefault(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. " +
         'For custom tabs components use TabPane and TabsContainer directly');
     // Needed otherwise docs error out.
-    return React.createElement(React.Fragment, null);
+    return react_1.default.createElement(react_1.default.Fragment, null);
 };
 exports.Tab = Tab;
 //# sourceMappingURL=Tab.js.map

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,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"]}
+{"version":3,"file":"Tab.js","sourceRoot":"/","sources":["src/components/generic/Tabs/Tab.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAUnB,MAAM,GAAG,GAAuB,GAAG,EAAE;IACxC,MAAM,IAAI,KAAK,CACX,mDAAmD;QAC/C,2FAA2F;QAC3F,mEAAmE,CAC1E,CAAC;IACF,mCAAmC;IACnC,OAAO,6DAAK,CAAC;AACjB,CAAC,CAAC;AARW,QAAA,GAAG,OAQd","sourcesContent":["import 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.d.ts

@@ -1,16 +1,15 @@
-import * as React from 'react';
-import { EventKey } from './Tabs';
+import React from 'react';
 interface TabContextProps {
-    activeKey: EventKey;
+    activeKey: string;
     lastIndex: number;
     currentIndex: number;
-    onChange: (newKey: EventKey, index: number) => void;
+    onChange: (newKey: string, index: number) => void;
 }
 declare const TabContext: React.Context<TabContextProps>;
 interface TabContextProviderProps {
     children: any;
-    defaultActiveKey: EventKey;
-    onChange: (key: EventKey) => void;
+    defaultActiveKey: string;
+    onChange?: (key: string) => void;
 }
 declare const TabContextProvider: React.FC<TabContextProviderProps>;
 export { TabContext as default, TabContextProvider };

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

@@ -1,32 +1,12 @@
 "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.TabContextProvider = exports.default = void 0;
-const React = __importStar(require("react"));
-const react_1 = require("react");
-const TabContext = React.createContext({
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
+const TabContext = react_1.default.createContext({
     activeKey: '',
     lastIndex: 0,
     currentIndex: 0,
@@ -36,9 +16,9 @@ const TabContext = React.createContext({
 });
 exports.default = TabContext;
 const TabContextProvider = ({ children, defaultActiveKey, onChange }) => {
-    const [activeKey, setActiveKey] = (0, react_1.useState)('');
-    const [lastIndex, setLastIndex] = (0, react_1.useState)(0);
-    const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
+    const [activeKey, setActiveKey] = (0, react_2.useState)('');
+    const [lastIndex, setLastIndex] = (0, react_2.useState)(0);
+    const [currentIndex, setCurrentIndex] = (0, react_2.useState)(0);
     const tabValues = {
         activeKey,
         lastIndex,
@@ -47,16 +27,16 @@ const TabContextProvider = ({ children, defaultActiveKey, onChange }) => {
             // TODO: Add checks for Tab state being "Dirty"
             // This means if you're in the middle of editing a form, and you press back / forward, we don't want to
             // yank the user out of their flow
-            onChange(newKey);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newKey);
             setLastIndex(currentIndex);
             setCurrentIndex(index);
             setActiveKey(newKey);
         },
     };
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         setActiveKey(defaultActiveKey);
     }, []);
-    return React.createElement(TabContext.Provider, { value: tabValues }, children);
+    return react_1.default.createElement(TabContext.Provider, { value: tabValues }, children);
 };
 exports.TabContextProvider = TabContextProvider;
 //# sourceMappingURL=TabContext.js.map

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,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"]}
+{"version":3,"file":"TabContext.js","sourceRoot":"/","sources":["src/components/generic/Tabs/TabContext.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,iCAA4C;AAU5C,MAAM,UAAU,GAAG,eAAK,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,EAAS,EAAE,CAAC,CAAC;IACvD,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,MAAc,EAAE,KAAa,EAAE,EAAE;YACxC,+CAA+C;YAC/C,uGAAuG;YACvG,kCAAkC;YAClC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,MAAM,CAAC,CAAC;YACnB,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,8BAAC,UAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,IAAG,QAAQ,CAAuB,CAAC;AACnF,CAAC,CAAC;AAE8B,gDAAkB","sourcesContent":["import React from 'react';\nimport { useEffect, useState } from 'react';\nimport { EventKey } from '@/components/generic/Tabs/Tabs';\n\ninterface TabContextProps {\n    activeKey: string;\n    lastIndex: number;\n    currentIndex: number;\n    onChange: (newKey: string, 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: string;\n    onChange?: (key: string) => void;\n}\n\nconst TabContextProvider: React.FC<TabContextProviderProps> = ({ children, defaultActiveKey, onChange }) => {\n    const [activeKey, setActiveKey] = useState<string>('');\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: string, 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.d.ts

@@ -1 +1 @@
-export declare const TabLink: (props: any) => JSX.Element;
+export declare const TabLink: (props: any) => JSX.Element | null;