@soul-refiner/design-system 0.2.97 → 0.2.99

package/dist/components/actions/dropdown/dropdown.d.ts

@@ -19,9 +19,10 @@ export interface DropdownProps extends NativeProps, React.PropsWithChildren {
     additionalOptions?: Omit<DropdownOptionProps, 'selected' | 'onClick'>[];
     additionalOnChange?: (value: string) => void;
     defaultAdditionalValue?: string;
+    useFullWidth?: boolean;
 }
 declare const Dropdown: {
-    ({ checkbox, children, closeOnChange, closeOnBlur, defaultValue, disabled, hasArrow, maintainState, multiple, offset, onChange, open: openDirection, options, sx, trigger, containerSx, additionalOptions, additionalOnChange, defaultAdditionalValue, ...rest }: DropdownProps): React.JSX.Element;
+    ({ checkbox, children, closeOnChange, closeOnBlur, defaultValue, disabled, hasArrow, maintainState, multiple, offset, onChange, open: openDirection, options, sx, trigger, containerSx, additionalOptions, additionalOnChange, defaultAdditionalValue, useFullWidth, ...rest }: DropdownProps): React.JSX.Element;
     Option: {
         ({ checkbox, disabled, icon, label, onClick, selected, sublabel, sx, value, color, }: DropdownOptionProps): React.JSX.Element;
         displayName: string;

package/dist/components/actions/dropdown/dropdown.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Box, Checkbox, P } from '../../';
-const Dropdown = ({ checkbox, children, closeOnChange = true, closeOnBlur = true, defaultValue = '', disabled = false, hasArrow, maintainState = true, multiple, offset = [0, 16], onChange, open: openDirection = 'right', options, sx, trigger, containerSx, additionalOptions, additionalOnChange, defaultAdditionalValue, ...rest }) => {
+const Dropdown = ({ checkbox, children, closeOnChange = true, closeOnBlur = true, defaultValue = '', disabled = false, hasArrow, maintainState = true, multiple, offset = [0, 16], onChange, open: openDirection = 'right', options, sx, trigger, containerSx, additionalOptions, additionalOnChange, defaultAdditionalValue, useFullWidth = false, ...rest }) => {
     const id = React.useId();
     const wrapperRef = React.useRef(null);
     const optionsRef = React.useRef(null);
@@ -104,7 +104,7 @@ const Dropdown = ({ checkbox, children, closeOnChange = true, closeOnBlur = true
                 trigger.type?.name !== 'Button')
             ? { onClick: handleOpen }
             : { isDropdownOpen: open, onClick: handleOpen }),
-        open && (React.createElement(Container, { "$hasArrow": hasArrow, "$offset": offset, "$openDirection": openDirection, ref: optionsRef, "$sx": containerSx },
+        open && (React.createElement(Container, { "$hasArrow": hasArrow, "$offset": offset, "$openDirection": openDirection, ref: optionsRef, "$sx": containerSx, "$useFullWidth": useFullWidth },
             React.createElement("div", { style: { display: 'flex' } },
                 React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } }, dropdownOptions),
                 !!additionalOptions?.length && (React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } }, additionalOptions.map((additionalOption) => (React.createElement(Option, { key: additionalOption.value, onClick: handleAdditionalChange, selected: additionalSelected === additionalOption.value, label: additionalOption.label, value: additionalOption.value }))))))))));
@@ -119,7 +119,7 @@ const Container = styled.div `
   z-index: 1;
   background-color: var(--color-white);
   position: absolute;
-  width: max-content;
+  ${({ $useFullWidth }) => $useFullWidth ? 'width: 100%;' : 'width: max-content;'}
   z-index: 100;
   outline: none;
   cursor: pointer;

package/dist/components/iconography/avatar/avatar.d.ts

@@ -14,13 +14,14 @@ export interface AvatarProps extends NativeProps {
     sx?: string;
     textPosition?: 'left' | 'right';
     title?: React.ReactNode;
+    tooltipContent?: React.ReactElement;
 }
 /**
  *
  * Avatar
  */
 declare const Avatar: {
-    ({ as, href, image, size, status, subtitle, sx, textPosition, title, ...rest }: AvatarProps): React.JSX.Element;
+    ({ as, href, image, size, status, subtitle, sx, textPosition, title, tooltipContent, ...rest }: AvatarProps): React.JSX.Element;
     displayName: string;
     Group: {
         ({ children, numDisplayed, total }: AvatarGroupProps): React.JSX.Element;

package/dist/components/iconography/avatar/avatar.js

@@ -57,10 +57,16 @@ const iconOffsetY = {
  *
  * Avatar
  */
-const Avatar = ({ as = 'button', href, image, size = 64, status, subtitle, sx, textPosition = 'left', title, ...rest }) => {
+const Avatar = ({ as = 'button', href, image, size = 64, status, subtitle, sx, textPosition = 'left', title, tooltipContent, ...rest }) => {
     const [displayDefault, setDisplayDefault] = React.useState(false);
     const Icon = iconReference?.[status ?? 'none'];
-    return (React.createElement(Box, { "$align": "center", "$gap": 18, ...rest, sx: sx },
+    return (React.createElement(Box, { "$align": "center", "$gap": 18, sx: `
+        position: relative; 
+        &:hover > div:nth-of-type(2) {
+          display: flex;
+        }
+        ${sx}
+      `, ...rest },
         React.createElement(Container, { as: as, "$size": size, href: href },
             !displayDefault && (React.createElement("img", { src: image ?? '', onError: () => setDisplayDefault(true) })),
             displayDefault && React.createElement(Default, null),
@@ -68,7 +74,8 @@ const Avatar = ({ as = 'button', href, image, size = 64, status, subtitle, sx, t
                 React.createElement(Icon, null))),
         (title || subtitle) && (React.createElement(TextContainer, { "$textPosition": textPosition },
             title && (React.createElement(H, { as: "h3", "$bold": true, "$color": "grey-2", "$textClampLines": 1, sx: "font-size: 26px;" }, title)),
-            subtitle && (React.createElement(P, { "$color": "grey-4", "$textClampLines": 1 }, subtitle))))));
+            subtitle && (React.createElement(P, { "$color": "grey-4", "$textClampLines": 1 }, subtitle)))),
+        tooltipContent && React.createElement(TooltipContainer, null, tooltipContent)));
 };
 Avatar.displayName = 'Avatar';
 const Container = styled.div `
@@ -107,6 +114,15 @@ const TextContainer = styled.div `
   gap: 4px;
   order: ${({ $textPosition }) => ($textPosition === 'left' ? -1 : 1)};
 `;
+const TooltipContainer = styled.div `
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: -50%;
+  background-color: var(--color-white);
+  border-radius: 24px;
+  box-shadow: var(--elevation-2);
+`;
 const Group = ({ children, numDisplayed, total }) => {
     let size = 0;
     // filter out ReactNodes and ReactElements that are not Avatars

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.97",
+  "version": "0.2.99",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {