@ssa-ui-kit/core 3.12.0 → 3.12.1

package/dist/components/Radio/Radio.d.ts

@@ -53,7 +53,6 @@ import { RadioProps } from './types';
  *     default: '#ff0000',
  *     hovered: '#cc0000',
  *     disabled: '#cccccc',
- *     focusShadow: 'rgba(255,0,0,0.25)',
  *   }}
  *   onChange={handleChange}
  * />

package/dist/components/Radio/RadioBase.d.ts

@@ -1,5 +1,3 @@
 export declare const RadioBase: import("@emotion/styled").StyledComponent<import("..").LabelProps & {
     theme?: import("@emotion/react").Theme;
-} & {
-    focusShadowColor?: string;
 }, {}, {}>;

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

@@ -49,7 +49,6 @@
  *     default: '#ff0000',
  *     hovered: '#cc0000',
  *     disabled: '#cccccc',
- *     focusShadow: 'rgba(255, 0, 0, 0.25)',
  *   }}
  *   onChange={(value) => handleChange(value)}
  * />
@@ -120,7 +119,5 @@ export interface RadioProps {
         hovered?: string;
         /** Disabled state icon color */
         disabled?: string;
-        /** Focus ring drop-shadow color */
-        focusShadow?: string;
     };
 }

package/dist/index.js

