@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/components/Table/Row.js

@@ -0,0 +1,85 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+import { useEffect } from "react";
+import { Checkbox } from "../Checkbox/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+import { Cell } from "./Cell.js";
+import { useTableContext } from "./TableContext.js";
+const StyledCheckboxContainer = styled.div`
+  display: flex;
+`;
+const colorChange = (theme) => keyframes`
+  5% {
+    background-color: ${theme.colors.primary.background};
+  }
+  80% {
+    background-color: ${theme.colors.primary.background};
+  }
+`;
+const StyledTr = styled("tr", {
+  shouldForwardProp: (prop) => !["highlightAnimation"].includes(prop)
+})`
+  animation: ${({ highlightAnimation, theme }) => highlightAnimation ? colorChange(theme) : void 0}
+    3s linear;
+`;
+const Row = ({
+  children,
+  className,
+  id,
+  selectDisabled,
+  highlightAnimation,
+  "data-testid": dataTestid
+}) => {
+  const {
+    selectable,
+    registerSelectableRow,
+    selectedRowIds,
+    selectRow,
+    unselectRow
+  } = useTableContext();
+  useEffect(() => {
+    if (!selectDisabled) {
+      const unregisterCallback = registerSelectableRow(id);
+      return unregisterCallback;
+    }
+    return void 0;
+  }, [id, registerSelectableRow, selectDisabled]);
+  return /* @__PURE__ */ jsxs(
+    StyledTr,
+    {
+      className,
+      "data-testid": dataTestid,
+      highlightAnimation,
+      children: [
+        selectable ? /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(StyledCheckboxContainer, { children: /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            text: typeof selectDisabled === "string" ? selectDisabled : void 0,
+            children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                name: "table-select-checkbox",
+                "aria-label": "select",
+                checked: selectedRowIds[id],
+                value: id,
+                onChange: () => {
+                  if (selectedRowIds[id]) {
+                    unselectRow(id);
+                  } else {
+                    selectRow(id);
+                  }
+                },
+                disabled: selectDisabled !== void 0
+              }
+            )
+          }
+        ) }) }) : null,
+        children
+      ]
+    }
+  );
+};
+export {
+  Row
+};

package/dist/components/Table/SelectBar.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+type SelectBarProps<T> = {
+    className?: string;
+    children: (p: {
+        selectedItems: T[];
+        unselectAll: () => void;
+    }) => ReactNode;
+    data: T[];
+    /**
+     * The idKey of each data entry
+     * */
+    idKey: keyof T;
+};
+export declare function SelectBar<T>({ children, data, idKey, className, }: SelectBarProps<T>): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/Table/SelectBar.js

@@ -0,0 +1,35 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useMemo } from "react";
+import { ActionBar } from "../ActionBar/index.js";
+import { useTableContext } from "./TableContext.js";
+const StyledActionBar = styled(ActionBar)`
+  display: flex;
+  align-items: center;
+  padding: 0 ${({ theme }) => theme.space["1"]};
+`;
+const FlexDiv = styled.div`
+  flex: 1;
+`;
+function SelectBar({
+  children,
+  data,
+  idKey,
+  className
+}) {
+  const { selectedRowIds, unselectAll } = useTableContext();
+  const selectedItems = useMemo(
+    () => data.filter((item) => selectedRowIds[item[idKey]]),
+    [data, idKey, selectedRowIds]
+  );
+  if (selectedItems.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(StyledActionBar, { className, children: /* @__PURE__ */ jsx(FlexDiv, { children: children({
+    selectedItems,
+    unselectAll
+  }) }) });
+}
+export {
+  SelectBar
+};

package/dist/components/Table/SkeletonRows.d.ts

@@ -0,0 +1,7 @@
+type SkeletonRowsProps = {
+    selectable: boolean;
+    rows: number;
+    cols: number;
+};
+export declare const SkeletonRows: ({ selectable, rows, cols }: SkeletonRowsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/SkeletonRows.js

@@ -0,0 +1,22 @@
+import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Skeleton } from "../Skeleton/index.js";
+import { Cell } from "./Cell.js";
+const StyledLoadingRow = styled("tr")`
+  cursor: progress;
+`;
+const StyledSkeleton = styled(Skeleton)`
+  width: 80%;
+  max-width: 100%;
+`;
+const SkeletonRows = ({ selectable, rows, cols }) => {
+  const rowArray = Array.from({ length: rows }, (_, index) => index);
+  const colArray = Array.from({ length: cols }, (_, index) => index);
+  return /* @__PURE__ */ jsx(Fragment, { children: rowArray.map((index) => /* @__PURE__ */ jsxs(StyledLoadingRow, { role: "row", id: `skeleton-${index}`, children: [
+    selectable ? /* @__PURE__ */ jsx(Cell, {}) : null,
+    colArray.map((columnIndex) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(StyledSkeleton, { variant: "line" }) }, columnIndex))
+  ] }, index)) });
+};
+export {
+  SkeletonRows
+};

