@rpcbase/client 0.227.0 → 0.231.0

package/ui/nav/MorphingDropdown/MorphingDropdownPortal.tsx

@@ -1,166 +0,0 @@
-import assert from "assert"
-import {useState, useEffect, useRef, ReactNode} from "react"
-import {createPortal} from "react-dom"
-import {CSSTransition, TransitionGroup} from "react-transition-group"
-
-import {motion} from "framer-motion"
-
-import {SPRING_DEFAULT} from "../../springs"
-
-import {useMorphingDropdown} from "./MorphingDropdownContext"
-
-
-const RIGHT_OFFSET = 0
-
-const getElementId = (id) => `header-dd-transition-${id}`
-
-export const MorphingDropdownPortal = ({children}: {children: ReactNode}) => {
-  const portalElRef = useRef(document.createElement("div"))
-  const previousMountedIdRef = useRef(null)
-  const transitionNodeRef = useRef(null)
-
-  const dropdownContext = useMorphingDropdown()
-  const {portalId} = dropdownContext
-
-  const [animatedVals, setAnimatedVals] = useState({})
-  const [shouldAnimate, setShouldAnimate] = useState(false)
-
-  useEffect(() => {
-    document.body.appendChild(portalElRef.current)
-
-    return () => {
-      document.body.removeChild(portalElRef.current)
-    }
-  }, [])
-
-  // on click outside dismiss
-  useEffect(() => {
-    // do nothing if menu isn't open
-    if (!dropdownContext.activeId) {
-      return
-    }
-
-    const onClick = (e) => {
-      const wrapperEl = document.getElementById(portalId)
-
-      // click is inside the menu itself, so don't do anything
-      if (wrapperEl.contains(e.target)) {
-        return
-      }
-
-      // clicked outside, but we must ensure we didn't click on an anchor
-      let isInsideAnchor = false
-      const anchorElements = Array.from(document.querySelectorAll(".morphing-dropdown-anchor"))
-      anchorElements.forEach((anchorEl) => {
-        if (anchorEl.contains(e.target)) {
-          isInsideAnchor = true
-        }
-      })
-
-      // we have clicked, not in the menu and not on a menu anchor, dismiss
-      if (!isInsideAnchor) {
-        dropdownContext.setActiveId(null)
-      }
-    }
-
-    document.body.addEventListener("click", onClick)
-
-    return () => {
-      document.body.removeEventListener("click", onClick)
-    }
-  }, [dropdownContext.activeId])
-
-  //
-  dropdownContext.registerSetNextMountedHandler((id, rect) => {
-    const {height: nextHeight, width: nextWidth} = rect
-
-    const anchorElement = document.getElementById(`anchor-${id}`)
-    assert(anchorElement, "anchor element not found")
-    const anchorRect = anchorElement.getBoundingClientRect()
-    const centerX = anchorRect.x + anchorRect.width / 2
-
-    const viewportWidth = window.innerWidth
-
-    const nextAnimatedVals = {opacity: 1, height: nextHeight, width: nextWidth}
-
-    // LEFT
-    if (dropdownContext.side === "left") {
-      const nextLeft = centerX - nextWidth / 2
-      let left = 0 + nextLeft
-
-      if (left < 0) {
-        left = 0
-        // handles the right corner radius + border
-        document.getElementById(portalId).classList.add("docked-left")
-      } else {
-        document.getElementById(portalId).classList.remove("docked-left")
-      }
-
-      nextAnimatedVals.left = left
-    }
-    // RIGHT
-    else if (dropdownContext.side === "right") {
-      const nextRight = centerX + nextWidth / 2
-      let right = viewportWidth - nextRight
-
-      if (right < 0) {
-        right = 0
-        // handles the right corner radius + border
-        document.getElementById(portalId).classList.add("docked-right")
-      } else {
-        document.getElementById(portalId).classList.remove("docked-right")
-      }
-
-      nextAnimatedVals.right = right
-    }
-
-    // do not animate on first mount / render
-    const isNewMount = !previousMountedIdRef.current
-    previousMountedIdRef.current = id
-
-    if (isNewMount) {
-      setShouldAnimate(false)
-    } else {
-      setShouldAnimate(true)
-    }
-
-    setAnimatedVals(nextAnimatedVals)
-  })
-
-  dropdownContext.registerOnResetState(() => {
-    setShouldAnimate(false)
-    previousMountedIdRef.current = null
-    setAnimatedVals({opacity: 0})
-  })
-
-  const activeComp = children.find((c) => c.props.id === dropdownContext.activeId)
-
-  if (!activeComp) return null
-
-  return createPortal(
-    <motion.div
-      id={portalId}
-      className="morphing-dropdown-wrapper"
-      style={{position: "fixed", top: 45, right: RIGHT_OFFSET, overflow: "hidden"}}
-      transition={shouldAnimate ? SPRING_DEFAULT : {duration: 0}}
-      animate={animatedVals}
-      onMouseLeave={dropdownContext.applyMouseLeaveMenu}
-    >
-      <TransitionGroup>
-        <CSSTransition
-          id={getElementId(dropdownContext.activeId)}
-          key={dropdownContext.activeId}
-          nodeRef={transitionNodeRef}
-          timeout={60}
-          className="header-dropdown"
-          classNames="header-dropdown-fade"
-          unmountOnExit
-          in={true}
-        >
-          <div ref={transitionNodeRef} style={{position: "absolute", overflow: "hidden", minWidth: 100}}>{activeComp}</div>
-        </CSSTransition>
-      </TransitionGroup>
-    </motion.div>,
-    portalElRef.current,
-  )
-}

