@dbosoft/nextjs-uicore 1.0.3 → 1.2.0

package/src/tabs/partials/tab-trigger/index.tsx

@@ -1,66 +0,0 @@
-import React, { useEffect } from 'react'
-import TooltipIcon from '../../icons/tooltip.svg'
-import Tooltip from '../tooltip'
-import { useTabGroups } from '../../provider.js'
-import s from './style.module.scss'
-import classNames from 'classnames'
-
-export interface TabTriggerType {
-  index: number
-  group: string
-  heading: string
-  tooltip?: string
-}
-
-interface TabTriggerProps {
-  tab: TabTriggerType
-  hasOverflow: boolean
-  activeTabIdx: number
-  setActiveTab: (tabIndex: number, tabGroup?: string) => void
-}
-
-function TabTrigger({
-  tab,
-  hasOverflow,
-  activeTabIdx,
-  setActiveTab,
-}: TabTriggerProps): React.ReactElement {
-  const groupCtx = useTabGroups()
-  const activeGroup = groupCtx?.activeTabGroup
-  const isInActiveGroup = groupCtx && tab.group && tab.group === activeGroup
-  const isActiveIndex = tab.index === activeTabIdx
-  const isActiveTab = isInActiveGroup || isActiveIndex ? true : false
-
-  useEffect(() => {
-    // if the tab is active based on group and the
-    // index doesn't match, update the active index
-    if (isInActiveGroup) !isActiveIndex && setActiveTab(tab.index)
-  }, [isInActiveGroup, isActiveIndex, setActiveTab, tab.index])
-
-  return (
-    <button
-      className={classNames(s.root, {
-        [s.isActiveTab]: isActiveTab,
-        [s.hasOverflow]: hasOverflow,
-      })}
-      data-tabindex={tab.index}
-      onMouseDown={(e) => e.preventDefault()}
-      onClick={() => setActiveTab(tab.index, tab.group)}
-    >
-      <span className={s.inner}>
-        <span className="g-type-body-strong">{tab.heading}</span>
-        {tab.tooltip && (
-          <Tooltip label={tab.tooltip} aria-label={tab.tooltip}>
-            <span
-              data-testid="tooltip-icon"
-              className={s.tooltipTrigger}
-              dangerouslySetInnerHTML={{ __html: TooltipIcon }}
-            />
-          </Tooltip>
-        )}
-      </span>
-    </button>
-  )
-}
-
-export default TabTrigger

package/src/tabs/partials/tab-trigger/style.module.scss

@@ -1,69 +0,0 @@
-.root {
-  --inner-text-color: var(--gray-3);
-  --inner-border-color: transparent;
-  --inner-decoration: none;
-
-  display: flex;
-  align-items: center;
-  background: none;
-  border: none;
-  outline: none;
-  padding: 0 16px;
-
-  @media (--medium-up) {
-    padding: 0 24px;
-  }
-
-  &:first-of-type {
-    padding-left: 0;
-  }
-
-  &:last-of-type {
-    padding-right: 0;
-
-    /* With overflow, add
-    a bit of space to ensure tooltips
-    are still easily hover-able */
-    &.hasOverflow {
-      padding-right: 24px;
-    }
-  }
-
-  &:hover {
-    cursor: pointer;
-
-    --inner-text-color: var(--black);
-  }
-
-  &:focus {
-    --inner-text-color: var(--black);
-    --inner-decoration: underline;
-  }
-
-  &.isActiveTab {
-    --inner-border-color: var(--black);
-    --inner-text-color: var(--black);
-  }
-}
-
-.inner {
-  display: flex;
-  align-items: center;
-  padding: 18px 0 15px 0;
-  border-bottom: 3px solid;
-  border-color: var(--inner-border-color);
-  color: var(--inner-text-color);
-  transition: color 0.2s;
-  white-space: nowrap;
-  text-decoration: var(--inner-decoration);
-}
-
-.tooltipTrigger {
-  margin-left: 0.5rem;
-  margin-top: 1px;
-  width: 1.125rem;
-
-  & svg {
-    width: 100%;
-  }
-}

package/src/tabs/partials/tab-triggers/index.tsx

