@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/src/components/List/HeaderCell.js

@@ -1,90 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { Stack } from '../Stack/index.js';
-import { Tooltip } from '../Tooltip/index.js';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-
-const ArrowDownIcon = /*#__PURE__*/_styled(Icon, {
-  target: "e1q5cnom3"
-})();
-const ArrowUpIcon = /*#__PURE__*/_styled(Icon, {
-  target: "e1q5cnom2"
-})();
-const StyledIconContainer = /*#__PURE__*/_styled(Stack, {
-  target: "e1q5cnom1"
-})("color:", ({
-  theme
-}) => theme.colors.neutral.text, ";&[aria-disabled='true']{cursor:not-allowed;}");
-const SortIcon = () => jsxs(StyledIconContainer, {
-  children: [jsx(ArrowUpIcon, {
-    name: "arrow-up",
-    size: 10
-  }), jsx(ArrowDownIcon, {
-    name: "arrow-down",
-    size: 10
-  })]
-});
-const StyledHeaderCell = /*#__PURE__*/_styled("div", {
-  target: "e1q5cnom0"
-})("display:flex;text-align:left;flex-direction:row;align-items:center;font-size:", ({
-  theme
-}) => theme.typography.bodySmall.fontSize, ";font-weight:", ({
-  theme
-}) => theme.typography.bodySmall.weight, ";font-family:", ({
-  theme
-}) => theme.typography.bodySmall.fontFamily, ";color:", ({
-  theme
-}) => theme.colors.neutral.text, ";gap:", ({
-  theme
-}) => theme.space['1'], ";&[role*='button']{cursor:pointer;user-select:none;}&[aria-sort]{color:", ({
-  theme
-}) => theme.colors.primary.text, ";}&[aria-sort='ascending'] ", ArrowUpIcon, "{color:", ({
-  theme
-}) => theme.colors.primary.text, ";}&[aria-sort='descending'] ", ArrowDownIcon, "{color:", ({
-  theme
-}) => theme.colors.primary.text, ";}");
-const HeaderCell = ({
-  children,
-  isOrdered,
-  orderDirection,
-  onOrder,
-  className,
-  info
-}) => {
-  let order;
-  if (isOrdered && orderDirection === 'asc') {
-    order = 'ascending';
-  } else if (isOrdered && orderDirection === 'desc') {
-    order = 'descending';
-  }
-  const handleOrder = onOrder ? () => onOrder(order === 'ascending' ? 'desc' : 'asc') : undefined;
-  return jsxs(StyledHeaderCell, {
-    "aria-sort": order,
-    className: className,
-    onClick: handleOrder,
-    onKeyDown: handleOrder ? event => {
-      if (event.key === ' ' || event.key === 'Enter') {
-        handleOrder();
-        if (event.key === ' ') {
-          // @note: it avoid scroll when pressing Space
-          event.preventDefault();
-        }
-      }
-    } : undefined,
-    role: onOrder ? 'button columnheader' : undefined,
-    tabIndex: handleOrder ? 0 : -1,
-    children: [children, info ? jsx(Tooltip, {
-      text: info,
-      children: jsx(Icon, {
-        name: "information-outline",
-        size: 20,
-        prominence: "weak",
-        color: "neutral"
-      })
-    }) : null, orderDirection !== undefined && isOrdered !== undefined ? jsx(SortIcon, {
-      "data-sorted": order !== undefined
-    }) : null]
-  });
-};
-
-export { HeaderCell };

package/dist/src/components/List/HeaderRow.js

@@ -1,43 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Checkbox } from '../Checkbox/index.js';
-import { HeaderCell } from './HeaderCell.js';
-import { useListContext } from './ListContext.js';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-
-const StyledHeaderRow = /*#__PURE__*/_styled("div", {
-  target: "epvvdb70"
-})("column-gap:", ({
-  theme
-}) => theme.space['2'], ";padding:0 ", ({
-  theme
-}) => theme.space['2'], ";");
-const HeaderRow = ({
-  children,
-  hasSelectAllColumn
-}) => {
-  const {
-    allRowSelectValue,
-    selectAll,
-    unselectAll,
-    selectedRowIds,
-    expandButton
-  } = useListContext();
-  const selectableRowCount = Object.keys(selectedRowIds).length;
-  return jsxs(StyledHeaderRow, {
-    role: "row",
-    children: [hasSelectAllColumn ? jsx(HeaderCell, {
-      children: jsx(Checkbox, {
-        name: "list-select-checkbox",
-        value: "all",
-        "aria-label": "select all",
-        checked: allRowSelectValue,
-        onChange: allRowSelectValue === false ? selectAll : unselectAll,
-        disabled: selectableRowCount === 0
-      })
-    }) : null, expandButton ? jsx(HeaderCell, {
-      children: null
-    }) : null, children]
-  });
-};
-
-export { HeaderRow };

