@ultraviolet/ui 1.51.1 → 1.51.3

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

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

@@ -1,100 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useTheme } from '@emotion/react';
-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 VIEWBOX_WIDTH = 100;
-const VIEWBOX_HEIGHT = 100;
-const HALF_VIEWBOX_WIDTH = VIEWBOX_WIDTH / 2;
-const HALF_VIEWBOX_HEIGHT = VIEWBOX_HEIGHT / 2;
-const StyledSvg = /*#__PURE__*/_styled('svg', {
-  shouldForwardProp: prop => !['active'].includes(prop),
-  target: "e1y1n78x1"
-})(({
-  active
-}) => active ? `
-        animation: spin 0.75s linear infinite;
-
-        @keyframes spin {
-          from {
-            transform: rotate(0deg);
-          }
-          to {
-            transform: rotate(360deg);
-          }
-        }
-      ` : '', ";");
-const Text = /*#__PURE__*/_styled('text', {
-  shouldForwardProp: prop => !['color'].includes(prop),
-  target: "e1y1n78x0"
-})("fill:", ({
-  theme,
-  color
-}) => theme.colors[color]?.backgroundStrong || color, ";font-size:26px;dominant-baseline:middle;text-anchor:middle;");
-
-/**
- * Loader is a circular progress indicator that can be used to indicate that an action is being performed.
- */
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "si0mpz",
-  styles: "transition:stroke-dashoffset 0.5s ease 0s"
-} : {
-  name: "si0mpz",
-  styles: "transition:stroke-dashoffset 0.5s ease 0s",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-const Loader = ({
-  percentage = 20,
-  text,
-  size = 40,
-  strokeWidth = 16,
-  color = 'primary',
-  trailColor = 'neutral',
-  active = false,
-  label = 'Loading'
-}) => {
-  const theme = useTheme();
-  const circleRadius = HALF_VIEWBOX_HEIGHT - strokeWidth / 2;
-  const boundedPercentage = Math.min(Math.max(percentage, 0), 100) / 100;
-  const circleDiameter = Math.PI * 2 * circleRadius;
-  return jsxs(StyledSvg, {
-    active: active,
-    role: "progressbar",
-    "aria-label": label,
-    "aria-valuemin": 0,
-    "aria-valuemax": 100,
-    "aria-valuenow": percentage,
-    "aria-valuetext": `${percentage}%`,
-    viewBox: `0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`,
-    style: {
-      height: typeof size === 'string' ? size : `${size}px`,
-      width: typeof size === 'string' ? size : `${size}px`
-    },
-    children: [jsx("circle", {
-      cx: HALF_VIEWBOX_WIDTH,
-      cy: HALF_VIEWBOX_HEIGHT,
-      r: circleRadius,
-      fill: "none",
-      strokeWidth: strokeWidth,
-      stroke: theme.colors[trailColor]?.border || trailColor
-    }), jsx("circle", {
-      css: _ref,
-      cx: HALF_VIEWBOX_WIDTH,
-      cy: HALF_VIEWBOX_HEIGHT,
-      r: circleRadius,
-      fill: "none",
-      strokeWidth: strokeWidth,
-      strokeDasharray: circleDiameter,
-      strokeDashoffset: (1 - boundedPercentage) * circleDiameter,
-      stroke: theme.colors[color]?.backgroundStrong || color,
-      strokeLinecap: "round"
-    }), text ? jsx(Text, {
-      color: color,
-      x: HALF_VIEWBOX_WIDTH,
-      y: HALF_VIEWBOX_HEIGHT,
-      children: text
-    }) : null]
-  });
-};
-
-export { Loader };

package/dist/src/components/Menu/Item.js

@@ -1,112 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { forwardRef } from 'react';
-import { Tooltip } from '../Tooltip/index.js';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const itemCoreStyle = ({
-  theme,
-  borderless,
-  sentiment,
-  disabled
-}) => `
-  display: inline-block;
-  font-size: ${theme.typography.bodySmall.fontSize};
-  line-height: ${theme.typography.bodySmall.lineHeight};
-  font-weight: inherit;
-  padding: ${`${theme.space['0.5']} ${theme.space['1']}`};
-  border: none;
-  ${borderless ? '' : `border-bottom: 1px solid ${theme.colors.neutral.border};`}
-  cursor: pointer;
-  min-width: 110px;
-
-  color: ${theme.colors[sentiment][disabled ? 'textDisabled' : 'text']};
-  svg {
-    fill: ${theme.colors[sentiment][disabled ? 'textDisabled' : 'text']};
-  }
-
-  ${disabled ? `
-        cursor: not-allowed;
-      ` : `
-          &:hover,
-          &:focus {
-            color: ${theme.colors[sentiment].textHover};
-            svg {
-              fill: ${theme.colors[sentiment].textHover};
-            }
-          }`}
-  `;
-const StyledItem = /*#__PURE__*/_styled('button', {
-  shouldForwardProp: prop => !['borderless', 'sentiment'].includes(prop),
-  target: "e10f690h1"
-})(({
-  theme,
-  borderless,
-  sentiment,
-  disabled
-}) => itemCoreStyle({
-  theme,
-  borderless,
-  sentiment,
-  disabled
-}), " background:none;");
-const StyledLinkItem = /*#__PURE__*/_styled('a', {
-  shouldForwardProp: prop => !['borderless', 'sentiment'].includes(prop),
-  target: "e10f690h0"
-})(({
-  theme,
-  borderless,
-  sentiment,
-  disabled
-}) => itemCoreStyle({
-  theme,
-  borderless,
-  sentiment,
-  disabled
-}), " text-decoration:none;&:focus{text-decoration:none;}");
-const Item = /*#__PURE__*/forwardRef(({
-  borderless = false,
-  disabled = false,
-  onClick,
-  sentiment = 'neutral',
-  href,
-  children,
-  tooltip,
-  className,
-  'data-testid': dataTestId
-}, ref) => {
-  if (href && !disabled) {
-    return jsx(Tooltip, {
-      text: tooltip,
-      children: jsx(StyledLinkItem, {
-        borderless: true,
-        href: href,
-        ref: ref,
-        onClick: disabled ? undefined : onClick,
-        role: "menuitem",
-        disabled: disabled,
-        sentiment: sentiment,
-        className: className,
-        "data-testid": dataTestId,
-        children: children
-      })
-    });
-  }
-  return jsx(Tooltip, {
-    text: tooltip,
-    children: jsx(StyledItem, {
-      type: "button",
-      ref: ref,
-      role: "menuitem",
-      disabled: disabled,
-      onClick: onClick,
-      borderless: borderless,
-      sentiment: sentiment,
-      className: className,
-      "data-testid": dataTestId,
-      children: children
-    })
-  });
-});
-var Item$1 = Item;
-
-export { Item$1 as default };