@ultraviolet/ui 1.51.1 → 1.51.3

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

@@ -1,108 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useRef, useState, useEffect } from 'react';
-import { SelectableCard } from '../SelectableCard/index.js';
-import { Tooltip } from '../Tooltip/index.js';
-import { FocusOverlay } from './FocusOverlay.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-const StyledBorderedBox = /*#__PURE__*/_styled("div", {
-  target: "e4ryteh1"
-})("border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";padding:", ({
-  theme
-}) => theme.space['0.5'], ";display:flex;gap:", ({
-  theme
-}) => theme.space['1'], ";position:relative;");
-const StyledSelectableCard = /*#__PURE__*/_styled(SelectableCard, {
-  target: "e4ryteh0"
-})("border:none;height:40px;padding:", ({
-  theme
-}) => theme.space['1'], " ", ({
-  theme
-}) => theme.space['2'], ";font-weight:", ({
-  theme
-}) => theme.typography.bodyStrong.weight, ";justify-content:center;align-items:center;transition:all 200ms ease-in-out;white-space:nowrap;&:hover,&:focus-within,&:active{box-shadow:none;border:none;&:not([data-error='true'][data-disabled='true']){border:none;}}&[data-checked='true']{border:none;}&[data-checked='true'] label{color:", ({
-  theme
-}) => theme.colors.primary.textStrong, ";}&:not([data-checked='true']) label{&:hover{color:", ({
-  theme
-}) => theme.colors.primary.text, ";}}");
-/**
- * SwitchButton is a component that allows the user to select between two options.
- */
-const SwitchButton = ({
-  value,
-  onChange,
-  onFocus,
-  onBlur,
-  name,
-  leftButton,
-  rightButton,
-  tooltip,
-  className,
-  'data-testid': dataTestId
-}) => {
-  const leftButtonRef = useRef(null);
-  const rightButtonRef = useRef(null);
-  const [leftCardWidth, setLeftCardWidth] = useState();
-  const [rightCardWidth, setRightCardWidth] = useState();
-  const [hasMouseDown, setHasMouseDown] = useState(false);
-  const [localValue, setLocalValue] = useState(value === leftButton.value ? leftButton.value : rightButton.value);
-  const handleOnChange = event => {
-    onChange?.(event);
-    setLocalValue(event.target.value);
-  };
-  useEffect(() => {
-    if (!leftButtonRef.current || !rightButtonRef.current) return;
-    setLeftCardWidth(leftButtonRef.current.getBoundingClientRect().width);
-    setRightCardWidth(rightButtonRef.current.getBoundingClientRect().width);
-  }, [leftButton.value, leftButtonRef, localValue, rightButtonRef]);
-  const setMouseDown = isMouseDown => () => setHasMouseDown(isMouseDown);
-  return jsx(Tooltip, {
-    text: tooltip,
-    children: jsx("div", {
-      style: {
-        display: 'inline-flex'
-      },
-      className: className,
-      "data-testid": dataTestId,
-      children: jsxs(StyledBorderedBox, {
-        onMouseDown: setMouseDown(true),
-        onMouseUp: setMouseDown(false),
-        onMouseLeave: setMouseDown(false),
-        children: [rightCardWidth && leftCardWidth ? jsx(FocusOverlay, {
-          focusPosition: localValue === leftButton.value ? 'left' : 'right',
-          rightCardWidth: rightCardWidth,
-          leftCardWidth: leftCardWidth,
-          hasMouseDown: hasMouseDown
-        }) : null, jsx(StyledSelectableCard, {
-          ref: leftButtonRef,
-          name: name,
-          value: leftButton.value,
-          checked: localValue === leftButton.value,
-          onChange: handleOnChange,
-          onBlur: onBlur,
-          onFocus: onFocus,
-          "data-checked": localValue === leftButton.value,
-          label: leftButton.label,
-          "data-testid": dataTestId ? `${dataTestId}-left` : undefined
-        }), jsx(StyledSelectableCard, {
-          ref: rightButtonRef,
-          name: name,
-          value: rightButton.value,
-          checked: localValue === rightButton.value,
-          onChange: handleOnChange,
-          onBlur: onBlur,
-          onFocus: onFocus,
-          "data-checked": localValue === rightButton.value,
-          label: rightButton.label,
-          "data-testid": dataTestId ? `${dataTestId}-right` : undefined
-        })]
-      })
-    })
-  });
-};
-
-export { SwitchButton };

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

@@ -1,9 +0,0 @@
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const Body = ({
-  children
-}) => jsx("tbody", {
-  children: children
-});
-
-export { Body };

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

@@ -1,21 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const StyledCell = /*#__PURE__*/_styled('td', {
-  target: "e78o8ww0"
-})("padding:", ({
-  theme
-}) => theme.space['1'], ";font-size:14px;");
-const Cell = ({
-  children,
-  className,
-  colSpan,
-  rowSpan
-}) => jsx(StyledCell, {
-  className: className,
-  colSpan: colSpan,
-  rowSpan: rowSpan,
-  children: children
-});
-
-export { Cell };

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

