@ultraviolet/ui 1.0.0

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

@@ -0,0 +1,118 @@
+import _styled from '@emotion/styled/base';
+import { Icon } from '../Icon/index.js';
+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:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.textWeak;
+}, ";&[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:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.typography.bodySmall.fontSize;
+}, ";font-weight:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.typography.bodySmall.weight;
+}, ";font-family:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.typography.bodySmall.fontFamily;
+}, ";color:", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.neutral.textWeak;
+}, ";gap:", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.space['1'];
+}, ";&[role*='button']{cursor:pointer;user-select:none;}&[aria-sort]{color:", _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.colors.primary.textWeak;
+}, ";}&[aria-sort='ascending'] ", ArrowUpIcon, "{color:", _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.colors.primary.textWeak;
+}, ";}&[aria-sort='descending'] ", ArrowDownIcon, "{color:", _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colors.primary.textWeak;
+}, ";}");
+const HeaderCell = _ref10 => {
+  let {
+    children,
+    isOrdered,
+    orderDirection,
+    onOrder,
+    className,
+    info
+  } = _ref10;
+  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

@@ -0,0 +1,47 @@
+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:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['2'];
+}, ";padding:0 ", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space['2'];
+}, ";");
+const HeaderRow = _ref3 => {
+  let {
+    children,
+    hasSelectAllColumn
+  } = _ref3;
+  const {
+    allRowSelectValue,
+    selectAll,
+    unselectAll,
+    selectedRowIds
+  } = 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, children]
+  });
+};
+
+export { HeaderRow };

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

@@ -0,0 +1,120 @@
+import { useContext, createContext, useState, useCallback, useMemo } from 'react';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const ListContext = /*#__PURE__*/createContext(undefined);
+const ListProvider = _ref => {
+  let {
+    children,
+    autoCollapse,
+    selectable
+  } = _ref;
+  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(() => {
+    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(() => ({
+    registerExpandableRow,
+    expandedRowIds,
+    expandRow,
+    collapseRow,
+    registerSelectableRow,
+    selectedRowIds,
+    selectRow,
+    unselectRow,
+    selectable,
+    selectAll,
+    unselectAll,
+    allRowSelectValue
+  }), [registerExpandableRow, expandedRowIds, expandRow, collapseRow, registerSelectableRow, selectedRowIds, selectRow, unselectRow, selectable, selectAll, unselectAll, allRowSelectValue]);
+  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

@@ -0,0 +1,211 @@
+import _styled from '@emotion/styled/base';
+import { forwardRef, useEffect } from 'react';
+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 ", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.borderWeak;
+}, ";margin:0 -", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.space['2'];
+}, ";padding:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.space['2'];
+}, ";cursor:auto;");
+const StyledRow = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['sentiment'].includes(prop),
+  target: "ei4uyz11"
+})("position:relative;border:1px solid ", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colors.neutral.borderWeak;
+}, ";border-radius:", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.radii.default;
+}, ";transition:box-shadow 200ms ease,border-color 200ms ease;box-shadow:none;background-color:", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.colors.neutral.background;
+}, ";font-size:", _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.typography.bodySmall.fontSize;
+}, ";column-gap:", _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.space['2'];
+}, ";padding:0 ", _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.space['2'];
+}, ";&[role='button row']{cursor:pointer;}", _ref10 => {
+  let {
+    theme,
+    sentiment
+  } = _ref10;
+  return `
+    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:", _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.colors.primary.border;
+}, ";box-shadow:", _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.shadows.hoverPrimary;
+}, ";}&[aria-disabled='true']{border:1px solid ", _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.colors.neutral.borderDisabled;
+}, ";background-color:", _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.colors.neutral.backgroundDisabled;
+}, ";color:", _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.colors.neutral.textDisabled;
+}, ";cursor:not-allowed;}& [data-visibility='hover']{opacity:0;}&:hover:not([aria-disabled='true']) [data-visibility='hover']{opacity:1;}");
+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((_ref16, ref) => {
+  let {
+    children,
+    id,
+    expandable,
+    disabled,
+    selectDisabled,
+    sentiment = 'neutral',
+    className,
+    'data-testid': dataTestid
+  } = _ref16;
+  const {
+    allRowSelectValue,
+    selectable,
+    registerExpandableRow,
+    expandedRowIds,
+    expandRow,
+    collapseRow,
+    registerSelectableRow,
+    selectedRowIds,
+    selectRow,
+    unselectRow
+  } = 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);
+    }
+  };
+  return jsxs(StyledRow, {
+    className: className,
+    ref: ref,
+    role: !disabled && expandable ? 'button row' : 'row',
+    onClick: !disabled && expandable ? toggleRowExpand : undefined,
+    onKeyDown: !disabled && expandable ? event => {
+      if (event.key === ' ') {
+        toggleRowExpand();
+        event.preventDefault();
+      }
+    } : undefined,
+    tabIndex: !disabled && expandable ? 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: true,
+      children: jsx(StyledCheckboxContainer, {
+        "data-visibility": allRowSelectValue === false ? 'hover' : undefined,
+        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, children, expandable && expandedRowIds[id] ? jsx(ExpandableWrapper, {
+      "data-expandable-content": true,
+      onClick: e => {
+        e.stopPropagation();
+      },
+      children: expandable
+    }) : null]
+  });
+});
+
+export { Row, StyledRow };

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

@@ -0,0 +1,52 @@
+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 ", _ref => {
+  let {
+    theme
+  } = _ref;
+  return 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(_ref2) {
+  let {
+    children,
+    data,
+    idKey,
+    className
+  } = _ref2;
+  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

@@ -0,0 +1,54 @@
+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 = _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, {
+      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/constants.js

@@ -0,0 +1,3 @@
+const SELECTABLE_CHECKBOX_SIZE = 24;
+
+export { SELECTABLE_CHECKBOX_SIZE };

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

@@ -0,0 +1,77 @@
+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 } 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:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['1'];
+}, ";[role='row'],[role='button row']{display:grid;width:100%;grid-template-columns:", _ref2 => {
+  let {
+    template
+  } = _ref2;
+  return template;
+}, ";align-items:center;}");
+const BaseList = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    selectable = false,
+    columns,
+    children,
+    loading,
+    autoCollapse = false
+  } = _ref3;
+  const computeTemplate = `${selectable ? `${SELECTABLE_CHECKBOX_SIZE}px ` : ''}${columns.map(_ref4 => {
+    let {
+      width
+    } = _ref4;
+    return width ?? 'minmax(0, 1fr)';
+  }).join(' ')}`;
+  return jsx(ListProvider, {
+    selectable: selectable,
+    autoCollapse: autoCollapse,
+    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
+      })]
+    })
+  });
+});
+const List = /*#__PURE__*/Object.assign(BaseList, {
+  Row,
+  Cell,
+  SelectBar,
+  useListContext
+});
+
+export { List };