package/ui/nav/MorphingDropdown/MorphingDropdownToggle.tsx

@@ -1,34 +0,0 @@
-import {CSSProperties, ReactNode} from "react"
-import {useMorphingDropdown} from "./MorphingDropdownContext"
-
-
-export const MorphingDropdownToggle = ({
-  id,
-  className = "",
-  style = {},
-  children,
-}: {
-  id: string;
-  className?: string;
-  style?: CSSProperties;
-  children: ReactNode;
-}) => {
-  const morphingDropdown = useMorphingDropdown()
-
-  const onMouseEnter = () => {
-    morphingDropdown.applyMouseEnterToggle(id)
-  }
-
-  return (
-    <div
-      id={`anchor-${id}`}
-      className={cx("morphing-dropdown-anchor", className)}
-      onClick={() => morphingDropdown.setActiveId(id)}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={morphingDropdown.applyMouseLeaveToggle}
-      style={{cursor: "pointer", ...style}}
-    >
-      {children}
-    </div>
-  )
-}

package/ui/nav/MorphingDropdown/index.tsx

@@ -1,16 +0,0 @@
-import "./morphing-dropdown.scss"
-
-import {MorphingDropdownPortal} from "./MorphingDropdownPortal"
-import {useMorphingDropdown, MorphingDropdownProvider} from "./MorphingDropdownContext"
-import {MorphingDropdownMenu} from "./MorphingDropdownMenu"
-import {MorphingDropdownToggle} from "./MorphingDropdownToggle"
-
-
-export {
-  MorphingDropdownPortal as Portal,
-  MorphingDropdownProvider as Provider,
-  MorphingDropdownMenu as Menu,
-  MorphingDropdownToggle as Toggle,
-}
-
-export {useMorphingDropdown}

package/ui/nav/MorphingDropdown/morphing-dropdown.scss

