@ssa-ui-kit/core 2.28.2 → 2.29.0

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

@@ -7,6 +7,7 @@ export declare const DaysViewCell: import("@emotion/styled").StyledComponent<{
     alignItems?: string;
     fade?: boolean;
     fadeDelay?: number;
+    isVisible?: boolean;
 } & import("../..").CommonProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 } & {

package/dist/components/DateRangePicker/components/DatesListWrapper.d.ts

@@ -7,6 +7,7 @@ export declare const DatesListWrapper: import("@emotion/styled").StyledComponent
     alignItems?: string;
     fade?: boolean;
     fadeDelay?: number;
+    isVisible?: boolean;
 } & import("../../..").CommonProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

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

@@ -7,6 +7,7 @@ export declare const DaysViewCell: import("@emotion/styled").StyledComponent<{
     alignItems?: string;
     fade?: boolean;
     fadeDelay?: number;
+    isVisible?: boolean;
 } & import("../..").CommonProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 } & {
@@ -42,6 +43,7 @@ export declare const TriggerWrapper: import("@emotion/styled").StyledComponent<{
     alignItems?: string;
     fade?: boolean;
     fadeDelay?: number;
+    isVisible?: boolean;
 } & import("../..").CommonProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

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/Filters/FilterBlockWrapper.d.ts

@@ -7,6 +7,7 @@ export declare const FilterBlockWrapper: import("@emotion/styled").StyledCompone
     alignItems?: string;
     fade?: boolean;
     fadeDelay?: number;
+    isVisible?: boolean;
 } & import("../..").CommonProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/dist/components/Tag/Tag.d.ts

@@ -1,3 +1,3 @@
 import { TagsProps } from './types';
-declare const Tag: ({ color, size, className, children, }: TagsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Tag: ({ color, size, className, children, customStyles, }: TagsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Tag;

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

@@ -1,6 +1,15 @@
 import { CommonProps } from '../../types/emotion';
+import { Interpolation, Theme } from '@emotion/react';
+export interface CustomTagStyles {
+    color?: string;
+    background?: string;
+    border?: string;
+    boxShadow?: string;
+    css?: Interpolation<Theme>;
+}
 export interface TagsProps extends CommonProps {
     color?: keyof MainColors;
     size?: keyof MainSizes;
     children: React.ReactNode;
+    customStyles?: CustomTagStyles;
 }

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

@@ -36,6 +36,7 @@ export declare const TypeaheadInputsGroupWrapper: import("@emotion/styled").Styl
     alignItems?: string;
     fade?: boolean;
     fadeDelay?: number;
+    isVisible?: boolean;
 } & import("../..").CommonProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: Theme;
 } & {

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/components/Wrapper/Wrapper.d.ts

@@ -8,5 +8,6 @@ declare const Wrapper: import("@emotion/styled").StyledComponent<{
     alignItems?: string;
     fade?: boolean;
     fadeDelay?: number;
+    isVisible?: boolean;
 } & CommonProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export default Wrapper;

package/dist/index.js

@@ -1481,21 +1481,26 @@ const Wrapper = /*#__PURE__*/base_default()("div",  true ? {
 }) => alignItems ? alignItems : 'center', ";width:100%;flex-direction:", ({
   direction
 }) => direction ? direction : 'row', ";", ({
+  isVisible = true,
   fade,
   fadeDelay = 0.3
-}) => fade && `
-    opacity: 0;
-    animation: fadeInOut ${fadeDelay}s ease-in-out forwards;
-
-    @keyframes fadeInOut {
-      0% {
-        opacity: 0;
-      }
-      100% {
-        opacity: 1;
-      }
-    }
-  `, ";" + ( true ? "" : 0));
+}) => {
+  const baseStyles = `
+      opacity: ${isVisible ? 1 : 0};
+    `;
+  if (fade) {
+    return `
+        ${baseStyles}
+        transition: opacity ${fadeDelay}s ease-in-out, visibility ${fadeDelay}s ease-in-out;
+        visibility: ${isVisible ? 'visible' : 'hidden'};
+        ${!isVisible ? `transition-delay: 0s, ${fadeDelay}s;` : ''}
+      `;
+  }
+  return `
+      ${baseStyles}
+      visibility: ${isVisible ? 'visible' : 'hidden'};
+    `;
+}, ";" + ( true ? "" : 0));
 /* harmony default export */ const Wrapper_Wrapper = (Wrapper);
 ;// ./src/components/Button/ButtonBase.tsx
 
@@ -4640,8 +4645,10 @@ const DropdownToggle = ({
   ariaLabelledby,
   ariaControls,
   colors,
-  className
+  className,
+  ...restProps
 }) => (0,jsx_runtime_namespaceObject.jsx)(DropdownToggleBase, {
+  ...restProps,
   className: className,
   colors: colors,
   isOpen: isOpen,
@@ -4677,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
   })
@@ -4826,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);
@@ -4885,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,
@@ -4897,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, {
@@ -8041,6 +8054,7 @@ const styles_blueLight = theme => /*#__PURE__*/(0,react_namespaceObject.css)("co
 
 
 
+
 const Tag_mapColors = {
   pink: [styles_pink, pinkBorder],
   yellow: [styles_yellow, yellowBorder],
@@ -8051,18 +8065,29 @@ const Tag_mapColors = {
   blue: [styles_blue, blueBorder],
   yellowWarm: [styles_yellowWarm, yellowWarmBorder]
 };
+const createCustomStyles = customStyles => {
+  if (!customStyles) return [];
+  const styles = [/*#__PURE__*/(0,react_namespaceObject.css)(customStyles.color && `color: ${customStyles.color};`, " ", customStyles.background && `background: ${customStyles.background};`, " ", customStyles.border && `border: ${customStyles.border};`, " ", customStyles.boxShadow && `box-shadow: ${customStyles.boxShadow};`, ";" + ( true ? "" : 0),  true ? "" : 0)];
+  return customStyles.css ? [styles, customStyles.css] : [styles];
+};
 const Tag = ({
   color = 'purple',
   size = 'medium',
   className,
-  children
-}) => (0,jsx_runtime_namespaceObject.jsx)(Badge_Badge, {
-  color: color,
-  size: size,
-  css: Tag_mapColors[color],
-  className: className,
-  children: children
-});
+  children,
+  customStyles
+}) => {
+  const hasCustomStyles = customStyles && Object.keys(customStyles).length > 0;
+  const defaultStyles = hasCustomStyles ? null : Tag_mapColors[color];
+  const customStylesArray = createCustomStyles(customStyles);
+  return (0,jsx_runtime_namespaceObject.jsx)(Badge_Badge, {
+    color: hasCustomStyles ? 'transparent' : color,
+    size: size,
+    css: [defaultStyles, ...(customStylesArray || []),  true ? "" : 0],
+    className: className,
+    children: children
+  });
+};
 /* harmony default export */ const Tag_Tag = (Tag);
 ;// ./src/components/Textarea/TextareaBase.tsx
 
@@ -19721,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)."; }
 
@@ -19755,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, {
@@ -19778,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, {