@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/src/components/Table/SkeletonRows.js

@@ -1,51 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Skeleton } from '../Skeleton/index.js';
-import { Cell } from './Cell.js';
-import { jsx, Fragment, jsxs } from '@emotion/react/jsx-runtime';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const StyledLoadingRow = /*#__PURE__*/_styled('tr', {
-  target: "e1btquhx1"
-})(process.env.NODE_ENV === "production" ? {
-  name: "g8zzui",
-  styles: "cursor:progress"
-} : {
-  name: "g8zzui",
-  styles: "cursor:progress",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledSkeleton = /*#__PURE__*/_styled(Skeleton, {
-  target: "e1btquhx0"
-})(process.env.NODE_ENV === "production" ? {
-  name: "bet25o",
-  styles: "width:80%;max-width:100%"
-} : {
-  name: "bet25o",
-  styles: "width:80%;max-width:100%",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const SkeletonRows = ({
-  selectable,
-  rows,
-  cols
-}) => {
-  const rowArray = Array.from({
-    length: rows
-  }, (_, index) => index);
-  const colArray = Array.from({
-    length: cols
-  }, (_, index) => index);
-  return jsx(Fragment, {
-    children: rowArray.map(index => jsxs(StyledLoadingRow, {
-      role: "row",
-      id: `skeleton-${index}`,
-      children: [selectable ? jsx(Cell, {}) : null, colArray.map(columnIndex => jsx(Cell, {
-        children: jsx(StyledSkeleton, {
-          variant: "line"
-        })
-      }, columnIndex))]
-    }, index))
-  });
-};
-
-export { SkeletonRows };

package/dist/src/components/Table/TableContext.js

@@ -1,90 +0,0 @@
-import { useContext, createContext, useState, useCallback, useMemo } from 'react';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const TableContext = /*#__PURE__*/createContext(undefined);
-const TableProvider = ({
-  children,
-  selectable,
-  bordered,
-  stripped
-}) => {
-  const [selectedRowIds, setSelectedRowIds] = useState({});
-  const registerSelectableRow = useCallback(rowId => {
-    setSelectedRowIds(current => ({
-      ...current,
-      [rowId]: false
-    }));
-    return () => {
-      setSelectedRowIds(current => {
-        const {
-          [rowId]: relatedId,
-          ...otherIds
-        } = current;
-        return otherIds;
-      });
-    };
-  }, []);
-  const allRowSelectValue = useMemo(() => {
-    const selectableRowCount = Object.keys(selectedRowIds).length;
-    if (!selectableRowCount) {
-      return false;
-    }
-    const selectedRowCount = Object.values(selectedRowIds).reduce((acc, isSelected) => acc + (isSelected ? 1 : 0), 0);
-    if (selectedRowCount === 0) {
-      return false;
-    }
-    if (selectableRowCount === selectedRowCount) {
-      return true;
-    }
-    return 'indeterminate';
-  }, [selectedRowIds]);
-  const selectAll = useCallback(() => {
-    setSelectedRowIds(current => Object.keys(current).reduce((acc, rowId) => ({
-      ...acc,
-      [rowId]: true
-    }), {}));
-  }, []);
-  const unselectAll = useCallback(() => {
-    setSelectedRowIds(current => Object.keys(current).reduce((acc, rowId) => ({
-      ...acc,
-      [rowId]: false
-    }), {}));
-  }, []);
-  const selectRow = useCallback(rowId => {
-    setSelectedRowIds(current => ({
-      ...current,
-      [rowId]: true
-    }));
-  }, []);
-  const unselectRow = useCallback(rowId => {
-    setSelectedRowIds(current => ({
-      ...current,
-      [rowId]: false
-    }));
-  }, []);
-  const value = useMemo(() => ({
-    registerSelectableRow,
-    selectedRowIds,
-    selectRow,
-    unselectRow,
-    selectable,
-    selectAll,
-    unselectAll,
-    allRowSelectValue,
-    bordered,
-    stripped
-  }), [registerSelectableRow, selectedRowIds, selectRow, unselectRow, selectable, selectAll, unselectAll, allRowSelectValue, bordered, stripped]);
-  return jsx(TableContext.Provider, {
-    value: value,
-    children: children
-  });
-};
-const useTableContext = () => {
-  const context = useContext(TableContext);
-  if (!context) {
-    throw new Error('useTableContext should be used inside a Table component');
-  }
-  return context;
-};
-
-export { TableProvider, useTableContext };

package/dist/src/components/Table/index.js

@@ -1,82 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { forwardRef } from 'react';
-import { Body } from './Body.js';
-import { Cell } from './Cell.js';
-import { Header } from './Header.js';
-import { HeaderCell } from './HeaderCell.js';
-import { HeaderRow } from './HeaderRow.js';
-import { Row } from './Row.js';
-import { SelectBar } from './SelectBar.js';
-import { SkeletonRows } from './SkeletonRows.js';
-import { useTableContext, TableProvider } from './TableContext.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-const StyledTable = /*#__PURE__*/_styled('table', {
-  shouldForwardProp: prop => !['bordered', 'stripped'].includes(prop),
-  target: "ert5hkm0"
-})("width:100%;box-sizing:content-box;border-collapse:collapse;", ({
-  theme,
-  stripped,
-  bordered
-}) => `
-  ${stripped ? `& tbody tr:nth-of-type(even) {
-    background: ${theme.colors.neutral.backgroundWeak};
-  }` : ''}
-
-  ${bordered ? `& tbody tr {
-    border-bottom: 1px solid ${theme.colors.neutral.borderWeak};
-  }` : ''}
-  `, ";");
-const BaseTable = /*#__PURE__*/forwardRef(({
-  selectable = false,
-  children,
-  columns,
-  loading,
-  bordered = false,
-  stripped = false
-}, ref) => jsx(TableProvider, {
-  selectable: selectable,
-  stripped: stripped,
-  bordered: bordered,
-  children: jsxs(StyledTable, {
-    ref: ref,
-    stripped: stripped,
-    bordered: bordered,
-    children: [jsx(Header, {
-      children: jsx(HeaderRow, {
-        hasSelectAllColumn: selectable,
-        children: columns.map((column, index) => jsx(HeaderCell
-        // eslint-disable-next-line react/no-array-index-key
-        , {
-          isOrdered: column.isOrdered,
-          orderDirection: column.orderDirection,
-          onOrder: column.onOrder,
-          width: column.width,
-          minWidth: column.minWidth,
-          maxWidth: column.maxWidth,
-          info: column.info,
-          children: column.label
-        }, `header-column-${index}`))
-      })
-    }), loading ? jsx(Body, {
-      children: jsx(SkeletonRows, {
-        selectable: selectable,
-        rows: 5,
-        cols: columns.length
-      })
-    }) : children]
-  })
-}));
-
-/**
- * Table is a component that displays data in a tabular format.
- */
-const Table = /*#__PURE__*/Object.assign(BaseTable, {
-  Body,
-  Row,
-  Cell,
-  useTableContext,
-  SelectBar
-});
-
-export { BaseTable, Table };

package/dist/src/components/Tabs/Tab.js

@@ -1,138 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { forwardRef, useMemo } from 'react';
-import { Badge } from '../Badge/index.js';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/index.js';
-import { Tooltip } from '../Tooltip/index.js';
-import { useTabsContext } from './TabsContext.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-const StyledBadge = /*#__PURE__*/_styled(Badge, {
-  target: "e1hzf7cr4"
-})("padding:0 ", ({
-  theme
-}) => theme.space['1'], ";margin-left:", ({
-  theme
-}) => theme.space['1'], ";");
-const StyledText = /*#__PURE__*/_styled(Text, {
-  target: "e1hzf7cr3"
-})();
-const StyledTooltip = /*#__PURE__*/_styled(Tooltip, {
-  target: "e1hzf7cr2"
-})();
-const BadgeContainer = /*#__PURE__*/_styled("span", {
-  target: "e1hzf7cr1"
-})("margin-left:", ({
-  theme
-}) => theme.space['1'], ";display:flex;");
-const StyledTabButton = /*#__PURE__*/_styled('button', {
-  target: "e1hzf7cr0"
-})("display:flex;flex-direction:row;padding:", ({
-  theme
-}) => `${theme.space['1']} ${theme.space['2']}`, ";cursor:pointer;justify-content:center;align-items:baseline;white-space:nowrap;color:", ({
-  theme
-}) => theme.colors.neutral.text, ";text-decoration:none;user-select:none;touch-action:manipulation;transition:color 0.2s;border:none;background:none;border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:", ({
-  theme
-}) => theme.colors.neutral.border, ";outline:none;font-size:", ({
-  theme
-}) => theme.typography.bodyStrong.fontSize, ";font-family:", ({
-  theme
-}) => theme.typography.bodyStrong.fontFamily, ";font-weight:", ({
-  theme
-}) => theme.typography.bodyStrong.weight, ";letter-spacing:", ({
-  theme
-}) => theme.typography.bodyStrong.letterSpacing, ";line-height:", ({
-  theme
-}) => theme.typography.bodyStrong.lineHeight, ";&:hover,&:active,&:focus{text-decoration:none;outline:none;}&:focus-visible{outline:auto;}&[aria-selected='true']{color:", ({
-  theme
-}) => theme.colors.primary.text, ";border-bottom-color:", ({
-  theme
-}) => theme.colors.primary.border, ";", StyledText, "{color:", ({
-  theme
-}) => theme.colors.primary.text, ";}}&[aria-disabled='false']:not(:disabled){&:hover,&:focus,&:active{outline:none;color:", ({
-  theme
-}) => theme.colors.primary.text, ";border-bottom-color:", ({
-  theme
-}) => theme.colors.primary.border, ";&[data-is-selected='false']{", StyledBadge, "{background-color:", ({
-  theme
-}) => theme.colors.primary.background, ";border-color:", ({
-  theme
-}) => theme.colors.primary.background, ";color:", ({
-  theme
-}) => theme.colors.primary.text, ";}", StyledText, "{color:", ({
-  theme
-}) => theme.colors.primary.text, ";}}}}&[aria-disabled='true'],&:disabled{cursor:not-allowed;filter:grayscale(1) opacity(50%);}");
-const Tab = /*#__PURE__*/forwardRef(({
-  as,
-  badge,
-  children,
-  className,
-  counter,
-  disabled = false,
-  onClick,
-  onKeyDown,
-  subtitle,
-  tooltip,
-  value,
-  ...props
-}, ref) => {
-  const {
-    selected,
-    onChange
-  } = useTabsContext();
-  const computedAs = as ?? 'button';
-  const isSelected = useMemo(() => value !== undefined && selected === value, [value, selected]);
-  return jsx(StyledTooltip, {
-    text: tooltip,
-    children: jsx(StyledTabButton, {
-      role: "tab",
-      ref: ref,
-      className: className,
-      as: computedAs,
-      "aria-label": value ? `${value}` : undefined,
-      "aria-selected": isSelected,
-      "aria-disabled": disabled,
-      disabled: computedAs === 'button' ? disabled : undefined,
-      type: computedAs === 'button' ? 'button' : undefined,
-      onClick: event => {
-        if (value !== undefined) {
-          onChange(value);
-        }
-        onClick?.(event);
-      },
-      onKeyDown: event => {
-        onKeyDown?.(event);
-        if (!event.defaultPrevented && !disabled && value) onChange(value);
-      },
-      "data-is-selected": isSelected,
-      ...props,
-      children: jsxs(Stack, {
-        direction: "column",
-        gap: 0.5,
-        children: [jsxs(Stack, {
-          direction: "row",
-          alignItems: "center",
-          children: [children, typeof counter === 'number' || typeof counter === 'string' ? jsx(StyledBadge, {
-            sentiment: isSelected ? 'primary' : 'neutral',
-            prominence: isSelected ? 'strong' : 'default',
-            size: "medium",
-            children: counter
-          }) : null, badge ? jsx(BadgeContainer, {
-            children: badge
-          }) : null]
-        }), subtitle ? jsx(Stack, {
-          direction: "row",
-          children: jsx(StyledText, {
-            as: "span",
-            variant: "bodySmall",
-            sentiment: "neutral",
-            prominence: "weak",
-            children: subtitle
-          })
-        }) : null]
-      })
-    })
-  });
-});
-
-export { StyledTabButton, Tab };