@@ -1,35 +0,0 @@
-@import "helpers";
-
-$transition-duration: 60ms;
-
-.morphing-dropdown-wrapper {
-  background: $gray-900;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-
-  &.docked-right {
-    border-bottom-right-radius: 0;
-  }
-
-  &.docked-left {
-    border-bottom-left-radius: 0;
-  }
-}
-
-.header-dropdown-fade-enter {
-  opacity: 0;
-}
-
-.header-dropdown-fade-enter-active {
-  opacity: 1;
-  transition: opacity $transition-duration;
-}
-
-.header-dropdown-fade-exit {
-  opacity: 1;
-}
-
-.header-dropdown-fade-exit-active {
-  opacity: 00;
-  transition: opacity $transition-duration;
-}

package/ui/nav/NotificationsDropdown/index.tsx

@@ -1,52 +0,0 @@
-import Form from "react-bootstrap/Form"
-import {useTranslation} from "react-i18next"
-
-import {useStoredValue} from "../../../helpers/useStoredValue"
-import {useHashState} from "../../../hashState"
-
-import * as MorphingDropdown from "../MorphingDropdown"
-
-import "./notifications-dropdown.scss"
-
-
-export const NotificationsDropdown = ({id}) => {
-  const {t} = useTranslation("rb.nav")
-
-  const [isEnabled, setIsEnabled] = useStoredValue("has_notifications_enabled", "yes")
-
-  const {serializeHashState} = useHashState()
-
-  const onToggleNotifications = (e) => {
-    setIsEnabled(e.target.checked ? "yes" : "no")
-  }
-
-  const onClickNotificationsSettings = () => {
-    serializeHashState({
-      showNotificationsSettingsModal: true,
-    })
-  }
-
-  return (
-    <MorphingDropdown.Menu id={id} style={{minWidth: 300}}>
-      <div className="text-light px-3">
-        <Form.Check
-          type="switch"
-          id="toggle-notifications-switch"
-          label={t("toggle_notifications")}
-          data-bs-theme="dark"
-          checked={isEnabled === "yes"}
-          onChange={onToggleNotifications}
-        />
-      </div>
-      <div className="list-group" data-bs-theme="dark">
-        <button
-          className="list-group-item list-group-item-action"
-          onClick={onClickNotificationsSettings}
-        >
-          {t("notifications_settings")}
-        </button>
-        <button className="list-group-item list-group-item-action">List item23.. ..</button>
-      </div>
-    </MorphingDropdown.Menu>
-  )
-}

package/ui/nav/NotificationsDropdown/notifications-dropdown.scss

@@ -1,5 +0,0 @@
-@import "helpers";
-
-#toggle-notifications-switch + label {
-  cursor: pointer;
-}

package/ui/nav/NotificationsToggle/NotificationsGlyph.tsx

@@ -1,54 +0,0 @@
-import {useRef, useEffect} from "react"
-
-import LottiePlayer from "../../LottiePlayer"
-
-import notifAnimation from "./notification-animation.json"
-
-
-export const NotificationsGlyph = () => {
-  const playerRef = useRef(null)
-
-  const play = () => {
-    playerRef.current?.setSeeker(0, true)
-    playerRef.current?.play()
-  }
-
-  useEffect(() => {
-    const onPlay = () => {
-      play()
-    }
-
-    document.body.addEventListener("PLAY_NOTIF_ANIMATION", onPlay)
-
-    return () => {
-      document.body.removeEventListener("PLAY_NOTIF_ANIMATION", onPlay)
-    }
-  }, [])
-
-  const onPlayerMouseEnter = () => {
-    play()
-  }
-
-  return (
-    <div
-      className="player-wrapper h-100 d-flex align-items-center"
-      onMouseEnter={onPlayerMouseEnter}
-    >
-      <LottiePlayer
-        id="notifications-glyph-player"
-        ref={playerRef}
-        autoplay={false}
-        loop={false}
-        // speed={2}
-        keepLastFrame={true}
-        src={notifAnimation}
-        style={{
-          marginTop: -1,
-          height: "23px",
-          // width: "21px",
-        }}
-        // onEvent={this.onPlayerEvent}
-      />
-    </div>
-  )
-}