package/dist/src/components/List/ListContext.js

@@ -1,138 +0,0 @@
-import { useContext, createContext, useState, useCallback, useMemo } from 'react';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const ListContext = /*#__PURE__*/createContext(undefined);
-const ListProvider = ({
-  children,
-  autoCollapse,
-  selectable,
-  expandButton,
-  onSelectedChange
-}) => {
-  const [expandedRowIds, setExpandedRowIds] = useState({});
-  const [selectedRowIds, setSelectedRowIds] = useState({});
-  const registerExpandableRow = useCallback(rowId => {
-    setExpandedRowIds(current => ({
-      ...current,
-      [rowId]: false
-    }));
-    return () => {
-      setExpandedRowIds(current => {
-        const {
-          [rowId]: relatedId,
-          ...otherIds
-        } = current;
-        return otherIds;
-      });
-    };
-  }, []);
-  const registerSelectableRow = useCallback(rowId => {
-    setSelectedRowIds(current => ({
-      ...current,
-      [rowId]: false
-    }));
-    return () => {
-      setSelectedRowIds(current => {
-        const {
-          [rowId]: relatedId,
-          ...otherIds
-        } = current;
-        return otherIds;
-      });
-    };
-  }, []);
-  const expandRow = useCallback(rowId => {
-    setExpandedRowIds(current => ({
-      ...(autoCollapse ? {} : current),
-      [rowId]: true
-    }));
-  }, [autoCollapse]);
-  const collapseRow = useCallback(rowId => {
-    setExpandedRowIds(current => ({
-      ...current,
-      [rowId]: false
-    }));
-  }, []);
-  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(() => {
-    const newSelectedRowIds = Object.keys(selectedRowIds).reduce((acc, rowId) => ({
-      ...acc,
-      [rowId]: true
-    }), {});
-    setSelectedRowIds(newSelectedRowIds);
-    if (onSelectedChange) {
-      onSelectedChange(Object.keys(newSelectedRowIds).filter(row => newSelectedRowIds[row]));
-    }
-  }, [onSelectedChange, selectedRowIds]);
-  const unselectAll = useCallback(() => {
-    const newSelectedRowIds = Object.keys(selectedRowIds).reduce((acc, rowId) => ({
-      ...acc,
-      [rowId]: false
-    }), {});
-    setSelectedRowIds(newSelectedRowIds);
-    if (onSelectedChange) {
-      onSelectedChange(Object.keys(newSelectedRowIds).filter(row => newSelectedRowIds[row]));
-    }
-  }, [onSelectedChange, selectedRowIds]);
-  const selectRow = useCallback(rowId => {
-    const newSelectedRowIds = {
-      ...selectedRowIds,
-      [rowId]: true
-    };
-    setSelectedRowIds(newSelectedRowIds);
-    if (onSelectedChange) {
-      onSelectedChange(Object.keys(newSelectedRowIds).filter(row => newSelectedRowIds[row]));
-    }
-  }, [onSelectedChange, selectedRowIds]);
-  const unselectRow = useCallback(rowId => {
-    const newSelectedRowIds = {
-      ...selectedRowIds,
-      [rowId]: false
-    };
-    setSelectedRowIds(newSelectedRowIds);
-    if (onSelectedChange) {
-      onSelectedChange(Object.keys(newSelectedRowIds).filter(row => newSelectedRowIds[row]));
-    }
-  }, [onSelectedChange, selectedRowIds]);
-  const value = useMemo(() => ({
-    registerExpandableRow,
-    expandedRowIds,
-    expandRow,
-    collapseRow,
-    registerSelectableRow,
-    selectedRowIds,
-    selectRow,
-    unselectRow,
-    selectable,
-    selectAll,
-    unselectAll,
-    allRowSelectValue,
-    expandButton
-  }), [registerExpandableRow, expandedRowIds, expandRow, collapseRow, registerSelectableRow, selectedRowIds, selectRow, unselectRow, selectable, selectAll, unselectAll, allRowSelectValue, expandButton]);
-  return jsx(ListContext.Provider, {
-    value: value,
-    children: children
-  });
-};
-const useListContext = () => {
-  const context = useContext(ListContext);
-  if (!context) {
-    throw new Error('useListContext should be used inside a List component');
-  }
-  return context;
-};
-
-export { ListProvider, useListContext };

package/dist/src/components/List/Row.js

