@redsift/design-system 9.0.0-alpha.8 → 9.0.0-alpha.9

package/index.d.ts

@@ -832,6 +832,7 @@ interface AppBarProps extends Omit<ComponentProps<'header'>, 'title'> {
     title?: string | ReactElement;
 }
 type StyledAppBarProps = AppBarProps & {
+    $hasBorder: boolean;
     $isLoaded: boolean;
     $isSidePanelCollapsed: boolean;
 };
@@ -1842,6 +1843,7 @@ type BaseFocusWithinGroupAction = {
     type: FocusWithinGroupActionType.FOCUS_ON_LIST;
     payload: {
         id: TabStop['id'];
+        filter?: FocusWithinGroupState['filter'];
     };
 } | {
     type: FocusWithinGroupActionType.BLUR_ON_LIST;

package/index.js

@@ -1974,7 +1974,12 @@ const StyledAppBar = styled.header`
   color: var(--redsift-color-neutral-darkgrey);
   display: flex;
   flex-direction: row;
+
   height: 92px;
+  @media (max-width: 1080px) {
+    height: 72px;
+  }
+
   justify-content: space-between;
   left: 0;
   position: sticky;
@@ -1983,21 +1988,32 @@ const StyledAppBar = styled.header`
 
   ${_ref => {
   let {
-    $isSidePanelCollapsed
+    $hasBorder
   } = _ref;
+  return $hasBorder ? css`
+          border-bottom: 2px solid #e1e1e1;
+        ` : css`
+          border-bottom: none;
+        `;
+}}
+
+  ${_ref2 => {
+  let {
+    $isSidePanelCollapsed
+  } = _ref2;
   return !$isSidePanelCollapsed ? css`
           transform: translate(250px);
-          width: calc(100% - 250px);
+          width: calc(100vw - 250px);
         ` : css`
           transform: translate(64px);
           width: calc(100% - 64px);
         `;
 }}
 
-  ${_ref2 => {
+  ${_ref3 => {
   let {
     $isLoaded
-  } = _ref2;
+  } = _ref3;
   return $isLoaded ? css`
           transition: transform 0.25s ease-out, width 0.25s ease-out;
         ` : '';
@@ -2241,7 +2257,12 @@ const StyledAppSidePanel = styled.div`
 }};
     margin-bottom: 16px;
     width: 100%;
+
     height: 92px;
+    @media (max-width: 1080px) {
+      height: 72px;
+    }
+
     display: grid;
     justify-items: start;
     align-items: center;
@@ -2267,11 +2288,18 @@ const StyledAppSidePanel = styled.div`
   } = _ref3;
   return $variant === AppSidePanelVariant.shrinked ? '0' : '1';
 }};
+
     height: 56px;
+    @media (max-width: 1080px) {
+      height: 36px;
+    }
   }
 
   .redsift-app-side-panel-header__logo > img {
     max-height: 56px;
+    @media (max-width: 1080px) {
+      max-height: 36px;
+    }
     max-width: 195px;
   }
 
