@codacy/ui-components 0.67.41 → 0.67.43

package/lib/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { BreadcrumbsItemProps, BreadcrumbsProps } from './Breadcrumbs.types';
+export declare const Breadcrumbs: React.FC<BreadcrumbsProps> & {
+    Item: React.FC<BreadcrumbsItemProps>;
+};

package/lib/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Caption } from '../Typography';
+import { Flex } from '../Flexbox';
+import { BreadcrumbsItemWrapper } from './Breadcrumbs.styles';
+import { useBreadcrumbsOverflow, SEGMENT_ATTR } from './useBreadcrumbsOverflow';
+const ELLIPSIS = Symbol('breadcrumbs-ellipsis');
+function findChildren(ofType, children) {
+  return React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && child.type === ofType);
+}
+const BreadcrumbsItem = ({
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(BreadcrumbsItemWrapper, props, children);
+};
+const BreadcrumbsList = ({
+  children,
+  separator,
+  size = 'sm',
+  itemMinWidth
+}) => {
+  const breadcrumbItems = findChildren(BreadcrumbsItem, children);
+  const {
+    containerRef,
+    collapsed
+  } = useBreadcrumbsOverflow(breadcrumbItems.length, itemMinWidth);
+
+  // When collapsed, keep only the first and last segment and replace the
+  // middle with an ellipsis. Needs at least 3 segments to be worth collapsing.
+  const displayed = collapsed && breadcrumbItems.length > 2 ? [breadcrumbItems[0], ELLIPSIS, breadcrumbItems[breadcrumbItems.length - 1]] : breadcrumbItems;
+  return /*#__PURE__*/React.createElement(Flex, {
+    ref: containerRef,
+    overflow: "hidden"
+  }, displayed.map((item, index) => {
+    const isLast = index === displayed.length - 1;
+    const separatorNode = !isLast && /*#__PURE__*/React.createElement(Caption, {
+      size: size,
+      fontWeight: "medium",
+      color: "text-primary",
+      mx: 1,
+      flexShrink: 0
+    }, separator);
+    if (item === ELLIPSIS) {
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: "ellipsis"
+      }, /*#__PURE__*/React.createElement(Caption, {
+        size: size,
+        color: "text-secondary",
+        flexShrink: 0
+      }, "\u2026"), separatorNode);
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index
+    }, /*#__PURE__*/React.cloneElement(item, {
+      current: isLast,
+      size: size,
+      [SEGMENT_ATTR]: ''
+    }), separatorNode);
+  }));
+};
+export const Breadcrumbs = Object.assign(BreadcrumbsList, {
+  Item: BreadcrumbsItem
+});

package/lib/Breadcrumbs/Breadcrumbs.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { BreadcrumbsItemProps } from './Breadcrumbs.types';
+export declare const BreadcrumbsItemWrapper: import("@emotion/styled").StyledComponent<import("../Typography").CaptionProps & import("react").RefAttributes<HTMLParagraphElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & BreadcrumbsItemProps, {}, {}>;

package/lib/Breadcrumbs/Breadcrumbs.styles.js