package/ui/nav/NotificationsToggle/index.tsx

@@ -1,12 +0,0 @@
-import * as MorphingDropdown from "../MorphingDropdown"
-
-import {NotificationsGlyph} from "./NotificationsGlyph"
-
-import "./notifications-toggle.scss"
-
-
-export const NotificationsToggle = ({onClick}) => (
-  <MorphingDropdown.Toggle id="notifications" className="px-2">
-    <NotificationsGlyph />
-  </MorphingDropdown.Toggle>
-)

package/ui/nav/NotificationsToggle/notification-animation.json

@@ -1 +0,0 @@
-{"v":"5.6.5","fr":24,"ip":0,"op":28,"w":30,"h":30,"nm":"bell","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"bell2 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":3,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":8,"s":[11]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[-12]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":16,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":19,"s":[-7]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":22,"s":[3]},{"t":25,"s":[0]}],"ix":10},"p":{"a":0,"k":[14.93,4.945,0],"ix":2},"a":{"a":0,"k":[14.93,4.945,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.553,0],[0,0],[0,-0.553],[-0.552,0],[0,0],[0,0.553]],"o":[[0,0],[-0.552,0],[0,0.553],[0,0],[0.553,0],[0,-0.553]],"v":[[10,-1],[-10,-1],[-11,0],[-10,1],[10,1],[11,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[15,23],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,1.59],[0,0],[3.448,0.89],[0,0],[1.105,0],[0,-1.105],[0,0],[0,-3.726],[0,0],[0.609,-1.453],[0,0]],"o":[[0,0],[0,-3.726],[0,0],[0,-1.105],[-1.105,0],[0,0],[-3.448,0.89],[0,0],[0,1.59],[0,0],[-0.609,-1.452]],"v":[[8,3.894],[8,1.5],[2,-6.238],[2,-6.5],[0,-8.5],[-2,-6.5],[-2,-6.238],[-8,1.5],[-8,3.894],[-8.935,8.5],[8.935,8.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[15,11.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":28,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"mask","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":3,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":8,"s":[11]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[-12]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":16,"s":[5]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":19,"s":[-7]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":22,"s":[3]},{"t":25,"s":[0]}],"ix":10},"p":{"a":0,"k":[14.938,5,0],"ix":2},"a":{"a":0,"k":[14.938,5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.553,0],[0,0],[0,1.585],[0,0],[4.418,0],[0,-4.418],[0,0],[1.15,-1.893],[0,0],[0,-0.553],[-0.552,0],[0,0],[0,0.553]],"o":[[0,0],[-1.518,-2.129],[0,0],[0,-4.418],[-4.418,0],[0,0],[0,1.585],[0,0],[-0.552,0],[0,0.553],[0,0],[0.553,0],[0,-0.553]],"v":[[10,7.5],[9.923,7.5],[8,0.894],[8,-1.5],[0,-9.5],[-8,-1.5],[-8,0.894],[-9.925,7.5],[-10,7.5],[-11,8.5],[-9.938,9.313],[10.063,9.313],[11,8.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[15,14.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":28,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"tongue Outlines","tt":2,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":8,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":11,"s":[10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":14,"s":[-19]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":17,"s":[8]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":20,"s":[-14]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":23,"s":[6]},{"t":25,"s":[0]}],"ix":10},"p":{"a":0,"k":[15,5.188,0],"ix":2},"a":{"a":0,"k":[3.25,-16.563,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[1.657,0],[0,-1.657],[-1.657,0],[0,1.657]],"o":[[-1.657,0],[0,1.657],[1.657,0],[0,-1.657]],"v":[[0,-3],[-3,0],[0,3],[3,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[3.25,3.25],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":28,"st":0,"bm":0}],"markers":[]}

package/ui/nav/NotificationsToggle/notifications-toggle.scss

