@ssa-ui-kit/core 2.28.3 → 2.29.0

package/dist/components/Dropdown/Dropdown.d.ts

@@ -1,4 +1,4 @@
 import { DropdownOptionProps } from '../DropdownOptions/types';
 import { DropdownProps } from './types';
-declare const Dropdown: <T extends DropdownOptionProps>({ selectedItem, isDisabled, isOpen: isInitOpen, children, onChange: handleChange, className, placeholder, }: DropdownProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Dropdown: <T extends DropdownOptionProps>({ selectedItem, isDisabled, isOpen: isInitOpen, children, onChange: handleChange, className, placeholder, dropdownProps: componentProps, }: DropdownProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Dropdown;

package/dist/components/Dropdown/types.d.ts

@@ -1,5 +1,8 @@
+import React from 'react';
 import { DropdownOptionProps } from '../DropdownOptions';
 import { CommonProps } from '../../types/emotion';
+import { IconProps } from '../Icon/types';
+export type ControlledButtonProps = 'onClick' | 'onFocus' | 'disabled' | 'type' | 'role' | 'aria-expanded' | 'aria-haspopup' | 'aria-labelledby' | 'aria-controls' | 'children';
 export interface DropdownProps<P extends DropdownOptionProps> extends CommonProps {
     selectedItem?: P;
     onChange?: (item: P) => void;
@@ -8,6 +11,11 @@ export interface DropdownProps<P extends DropdownOptionProps> extends CommonProp
     children?: React.ReactNode;
     className?: string;
     isOpen?: boolean;
+    dropdownProps?: {
+        base?: React.HTMLAttributes<HTMLDivElement>;
+        toggleButton?: Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, ControlledButtonProps>;
+        toggleButtonArrow?: Omit<IconProps, 'name' | 'size'>;
+    };
 }
 export interface DropdownContextType {
     onChange: (item?: string) => void;

package/dist/components/DropdownArrow/DropdownArrow.d.ts

@@ -3,7 +3,8 @@ export declare const DropdownArrowBase: import("@emotion/styled").StyledComponen
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & CommonProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-declare const DropdownArrow: ({ isUp }: {
+interface DropdownArrowProps extends CommonProps {
     isUp: boolean;
-}) => import("@emotion/react/jsx-runtime").JSX.Element;
+}
+declare const DropdownArrow: ({ isUp, ...restProps }: DropdownArrowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default DropdownArrow;

package/dist/components/DropdownToggle/DropdownToggle.d.ts

@@ -2,6 +2,6 @@ import { DropdownToggleProps } from './types';
 export declare const DropdownToggleBase: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & Pick<DropdownToggleProps, "colors" | "disabled" | "isOpen" | "isMultiple" | "selectedCount">, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-declare const DropdownToggle: ({ onClick, onFocus, isOpen, isMultiple, selectedCount, disabled, children, ariaLabelledby, ariaControls, colors, className, }: DropdownToggleProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+} & Pick<DropdownToggleProps, "colors" | "disabled" | "isMultiple" | "isOpen" | "selectedCount">, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+declare const DropdownToggle: ({ onClick, onFocus, isOpen, isMultiple, selectedCount, disabled, children, ariaLabelledby, ariaControls, colors, className, ...restProps }: DropdownToggleProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default DropdownToggle;

package/dist/components/DropdownToggle/types.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Theme } from '@emotion/react';
 import { CommonProps } from '../../types/emotion';
-export interface DropdownToggleProps extends CommonProps {
+import { ControlledButtonProps } from '../Dropdown/types';
+export interface DropdownToggleProps extends CommonProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, ControlledButtonProps> {
     onClick: (e: React.MouseEvent<HTMLElement>) => void;
     onFocus: (e: React.FocusEvent<HTMLButtonElement, Element>) => void;
     isOpen: boolean;

package/dist/components/UserProfile/UserProfile.d.ts

@@ -1,2 +1,2 @@
 import { UserProfileProps } from './types';
-export declare const UserProfile: ({ name, email, trigger, onClick, logOutText, className, }: UserProfileProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const UserProfile: ({ name, email, trigger, onClick, logOutText, className, additionalInfo, customContent, }: UserProfileProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/UserProfile/styles.d.ts

@@ -4,3 +4,29 @@ export declare const ContentWrapper: (theme: Theme) => import("@emotion/react").
 export declare const UserInfo: import("@emotion/react").SerializedStyles;
 export declare const LogoutWrapper: (theme: Theme) => import("@emotion/react").SerializedStyles;
 export declare const CustomButton: import("@emotion/react").SerializedStyles;
+export declare const AdditionalInfoWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: Theme;
+    as?: React.ElementType;
+} & {
+    avatarSize?: number;
+    direction?: string;
+    alignItems?: string;
+    fade?: boolean;
+    fadeDelay?: number;
+    isVisible?: boolean;
+} & import("../..").CommonProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: Theme;
+}, {}, {}>;
+export declare const CustomContentWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: Theme;
+    as?: React.ElementType;
+} & {
+    avatarSize?: number;
+    direction?: string;
+    alignItems?: string;
+    fade?: boolean;
+    fadeDelay?: number;
+    isVisible?: boolean;
+} & import("../..").CommonProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: Theme;
+}, {}, {}>;

package/dist/components/UserProfile/types.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 export interface UserProfileProps {
     name: string;
     email: string;
@@ -5,4 +6,6 @@ export interface UserProfileProps {
     onClick: () => void;
     logOutText?: string;
     className?: string;
+    additionalInfo?: ReactNode[];
+    customContent?: ReactNode;
 }

package/dist/index.js

@@ -4645,8 +4645,10 @@ const DropdownToggle = ({
   ariaLabelledby,
   ariaControls,
   colors,
-  className
+  className,
+  ...restProps
 }) => (0,jsx_runtime_namespaceObject.jsx)(DropdownToggleBase, {
+  ...restProps,
   className: className,
   colors: colors,
   isOpen: isOpen,
@@ -4682,9 +4684,11 @@ const DropdownArrowBase = /*#__PURE__*/base_default()("div",  true ? {
   styles: "display:flex;align-items:center"
 } : 0);
 const DropdownArrow = ({
-  isUp
+  isUp,
+  ...restProps
 }) => (0,jsx_runtime_namespaceObject.jsx)(DropdownArrowBase, {
   children: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+    ...restProps,
     name: `carrot-${isUp ? 'up' : 'down'}`,
     size: 12
   })
@@ -4831,7 +4835,8 @@ const Dropdown = ({
   children,
   onChange: handleChange,
   className,
-  placeholder = 'Select something'
+  placeholder = 'Select something',
+  dropdownProps: componentProps
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
   const dropdownRef = (0,external_react_namespaceObject.useRef)(null);
@@ -4890,9 +4895,11 @@ const Dropdown = ({
   return (0,jsx_runtime_namespaceObject.jsx)(Dropdown_context.Provider, {
     value: contextValue,
     children: (0,jsx_runtime_namespaceObject.jsxs)(DropdownBase, {
+      ...componentProps?.base,
       ref: dropdownRef,
       "data-testid": "dropdown",
       children: [(0,jsx_runtime_namespaceObject.jsxs)(DropdownToggle_DropdownToggle, {
+        ...componentProps?.toggleButton,
         className: className,
         isOpen: isOpen,
         disabled: isDisabled,
@@ -4902,6 +4909,7 @@ const Dropdown = ({
         ariaLabelledby: `dropdown-label-${dropdownId}`,
         ariaControls: `dropdown-popup-${dropdownId}`,
         children: [value, (0,jsx_runtime_namespaceObject.jsx)(DropdownArrow_DropdownArrow, {
+          ...componentProps?.toggleButtonArrow,
           isUp: isOpen
         })]
       }), isOpen ? (0,jsx_runtime_namespaceObject.jsx)(DropdownOptions_DropdownOptions, {
@@ -19738,22 +19746,36 @@ const highlightInputMatch = (item, keyword) => {
 
 
 ;// ./src/components/UserProfile/styles.ts
+
 function UserProfile_styles_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 styles_ResetBtnStyles =  true ? {
   name: "2hrei",
   styles: "padding:0;height:auto;background:none;&:focus,&:hover{border:none;background:none;box-shadow:none;&::before{border:none;}}"
 } : 0;
-const styles_ContentWrapper = theme => /*#__PURE__*/(0,react_namespaceObject.css)("width:224px;background:", theme.colors.greyPopoverLight, ";border-radius:20px;box-shadow:0px 4px 15px 0px ", theme.colors.black25, ";" + ( true ? "" : 0),  true ? "" : 0);
+const styles_ContentWrapper = theme => /*#__PURE__*/(0,react_namespaceObject.css)("width:224px;background:", theme.colors.greyPopoverLight, ";border-radius:20px;box-shadow:0 4px 15px 0 ", theme.colors.black25, ";" + ( true ? "" : 0),  true ? "" : 0);
 const UserInfo =  true ? {
   name: "fwy071",
   styles: "gap:2px;width:100%;padding:10px"
 } : 0;
-const LogoutWrapper = theme => /*#__PURE__*/(0,react_namespaceObject.css)("width:100%;padding:10px 10px 18px 10px;border-top:0.4px solid ", theme.colors.greyGraphite70, ";" + ( true ? "" : 0),  true ? "" : 0);
+const LogoutWrapper = theme => /*#__PURE__*/(0,react_namespaceObject.css)("width:100%;padding:10px 10px 18px 10px;border-top:0.5px solid ", theme.colors.greyGraphite70, ";" + ( true ? "" : 0),  true ? "" : 0);
 const CustomButton =  true ? {
   name: "1t1u438",
   styles: "justify-content:center;gap:8px;width:100%;padding:8px;font-size:14px;line-height:19px;font-weight:500"
 } : 0;
+const AdditionalInfoWrapper = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
+  target: "e13e77x11"
+} : 0)("flex-direction:column;align-items:flex-start;margin-top:4px;font-size:14px;font-weight:400;color:", ({
+  theme
+}) => theme.colors.greyDropdownFocused, ";" + ( true ? "" : 0));
+const CustomContentWrapper = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
+  target: "e13e77x10"
+} : 0)("width:100%;padding:10px;border-top:0.5px solid ", ({
+  theme
+}) => theme.colors.greyGraphite70, ";border-bottom:0.5px solid ", ({
+  theme
+}) => theme.colors.greyGraphite70, ";" + ( true ? "" : 0));
 ;// ./src/components/UserProfile/UserProfile.tsx
 function UserProfile_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)."; }
 
@@ -19772,7 +19794,9 @@ const UserProfile = ({
   trigger,
   onClick,
   logOutText = 'Log Out',
-  className
+  className,
+  additionalInfo,
+  customContent
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
   return (0,jsx_runtime_namespaceObject.jsxs)(Popover, {
@@ -19795,7 +19819,13 @@ const UserProfile = ({
           weight: "regular",
           color: theme.colors.greyDropdownFocused,
           children: email
+        }), additionalInfo && additionalInfo.length > 0 && (0,jsx_runtime_namespaceObject.jsx)(AdditionalInfoWrapper, {
+          children: additionalInfo.map((item, index) => (0,jsx_runtime_namespaceObject.jsx)("div", {
+            children: item
+          }, index))
         })]
+      }), customContent && (0,jsx_runtime_namespaceObject.jsx)(CustomContentWrapper, {
+        children: customContent
       }), (0,jsx_runtime_namespaceObject.jsx)("div", {
         css: LogoutWrapper,
         children: (0,jsx_runtime_namespaceObject.jsxs)(Button_Button, {