@@ -2359,6 +2387,9 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
       iconButtonRef
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$F);
+  const {
+    width
+  } = useWindowSize();
   const appContainerState = useContext(AppContainerContext);
   const stringFormatter = useLocalizedStringFormatter(intlMessages$3);
   useEffect(() => {
@@ -2386,7 +2417,7 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
   }) : product ? /*#__PURE__*/React__default.createElement(Icon, {
     icon: ProductLogo[product],
     size: {
-      height: 41
+      height: width && width > 1080 ? 41 : 36
     }
   }) : null), /*#__PURE__*/React__default.createElement(IconButton, _extends$1({
     className: `${AppSidePanel.className}-header__expand-button`
@@ -2452,6 +2483,7 @@ const StyledSideNavigationMenuItemIndicatorContainer = styled.div`
   min-width: 4px;
 `;
 const StyledSideNavigationMenuItemIndicator = styled.div`
+  position: relative;
   width: 4px;
   height: 38px;
   border-radius: 0px 4px 4px 0px;
@@ -2574,7 +2606,7 @@ const StyledSideNavigationMenuItem = styled.a`
           margin-bottom: 16px;
           margin-left: -4px;
           transition: padding 300ms ease-out;
-          padding: 5px 16px 5px ${$variant === SideNavigationMenuBarVariant.shrinked ? '16px' : '24px'};
+          padding: 0 16px 0 ${$variant === SideNavigationMenuBarVariant.shrinked ? '16px' : '24px'};
 
           .redsift-icon.first {
             box-sizing: unset;
@@ -2861,7 +2893,7 @@ const StyledSideNavigationMenu = styled.div`
       line-height: var(--redsift-typography-body-line-height);
       margin-left: -4px;
       transition: padding 300ms ease-out;
-      padding: 5px 16px 5px ${$variant === SideNavigationMenuBarVariant.shrinked ? '16px' : '24px'};
+      padding: 0 16px 0 ${$variant === SideNavigationMenuBarVariant.shrinked ? '16px' : '24px'};
       text-decoration: none;
       text-transform: uppercase;
       width: calc(100% + ${$variant === SideNavigationMenuBarVariant.shrinked ? '0px' : '4px'});
@@ -3935,12 +3967,19 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
       title: propsTitle
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$w);
+  const [scroll, setScroll] = useState(false);
+  useEffect(() => {
+    window.addEventListener('scroll', () => {
+      setScroll(window.scrollY > 8);
+    });
+  }, []);
   const {
     isLoaded
   } = useIsLoaded();
   const appContainerState = useContext(AppContainerContext);
   const stringFormatter = useLocalizedStringFormatter(intlMessages$4);
   return /*#__PURE__*/React__default.createElement(StyledAppBar, _extends$1({}, forwardedProps, {
+    $hasBorder: scroll,
     $isLoaded: isLoaded,
     $isSidePanelCollapsed: appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked : true,
     className: classNames(AppBar.className, className),
@@ -5352,7 +5391,7 @@ const StyledDetailedCardSection = styled.div`
 
   .redsift-detailed-card-section-header__title {
     font-size: 18px;
-    font-weight: 700;
+    font-weight: 500;
     lineheight: 22px;
     padding: 6px 0px;
   }
@@ -9748,9 +9787,9 @@ const FocusWithinGroupReducer = (state, action) => {
         const currentTabStop = state.tabStops[index];
         return currentTabStop.isDisabled ? _objectSpread2(_objectSpread2({}, state), {}, {
           delayedAction: undefined
-        }) : selectTabStop(_objectSpread2(_objectSpread2({}, state), {}, {
+        }, action.payload) : selectTabStop(_objectSpread2(_objectSpread2({}, state), {}, {
           delayedAction: undefined
-        }), currentTabStop, undefined, state.focusOnClick);
+        }, action.payload), currentTabStop, undefined, state.focusOnClick);
       }
     case FocusWithinGroupActionType.BLUR_ON_LIST:
       {
@@ -9783,8 +9822,7 @@ const FocusWithinGroupReducer = (state, action) => {
       return _objectSpread2(_objectSpread2({}, state), action.payload);
     case FocusWithinGroupActionType.FILTER_LIST:
       return _objectSpread2(_objectSpread2({}, state), {}, {
-        selectedId: null,
-        activedescendant: ['', '']
+        selectedId: null
       }, action.payload);
     case FocusWithinGroupActionType.DELAY_ACTION:
       return _objectSpread2(_objectSpread2({}, state), {}, {
@@ -10307,7 +10345,6 @@ const StyledGrid = styled.div`
   return inline ? 'inline-grid' : 'grid';
 }};
   flex: 1;
-  max-width: fit-content;
 
   ${baseStyling}
   ${baseInternalSpacing}