package/dist/components/Table/TableContext.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { Checkbox } from '../Checkbox';
+type RowState = Record<string, boolean>;
+type TableContextValue = {
+    bordered: boolean;
+    stripped: boolean;
+    selectedRowIds: RowState;
+    selectRow: (rowId: string) => void;
+    unselectRow: (rowId: string) => void;
+    selectable: boolean;
+    allRowSelectValue: ComponentProps<typeof Checkbox>['checked'];
+    selectAll: () => void;
+    unselectAll: () => void;
+    /**
+     * @returns an unregister function
+     * */
+    registerSelectableRow: (rowId: string) => () => void;
+};
+type TableProviderProps = {
+    children: ReactNode;
+    selectable: boolean;
+    bordered: boolean;
+    stripped: boolean;
+};
+export declare const TableProvider: ({ children, selectable, bordered, stripped, }: TableProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const useTableContext: () => TableContextValue;
+export {};

package/dist/components/Table/TableContext.js

@@ -0,0 +1,103 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { createContext, useState, useCallback, useMemo, useContext } from "react";
+const TableContext = createContext(void 0);
+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 /* @__PURE__ */ jsx(TableContext.Provider, { value, 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/components/Table/index.d.ts

@@ -0,0 +1,60 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { HeaderCell } from './HeaderCell';
+import { SelectBar } from './SelectBar';
+type ColumnProps = Pick<ComponentProps<typeof HeaderCell>, 'isOrdered' | 'onOrder' | 'orderDirection'> & {
+    label?: string;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    info?: string;
+};
+type TableProps = {
+    selectable?: boolean;
+    columns: ColumnProps[];
+    children: ReactNode;
+    /**
+     * Set it to true if you want to display a placeholder during loading
+     * */
+    loading?: boolean;
+    bordered?: boolean;
+    stripped?: boolean;
+};
+export declare const BaseTable: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLTableElement>>;
+/**
+ * Table is a component that displays data in a tabular format.
+ */
+export declare const Table: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLTableElement>> & {
+    Body: ({ children }: {
+        children: ReactNode;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Row: ({ children, className, id, selectDisabled, highlightAnimation, "data-testid": dataTestid, }: {
+        children: ReactNode;
+        className?: string | undefined;
+        id: string;
+        'data-testid'?: string | undefined;
+        selectDisabled?: string | boolean | undefined;
+        highlightAnimation?: boolean | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Cell: ({ children, className, colSpan, rowSpan }: {
+        children?: ReactNode;
+        className?: string | undefined;
+        colSpan?: number | undefined;
+        rowSpan?: number | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    useTableContext: () => {
+        bordered: boolean;
+        stripped: boolean;
+        selectedRowIds: {
+            [x: string]: boolean;
+        };
+        selectRow: (rowId: string) => void;
+        unselectRow: (rowId: string) => void;
+        selectable: boolean;
+        allRowSelectValue: boolean | "indeterminate" | undefined;
+        selectAll: () => void;
+        unselectAll: () => void;
+        registerSelectableRow: (rowId: string) => () => void;
+    };
+    SelectBar: typeof SelectBar;
+};
+export {};

package/dist/components/Table/index.js

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+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 { TableProvider, useTableContext } from "./TableContext.js";
+const StyledTable = styled("table", {
+  shouldForwardProp: (prop) => !["bordered", "stripped"].includes(prop)
+})`
+  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 = forwardRef(
+  ({
+    selectable = false,
+    children,
+    columns,
+    loading,
+    bordered = false,
+    stripped = false
+  }, ref) => /* @__PURE__ */ jsx(
+    TableProvider,
+    {
+      selectable,
+      stripped,
+      bordered,
+      children: /* @__PURE__ */ jsxs(StyledTable, { ref, stripped, bordered, children: [
+        /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(HeaderRow, { hasSelectAllColumn: selectable, children: columns.map((column, index) => /* @__PURE__ */ jsx(
+          HeaderCell,
+          {
+            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 ? /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(
+          SkeletonRows,
+          {
+            selectable,
+            rows: 5,
+            cols: columns.length
+          }
+        ) }) : children
+      ] })
+    }
+  )
+);
+const Table = Object.assign(BaseTable, {
+  Body,
+  Row,
+  Cell,
+  useTableContext,
+  SelectBar
+});
+export {
+  BaseTable,
+  Table
+};

package/dist/components/Tabs/Tab.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentProps, ElementType, KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';
+export declare const StyledTabButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+type TabProps<T extends ElementType = 'button'> = {
+    as?: T;
+    badge?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    counter?: number | string;
+    disabled?: boolean;
+    onClick?: MouseEventHandler<HTMLElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLElement>;
+    subtitle?: string;
+    tooltip?: string;
+    value?: string | number;
+} & Omit<ComponentProps<T>, 'as' | 'badge' | 'children' | 'className' | 'counter' | 'disabled' | 'value' | 'tooltip' | 'role'>;
+export declare const Tab: import("react").ForwardRefExoticComponent<Omit<TabProps<ElementType>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export {};

package/dist/components/Tabs/Tab.js

@@ -0,0 +1,170 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+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";
+const StyledBadge = styled(Badge)`
+  padding: 0 ${({ theme }) => theme.space["1"]};
+  margin-left: ${({ theme }) => theme.space["1"]};
+`;
+const StyledText = styled(Text)``;
+const StyledTooltip = styled(Tooltip)``;
+const BadgeContainer = styled.span`
+  margin-left: ${({ theme }) => theme.space["1"]};
+  display: flex;
+`;
+const StyledTabButton = styled("button")`
+  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 = 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 !== void 0 && selected === value,
+      [value, selected]
+    );
+    return /* @__PURE__ */ jsx(StyledTooltip, { text: tooltip, children: /* @__PURE__ */ jsx(
+      StyledTabButton,
+      {
+        role: "tab",
+        ref,
+        className,
+        as: computedAs,
+        "aria-label": value ? `${value}` : void 0,
+        "aria-selected": isSelected,
+        "aria-disabled": disabled,
+        disabled: computedAs === "button" ? disabled : void 0,
+        type: computedAs === "button" ? "button" : void 0,
+        onClick: (event) => {
+          if (value !== void 0) {
+            onChange(value);
+          }
+          onClick?.(event);
+        },
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (!event.defaultPrevented && !disabled && value)
+            onChange(value);
+        },
+        "data-is-selected": isSelected,
+        ...props,
+        children: /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: 0.5, children: [
+          /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", children: [
+            children,
+            typeof counter === "number" || typeof counter === "string" ? /* @__PURE__ */ jsx(
+              StyledBadge,
+              {
+                sentiment: isSelected ? "primary" : "neutral",
+                prominence: isSelected ? "strong" : "default",
+                size: "medium",
+                children: counter
+              }
+            ) : null,
+            badge ? /* @__PURE__ */ jsx(BadgeContainer, { children: badge }) : null
+          ] }),
+          subtitle ? /* @__PURE__ */ jsx(Stack, { direction: "row", children: /* @__PURE__ */ jsx(
+            StyledText,
+            {
+              as: "span",
+              variant: "bodySmall",
+              sentiment: "neutral",
+              prominence: "weak",
+              children: subtitle
+            }
+          ) }) : null
+        ] })
+      }
+    ) });
+  }
+);
+export {
+  StyledTabButton,
+  Tab
+};

package/dist/components/Tabs/TabMenu.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonHTMLAttributes, ComponentProps, ReactNode } from 'react';
+import { MenuV2 } from '../MenuV2';
+export declare const TabMenu: import("react").ForwardRefExoticComponent<{
+    children: ReactNode;
+    disclosure: ReactNode;
+    visible?: ComponentProps<typeof MenuV2>['visible'];
+    id?: ComponentProps<typeof MenuV2>['id'];
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "aria-disabled"> & import("react").RefAttributes<HTMLButtonElement>>;