@@ -1,185 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { forwardRef, useEffect } from 'react';
-import { Button } from '../Button/index.js';
-import { Checkbox } from '../Checkbox/index.js';
-import { Tooltip } from '../Tooltip/index.js';
-import { Cell } from './Cell.js';
-import { useListContext } from './ListContext.js';
-import { jsxs, 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 ExpandableWrapper = /*#__PURE__*/_styled("div", {
-  target: "ei4uyz12"
-})("grid-column:1/-1;grid-column-start:1;border-top:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";margin:0 -", ({
-  theme
-}) => theme.space['2'], ";padding:", ({
-  theme
-}) => theme.space['2'], ";cursor:auto;background:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeak, ";border-radius:0 0 ", ({
-  theme
-}) => theme.radii.default, " ", ({
-  theme
-}) => theme.radii.default, ";");
-const StyledRow = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['sentiment'].includes(prop),
-  target: "ei4uyz11"
-})("position:relative;border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";transition:box-shadow 200ms ease,border-color 200ms ease;box-shadow:none;background-color:", ({
-  theme
-}) => theme.colors.neutral.background, ";font-size:", ({
-  theme
-}) => theme.typography.bodySmall.fontSize, ";column-gap:", ({
-  theme
-}) => theme.space['2'], ";padding:0 ", ({
-  theme
-}) => theme.space['2'], ";&[role='button row']{cursor:pointer;}", ({
-  theme,
-  sentiment
-}) => `
-    color: ${theme.colors[sentiment].text};
-    border-color: ${theme.colors[sentiment].border};
-    background-color: ${theme.colors[sentiment].background};
-    & [data-expandable-content] {
-      border-color: ${theme.colors[sentiment].border};
-    }
-
-    ${sentiment === 'neutral' ? `&:hover {
-          border-color: ${theme.colors.primary.border};
-          box-shadow: ${theme.shadows.hoverPrimary};
-        }
-        ` : ''}
-  `, " &[data-highlight='true']{border-color:", ({
-  theme
-}) => theme.colors.primary.border, ";box-shadow:", ({
-  theme
-}) => theme.shadows.hoverPrimary, ";}&[aria-disabled='true']{border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.borderDisabled, ";background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundDisabled, ";color:", ({
-  theme
-}) => theme.colors.neutral.textDisabled, ";cursor:not-allowed;}");
-const StyledCheckboxContainer = /*#__PURE__*/_styled("div", {
-  target: "ei4uyz10"
-})(process.env.NODE_ENV === "production" ? {
-  name: "zjik7",
-  styles: "display:flex"
-} : {
-  name: "zjik7",
-  styles: "display:flex",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const Row = /*#__PURE__*/forwardRef(({
-  children,
-  id,
-  expandable,
-  disabled,
-  selectDisabled,
-  sentiment = 'neutral',
-  className,
-  'data-testid': dataTestid
-}, ref) => {
-  const {
-    selectable,
-    registerExpandableRow,
-    expandedRowIds,
-    expandRow,
-    collapseRow,
-    registerSelectableRow,
-    selectedRowIds,
-    selectRow,
-    unselectRow,
-    expandButton
-  } = useListContext();
-  const isSelectDisabled = disabled || selectDisabled !== undefined && selectDisabled !== false;
-  const hasExpandable = !!expandable;
-  useEffect(() => {
-    if (hasExpandable) {
-      const unregisterCallback = registerExpandableRow(id);
-      return unregisterCallback;
-    }
-    return undefined;
-  }, [id, hasExpandable, registerExpandableRow]);
-  useEffect(() => {
-    if (!isSelectDisabled) {
-      const unregisterCallback = registerSelectableRow(id);
-      return unregisterCallback;
-    }
-    return undefined;
-  }, [id, registerSelectableRow, isSelectDisabled]);
-  const toggleRowExpand = () => {
-    if (expandedRowIds[id]) {
-      collapseRow(id);
-    } else {
-      expandRow(id);
-    }
-  };
-  const canClickRowToExpand = !disabled && !!expandable && !expandButton;
-  return jsxs(StyledRow, {
-    className: className,
-    ref: ref,
-    role: canClickRowToExpand ? 'button row' : 'row',
-    onClick: canClickRowToExpand ? toggleRowExpand : undefined,
-    onKeyDown: canClickRowToExpand ? event => {
-      if (event.key === ' ') {
-        toggleRowExpand();
-        event.preventDefault();
-      }
-    } : undefined,
-    tabIndex: canClickRowToExpand ? 0 : -1,
-    sentiment: sentiment,
-    "aria-disabled": disabled,
-    "aria-expanded": expandable ? expandedRowIds[id] : undefined,
-    "data-highlight": !!selectedRowIds[id],
-    "data-testid": dataTestid,
-    children: [selectable ? jsx(Cell, {
-      preventClick: canClickRowToExpand,
-      children: jsx(StyledCheckboxContainer, {
-        children: jsx(Tooltip, {
-          text: typeof selectDisabled === 'string' ? selectDisabled : undefined,
-          children: jsx(Checkbox, {
-            name: "list-select-checkbox",
-            "aria-label": "select",
-            checked: selectedRowIds[id],
-            value: id,
-            onChange: () => {
-              if (selectedRowIds[id]) {
-                unselectRow(id);
-              } else {
-                selectRow(id);
-              }
-            },
-            disabled: isSelectDisabled
-          })
-        })
-      })
-    }) : null, expandButton ? jsx(Cell, {
-      preventClick: true,
-      children: jsx(Button, {
-        disabled: disabled || !expandable,
-        icon: expandedRowIds[id] ? 'arrow-up' : 'arrow-down',
-        onClick: toggleRowExpand,
-        size: "small",
-        sentiment: "neutral",
-        variant: "ghost"
-      })
-    }) : null, children, expandable && expandedRowIds[id] ? jsx(ExpandableWrapper, {
-      "data-expandable-content": true,
-      onClick: canClickRowToExpand ? e => {
-        e.stopPropagation();
-      } : undefined,
-      onKeyDown: canClickRowToExpand ? e => {
-        e.stopPropagation();
-      } : undefined,
-      children: expandable
-    }) : null]
-  });
-});
-
-export { Row, StyledRow };

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

@@ -1,48 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useMemo } from 'react';
-import { ActionBar } from '../ActionBar/index.js';
-import { useListContext } from './ListContext.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: "eo69e461"
-})("display:flex;align-items:center;padding:0 ", ({
-  theme
-}) => theme.space['1'], ";");
-const FlexDiv = /*#__PURE__*/_styled("div", {
-  target: "eo69e460"
-})(process.env.NODE_ENV === "production" ? {
-  name: "82a6rk",
-  styles: "flex:1"
-} : {
-  name: "82a6rk",
-  styles: "flex:1",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-function SelectBar({
-  children,
-  data,
-  idKey,
-  className
-}) {
-  const {
-    selectedRowIds,
-    unselectAll
-  } = useListContext();
-  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/List/SkeletonRows.js

@@ -1,53 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Skeleton } from '../Skeleton/index.js';
-import { Cell } from './Cell.js';
-import { StyledRow } from './Row.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(StyledRow, {
-  target: "efawmbb1"
-})(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: "efawmbb0"
-})(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, {
-      sentiment: "neutral",
-      role: "row",
-      id: `skeleton-${index}`,
-      children: [selectable ? jsx("div", {}) : null, colArray.map(columnIndex => jsx(Cell, {
-        children: jsx(StyledSkeleton, {
-          variant: "line"
-        })
-      }, columnIndex))]
-    }, index))
-  });
-};
-
-export { SkeletonRows };

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