@@ -0,0 +1,34 @@
+import _styled from "@emotion/styled/base";
+import { Caption } from '../Typography';
+const fontSizeKeyBySize = {
+  lg: 'l',
+  md: 'm',
+  sm: 's',
+  xs: 'xs'
+};
+export const BreadcrumbsItemWrapper = /*#__PURE__*/_styled(Caption, process.env.NODE_ENV === "production" ? {
+  shouldForwardProp: prop => prop !== 'current',
+  target: "e1gjlqct0"
+} : {
+  shouldForwardProp: prop => prop !== 'current',
+  target: "e1gjlqct0",
+  label: "codacy"
+})("flex-shrink:1;", ({
+  theme,
+  size = 'sm'
+}) => `
+    &,
+    & * {
+      font-size: ${theme.fontSizes[fontSizeKeyBySize[size]]} !important;
+    }
+  `, " ", ({
+  current,
+  theme
+}) => current && `
+      flex-shrink: 0;
+      pointer-events: none;
+      &,
+      & * {
+        color: ${theme.colors['text-secondary']} !important;
+      }
+    `, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9CcmVhZGNydW1icy9CcmVhZGNydW1icy5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYXdCIiwiZmlsZSI6Ii4uLy4uL3NyYy9CcmVhZGNydW1icy9CcmVhZGNydW1icy5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IEJyZWFkY3J1bWJzSXRlbVByb3BzIH0gZnJvbSAnLi9CcmVhZGNydW1icy50eXBlcydcbmltcG9ydCB7IENhcHRpb24sIFRleHRTaXplIH0gZnJvbSAnLi4vVHlwb2dyYXBoeSdcblxuY29uc3QgZm9udFNpemVLZXlCeVNpemU6IFJlY29yZDxUZXh0U2l6ZSwgJ2wnIHwgJ20nIHwgJ3MnIHwgJ3hzJz4gPSB7XG4gIGxnOiAnbCcsXG4gIG1kOiAnbScsXG4gIHNtOiAncycsXG4gIHhzOiAneHMnLFxufVxuXG5leHBvcnQgY29uc3QgQnJlYWRjcnVtYnNJdGVtV3JhcHBlciA9IHN0eWxlZChDYXB0aW9uLCB7XG4gIHNob3VsZEZvcndhcmRQcm9wOiBwcm9wID0+IHByb3AgIT09ICdjdXJyZW50Jyxcbn0pPEJyZWFkY3J1bWJzSXRlbVByb3BzPmBcbiAgZmxleC1zaHJpbms6IDE7XG5cbiAgJHsoeyB0aGVtZSwgc2l6ZSA9ICdzbScgfSkgPT4gYFxuICAgICYsXG4gICAgJiAqIHtcbiAgICAgIGZvbnQtc2l6ZTogJHt0aGVtZS5mb250U2l6ZXNbZm9udFNpemVLZXlCeVNpemVbc2l6ZV1dfSAhaW1wb3J0YW50O1xuICAgIH1cbiAgYH1cblxuICAkeyh7IGN1cnJlbnQsIHRoZW1lIH0pID0+XG4gICAgY3VycmVudCAmJlxuICAgIGBcbiAgICAgIGZsZXgtc2hyaW5rOiAwO1xuICAgICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gICAgICAmLFxuICAgICAgJiAqIHtcbiAgICAgICAgY29sb3I6ICR7dGhlbWUuY29sb3JzWyd0ZXh0LXNlY29uZGFyeSddfSAhaW1wb3J0YW50O1xuICAgICAgfVxuICAgIGB9XG5gXG4iXX0= */"));

package/lib/Breadcrumbs/Breadcrumbs.types.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { ColorProps, LayoutProps, SpaceProps, TypographyProps } from '../system-props/types';
+import { ContainerComponentProps } from '../types';
+import { TextSize } from '../Typography';
+export interface BreadcrumbsProps extends ContainerComponentProps, SpaceProps, LayoutProps, ColorProps, TypographyProps {
+    children: React.ReactNode;
+    separator: string;
+    size?: TextSize;
+    itemMinWidth?: number;
+}
+export interface BreadcrumbsItemProps extends ContainerComponentProps, SpaceProps, LayoutProps, ColorProps, TypographyProps {
+    children: React.ReactNode;
+    current?: boolean;
+    size?: TextSize;
+}

package/lib/Breadcrumbs/Breadcrumbs.types.js

@@ -0,0 +1 @@
+export {};

package/lib/Breadcrumbs/index.d.ts

@@ -0,0 +1 @@
+export * from './Breadcrumbs';

package/lib/Breadcrumbs/index.js

@@ -0,0 +1 @@
+export * from './Breadcrumbs';

package/lib/Breadcrumbs/useBreadcrumbsOverflow.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+/** Marks the segment elements the hook should measure and floor. */
+export declare const SEGMENT_ATTR = "data-breadcrumb-segment";
+/**
+ * Detects whether a horizontal row of breadcrumb segments overflows its
+ * container and should collapse its middle segments
+ */
+export declare const useBreadcrumbsOverflow: (itemCount: number, itemMinWidth?: number) => {
+    containerRef: import("react").RefObject<HTMLDivElement>;
+    collapsed: boolean;
+};

package/lib/Breadcrumbs/useBreadcrumbsOverflow.js

@@ -0,0 +1,69 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { throttle } from 'lodash';
+const FLOOR_REM = 4;
+
+/** Marks the segment elements the hook should measure and floor. */
+export const SEGMENT_ATTR = 'data-breadcrumb-segment';
+
+/**
+ * Detects whether a horizontal row of breadcrumb segments overflows its
+ * container and should collapse its middle segments
+ */
+export const useBreadcrumbsOverflow = (itemCount, itemMinWidth = FLOOR_REM) => {
+  const containerRef = useRef(null);
+  // Natural width of the row, cached while expanded so we can still decide
+  // whether it would fit again once we're already collapsed.
+  const naturalWidthRef = useRef(0);
+  const [collapsed, setCollapsed] = useState(false);
+  // Latest `collapsed` for reading inside `measure` without making it a dep.
+  const collapsedRef = useRef(collapsed);
+  collapsedRef.current = collapsed;
+
+  // Floor every visible segment at min(4rem, its content width)
+  const applyFloors = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const remPx = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+    const floor = itemMinWidth * remPx;
+    const segments = Array.from(el.querySelectorAll(`[${SEGMENT_ATTR}]`));
+    segments.forEach(node => node.style.minWidth = '0px');
+    const contentWidths = segments.map(node => node.scrollWidth);
+    segments.forEach((node, i) => node.style.minWidth = `${Math.min(floor, contentWidths[i])}px`);
+  }, [itemMinWidth]);
+  const measure = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    applyFloors();
+    if (!collapsedRef.current) naturalWidthRef.current = el.scrollWidth;
+    // +1 tolerance avoids ping-ponging at the exact boundary.
+    setCollapsed(naturalWidthRef.current > el.clientWidth + 1);
+  }, [applyFloors]);
+
+  // Measure on mount and whenever the set of segments changes.
+  useLayoutEffect(() => {
+    naturalWidthRef.current = 0;
+    setCollapsed(false);
+    measure();
+  }, [itemCount, measure]);
+
+  // After a collapse toggle the rendered segments change; re-floor them without
+  // re-deciding, so a shrink-to-fit parent's size change can't cause a flip.
+  useLayoutEffect(() => {
+    applyFloors();
+  }, [collapsed, applyFloors]);
+  const throttledMeasure = useMemo(() => throttle(measure, 100), [measure]);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver(throttledMeasure);
+    observer.observe(el);
+    return () => {
+      observer.disconnect();
+      throttledMeasure.cancel();
+    };
+  }, [throttledMeasure]);
+  return {
+    containerRef,
+    collapsed
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codacy/ui-components",
-  "version": "0.67.41",
+  "version": "0.67.43",
   "description": "",
   "license": "ISC",
   "author": "",