@@ -14386,7 +14386,7 @@ const IconMapComponent = ({
   ...props
 }) => {
   const Component = iconsMap[name];
-  if (Component == null) {
+  if ((0,utils_namespaceObject.isNill)(Component)) {
     return null;
   }
   return (0,jsx_runtime_namespaceObject.jsx)(Component, {
@@ -14485,10 +14485,11 @@ const useTooltip = props => {
 };
 ;// ./src/components/Tooltip/useTooltipContext.tsx
 
+
 const TooltipContext = /*#__PURE__*/(0,external_react_namespaceObject.createContext)(null);
 const useTooltipContext = () => {
   const tooltipContext = (0,external_react_namespaceObject.useContext)(TooltipContext);
-  if (tooltipContext == null) {
+  if ((0,utils_namespaceObject.isNill)(tooltipContext)) {
     throw new Error('The component should be wrapped with <Tooltip> to have access to the context');
   }
   return tooltipContext;
@@ -16269,6 +16270,7 @@ function NumberField_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried t
 
 
 
+
 var NumberField_ref =  true ? {
   name: "t1bvca",
   styles: "padding:0 14px"
@@ -16293,8 +16295,8 @@ const NumberField = ({
   const {
     disabled
   } = inputProps;
-  const formattedValue = value == null ? value : (0,number_format_namespaceObject.format)(value, numberFormat);
-  const formattedDefaultValue = defaultValue == null ? defaultValue : (0,number_format_namespaceObject.format)(defaultValue, numberFormat);
+  const formattedValue = (0,utils_namespaceObject.isNill)(value) ? value : (0,number_format_namespaceObject.format)(value, numberFormat);
+  const formattedDefaultValue = (0,utils_namespaceObject.isNill)(defaultValue) ? defaultValue : (0,number_format_namespaceObject.format)(defaultValue, numberFormat);
   const [_value, setValue] = (0,hooks_namespaceObject.useUncontrolled)({
     value: formattedValue,
     defaultValue: formattedDefaultValue,
@@ -17013,10 +17015,9 @@ const Slider = ({
 
 const RadioBase = /*#__PURE__*/base_default()(Label_Label,  true ? {
   target: "efp6u1p0"
-} : 0)("display:inline-flex;flex-grow:0;align-items:center;cursor:pointer;gap:5px;&:has(input:disabled){cursor:default;}svg{flex-shrink:0;}input:focus+svg{filter:drop-shadow(\n      ", ({
-  theme,
-  focusShadowColor
-}) => `-4px 4px 10px ${focusShadowColor || theme.colors.blue20}`, "\n    );}input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}span{font-size:14px;font-weight:100;}" + ( true ? "" : 0));
+} : 0)("display:inline-flex;flex-grow:0;align-items:center;cursor:pointer;gap:8px;span{font-size:14px;font-weight:500;}&:has(input:disabled){cursor:default;}&:has(input:disabled) span{color:", ({
+  theme
+}) => theme.colors.grey, ";}svg{flex-shrink:0;}input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}" + ( true ? "" : 0));
 ;// ./src/components/Radio/Radio.tsx
 
 
@@ -17077,7 +17078,6 @@ const RadioBase = /*#__PURE__*/base_default()(Label_Label,  true ? {
  *     default: '#ff0000',
  *     hovered: '#cc0000',
  *     disabled: '#cccccc',
- *     focusShadow: 'rgba(255,0,0,0.25)',
  *   }}
  *   onChange={handleChange}
  * />
@@ -17111,27 +17111,22 @@ const Radio = ({
   let defaultColor;
   let hoveredColor;
   let disabledColor;
-  let focusShadowColor;
   if (color === 'primary') {
     defaultColor = theme.palette.primary.main;
     hoveredColor = theme.palette.primary.dark;
     disabledColor = theme.colors.greyFocused40;
-    focusShadowColor = theme.colors.blue20;
   } else if (color === 'success') {
     defaultColor = theme.palette.success.main;
     hoveredColor = theme.palette.success.dark;
     disabledColor = theme.colors.greyFocused40;
-    focusShadowColor = theme.colors.green40;
   } else {
     defaultColor = colors?.default || theme.palette.primary.main;
     hoveredColor = colors?.hovered || theme.palette.primary.dark;
     disabledColor = colors?.disabled || theme.colors.greyFocused40;
-    focusShadowColor = colors?.focusShadow;
   }
   return (0,jsx_runtime_namespaceObject.jsxs)(RadioBase, {
     htmlFor: radioId,
     className: className,
-    focusShadowColor: focusShadowColor,
     onMouseEnter: () => setIsHovered(true),
     onMouseLeave: () => setIsHovered(false),
     children: [(0,jsx_runtime_namespaceObject.jsx)("input", {
@@ -17706,6 +17701,7 @@ function Dropdown_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to s
 
 
 
+
 const DropdownBase = /*#__PURE__*/base_default()("div",  true ? {
   target: "eizhqtp1"
 } : 0)( true ? {
@@ -17901,12 +17897,12 @@ const Dropdown = ({
   }), [onChange, activeItem, maxHeight, placement]);
   const value = activeItem ? activeItem.label || activeItem.children || activeItem.value || activeItem || placeholder : placeholder;
   const rawAvatar = activeItem && activeItem.avatar;
-  const selectedAvatar = rawAvatar != null ? typeof rawAvatar === 'string' ? (0,jsx_runtime_namespaceObject.jsx)(Avatar_Avatar, {
+  const selectedAvatar = !(0,utils_namespaceObject.isNill)(rawAvatar) ? typeof rawAvatar === 'string' ? (0,jsx_runtime_namespaceObject.jsx)(Avatar_Avatar, {
     size: AvatarSizes.small,
     image: rawAvatar,
     border: avatarBorder
   }) : /*#__PURE__*/external_react_default().isValidElement(rawAvatar) ? rawAvatar : null : null;
-  const toggleContent = selectedAvatar != null ? (0,jsx_runtime_namespaceObject.jsxs)(SelectedContent, {
+  const toggleContent = !(0,utils_namespaceObject.isNill)(selectedAvatar) ? (0,jsx_runtime_namespaceObject.jsxs)(SelectedContent, {
     children: [selectedAvatar, (0,jsx_runtime_namespaceObject.jsx)("span", {
       style: {
         minWidth: 0
@@ -18350,6 +18346,7 @@ const MultipleDropdown = /*#__PURE__*/external_react_default().forwardRef(Multip
 ;// ./src/components/Popover/hooks/usePopover.tsx
 
 
+
 /**
  * usePopover - Hook for popover functionality
  *
@@ -18401,7 +18398,7 @@ const usePopover = ({
   });
   const context = data.context;
   const click = (0,external_floating_ui_react_namespaceObject.useClick)(context, {
-    enabled: controlledOpen == null && ['click', 'both'].includes(interactionsEnabled),
+    enabled: (0,utils_namespaceObject.isNill)(controlledOpen) && ['click', 'both'].includes(interactionsEnabled),
     keyboardHandlers
   });
   const isControlled = controlledOpen !== undefined;
@@ -18415,7 +18412,7 @@ const usePopover = ({
   });
   const role = (0,external_floating_ui_react_namespaceObject.useRole)(context);
   const hover = (0,external_floating_ui_react_namespaceObject.useHover)(context, {
-    enabled: controlledOpen == null && ['hover', 'both'].includes(interactionsEnabled),
+    enabled: (0,utils_namespaceObject.isNill)(controlledOpen) && ['hover', 'both'].includes(interactionsEnabled),
     handleClose: (0,external_floating_ui_react_namespaceObject.safePolygon)()
   });
   const interactionsHooks = [dismiss, role];
@@ -18452,6 +18449,7 @@ const usePopover = ({
 };
 ;// ./src/components/Popover/hooks/usePopoverContext.tsx
 
+
 /**
  * Context for popover components
  *
@@ -18479,7 +18477,7 @@ const PopoverContext = /*#__PURE__*/external_react_namespaceObject.createContext
  */
 const usePopoverContext = () => {
   const context = external_react_namespaceObject.useContext(PopoverContext);
-  if (context == null) {
+  if ((0,utils_namespaceObject.isNill)(context)) {
     throw new Error('Popover components must be wrapped in <Popover />');
   }
   return context;
@@ -18826,6 +18824,7 @@ const external_react_hook_form_namespaceObject = require("react-hook-form");
 
 
 
+
 const findExactMatch = (input, options) => {
   const normalizedInput = input.toLowerCase();
   return Object.values(options).find(opt => {
@@ -18927,7 +18926,7 @@ const useTypeahead = ({
   }, [optionsWithKey, selectedItems, allowCustomValues]);
   const inputValue = (0,external_react_namespaceObject.useMemo)(() => {
     if (isMultiple) return rawInput ?? '';
-    if (rawInput != null) return rawInput;
+    if (!(0,utils_namespaceObject.isNill)(rawInput)) return rawInput;
     return selectedItems.length === 1 ? optionsWithKey[selectedItems[0]]?.label?.toString() ?? String(selectedItems[0] ?? '') : '';
   }, [isMultiple, rawInput, selectedItems, optionsWithKey]);
   const filteredChildren = (0,external_react_namespaceObject.useMemo)(() => {
@@ -19008,7 +19007,7 @@ const useTypeahead = ({
     shouldClose = true,
     resetInput = true
   }) => {
-    if (isDisabled || value == null) return;
+    if (isDisabled || (0,utils_namespaceObject.isNill)(value)) return;
     const alreadySelected = selectedItems.includes(value);
     const updatedSelected = isMultiple ? alreadySelected ? selectedItems.filter(item => item !== value) : [...selectedItems, value] : alreadySelected ? [] : [value];
     const fieldValue = isMultiple ? updatedSelected : updatedSelected[0];
@@ -20270,6 +20269,7 @@ const useDatePickerMask = ({
 
 
 
+
 const CONFIG = {
   [PICKER_TYPE.DAYS]: {
     format: DEFAULT_MASK_FORMAT,
@@ -20299,7 +20299,7 @@ const CONFIG = {
     unit: 'year'
   }
 };
-const getNumberAtIndex = (parts, index, fallback) => index >= 0 && parts[index] != null ? parts[index] : fallback;
+const getNumberAtIndex = (parts, index, fallback) => index >= 0 && !(0,utils_namespaceObject.isNill)(parts[index]) ? parts[index] : fallback;
 const useDatePicker = ({
   dateMin,
   dateMax,
@@ -48995,12 +48995,7 @@ function NavBarPopover_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried
 
 
 
-var NavBarPopover_ref =  true ? {
-  name: "eqp0yr",
-  styles: "height:auto;padding:0;margin:0;cursor:pointer;background-color:unset;border-radius:0"
-} : 0;
-const CollapsibleNavBarPopover = ({
-  triggerIcon,
+const SubMenuContent = ({
   title,
   content
 }) => {
@@ -49008,42 +49003,29 @@ const CollapsibleNavBarPopover = ({
   const {
     theme: navBarTheme
   } = useCollapsibleNavBarContext();
-  const [open, setOpen] = (0,external_react_namespaceObject.useState)(false);
-  const onOpenChange = open => {
-    setOpen(open);
-  };
   const {
-    width
-  } = (0,hooks_namespaceObject.useWindowSize)();
-  (0,external_react_namespaceObject.useEffect)(() => {
-    setOpen(false);
-  }, [width]);
-  return (0,jsx_runtime_namespaceObject.jsxs)(Popover, {
-    floatingOptions: {
-      onOpenChange,
-      open,
-      middleware: [(0,external_floating_ui_react_namespaceObject.offset)({
-        mainAxis: 37
-      })]
-    },
-    placement: "right-start",
-    interactionsEnabled: "both",
-    children: [(0,jsx_runtime_namespaceObject.jsx)(PopoverTrigger, {
-      variant: "tertiary",
-      dataTestId: "collapsible-nav-bar-trigger-button",
-      css: NavBarPopover_ref,
-      startIcon: triggerIcon
-    }), (0,jsx_runtime_namespaceObject.jsxs)(PopoverContent, {
+    placement
+  } = usePopoverContext();
+  // When flip switches alignment to "-end" there's no room below the trigger,
+  // so the list renders above the heading instead of the heading drifting with it.
+  const isFlippedUp = placement.endsWith('-end');
+  return (0,jsx_runtime_namespaceObject.jsx)(PopoverContent, {
+    css: /*#__PURE__*/(0,react_namespaceObject.css)({
+      [theme.mediaQueries.xs]: {
+        display: 'none'
+      },
+      [theme.mediaQueries.md]: {
+        display: 'block'
+      },
+      zIndex: 20
+    },  true ? "" : 0,  true ? "" : 0),
+    isFocusManagerDisabled: true,
+    children: (0,jsx_runtime_namespaceObject.jsxs)("div", {
       css: /*#__PURE__*/(0,react_namespaceObject.css)({
-        [theme.mediaQueries.xs]: {
-          display: 'none'
-        },
-        [theme.mediaQueries.md]: {
-          display: 'block'
-        },
-        zIndex: 20
+        display: 'flex',
+        flexDirection: isFlippedUp ? 'column-reverse' : 'column',
+        gap: 1
       },  true ? "" : 0,  true ? "" : 0),
-      isFocusManagerDisabled: true,
       children: [(0,jsx_runtime_namespaceObject.jsx)(PopoverHeading, {
         css: /*#__PURE__*/(0,react_namespaceObject.css)({
           color: navBarTheme === 'default' ? theme.colors.white : theme.colors.greyGraphite,
@@ -49052,7 +49034,6 @@ const CollapsibleNavBarPopover = ({
           background: navBarTheme === 'default' ? theme.colors.greyGraphite : '#F4F5F9',
           borderRadius: 5,
           cursor: 'default',
-          marginBottom: 1,
           width: 'auto',
           whiteSpace: 'nowrap',
           '&::before': {
@@ -49063,7 +49044,11 @@ const CollapsibleNavBarPopover = ({
             position: 'absolute',
             width: 9,
             height: 9,
-            top: 7,
+            ...(isFlippedUp ? {
+              bottom: 7
+            } : {
+              top: 7
+            }),
             left: -4,
             transform: 'rotate(45deg)',
             zIndex: -1
@@ -49097,6 +49082,49 @@ const CollapsibleNavBarPopover = ({
         },  true ? "" : 0,  true ? "" : 0),
         children: content
       })]
+    })
+  });
+};
+var NavBarPopover_ref =  true ? {
+  name: "eqp0yr",
+  styles: "height:auto;padding:0;margin:0;cursor:pointer;background-color:unset;border-radius:0"
+} : 0;
+const CollapsibleNavBarPopover = ({
+  triggerIcon,
+  title,
+  content
+}) => {
+  const [open, setOpen] = (0,external_react_namespaceObject.useState)(false);
+  const onOpenChange = open => {
+    setOpen(open);
+  };
+  const {
+    width
+  } = (0,hooks_namespaceObject.useWindowSize)();
+  (0,external_react_namespaceObject.useEffect)(() => {
+    setOpen(false);
+  }, [width]);
+  return (0,jsx_runtime_namespaceObject.jsxs)(Popover, {
+    floatingOptions: {
+      onOpenChange,
+      open,
+      middleware: [(0,external_floating_ui_react_namespaceObject.offset)({
+        mainAxis: 37
+      }), (0,external_floating_ui_react_namespaceObject.flip)({
+        crossAxis: true,
+        padding: 5
+      })]
+    },
+    placement: "right-start",
+    interactionsEnabled: "both",
+    children: [(0,jsx_runtime_namespaceObject.jsx)(PopoverTrigger, {
+      variant: "tertiary",
+      dataTestId: "collapsible-nav-bar-trigger-button",
+      css: NavBarPopover_ref,
+      startIcon: triggerIcon
+    }), (0,jsx_runtime_namespaceObject.jsx)(SubMenuContent, {
+      title: title,
+      content: content
     })]
   });
 };
@@ -50369,6 +50397,7 @@ function Pagination_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to
 
 
 
+
 /**
  * Pagination - Navigation controls for paginated data
  *
@@ -50537,7 +50566,7 @@ const Pagination = ({
             setPage(page - 1);
           }
         },
-        isDisabled: isDisabled || pagesCount == null || pagesCount <= 1 || page == null || page === 1,
+        isDisabled: isDisabled || (0,utils_namespaceObject.isNill)(pagesCount) || pagesCount <= 1 || (0,utils_namespaceObject.isNill)(page) || page === 1,
         css: Pagination_ref2
       }), (0,jsx_runtime_namespaceObject.jsx)(PaginationButtons, {
         range: range,
@@ -50551,7 +50580,7 @@ const Pagination = ({
             setPage(page + 1);
           }
         },
-        isDisabled: isDisabled || pagesCount == null || pagesCount <= 1 || page == null || page === pagesCount,
+        isDisabled: isDisabled || (0,utils_namespaceObject.isNill)(pagesCount) || pagesCount <= 1 || (0,utils_namespaceObject.isNill)(page) || page === pagesCount,
         css: Pagination_ref3
       })]
     })]
@@ -53161,6 +53190,7 @@ const Notification_styles_actionBtnStyles = textColor => /*#__PURE__*/(0,react_n
 
 
 
+
 const NotificationItem = ({
   id,
   variant,
@@ -53231,7 +53261,7 @@ const NotificationItem = ({
     name: icon,
     color: resolvedIconColor,
     size: iconSize
-  }) : icon != null ? icon : (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+  }) : !(0,utils_namespaceObject.isNill)(icon) ? icon : (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
     name: "user",
     color: resolvedIconColor,
     size: iconSize