@os-design/core 1.0.199 → 1.0.200

package/src/Popover/index.tsx

@@ -0,0 +1,243 @@
+import { css, keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import Portal from '@os-design/portal';
+import { sizeStyles, WithSize } from '@os-design/styles';
+import { clr, useTheme } from '@os-design/theming';
+import {
+  omitEmotionProps,
+  useBrowserLayoutEffect,
+  useClickOutside,
+  useClosable,
+  useEvent,
+  useForwardedRef,
+  useResizeObserver,
+} from '@os-design/utils';
+import React, {
+  forwardRef,
+  RefCallback,
+  RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import usePopoverPosition, {
+  Placement,
+  Rect,
+} from './utils/usePopoverPosition';
+
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface PopoverProps extends JsxDivProps, WithSize {
+  /**
+   * The element next to which the popover appears.
+   * @default undefined
+   */
+  trigger?: RefObject<Element> | Rect;
+  /**
+   * On which side of the element the popover will appear.
+   * @default top
+   */
+  placement?: Placement;
+  /**
+   * The gap between the element and the popover in em.
+   * @default 0.2
+   */
+  gap?: number;
+  /**
+   * Whether the popover to flip if it does not fit in the window.
+   * @default true
+   */
+  flip?: boolean;
+  /**
+   * Whether the popover is visible.
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * The close event handler.
+   * @default undefined
+   */
+  onClose?: () => void;
+}
+
+const fadeIn = keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+
+const fadeOut = keyframes`
+  from { opacity: 1; }
+  to { opacity: 0; }
+`;
+
+const visibleStyles = (p) =>
+  p.visible &&
+  css`
+    animation: ${fadeIn} ${p.theme.transitionDelay}ms forwards;
+  `;
+
+const invisibleStyles = (p) =>
+  !p.visible &&
+  css`
+    animation: ${fadeOut} ${p.theme.transitionDelay}ms forwards;
+  `;
+
+interface ContainerProps extends Pick<PopoverProps, 'visible' | 'size'> {
+  top: number;
+  left: number;
+}
+const Container = styled(
+  'div',
+  omitEmotionProps('top', 'left', 'visible', 'size')
+)<ContainerProps>`
+  position: absolute;
+  top: ${(p) => p.top}px;
+  left: ${(p) => p.left}px;
+
+  border-radius: ${(p) => p.theme.borderRadius}em;
+  background-color: ${(p) => clr(p.theme.popoverColorBg)};
+  color: ${(p) => clr(p.theme.popoverColorText)};
+  border: 1px solid ${(p) => clr(p.theme.popoverColorBorder)};
+  box-shadow: 0 0.15em 0.8em ${(p) => clr(p.theme.popoverColorBoxShadow)};
+  z-index: 1000; // Greater than the z-index of the Drawer
+
+  ${visibleStyles};
+  ${invisibleStyles};
+  ${sizeStyles};
+`;
+
+const emptyRect: Rect = {
+  top: 0,
+  left: 0,
+  width: 0,
+  height: 0,
+};
+
+/**
+ * The pop-up window located next to the element.
+ */
+const Popover = forwardRef<HTMLDivElement, PopoverProps>(
+  (
+    {
+      trigger,
+      placement = 'top',
+      gap = 0.2,
+      flip = true,
+      visible = false,
+      onClose = () => {},
+      id,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const [popoverRef, mergedPopoverRef] = useForwardedRef(ref);
+    const [popoverRect, setPopoverRect] = useState(emptyRect);
+    const [triggerRect, setTriggerRect] = useState(emptyRect);
+    const { theme } = useTheme();
+    const mounted = useClosable(visible, theme.transitionDelay);
+
+    // Init the rect of the popover and update it when the popover size changes
+    const popoverResizeListener = useCallback(() => {
+      if (!popoverRef.current) return;
+      setPopoverRect(popoverRef.current.getBoundingClientRect());
+    }, [popoverRef]);
+    useResizeObserver(
+      popoverRef.current as HTMLDivElement,
+      popoverResizeListener
+    );
+
+    const measuredPopoverRef = useCallback<RefCallback<HTMLDivElement>>(
+      (node) => {
+        if (node === null) return;
+        setPopoverRect(node.getBoundingClientRect());
+        mergedPopoverRef(node);
+      },
+      [mergedPopoverRef]
+    );
+
+    // Init the rect of the trigger and update it when the window was resized
+    // or scrolled
+    const triggerResizeListener = useCallback(() => {
+      window.requestAnimationFrame(() => {
+        if (!trigger) return;
+        const { current } = trigger as RefObject<Element>;
+        if (!current) return;
+        setTriggerRect(current.getBoundingClientRect());
+      });
+    }, [trigger]);
+    useBrowserLayoutEffect(() => {
+      if (!visible) return;
+      triggerResizeListener();
+    }, [triggerResizeListener, visible]);
+    useResizeObserver(trigger as never, triggerResizeListener);
+    useEvent(
+      (typeof window === 'undefined' ? null : window) as never,
+      'resize',
+      triggerResizeListener
+    );
+    useEvent(document, 'scroll', triggerResizeListener);
+
+    useEffect(() => {
+      if (!trigger || (trigger as RefObject<Element>).current !== undefined)
+        return;
+      setTriggerRect(trigger as Rect);
+    }, [trigger]);
+
+    const popoverId = useMemo(
+      () => id || `popover-${Math.random().toString(36).slice(2, 11)}`,
+      [id]
+    );
+
+    // Set the aria tags to support accessibility features
+    useBrowserLayoutEffect(() => {
+      if (!trigger) return;
+      const { current } = trigger as RefObject<Element>;
+      if (!current) return;
+      if (current.getAttribute('aria-haspopup') === null) {
+        current.setAttribute('aria-haspopup', 'dialog');
+      }
+      current.setAttribute('aria-controls', popoverId);
+    }, []);
+    useBrowserLayoutEffect(() => {
+      if (!trigger) return;
+      const { current } = trigger as RefObject<Element>;
+      if (!current) return;
+      current.setAttribute('aria-expanded', visible.toString());
+    }, [visible]);
+
+    // Get the popover coordinates
+    const { top, left } = usePopoverPosition({
+      elementRect: triggerRect,
+      popoverRect,
+      placement,
+      gap,
+      flip,
+    });
+
+    // Close the popover when the user clicks outside of it
+    useClickOutside(popoverRef, onClose);
+
+    if (!mounted) return null;
+
+    return (
+      <Portal>
+        <Container
+          top={top}
+          left={left}
+          visible={visible}
+          id={popoverId}
+          role='dialog'
+          {...rest}
+          ref={measuredPopoverRef}
+        >
+          {children}
+        </Container>
+      </Portal>
+    );
+  }
+);
+
+Popover.displayName = 'Popover';
+
+export default Popover;

package/src/Popover/utils/usePopoverPosition.ts

@@ -0,0 +1,216 @@
+import { useFontSize } from '@os-design/utils';
+import { useMemo } from 'react';
+
+type Side = 'top' | 'left' | 'right' | 'bottom';
+type Alignment = 'start' | 'end';
+type AlignedPlacement = `${Side}-${Alignment}`;
+
+export type Placement = Side | AlignedPlacement;
+
+export interface Rect {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}
+
+interface UsePopoverPositionProps {
+  /**
+   * The rect of the element.
+   */
+  elementRect: Rect;
+  /**
+   * The rect of the popover.
+   */
+  popoverRect: Rect;
+  /**
+   * On which side of the element the popover will appear.
+   * @default top
+   */
+  placement?: Placement;
+  /**
+   * The gap between the element and the popover in em.
+   * @default 0.5
+   */
+  gap?: number;
+  /**
+   * Whether to flip the popover if it does not fit in the window.
+   * @default true
+   */
+  flip?: boolean;
+}
+
+interface PopoverPositionGetterOptions {
+  elementRect: Rect;
+  popoverRect: Rect;
+  gap: number;
+  flip: boolean;
+}
+type PositionKeys = 'before' | 'after' | 'start' | 'end' | 'center';
+type PopoverPositionGetterFn = (
+  options: PopoverPositionGetterOptions
+) => number;
+type PopoverPositionGetters = Record<PositionKeys, PopoverPositionGetterFn>;
+type FitToWindow = Pick<
+  PopoverPositionGetterOptions,
+  'elementRect' | 'popoverRect'
+>;
+
+const popoverPositionGetters = (
+  rectKey: 'top' | 'left'
+): PopoverPositionGetters => {
+  const sizeKey = rectKey === 'top' ? 'height' : 'width';
+  const windowSizeKey = rectKey === 'top' ? 'innerHeight' : 'innerWidth';
+  const windowOffsetKey = rectKey === 'top' ? 'pageYOffset' : 'pageXOffset';
+
+  const fitToWindow = (
+    start: number,
+    { elementRect, popoverRect }: FitToWindow
+  ): number => {
+    let popoverStart = start;
+    const windowStart = window[windowOffsetKey];
+    const windowEnd = windowStart + window[windowSizeKey];
+    const elementStart = windowStart + elementRect[rectKey];
+    const elementEnd = elementStart + elementRect[sizeKey];
+    const popoverEnd = popoverStart + popoverRect[sizeKey];
+
+    // Fit the popover to the end of the window
+    if (popoverEnd > windowEnd) {
+      if (elementEnd < windowEnd)
+        popoverStart = windowEnd - popoverRect[sizeKey];
+      else if (popoverRect[sizeKey] > elementRect[sizeKey])
+        popoverStart = elementEnd - popoverRect[sizeKey];
+      else if (windowEnd - elementStart > popoverRect[sizeKey])
+        popoverStart = windowEnd - popoverRect[sizeKey];
+      else popoverStart = elementStart;
+    }
+
+    // Fit the popover to the beginning of the window
+    if (popoverStart < windowStart) {
+      if (elementStart > windowStart) popoverStart = windowStart;
+      else if (popoverRect[sizeKey] > elementRect[sizeKey])
+        popoverStart = elementStart;
+      else if (elementEnd - windowStart > popoverRect[sizeKey])
+        popoverStart = windowStart;
+      else popoverStart = elementEnd - popoverRect[sizeKey];
+    }
+
+    return popoverStart;
+  };
+
+  return {
+    before(options) {
+      const { elementRect, popoverRect, gap, flip } = options;
+      const windowStart = window[windowOffsetKey];
+      const windowEnd = windowStart + window[windowSizeKey];
+      const elementStart = windowStart + elementRect[rectKey];
+      const popoverStart = elementStart - popoverRect[sizeKey] - gap;
+      if (flip && popoverStart < windowStart) {
+        const afterPopoverStart = this.after({ ...options, flip: false });
+        const afterPopoverEnd = afterPopoverStart + popoverRect[sizeKey];
+        const diffStart = windowStart - popoverStart;
+        const diffEnd = afterPopoverEnd - windowEnd;
+        if (afterPopoverEnd <= windowEnd || diffStart > diffEnd)
+          return afterPopoverStart;
+      }
+      return popoverStart;
+    },
+    after(options) {
+      const { elementRect, popoverRect, gap, flip } = options;
+      const windowStart = window[windowOffsetKey];
+      const windowEnd = windowStart + window[windowSizeKey];
+      const elementStart = windowStart + elementRect[rectKey];
+      const elementEnd = elementStart + elementRect[sizeKey];
+      const popoverStart = elementEnd + gap;
+      const popoverEnd = popoverStart + popoverRect[sizeKey];
+      if (flip && popoverEnd > windowEnd) {
+        const beforePopoverStart = this.before({ ...options, flip: false });
+        const diffStart = windowStart - beforePopoverStart;
+        const diffEnd = popoverEnd - windowEnd;
+        if (beforePopoverStart >= windowStart || diffEnd > diffStart)
+          return beforePopoverStart;
+      }
+      return popoverStart;
+    },
+    start: ({ elementRect, popoverRect }) => {
+      const windowStart = window[windowOffsetKey];
+      const elementStart = windowStart + elementRect[rectKey];
+      return fitToWindow(elementStart, { elementRect, popoverRect });
+    },
+    end: ({ elementRect, popoverRect }) => {
+      const windowStart = window[windowOffsetKey];
+      const elementStart = windowStart + elementRect[rectKey];
+      const elementEnd = elementStart + elementRect[sizeKey];
+      const popoverStart = elementEnd - popoverRect[sizeKey];
+      return fitToWindow(popoverStart, { elementRect, popoverRect });
+    },
+    center: ({ elementRect, popoverRect }) => {
+      const windowStart = window[windowOffsetKey];
+      const elementStart = windowStart + elementRect[rectKey];
+      const popoverStart =
+        elementStart + (elementRect[sizeKey] - popoverRect[sizeKey]) / 2;
+      return fitToWindow(popoverStart, { elementRect, popoverRect });
+    },
+  };
+};
+
+const getPopoverPosition = (
+  top: PositionKeys,
+  left: PositionKeys,
+  options: PopoverPositionGetterOptions
+) => ({
+  top: popoverPositionGetters('top')[top](options),
+  left: popoverPositionGetters('left')[left](options),
+});
+
+type PlacementPositionKeysMap = Record<Placement, [PositionKeys, PositionKeys]>;
+const placementPositionKeysMap: PlacementPositionKeysMap = {
+  top: ['before', 'center'],
+  bottom: ['after', 'center'],
+  left: ['center', 'before'],
+  right: ['center', 'after'],
+  'top-start': ['before', 'start'],
+  'top-end': ['before', 'end'],
+  'bottom-start': ['after', 'start'],
+  'bottom-end': ['after', 'end'],
+  'left-start': ['start', 'before'],
+  'left-end': ['end', 'before'],
+  'right-start': ['start', 'after'],
+  'right-end': ['end', 'after'],
+};
+
+interface PopoverPosition {
+  top: number;
+  left: number;
+}
+
+/**
+ * Computes the position of the popover.
+ * Note that you must change the elementRect when the scroll and resize events of the parent scrollable container occur.
+ * In most cases, it will be the window.
+ */
+const usePopoverPosition = ({
+  elementRect,
+  popoverRect,
+  placement = 'top',
+  gap = 0.5,
+  flip = true,
+}: UsePopoverPositionProps): PopoverPosition => {
+  const bodyFontSize = useFontSize(document.body);
+  const gapPx = useMemo(() => gap * bodyFontSize, [gap, bodyFontSize]);
+
+  const positionKeys = useMemo(() => {
+    if (typeof placement === 'string' && !!placementPositionKeysMap[placement])
+      return placementPositionKeysMap[placement];
+    return placementPositionKeysMap.top;
+  }, [placement]);
+
+  return getPopoverPosition(...positionKeys, {
+    elementRect,
+    popoverRect,
+    gap: gapPx,
+    flip,
+  });
+};
+
+export default usePopoverPosition;

package/src/Progress/index.tsx

@@ -0,0 +1,100 @@
+import styled from '@emotion/styled';
+import { WithSize, sizeStyles, transitionStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef, useMemo } from 'react';
+
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface ProgressProps extends JsxDivProps, WithSize {
+  /**
+   * The percentage of completion.
+   * @default 0
+   */
+  percent?: number;
+  /**
+   * The text that is displayed to the right of the progress bar.
+   * @default undefined
+   */
+  text?: string;
+  /**
+   * The height of the progress bar.
+   * @default 0.5em
+   */
+  height?: string;
+}
+
+const Container = styled('div', omitEmotionProps('size'))<WithSize>`
+  display: flex;
+  align-items: center;
+  ${sizeStyles};
+`;
+
+type TrailProps = Required<Pick<ProgressProps, 'height'>>;
+const Trail = styled('div', omitEmotionProps('height'))<TrailProps>`
+  width: 100%;
+  background-color: ${(p) => clr(p.theme.progressColorTrail)};
+  border-radius: ${(p) => `calc(${p.height} / 2)`};
+  overflow: hidden; // To hide the border of the progress bar
+`;
+
+type StrokeProps = Required<Pick<ProgressProps, 'percent' | 'height'>>;
+const Stroke = styled(
+  'div',
+  omitEmotionProps('percent', 'height')
+)<StrokeProps>`
+  width: ${(p) => p.percent}%;
+  height: ${(p) => p.height};
+  border-radius: 0 ${(p) => `calc(${p.height} / 2)`}
+    ${(p) => `calc(${p.height} / 2)`} 0;
+  background-color: ${(p) =>
+    p.percent < 100
+      ? clr(p.theme.progressColorStroke)
+      : clr(p.theme.progressColorStrokeSuccess)};
+  ${transitionStyles('width', 'background-color')};
+`;
+
+const Text = styled.div`
+  margin-left: 0.5em;
+  color: ${(p) => clr(p.theme.progressColorPercentage)};
+  line-height: 1;
+`;
+
+/**
+ * The progress bar.
+ */
+const Progress = forwardRef<HTMLDivElement, ProgressProps>(
+  ({ percent = 0, text, height = '0.5em', ...rest }, ref) => {
+    const validPercent = useMemo(() => {
+      if (percent < 0) return 0;
+      if (percent > 100) return 100;
+      return percent;
+    }, [percent]);
+
+    const textId = useMemo(
+      () => `progress-bar-text-${Math.random().toString(36).slice(2, 11)}`,
+      []
+    );
+
+    return (
+      <Container
+        role='progressbar'
+        aria-valuenow={validPercent}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-describedby={textId}
+        {...rest}
+        ref={ref}
+      >
+        <Trail height={height}>
+          <Stroke percent={validPercent} height={height} />
+        </Trail>
+        {text && <Text id={textId}>{text}</Text>}
+      </Container>
+    );
+  }
+);
+
+Progress.displayName = 'Progress';
+
+export default Progress;