@ultraviolet/ui 1.41.1 → 1.42.0

package/dist/index.d.ts

@@ -1780,7 +1780,7 @@ type ColumnProps$1 = Pick<ComponentProps<typeof HeaderCell$1>, 'isOrdered' | 'on
     info?: string;
 };
 type ListProps = {
-    expandButton?: boolean;
+    expandable?: boolean;
     selectable?: boolean;
     columns: ColumnProps$1[];
     children: ReactNode;
@@ -2879,13 +2879,18 @@ type TagListProps = {
      * This property define the title of the Popover, when some tags are hidden because of the threshold.
      */
     popoverTitle: string;
+    /**
+     * The popover will be placed automatically by default. You can also specify the placement of the popover through
+     * this property.
+     */
+    popoverPlacement?: ComponentProps<typeof Popover>['placement'];
     className?: string;
     'data-testid'?: string;
 } & Pick<ComponentProps<typeof Tag>, 'copiable' | 'copyText' | 'copiedText'>;
 /**
  * This component is used to display a list of tags with a threshold and a popover when there are too many tags.
  */
-declare const TagList: ({ maxLength, tags, threshold, multiline, popoverTitle, copiable, copyText, copiedText, className, "data-testid": dataTestId, }: TagListProps) => _emotion_react_jsx_runtime.JSX.Element | null;
+declare const TagList: ({ maxLength, tags, threshold, multiline, popoverTitle, popoverPlacement, copiable, copyText, copiedText, className, "data-testid": dataTestId, }: TagListProps) => _emotion_react_jsx_runtime.JSX.Element | null;
 
 declare const PROMINENCES: {
     default: string;

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

@@ -16,7 +16,13 @@ const ExpandableWrapper = /*#__PURE__*/_styled("div", {
   theme
 }) => theme.space['2'], ";padding:", ({
   theme
-}) => theme.space['2'], ";cursor:auto;");
+}) => 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"
@@ -58,7 +64,7 @@ const StyledRow = /*#__PURE__*/_styled('div', {
   theme
 }) => theme.colors.neutral.backgroundDisabled, ";color:", ({
   theme
-}) => theme.colors.neutral.textDisabled, ";cursor:not-allowed;}& [data-visibility='hover']{opacity:0;}&:hover:not([aria-disabled='true']) [data-visibility='hover']{opacity:1;}");
+}) => theme.colors.neutral.textDisabled, ";cursor:not-allowed;}");
 const StyledCheckboxContainer = /*#__PURE__*/_styled("div", {
   target: "ei4uyz10"
 })(process.env.NODE_ENV === "production" ? {
@@ -80,7 +86,6 @@ const Row = /*#__PURE__*/forwardRef(({
   'data-testid': dataTestid
 }, ref) => {
   const {
-    allRowSelectValue,
     selectable,
     registerExpandableRow,
     expandedRowIds,
@@ -115,27 +120,27 @@ const Row = /*#__PURE__*/forwardRef(({
       expandRow(id);
     }
   };
+  const canClickRowToExpand = !disabled && !!expandable && !expandButton;
   return jsxs(StyledRow, {
     className: className,
     ref: ref,
-    role: !disabled && expandable ? 'button row' : 'row',
-    onClick: !disabled && expandable ? toggleRowExpand : undefined,
-    onKeyDown: !disabled && expandable ? event => {
+    role: canClickRowToExpand ? 'button row' : 'row',
+    onClick: canClickRowToExpand ? toggleRowExpand : undefined,
+    onKeyDown: canClickRowToExpand ? event => {
       if (event.key === ' ') {
         toggleRowExpand();
         event.preventDefault();
       }
     } : undefined,
-    tabIndex: !disabled && expandable ? 0 : -1,
+    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: true,
+      preventClick: canClickRowToExpand,
       children: jsx(StyledCheckboxContainer, {
-        "data-visibility": allRowSelectValue === false ? 'hover' : undefined,
         children: jsx(Tooltip, {
           text: typeof selectDisabled === 'string' ? selectDisabled : undefined,
           children: jsx(Checkbox, {
@@ -160,18 +165,18 @@ const Row = /*#__PURE__*/forwardRef(({
         disabled: disabled || !expandable,
         icon: expandedRowIds[id] ? 'arrow-up' : 'arrow-down',
         onClick: toggleRowExpand,
-        size: "xsmall",
+        size: "small",
         sentiment: "neutral",
         variant: "ghost"
       })
     }) : null, children, expandable && expandedRowIds[id] ? jsx(ExpandableWrapper, {
       "data-expandable-content": true,
-      onClick: e => {
+      onClick: canClickRowToExpand ? e => {
         e.stopPropagation();
-      },
-      onKeyDown: e => {
+      } : undefined,
+      onKeyDown: canClickRowToExpand ? e => {
         e.stopPropagation();
-      },
+      } : undefined,
       children: expandable
     }) : null]
   });

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

@@ -1,4 +1,4 @@
 const SELECTABLE_CHECKBOX_SIZE = 24;
-const EXPAND_BUTTON_SIZE = 24;
+const EXPANDABLE_COLUMN_SIZE = 24;
 
-export { EXPAND_BUTTON_SIZE, SELECTABLE_CHECKBOX_SIZE };
+export { EXPANDABLE_COLUMN_SIZE, SELECTABLE_CHECKBOX_SIZE };

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

@@ -8,7 +8,7 @@ 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, EXPAND_BUTTON_SIZE } from './constants.js';
+import { SELECTABLE_CHECKBOX_SIZE, EXPANDABLE_COLUMN_SIZE } from './constants.js';
 import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 
 const StyledList = /*#__PURE__*/_styled('div', {
@@ -20,19 +20,19 @@ const StyledList = /*#__PURE__*/_styled('div', {
   template
 }) => template, ";align-items:center;}");
 const BaseList = /*#__PURE__*/forwardRef(({
-  expandButton = false,
+  expandable = false,
   selectable = false,
   columns,
   children,
   loading,
   autoCollapse = false
 }, ref) => {
-  const computeTemplate = `${selectable ? `${SELECTABLE_CHECKBOX_SIZE}px ` : ''}${expandButton ? `${EXPAND_BUTTON_SIZE}px ` : ''}${columns.map(({
+  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: expandButton,
+    expandButton: expandable,
     autoCollapse: autoCollapse,
     children: jsxs(StyledList, {
       ref: ref,

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

@@ -45,7 +45,6 @@ const Row = ({
   'data-testid': dataTestid
 }) => {
   const {
-    allRowSelectValue,
     selectable,
     registerSelectableRow,
     selectedRowIds,
@@ -65,7 +64,6 @@ const Row = ({
     highlightAnimation: highlightAnimation,
     children: [selectable ? jsx(Cell, {
       children: jsx(StyledCheckboxContainer, {
-        "data-visibility": allRowSelectValue === false ? 'hover' : undefined,
         children: jsx(Tooltip, {
           text: typeof selectDisabled === 'string' ? selectDisabled : undefined,
           children: jsx(Checkbox, {

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

@@ -41,6 +41,7 @@ const TagList = ({
   threshold = 1,
   multiline = false,
   popoverTitle,
+  popoverPlacement,
   copiable,
   copyText,
   copiedText,
@@ -79,6 +80,7 @@ const TagList = ({
       visible: isVisible,
       size: "small",
       onClose: () => setIsVisible(false),
+      placement: popoverPlacement,
       content: jsx(StyledTagContainer, {
         multiline: true,
         children: tags.slice(visibleTagsCount).map((tag, index) => jsx(Tag

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.41.1",
+  "version": "1.42.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -67,7 +67,7 @@
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.9.0",
-    "@ultraviolet/icons": "2.10.0"
+    "@ultraviolet/icons": "2.10.1"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",