@@ -1,241 +0,0 @@
-import React, { MouseEventHandler, useCallback, useEffect, useRef, useState } from 'react'
-import classNames from 'classnames'
-import InlineSvg from '@dbosoft/react-inline-svg'
-import TabTrigger, { TabTriggerType } from '../tab-trigger'
-import SvgChevronRight from '../../icons/chevron-right.svg'
-import smoothScroll from '../../utils/smooth-scroll.js'
-import useWindowSize from '../../hooks/use-window-size'
-import useScrollLeft from '../../hooks/use-scroll-left'
-import s from './style.module.scss'
-
-interface TabTriggersProps {
-  tabs: TabTriggerType[]
-  activeTabIdx: number
-  setActiveTab: (tabIndex: number, tabGroup?: string) => void
-  centered: boolean
-  fullWidthBorder: boolean
-}
-
-function TabTriggers({
-  tabs,
-  activeTabIdx,
-  setActiveTab,
-  centered,
-  fullWidthBorder,
-}: TabTriggersProps): React.ReactElement {
-  const overflowBaseRef = useRef(null) as $TSFixMe
-  const overflowContentRef = useRef(null) as $TSFixMe
-  const windowSize = useWindowSize()
-  const [scrollRef, scrollLeft] = useScrollLeft()
-  const [hiddenArrows, setHiddenArrows] = useState({
-    prev: true,
-    next: true,
-  })
-  const [hasOverflow, setHasOverflow] = useState(false)
-
-  /**
-   * update hasOverflow when window is resized
-   */
-  useEffect(() => {
-    //  If content width exceeds available space,
-    //  set to overflow-friendly styling
-    const contentWidth = overflowContentRef.current.offsetWidth
-    const availableSpace = overflowBaseRef.current.offsetWidth
-    setHasOverflow(contentWidth > availableSpace)
-  }, [scrollRef, windowSize])
-
-  /**
-   * update visibility of next & prev arrows.
-   *
-   * depends on both scroll position, as
-   * fully scrolling to one end should hide
-   * the arrow at that end of the container,
-   *
-   * and depends on window size, as
-   * window size changes can affect both
-   * overflow and scroll position
-   */
-  useEffect(() => {
-    // Determine which arrows to show
-    const { scrollLeft, scrollWidth, offsetWidth } = scrollRef.current
-    const maxScrollLeft = scrollWidth - offsetWidth
-    const hidePrev = scrollLeft === 0
-    const hideNext = scrollLeft >= maxScrollLeft
-    setHiddenArrows({ prev: hidePrev, next: hideNext })
-  }, [scrollLeft, scrollRef, windowSize])
-
-  /**
-   * smooth scroll to the active tab.
-   * this is done both when the activeTabIdx updates,
-   * and when the next or previous arrow is clicked but
-   * does not cause an activeTabIdx update
-   */
-  const updateScrollOffset = useCallback(
-    (targetTabIdx) => {
-      const scrollElem = scrollRef.current
-      // Determine where to scroll to
-      let newScrollLeft
-      if (targetTabIdx === 0) {
-        // If first tab, scroll to start of container
-        newScrollLeft = -1
-      } else {
-        // Otherwise, calculate the midpoint of the active tab trigger
-        const targetSelector = `[data-tabindex='${targetTabIdx}']`
-        const targetElem = scrollElem.querySelector(targetSelector)
-        const targetMidpoint =
-          targetElem.offsetLeft + targetElem.offsetWidth / 2
-        newScrollLeft = targetMidpoint - scrollElem.offsetWidth / 2
-      }
-      // Update the scroll position
-      const windowElem = scrollElem.closest('html').parentNode.defaultView
-      smoothScroll(windowElem, scrollElem, { x: newScrollLeft })
-    },
-    [scrollRef]
-  )
-
-  /**
-   * automatically smoothly scroll to center
-   * the active tab in the scroll-able area
-   */
-  useEffect(() => {
-    if (!hasOverflow) return
-    updateScrollOffset(activeTabIdx)
-  }, [hasOverflow, activeTabIdx, updateScrollOffset, scrollRef])
-
-  return (
-    <div
-      className={classNames(s.root, { [s.fullWidthBorder]: fullWidthBorder })}
-    >
-      <div className="g-grid-container">
-        {/* Note: the overflowBaseRef element has zero height, but is still "visible".
-            It is used to determine when tabs are overflowing, and updates hasOverflow */}
-        <div ref={overflowBaseRef}></div>
-      </div>
-      <div className={s.borderAdjuster}>
-        <NextPrevScrims hasOverflow={hasOverflow} hiddenArrows={hiddenArrows} />
-        <div
-          className={classNames(s.scrollContainer, {
-            [s.centered]: centered,
-            [s.hasOverflow]: hasOverflow,
-          })}
-          ref={scrollRef}
-        >
-          <div
-            className={classNames(s.tabsWidthContainer, {
-              [s.centered]: centered,
-              [s.hasOverflow]: hasOverflow,
-            })}
-            ref={overflowContentRef}
-          >
-            {tabs.map((tab, stableIdx) => (
-              <TabTrigger
-                // This array is stable, so we can use index as key
-                // eslint-disable-next-line react/no-array-index-key
-                key={stableIdx}
-                hasOverflow={hasOverflow}
-                activeTabIdx={activeTabIdx}
-                setActiveTab={(targetIdx, groupId) => {
-                  setActiveTab(targetIdx, groupId)
-                  updateScrollOffset(targetIdx)
-                }}
-                tab={tab}
-              />
-            ))}
-          </div>
-        </div>
-        <NextPrevArrows
-          hasOverflow={hasOverflow}
-          hiddenArrows={hiddenArrows}
-          onPrev={() => {
-            const target = activeTabIdx - 1
-            if (target >= 0) {
-              setActiveTab(target, tabs[target].group)
-            } else {
-              updateScrollOffset(activeTabIdx)
-            }
-          }}
-          onNext={() => {
-            const target = activeTabIdx + 1
-            if (target < tabs.length) {
-              setActiveTab(target, tabs[target].group)
-            } else {
-              updateScrollOffset(activeTabIdx)
-            }
-          }}
-        />
-      </div>
-      <BottomBorder
-        hasOverflow={hasOverflow}
-        fullWidthBorder={fullWidthBorder}
-      />
-    </div>
-  )
-}
-
-function NextPrevScrims({ hasOverflow, hiddenArrows }: { hasOverflow: $TSFixMe, hiddenArrows: $TSFixMe }) {
-  return (
-    <div className={s.scrimContainer}>
-      <div
-        className={classNames(s.prevArrowScrim, {
-          [s.hasOverflow]: hasOverflow,
-          [s.hidden]: hiddenArrows.prev,
-        })}
-      />
-      <div
-        className={classNames(s.nextArrowScrim, {
-          [s.hasOverflow]: hasOverflow,
-          [s.hidden]: hiddenArrows.next,
-        })}
-      />
-    </div>
-  )
-}
-
-function NextPrevArrows({ hasOverflow, hiddenArrows, onPrev, onNext }
-  : { hasOverflow: $TSFixMe, hiddenArrows: $TSFixMe, onPrev: MouseEventHandler, onNext: MouseEventHandler }) {
-  return (
-    <>
-      <div
-        className={classNames(s.prevArrow, {
-          [s.hasOverflow]: hasOverflow,
-          [s.hidden]: hiddenArrows.prev,
-        })}
-        onClick={onPrev}
-      >
-        <InlineSvg src={SvgChevronRight} />
-      </div>
-      <div
-        className={classNames(s.nextArrow, {
-          [s.hasOverflow]: hasOverflow,
-          [s.hidden]: hiddenArrows.next,
-        })}
-        onClick={onNext}
-      >
-        <InlineSvg src={SvgChevronRight} />
-      </div>
-    </>
-  )
-}
-
-function BottomBorder({ hasOverflow, fullWidthBorder }: { hasOverflow: $TSFixMe, fullWidthBorder: $TSFixMe }) {
-  return (
-    <>
-      <div className="g-grid-container">
-        <div
-          className={classNames(s.bottomBorder, s.forDefault, {
-            [s.hasOverflow]: hasOverflow,
-            [s.fullWidthBorder]: fullWidthBorder,
-          })}
-        ></div>
-      </div>
-      <div
-        className={classNames(s.bottomBorder, s.forOverflow, {
-          [s.hasOverflow]: hasOverflow,
-          [s.fullWidthBorder]: fullWidthBorder,
-        })}
-      ></div>
-    </>
-  )
-}
-
-export default TabTriggers

