\r\n {currentBreakpoint && (\r\n
\r\n )\r\n}\r\n","/**\r\n * Check if a given date is DST in the US\r\n * - begins on the second Sunday in March\r\n * - ends on the first Sunday in November\r\n *\r\n * Keep in sync with https://github.com/finvizhq/charts/blob/master/app/utils.ts\r\n */\r\nexport function getIsDstInNy(date: Date) {\r\n const dayNumber = date.getDate()\r\n const monthIndex = date.getMonth()\r\n const dayOfWeek = date.getDay()\r\n const previousSunday = dayNumber - dayOfWeek\r\n if (monthIndex < 2 || monthIndex > 10) {\r\n return false\r\n }\r\n if (monthIndex > 2 && monthIndex < 10) {\r\n return true\r\n }\r\n return monthIndex === 2 ? previousSunday >= 8 : previousSunday <= 0\r\n}\r\n\r\nexport function getDate(seed?: string | number | Date) {\r\n var date = seed != null ? new Date(seed) : new Date()\r\n const dateAsNY = new Date(\r\n date.getUTCFullYear(),\r\n date.getUTCMonth(),\r\n date.getUTCDate(),\r\n date.getUTCHours() - 5,\r\n date.getUTCMinutes(),\r\n date.getUTCSeconds()\r\n )\r\n const isDst = getIsDstInNy(dateAsNY)\r\n\r\n if (isDst) {\r\n dateAsNY.setUTCHours(dateAsNY.getUTCHours() + 1)\r\n }\r\n\r\n return dateAsNY\r\n}\r\n\r\nfunction getWeekDay(date: Date) {\r\n return date.toLocaleDateString('en-US', { weekday: 'short' })\r\n}\r\n\r\nfunction getMonth(date: Date) {\r\n return date.toLocaleDateString('en-US', { month: 'short' }).toUpperCase()\r\n}\r\n\r\nfunction getDay(date: Date) {\r\n return date.getDate().toString().padStart(2, '0')\r\n}\r\n\r\nfunction getTime(date: Date) {\r\n return date.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })\r\n}\r\n\r\nenum TimeFormat {\r\n long,\r\n short,\r\n timeOnly,\r\n}\r\n\r\nexport type TimeFormatType = keyof typeof TimeFormat\r\n\r\nexport function getFormattedDateString(date: Date = getDate(), format: TimeFormatType = 'long') {\r\n switch (TimeFormat[format]) {\r\n case TimeFormat.long:\r\n return `${getWeekDay(date)} ${getMonth(date)} ${getDay(date)} ${date.getFullYear()} ${getTime(date)} ET`\r\n case TimeFormat.short:\r\n return `${getWeekDay(date)} ${getMonth(date)} ${getDay(date)} ${getTime(date)}`\r\n case TimeFormat.timeOnly:\r\n return getTime(date)\r\n }\r\n}\r\n\r\nexport function isPremarket(date: Date = getDate(), isPremium = FinvizSettings.hasUserPremium) {\r\n const dayOfWeek = date.getDay()\r\n const min = date.getMinutes()\r\n\r\n if (\r\n isPremium &&\r\n dayOfWeek !== 0 &&\r\n dayOfWeek !== 6 &&\r\n (date.getHours() === 8 || (date.getHours() === 9 && min < 30))\r\n ) {\r\n return true\r\n }\r\n return false\r\n}\r\n\r\nexport function isAftermarket(date: Date = getDate(), isPremium = FinvizSettings.hasUserPremium) {\r\n const dayOfWeek = date.getDay()\r\n const min = date.getMinutes()\r\n\r\n if (\r\n isPremium &&\r\n dayOfWeek !== 0 &&\r\n dayOfWeek !== 6 &&\r\n (date.getHours() === 16 || (date.getHours() === 17 && min < 30))\r\n ) {\r\n return true\r\n }\r\n return false\r\n}\r\n\r\n/**\r\n * https://www.nyse.com/markets/hours-calendars\r\n */\r\nconst HOLIDAY_DATES = [\r\n {\r\n label: \"New Year's Day\",\r\n test: (day: number, month: number) => month === 1 && day === 2,\r\n },\r\n {\r\n label: 'Martin Luther King, Jr. Day',\r\n test: (day: number, month: number) => month === 1 && day === 16,\r\n },\r\n {\r\n label: 'Presidents Day',\r\n test: (day: number, month: number) => month === 2 && day === 20,\r\n },\r\n {\r\n label: 'Good Friday',\r\n test: (day: number, month: number) => month === 4 && day === 7,\r\n },\r\n {\r\n label: 'Memorial Day',\r\n test: (day: number, month: number) => month === 5 && day === 29,\r\n },\r\n {\r\n label: 'Juneteenth Holiday',\r\n test: (day: number, month: number) => month === 6 && day === 19,\r\n },\r\n {\r\n label: 'Early Close',\r\n test: (day: number, month: number, hours: number) => month === 7 && day === 3 && hours >= 13,\r\n },\r\n {\r\n label: 'Independence Day',\r\n test: (day: number, month: number) => month === 7 && day === 4,\r\n },\r\n {\r\n label: 'Labor Day',\r\n test: (day: number, month: number) => month === 9 && day === 4,\r\n },\r\n {\r\n label: 'Thanksgiving Day',\r\n test: (day: number, month: number) => month === 11 && day === 23,\r\n },\r\n {\r\n label: 'Day after Thanksgiving (closed from 1 PM)',\r\n test: (day: number, month: number, hours: number) => month === 11 && day === 24 && hours >= 13,\r\n },\r\n {\r\n label: 'Christmas Day',\r\n test: (day: number, month: number) => month === 12 && day === 25,\r\n },\r\n]\r\n\r\nexport function getHoliday(date: Date = getDate()) {\r\n var day = date.getDate()\r\n var month = date.getMonth() + 1\r\n var hours = date.getHours()\r\n\r\n return HOLIDAY_DATES.find((holiday) => holiday.test(day, month, hours))\r\n}\r\n\r\nexport function isHoliday(date: Date = getDate()) {\r\n return !!getHoliday(date)\r\n}\r\n\r\nexport function isMarketOpen(date: Date = getDate(), isPremium = FinvizSettings.hasUserPremium) {\r\n if (isPremarket(date, isPremium) || isAftermarket(date, isPremium) || isHoliday(date)) {\r\n return false\r\n }\r\n\r\n const dayOfWeek = date.getDay()\r\n const hour = date.getHours()\r\n const minute = date.getMinutes()\r\n\r\n const isWeekend = dayOfWeek === 0 || dayOfWeek === 6\r\n // Day starts at 9:30\r\n const dayStarted = hour === 9 ? minute >= 30 : hour >= 10\r\n // Ends at 16:00\r\n const dayEnded = hour >= 16\r\n\r\n return !isWeekend && dayStarted && !dayEnded\r\n}\r\n","export type ObjectHash\r\n {currentBreakpoint.marketBadgeText ? (\r\n
\r\n )}\r\n \r\n
\r\n {label ?? children}\r\n \r\n )\r\n}\r\n\r\nexport const Checkbox = forwardRef(CheckboxComponent)\r\n","import classnames from 'classnames'\r\nimport { HTMLProps, PropsWithChildren, memo, useCallback, useLayoutEffect, useRef, useState } from 'react'\r\n\r\nexport interface Interaction {\r\n left: number\r\n top: number\r\n}\r\n\r\n/**\r\n * Clamp value between two bounds\r\n */\r\nfunction clamp(num: number, min = 0, max = 1) {\r\n return num > max ? max : num < min ? min : num\r\n}\r\n\r\n/**\r\n * Check if an event was triggered by touch\r\n */\r\nfunction isTouch(event: MouseEvent | TouchEvent): event is TouchEvent {\r\n return 'touches' in event\r\n}\r\n\r\n/**\r\n * Returns a relative position of the pointer inside the node's bounding box\r\n */\r\nfunction getRelativePosition(node: HTMLDivElement, event: MouseEvent | TouchEvent): Interaction {\r\n const rect = node.getBoundingClientRect()\r\n\r\n // Get user's pointer position from `touches` array if it's a `TouchEvent`\r\n const pointer = isTouch(event) ? event.touches[0] : (event as MouseEvent)\r\n\r\n return {\r\n left: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),\r\n top: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height),\r\n }\r\n}\r\n\r\n/**\r\n * Browsers introduced an intervention, making touch events passive by default.\r\n * This workaround removes `preventDefault` call from the touch handlers.\r\n * @see https://github.com/facebook/react/issues/19651\r\n */\r\nfunction preventDefaultMove(event: MouseEvent | TouchEvent) {\r\n !isTouch(event) && event.preventDefault()\r\n}\r\n\r\ninterface Props {\r\n onMove: (interaction: Interaction) => void\r\n onKey: (offset: Interaction) => void\r\n}\r\n\r\nfunction DraggablePickerComponent({\r\n onMove,\r\n onKey,\r\n className,\r\n ...props\r\n}: PropsWithChildren\r\n \r\n
\r\n \r\n {colors.map((colorObj) => {\r\n const isSelected = lowerCaseColor.startsWith(colorObj.value)\r\n return (\r\n onChange(colorObj.value, hexStringToHSVA(colorObj.value))}\r\n >\r\n {isSelected &&
\r\n )\r\n })}\r\n \r\n )\r\n}\r\n","import { useCallback, useMemo } from 'react'\r\n\r\nimport { DraggablePicker, Interaction } from './draggable'\r\nimport { Pointer } from './pointer'\r\nimport { HSVA, hsvaToHEXString } from './util'\r\n\r\ninterface HueSaturationProps {\r\n color: HSVA\r\n onChange: (color: HSVA) => void\r\n}\r\n\r\nfunction getPositionFromHSLA(color: HSVA) {\r\n return {\r\n left: color.h / 360,\r\n top: 1 - color.s,\r\n }\r\n}\r\n\r\nexport function HueSaturation({ color, onChange }: HueSaturationProps) {\r\n const position = useMemo(() => getPositionFromHSLA(color), [color])\r\n\r\n const colorPreview = useMemo(() => hsvaToHEXString({ h: color.h, s: color.s, v: 1, a: 1 }), [color.h, color.s])\r\n\r\n const changeSaturation = useCallback(\r\n (pos: Interaction) =>\r\n onChange({\r\n h: Math.round(pos.left * 360),\r\n s: 1 - pos.top,\r\n v: 1,\r\n a: color.a,\r\n }),\r\n [color.a, onChange]\r\n )\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n {isValidIconName(icon) ? (\r\n
\r\n )}\r\n {colors.map((color, index) => (\r\n // has to be there because of a bug on safari which ignores h-full when empty element\r\n \r\n \r\n
\r\n ))}\r\n \r\n )\r\n}\r\n","import classnames from 'classnames'\r\nimport React, { ForwardedRef, useCallback, useEffect, useState } from 'react'\r\n\r\nimport { Input, InputComponentProps } from '../input'\r\nimport { ColorPreview } from './color-preview'\r\nimport { ColorPickerProps } from './picker'\r\nimport * as colorUtil from './util'\r\n\r\ninterface PickerInputProps extends Omit\r\n
\r\n )}\r\n {!isRgba && #}\r\n \r\n }\r\n onChange={handleColorInputChange}\r\n />\r\n )\r\n }\r\n)\r\n","import classnames from 'classnames'\r\nimport React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'\r\n\r\nimport { isMobile } from '../../../app/shared/isMobile'\r\nimport { Button } from '../button'\r\nimport { Popover, PopoverTrigger, usePopoverState } from '../popover'\r\nimport { Alpha } from './alpha'\r\nimport { ColorPalette } from './color-palette'\r\nimport { HueSaturation } from './hue-saturation'\r\nimport { Lightness } from './lightness'\r\nimport { PickerInput } from './picker-input'\r\nimport * as colorUtil from './util'\r\n\r\nexport interface ColorPickerProps {\r\n /**\r\n * The selected color in HEX format (supports HEX8 for alpha)\r\n */\r\n color: string\r\n\r\n /**\r\n * Whether or not the user is able to select custom color\r\n *\r\n * @default true\r\n */\r\n canSelectCustom?: boolean\r\n\r\n /**\r\n * Whether or not the user is able to change alpha channel. Only applicable\r\n * when `canSelectCustom` is true\r\n *\r\n * @default true\r\n */\r\n canSelectAlpha?: boolean\r\n\r\n /**\r\n * Sets the output format for the color picker\r\n *\r\n * @default 'hex'\r\n */\r\n outputFormat?: 'hex' | 'rgba'\r\n\r\n /**\r\n * Callback when user changes color. Use the second parameter to do color space\r\n * conversions otherwise the color could differ due to rounding\r\n */\r\n onChange: (color: string, originalColor: colorUtil.HSVA) => void\r\n\r\n /**\r\n * Callback when user clicks on a palette item. Used to close popover\r\n */\r\n onPaletteItemClick?: () => void\r\n}\r\n\r\nexport function ColorPicker({\r\n color,\r\n canSelectCustom = true,\r\n canSelectAlpha = true,\r\n outputFormat = 'hex',\r\n onChange,\r\n onPaletteItemClick,\r\n}: ColorPickerProps) {\r\n const cachedColor = useRef(color)\r\n const [hsvaColor, setColor] = useState(colorUtil.getHSVAFromColor(color))\r\n\r\n /**\r\n * Update state if the color from outside changed\r\n */\r\n useEffect(() => {\r\n const currentColor = colorUtil.removeHashSymbol(cachedColor.current)\r\n const newColor = colorUtil.removeHashSymbol(color)\r\n\r\n if (currentColor === newColor || !colorUtil.isValidColor(newColor)) return\r\n\r\n cachedColor.current = color\r\n setColor(colorUtil.getHSVAFromColor(color))\r\n }, [color])\r\n\r\n /**\r\n * Handle color change\r\n * 1. update cache so we can correctly check when outside color updates\r\n * 2. Update internal color representation\r\n * 3. call onChange with string color\r\n */\r\n const onChangeCallback = useCallback(\r\n (color: colorUtil.HSVA) => {\r\n const stringColor = colorUtil.stringifyHSVAColor(color, outputFormat, canSelectAlpha)\r\n cachedColor.current = stringColor\r\n onChange(stringColor, color)\r\n setColor(color)\r\n },\r\n [onChange, canSelectAlpha, outputFormat]\r\n )\r\n\r\n const onSetCustomCodeClick = useCallback(() => {\r\n const value = prompt('Enter a color code')?.trim()\r\n\r\n if (!value) return\r\n\r\n const isValid = colorUtil.isValidColor(value)\r\n\r\n if (!isValid) {\r\n return alert('The code is not a valid color')\r\n }\r\n\r\n onChangeCallback(colorUtil.getHSVAFromColor(value))\r\n }, [onChangeCallback])\r\n\r\n return (\r\n \r\n {canSelectCustom && (\r\n <>\r\n {isMobile() && (\r\n \r\n )}\r\n \r\n {\r\n onPaletteItemClick?.()\r\n onChangeCallback({ ...orignalColor, a: hsvaColor.a })\r\n }}\r\n />\r\n
\r\n \r\n )\r\n}\r\n\r\ninterface InputColorPickerProps extends ColorPickerProps {\r\n /**\r\n * Label for the input\r\n */\r\n label?: ReactNode\r\n inputDataTestId?: string\r\n}\r\n\r\nexport function InputColorPicker({ label, inputDataTestId, onChange, ...props }: InputColorPickerProps) {\r\n const popoverState = usePopoverState()\r\n const canSelectCustom = props.canSelectCustom !== false\r\n const isMobileDevice = isMobile()\r\n\r\n return (\r\n <>\r\n \r\n
\r\n )}\r\n \r\n \r\n {colors.map(({ color, label }, index) => (\r\n setActiveColorIndex(index)}\r\n >\r\n {label}\r\n \r\n ))}\r\n \r\n
\r\n )}\r\n \r\n e.currentTarget.select()}\r\n inputClass=\"h-12\"\r\n data-testid=\"copy-to-clipboard-textarea\"\r\n value={text}\r\n />\r\n
\r\n )\r\n}\r\n","import * as React from 'react'\r\nimport { CalendarProps } from 'react-calendar'\r\n\r\nimport { Box } from '../box'\r\nimport { ZIndexContext } from '../dialog'\r\nimport { Popover, PopoverTrigger, usePopoverState } from '../popover'\r\nimport { Spinner } from '../spinner'\r\n\r\nconst DatePickerComponent = React.lazy(() => import('./picker'))\r\n\r\ntype RangePickerCallback = (value: [Date, Date], ev: React.ChangeEvent\r\n {bottomLeftContent && \r\n {isCopied ? 'Copied' : 'Copy'}\r\n \r\n
\r\n {bottomLeftContent}
}\r\n props.onClick()} />\r\n}\r\n","export function getExtendedDialogState(state: { visible: boolean; animating: boolean }) {\r\n return {\r\n isFullyOpened: state.visible && !state.animating,\r\n isFullyClosed: !state.visible && !state.animating,\r\n }\r\n}\r\n","import classnames from 'classnames'\r\nimport * as React from 'react'\r\nimport * as Reakit from 'reakit/Dialog'\r\nimport { Portal } from 'reakit/Portal'\r\n\r\nimport { DialogBox, DialogBoxProps } from './dialog-box'\r\nimport { DialogOverlay } from './dialog-overlay'\r\nimport { DialogDragContext, DialogStateReturn, ZIndexContext, useDrag } from './hooks'\r\nimport { getExtendedDialogState } from './utils'\r\n\r\nexport enum DialogType {\r\n modal,\r\n drawer,\r\n}\r\n\r\nexport interface DialogProps extends DialogBoxProps, Pick {\r\n /**\r\n * The returned object from `useDialogState`\r\n */\r\n state: DialogStateReturn\r\n\r\n /**\r\n * Any additional props to the Reakit Dialog component\r\n */\r\n finalFocusRef?: React.RefObject\r\n\r\n /**\r\n * Callback which is called when the dialog closes and all animations complete\r\n */\r\n onHide?: () => void\r\n\r\n /**\r\n * Callback which is called when the dialog overlay is clicked\r\n * default behavior (closing the dialog) will be overridden so it has to be called manually\r\n */\r\n onOverlayClick?: () => void\r\n\r\n /**\r\n * Sets if the dialog can be dragged across the screen\r\n *\r\n * @default false\r\n */\r\n isDraggable?: boolean\r\n\r\n /**\r\n * Type of dialog\r\n *\r\n * @default modal\r\n */\r\n type?: keyof typeof DialogType\r\n\r\n /**\r\n * Sets if backdrop overlay prevents interaction with rest of page, onOverlayClick will have no effect if isBackdropDisabled is true\r\n *\r\n * @default false\r\n */\r\n isBackdropDisabled?: boolean\r\n}\r\n\r\nconst DIALOG_BACKDROP_WIDTH_CSS_VAR = '--dialog-backgrop-width'\r\n\r\n/**\r\n * The actual dialog component which renders overlay, box and handles all the\r\n * functionality like focus trapping, etc.\r\n */\r\nexport function Dialog({\r\n state,\r\n finalFocusRef,\r\n onHide,\r\n onOverlayClick,\r\n children,\r\n hide,\r\n hideOnEsc,\r\n isDraggable = false,\r\n isBackdropDisabled = false,\r\n type = 'modal',\r\n 'aria-label': ariaLabel,\r\n ...props\r\n}: React.PropsWithChildren) {\r\n const dialogDrag = useDrag(isDraggable)\r\n const { isFullyClosed } = getExtendedDialogState(state)\r\n\r\n React.useEffect(() => {\r\n const onResize = () => {\r\n // Save to css var because it can change and that could make modal dialog jump on open\r\n document.body.style.setProperty(DIALOG_BACKDROP_WIDTH_CSS_VAR, `${document.documentElement.clientWidth}px`)\r\n }\r\n\r\n window.addEventListener('resize', onResize)\r\n onResize()\r\n\r\n return () => {\r\n window.removeEventListener('resize', onResize)\r\n }\r\n }, [])\r\n\r\n const DialogWrapper = state.modal ? React.Fragment : Portal\r\n\r\n return (\r\n \r\n \r\n {({ onTransitionEnd, onAnimationEnd, ...innerProps }) => {\r\n if (isFullyClosed) return null\r\n\r\n return (\r\n \r\n \r\n {!isBackdropDisabled && \r\n \r\n {\r\n onHide?.()\r\n dialogDrag.resetBoxPosition()\r\n }}\r\n >\r\n {children}\r\n \r\n \r\n \r\n
\r\n \r\n )\r\n }}\r\n \r\n \r\n )\r\n}\r\n","import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'\r\nimport classnames from 'classnames'\r\nimport * as React from 'react'\r\n\r\nimport { isMobile } from '../../../app/shared/isMobile'\r\n\r\ninterface DialogBodyProps extends React.HTMLProps{subtitle}
}\r\n \r\n )\r\n }}\r\n \r\n
\r\n \r\n {caption && typeof caption !== 'boolean' && (\r\n \r\n \r\n {caption && typeof caption !== 'boolean' && (\r\n {caption} \r\n )}\r\n {error && typeof error !== 'boolean' && {error} }\r\n
\r\n )\r\n}\r\n\r\nexport const Input = forwardRef(InputComponent)\r\nexport const Textarea = forwardRef(TextareaComponent)\r\n","import * as React from 'react'\r\nimport * as Reakit from 'reakit/Composite'\r\n\r\nexport const ListContext = React.createContext{props.children}
\r\n {props.actions ?? }
\r\n \r\n )\r\n}\r\n","import * as React from 'react'\r\n\r\nimport { NotificationContextType, useNotification } from './hooks'\r\n\r\nexport function withNotificationContext\r\n \r\n {React.Children.map(children, (child) => {\r\n if (!React.isValidElement(child)) return child\r\n\r\n if (child.type === ComboBoxItem) {\r\n return React.cloneElement(child as React.ReactElement>, {\r\n state,\r\n onMouseUp: () => {\r\n onChange(child.props.value)\r\n },\r\n })\r\n }\r\n\r\n return child\r\n })}\r\n \r\n
\r\n )}\r\n \r\n \r\n Show all results\r\n \r\n
\r\n )\r\n}\r\n","import { useQueryErrorResetBoundary } from '@tanstack/react-query'\r\nimport * as React from 'react'\r\nimport { ErrorBoundary } from 'react-error-boundary'\r\n\r\nimport { ComboBox, useComboBoxState } from '../combo-box'\r\nimport { getExtendedDialogState } from '../dialog'\r\nimport { InputTheme } from '../input'\r\nimport { List, ListItem, useListState } from '../list'\r\nimport { INSTRUMENT_CATEGORIES } from './constants'\r\nimport { SearchError } from './search-error'\r\nimport { SearchList } from './search-list'\r\nimport { getRedirectForTicker } from './util'\r\n\r\ninterface SearchProps {\r\n autoFocus?: boolean\r\n defaultValue?: string\r\n theme?: keyof typeof InputTheme\r\n}\r\n\r\nexport function Search(props: SearchProps) {\r\n const { reset } = useQueryErrorResetBoundary()\r\n const state = useComboBoxState({ minValueLength: 1, inputValue: props.defaultValue, placement: 'bottom-end' })\r\n const { isFullyClosed } = getExtendedDialogState(state)\r\n const listState = useListState({ orientation: 'vertical' })\r\n const [category, setCategory] = React.useState(0)\r\n\r\n const changeCategory = React.useRef((ev: React.KeyboardEvent) => {\r\n switch (ev.key) {\r\n case 'ArrowRight':\r\n state.first()\r\n break\r\n case 'ArrowUp':\r\n setCategory((state) => (state - 1 + INSTRUMENT_CATEGORIES.length) % INSTRUMENT_CATEGORIES.length)\r\n break\r\n case 'ArrowDown':\r\n setCategory((state) => (state + 1) % INSTRUMENT_CATEGORIES.length)\r\n break\r\n }\r\n })\r\n\r\n /**\r\n * The search box can be child of a modal/dialog so we need to handle ESC\r\n * otherwise it would close both the combobox and the parent.\r\n */\r\n const onInputKeyDown = React.useCallback(\r\n (ev: React.KeyboardEvent) => {\r\n if (ev.key === 'Escape' && state.visible) {\r\n ev.stopPropagation()\r\n state.hide()\r\n }\r\n },\r\n // We only use `visible` and `hide` and don’t need the full state\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n [state.visible, state.hide]\r\n )\r\n\r\n /**\r\n * Reset to category \"All\" when the combobox closes\r\n */\r\n React.useEffect(() => {\r\n if (isFullyClosed) {\r\n setCategory(0)\r\n }\r\n }, [isFullyClosed])\r\n\r\n return (\r\n \r\n {data.map((item) => (\r\n
\r\n \r\n setCategory(index)}\r\n onKeyDown={changeCategory.current}\r\n >\r\n {INSTRUMENT_CATEGORIES.map((category) => (\r\n {category.name} \r\n ))}\r\n \r\n {(state.visible || state.animating) && (\r\n \r\n
\r\n \r\n )\r\n}\r\n","import * as Reakit from 'reakit/Combobox'\r\n\r\nimport { COMPONENT_ANIMATION_DURATION } from '../constants'\r\n\r\nexport function useComboBoxState(options?: Reakit.unstable_ComboboxInitialState) {\r\n return Reakit.unstable_useComboboxState({\r\n ...options,\r\n animated: COMPONENT_ANIMATION_DURATION,\r\n modal: false,\r\n inline: true,\r\n unstable_offset: [0, 5],\r\n })\r\n}\r\n","import * as React from 'react'\r\n\r\nimport { PopoverStateReturn } from '../popover'\r\nimport { SelectItem } from './types'\r\n\r\nfunction getSelectedItemIndex(items: SelectItem\r\n {label}}>\r\n \r\n
\r\n )}\r\n \r\n )\r\n}\r\n","import classNames from 'classnames'\r\nimport * as React from 'react'\r\nimport { Link, To } from 'react-router-dom'\r\n\r\nimport { BoxRounding } from '../box'\r\nimport { Button, ButtonHTMLProps, ButtonProps, ButtonSizeType } from '../button'\r\nimport { DropdownSeparator } from '../dropdown'\r\nimport { Icon } from '../icon'\r\nimport { SelectItem, SelectOption, SelectWithTooltip } from '../select'\r\nimport { LabelWithDelayedSpinner } from './label-with-delayed-spinner'\r\n\r\nexport type TimeframeBaseOption\r\n
\r\n )}\r\n {!isCompactView && (\r\n \r\n {\r\n /*\r\n * Vertical scrolling doesn't scroll horizontally by default (it's possible when holding shift)\r\n * When using touchpad we may get values in both delatX and deltaY, so if someone's scrolling horizontally we don't want to do anything\r\n * but if they are scrolling vertically (deltaY > deltaX) we want to scroll horizontally the value they would nativally scroll in vertical direction\r\n * */\r\n const absDx = Math.abs(event.deltaX)\r\n const absDy = Math.abs(event.deltaY)\r\n if (absDy > absDx) {\r\n event.currentTarget.scrollLeft += event.deltaY\r\n }\r\n }}\r\n >\r\n \r\n {timeframesInExpandedPanel.map((timeframe) => (\r\n onTimeframeSelect(timeframe)}\r\n rounding={rounding}\r\n >\r\n
\r\n \r\n
\r\n )}\r\n \r\n )\r\n}\r\n","import classnames from 'classnames'\r\nimport * as React from 'react'\r\n\r\nimport { TooltipColor } from './types'\r\n\r\nexport interface TooltipBoxProps extends Omit\r\n \r\n \r\n \r\n {children}\r\n \r\n
\r\n )}\r\n \r\n {children} \r\n
\r\n )\r\n}\r\n","import classnames from 'classnames'\r\nimport * as React from 'react'\r\n\r\nimport { Button, ButtonHTMLProps, ButtonProps } from '../button'\r\nimport { Delayed } from '../delayed'\r\nimport { Icon } from '../icon'\r\nimport { PropsWithAs } from '../types'\r\nimport { useToolbarContext } from './hooks'\r\nimport { IToolbarItem, ToolbarTheme } from './interfaces'\r\n\r\nfunction getButtonThemeSettings({\r\n theme,\r\n isActive,\r\n isStretched,\r\n isInAction,\r\n}: {\r\n theme: ToolbarTheme\r\n isStretched: boolean\r\n isActive?: boolean\r\n isInAction?: boolean\r\n}): Omit