@redsift/design-system 11.6.0-muiv5-alpha.5 → 11.6.0-muiv5-alpha.7

package/_internal/theme.js

@@ -1,4 +1,2 @@
 export { T as ThemeContext, a as ThemeProvider, u as useTheme } from './useTheme.js';
-import 'react';
-import './colors.js';
-import './helpers.js';
+//# sourceMappingURL=theme.js.map

package/_internal/types.js

@@ -1,39 +1,15 @@
-import { ComponentProps, ReactElement, RefObject, MouseEvent } from 'react';
-import { b as IconButtonProps } from './types16.js';
-import { V as ValueOf } from './helpers.js';
-import { T as Theme } from './colors.js';
-
 /**
  * Component variant.
  */
-declare const AppSidePanelVariant: {
-    readonly shrinked: "shrinked";
-    readonly standard: "standard";
-    readonly hidden: "hidden";
+const AppSidePanelVariant = {
+  shrinked: 'shrinked',
+  standard: 'standard',
+  hidden: 'hidden'
 };
-type AppSidePanelVariant = ValueOf<typeof AppSidePanelVariant>;
+
 /**
  * Component props.
  */
-interface AppSidePanelProps extends ComponentProps<'div'> {
-    /** Elements to display on top of the navigation menu. Usually a button.  */
-    featuredElements?: ReactElement | ReactElement[];
-    /** Custom props to pass to the IconButton used to collapse the side panel. */
-    iconButtonProps?: Omit<IconButtonProps, 'icon'>;
-    /** Custom ref to pass to the IconButton used to collapse the side panel. */
-    iconButtonRef?: RefObject<HTMLButtonElement>;
-    /** Place to display the logo app.  */
-    logo?: ReactElement | ComponentProps<'img'>;
-    /** Method called when a click occurs on the top open button - which is displayed only in shrinked variant. */
-    onOpen?: (e: MouseEvent) => void;
-    /** Theme. */
-    theme?: Theme;
-    /** Variant. */
-    variant?: AppSidePanelVariant;
-}
-type StyledAppSidePanelProps = Omit<AppSidePanelProps, 'isCollapsed' | 'logo'> & {
-    $variant: AppSidePanelProps['variant'];
-    $theme: AppSidePanelProps['theme'];
-};
 
-export { AppSidePanelVariant as A, StyledAppSidePanelProps as S, AppSidePanelProps as a };
+export { AppSidePanelVariant as A };
+//# sourceMappingURL=types.js.map

package/_internal/types2.js

@@ -1,37 +1,26 @@
-import { ComponentProps } from 'react';
-import { N as NotificationsColorPalette, c as PresentationColorPalette, T as Theme } from './colors.js';
-import { V as ValueOf } from './helpers.js';
-import { L as LayoutProps, S as SpacingProps, P as PositioningProps } from './styles2.js';
-
 /**
  * Component variant.
  */
-declare const BadgeVariant: {
-    readonly dot: "dot";
-    readonly standard: "standard";
+const HeadingVariant = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  body: 'body'
+};
+const HeadingComponent = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  span: 'span'
 };
-type BadgeVariant = ValueOf<typeof BadgeVariant>;
+
 /**
  * Component props.
  */
-interface BadgeProps extends ComponentProps<'div'>, LayoutProps, SpacingProps, PositioningProps {
-    /** Whether the badge should automatically break content. */
-    autoBreak?: boolean;
-    /** Color variant. The product colors are available but should only be used to display the Badge in the color of another product. To display a Badge with a color of the current product, use `default`. */
-    color?: NotificationsColorPalette | PresentationColorPalette;
-    /** Whether the Badge has its colors reversed or not. */
-    isReversed?: boolean;
-    /** Theme. */
-    theme?: Theme;
-    /** Badge variant. */
-    variant?: BadgeVariant;
-}
-type StyledBadgeProps = Omit<BadgeProps, 'color' | 'variant' | 'isReversed' | 'autoBreak'> & {
-    $autoBreak: BadgeProps['autoBreak'];
-    $color: BadgeProps['color'];
-    $isReversed: BadgeProps['isReversed'];
-    $variant: BadgeProps['variant'];
-    $theme: BadgeProps['theme'];
-};
 
