@ultraviolet/ui 1.0.0

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

@@ -0,0 +1,52 @@
+import _styled from '@emotion/styled/base';
+import { useMemo } from 'react';
+import { ActionBar } from '../ActionBar/index.js';
+import { useTableContext } from './TableContext.js';
+import { jsx } 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 StyledActionBar = /*#__PURE__*/_styled(ActionBar, {
+  target: "esnuyll1"
+})("display:flex;align-items:center;padding:0 ", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['1'];
+}, ";");
+const FlexDiv = /*#__PURE__*/_styled("div", {
+  target: "esnuyll0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "82a6rk",
+  styles: "flex:1"
+} : {
+  name: "82a6rk",
+  styles: "flex:1",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+function SelectBar(_ref2) {
+  let {
+    children,
+    data,
+    idKey,
+    className
+  } = _ref2;
+  const {
+    selectedRowIds,
+    unselectAll
+  } = useTableContext();
+  const selectedItems = useMemo(() => data.filter(item => selectedRowIds[item[idKey]]), [data, idKey, selectedRowIds]);
+  if (selectedItems.length === 0) {
+    return null;
+  }
+  return jsx(StyledActionBar, {
+    className: className,
+    children: jsx(FlexDiv, {
+      children: children({
+        selectedItems,
+        unselectAll
+      })
+    })
+  });
+}
+
+export { SelectBar };

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

@@ -0,0 +1,52 @@
+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 = _ref => {
+  let {
+    selectable,
+    rows,
+    cols
+  } = _ref;
+  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

@@ -0,0 +1,91 @@
+import { useContext, createContext, useState, useCallback, useMemo } from 'react';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const TableContext = /*#__PURE__*/createContext(undefined);
+const TableProvider = _ref => {
+  let {
+    children,
+    selectable,
+    bordered,
+    stripped
+  } = _ref;
+  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

@@ -0,0 +1,84 @@
+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;", _ref => {
+  let {
+    theme,
+    stripped,
+    bordered
+  } = _ref;
+  return `
+  ${stripped ? `& tbody tr:nth-of-type(even) {
+    background: ${theme.colors.neutral.backgroundStrong};
+  }` : ''}
+
+  ${bordered ? `& tbody tr {
+    border-bottom: 1px solid ${theme.colors.neutral.borderWeak};
+  }` : ''}
+  `;
+}, ";");
+const BaseTable = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    selectable = false,
+    children,
+    columns,
+    loading,
+    bordered = false,
+    stripped = false
+  } = _ref2;
+  return 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]
+    })
+  });
+});
+const Table = /*#__PURE__*/Object.assign(BaseTable, {
+  Body,
+  Row,
+  Cell,
+  useTableContext,
+  SelectBar
+});
+
+export { BaseTable, Table };

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

@@ -0,0 +1,165 @@
+import _styled from '@emotion/styled/base';
+import { forwardRef, useMemo } from 'react';
+import { Badge } from '../Badge/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: "e1hzf7cr3"
+})("padding:0 ", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['1'];
+}, ";margin-left:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space['1'];
+}, ";");
+const StyledTooltip = /*#__PURE__*/_styled(Tooltip, {
+  target: "e1hzf7cr2"
+})();
+const BadgeContainer = /*#__PURE__*/_styled("span", {
+  target: "e1hzf7cr1"
+})("margin-left:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.space['1'];
+}, ";display:flex;");
+const StyledTabButton = /*#__PURE__*/_styled("button", {
+  target: "e1hzf7cr0"
+})("display:flex;flex-direction:row;padding:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return `${theme.space['1']} ${theme.space['2']}`;
+}, ";cursor:pointer;justify-content:center;align-items:center;white-space:nowrap;color:", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return 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:", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.colors.neutral.borderWeak;
+}, ";outline:none;font-size:", _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.typography.bodyStrong.fontSize;
+}, ";font-family:", _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.typography.bodyStrong.fontFamily;
+}, ";font-weight:", _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.typography.bodyStrong.weight;
+}, ";letter-spacing:", _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.typography.bodyStrong.letterSpacing;
+}, ";line-height:", _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.typography.bodyStrong.lineHeight;
+}, ";&:hover,&:active,&:focus{text-decoration:none;outline:none;}&:focus-visible{outline:auto;}&[aria-selected='true']{color:", _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.colors.primary.text;
+}, ";border-bottom-color:", _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.colors.primary.borderWeak;
+}, ";}&[aria-disabled='false']:not(:disabled){&:hover,&:focus,&:active{outline:none;color:", _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.colors.primary.text;
+}, ";border-bottom-color:", _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.colors.primary.borderWeak;
+}, ";", StyledBadge, "{background-color:", _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.colors.primary.background;
+}, ";border-color:", _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.colors.primary.background;
+}, ";color:", _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.colors.primary.text;
+}, ";}}}&[aria-disabled='true'],&:disabled{cursor:not-allowed;filter:grayscale(1) opacity(50%);}");
+const Tab = /*#__PURE__*/forwardRef((_ref19, ref) => {
+  let {
+    as,
+    badge,
+    children,
+    className,
+    counter,
+    disabled = false,
+    value,
+    onClick,
+    onKeyDown,
+    tooltip,
+    ...props
+  } = _ref19;
+  const {
+    selected,
+    onChange
+  } = useTabsContext();
+  const computedAs = as ?? 'button';
+  const isSelected = useMemo(() => value !== undefined && selected === value, [value, selected]);
+  return jsx(StyledTooltip, {
+    text: tooltip,
+    children: jsxs(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);
+      },
+      ...props,
+      children: [children, typeof counter === 'number' || typeof counter === 'string' ? jsx(StyledBadge, {
+        sentiment: isSelected ? 'primary' : 'neutral',
+        prominence: isSelected ? 'default' : 'strong',
+        size: "medium",
+        children: counter
+      }) : null, badge ? jsx(BadgeContainer, {
+        children: badge
+      }) : null]
+    })
+  });
+});
+
+export { StyledTabButton, Tab };

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