package/src/tabs/partials/tab-triggers/style.module.scss

@@ -1,193 +0,0 @@
-.root {
-  --height: 64px;
-
-  background: var(--white);
-  position: relative;
-
-  &.fullWidthBorder {
-    border-bottom: 1px solid var(--gray-5);
-  }
-}
-
-.bottomBorder {
-  width: 100%;
-  display: block;
-  position: relative;
-  z-index: 0;
-  border-bottom: 1px solid var(--gray-5);
-
-  &.forDefault {
-    display: block;
-    &.hasOverflow {
-      display: none;
-    }
-  }
-
-  &.forOverflow {
-    display: none;
-    &.hasOverflow {
-      display: block;
-    }
-  }
-
-  /* If we're using a full-width border,
-     hide this elements border no matter what */
-  &.fullWidthBorder {
-    display: none;
-
-    &.hasOverflow {
-      display: none;
-    }
-  }
-}
-
-.borderAdjuster {
-  position: relative;
-  margin-bottom: -1px;
-  z-index: 1;
-}
-
-.scrollContainer {
-  composes: g-grid-container from global;
-  overflow: scroll;
-  white-space: nowrap;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-.tabsWidthContainer {
-  display: flex;
-  min-width: max-content;
-
-  &.centered {
-    justify-content: center;
-  }
-}
-
-/*
-Arrows are positioned based on 
-on the tab container, so they always
-appear by the container edge if
-there is overflow.
-*/
-.arrow {
-  --icon-color: var(--gray-3);
-
-  align-items: center;
-  bottom: 3px;
-  display: none;
-  justify-content: center;
-  opacity: 1;
-  position: absolute;
-  top: 0;
-  transition: opacity 0.6s;
-  user-select: none;
-  width: 56px;
-  z-index: 1;
-
-  &.hasOverflow {
-    display: flex;
-  }
-
-  &.hidden {
-    opacity: 0;
-  }
-
-  & svg {
-    display: block;
-    width: 20px;
-    height: 20px;
-    & [fill] {
-      fill: var(--icon-color);
-    }
-    & [stroke] {
-      stroke: var(--icon-color);
-    }
-  }
-
-  &:hover {
-    --icon-color: var(--gray-1);
-
-    cursor: pointer;
-  }
-}
-
-.prevArrow {
-  composes: arrow;
-  left: 0;
-
-  & svg {
-    transform: rotate(180deg);
-    margin-right: 20px;
-  }
-}
-
-.nextArrow {
-  composes: arrow;
-  right: 0;
-
-  & svg {
-    margin-left: 20px;
-  }
-}
-
-/*
-Scrims are positioned based on 
-g-grid-container, to align with 
-the edge of the scrolling container.
-*/
-.scrimContainer {
-  composes: g-grid-container from global;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 3px;
-  right: 0;
-}
-
-.arrowScrim {
-  position: absolute;
-  top: 0;
-  pointer-events: none;
-  transition: opacity 0.6s;
-  bottom: 0;
-  width: 56px;
-  display: none;
-  opacity: 1;
-  user-select: none;
-  z-index: 1;
-
-  &.hasOverflow {
-    display: flex;
-  }
-
-  &.hidden {
-    opacity: 0;
-  }
-}
-
-.prevArrowScrim {
-  composes: arrowScrim;
-  left: -1px;
-  background: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 1) 30%,
-    rgba(255, 255, 255, 0.85) 60%,
-    rgba(255, 255, 255, 0) 100%
-  );
-}
-
-.nextArrowScrim {
-  composes: arrowScrim;
-  right: -1px;
-  background: linear-gradient(
-    -90deg,
-    rgba(255, 255, 255, 1) 30%,
-    rgba(255, 255, 255, 0.85) 60%,
-    rgba(255, 255, 255, 0) 100%
-  );
-}