-export { BadgeVariant as B, StyledBadgeProps as S, BadgeProps as a };
+export { HeadingVariant as H, HeadingComponent as a };
+//# sourceMappingURL=types2.js.map

package/_internal/types3.js

@@ -1,23 +1,20 @@
-import { ComponentProps, ElementType } from 'react';
-import { T as Theme } from './colors.js';
+/**
+ * Component variant.
+ */
+const SkeletonTextVariant = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  body: 'body',
+  button: 'button',
+  caption: 'caption'
+};
 
 /**
  * Component props.
  */
-interface BreadcrumbItemProps extends ComponentProps<'a'> {
-    /** Prop to pass a custom react component instead of a simple HTML anchor (useful for Nextjs or React Router Link component). */
-    as?: 'a' | ElementType;
-    /** Whether the breadcrumb item is the current page. */
-    isCurrent?: boolean;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** Theme. */
-    theme?: Theme;
-}
-type StyledBreadcrumbItemProps = Omit<BreadcrumbItemProps, 'isDisabled' | 'isCurrent'> & {
-    $isCurrent: BreadcrumbItemProps['isCurrent'];
-    $isDisabled: BreadcrumbItemProps['isDisabled'];
-    $theme: BreadcrumbItemProps['theme'];
-};
 
-export { BreadcrumbItemProps as B, StyledBreadcrumbItemProps as S };
+export { SkeletonTextVariant as S };
+//# sourceMappingURL=types3.js.map

package/_internal/useAppSidePanel.js

