@ultraviolet/ui 1.28.0 → 1.29.0

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

@@ -7,70 +7,54 @@ import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 
 const StyledIconContainer = /*#__PURE__*/_styled(Stack, {
   target: "ev6jkq82"
-})("color:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.textWeak;
-}, ";&[aria-disabled='true']{cursor:not-allowed;}&[role*='button']{cursor:pointer;user-select:none;}");
-const SortIcon = _ref2 => {
-  let {
-    order
-  } = _ref2;
-  return 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"
-    })]
-  });
-};
+})("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"
-})(_ref3 => {
-  let {
-    width,
-    maxWidth,
-    minWidth
-  } = _ref3;
-  return `
+})(({
+  width,
+  maxWidth,
+  minWidth
+}) => `
     ${width ? `width: ${width};` : ''}
     ${maxWidth ? `max-width: ${maxWidth};` : ''}
     ${minWidth ? `min-width: ${minWidth};` : ''}
-  `;
-}, " padding:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.space['1'];
-}, ";&[role*='button']{cursor:pointer;user-select:none;}");
+  `, " 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:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.space['1'];
-}, ";");
-const HeaderCell = _ref6 => {
-  let {
-    children,
-    className,
-    isOrdered,
-    onOrder,
-    orderDirection,
-    width,
-    maxWidth,
-    minWidth,
-    info
-  } = _ref6;
+})("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';

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

@@ -3,11 +3,10 @@ import { HeaderCell } from './HeaderCell.js';
 import { useTableContext } from './TableContext.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
-const HeaderRow = _ref => {
-  let {
-    children,
-    hasSelectAllColumn
-  } = _ref;
+const HeaderRow = ({
+  children,
+  hasSelectAllColumn
+}) => {
   const {
     allRowSelectValue,
     selectAll,

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

@@ -8,20 +8,16 @@ import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
 const StyledCheckboxContainer = /*#__PURE__*/_styled("div", {
   target: "e1qvrbgq0"
-})("display:flex;background:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.background;
-}, ";");
-const Row = _ref2 => {
-  let {
-    children,
-    className,
-    id,
-    selectDisabled,
-    'data-testid': dataTestid
-  } = _ref2;
+})("display:flex;background:", ({
+  theme
+}) => theme.colors.neutral.background, ";");
+const Row = ({
+  children,
+  className,
+  id,
+  selectDisabled,
+  'data-testid': dataTestid
+}) => {
   const {
     allRowSelectValue,
     selectable,

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

@@ -7,12 +7,9 @@ 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 ", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['1'];
-}, ";");
+})("display:flex;align-items:center;padding:0 ", ({
+  theme
+}) => theme.space['1'], ";");
 const FlexDiv = /*#__PURE__*/_styled("div", {
   target: "esnuyll0"
 })(process.env.NODE_ENV === "production" ? {
@@ -23,13 +20,12 @@ const FlexDiv = /*#__PURE__*/_styled("div", {
   styles: "flex:1",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-function SelectBar(_ref2) {
-  let {
-    children,
-    data,
-    idKey,
-    className
-  } = _ref2;
+function SelectBar({
+  children,
+  data,
+  idKey,
+  className
+}) {
   const {
     selectedRowIds,
     unselectAll

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

@@ -24,12 +24,11 @@ const StyledSkeleton = /*#__PURE__*/_styled(Skeleton, {
   styles: "width:80%;max-width:100%",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-const SkeletonRows = _ref => {
-  let {
-    selectable,
-    rows,
-    cols
-  } = _ref;
+const SkeletonRows = ({
+  selectable,
+  rows,
+  cols
+}) => {
   const rowArray = Array.from({
     length: rows
   }, (_, index) => index);

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

@@ -2,13 +2,12 @@ import { useContext, createContext, useState, useCallback, useMemo } from 'react
 import { jsx } from '@emotion/react/jsx-runtime';
 
 const TableContext = /*#__PURE__*/createContext(undefined);
-const TableProvider = _ref => {
-  let {
-    children,
-    selectable,
-    bordered,
-    stripped
-  } = _ref;
+const TableProvider = ({
+  children,
+  selectable,
+  bordered,
+  stripped
+}) => {
   const [selectedRowIds, setSelectedRowIds] = useState({});
   const registerSelectableRow = useCallback(rowId => {
     setSelectedRowIds(current => ({

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

@@ -14,13 +14,11 @@ 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;", _ref => {
-  let {
-    theme,
-    stripped,
-    bordered
-  } = _ref;
-  return `
+})("width:100%;box-sizing:content-box;border-collapse:collapse;", ({
+  theme,
+  stripped,
+  bordered
+}) => `
   ${stripped ? `& tbody tr:nth-of-type(even) {
     background: ${theme.colors.neutral.backgroundWeak};
   }` : ''}
@@ -28,51 +26,47 @@ const StyledTable = /*#__PURE__*/_styled('table', {
   ${bordered ? `& tbody tr {
     border-bottom: 1px solid ${theme.colors.neutral.borderWeak};
   }` : ''}
-  `;
-}, ";");
-const BaseTable = /*#__PURE__*/forwardRef((_ref2, ref) => {
-  let {
-    selectable = false,
-    children,
-    columns,
-    loading,
-    bordered = false,
-    stripped = false
-  } = _ref2;
-  return jsx(TableProvider, {
-    selectable: selectable,
+  `, ";");
+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: 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]
-    })
-  });
-});
+    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.

package/dist/src/components/Tabs/Tab.js

@@ -9,17 +9,11 @@ import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 
 const StyledBadge = /*#__PURE__*/_styled(Badge, {
   target: "e1hzf7cr4"
-})("padding:0 ", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['1'];
-}, ";margin-left:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.space['1'];
-}, ";");
+})("padding:0 ", ({
+  theme
+}) => theme.space['1'], ";margin-left:", ({
+  theme
+}) => theme.space['1'], ";");
 const StyledText = /*#__PURE__*/_styled(Text, {
   target: "e1hzf7cr3"
 })();
@@ -28,115 +22,60 @@ const StyledTooltip = /*#__PURE__*/_styled(Tooltip, {
 })();
 const BadgeContainer = /*#__PURE__*/_styled("span", {
   target: "e1hzf7cr1"
-})("margin-left:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.space['1'];
-}, ";display:flex;");
+})("margin-left:", ({
+  theme
+}) => theme.space['1'], ";display:flex;");
 const StyledTabButton = /*#__PURE__*/_styled('button', {
   target: "e1hzf7cr0"
-})("display:flex;flex-direction:row;padding:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return `${theme.space['1']} ${theme.space['2']}`;
-}, ";cursor:pointer;justify-content:center;align-items:baseline;white-space:nowrap;color:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return 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:", _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.colors.neutral.border;
-}, ";outline:none;font-size:", _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.typography.bodyStrong.fontSize;
-}, ";font-family:", _ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.typography.bodyStrong.fontFamily;
-}, ";font-weight:", _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.typography.bodyStrong.weight;
-}, ";letter-spacing:", _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.typography.bodyStrong.letterSpacing;
-}, ";line-height:", _ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.typography.bodyStrong.lineHeight;
-}, ";&:hover,&:active,&:focus{text-decoration:none;outline:none;}&:focus-visible{outline:auto;}&[aria-selected='true']{color:", _ref12 => {
-  let {
-    theme
-  } = _ref12;
-  return theme.colors.primary.text;
-}, ";border-bottom-color:", _ref13 => {
-  let {
-    theme
-  } = _ref13;
-  return theme.colors.primary.border;
-}, ";", StyledText, "{color:", _ref14 => {
-  let {
-    theme
-  } = _ref14;
-  return theme.colors.primary.text;
-}, ";}}&[aria-disabled='false']:not(:disabled){&:hover,&:focus,&:active{outline:none;color:", _ref15 => {
-  let {
-    theme
-  } = _ref15;
-  return theme.colors.primary.text;
-}, ";border-bottom-color:", _ref16 => {
-  let {
-    theme
-  } = _ref16;
-  return theme.colors.primary.border;
-}, ";&[data-is-selected='false']{", StyledBadge, "{background-color:", _ref17 => {
-  let {
-    theme
-  } = _ref17;
-  return theme.colors.primary.background;
-}, ";border-color:", _ref18 => {
-  let {
-    theme
-  } = _ref18;
-  return theme.colors.primary.background;
-}, ";color:", _ref19 => {
-  let {
-    theme
-  } = _ref19;
-  return theme.colors.primary.text;
-}, ";}", StyledText, "{color:", _ref20 => {
-  let {
-    theme
-  } = _ref20;
-  return theme.colors.primary.text;
-}, ";}}}}&[aria-disabled='true'],&:disabled{cursor:not-allowed;filter:grayscale(1) opacity(50%);}");
-const Tab = /*#__PURE__*/forwardRef((_ref21, ref) => {
-  let {
-    as,
-    badge,
-    children,
-    className,
-    counter,
-    disabled = false,
-    onClick,
-    onKeyDown,
-    subtitle,
-    tooltip,
-    value,
-    ...props
-  } = _ref21;
+})("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 = /*#__PURE__*/forwardRef(({
+  as,
+  badge,
+  children,
+  className,
+  counter,
+  disabled = false,
+  onClick,
+  onKeyDown,
+  subtitle,
+  tooltip,
+  value,
+  ...props
+}, ref) => {
   const {
     selected,
     onChange

package/dist/src/components/Tabs/TabMenu.js

@@ -11,12 +11,9 @@ const ArrowIcon = /*#__PURE__*/_styled(Icon, {
 })();
 const StyledMenu = /*#__PURE__*/_styled(StyledTabButton, {
   target: "edb1sh91"
-})(ArrowIcon, "{color:inherit;margin-left:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['1'];
-}, ";transition:300ms transform ease-out;}&[aria-expanded='true'] ", ArrowIcon, "{transform:rotate(-180deg);}");
+})(ArrowIcon, "{color:inherit;margin-left:", ({
+  theme
+}) => theme.space['1'], ";transition:300ms transform ease-out;}&[aria-expanded='true'] ", ArrowIcon, "{transform:rotate(-180deg);}");
 
 // This will wrap and give the positioning to the popup div that is added onto the disclosure
 const StyledPositioningWrapper = /*#__PURE__*/_styled("div", {
@@ -29,37 +26,34 @@ const StyledPositioningWrapper = /*#__PURE__*/_styled("div", {
   styles: "display:flex;position:sticky;top:0;bottom:0;right:0",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-const TabMenu = /*#__PURE__*/forwardRef((_ref2, ref) => {
-  let {
-    children,
-    disclosure,
-    visible,
-    id,
-    disabled,
-    className,
-    ...props
-  } = _ref2;
-  return jsx(StyledPositioningWrapper, {
-    children: jsx(MenuV2, {
-      visible: visible,
-      id: id,
-      ref: ref,
-      portalTarget: document.body // We need to attach it to the body to avoid overflow issues
-      ,
-      disclosure: jsxs(StyledMenu, {
-        role: "tab",
-        "aria-disabled": disabled ?? 'false',
-        disabled: disabled,
-        "aria-haspopup": "menu",
-        className: className,
-        ...props,
-        children: [disclosure, jsx(ArrowIcon, {
-          name: "arrow-down"
-        })]
-      }),
-      children: children
-    })
-  });
-});
+const TabMenu = /*#__PURE__*/forwardRef(({
+  children,
+  disclosure,
+  visible,
+  id,
+  disabled,
+  className,
+  ...props
+}, ref) => jsx(StyledPositioningWrapper, {
+  children: jsx(MenuV2, {
+    visible: visible,
+    id: id,
+    ref: ref,
+    portalTarget: document.body // We need to attach it to the body to avoid overflow issues
+    ,
+    disclosure: jsxs(StyledMenu, {
+      role: "tab",
+      "aria-disabled": disabled ?? 'false',
+      disabled: disabled,
+      "aria-haspopup": "menu",
+      className: className,
+      ...props,
+      children: [disclosure, jsx(ArrowIcon, {
+        name: "arrow-down"
+      })]
+    }),
+    children: children
+  })
+}));
 
 export { TabMenu };

package/dist/src/components/Tabs/TabMenuItem.js

@@ -6,19 +6,15 @@ import { jsx } from '@emotion/react/jsx-runtime';
 
 const StyledMenuItem = /*#__PURE__*/_styled(Item, {
   target: "eeet93f0"
-})("&[aria-selected='true']{color:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.primary.text;
-}, ";}");
-const TabMenuItem = _ref2 => {
-  let {
-    value,
-    children,
-    onClick,
-    ...props
-  } = _ref2;
+})("&[aria-selected='true']{color:", ({
+  theme
+}) => theme.colors.primary.text, ";}");
+const TabMenuItem = ({
+  value,
+  children,
+  onClick,
+  ...props
+}) => {
   const {
     selected,
     onChange