@@ -1,26 +0,0 @@
-@import "helpers";
-
-#notifications-glyph-player {
-  position: relative;
-
-  path {
-    fill: $gray-200;
-  }
-
-  &:hover {
-    path {
-      fill: $white;
-    }
-  }
-
-  &::after {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 0;
-    right: -2px;
-    height: 2px;
-    background: $red-500;
-    transform: rotate(45deg);
-  }
-}

package/ui/nav/SidebarContainer/index.tsx

@@ -1,48 +0,0 @@
-import {createPortal} from "react-dom"
-import {ResizableBox} from "react-resizable"
-
-import {useContentViewContext} from "../ContentView/ContentViewContext"
-
-import "./sidebar-container.scss"
-
-
-const OPENED_MIN_WIDTH = 60
-
-export const SidebarContainer = ({children}) => {
-  const {sidebarWidth, setSidebarWidth} = useContentViewContext()
-
-  const onResize = (e, data) => {
-    const width = data.size.width
-
-    // only apply new width if different from previous one
-    if (width !== sidebarWidth) {
-      setSidebarWidth(width)
-    }
-  }
-
-  const containerElement = document.getElementById("sidebar-container")
-
-  if (!containerElement) return null
-
-  return createPortal((
-    <ResizableBox
-      id="sidebar"
-      width={sidebarWidth}
-      // style={{ position: "fixed", top: 45, bottom: 0, overflowX: "visible" }}
-      draggableOpts={{}}
-      handle={
-        <div
-          className="sidebar-resize-handle"
-        />
-      }
-      resizeHandles={["e"]}
-      axis="x"
-      minConstraints={[OPENED_MIN_WIDTH]}
-      maxConstraints={[800]}
-      onResize={onResize}
-      style={{overflow: "hidden"}}
-    >
-      {children}
-    </ResizableBox>
-  ), containerElement)
-}

package/ui/nav/SidebarContainer/sidebar-container.scss

@@ -1,21 +0,0 @@
-@import "helpers";
-
-#sidebar-container {
-  position: fixed;
-  left: 0;
-  max-height: calc(100vh - 45px);
-
-  .sidebar-resize-handle {
-    z-index: 3;
-
-    // transform: translateX(2px);
-    position: absolute;
-    right: -2px;
-    top: 0;
-    display: block;
-    height: 100%;
-    width: 4px;
-    cursor: ew-resize;
-  }
-
-}

package/ui/nav/SlideoutContainer/components/Body.tsx

@@ -1,19 +0,0 @@
-import {useContext} from "react"
-import Offcanvas from "react-bootstrap/Offcanvas"
-
-import ContentViewContext from "../../ContentView/ContentViewContext"
-
-
-export const Body = ({children}) => {
-  const contentViewContext = useContext(ContentViewContext)
-
-  if (contentViewContext.isDocked) {
-    return children
-  }
-
-  return (
-    <Offcanvas.Body className="d-flex flex-column px-0 pb-0">
-      {children}
-    </Offcanvas.Body>
-  )
-}

package/ui/nav/SlideoutContainer/components/Header.tsx

@@ -1,23 +0,0 @@
-import {useContext} from "react"
-import Offcanvas from "react-bootstrap/Offcanvas"
-
-import {ContentViewContext} from "../../ContentView/ContentViewContext"
-
-
-export const Header = ({children}) => {
-  const contentViewContext = useContext(ContentViewContext)
-
-  if (contentViewContext.isDocked) {
-    return (
-      <div className="bg-light" style={{height: 41}}>
-        {children}
-      </div>
-    )
-  }
-
-  return (
-    <Offcanvas.Header closeButton>
-      <Offcanvas.Title>{children}</Offcanvas.Title>
-    </Offcanvas.Header>
-  )
-}

package/ui/nav/SlideoutContainer/components/Wrapper.tsx