@@ -1,12 +1,337 @@
-import { a as AppSidePanelProps } from './types.js';
-import { C as Comp } from './helpers.js';
-import { U as UseSideNavigationMenuBarProps } from './useSideNavigationMenuBar.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { useState, useEffect, forwardRef, useContext } from 'react';
+import classNames from 'classnames';
+import { A as AppContainerContext } from './context.js';
+import styled, { css } from 'styled-components';
+import { A as AppSidePanelVariant } from './types.js';
+import { mdiMenu } from '@redsift/icons';
+import { u as useMessageFormatter } from './useMessageFormatter.js';
+import { b as ProductLogo } from './colors.js';
+import { u as useTheme } from './useTheme.js';
+import { a as Icon } from './Icon2.js';
+import { I as IconButton } from './IconButton.js';
+import { a as useSideNavigationMenuBar, S as SideNavigationMenuBar } from './useSideNavigationMenuBar.js';
+
+const useWindowSize = () => {
+  const [windowSize, setWindowSize] = useState({
+    width: undefined,
+    height: undefined,
+    size: undefined
+  });
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize(windowSize => {
+        if (window.innerWidth === windowSize.width && window.innerHeight === windowSize.height) {
+          return windowSize;
+        }
+        let size;
+        if (window.innerWidth <= 480) {
+          size = 'xs';
+        } else if (window.innerWidth <= 768) {
+          size = 'sm';
+        } else if (window.innerWidth <= 1024) {
+          size = 'md';
+        } else if (window.innerWidth <= 1200) {
+          size = 'lg';
+        } else {
+          size = 'xl';
+        }
+        return {
+          width: window.innerWidth,
+          height: window.innerHeight,
+          size
+        };
+      });
+    }
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  return windowSize;
+};
+
+var expand$1 = "Expand left side panel";
+var collapse$1 = "Collapse left side panel";
+var enUS = {
+	expand: expand$1,
+	collapse: collapse$1
+};
+
+var expand = "Développer le panneau latéral gauche";
+var collapse = "Réduire le panneau latéral gauche";
+var frFR = {
+	expand: expand,
+	collapse: collapse
+};
+
+var intlMessages = {
+  'en-US': enUS,
+  'fr-FR': frFR
+};
+
+/**
+ * Component style.
+ */
+const StyledAppSidePanel = styled.div`
+  align-items: center;
+  background-color: ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return css`var(--redsift-color-${$theme}-components-side-navigation-background)`;
+}};
+  border-right: 4px solid ${_ref2 => {
+  let {
+    $theme
+  } = _ref2;
+  return css`var(--redsift-color-${$theme}-components-side-navigation-right-line)`;
+}};
+  box-sizing: border-box;
+  flex-direction: column;
+  height: 100%;
+  left: 0px;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  transition: width 300ms ease-out;
+  width: ${_ref3 => {
+  let {
+    $variant
+  } = _ref3;
+  return $variant === AppSidePanelVariant.hidden ? '0' : $variant === AppSidePanelVariant.shrinked ? '68px' : '254px';
+}};
+  z-index: var(--redsift-layout-z-index-side-panel);
+
+  .redsift-app-side-panel__header {
+    box-sizing: border-box;
+    transition: padding 300ms ease-out;
+    padding: 18px
+      ${_ref4 => {
+  let {
+    $variant
+  } = _ref4;
+  return $variant === AppSidePanelVariant.hidden ? '0' : $variant === AppSidePanelVariant.shrinked ? '16px' : '24px';
+}};
+    margin-bottom: 16px;
+    width: 100%;
+
+    height: 92px;
+    @media (max-width: 1080px) {
+      height: 72px;
+    }
+
+    display: grid;
+    justify-items: start;
+    align-items: center;
+
+    .redsift-icon-button {
+      > span,
+      > span > svg {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+
+  .redsift-app-side-panel-header__logo {
+    align-items: center;
+    display: flex;
+    grid-column: 1;
+    grid-row: 1;
+    transition: opacity 300ms ease-out;
+    opacity: ${_ref5 => {
+  let {
+    $variant
+  } = _ref5;
+  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;
+  }
+
+  .redsift-app-side-panel-header__expand-button {
+    grid-column: 1;
+    grid-row: 1;
+    transition: opacity 300ms ease-out;
+    opacity: ${_ref6 => {
+  let {
+    $variant
+  } = _ref6;
+  return $variant === AppSidePanelVariant.shrinked ? '1' : '0';
+}};
+    padding: 2px;
+    margin-left: -1px;
+  }
+
+  .redsift-app-side-panel__featured {
+    box-sizing: border-box;
+    border-left: 4px solid #e1e1e1;
+    border-right: unset;
+    margin-bottom: 16px;
+    padding: 0px 16px;
+    width: 100%;
+  }
+
+  [dir='rtl'] & {
+    left: unset;
+    right: 0px;
+    transform: unset;
+    transition: unset;
+  }
+
+  scrollbar-color: ${_ref7 => {
+  let {
+    $theme
+  } = _ref7;
+  return css`var(--redsift-color-${$theme}-components-side-navigation-scrollbar-resting) transparent`;
+}};
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    block-size: 9px;
+    inline-size: 9px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    background-color: ${_ref8 => {
+  let {
+    $theme
+  } = _ref8;
+  return css`var(--redsift-color-${$theme}-components-side-navigation-scrollbar-resting)`;
+}};
+    border-radius: 0px;
+    border-left: 2px solid transparent;
+    border-right: 2px solid transparent;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb:horizontal,
+  &::-webkit-scrollbar-thumb:vertical {
+    &:hover {
+      background-color: ${_ref9 => {
+  let {
+    $theme
+  } = _ref9;
+  return css`var(--redsift-color-${$theme}-components-side-navigation-scrollbar-hover)`;
+}};
+    }
+  }
+
+  &::-webkit-scrollbar-corner {
+    visibility: hidden;
+  }
+`;
+
+// --redsift-color-${$theme}-components-side-navigation-background
+// --redsift-color-${$theme}-components-side-navigation-right-line
+// --redsift-color-${$theme}-components-side-navigation-current-marker
+// --redsift-color-${$theme}-components-side-navigation-text
+// --redsift-color-${$theme}-components-side-navigation-icon
+// --redsift-color-${$theme}-components-side-navigation-chat-background-hover
+// --redsift-color-${$theme}-components-side-navigation-chat-background-down
+
+// ${({ $theme }) => css`var(--redsift-color-${$theme}-components-side-navigation-background)`};
+
+const _excluded = ["children", "className", "featuredElements", "iconButtonProps", "iconButtonRef", "logo", "onOpen", "theme", "variant"];
+const COMPONENT_NAME = 'AppSidePanel';
+const CLASSNAME = 'redsift-app-side-panel';
 
 /**
  * The AppSidePanel component.
  */