@@ -1,15 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const StyledHeader = /*#__PURE__*/_styled('thead', {
-  target: "ekxedod0"
-})("border-bottom:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";");
-const Header = ({
-  children
-}) => jsx(StyledHeader, {
-  children: children
-});
-
-export { Header };

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

@@ -1,103 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/index.js';
-import { Tooltip } from '../Tooltip/index.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-const StyledIconContainer = /*#__PURE__*/_styled(Stack, {
-  target: "ev6jkq82"
-})("color:", ({
-  theme
-}) => theme.colors.neutral.textWeak, ";&[aria-disabled='true']{cursor:not-allowed;}&[role*='button']{cursor:pointer;user-select:none;}");
-const SortIcon = ({
-  order
-}) => jsxs(StyledIconContainer, {
-  children: [jsx(Icon, {
-    name: "arrow-up",
-    size: 10,
-    color: order === 'ascending' ? 'primary' : 'neutral',
-    prominence: "weak"
-  }), jsx(Icon, {
-    name: "arrow-down",
-    size: 10,
-    color: order === 'descending' ? 'primary' : 'neutral',
-    prominence: "weak"
-  })]
-});
-const StyledHeaderCell = /*#__PURE__*/_styled('th', {
-  shouldForwardProp: prop => !['width', 'maxWidth', 'minWidth'].includes(prop),
-  target: "ev6jkq81"
-})(({
-  width,
-  maxWidth,
-  minWidth
-}) => `
-    ${width ? `width: ${width};` : ''}
-    ${maxWidth ? `max-width: ${maxWidth};` : ''}
-    ${minWidth ? `min-width: ${minWidth};` : ''}
-  `, " padding:", ({
-  theme
-}) => theme.space['1'], ";&[role*='button']{cursor:pointer;user-select:none;}");
-const StyledText = /*#__PURE__*/_styled(Text, {
-  target: "ev6jkq80"
-})("display:flex;flex-direction:row;align-items:center;gap:", ({
-  theme
-}) => theme.space['1'], ";");
-const HeaderCell = ({
-  children,
-  className,
-  isOrdered,
-  onOrder,
-  orderDirection,
-  width,
-  maxWidth,
-  minWidth,
-  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 jsx(StyledHeaderCell, {
-    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,
-    width: width,
-    maxWidth: maxWidth,
-    minWidth: minWidth,
-    tabIndex: handleOrder ? 0 : -1,
-    "aria-sort": order,
-    children: jsxs(StyledText, {
-      as: "div",
-      variant: "bodySmall",
-      color: order !== undefined ? 'primary' : 'neutral',
-      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, {
-        "aria-disabled": !onOrder,
-        order: order
-      }) : null]
-    })
-  });
-};
-
-export { HeaderCell };

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

@@ -1,32 +0,0 @@
-import { Checkbox } from '../Checkbox/index.js';
-import { HeaderCell } from './HeaderCell.js';
-import { useTableContext } from './TableContext.js';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-
-const HeaderRow = ({
-  children,
-  hasSelectAllColumn
-}) => {
-  const {
-    allRowSelectValue,
-    selectAll,
-    unselectAll,
-    selectedRowIds
-  } = useTableContext();
-  const selectableRowCount = Object.keys(selectedRowIds).length;
-  return jsxs("tr", {
-    children: [hasSelectAllColumn ? jsx(HeaderCell, {
-      width: "24px",
-      children: jsx(Checkbox, {
-        name: "table-select-all-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/Table/Row.js

@@ -1,89 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { keyframes } from '@emotion/react';
-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';
-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 StyledCheckboxContainer = /*#__PURE__*/_styled("div", {
-  target: "e1qvrbgq1"
-})(process.env.NODE_ENV === "production" ? {
-  name: "zjik7",
-  styles: "display:flex"
-} : {
-  name: "zjik7",
-  styles: "display:flex",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-// We start at 5% and finish at 80% to leave the original background color
-// as we can't know if the table will be stripped or not
-const colorChange = theme => keyframes`
-  5% {
-    background-color: ${theme.colors.primary.background};
-  }
-  80% {
-    background-color: ${theme.colors.primary.background};
-  }
-`;
-const StyledTr = /*#__PURE__*/_styled('tr', {
-  shouldForwardProp: prop => !['highlightAnimation'].includes(prop),
-  target: "e1qvrbgq0"
-})("animation:", ({
-  highlightAnimation,
-  theme
-}) => highlightAnimation ? colorChange(theme) : undefined, " 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 undefined;
-  }, [id, registerSelectableRow, selectDisabled]);
-  return jsxs(StyledTr, {
-    className: className,
-    "data-testid": dataTestid,
-    highlightAnimation: highlightAnimation,
-    children: [selectable ? jsx(Cell, {
-      children: jsx(StyledCheckboxContainer, {
-        children: jsx(Tooltip, {
-          text: typeof selectDisabled === 'string' ? selectDisabled : undefined,
-          children: 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 !== undefined
-          })
-        })
-      })
-    }) : null, children]
-  });
-};
-
-export { Row };

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

@@ -1,48 +0,0 @@
-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 ", ({
-  theme
-}) => 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({
-  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 jsx(StyledActionBar, {
-    className: className,
-    children: jsx(FlexDiv, {
-      children: children({
-        selectedItems,
-        unselectAll
-      })
-    })
-  });
-}
-
-export { SelectBar };

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/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 };