@@ -1,46 +0,0 @@
-import Offcanvas from "react-bootstrap/Offcanvas"
-import {ResizableBox} from "react-resizable"
-
-import {useContentViewContext} from "../../ContentView/ContentViewContext"
-
-
-export const Wrapper = ({onUpdateWidth, show, onHide, children}) => {
-  const contentViewContext = useContentViewContext()
-
-
-  const onResize = (e, data) => {
-    const val = data.size.width
-    onUpdateWidth(val)
-  }
-
-  if (contentViewContext.isDocked) {
-    return (
-      <ResizableBox
-        id="slideout-view-wrapper"
-        width={contentViewContext.sideItemViewWidth}
-        style={{position: "fixed", top: 45, right: 0, bottom: 0, overflowX: "visible"}}
-        draggableOpts={{}}
-        handle={<div className="slideout-view-resize-handle" />}
-        resizeHandles={["w"]}
-        axis="x"
-        minConstraints={[120]}
-        maxConstraints={[768]}
-        onResize={onResize}
-      >
-        <div className="h-100">{children}</div>
-      </ResizableBox>
-    )
-  } else {
-    return (
-      <Offcanvas
-        className="slideout-view-offcanvas"
-        placement="end"
-        backdropClassName="slideout-view-backdrop"
-        show={show}
-        onHide={onHide}
-      >
-        {children}
-      </Offcanvas>
-    )
-  }
-}

package/ui/nav/SlideoutContainer/index.tsx

@@ -1,50 +0,0 @@
-import {memo, ReactNode, useEffect} from "react"
-import {createPortal} from "react-dom"
-
-import {useContentViewContext} from "../ContentView/ContentViewContext"
-
-import {Wrapper} from "./components/Wrapper"
-import {Header} from "./components/Header"
-import {Body} from "./components/Body"
-
-import "./slideout-container.scss"
-
-
-export const SlideoutContainer = memo(
-  ({
-    children,
-    onHide,
-    isDocked = false,
-    header,
-  }: {
-    children: ReactNode;
-    onHide?: () => void;
-    isDocked?: boolean;
-    header?: ReactNode | string;
-  }) => {
-    const contentViewContext = useContentViewContext()
-
-    const {onUpdateSlideoutViewWidth: onUpdateWidth} = contentViewContext
-
-    useEffect(() => {
-      contentViewContext.setIsDocked(isDocked)
-
-      return () => contentViewContext.setIsDocked(false)
-    }, [isDocked])
-
-    // if (!contentViewContext.isDocked) return null
-    // if (contentViewContext.isCollapsed && contentViewContext.isDocked) return null
-
-    const containerElement = document.getElementById("slideout-container")
-    if (!containerElement) return null
-
-    return createPortal(
-      <Wrapper onUpdateWidth={onUpdateWidth} show={true} onHide={onHide}>
-        {header && <Header>{header}</Header>}
-
-        <Body>{children}</Body>
-      </Wrapper>,
-      containerElement,
-    )
-  },
-)

package/ui/nav/SlideoutContainer/slideout-container.scss

@@ -1,40 +0,0 @@
-@import "helpers";
-
-#slideout-view-wrapper {
-  border-left: 1px solid $border-color;
-}
-
-
-.slideout-view-resize-handle {
-  z-index: 3;
-
-  position: absolute;
-  left: -2px;
-  top: 0;
-  display: block;
-  height: 100%;
-  width: 4px;
-  cursor: ew-resize;
-}
-
-.slideout-view-offcanvas.offcanvas {
-  transition: none;
-
-  .offcanvas-header {
-    height: 45px;
-  }
-
-  .offcanvas-title {
-    font-size: 1rem;
-  }
-
-  .offcanvas-body {
-    border-top: 1px solid $border-color;
-    font-size: $font-size-base;
-  }
-}
-
-.slideout-view-backdrop.offcanvas-backdrop {
-  transition-duration: 80ms;
-  color: $red-800;
-}