@@ -0,0 +1,46 @@
+import _styled from '@emotion/styled/base';
+import { forwardRef } from 'react';
+import { Icon } from '../Icon/index.js';
+import { Menu } from '../Menu/index.js';
+import { StyledTabButton } from './Tab.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+const ArrowIcon = /*#__PURE__*/_styled(Icon, {
+  target: "edb1sh91"
+})();
+const StyledMenu = /*#__PURE__*/_styled(StyledTabButton, {
+  target: "edb1sh90"
+})(ArrowIcon, "{color:inherit;margin-left:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['1'];
+}, ";transition:300ms transform ease-out;}&[aria-expanded='true'] ", ArrowIcon, "{transform:rotate(-180deg);}");
+const TabMenu = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    children,
+    disclosure,
+    visible,
+    id,
+    disabled,
+    ...props
+  } = _ref2;
+  return jsx(Menu, {
+    visible: visible,
+    id: id,
+    ref: ref,
+    disclosure: jsxs(StyledMenu, {
+      role: "tab",
+      "aria-disabled": disabled ?? 'false',
+      disabled: disabled,
+      "aria-haspopup": "menu",
+      ...props,
+      children: [disclosure, jsx(ArrowIcon, {
+        name: "arrow-down"
+      })]
+    }),
+    children: children
+  });
+});
+
+export { TabMenu };

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

@@ -0,0 +1,40 @@
+import _styled from '@emotion/styled/base';
+import { useMemo } from 'react';
+import Item from '../Menu/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:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.primary.text;
+}, ";}");
+const TabMenuItem = _ref2 => {
+  let {
+    value,
+    children,
+    onClick,
+    ...props
+  } = _ref2;
+  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

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

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

@@ -0,0 +1,117 @@
+import _styled from '@emotion/styled/base';
+import { useRef, useState, useMemo, useEffect } 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:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.typography.bodySmall.fontSize;
+}, ";line-height:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.typography.bodySmall.lineHeight;
+}, ";font-weight:inherit;padding:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return `${theme.space['1']} ${theme.space['2']}`;
+}, ";border-bottom-width:1px;width:100%;cursor:pointer;min-width:110px;background-color:transparent;}");
+const StyledTabMenu = /*#__PURE__*/_styled(TabMenu, {
+  target: "ewug27g1"
+})("position:sticky;right:0;top:0;bottom:0;background:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colors.neutral.background;
+}, ";box-shadow:", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return 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:", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.colors.neutral.borderWeak;
+}, ";}&::-webkit-scrollbar{display:none;}");
+const SHADOW_THRESHOLD = 10;
+const Tabs = _ref7 => {
+  let {
+    children = null,
+    onChange,
+    moreDisclosure = 'More',
+    selected,
+    className,
+    'data-testid': dataTestId,
+    ...props
+  } = _ref7;
+  const tabsRef = useRef({});
+  const moreStaticRef = useRef({});
+  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
+  useEffect(() => {
+    const element = tabsRef.current;
+    const moreElement = moreStaticRef.current;
+    const handler = () => {
+      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]);
+  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: children
+        })
+      }) : null]
+    })
+  });
+};
+Tabs.Tab = Tab;
+Tabs.Menu = TabMenu;
+Tabs.MenuItem = TabMenuItem;
+
+export { Tabs };