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

package/_internal/Alert2.js

@@ -1,54 +1,197 @@
-import { ComponentProps } from 'react';
-import { V as ValueOf, C as Comp } from './helpers.js';
-import { h as StylingProps } from './styles2.js';
-import { T as Theme } from './colors.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useState, useEffect, useCallback } from 'react';
+import classNames from 'classnames';
+import { mdiClose, mdiAlert, mdiTriangleOutline, mdiCheckCircle, mdiCheck, mdiAlertCircle, mdiAlertOutline, mdiInformation, mdiInformationOutline } from '@redsift/icons';
+import styled, { css } from 'styled-components';
+import { i as baseStyling } from './styles4.js';
+import { T as Theme, N as NotificationsColorPalette } from './colors.js';
+import { u as useMessageFormatter } from './useMessageFormatter.js';
+import { F as Flexbox } from './Flexbox2.js';
+import { T as Text } from './Text2.js';
+import { tz as RedsiftTypographyFontWeightSemiBold } from './redsift-design-tokens.js';
+import { I as IconButton } from './IconButton.js';
+import { u as useTheme } from './useTheme.js';
+import { a as Icon } from './Icon2.js';
 
 /**
  * Component variant.
  */
-declare const AlertVariant: {
-    readonly success: "success";
-    readonly error: "error";
-    readonly warning: "warning";
-    readonly info: "info";
+const AlertVariant = {
+  success: 'success',
+  error: 'error',
+  warning: 'warning',
+  info: 'info'
 };
-type AlertVariant = ValueOf<typeof AlertVariant>;
-declare const AlertStyleVariant: {
-    readonly default: "default";
-    readonly minimal: "minimal";
+const AlertStyleVariant = {
+  default: 'default',
+  minimal: 'minimal'
 };
-type AlertStyleVariant = ValueOf<typeof AlertStyleVariant>;
+
 /**
  * Component props.
  */
-interface AlertProps extends ComponentProps<'div'>, StylingProps {
-    /** Whether the component can be closed or not. */
-    isClosable?: boolean;
-    /** Whether the component is closed or not. Used for controlled version. */
-    isClosed?: boolean;
-    /** Method to handle component change. */
-    onClose?(isClosed: boolean): void;
-    /** Title. */
-    title?: string;
-    /** Theme. */
-    theme?: Theme;
-    /** Variant */
-    variant?: AlertVariant;
-    /** Style variant. */
-    styleVariant?: AlertStyleVariant;
-}
-type StyledAlertProps = Omit<AlertProps, 'variant' | 'styleVariant'> & {
-    $hasTitle: boolean;
-    $isClosable: AlertProps['isClosable'];
-    $isClosed: AlertProps['isClosed'];
-    $variant: AlertProps['variant'];
-    $theme: AlertProps['theme'];
-    $styleVariant: AlertProps['styleVariant'];
+
+var close$1 = "Close";
+var enUS = {
+	close: close$1
+};
+
+var close = "Fermer";
+var frFR = {
+	close: close
+};
+
+var intlMessages = {
+  'en-US': enUS,
+  'fr-FR': frFR
+};
+
+/**
+ * Component style.
+ */
+const StyledAlert = styled.div`
+  ${baseStyling}
+
+  padding: 16px;
+  ${_ref => {
+  let {
+    $hasTitle,
+    $isClosable,
+    $isClosed,
+    $variant,
+    $styleVariant,
+    $theme
+  } = _ref;
+  return css`
+    color: var(--redsift-color-neutral-${$theme === Theme.light ? 'x-dark-grey' : 'white'});
+    display: ${!$isClosed ? 'block' : 'none'};
+    background-color: ${$styleVariant == 'minimal' ? `var(--redsift-color-neutral-${$theme !== Theme.light ? 'x-dark-grey' : 'white'})` : `var(--redsift-color-${$theme}-components-alert-${$variant}-background)`};
+
+    border: ${$styleVariant == 'minimal' ? `1px solid var(--redsift-color-${$theme}-components-alert-${$variant}-border)` : 'none'};
+    border-radius: ${$styleVariant == 'minimal' ? '8px' : '4px'};
+
+    .redsift-alert-header__icon-button {
+      background-color: transparent;
+      padding: 0px;
+      .redsift-icon {
+        color: var(--redsift-color-neutral-x-dark-grey);
+      }
+
+      &:hover,
+      &:focus-visible {
+        background-color: var(--redsift-color-notifications-${$variant}-active);
+      }
+    }
+
+    .redsift-alert__content {
+      margin-top: ${$hasTitle ? '8px' : '-24px'};
+      margin-left: 38px;
+      ${$isClosable ? css`
+            margin-right: 24px;
+          ` : ''};
+    }
+  `;
+}}
+`;
+
+const _excluded = ["children", "className", "isClosable", "isClosed", "onClose", "theme", "title", "variant", "styleVariant"];
+const COMPONENT_NAME = 'Alert';
+const CLASSNAME = 'redsift-alert';
+const getVariant = (variant, styleVariant, theme) => {
+  switch (variant) {
+    case AlertVariant.info:
+    default:
+      return {
+        color: theme === Theme.light ? NotificationsColorPalette.info : 'white',
+        icon: styleVariant == 'default' ? mdiInformation : mdiInformationOutline
+      };
+    case AlertVariant.error:
+      return {
+        color: theme === Theme.light ? NotificationsColorPalette.error : 'white',
+        icon: styleVariant == 'default' ? mdiAlertCircle : mdiAlertOutline
+      };
+    case AlertVariant.success:
+      return {
+        color: theme === Theme.light ? NotificationsColorPalette.success : 'white',
+        icon: styleVariant == 'default' ? mdiCheckCircle : mdiCheck
+      };
+    case AlertVariant.warning:
+      return {
+        color: theme === Theme.light ? NotificationsColorPalette.warning : 'white',
+        icon: styleVariant == 'default' ? mdiAlert : mdiTriangleOutline
+      };
+  }
 };
 
 /**
  * The Alert component.
  */
-declare const Alert: Comp<AlertProps, HTMLDivElement>;
+const Alert = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      isClosable,
+      isClosed: propsIsClosed,
+      onClose,
+      theme: propsTheme,
+      title,
+      variant: propsVariant,
+      styleVariant: propsStyleVariant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const variant = Object.values(AlertVariant).includes(propsVariant) ? propsVariant : 'info';
+  const styleVariant = Object.values(AlertStyleVariant).includes(propsStyleVariant) ? propsStyleVariant : 'default';
+  const format = useMessageFormatter(intlMessages);
+  const {
+    color,
+    icon
+  } = getVariant(variant, styleVariant, theme);
+  const [isClosed, setIsClosed] = useState(propsIsClosed);
+  useEffect(() => {
+    setIsClosed(propsIsClosed);
+  }, [propsIsClosed]);
+  const handleClose = useCallback(() => {
+    if (onClose) {
+      onClose(true);
+    }
+    if (propsIsClosed === undefined || propsIsClosed === null) {
+      setIsClosed(true);
+    }
+  }, [onClose]);
+  return /*#__PURE__*/React__default.createElement(StyledAlert, _extends({}, forwardedProps, {
+    className: classNames(Alert.className, className),
+    ref: ref,
+    $hasTitle: Boolean(title),
+    $isClosable: isClosable,
+    $isClosed: isClosed,
+    $theme: theme,
+    $variant: variant,
+    $styleVariant: styleVariant
+  }), /*#__PURE__*/React__default.createElement(Flexbox, {
+    className: `${Alert.className}__header`,
+    justifyContent: "space-between"
+  }, /*#__PURE__*/React__default.createElement(Flexbox, {
+    className: `${Alert.className}-header__title`,
+    gap: "14px",
+    alignItems: "center"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    icon: icon,
+    color: color
+  }), title ? /*#__PURE__*/React__default.createElement(Text, {
+    fontWeight: RedsiftTypographyFontWeightSemiBold
+  }, title) : null), isClosable ? /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": format('close'),
+    className: `${Alert.className}-header__icon-button`,
+    icon: mdiClose,
+    onClick: handleClose,
+    color: color
+  }) : null), children ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${Alert.className}__content`
+  }, children) : null);
+});
+Alert.className = CLASSNAME;
+Alert.displayName = COMPONENT_NAME;
 
-export { AlertVariant as A, StyledAlertProps as S, AlertStyleVariant as a, AlertProps as b, Alert as c };
+export { AlertVariant as A, AlertStyleVariant as a, Alert as b };
+//# sourceMappingURL=Alert2.js.map

package/_internal/AppBar.js

@@ -1,37 +1,248 @@
-import { ComponentProps, RefObject, ReactElement } from 'react';
-import { b as IconButtonProps } from './types16.js';
-import { B as BreadcrumbItemProps } from './types3.js';
-import { T as Theme } from './colors.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useState, useEffect, useContext } from 'react';
+import classNames from 'classnames';
+import { mdiMenuOpen } from '@redsift/icons';
+import { A as AppContainerContext } from './context.js';
+import { u as useIsLoaded } from './useIsLoaded.js';
+import styled, { css } from 'styled-components';
+import { u as useMessageFormatter } from './useMessageFormatter.js';
+import { H as Heading } from './Heading2.js';
+import { a as Breadcrumbs } from './Breadcrumbs2.js';
+import { a as ProductName } from './colors.js';
+import { u as useTheme } from './useTheme.js';
+import { A as AppSidePanelVariant } from './types.js';
+import { I as IconButton } from './IconButton.js';
+
+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 props.
+ * Component style.
  */
-interface AppBarProps extends Omit<ComponentProps<'header'>, 'title'> {
-    /** Array of breadcrumb item props to use to generate a Breadcrumbs in place of the title. The last item is considered as the current page. */
-    breadcrumbs?: Omit<BreadcrumbItemProps, 'ref'>[];
-    /** 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>;
-    /** Title of the page if no one provided automatically */
-    fallbackTitle?: string;
-    /** Title of the page, if no breadcrumbs used. */
-    title?: string | ReactElement;
-    /** Theme. */
-    theme?: Theme;
-}
-type StyledAppBarProps = AppBarProps & {
-    $hasBorder: boolean;
-    $isLoaded: boolean;
-    $isSidePanelCollapsed: boolean;
-    $isAppFullScreen: boolean;
-    $theme: AppBarProps['theme'];
-};
+const StyledAppBar = styled.header`
+  align-content: center;
+  align-items: center;
+
+  ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return css`
+    background-color: var(--redsift-color-${$theme}-components-app-bar-background);
+    color: var(--redsift-color-${$theme}-components-text);
+  `;
+}};
+
+  display: flex;
+  flex-direction: row;
+  z-index: var(--redsift-layout-z-index-header);
+
+  ${_ref2 => {
+  let {
+    $isAppFullScreen
+  } = _ref2;
+  return !$isAppFullScreen ? css`
+          height: 92px;
+          @media (max-width: 1080px) {
+            height: 72px;
+          }
+        ` : css`
+          height: 0;
+          visibility: hidden;
+          @media (max-width: 1080px) {
+            height: 0;
+          }
+        `;
+}}
+
+  justify-content: space-between;
+  left: 0;
+  position: sticky;
+  top: 0;
+
+  ${_ref3 => {
+  let {
+    $hasBorder,
+    $theme
+  } = _ref3;
+  return $hasBorder ? css`
+          border-bottom: 2px solid var(--redsift-color-${$theme}-components-app-bar-border);
+        ` : css`
+          border-bottom: none;
+        `;
+}}
+
+  ${_ref4 => {
+  let {
+    $isSidePanelCollapsed,
+    $isAppFullScreen
+  } = _ref4;
+  return $isAppFullScreen ? css`
+          width: calc(100%);
+        ` : !$isSidePanelCollapsed ? css`
+          transform: translate(254px);
+          width: calc(100% - 254px);
+        ` : css`
+          transform: translate(64px);
+          width: calc(100% - 64px);
+        `;
+}}
+
+  ${_ref5 => {
+  let {
+    $isLoaded
+  } = _ref5;
+  return $isLoaded ? css`
+          transition: transform 0.25s ease-out, width 0.25s ease-out, height 0.25s ease-out, visibility 0.25s ease-out;
+        ` : '';
+}}
+
+  h1 {
+    margin: unset;
+    padding: unset;
+  }
+
+  .redsift-icon-button {
+    > span,
+    > span > svg {
+      width: 30px;
+      height: 30px;
+    }
+  }
+
+  .redsift-app-bar__left {
+    align-content: center;
+    align-items: center;
+    display: inline-flex;
+    flex-direction: row;
+    gap: 8px;
+    justify-content: center;
+    margin-left: 19px;
+  }
+
+  .redsift-app-bar-left__expand-button,
+  .redsift-app-bar-left__collapse-button {
+    margin-right: 3px;
+    padding: 2px;
+    margin-left: -2px;
+  }
+
+  .redsift-app-bar__right {
+    display: inline-flex;
+    margin: 16px;
+  }
+
+  .redsift-breadcrumb-item,
+  .redsift-breadcrumbs__separator {
+    font-family: var(--redsift-typography-h1-font-family) !important;
+    font-size: var(--redsift-typography-h1-font-size) !important;
+    font-weight: var(--redsift-typography-body-font-weight) !important;
+    line-height: var(--redsift-typography-h1-line-height) !important;
+    color: ${_ref6 => {
+  let {
+    $theme
+  } = _ref6;
+  return css`var(--redsift-color-${$theme}-components-app-bar-breadcrumb-default) !important`;
+}};
+  }
+
+  h1.redsift-breadcrumb-item {
+    font-weight: var(--redsift-typography-h1-font-weight) !important;
+  }
+`;
+
+const _excluded = ["breadcrumbs", "children", "className", "iconButtonProps", "iconButtonRef", "fallbackTitle", "theme", "title"];
+const COMPONENT_NAME = 'AppBar';
+const CLASSNAME = 'redsift-app-bar';
 
 /**
  * The AppBar component.
  */
-declare const AppBar: Comp<AppBarProps, HTMLHeadingElement>;
+const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
+  var _breadcrumbs$, _appContainerState$pr;
+  const {
+      breadcrumbs,
+      children,
+      className,
+      iconButtonProps,
+      iconButtonRef,
+      fallbackTitle,
+      theme: propsTheme,
+      title: propsTitle
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const [scroll, setScroll] = useState(false);
+  useEffect(() => {
+    window.addEventListener('scroll', () => {
+      setScroll(window.scrollY > 8);
+    });
+  }, []);
+  const {
+    isLoaded
+  } = useIsLoaded();
+  const appContainerState = useContext(AppContainerContext);
+  const theme = useTheme(propsTheme);
+  const format = useMessageFormatter(intlMessages);
+  return /*#__PURE__*/React__default.createElement(StyledAppBar, _extends({}, forwardedProps, {
+    $hasBorder: scroll,
+    $isLoaded: isLoaded,
+    $isSidePanelCollapsed: appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked : true,
+    $isAppFullScreen: appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.hidden : false,
+    $theme: theme,
+    className: classNames(AppBar.className, className),
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${AppBar.className}__left`
+  }, appContainerState ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked ? /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      width: '30px',
+      height: '30px',
+      marginRight: '3px'
+    }
+  }) : /*#__PURE__*/React__default.createElement(IconButton, _extends({
+    className: `${AppBar.className}-left__collapse-button`
+  }, iconButtonProps, {
+    "aria-label": format('collapse'),
+    icon: mdiMenuOpen,
+    onClick: appContainerState.collapseSidePanel,
+    ref: iconButtonRef,
+    color: "grey"
+  }))) : null, propsTitle && typeof propsTitle !== 'string' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, propsTitle) : typeof propsTitle === 'string' ? /*#__PURE__*/React__default.createElement(Heading, {
+    as: "h1"
+  }, propsTitle) : breadcrumbs ? /*#__PURE__*/React__default.createElement(Breadcrumbs, {
+    "aria-label": "Breadcrumb"
+  }, appContainerState && appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked ? /*#__PURE__*/React__default.createElement(Breadcrumbs.Item, {
+    href: "/",
+    as: ((_breadcrumbs$ = breadcrumbs[0]) === null || _breadcrumbs$ === void 0 ? void 0 : _breadcrumbs$.as) || 'a'
+  }, typeof appContainerState.product === 'string' ? ProductName[appContainerState.product] : (_appContainerState$pr = appContainerState.product) === null || _appContainerState$pr === void 0 ? void 0 : _appContainerState$pr.name) : null, breadcrumbs.map((breadcrumbItem, index) => /*#__PURE__*/React__default.createElement(Breadcrumbs.Item, _extends({
+    key: index
+  }, breadcrumbItem, {
+    isDisabled: breadcrumbItem.isDisabled || breadcrumbItem.href === undefined,
+    as: index === breadcrumbs.length - 1 ? 'h1' : breadcrumbItem.href === undefined ? 'span' : breadcrumbItem.as || 'a'
+  })))) : fallbackTitle ? /*#__PURE__*/React__default.createElement(Heading, {
+    as: "h1"
+  }, fallbackTitle) : null), children ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${AppBar.className}__right`
+  }, children) : null);
+});
+AppBar.className = CLASSNAME;
+AppBar.displayName = COMPONENT_NAME;
 
-export { AppBarProps as A, StyledAppBarProps as S, AppBar as a };
+export { AppBar as A };
+//# sourceMappingURL=AppBar.js.map