-declare const AppSidePanel: Comp<AppSidePanelProps, HTMLDivElement>;
+const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      featuredElements,
+      iconButtonProps,
+      iconButtonRef,
+      logo,
+      onOpen,
+      theme: propsTheme,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const {
+    width
+  } = useWindowSize();
+  const appContainerState = useContext(AppContainerContext);
+  const theme = useTheme(propsTheme);
+  const format = useMessageFormatter(intlMessages);
+  useEffect(() => {
+    if (appContainerState && variant && appContainerState.sidePanelVariant !== variant) {
+      appContainerState.setSidePanelVariant(variant);
+    }
+  }, [variant]);
+  const handleClose = event => {
+    onOpen === null || onOpen === void 0 ? void 0 : onOpen(event);
+    appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.expandSidePanel();
+  };
+  const computedVariant = appContainerState ? appContainerState.sidePanelVariant : variant;
+  const product = appContainerState && appContainerState.product;
+  return /*#__PURE__*/React__default.createElement(StyledAppSidePanel, _extends({}, forwardedProps, {
+    $theme: theme,
+    $variant: computedVariant,
+    className: classNames(AppSidePanel.className, className),
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${AppSidePanel.className}__header`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${AppSidePanel.className}-header__logo`
+  }, /*#__PURE__*/React__default.isValidElement(logo) ? logo : logo ? /*#__PURE__*/React__default.createElement("img", {
+    src: logo.src,
+    alt: logo.alt
+  }) : product && (typeof product === 'string' || product.logo) ? /*#__PURE__*/React__default.createElement(Icon, {
+    icon: typeof product === 'string' ? ProductLogo[product] : product.logo,
+    size: {
+      height: width && width > 1080 ? 41 : 36
+    }
+  }) : null), /*#__PURE__*/React__default.createElement(IconButton, _extends({
+    className: `${AppSidePanel.className}-header__expand-button`
+  }, iconButtonProps, {
+    "aria-label": format('expand'),
+    icon: mdiMenu,
+    onClick: handleClose,
+    ref: iconButtonRef,
+    color: "grey",
+    isDisabled: computedVariant === 'standard'
+  }))), featuredElements ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${AppSidePanel.className}__featured`
+  }, featuredElements) : null, children);
+});
+AppSidePanel.className = CLASSNAME;
+AppSidePanel.displayName = COMPONENT_NAME;
 
-declare const useAppSidePanel: ({ items, isActive }: UseSideNavigationMenuBarProps) => Omit<AppSidePanelProps, 'ref'>;
+const useAppSidePanel = _ref => {
+  let {
+    items,
+    isActive
+  } = _ref;
+  const sideNavigationMenuBarProps = useSideNavigationMenuBar({
+    items,
+    isActive
+  });
+  return {
+    children: /*#__PURE__*/React__default.createElement(SideNavigationMenuBar, _extends({}, sideNavigationMenuBarProps, {
+      "aria-label": "Navigation"
+    }))
+  };
+};
 
-export { AppSidePanel as A, useAppSidePanel as u };
+export { AppSidePanel as A, useAppSidePanel as a, useWindowSize as u };
+//# sourceMappingURL=useAppSidePanel.js.map