package/src/tabs/partials/tooltip/index.tsx

@@ -1,112 +0,0 @@
-import React from 'react'
-import Portal from '@reach/portal'
-import { useTooltip, TooltipPopup } from '@reach/tooltip'
-import s from './style.module.scss'
-
-interface TooltipProps {
-  /** Element that, when hovered, will display the tooltip. */
-  children: React.ReactElement
-  /** Plain text for the tooltip to render */
-  label: string
-  /** What the screen reader announces  */
-  'aria-label'?: string
-  /** Minimum spacing from viewport edge */
-  collisionBuffer?: number
-}
-
-function Tooltip({
-  children,
-  label,
-  collisionBuffer = 8,
-  'aria-label': ariaLabel,
-}: TooltipProps): React.ReactElement {
-  const [trigger, tooltip] = useTooltip()
-  const { isVisible, triggerRect } = tooltip
-
-  return (
-    <React.Fragment>
-      {React.cloneElement(children, trigger)}
-      {isVisible && (
-        <Portal>
-          <Arrow triggerRect={triggerRect!} collisionBuffer={collisionBuffer} />
-        </Portal>
-      )}
-      <TooltipPopup
-        {...tooltip}
-        className={s.box}
-        label={label}
-        aria-label={ariaLabel}
-        position={(triggerRect, tooltipRect) =>
-          centeringFunction(triggerRect as DOMRect, tooltipRect as DOMRect, collisionBuffer)
-        }
-      />
-    </React.Fragment>
-  )
-}
-
-/**
- * Given the bounding rectangle for both
- * the tooltip trigger and tooltip popup,
- * render the tooltip centered and below
- * the trigger.
- *
- * Allow viewport collisions to override
- * the centered position where needed,
- * using the collisionBuffer argument
- * to inset the collision area so the tooltip
- * doesn't appear at the very edge of the
- * viewport.
- */
-function centeringFunction(triggerRect: DOMRect, tooltipRect: DOMRect, collisionBuffer:number) {
-  const triggerCenter = triggerRect.left + triggerRect.width / 2
-  const left = triggerCenter - tooltipRect.width / 2
-  const maxLeft = window.innerWidth - tooltipRect.width - collisionBuffer
-  return {
-    left: Math.min(Math.max(collisionBuffer, left), maxLeft) + window.scrollX,
-    top: triggerRect.bottom + collisionBuffer + window.scrollY,
-  }
-}
-
-/**
- * Given the bounding rectangle for
- * the tooltip trigger, render a small
- * triangular arrow.
- *
- * This arrow is centered relative to
- * the trigger, but accounts for possible
- * viewport collisions, as we would prefer
- * to have the arrow connected to the popup
- * (which is bound by the viewport) rather
- * than have it perfectly centered but
- * disconnected from the popup.
- */
-function Arrow({ triggerRect, collisionBuffer }: {triggerRect:DOMRect, collisionBuffer:number}) {
-  const arrowThickness = 10
-  const arrowLeft = triggerRect
-    ? `${Math.min(
-        // Centered position, covers most use cases
-        triggerRect.left - arrowThickness + triggerRect.width / 2,
-        // Ensure the arrow is not rendered even partially offscreen,
-        // as it will look disconnected from our tooltip body,
-        // which must be rendered within the viewport
-        window.innerWidth - arrowThickness * 2 - collisionBuffer
-      )}px`
-    : 'auto'
-  const arrowTop = triggerRect
-    ? `${triggerRect.bottom + window.scrollY}px`
-    : 'auto'
-
-  return (
-    <div
-      className={s.arrow}
-      style={
-        {
-          '--left': arrowLeft,
-          '--top': arrowTop,
-        } as React.CSSProperties
-      }
-    />
-  )
-}
-
-export default Tooltip

package/src/tabs/partials/tooltip/style.module.scss

@@ -1,38 +0,0 @@
-/* Additional composition is helpful here,
-as .arrow and .root can't use CSS custom properties
-nicely since .arrow is rendered into a Portal. */
-.theme {
-  --background-color: var(--gray-2);
-  --foreground-color: var(--white);
-}
-
-.arrow {
-  composes: theme;
-  position: absolute;
-
-  /* --top and --left are set in JS, to allow
-    for dynamic, collision-free positioning. */
-  top: var(--top);
-  left: var(--left);
-  width: 0;
-  height: 0;
-  border-left: 10px solid transparent;
-  border-right: 10px solid transparent;
-  border-bottom: 10px solid var(--background-color);
-}
-
-.box {
-  composes: theme;
-  composes: g-type-body-small from global;
-  font-size: 0.875rem;
-  background: var(--background-color);
-  box-shadow: 2px 2px 10px hsla(0, 0%, 0%, 0.1);
-  color: var(--foreground-color);
-  padding: 0.5em 1em;
-  pointer-events: none;
-  position: absolute;
-  z-index: 1;
-  border-radius: 3px;
-  max-width: 75vw;
-  max-width: min(75vw, 20em);
-}