\r\n )}\r\n \r\n )\r\n}\r\n\r\n/**\r\n * We need to forward ref to the function, but typescript looses the type of the\r\n * props param so we need to typecast to get suggestions to work\r\n */\r\nexport const Button = React.forwardRef(ButtonComponent) as <\r\n TagType extends React.ElementType = typeof BUTTON_DEFAULT_ELEMENT,\r\n>(\r\n props: PropsWithAs & ButtonProps & { ref?: React.ForwardedRef }\r\n) => ReturnType\r\n","/**\r\n * Used for reakit as the duration of a open/close animation. The animation itself is done using css\r\n */\r\nexport const COMPONENT_ANIMATION_DURATION = 250\r\n","import * as React from 'react'\r\nimport * as Reakit from 'reakit/Dialog'\r\n\r\nimport { isMobile } from '../../../app/shared/isMobile'\r\nimport { COMPONENT_ANIMATION_DURATION } from '../constants'\r\n\r\nexport const ZIndexContext = React.createContext('z-50')\r\n\r\nexport function useZIndex() {\r\n return React.useContext(ZIndexContext)\r\n}\r\n\r\nexport type DialogStateReturn = ReturnType\r\n/**\r\n * Hook which provides state to dialogs\r\n */\r\nexport function useDialogState(settings?: Reakit.DialogInitialState) {\r\n return Reakit.useDialogState({ ...settings, animated: COMPONENT_ANIMATION_DURATION })\r\n}\r\n\r\nexport const DialogDragContext = React.createContext<{\r\n enabled?: boolean\r\n handleRef?: React.RefObject\r\n boxPosition: { x: number; y: number }\r\n resetBoxPosition: () => void\r\n setBoxPosition: React.Dispatch>\r\n}>({\r\n enabled: false,\r\n handleRef: undefined,\r\n boxPosition: { x: 0, y: 0 },\r\n resetBoxPosition: () => {},\r\n setBoxPosition: () => {},\r\n})\r\n\r\n/**\r\n * Hook which allows an element on the page to become draggable\r\n */\r\nexport function useDrag(enabled?: boolean) {\r\n const dragging = React.useRef(false)\r\n const handleRef = React.useRef(null)\r\n const handleElement = handleRef.current\r\n\r\n /**\r\n * Set box position in both state for the component to re-render and as a ref\r\n * so that we don’t have to re-run the whole effect on every change\r\n */\r\n const [boxPosition, setBoxPosition] = React.useState({ x: 0, y: 0 })\r\n const boxPositionRef = React.useRef({ x: 0, y: 0 })\r\n const dragDiff = React.useRef({ x: 0, y: 0 })\r\n\r\n const { current: resetBoxPosition } = React.useRef(() => {\r\n setBoxPosition({ x: 0, y: 0 })\r\n })\r\n\r\n React.useEffect(() => {\r\n boxPositionRef.current = { ...boxPosition }\r\n }, [boxPosition])\r\n\r\n React.useEffect(() => {\r\n if (!enabled || !handleElement || isMobile()) return\r\n\r\n const onMouseDown = (ev: MouseEvent) => {\r\n dragging.current = true\r\n\r\n dragDiff.current = {\r\n x: ev.pageX - boxPositionRef.current.x - window.scrollX,\r\n y: ev.pageY - boxPositionRef.current.y - window.scrollY,\r\n }\r\n }\r\n\r\n const onMouseUp = () => {\r\n dragging.current = false\r\n }\r\n\r\n const onMouseMove = (ev: MouseEvent) => {\r\n if (!dragging.current) return\r\n\r\n const x = ev.pageX - dragDiff.current.x - window.scrollX\r\n const y = ev.pageY - dragDiff.current.y - window.scrollY\r\n\r\n setBoxPosition({ x, y })\r\n }\r\n\r\n handleElement.addEventListener('pointerdown', onMouseDown)\r\n handleElement.addEventListener('dblclick', resetBoxPosition)\r\n window.addEventListener('pointerup', onMouseUp)\r\n document.body.addEventListener('pointermove', onMouseMove)\r\n\r\n return () => {\r\n handleElement.removeEventListener('pointerdown', onMouseDown)\r\n handleElement.removeEventListener('dblclick', resetBoxPosition)\r\n window.removeEventListener('pointerup', onMouseUp)\r\n document.body.removeEventListener('pointermove', onMouseMove)\r\n }\r\n }, [enabled, handleElement, resetBoxPosition])\r\n\r\n return {\r\n enabled,\r\n handleRef,\r\n boxPosition,\r\n setBoxPosition,\r\n resetBoxPosition,\r\n }\r\n}\r\n","import classnames from 'classnames'\r\nimport * as React from 'react'\r\n\r\nimport { useElementMeasure } from '../../hooks/use-element-measure'\r\nimport { Box, BoxProps } from '../box'\r\nimport { DialogDragContext } from './hooks'\r\n\r\n/**\r\n * Public props for the component\r\n */\r\nexport type DialogBoxProps = BoxProps\r\n\r\ninterface DialogBoxOwnProps extends DialogBoxProps {\r\n /**\r\n * This callback serves as a way to account for the time between dialog close\r\n * and animation finish. The box isn’t rendered when the dialog closes but we still\r\n * want to display content when the dialog is closing\r\n */\r\n onUnmount?: () => void\r\n}\r\n\r\n/**\r\n * Dialog content container\r\n */\r\nexport function DialogBox({ onUnmount, style, ...props }: React.PropsWithChildren) {\r\n const wrapperRef = React.useRef(null)\r\n const { setElementRef, elementHeight } = useElementMeasure()\r\n const dialogDrag = React.useContext(DialogDragContext)\r\n\r\n React.useEffect(() => {\r\n const onResize = () => {\r\n const { top = 0, bottom = 0, left = 0, right = 0 } = dialogDrag.handleRef?.current?.getBoundingClientRect() ?? {}\r\n const { clientHeight, clientWidth } = window.document.documentElement\r\n if (top < 0 || bottom > clientHeight || left < 0 || right > clientWidth) {\r\n dialogDrag.resetBoxPosition()\r\n }\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 onUnmount?.()\r\n }\r\n // Set up an effect which only calls resetBoxPosition which is ref fn with state setter call and the unmount callback\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [])\r\n\r\n React.useEffect(() => {\r\n setElementRef(wrapperRef.current)\r\n }, [setElementRef])\r\n\r\n React.useEffect(() => {\r\n dialogDrag.setBoxPosition((prevPosition) => {\r\n const { top = 0 } = dialogDrag.handleRef?.current?.getBoundingClientRect() ?? {}\r\n return { ...prevPosition, y: prevPosition.y - Math.min(top, 0) }\r\n })\r\n // We want to call it only on elementHeight change\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [elementHeight])\r\n\r\n const dialogBoxStyle = React.useMemo(() => {\r\n if (dialogDrag.enabled) {\r\n return { ...style, transform: `translate3d(${dialogDrag.boxPosition.x}px, ${dialogDrag.boxPosition.y}px, 0)` }\r\n }\r\n return style\r\n }, [style, dialogDrag])\r\n\r\n return (\r\n \r\n {props.children}\r\n \r\n )\r\n}\r\n","import classnames from 'classnames'\r\nimport React from 'react'\r\n\r\n/**\r\n * The backdrop of the dialog, closes the dialog on click\r\n */\r\nexport function DialogOverlay(props: React.HTMLProps) {\r\n return (\r\n \r\n )\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 { isIpad, isMobile } from '../../../app/shared/isMobile'\r\nimport { useScreenSize } from '../../hooks/use-screen-size'\r\nimport { useVisualViewport } from '../../hooks/useVisualViewport'\r\nimport { ChildPosition, getFlexAlignClasses } from '../../util'\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 * Dialog position on the screen\r\n *\r\n * @default center\r\n */\r\n position?: keyof typeof ChildPosition\r\n\r\n overlayClass?: string\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\nconst 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(\r\n DIALOG_BACKDROP_WIDTH_CSS_VAR,\r\n `${Math.max(document.documentElement.clientWidth, window.innerWidth)}px`\r\n )\r\n}\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\nfunction DialogComponent({\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 position = 'center',\r\n isBackdropDisabled = false,\r\n type = 'modal',\r\n overlayClass,\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 const { viewport } = useVisualViewport({ enabled: !isFullyClosed, onScroll: false })\r\n const screenSize = useScreenSize()\r\n\r\n const dialogStyle = React.useMemo(() => {\r\n if (isMobile() && !isIpad() && viewport.scale !== 1) {\r\n return {\r\n left: viewport.left,\r\n top: viewport.top,\r\n width: viewport.unscaledWidth,\r\n height: viewport.unscaledHeight,\r\n minWidth: screenSize.width,\r\n minHeight: screenSize.width,\r\n willChange: 'auto',\r\n }\r\n }\r\n\r\n return { width: `var(${DIALOG_BACKDROP_WIDTH_CSS_VAR})` }\r\n }, [screenSize.width, viewport.left, viewport.scale, viewport.top, viewport.unscaledHeight, viewport.unscaledWidth])\r\n\r\n React.useEffect(() => {\r\n if (isFullyClosed) {\r\n return\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 }, [isFullyClosed])\r\n\r\n if (isFullyClosed) {\r\n return null\r\n }\r\n\r\n const DialogWrapper = state.modal ? React.Fragment : Portal\r\n return (\r\n \r\n \r\n {({ onTransitionEnd, onAnimationEnd, ...innerProps }) => (\r\n \r\n \r\n {!isBackdropDisabled && (\r\n \r\n )}\r\n \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\nexport function Dialog(props: React.PropsWithChildren) {\r\n const { isFullyClosed } = getExtendedDialogState(props.state)\r\n\r\n return isFullyClosed ? null : \r\n}\r\n","import { isMobile } from '../../app/shared/isMobile'\r\n\r\nexport function useScreenSize() {\r\n return {\r\n width: isMobile() ? window.screen.width : window.innerWidth,\r\n height: isMobile() ? window.screen.height : window.innerHeight,\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 {\r\n /**\r\n * Whether or not the dialog body will have padding\r\n *\r\n * @default true\r\n */\r\n hasPadding?: boolean\r\n}\r\n\r\n/**\r\n * Content wrapper which handles scrolling on mobile\r\n */\r\nexport function DialogBody({ hasPadding = true, ...props }: React.PropsWithChildren) {\r\n const scrollDivRef = React.useRef(null)\r\n\r\n React.useEffect(() => {\r\n const scrollBox = scrollDivRef.current\r\n\r\n if (isMobile() && scrollBox) {\r\n disableBodyScroll(scrollBox)\r\n\r\n return () => enableBodyScroll(scrollBox)\r\n }\r\n }, [])\r\n\r\n return (\r\n \r\n {props.children}\r\n \r\n )\r\n}\r\n","import * as React from 'react'\r\n\r\nimport { Heading, Paragraph } from '../typography'\r\nimport { Dialog, DialogProps } from './dialog'\r\nimport { DialogBody } from './dialog-body'\r\nimport { DialogStateReturn } from './hooks'\r\n\r\ninterface ConfirmationDialogProps {\r\n state: DialogStateReturn\r\n title: React.ReactNode\r\n actions: React.ReactNode\r\n 'aria-label': string\r\n position?: DialogProps['position']\r\n}\r\n\r\nexport function ConfirmationDialog({ position, ...props }: React.PropsWithChildren) {\r\n return (\r\n \r\n \r\n \r\n {props.title}\r\n \r\n {props.children}\r\n
{props.actions}
\r\n \r\n \r\n )\r\n}\r\n","import * as React from 'react'\r\nimport * as Reakit from 'reakit/Dialog'\r\n\r\nimport { DropdownContext } from '../dropdown'\r\nimport { DialogStateReturn } from './hooks'\r\n\r\ninterface DialogButtonProps extends Reakit.DialogDisclosureHTMLProps {\r\n state: DialogStateReturn\r\n}\r\n/**\r\n * The trigger button component which handles ref & focus return, etc.\r\n */\r\nexport const DialogTrigger = React.forwardRef(\r\n ({ state, ...props }: DialogButtonProps, ref: React.ForwardedRef) => {\r\n const dropdownContext = React.useContext(DropdownContext)\r\n\r\n return (\r\n ) => {\r\n // Close dropdown if we’re inside one\r\n dropdownContext?.root.hide()\r\n props.onClick?.(ev)\r\n }}\r\n >\r\n {props.children}\r\n \r\n )\r\n }\r\n)\r\n","import classnames from 'classnames'\r\nimport * as React from 'react'\r\n\r\ninterface DialogFooterProps extends React.HTMLProps {\r\n padding?: boolean\r\n}\r\n\r\n/**\r\n * Footer container which renders border and aligns items to right\r\n */\r\nexport function DialogFooter({ padding = true, ...props }: React.PropsWithChildren) {\r\n return (\r\n \r\n {props.children}\r\n \r\n )\r\n}\r\n","import classnames from 'classnames'\r\nimport * as React from 'react'\r\n\r\nimport { Button } from '../button'\r\nimport { Icon } from '../icon'\r\nimport { Heading } from '../typography'\r\nimport { DialogDragContext } from './hooks'\r\n\r\ninterface DialogHeaderProps {\r\n /**\r\n * Callback when user clicks on close button. The button will be hidden if not set\r\n */\r\n onCloseClick?: () => void\r\n\r\n /**\r\n * Additional class names for the component\r\n */\r\n className?: string\r\n\r\n /**\r\n * Whether or not the dialog header will have default horizontal padding\r\n *\r\n * @default true\r\n */\r\n hasHorizontalPadding?: boolean\r\n\r\n /**\r\n * Whether or not the dialog header will have default min height\r\n *\r\n * @default true\r\n */\r\n hasMinHeight?: boolean\r\n\r\n /**\r\n * Whether or not the dialog header children should be rendered as Heading\r\n *\r\n * @default true\r\n */\r\n asHeading?: boolean\r\n}\r\n\r\n/**\r\n * Component which renders title and a close button\r\n */\r\nexport function DialogHeader({\r\n onCloseClick,\r\n children,\r\n className,\r\n hasHorizontalPadding = true,\r\n hasMinHeight = true,\r\n asHeading = true,\r\n}: React.PropsWithChildren) {\r\n const dialogDrag = React.useContext(DialogDragContext)\r\n\r\n return (\r\n \r\n {children &&\r\n (asHeading ? (\r\n \r\n {children}\r\n \r\n ) : (\r\n children\r\n ))}\r\n {onCloseClick && (\r\n \r\n \r\n \r\n )}\r\n \r\n )\r\n}\r\n","import * as React from 'react'\r\nimport * as Reakit from 'reakit/Menu'\r\n\r\nimport { COMPONENT_ANIMATION_DURATION } from '../constants'\r\n\r\nexport type DropdownStateReturn = ReturnType\r\n\r\nexport const DropdownContext = React.createContext<{\r\n parent: Reakit.MenuStateReturn\r\n root: Reakit.MenuStateReturn\r\n} | null>(null)\r\n\r\nexport function useDropdownState(settings?: Reakit.MenuInitialState) {\r\n const context = React.useContext(DropdownContext)\r\n\r\n return Reakit.useMenuState({\r\n ...settings,\r\n loop: true,\r\n animated: COMPONENT_ANIMATION_DURATION,\r\n unstable_virtual: true,\r\n unstable_offset: settings?.unstable_offset ?? (context?.root ? [-5, 4] : [0, 5]),\r\n modal: false,\r\n })\r\n}\r\n","import classnames from 'classnames'\r\nimport * as React from 'react'\r\nimport * as Reakit from 'reakit/Menu'\r\nimport { Portal } from 'reakit/Portal'\r\n\r\nimport { Box, BoxProps, BoxRounding } from '../box'\r\nimport { getExtendedDialogState, useZIndex } from '../dialog'\r\nimport { DropdownContext, useDropdownState } from './hooks'\r\n\r\ninterface DropdownBaseProps extends Omit {\r\n /**\r\n * Trigger button for the dropdown\r\n */\r\n label: JSX.Element\r\n\r\n /**\r\n * @private\r\n * Any additional props to the trigger button. Used by nested dropdown wrapper\r\n */\r\n triggerProps?: Reakit.MenuButtonHTMLProps\r\n\r\n /**\r\n * Rounding of all trigger button, dropdown wrapper and dropdown items\r\n */\r\n rounding?: keyof typeof BoxRounding\r\n}\r\n\r\ninterface RootDropdownProps {\r\n /**\r\n * The returned object from `useDropdownState`. For nested dropdowns use the `isNested` prop\r\n */\r\n state: Reakit.MenuStateReturn\r\n isNested?: never\r\n /**\r\n * When set to true the dropdown will not render in Portal and will not use position absolute + transform.\r\n */\r\n isStatic?: boolean\r\n}\r\n\r\ninterface NestedDropdownProps {\r\n state?: never\r\n /**\r\n * When set to true the dropdown will compute its own state. Only usable with\r\n * nested dropdowns\r\n */\r\n isNested: true\r\n\r\n isStatic?: never\r\n}\r\n\r\ntype DropdownProps = DropdownBaseProps & (RootDropdownProps | NestedDropdownProps)\r\n\r\nfunction DropdownComponent(\r\n {\r\n label,\r\n triggerProps,\r\n state,\r\n 'aria-label': ariaLabel,\r\n children,\r\n isNested,\r\n rounding,\r\n isStatic,\r\n ...props\r\n }: React.PropsWithChildren,\r\n ref: React.ForwardedRef\r\n) {\r\n const zIndex = useZIndex()\r\n const context = React.useContext(DropdownContext)\r\n // Required due to the way conditional props work\r\n const dropdownState = state!\r\n const { isFullyClosed } = getExtendedDialogState(state ?? { visible: false, animating: false })\r\n\r\n if (!isNested && !dropdownState) {\r\n throw new Error('Dropdowns require either `state` or `isNested` prop defined!')\r\n }\r\n\r\n const ContainerElement = React.useRef(isNested || isStatic ? React.Fragment : Portal).current\r\n\r\n return (\r\n <>\r\n \r\n {(buttonProps) =>\r\n React.cloneElement(label, {\r\n ...buttonProps,\r\n ...label.props,\r\n rounding,\r\n active: label.props.active ?? dropdownState.visible,\r\n })\r\n }\r\n \r\n {!isFullyClosed && (\r\n \r\n \r\n {({ onTransitionEnd, onAnimationEnd, ...innerProps }) => (\r\n \r\n \r\n \r\n {React.Children.map(children, (child) => {\r\n if (!React.isValidElement(child)) return child\r\n\r\n if (child.type === Dropdown) {\r\n return {child}\r\n }\r\n\r\n return React.cloneElement(child, {\r\n ...child.props,\r\n rounding,\r\n })\r\n })}\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n )}\r\n \r\n )\r\n}\r\n\r\nexport const Dropdown = React.forwardRef(DropdownComponent)\r\n\r\ninterface NestedDropdownWrapperProps {\r\n /**\r\n * State of parrent dropdown to be passed to MenuItem for correct navigation\r\n * handling\r\n */\r\n parentState: Reakit.MenuStateReturn\r\n\r\n /**\r\n * Nested dropdown element\r\n */\r\n children: JSX.Element\r\n}\r\n\r\n/**\r\n * The `useDropdownState` requires parent context to be defined in order to work\r\n * with nested Dropdowns. So we need to create a wrapper to be able to get to the\r\n * parent context\r\n */\r\nfunction NestedDropdownWrapper({ parentState, children }: NestedDropdownWrapperProps) {\r\n const state = useDropdownState()\r\n\r\n return (\r\n \r\n {(itemProps) => React.cloneElement(children, { ...children.props, triggerProps: itemProps, state })}\r\n \r\n )\r\n}\r\n","import classnames from 'classnames'\r\nimport * as React from 'react'\r\nimport * as Reakit from 'reakit/Menu'\r\n\r\nimport { Button, ButtonProps } from '../button'\r\nimport { Icon, isValidIconName } from '../icon'\r\nimport { PropsWithAs } from '../types'\r\nimport { DropdownContext } from './hooks'\r\n\r\nconst DEFAULT_ELEMENT = 'button'\r\n\r\ninterface DropdownItemProps extends ButtonProps {\r\n subtitle?: React.ReactNode\r\n\r\n /**\r\n * Whether clicking the item should also close the dropdown. Only applies to\r\n * items without a submenu\r\n *\r\n * @default true\r\n */\r\n closeOnClick?: boolean\r\n}\r\n\r\nfunction DropdownItemComponent(\r\n {\r\n as: asComponent,\r\n state,\r\n subtitle,\r\n closeOnClick = true,\r\n children,\r\n rounding,\r\n size,\r\n ...props\r\n }: PropsWithAs & DropdownItemProps,\r\n ref: React.ForwardedRef\r\n) {\r\n const context = React.useContext(DropdownContext)\r\n\r\n return (\r\n \r\n {(itemProps) => {\r\n const active = itemProps['aria-selected'] && !context?.parent.animating\r\n const hasSubmenu = Boolean(itemProps['aria-haspopup'])\r\n\r\n const iconTheme = {\r\n 'text-gray-300': !active,\r\n 'text-gray-white dark:text-white': active,\r\n }\r\n\r\n return (\r\n \r\n ) : (\r\n props.leftContent\r\n )\r\n }\r\n rightContent={\r\n isValidIconName(props.rightContent) ? (\r\n \r\n ) : (\r\n props.rightContent\r\n )\r\n }\r\n onClick={(ev: React.MouseEvent) => {\r\n // Close if we clicked on an item which doesn’t have a submenu\r\n if (closeOnClick && !hasSubmenu) {\r\n context?.root.hide()\r\n }\r\n\r\n itemProps.onClick?.(ev)\r\n }}\r\n >\r\n {children}\r\n {subtitle &&
{subtitle}
}\r\n \r\n )\r\n }}\r\n \r\n )\r\n}\r\n\r\n/**\r\n * We need to forward ref to the function, but typescript looses the type of the\r\n * props param so we need to typecast to get suggestions to work\r\n */\r\nexport const DropdownItem = React.forwardRef(DropdownItemComponent) as <\r\n TagType extends React.ElementType = typeof DEFAULT_ELEMENT,\r\n>(\r\n props: PropsWithAs & DropdownItemProps & { ref?: React.ForwardedRef }\r\n) => ReturnType\r\n","import * as Reakit from 'reakit/Menu'\r\n\r\nimport { Paragraph } from '../typography'\r\n\r\nexport function DropdownSeparator(props: Partial) {\r\n return (\r\n \r\n \r\n {props.children && (\r\n \r\n {props.children}\r\n \r\n )}\r\n \r\n )\r\n}\r\n","import * as Sentry from '@sentry/browser'\r\nimport { ReactNode, useEffect } from 'react'\r\nimport { FallbackProps } from 'react-error-boundary'\r\nimport { useRouteError } from 'react-router-dom'\r\n\r\nimport { link } from '../services/routing'\r\nimport { Button } from './button'\r\nimport { Heading, Paragraph } from './typography'\r\n\r\ninterface ErrorViewProps {\r\n /**\r\n * Title of the message\r\n */\r\n title?: ReactNode\r\n\r\n /**\r\n * Body text\r\n */\r\n message?: ReactNode\r\n\r\n /**\r\n * Show contact support text under the message\r\n *\r\n * @default true\r\n */\r\n showContact?: boolean\r\n\r\n /**\r\n * Show refresh page button under the text\r\n *\r\n * @default true\r\n */\r\n showRefresh?: boolean\r\n}\r\n\r\nexport function ErrorView({ title, message, showContact = true, showRefresh = true }: ErrorViewProps) {\r\n return (\r\n
\r\n {title}\r\n {message}\r\n\r\n {showContact && (\r\n \r\n Our development team has been notified of this. If the error persists, please{' '}\r\n \r\n contact support\r\n \r\n .\r\n \r\n )}\r\n\r\n {showRefresh && (\r\n \r\n Refresh page\r\n \r\n )}\r\n
\r\n )\r\n}\r\n\r\nexport function DefaultErrorBoundary({\r\n error,\r\n title = 'Application error',\r\n message = 'We’re sorry but an unknown error occured.',\r\n ...props\r\n}: Partial) {\r\n useEffect(() => {\r\n // Ignore webpack chunk loading errors\r\n if (error?.name === 'ChunkLoadError') return\r\n // Otherwise log to Sentry\r\n Sentry.captureException(error, { level: 'fatal' })\r\n // so we can see error in logs\r\n console.error('ErrorBoundary:', JSON.stringify(error))\r\n }, [error])\r\n\r\n return \r\n}\r\n\r\nexport function RouterErrorElement() {\r\n const error = useRouteError() as Error\r\n return \r\n}\r\n","import classnames from 'classnames'\r\nimport * as React from 'react'\r\n\r\nimport { IconNameType, iconList } from '.'\r\nimport { SVGProps } from './svg'\r\n\r\nexport interface IconProps extends SVGProps {\r\n /**\r\n * Icon name\r\n */\r\n name?: IconNameType\r\n\r\n /**\r\n * Alternative way to pass icon to render if you want to render a custom component\r\n * or use `iconList` object lookup\r\n */\r\n as?: React.FC\r\n}\r\n\r\nexport function Icon({ name, as: asComponent, className, width = 16, height = width, ...props }: IconProps) {\r\n if (name && asComponent) {\r\n throw new Error('Specifying both \"name\" and \"as\" on Icon component is not supported')\r\n }\r\n\r\n if (!name && !asComponent) {\r\n throw new Error('No icon specified')\r\n }\r\n\r\n if (name) {\r\n if (iconList[name] === undefined) {\r\n throw new Error('Icon not found')\r\n }\r\n\r\n const fileName = ['icons', iconList[name]].filter(Boolean).join('_')\r\n\r\n return (\r\n \r\n \r\n \r\n )\r\n }\r\n\r\n const Component = asComponent!\r\n return \r\n}\r\n","// Export the Icon component itself\r\nexport * from './icon'\r\n\r\nexport function isValidIconName(name?: unknown): name is IconNameType {\r\n if (!name || typeof name !== 'string') return false\r\n\r\n return iconList[name as IconNameType] !== undefined\r\n}\r\n\r\nexport type IconNameType = keyof typeof iconList\r\n\r\nconst root = ''\r\nconst chartLayouts = 'chart-layouts'\r\nconst chartTools = 'chart-tools'\r\nconst chartTypes = 'chart-types'\r\n\r\n// Export list of icon components\r\nexport const iconList = {\r\n // Main icons\r\n add: root,\r\n arrowDownShort: root,\r\n arrowForward: root,\r\n arrowUpShort: root,\r\n briefcase: root,\r\n calendar: root,\r\n caretDown: root,\r\n caretLeft: root,\r\n caretRight: root,\r\n caretUp: root,\r\n caretVertical: root,\r\n chartBar: root,\r\n chartBubble: root,\r\n chartPie: root,\r\n chartTable: root,\r\n chartTreemap: root,\r\n chevronDown: root,\r\n chevronRight: root,\r\n close: root,\r\n darkMode: root,\r\n diamondOutlined: root,\r\n done: root,\r\n drag: root,\r\n draw: root,\r\n empty: root,\r\n exitFullscreen: root,\r\n flash: root,\r\n fullscreen: root,\r\n gesture: root,\r\n gift: root,\r\n hamburger: root,\r\n help: root,\r\n idea: root,\r\n ideaLoad: root,\r\n ideaSave: root,\r\n info: root,\r\n interval: root,\r\n lightMode: root,\r\n lock: root,\r\n lockOpened: root,\r\n menuClose: root,\r\n minus: root,\r\n more: root,\r\n note: root,\r\n palette: root,\r\n profile: root,\r\n publish: root,\r\n refresh: root,\r\n remove: root,\r\n restore: root,\r\n search: root,\r\n settings: root,\r\n settingsWheel: root,\r\n share: root,\r\n signOut: root,\r\n star: root,\r\n starOutlined: root,\r\n switchHorizontal: root,\r\n switchVertical: root,\r\n tabKey: root,\r\n template: root,\r\n trashCan: root,\r\n trendingDown: root,\r\n trendingUp: root,\r\n triangle: root,\r\n triangleOutlineDown: root,\r\n triangleOutlineUp: root,\r\n warning: root,\r\n\r\n // Chart layouts\r\n layout1h1v: chartLayouts,\r\n layout1h2v: chartLayouts,\r\n layout1h3v: chartLayouts,\r\n layout1l2r: chartLayouts,\r\n layout1t2b: chartLayouts,\r\n layout2h1v: chartLayouts,\r\n layout2h2v: chartLayouts,\r\n layout3h1v: chartLayouts,\r\n layout3h2v: chartLayouts,\r\n\r\n // Chart tools\r\n drawingActionDelete: chartTools,\r\n drawingSettingAutosaveOff: chartTools,\r\n drawingSettingAutosaveOn: chartTools,\r\n drawingSettingAutosaveSaving: chartTools,\r\n drawingSettingDrawingMode: chartTools,\r\n drawingSettingDrawingModeActive: chartTools,\r\n drawingSettingHide: chartTools,\r\n drawingSettingLock: chartTools,\r\n drawingSettingPreserveDrawings: chartTools,\r\n drawingSettingPreserveDrawingsActive: chartTools,\r\n drawingSettingShow: chartTools,\r\n drawingSettingUnlock: chartTools,\r\n toolArrow: chartTools,\r\n toolBrush: chartTools,\r\n toolCallout: chartTools,\r\n toolCurve: chartTools,\r\n toolElliottWave: chartTools,\r\n toolEllipse: chartTools,\r\n toolExpand: chartTools,\r\n toolFibonacci: chartTools,\r\n toolLine: chartTools,\r\n toolMeasure: chartTools,\r\n toolMidLineH: chartTools,\r\n toolMidLineV: chartTools,\r\n toolMouse: chartTools,\r\n toolPitchfork: chartTools,\r\n toolPolygon: chartTools,\r\n toolPosition: chartTools,\r\n toolRect: chartTools,\r\n toolRectRotated: chartTools,\r\n toolText: chartTools,\r\n toolTriangle: chartTools,\r\n toolXABCD: chartTools,\r\n\r\n // Chart types\r\n candleBarBasic: chartTypes,\r\n candleBarHeikinAshi: chartTypes,\r\n candleBarHollow: chartTypes,\r\n lineChartType: chartTypes,\r\n ohlcChartType: chartTypes,\r\n}\r\n","import classnames from 'classnames'\r\nimport { ForwardedRef, HTMLProps, PropsWithChildren, ReactNode, forwardRef, useMemo } from 'react'\r\n\r\nimport { ButtonPadding } from './button'\r\nimport { Icon, IconNameType, isValidIconName } from './icon'\r\nimport { Label } from './typography'\r\n\r\nexport enum InputTheme {\r\n none,\r\n light,\r\n dark,\r\n navigationBar,\r\n}\r\n\r\nexport enum InputRounding {\r\n none = '',\r\n regular = 'rounded-md',\r\n}\r\n\r\n/**\r\n * Enum for input size. Only set size on larger viewports to avoid page zooming\r\n */\r\nexport enum InputSize {\r\n small = 'h-6 text-2xs', // 24px height\r\n regular = 'h-7 text-2xs', // 28px height\r\n medium = 'h-8 text-sm', // 32px height\r\n large = 'h-9 text-sm', // 36px height\r\n}\r\n\r\nfunction getInputTheme(theme: InputTheme, isError = false) {\r\n switch (theme) {\r\n case InputTheme.none:\r\n return {}\r\n case InputTheme.dark:\r\n return {\r\n input: classnames('border bg-gray-800 text-gray-50 disabled:bg-gray-700 disabled:text-gray-400', {\r\n 'border-gray-600 hover:border-gray-400 focus:border-blue-400 focus:hover:border-blue-400 disabled:border-gray-700':\r\n !isError,\r\n 'border-red-400': isError,\r\n }),\r\n icon: classnames({\r\n 'text-gray-500 group-focus-within:text-blue-400': !isError,\r\n 'text-red-400': isError,\r\n }),\r\n }\r\n case InputTheme.navigationBar:\r\n return {\r\n input: classnames(\r\n 'border bg-transparent disabled:border-gray-700 disabled:bg-gray-700 disabled:text-gray-400',\r\n {\r\n 'border-gray-100 dark:border-gray-600 text-gray-750 dark:text-gray-50':\r\n !isError && !FinvizSettings.hasUserPremium,\r\n 'border-gray-600 text-gray-50': !isError && FinvizSettings.hasUserPremium,\r\n 'border-red-400': isError,\r\n }\r\n ),\r\n icon: classnames({\r\n 'text-gray-500': !isError,\r\n 'text-red-400': isError,\r\n }),\r\n }\r\n default:\r\n return {\r\n input: classnames(\r\n 'border', // Base styles\r\n 'bg-white disabled:bg-gray-50 disabled:text-gray-500', // Light\r\n 'dark:bg-gray-800 dark:disabled:bg-gray-700 dark:disabled:text-gray-400', // Dark\r\n {\r\n 'border-gray-100 hover:border-gray-300 focus:border-blue-400 hover:focus:border-blue-400 disabled:hover:border-gray-100 dark:border-gray-600 dark:hover:border-gray-400 dark:focus:border-blue-400 dark:hover:focus:border-blue-400 dark:disabled:border-gray-700':\r\n !isError,\r\n 'border-red-400': isError,\r\n }\r\n ),\r\n icon: classnames({\r\n 'text-gray-300 group-focus-within:text-blue-400 dark:text-gray-500': !isError,\r\n 'text-red-400': isError,\r\n }),\r\n }\r\n }\r\n}\r\n\r\ntype OmitNativeProps = Omit, 'label' | 'size'>\r\n\r\nexport interface InputProps {\r\n /**\r\n * Label which is rendered above the input\r\n */\r\n label?: ReactNode\r\n\r\n /**\r\n * Optional label layout switch\r\n */\r\n isHorizontalLabel?: boolean\r\n\r\n /**\r\n * Optional label className override\r\n */\r\n labelClassName?: string\r\n\r\n /**\r\n * Theme for the input\r\n *\r\n * @default light\r\n */\r\n theme?: keyof typeof InputTheme\r\n\r\n /**\r\n * Input size. This setting is ignored on mobile to avoid zoom\r\n *\r\n * @default regular\r\n */\r\n size?: keyof typeof InputSize\r\n\r\n /**\r\n * Border radius of the input\r\n *\r\n * @default regular\r\n */\r\n rounding?: keyof typeof InputRounding\r\n\r\n /**\r\n * Hide value stepper for number inputs\r\n */\r\n showNumberStepper?: boolean\r\n\r\n /**\r\n * Element to display on left the side of the input or name of the icon\r\n */\r\n leftContent?: JSX.Element | IconNameType\r\n\r\n /**\r\n * Element to display on right the side of the input or name of the icon\r\n */\r\n rightContent?: JSX.Element | IconNameType\r\n\r\n /**\r\n * Additional class names for the input\r\n */\r\n inputClass?: string\r\n\r\n /**\r\n * Error label to display under the input\r\n */\r\n error?: ReactNode\r\n\r\n /**\r\n * Additional info to display under the input\r\n */\r\n caption?: ReactNode\r\n\r\n /**\r\n * Disables setting text size to 16px on mobile. Only use for pages which aren’t\r\n * responsive\r\n */\r\n isMobileStyleEnabled?: boolean\r\n}\r\n\r\nexport type InputHTMLProps = OmitNativeProps\r\n\r\nexport type InputComponentProps = InputProps & InputHTMLProps\r\n\r\nfunction InputComponent(\r\n {\r\n label,\r\n isHorizontalLabel,\r\n labelClassName,\r\n size = 'regular',\r\n theme = 'light',\r\n rounding = 'regular',\r\n type,\r\n showNumberStepper = type === 'number',\r\n leftContent,\r\n rightContent,\r\n inputClass,\r\n error,\r\n caption,\r\n className,\r\n isMobileStyleEnabled = true,\r\n ...props\r\n }: InputComponentProps,\r\n ref: ForwardedRef\r\n) {\r\n const inputTheme = useMemo(() => getInputTheme(InputTheme[theme], !!error), [theme, error])\r\n const isLeftStringIcon = isValidIconName(leftContent)\r\n const isRightStringIcon = isValidIconName(rightContent)\r\n const inputSize = InputSize[size]\r\n\r\n const commonSideContentClassnames = useMemo(\r\n () => ({\r\n 'flex absolute w-3 items-center justify-center': true,\r\n 'text-gray-500 dark:text-gray-600': theme === 'light',\r\n 'text-gray-600': theme === 'dark',\r\n }),\r\n [theme]\r\n )\r\n\r\n return (\r\n
\r\n )\r\n}\r\n\r\nexport const Input = forwardRef(InputComponent)\r\nexport const Textarea = forwardRef(TextareaComponent)\r\n","import classnames from 'classnames'\r\n\r\ninterface SpinnerProps {\r\n /**\r\n * Spinner as progress bar\r\n * @default false\r\n */\r\n isProgressBar?: boolean\r\n\r\n /**\r\n * Progress number in percent\r\n * @default 0\r\n */\r\n progress?: number\r\n\r\n /**\r\n * Spinner box width\r\n *\r\n * @default 28\r\n */\r\n width?: number\r\n}\r\n\r\nexport function Spinner({ isProgressBar = false, progress = 0, width = 28 }: SpinnerProps) {\r\n const radius = (3 * width) / 7\r\n const strokeWidth = radius / 3\r\n const circleXY = radius + strokeWidth / 2\r\n const circumference = radius * 2 * Math.PI\r\n\r\n return (\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, 'ref'> {\r\n /**\r\n * Color of the tooltip. If se to `none`, the tooltip will have default color\r\n * based on light/dark theme\r\n *\r\n * @default 'none'\r\n */\r\n color?: keyof typeof TooltipColor\r\n}\r\n\r\nexport const TooltipBox = React.forwardRef(function TooltipBox(\r\n { color = 'none', ...props }: TooltipBoxProps,\r\n ref: React.ForwardedRef\r\n) {\r\n const tooltipColor = TooltipColor[color]\r\n\r\n return (\r\n \r\n {props.children}\r\n \r\n )\r\n})\r\n","import * as React from 'react'\r\nimport * as Reakit from 'reakit/Tooltip'\r\n\r\nimport { isIos } from '../../../app/shared/isMobile'\r\nimport { getExtendedDialogState } from '../dialog'\r\nimport { TooltipArrow } from './tooltip-arrow'\r\nimport { TooltipBox, TooltipBoxProps } from './tooltip-box'\r\n\r\ninterface TooltipProps extends TooltipBoxProps {\r\n /**\r\n * The returned object from `useTooltipState`\r\n */\r\n state: Reakit.TooltipStateReturn\r\n}\r\n\r\nexport function Tooltip({ state, children, color = 'none', ...props }: React.PropsWithChildren) {\r\n const { isFullyClosed } = getExtendedDialogState(state)\r\n\r\n // On iOS depending on composition TooltipTrigger doesn't work properly if Tooltip isn't always rendered\r\n // and causes bug on interactive elements with tooltip like selects, buttons, etc. when on first click\r\n // only tooltip appears but select, button or etc. doesn't receive event so it won't open, also on first click\r\n // in iOS safari onClick event isn't fired no TooltipTrigger, just onPointerDown, and thus further breaking logic\r\n // because our custom callback which are placed in onClick aren't invoked, after debugging we think that this\r\n // is bug caused by combination of reakit behaviour when isn't always rendered and way of events\r\n // firing by iOS Safari and thus not worth debugging internal reakit logic as we are looking to\r\n // replace it altogether\r\n if (isFullyClosed && !isIos()) return null\r\n return (\r\n \r\n {({ onTransitionEnd, onAnimationEnd, ...tooltipProps }) => (\r\n
\r\n \r\n \r\n \r\n \r\n {children}\r\n \r\n
\r\n )}\r\n \r\n )\r\n}\r\n","import * as React from 'react'\r\nimport * as Reakit from 'reakit/Tooltip'\r\n\r\ninterface TooltipButtonProps extends Reakit.TooltipReferenceHTMLProps {\r\n state: Reakit.TooltipStateReturn\r\n\r\n /**\r\n * Whether or not should trigger element call blur to return focus back to body after click\r\n *\r\n * @default false\r\n */\r\n isBlurAfterClick?: boolean\r\n\r\n /**\r\n * Whether to ignore default mouse enter/leave tooltip trigger interactions\r\n * and hide tooltip only after clicking outside of the trigger element\r\n *\r\n * @default false\r\n */\r\n isHideOnClickOutside?: boolean\r\n}\r\n/**\r\n * The trigger button component which handles ref & focus return, etc.\r\n */\r\nexport const TooltipTrigger = React.forwardRef(\r\n (\r\n {\r\n state,\r\n isBlurAfterClick,\r\n isHideOnClickOutside,\r\n onClick,\r\n onMouseEnter,\r\n onMouseLeave,\r\n ...props\r\n }: TooltipButtonProps,\r\n ref: React.ForwardedRef\r\n ) => (\r\n {\r\n if (isBlurAfterClick && document.activeElement instanceof HTMLElement) {\r\n document.activeElement.blur()\r\n }\r\n onClick?.(e)\r\n }}\r\n onMouseEnter={(e) => {\r\n if (isHideOnClickOutside) e.preventDefault()\r\n onMouseEnter?.(e)\r\n }}\r\n onMouseLeave={(e) => {\r\n if (isHideOnClickOutside) e.preventDefault()\r\n onMouseLeave?.(e)\r\n }}\r\n {...props}\r\n {...state}\r\n >\r\n {props.children}\r\n \r\n )\r\n)\r\n","import * as Reakit from 'reakit/Tooltip'\r\n\r\nimport { COMPONENT_ANIMATION_DURATION } from '../constants'\r\n\r\n/**\r\n * Hook which provides state to tooltips\r\n */\r\nexport function useTooltipState(settings?: Reakit.TooltipInitialState) {\r\n return Reakit.useTooltipState({\r\n ...settings,\r\n animated: COMPONENT_ANIMATION_DURATION,\r\n })\r\n}\r\n","import classnames from 'classnames'\r\n\r\nimport { TooltipColor } from './types'\r\n\r\ntype PositionMain = 'auto' | 'top' | 'bottom' | 'left' | 'right'\r\ntype PositionSecondary = 'start' | 'end'\r\ntype Placement = PositionMain | `${PositionMain}-${PositionSecondary}`\r\n\r\nconst transformMap: Record = {\r\n auto: '',\r\n top: 'rotateZ(180deg)',\r\n right: 'rotateZ(-90deg)',\r\n bottom: 'rotateZ(360deg)',\r\n left: 'rotateZ(90deg)',\r\n}\r\n\r\ninterface TooltipArrowProps {\r\n color?: keyof typeof TooltipColor\r\n placement: Placement\r\n className?: string\r\n}\r\n\r\n/**\r\n * Custom arrow for the dropdown\r\n */\r\nexport function TooltipArrow({ placement, color = 'none', className }: TooltipArrowProps) {\r\n const positionMain = placement.split('-')[0] as PositionMain\r\n const arrowColor = TooltipColor[color]\r\n\r\n return (\r\n \r\n )\r\n}\r\n","export enum TooltipColor {\r\n none,\r\n green,\r\n red,\r\n orange,\r\n blue,\r\n dark,\r\n}\r\n","import classnames from 'classnames'\r\nimport React, { ComponentProps, ElementType, HTMLProps, PropsWithChildren, ReactNode } from 'react'\r\n\r\ntype HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6\r\n\r\ninterface HeadingProps extends HTMLProps {\r\n /**\r\n * Heading level\r\n */\r\n level: HeadingLevel\r\n}\r\n\r\nfunction getHeadingElement(level: HeadingLevel) {\r\n switch (level) {\r\n case 1:\r\n return 'h1'\r\n case 2:\r\n return 'h2'\r\n case 3:\r\n return 'h3'\r\n case 4:\r\n return 'h4'\r\n case 5:\r\n return 'h5'\r\n default:\r\n return 'h6'\r\n }\r\n}\r\n\r\nexport function Heading({ level, children, ...props }: PropsWithChildren) {\r\n return React.createElement(\r\n getHeadingElement(level),\r\n {\r\n ...props,\r\n className: classnames(props.className, 'font-bold', {\r\n 'text-3xl': level === 1,\r\n 'text-2xl': level === 2,\r\n 'text-xl': level === 3,\r\n // We don't want to set any specific fontsize because it's used e.g. in DialogHeader\r\n // where it uses font-size: inherit; and is different on old/redesign versions\r\n '': level === 4,\r\n 'text-sm': level === 5,\r\n 'text-2xs': level === 6,\r\n }),\r\n },\r\n children\r\n )\r\n}\r\n\r\ninterface ParagraphProps extends Omit>, 'size' | 'as'> {\r\n /**\r\n * Determines which element the text should render to\r\n *\r\n * @default p\r\n */\r\n as?: ElementType\r\n\r\n /**\r\n * Font size for the paragraph\r\n * - tiny - 10px\r\n * - small - 12px\r\n * - default - 14px\r\n * - medium - 16px\r\n * - large - 18px\r\n *\r\n * @default default\r\n */\r\n size?: 'tiny' | 'small' | 'default' | 'medium' | 'large'\r\n\r\n /**\r\n * Paragraph font weight\r\n */\r\n medium?: boolean\r\n}\r\n\r\nexport function Paragraph({\r\n as = 'p',\r\n size = 'default',\r\n medium,\r\n children,\r\n ...props\r\n}: PropsWithChildren>) {\r\n return React.createElement(\r\n as,\r\n {\r\n ...props,\r\n className: classnames(props.className, {\r\n 'font-medium': medium,\r\n 'text-lg': size === 'large',\r\n 'text-sm': size === 'default',\r\n 'text-2xs': size === 'small',\r\n 'text-3xs': size === 'tiny',\r\n }),\r\n },\r\n children\r\n )\r\n}\r\n\r\ninterface LabelProps extends Omit, 'title'> {\r\n title?: ReactNode\r\n titleClassName?: string\r\n isHorizontal?: boolean\r\n}\r\n\r\nexport function Label({ title, titleClassName, isHorizontal, children, ...props }: PropsWithChildren) {\r\n return (\r\n \r\n )\r\n}\r\n","export const CRYPTO_TICKERS = [\r\n 'BTCUSD',\r\n 'LTCUSD',\r\n 'ETHUSD',\r\n 'XRPUSD',\r\n 'BCHUSD',\r\n 'BTCEUR',\r\n 'LTCEUR',\r\n 'ETHEUR',\r\n 'XRPEUR',\r\n 'BCHEUR',\r\n 'LTCBTC',\r\n 'ETHBTC',\r\n 'XRPBTC',\r\n 'BCHBTC',\r\n]\r\n\r\n// Keep in sync with the copy in Charts repo - app/constants/common.ts\r\nexport enum TIMEFRAME {\r\n i1 = 'i1',\r\n i2 = 'i2',\r\n i3 = 'i3',\r\n i5 = 'i5',\r\n i10 = 'i10',\r\n i15 = 'i15',\r\n i30 = 'i30',\r\n h = 'h',\r\n h2 = 'h2',\r\n h4 = 'h4',\r\n d = 'd',\r\n w = 'w',\r\n m = 'm',\r\n}\r\n\r\nexport enum SpecificChartFunctionality {\r\n default = 'default',\r\n quotePage = 'quotePage',\r\n quotePerf = 'quotePerf',\r\n chartPage = 'chartPage',\r\n smallIndex = 'smallIndex',\r\n offScreen = 'offScreen',\r\n forexPage = 'forexPage',\r\n futuresPage = 'futuresPage',\r\n cryptoPage = 'cryptoPage',\r\n}\r\n","import debounce from 'lodash.debounce'\r\nimport * as React from 'react'\r\n\r\nimport { useIsMounted } from './use-is-mounted'\r\nimport { useResizeObserver } from './use-resize-observer'\r\n\r\nexport function useElementMeasure(elementOverride: HTMLElement | null = null) {\r\n const ResizeObserver = useResizeObserver()\r\n const getIsMounted = useIsMounted()\r\n const [elementRef, setElementRef] = React.useState(elementOverride)\r\n const [elementWidth, setElementWidth] = React.useState(elementRef?.offsetWidth ?? 0)\r\n const [elementHeight, setElementHeight] = React.useState(elementRef?.offsetHeight ?? 0)\r\n\r\n React.useEffect(() => {\r\n if (!ResizeObserver) {\r\n return\r\n }\r\n\r\n const measureElement = () => {\r\n if (!getIsMounted()) {\r\n return\r\n }\r\n const newElementWidth = elementRef?.offsetWidth\r\n const newElementHeight = elementRef?.offsetHeight\r\n if (newElementWidth !== elementWidth) {\r\n setElementWidth(newElementWidth ?? 0)\r\n }\r\n if (newElementHeight !== elementHeight) {\r\n setElementHeight(newElementHeight ?? 0)\r\n }\r\n }\r\n const measureElementDebounced = debounce(measureElement, 200)\r\n\r\n const resizeObserver = new ResizeObserver((entries) => {\r\n /**\r\n * the reason for requestAnimationFrame is described here https://github.com/quasarframework/quasar/issues/2233\r\n * their approach was mostly to intercept and silence the error but I managed to avoid the error using requestAnimationFrame\r\n * */\r\n window.requestAnimationFrame(() => {\r\n if (Array.isArray(entries) && entries.length > 0) {\r\n measureElementDebounced()\r\n }\r\n })\r\n })\r\n\r\n if (elementRef) {\r\n resizeObserver.observe(elementRef)\r\n }\r\n\r\n measureElement()\r\n\r\n return () => {\r\n measureElementDebounced.cancel()\r\n resizeObserver?.disconnect()\r\n }\r\n }, [ResizeObserver, elementWidth, elementRef, elementHeight, getIsMounted])\r\n\r\n return { setElementRef: elementOverride ? () => {} : setElementRef, elementWidth, elementHeight }\r\n}\r\n","// Copy if this file is in charts repo in app/utils/ folder\r\nimport * as React from 'react'\r\n\r\nexport function useIsMounted() {\r\n const isMountedRef = React.useRef(false)\r\n const getIsMounted = React.useCallback(() => isMountedRef.current, [])\r\n\r\n React.useEffect(() => {\r\n isMountedRef.current = true\r\n return () => {\r\n isMountedRef.current = false\r\n }\r\n }, [])\r\n\r\n return getIsMounted\r\n}\r\n","import * as React from 'react'\r\n\r\nimport { loadResizeObserverPolyfill } from '../util'\r\n\r\nexport function useResizeObserver() {\r\n const controller = React.useRef('AbortController' in window ? new AbortController() : undefined)\r\n const [ResizeObserver, setResizeObserver] = React.useState(\r\n () => window.ResizeObserver\r\n )\r\n\r\n React.useEffect(() => {\r\n if (typeof ResizeObserver === 'undefined') {\r\n loadResizeObserverPolyfill().then((polyfill) => {\r\n if (!controller.current?.signal.aborted) {\r\n setResizeObserver(() => polyfill)\r\n }\r\n })\r\n }\r\n }, [ResizeObserver])\r\n\r\n // Cleanup effect to abort the controller\r\n React.useEffect(() => () => controller.current?.abort(), [])\r\n\r\n return ResizeObserver\r\n}\r\n","import throttle from 'lodash.throttle'\r\nimport * as React from 'react'\r\n\r\nexport function getVisualViewport(visualViewport: VisualViewport | null) {\r\n const width = visualViewport?.width ?? window.innerWidth\r\n const height = visualViewport?.height ?? window.innerHeight\r\n const scale = visualViewport?.scale ?? 1\r\n\r\n return {\r\n top: visualViewport?.offsetTop ?? 0,\r\n left: visualViewport?.offsetLeft ?? 0,\r\n scale: Math.round((1 / scale) * 100) / 100,\r\n width: Math.round(width * scale),\r\n height: Math.round(height * scale),\r\n unscaledWidth: width,\r\n unscaledHeight: height,\r\n }\r\n}\r\n\r\nexport function useVisualViewport({ enabled = true, onScroll = true }: { enabled?: boolean; onScroll?: boolean } = {}) {\r\n const [viewport, setViewport] = React.useState(getVisualViewport(window.visualViewport))\r\n\r\n React.useEffect(() => {\r\n if (!enabled) return\r\n\r\n const handleChange = throttle((ev: Event) => {\r\n const viewport = ev.currentTarget as VisualViewport\r\n if (viewport) {\r\n setViewport(() => getVisualViewport(viewport))\r\n }\r\n }, 50)\r\n\r\n window.visualViewport?.addEventListener('resize', handleChange)\r\n if (onScroll) window.visualViewport?.addEventListener('scroll', handleChange)\r\n handleChange({ currentTarget: window.visualViewport } as Event)\r\n\r\n return () => {\r\n window.visualViewport?.removeEventListener('resize', handleChange)\r\n window.visualViewport?.removeEventListener('scroll', handleChange)\r\n }\r\n }, [enabled, onScroll])\r\n\r\n return React.useMemo(() => ({ viewport, setViewport }), [viewport])\r\n}\r\n","import * as Sentry from '@sentry/browser'\r\n\r\nimport { PortfolioDefinition } from '../modules/portfolio/types'\r\nimport { Instrument } from '../types'\r\n\r\n// Keep in sync with ContentType in https://github.com/finvizhq/charts/blob/master/app/utils/fetch_api.ts\r\n// START\r\nexport enum ContentType {\r\n ApplicationJson = 'application/json',\r\n ApplicationJsonUTF = 'application/json; charset=utf-8', // WriteAsJsonAsync\r\n FormUrlEncoded = 'application/x-www-form-urlencoded',\r\n Html = 'text/html; charset=utf-8',\r\n}\r\n\r\nfunction parseResponseForContentType(response: string, contentType: ContentType) {\r\n switch (contentType) {\r\n case ContentType.ApplicationJson:\r\n case ContentType.ApplicationJsonUTF:\r\n case ContentType.FormUrlEncoded:\r\n return JSON.parse(response)\r\n default:\r\n return response\r\n }\r\n}\r\n// END\r\n\r\nexport class ThrowableError extends Error {\r\n status: number\r\n isServerError = false\r\n body: unknown\r\n extra: Record = {}\r\n\r\n constructor(status: number, message = 'ThrowableError', body = '', extra: Record = {}) {\r\n super(`${status} ${message}`)\r\n this.status = status\r\n this.isServerError = status >= 500\r\n this.body = body\r\n this.extra = extra\r\n }\r\n}\r\n\r\nexport interface CancelablePromise extends Promise {\r\n cancel?: () => void\r\n}\r\n\r\n/**\r\n * General api fetch utility which returns a cancelable promise\r\n */\r\nexport function apiRequest(\r\n url: string,\r\n { query, headers = {}, ...options }: RequestInit & { query?: Record } = {},\r\n throwOnAllErrors = false\r\n): CancelablePromise {\r\n const controller = 'AbortController' in window ? new AbortController() : undefined\r\n const requestUrl = query ? `${url}?${new URLSearchParams(query)}` : url\r\n const contentType: ContentType = (headers as any)['Content-Type'] ?? ContentType.ApplicationJson\r\n\r\n const requestOptions = {\r\n ...options,\r\n headers: {\r\n 'Content-Type': contentType,\r\n ...headers,\r\n },\r\n }\r\n const request = fetch(requestUrl, { ...requestOptions, signal: controller?.signal })\r\n\r\n const cancelableRequest: CancelablePromise = request\r\n .then(async (response) => {\r\n const textResponse = await response.text()\r\n const responseContentType: ContentType = (response.headers.get('Content-Type') as any) ?? ContentType.Html\r\n\r\n try {\r\n const parsedResponse = parseResponseForContentType(textResponse, responseContentType)\r\n if (!response.ok || response.status >= 500) {\r\n throw new ThrowableError(response.status, response.statusText, parsedResponse, {\r\n rayId: response.headers.get('cf-ray'),\r\n })\r\n }\r\n\r\n return parsedResponse\r\n } catch (error: any) {\r\n if (error instanceof ThrowableError) {\r\n throw error\r\n }\r\n throw new ThrowableError(response.status, error.message, textResponse, {\r\n rayId: response.headers.get('cf-ray'),\r\n })\r\n }\r\n })\r\n .catch((error: ThrowableError) => {\r\n if (error.status >= 500) {\r\n Sentry.withScope((scope) => {\r\n scope.setContext('Cloudflare', error.extra)\r\n\r\n if (error.status === 500) {\r\n Sentry.captureException(error)\r\n } else {\r\n Sentry.captureMessage(`${error.status} ${error.message}`)\r\n }\r\n })\r\n }\r\n if (throwOnAllErrors) {\r\n throw error\r\n }\r\n })\r\n\r\n if (controller) {\r\n cancelableRequest.cancel = () => controller.abort()\r\n }\r\n\r\n return cancelableRequest\r\n}\r\n\r\nexport interface SearchApiResult {\r\n ticker: string\r\n company: string\r\n exchange: string\r\n}\r\n\r\nexport function searchApiRequest(input = '', instrument?: Instrument) {\r\n return apiRequest('/api/suggestions.ashx', { query: { input, instrument } }, true)\r\n}\r\n\r\nexport function portfoliosRequest() {\r\n return apiRequest<{ portfolios: PortfolioDefinition[] }>('/api/portfolio_data.ashx', {\r\n query: {\r\n fields: 'portfolios',\r\n },\r\n })\r\n}\r\n\r\nexport function lastCloseRequest(ticker: string) {\r\n return apiRequest('/request_quote.ashx', {\r\n query: {\r\n t: ticker,\r\n },\r\n })\r\n}\r\n\r\ninterface PortfolioLimitResult {\r\n transactions: number\r\n limitTransactions: number\r\n}\r\n\r\nexport function portfolioLimitRequest(portfolioId: number) {\r\n return apiRequest('/api/portfolio_data.ashx', {\r\n query: {\r\n pid: portfolioId,\r\n fields: 'transactions,limitTransactions',\r\n },\r\n })\r\n}\r\n","import * as pathToRegexp from 'path-to-regexp'\r\n\r\nimport { cleanTicker } from '../util'\r\n\r\n/**\r\n * Compile route path by applying parameters to it\r\n *\r\n * @example\r\n * // Outputs /route/1?query=foo\r\n * compilePath('/route/:id?query=:query', { id: 1, query: 'foo' })\r\n */\r\nfunction compilePath(\r\n path: string,\r\n params?: Record,\r\n options?: pathToRegexp.ParseOptions & pathToRegexp.TokensToFunctionOptions\r\n) {\r\n return pathToRegexp.compile(path, options)(params)\r\n}\r\n\r\nexport const path = {\r\n home: '/',\r\n news: '/news.ashx',\r\n screener: '/screener.ashx',\r\n charts: '/charts',\r\n groups: '/groups.ashx',\r\n portfolio: '/portfolio.ashx',\r\n insider: '/insidertrading.ashx',\r\n elite: '/elite.ashx',\r\n search: '/search.ashx\\\\?p=:ticker?',\r\n quote: '/quote.ashx\\\\?t=:ticker',\r\n contact: '/contact.ashx',\r\n\r\n alerts: '/alerts.ashx',\r\n help: '/help/screener.ashx',\r\n account: '/myaccount.ashx',\r\n login: '/login.ashx',\r\n logout: '/logout.ashx',\r\n\r\n // Maps\r\n maps: '/map.ashx',\r\n bubbles: '/bubbles.ashx',\r\n\r\n // Futures\r\n futures: '/futures.ashx',\r\n futuresPerf: '/futures_performance.ashx',\r\n futuresCharts: '/futures_charts.ashx',\r\n futuresChartDetail: '/futures_charts.ashx\\\\?t=:ticker',\r\n\r\n // Forex\r\n forex: '/forex.ashx',\r\n forexPerf: '/forex_performance.ashx',\r\n forexCharts: '/forex_charts.ashx',\r\n forexChartDetail: '/forex_charts.ashx\\\\?t=:ticker',\r\n\r\n // Crypto\r\n crypto: '/crypto.ashx',\r\n cryptoPerf: '/crypto_performance.ashx',\r\n cryptoCharts: '/crypto_charts.ashx',\r\n cryptoChartDetail: '/crypto_charts.ashx\\\\?t=:ticker',\r\n\r\n // Backtsest\r\n backtests: '/backtests.ashx',\r\n backtestCreate: '/backtest_create.ashx',\r\n backtestDetail: '/backtest_detail.ashx\\\\?id=:backtestId',\r\n backtestPresets: 'backtests.ashx\\\\?presets=1',\r\n}\r\n\r\nexport const link = {\r\n toHome: () => path.home,\r\n toNews: () => path.news,\r\n toScreener: () => path.screener,\r\n toCharts: () => path.charts,\r\n toGroups: () => path.groups,\r\n toPortfolio: () => path.portfolio,\r\n toInsider: () => path.insider,\r\n toElite: () => path.elite,\r\n toSearch: (ticker: string) => compilePath(path.search, { ticker }, { validate: false }),\r\n toQuote: (ticker: string) => compilePath(path.quote, { ticker }),\r\n toContact: () => path.contact,\r\n\r\n toAlerts: () => path.alerts,\r\n toHelp: () => path.help,\r\n toAccount: () => path.account,\r\n toLogin: () => path.login,\r\n toLogout: () => path.logout,\r\n\r\n toMaps: () => path.maps,\r\n toBubbles: () => path.bubbles,\r\n\r\n toFutures: () => path.futures,\r\n toFuturesPerf: () => path.futuresPerf,\r\n toFuturesCharts: () => path.futuresCharts,\r\n toFuturesChartDetail: (ticker: string) => compilePath(path.futuresChartDetail, { ticker: cleanTicker(ticker) }),\r\n\r\n toForex: () => path.forex,\r\n toForexPerf: () => path.forexPerf,\r\n toForexCharts: () => path.forexCharts,\r\n toForexChartDetail: (ticker: string) => compilePath(path.forexChartDetail, { ticker: cleanTicker(ticker) }),\r\n\r\n toCrypto: () => path.crypto,\r\n toCryptoPerf: () => path.cryptoPerf,\r\n toCryptoCharts: () => path.cryptoCharts,\r\n toCryptoChartDetail: (ticker: string) => compilePath(path.cryptoChartDetail, { ticker: cleanTicker(ticker) }),\r\n\r\n toBacktests: () => path.backtests,\r\n toBacktestCreate: () => path.backtestCreate,\r\n toBacktestDetail: (backtestId: string | number) => compilePath(path.backtestDetail, { backtestId }),\r\n toBacktestPresets: () => path.backtestPresets,\r\n}\r\n","export enum Instrument {\r\n Stock = 'stock',\r\n Forex = 'forex',\r\n Crypto = 'crypto',\r\n Futures = 'futures',\r\n MarketSentiment = 'market_sentiment',\r\n Group = 'group',\r\n}\r\n\r\nexport type RecordType = Record\r\n\r\nexport type PartialBy = Omit & Partial>\r\n\r\nexport type NullableNumbers = { [K in keyof Obj]: Obj[K] extends number ? number | null : Obj[K] }\r\n\r\nexport enum DateRangeType {\r\n d1 = 'd1',\r\n d5 = 'd5',\r\n m1 = 'm1',\r\n m3 = 'm3',\r\n m6 = 'm6',\r\n ytd = 'ytd',\r\n y1 = 'y1',\r\n y2 = 'y2',\r\n y5 = 'y5',\r\n max = 'max',\r\n}\r\n\r\nexport type SortableValue = string | null | number | Date\r\nexport type SortDirectionValue = 1 | -1\r\n","import isPlainObject from 'lodash.isplainobject'\r\nimport { ComponentType, LazyExoticComponent, lazy } from 'react'\r\nimport { ShouldRevalidateFunction, ShouldRevalidateFunctionArgs } from 'react-router-dom'\r\n\r\nimport { getCookie } from '../app/shared/cookie'\r\nimport { parseInitData } from '../app/shared/utils'\r\nimport { CRYPTO_TICKERS } from './constants'\r\nimport { Instrument, SortDirectionValue, SortableValue } from './types'\r\nimport { RecordType } from './types'\r\n\r\n/**\r\n * Function which wraps React.lazy and checks whether a chunk is preloaded\r\n * from async-manifest. If yes, kick in the promise resolve early so we can\r\n * instantly render the component\r\n */\r\nexport function lazyLoadComponent({\r\n chunkName,\r\n load,\r\n}: {\r\n chunkName: string\r\n load: () => Promise<{ default: ComponentType }>\r\n}): LazyExoticComponent> {\r\n // Resolve earlier if prefetch element is present\r\n const hasPreloadElement = document.querySelector(`[data-chunk-id=${chunkName}]`)\r\n\r\n if (hasPreloadElement) {\r\n const componentLoader = load()\r\n\r\n return lazy(() => componentLoader)\r\n }\r\n\r\n return lazy(load)\r\n}\r\n\r\nconst isObject = (value: any): value is RecordType => isPlainObject(value)\r\n\r\n/**\r\n * Parse text as JSON\r\n */\r\nexport function parseAsJSON(value: unknown | Shape): Shape | undefined {\r\n if (isObject(value)) {\r\n return value as Shape\r\n }\r\n\r\n let parsedValue\r\n try {\r\n if (typeof value === 'string') {\r\n parsedValue = JSON.parse(value)\r\n }\r\n } catch (e) {\r\n return\r\n }\r\n return parsedValue\r\n}\r\n\r\n/**\r\n * remove @ symbol from a ticker\r\n */\r\nexport function cleanTicker(ticker: string) {\r\n return ticker.startsWith('@') ? ticker.substring(1) : ticker\r\n}\r\n\r\n/**\r\n * Get instrument for a ticker.\r\n *\r\n * - If ticker doesn’t start with `@` - stock\r\n * - Otherwise\r\n * - one of `CRYPTO_TICKERS` - crypto\r\n * - has length of 6 - forex\r\n * - none of above - future\r\n *\r\n * NOTE: counterpart in charts 'charts/app/utils/chart.js'\r\n */\r\n\r\nexport function getInstrumentForTicker(ticker: string): Instrument {\r\n if (!ticker?.startsWith('@')) return Instrument.Stock\r\n\r\n const cleanedTicker = cleanTicker(ticker)\r\n\r\n if (CRYPTO_TICKERS.includes(cleanedTicker.toUpperCase())) return Instrument.Crypto\r\n if (cleanedTicker.length === 6) return Instrument.Forex\r\n\r\n return Instrument.Futures\r\n}\r\n\r\n/**\r\n * Async load Resize observer polyfill when we need it\r\n */\r\nlet resizeObserverPolyfill: typeof window.ResizeObserver\r\nexport async function loadResizeObserverPolyfill() {\r\n if (typeof window.ResizeObserver === 'undefined') {\r\n const polyfill = await import('resize-observer-polyfill')\r\n resizeObserverPolyfill = polyfill.default\r\n window.ResizeObserver = resizeObserverPolyfill\r\n return resizeObserverPolyfill as typeof window.ResizeObserver\r\n }\r\n}\r\n\r\nexport async function getIsBrave() {\r\n return (navigator.brave && (await navigator.brave.isBrave())) || false\r\n}\r\n\r\nexport function hasDarkModeFeature() {\r\n const ff = getCookie('featureFlags')\r\n return ff.includes('dark:1')\r\n}\r\n\r\nexport function hasRedesignFeature() {\r\n const ff = getCookie('featureFlags')\r\n return ff.includes('redesign:1')\r\n}\r\n\r\nexport function isRedesignFeatureEnabled() {\r\n return hasRedesignFeature() || hasDarkModeFeature()\r\n}\r\n\r\nexport function isDarkModeFeatureEnabled() {\r\n const theme = getCookie('chartsTheme')\r\n return isRedesignFeatureEnabled() && theme.includes('dark')\r\n}\r\n\r\nexport enum ChildPosition {\r\n topLeft,\r\n topRight,\r\n bottomLeft,\r\n bottomRight,\r\n center,\r\n topCenter,\r\n rightCenter,\r\n bottomCenter,\r\n leftCenter,\r\n}\r\n\r\nexport function getFlexAlignClasses(position: ChildPosition) {\r\n return {\r\n 'justify-start': [ChildPosition.topLeft, ChildPosition.bottomLeft, ChildPosition.leftCenter].includes(position),\r\n 'justify-center': [ChildPosition.center, ChildPosition.topCenter, ChildPosition.bottomCenter].includes(position),\r\n 'justify-end': [ChildPosition.topRight, ChildPosition.bottomRight, ChildPosition.rightCenter].includes(position),\r\n 'items-start': [ChildPosition.topLeft, ChildPosition.topRight, ChildPosition.topCenter].includes(position),\r\n 'items-center': [ChildPosition.center, ChildPosition.rightCenter, ChildPosition.leftCenter].includes(position),\r\n 'items-end': [ChildPosition.bottomLeft, ChildPosition.bottomRight, ChildPosition.bottomCenter].includes(position),\r\n }\r\n}\r\n\r\ninterface NumberFormatOptions {\r\n fractions: number\r\n showPlusSign: boolean\r\n defaultValue: string\r\n}\r\n\r\nconst intlCache: { [key: number]: Intl.NumberFormat } = {}\r\nfunction getIntl(fractions: number) {\r\n if (!intlCache[fractions])\r\n intlCache[fractions] = new Intl.NumberFormat('en-US', {\r\n minimumFractionDigits: fractions,\r\n maximumFractionDigits: fractions,\r\n })\r\n return intlCache[fractions]\r\n}\r\n\r\nexport function shortFormatNumber(\r\n value: number | null | undefined,\r\n { fractions = 2, showPlusSign = false, defaultValue = '-' }: Partial = {}\r\n) {\r\n let num = value\r\n if (num === undefined || num === null || !Number.isFinite(num)) return defaultValue\r\n\r\n let suffix = ''\r\n const absValue = Math.abs(num)\r\n if (absValue >= 1e9) {\r\n num /= 1e9\r\n suffix = 'B'\r\n } else if (absValue >= 1e6) {\r\n num /= 1e6\r\n suffix = 'M'\r\n } else if (absValue >= 1000) {\r\n num /= 1000\r\n suffix = 'K'\r\n }\r\n\r\n const formatted = getIntl(fractions).format(num)\r\n\r\n return (showPlusSign && num > 0 ? '+' : '') + formatted + suffix\r\n}\r\n\r\nexport function formatNumber(\r\n value: number | null | undefined,\r\n { fractions = 2, showPlusSign = false, defaultValue = '-' }: Partial = {}\r\n) {\r\n if (value === undefined || value === null) return defaultValue\r\n\r\n const fixedValue = value.toFixed(fractions)\r\n const prefix = showPlusSign && value > 0 ? '+' : ''\r\n\r\n if (parseFloat(fixedValue) === 0 && value !== 0) {\r\n return {prefix + fixedValue}\r\n }\r\n\r\n const formatted = getIntl(fractions).format(value)\r\n\r\n return prefix + formatted\r\n}\r\n\r\nexport interface SortByColumnOptions {\r\n /**\r\n * Change order of `null` values.\r\n * - `false` Force sort null as first (asc) and last (desc)\r\n * - `true` Always sort null as last regardless of order\r\n * @default false\r\n */\r\n sortNullAsLast?: boolean\r\n\r\n /**\r\n * When true, null values will not be treated as special values\r\n * @default false\r\n */\r\n ignoreNullForComparison?: boolean\r\n}\r\n\r\nexport function sortByColumn(\r\n options: SortByColumnOptions & {\r\n a: ItemType\r\n b: ItemType\r\n direction: SortDirectionValue\r\n valueGetter?: (row: ItemType) => SortableValue\r\n }\r\n) {\r\n const valueA = options.valueGetter?.(options.a)\r\n const valueB = options.valueGetter?.(options.b)\r\n // Compare as strings\r\n if (typeof valueA === 'string' && typeof valueB === 'string') return valueA.localeCompare(valueB) * options.direction\r\n\r\n // Always sort null last if enabled\r\n if (options.sortNullAsLast && valueA === null) return Infinity\r\n if (options.sortNullAsLast && valueB === null) return -Infinity\r\n\r\n // Sort null first/last depending on direction\r\n if (!options.ignoreNullForComparison && valueA === null) return -options.direction\r\n if (!options.ignoreNullForComparison && valueB === null) return options.direction\r\n\r\n // Compare as numbers\r\n return (Number(valueA) - Number(valueB)) * options.direction\r\n}\r\n\r\nexport function moveItemInArray(arr: ItemType[], sourceIndex: number, destinationIndex: number) {\r\n // make sure sourceIndex and destinationIndex are inside of arr\r\n const from = Math.max(0, Math.min(sourceIndex, arr.length - 1))\r\n const to = Math.min(arr.length - 1, Math.max(destinationIndex, 0))\r\n\r\n const items = [...arr]\r\n const [removed] = items.splice(from, 1)\r\n items.splice(to, 0, removed)\r\n\r\n return items\r\n}\r\n\r\nexport function randomUUID() {\r\n return `${1e7}-${1e3}-${4e3}-${8e3}-${1e11}`.replace(/[018]/g, (substring) => {\r\n const c = Number(substring)\r\n return (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)\r\n })\r\n}\r\n\r\nexport function getUuid() {\r\n return window.crypto?.randomUUID?.() ?? randomUUID()\r\n}\r\n\r\n/**\r\n * This fn creates a revalidator rule which always revalidates loader when the\r\n * specified keys change but ignores changes to other keys. It also allows\r\n * `revalidator.revalidate` to work even if the query didn’t\r\n */\r\nexport function revalidateOnQueryChange(keys: string[]): ShouldRevalidateFunction {\r\n return (args) => {\r\n const prevParams = args.currentUrl.searchParams\r\n const nextParams = args.nextUrl.searchParams\r\n const requiredChanged = keys.some((key) => prevParams.get(key) !== nextParams.get(key))\r\n const otherQueryKeys = [...prevParams.keys(), ...nextParams.keys()].filter(\r\n (key, index, arr) => !keys.includes(key) && arr.indexOf(key) === index\r\n )\r\n const otherChanged = otherQueryKeys.some((key) => prevParams.get(key) !== nextParams.get(key))\r\n\r\n if (!requiredChanged && otherChanged) {\r\n return false\r\n }\r\n\r\n return args.defaultShouldRevalidate\r\n }\r\n}\r\n\r\n/**\r\n * This fn does the same as `revalidateOnQueryChange`\r\n * except you need to provide `ShouldRevalidateFunctionArgs` manually\r\n */\r\nexport function shouldRevalidateOnQueryChange(args: ShouldRevalidateFunctionArgs, keys: string[]) {\r\n return revalidateOnQueryChange(keys)(args)\r\n}\r\n\r\nexport function parseRouteInitData({\r\n elementId = 'route-init-data',\r\n fallback,\r\n removeElement = true,\r\n}: { elementId?: string; fallback?: DataType; removeElement?: boolean } = {}): DataType | null {\r\n const element = document.getElementById(elementId)\r\n let initialData = fallback\r\n\r\n if (!element) return fallback ?? null\r\n\r\n try {\r\n const parsedData = parseInitData(elementId)\r\n if (removeElement) element.remove()\r\n\r\n if (parsedData) initialData = parsedData\r\n } catch {\r\n initialData = fallback\r\n }\r\n\r\n return initialData ?? null\r\n}\r\n","function getSanitizedSingleTicker(rawTicker: string, specialTickers: string[] = []) {\r\n return rawTicker\r\n .replace(/\\.+/gi, '-')\r\n .split('-')\r\n .map((x) => {\r\n if (specialTickers.includes(x.toUpperCase())) return x\r\n return x.replace(/([^a-z0-9@-])+/gi, '')\r\n })\r\n .filter((x) => !!x)\r\n .join('-')\r\n .toUpperCase()\r\n}\r\n\r\nexport function getSanitizedTicker(rawTicker: string, isMulti = false, specialTickers: string[] = []) {\r\n if (isMulti) {\r\n return rawTicker\r\n .replace(/ /g, ',')\r\n .split(',')\r\n .map((x) => getSanitizedSingleTicker(x, specialTickers))\r\n .filter((x) => !!x)\r\n .join(',')\r\n }\r\n\r\n return getSanitizedSingleTicker(rawTicker, specialTickers)\r\n}\r\n"],"names":["module","exports","white","black","inherit","transparent","current","finviz","blue","gray","red","orange","amber","yellow","brightYellow","lime","green","emerald","teal","violet","purple","pink","ScamNotice","_jsxs","Notice","id","children","_jsx","className","href","lastRequest","getRedirectUrl","tickerRaw","ticker","getSanitizedTicker","url","instrument","getInstrumentForTicker","substring","encodeURIComponent","FinvizSettings","quoteSearchExt","Search","Component","state","input","highlight","data","focused","selected","render","focus","this","props","Input","onChange","_onChange","onFocus","_onFocus","onBlur","_onBlur","onArrowUp","_onArrowUp","onArrowDown","_onArrowDown","value","SuggestionsBox","cb","errCb","abort","request","XMLHttpRequest","open","onreadystatechange","readyState","status","JSON","parse","responseText","send","setTimeout","fetch","setState","bind","length","inputRef","createRef","constructor","super","placeholderSupported","undefined","document","createElement","placeholder","firstFocus","onSubmit","_onSubmit","type","ref","autoComplete","autoCorrect","autoCapitalize","maxLength","onKeyDown","_onKeyDown","onKeyUp","_onKeyUp","onClick","e","preventDefault","target","window","location","key","componentDidMount","_focus","componentDidUpdate","_isMobile","navigator","userAgent","match","searchLink","style","display","cellPadding","cellSpacing","border","map","row","index","onMouseDown","_onClick","dangerouslySetInnerHTML","__html","_formatTicker","_formatCompany","company","exchange","colSpan","width","button","hightlight","toUpperCase","replace","text","re","RegExp","_escapeRegExp","str","Settings","componentWillUnmount","removeEventListener","_onDocumentClick","classes","position","_showDropDown","name","stopPropagation","addEventListener","_hideDropDown","indexOf","FLibs","Charts","Utils","tc","convertTa","Quote","isIpad","minViewport","viewportString","fixed","fluid","getViewportWidth","Math","round","innerWidth","visualViewport","scale","setViewport","fixedViewport","querySelector","setAttribute","viewportWidth","newViewportWidth","hasEnabledRedesign","hasRedesignEnabled","renderSearch","retries","arguments","container","getElementById","ReactDOM","OldSearch","SearchComponent","withQueryClientContext","defaultPlacement","theme","size","autoFocus","isMatchInputAndBoxWidth","searchAutoFocus","ready","timeContainer","element","Time","languages","Array","language","targetLanguages","isTargetLanguage","toLowerCase","some","targetLanguage","includes","renderScamNotice","isMobile","_ref","cookieName","hidden","setHidden","useState","cookie","onClose","useRef","catch","background","color","fontFamily","fontSize","textAlign","margin","padding","lineHeight","title","marginRight","right","textDecoration","top","getDate","seed","date","Date","dateAsNY","getUTCFullYear","getUTCMonth","getUTCDate","getUTCHours","getUTCMinutes","getUTCSeconds","isDst","dayNumber","monthIndex","getMonth","previousSunday","getDay","getIsDstInNy","setUTCHours","getWeekDay","toLocaleDateString","weekday","uppercase","month","toString","padStart","getTime","toLocaleString","hour","minute","hour12","TimeFormat","getFormattedDateString","long","getFullYear","short","dateOnly","timeOnly","formatDate","inputOrOutputFormat","outputFormat","dateFns","isPremarket","isPremium","hasUserPremium","dayOfWeek","min","getMinutes","hours","getHours","isAftermarket","HOLIDAY_DATES","label","test","day","isHoliday","find","holiday","getHoliday","decodeQueryString","vars","search","split","obj","forEach","pair","delimiterPos","decodeURIComponent","encodeQueryString","values","whitelistedValues","Object","keys","reduce","prev","getParsedCookies","parseCookies","cookieString","acc","v","trim","getCookie","setCookie","expires","toUTCString","hostname","matchesAndroid","matchesWebOS","matchesIPhone","matchesiPad","matchesIPod","matchesBlackBerry","matchesWindowsPhone","matchesIOSLike","maxTouchPoints","matchesFirefox","matchesSafariDesktopLike","isMobileDevice","isIphone","isSafariDesktop","isIos","isFirefoxDesktop","fn","sentryOptions","dsn","allowUrls","release","FinvizSentrySettings","integrations","DedupeIntegration","ignoreErrors","Sentry","beforeSend","event","String","captureException","captureMessage","withScope","formatDateToStringUS","year","parseInitData","elementId","initDataElement","textContent","getSidebarFromCookie","chartsUrl","decodedCookie","sidebar","BoxRounding","BoxTheme","Box","React","rounding","classnames","GroupTheme","ButtonGroup","hasDivider","hasBorder","childComponent","buttonRounding","ButtonRounding","groupTheme","dark","wrapper","divider","getGroupTheme","role","child","Button","filter","Boolean","BUTTON_DEFAULT_ELEMENT","BUTTON_BASE_CLASS","BUTTON_FOCUS_STYLES","ButtonSize","ButtonPadding","ButtonAlign","ButtonSquareSize","ButtonTheme","getButtonTheme","active","light","lightTransparent","blueHover","headerItem","icon","menuItem","menuItemDark","opacity","outline","chip","chipTransparent","link","ButtonComponent","as","asComponent","focusRing","appearance","align","contentClass","leftContent","rightContent","isSquare","buttonTheme","buttonPadding","buttonSize","hasIcons","_Fragment","isValidIconName","Icon","left","center","xxsmall","xsmall","none","small","regular","medium","large","COMPONENT_ANIMATION_DURATION","ZIndexContext","useZIndex","useDialogState","settings","Reakit","animated","DialogDragContext","enabled","handleRef","boxPosition","x","y","resetBoxPosition","setBoxPosition","DialogBox","onUnmount","wrapperRef","setElementRef","elementHeight","useElementMeasure","dialogDrag","onResize","bottom","getBoundingClientRect","clientHeight","clientWidth","documentElement","prevPosition","dialogBoxStyle","transform","DialogOverlay","getExtendedDialogState","isFullyOpened","visible","animating","isFullyClosed","DialogType","DIALOG_BACKDROP_WIDTH_CSS_VAR","body","setProperty","max","DialogComponent","finalFocusRef","onHide","onOverlayClick","hide","hideOnEsc","isDraggable","isBackdropDisabled","overlayClass","ariaLabel","dragging","handleElement","boxPositionRef","dragDiff","ev","pageX","scrollX","pageY","scrollY","onMouseUp","onMouseMove","useDrag","viewport","useVisualViewport","onScroll","screenSize","screen","height","innerHeight","dialogStyle","unscaledWidth","unscaledHeight","minWidth","minHeight","willChange","DialogWrapper","modal","Portal","hideOnClickOutside","unstable_finalFocusRef","_ref2","onTransitionEnd","onAnimationEnd","innerProps","drawer","getFlexAlignClasses","ChildPosition","Provider","Dialog","DialogBody","hasPadding","scrollDivRef","scrollBox","disableBodyScroll","enableBodyScroll","ConfirmationDialog","Heading","level","Paragraph","actions","DialogTrigger","dropdownContext","DropdownContext","root","DialogFooter","DialogHeader","onCloseClick","hasHorizontalPadding","hasMinHeight","asHeading","useDropdownState","context","loop","unstable_virtual","unstable_offset","DropdownComponent","triggerProps","isNested","isStatic","zIndex","dropdownState","Error","ContainerElement","buttonProps","parent","placement","orientation","Dropdown","NestedDropdownWrapper","parentState","_ref3","itemProps","DropdownItemComponent","subtitle","closeOnClick","hasSubmenu","iconTheme","DropdownItem","DropdownSeparator","ErrorView","message","showContact","showRefresh","toContact","origin","pathname","DefaultErrorBoundary","error","useEffect","console","stringify","RouterErrorElement","useRouteError","iconList","fileName","join","versionImages","chartLayouts","chartTools","chartTypes","add","arrowDownShort","arrowForward","arrowUpShort","briefcase","calendar","caretDown","caretLeft","caretRight","caretUp","caretVertical","chartBar","chartBubble","chartPie","chartTable","chartTreemap","chevronDown","chevronRight","close","darkMode","diamondOutlined","done","drag","draw","empty","exitFullscreen","flash","fullscreen","gesture","gift","hamburger","help","idea","ideaLoad","ideaSave","info","interval","lightMode","lock","lockOpened","menuClose","minus","more","note","palette","profile","publish","refresh","remove","restore","settingsWheel","share","signOut","star","starOutlined","switchHorizontal","switchVertical","tabKey","template","trashCan","trendingDown","trendingUp","triangle","triangleOutlineDown","triangleOutlineUp","warning","layout1h1v","layout1h2v","layout1h3v","layout1l2r","layout1t2b","layout2h1v","layout2h2v","layout3h1v","layout3h2v","drawingActionDelete","drawingSettingAutosaveOff","drawingSettingAutosaveOn","drawingSettingAutosaveSaving","drawingSettingDrawingMode","drawingSettingDrawingModeActive","drawingSettingHide","drawingSettingLock","drawingSettingPreserveDrawings","drawingSettingPreserveDrawingsActive","drawingSettingShow","drawingSettingUnlock","toolArrow","toolBrush","toolCallout","toolCurve","toolElliottWave","toolEllipse","toolExpand","toolFibonacci","toolLine","toolMeasure","toolMidLineH","toolMidLineV","toolMouse","toolPitchfork","toolPolygon","toolPosition","toolRect","toolRectRotated","toolText","toolTriangle","toolXABCD","candleBarBasic","candleBarHeikinAshi","candleBarHollow","lineChartType","ohlcChartType","InputTheme","InputRounding","InputSize","getInputTheme","isError","navigationBar","InputComponent","isHorizontalLabel","labelClassName","showNumberStepper","inputClass","caption","isMobileStyleEnabled","inputTheme","useMemo","isLeftStringIcon","isRightStringIcon","inputSize","commonSideContentClassnames","Label","isHorizontal","InputCaption","TextareaComponent","textareaTheme","forwardRef","Textarea","Spinner","isProgressBar","progress","radius","strokeWidth","circleXY","circumference","PI","viewBox","xmlns","cx","cy","r","strokeDasharray","strokeDashoffset","strokeLinecap","TooltipBox","tooltipColor","TooltipColor","Tooltip","tooltipProps","TooltipArrow","TooltipTrigger","isBlurAfterClick","isHideOnClickOutside","onMouseEnter","onMouseLeave","activeElement","HTMLElement","blur","useTooltipState","transformMap","auto","positionMain","arrowColor","d","getHeadingElement","titleClassName","CRYPTO_TICKERS","TIMEFRAME","SpecificChartFunctionality","elementOverride","ResizeObserver","useResizeObserver","getIsMounted","useIsMounted","elementRef","elementWidth","setElementWidth","offsetWidth","setElementHeight","offsetHeight","measureElement","newElementWidth","newElementHeight","measureElementDebounced","debounce","resizeObserver","entries","requestAnimationFrame","isArray","observe","cancel","disconnect","isMountedRef","controller","AbortController","setResizeObserver","loadResizeObserverPolyfill","then","polyfill","signal","aborted","getVisualViewport","offsetTop","offsetLeft","handleChange","throttle","currentTarget","ContentType","ThrowableError","isServerError","extra","apiRequest","query","headers","options","throwOnAllErrors","requestUrl","URLSearchParams","requestOptions","ApplicationJson","cancelableRequest","async","textResponse","response","responseContentType","get","Html","parsedResponse","contentType","ApplicationJsonUTF","FormUrlEncoded","parseResponseForContentType","ok","statusText","rayId","scope","setContext","searchApiRequest","portfoliosRequest","fields","lastCloseRequest","t","portfolioLimitRequest","portfolioId","pid","compilePath","path","params","pathToRegexp","toHome","toNews","toScreener","toCharts","toGroups","toPortfolio","toInsider","toElite","toSearch","validate","toQuote","toAlerts","toHelp","toAccount","toLogin","toLogout","toMaps","toBubbles","toFutures","toFuturesPerf","toFuturesCharts","toFuturesChartDetail","cleanTicker","toForex","toForexPerf","toForexCharts","toForexChartDetail","toCrypto","toCryptoPerf","toCryptoCharts","toCryptoChartDetail","toBacktests","toBacktestCreate","toBacktestDetail","backtestId","toBacktestPresets","Instrument","DateRangeType","lazyLoadComponent","chunkName","load","componentLoader","lazy","startsWith","Stock","cleanedTicker","Crypto","Forex","Futures","resizeObserverPolyfill","default","getIsBrave","brave","isBrave","topLeft","bottomLeft","leftCenter","topCenter","bottomCenter","topRight","bottomRight","rightCenter","intlCache","getIntl","fractions","Intl","NumberFormat","minimumFractionDigits","maximumFractionDigits","shortFormatNumber","showPlusSign","defaultValue","num","Number","isFinite","suffix","absValue","abs","format","formatNumber","fixedValue","toFixed","prefix","parseFloat","sortByColumn","valueA","valueGetter","a","valueB","b","localeCompare","direction","sortNullAsLast","Infinity","ignoreNullForComparison","moveItemInArray","arr","sourceIndex","destinationIndex","from","to","items","removed","splice","getUuid","crypto","randomUUID","c","getRandomValues","Uint8Array","revalidateOnQueryChange","args","prevParams","currentUrl","searchParams","nextParams","nextUrl","requiredChanged","otherChanged","defaultShouldRevalidate","shouldRevalidateOnQueryChange","parseRouteInitData","fallback","removeElement","initialData","parsedData","getSanitizedSingleTicker","rawTicker","specialTickers"],"sourceRoot":""}