@@ -1,75 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { forwardRef } from 'react';
-import { Body } from './Body.js';
-import { Cell } from './Cell.js';
-import { HeaderCell } from './HeaderCell.js';
-import { HeaderRow } from './HeaderRow.js';
-import { useListContext, ListProvider } from './ListContext.js';
-import { Row } from './Row.js';
-import { SelectBar } from './SelectBar.js';
-import { SkeletonRows } from './SkeletonRows.js';
-import { SELECTABLE_CHECKBOX_SIZE, EXPANDABLE_COLUMN_SIZE } from './constants.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-const StyledList = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['template'].includes(prop),
-  target: "ef5qi0"
-})("display:flex;flex-flow:column nowrap;width:100%;gap:", ({
-  theme
-}) => theme.space['1'], ";[role='row'],[role='button row']{display:grid;width:100%;grid-template-columns:", ({
-  template
-}) => template, ";align-items:center;}");
-const BaseList = /*#__PURE__*/forwardRef(({
-  expandable = false,
-  selectable = false,
-  columns,
-  children,
-  loading,
-  autoCollapse = false,
-  onSelectedChange
-}, ref) => {
-  const computeTemplate = `${selectable ? `${SELECTABLE_CHECKBOX_SIZE}px ` : ''}${expandable ? `${EXPANDABLE_COLUMN_SIZE}px ` : ''}${columns.map(({
-    width
-  }) => width ?? 'minmax(0, 1fr)').join(' ')}`;
-  return jsx(ListProvider, {
-    selectable: selectable,
-    expandButton: expandable,
-    autoCollapse: autoCollapse,
-    onSelectedChange: onSelectedChange,
-    children: jsxs(StyledList, {
-      ref: ref,
-      role: "grid",
-      template: computeTemplate,
-      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,
-          info: column.info,
-          children: column.label
-        }, `header-column-${index}`))
-      }), jsx(Body, {
-        children: loading ? jsx(SkeletonRows, {
-          selectable: selectable,
-          rows: 5,
-          cols: columns.length
-        }) : children
-      })]
-    })
-  });
-});
-
-/**
- * List is a component that displays a list of items based on the columns you provide and the data you pass.
- */
-const List = /*#__PURE__*/Object.assign(BaseList, {
-  Row,
-  Cell,
-  SelectBar,
-  useListContext
-});
-
-export { List };