package/dist/src/components/Tabs/TabMenu.js

@@ -1,59 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { forwardRef } from 'react';
-import { MenuV2 } from '../MenuV2/index.js';
-import { StyledTabButton } from './Tab.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const ArrowIcon = /*#__PURE__*/_styled(Icon, {
-  target: "edb1sh92"
-})();
-const StyledMenu = /*#__PURE__*/_styled(StyledTabButton, {
-  target: "edb1sh91"
-})(ArrowIcon, "{color:inherit;margin-left:", ({
-  theme
-}) => theme.space['1'], ";transition:300ms transform ease-out;}&[aria-expanded='true'] ", ArrowIcon, "{transform:rotate(-180deg);}");
-
-// This will wrap and give the positioning to the popup div that is added onto the disclosure
-const StyledPositioningWrapper = /*#__PURE__*/_styled("div", {
-  target: "edb1sh90"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1hlymjl",
-  styles: "display:flex;position:sticky;top:0;bottom:0;right:0"
-} : {
-  name: "1hlymjl",
-  styles: "display:flex;position:sticky;top:0;bottom:0;right:0",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const TabMenu = /*#__PURE__*/forwardRef(({
-  children,
-  disclosure,
-  visible,
-  id,
-  disabled,
-  className,
-  ...props
-}, ref) => jsx(StyledPositioningWrapper, {
-  children: jsx(MenuV2, {
-    visible: visible,
-    id: id,
-    ref: ref,
-    portalTarget: document.body // We need to attach it to the body to avoid overflow issues
-    ,
-    disclosure: jsxs(StyledMenu, {
-      role: "tab",
-      "aria-disabled": disabled ?? 'false',
-      disabled: disabled,
-      "aria-haspopup": "menu",
-      className: className,
-      ...props,
-      children: [disclosure, jsx(ArrowIcon, {
-        name: "arrow-down"
-      })]
-    }),
-    children: children
-  })
-}));
-
-export { TabMenu };

package/dist/src/components/Tabs/TabMenuItem.js

@@ -1,36 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useMemo } from 'react';
-import Item from '../MenuV2/Item.js';
-import { useTabsContext } from './TabsContext.js';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const StyledMenuItem = /*#__PURE__*/_styled(Item, {
-  target: "eeet93f0"
-})("&[aria-selected='true']{color:", ({
-  theme
-}) => theme.colors.primary.text, ";}");
-const TabMenuItem = ({
-  value,
-  children,
-  onClick,
-  ...props
-}) => {
-  const {
-    selected,
-    onChange
-  } = useTabsContext();
-  const isSelected = useMemo(() => value !== undefined && selected === value, [value, selected]);
-  return jsx(StyledMenuItem, {
-    onClick: event => {
-      if (value !== undefined) {
-        onChange(value);
-      }
-      onClick?.(event);
-    },
-    "aria-selected": isSelected,
-    ...props,
-    children: children
-  });
-};
-
-export { TabMenuItem };

package/dist/src/components/Tabs/TabsContext.js

@@ -1,6 +0,0 @@
-import { createContext, useContext } from 'react';
-
-const TabsContext = /*#__PURE__*/createContext({});
-const useTabsContext = () => useContext(TabsContext);
-
-export { TabsContext, useTabsContext };

package/dist/src/components/Tabs/index.js

@@ -1,117 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useRef, useState, useMemo, useEffect, Children, isValidElement, cloneElement } from 'react';
-import { Tab, StyledTabButton } from './Tab.js';
-import { TabMenu } from './TabMenu.js';
-import { TabMenuItem } from './TabMenuItem.js';
-import { TabsContext } from './TabsContext.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-const MenuContainer = /*#__PURE__*/_styled("div", {
-  target: "ewug27g2"
-})("display:flex;flex-direction:column;", StyledTabButton, "{font-size:", ({
-  theme
-}) => theme.typography.bodySmall.fontSize, ";line-height:", ({
-  theme
-}) => theme.typography.bodySmall.lineHeight, ";font-weight:inherit;padding:", ({
-  theme
-}) => `${theme.space['1']} ${theme.space['2']}`, ";border-bottom-width:1.5px;width:100%;cursor:pointer;min-width:110px;background-color:transparent;&[aria-disabled='true'],&:disabled{cursor:not-allowed;filter:grayscale(1) opacity(50%);}}");
-
-// Migration to MenuV2 will not work as expected here.
-const StyledTabMenu = /*#__PURE__*/_styled(TabMenu, {
-  target: "ewug27g1"
-})("position:sticky;right:0;top:0;bottom:0;background:", ({
-  theme
-}) => theme.colors.neutral.background, ";box-shadow:", ({
-  theme
-}) => theme.shadows.menu, ";");
-const TabsContainer = /*#__PURE__*/_styled("div", {
-  target: "ewug27g0"
-})("display:flex;flex-wrap:nowrap;overflow-x:scroll;position:relative;z-index:0;-ms-overflow-style:none;scrollbar-width:none;&::after{z-index:-1;content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:", ({
-  theme
-}) => theme.colors.neutral.border, ";}&::-webkit-scrollbar{display:none;}");
-const SHADOW_THRESHOLD = 10;
-
-/**
- * Tabs component is used to display a set of tabs with a single tab selected at a time.
- */
-const Tabs = ({
-  children = null,
-  onChange,
-  moreDisclosure = 'More',
-  selected,
-  className,
-  'data-testid': dataTestId,
-  ...props
-}) => {
-  const tabsRef = useRef({});
-  const moreStaticRef = useRef(null);
-  const [displayMore, setDisplayMore] = useState(false);
-  const value = useMemo(() => ({
-    onChange,
-    selected
-  }), [selected, onChange]);
-  useEffect(() => {
-    setDisplayMore(tabsRef.current.scrollWidth > tabsRef.current.clientWidth);
-  }, [children]);
-
-  // Scroll automatically to the tab
-  useEffect(() => {
-    const tab = tabsRef.current.querySelector(`[role='tab'][aria-selected='true']`);
-    if (tab && tabsRef.current.scrollTo) {
-      tabsRef.current.scrollTo({
-        left: tab.offsetLeft,
-        behavior: 'smooth'
-      });
-    }
-  }, [selected]);
-
-  // Change the moreButton style automatically based on the scroll to show that a scroll effect is possible.
-  useEffect(() => {
-    const element = tabsRef.current;
-    const moreElement = moreStaticRef.current;
-    const handler = () => {
-      if (moreElement?.style) {
-        moreElement.style.boxShadow = element.scrollLeft + SHADOW_THRESHOLD > element.scrollWidth - element.clientWidth ? 'none' : '';
-      }
-    };
-    if (displayMore) {
-      element.addEventListener('scroll', handler);
-    }
-    return () => {
-      if (displayMore) element.removeEventListener('scroll', handler);
-    };
-  }, [displayMore]);
-
-  // mapping of tab children to avoid using subtitle props
-  const menuItemChildren = Children.map(children, child => {
-    if ( /*#__PURE__*/isValidElement(child)) {
-      return /*#__PURE__*/cloneElement(child, {
-        ...child.props,
-        subtitle: null
-      });
-    }
-    return null;
-  });
-  return jsx(TabsContext.Provider, {
-    value: value,
-    children: jsxs(TabsContainer, {
-      ref: tabsRef,
-      role: "tablist",
-      className: className,
-      "data-testid": dataTestId,
-      ...props,
-      children: [children, displayMore ? jsx(StyledTabMenu, {
-        ref: moreStaticRef,
-        disclosure: moreDisclosure,
-        children: jsx(MenuContainer, {
-          children: menuItemChildren
-        })
-      }) : null]
-    })
-  });
-};
-Tabs.Tab = Tab;
-Tabs.Menu = TabMenu;
-Tabs.MenuItem = TabMenuItem;
-
-export { Tabs };