@redsift/design-system 11.5.0-muiv5 → 11.6.0-alpha.0

package/_internal/Alert2.js

@@ -0,0 +1,197 @@
+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.
+ */
+const AlertVariant = {
+  success: 'success',
+  error: 'error',
+  warning: 'warning',
+  info: 'info'
+};
+const AlertStyleVariant = {
+  default: 'default',
+  minimal: 'minimal'
+};
+
+/**
+ * Component props.
+ */
+
+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.
+ */
+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, AlertStyleVariant as a, Alert as b };
+//# sourceMappingURL=Alert2.js.map

package/_internal/Alert2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert2.js","sources":["../../src/components/alert/types.ts","../../src/components/alert/intl/index.ts","../../src/components/alert/styles.ts","../../src/components/alert/Alert.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { ValueOf, StylingProps, Theme } from '../..';\n\n/**\n * Component variant.\n */\nexport const AlertVariant = {\n  success: 'success',\n  error: 'error',\n  warning: 'warning',\n  info: 'info',\n} as const;\nexport type AlertVariant = ValueOf<typeof AlertVariant>;\n\nexport const AlertStyleVariant = {\n  default: 'default',\n  minimal: 'minimal',\n} as const;\nexport type AlertStyleVariant = ValueOf<typeof AlertStyleVariant>;\n\n/**\n * Component props.\n */\nexport interface AlertProps extends ComponentProps<'div'>, StylingProps {\n  /** Whether the component can be closed or not. */\n  isClosable?: boolean;\n  /** Whether the component is closed or not. Used for controlled version. */\n  isClosed?: boolean;\n  /** Method to handle component change. */\n  onClose?(isClosed: boolean): void;\n  /** Title. */\n  title?: string;\n  /** Theme. */\n  theme?: Theme;\n  /** Variant */\n  variant?: AlertVariant;\n  /** Style variant. */\n  styleVariant?: AlertStyleVariant;\n}\n\nexport type StyledAlertProps = Omit<AlertProps, 'variant' | 'styleVariant'> & {\n  $hasTitle: boolean;\n  $isClosable: AlertProps['isClosable'];\n  $isClosed: AlertProps['isClosed'];\n  $variant: AlertProps['variant'];\n  $theme: AlertProps['theme'];\n  $styleVariant: AlertProps['styleVariant'];\n};\n","import enUS from './en-US.json';\nimport frFR from './fr-FR.json';\n\nexport default {\n  'en-US': enUS,\n  'fr-FR': frFR,\n};\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledAlertProps } from './types';\nimport { Theme } from '../../types';\n\n/**\n * Component style.\n */\nexport const StyledAlert = styled.div<StyledAlertProps>`\n  ${baseStyling}\n\n  padding: 16px;\n  ${({ $hasTitle, $isClosable, $isClosed, $variant, $styleVariant, $theme }) => css`\n    color: var(--redsift-color-neutral-${$theme === Theme.light ? 'x-dark-grey' : 'white'});\n    display: ${!$isClosed ? 'block' : 'none'};\n    background-color: ${$styleVariant == 'minimal'\n      ? `var(--redsift-color-neutral-${$theme !== Theme.light ? 'x-dark-grey' : 'white'})`\n      : `var(--redsift-color-${$theme}-components-alert-${$variant}-background)`};\n\n    border: ${$styleVariant == 'minimal'\n      ? `1px solid var(--redsift-color-${$theme}-components-alert-${$variant}-border)`\n      : 'none'};\n    border-radius: ${$styleVariant == 'minimal' ? '8px' : '4px'};\n\n    .redsift-alert-header__icon-button {\n      background-color: transparent;\n      padding: 0px;\n      .redsift-icon {\n        color: var(--redsift-color-neutral-x-dark-grey);\n      }\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--redsift-color-notifications-${$variant}-active);\n      }\n    }\n\n    .redsift-alert__content {\n      margin-top: ${$hasTitle ? '8px' : '-24px'};\n      margin-left: 38px;\n      ${$isClosable\n        ? css`\n            margin-right: 24px;\n          `\n        : ''};\n    }\n  `}\n`;\n","import React, { forwardRef, RefObject, useCallback, useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\nimport { useMessageFormatter } from '../../react-aria/react-aria/i18n';\nimport intlMessages from './intl';\n\nimport {\n  mdiAlert,\n  mdiTriangleOutline,\n  mdiAlertCircle,\n  mdiAlertOutline,\n  mdiCheck,\n  mdiCheckCircle,\n  mdiClose,\n  mdiInformation,\n  mdiInformationOutline,\n} from '@redsift/icons';\nimport { IconButton } from '../icon-button';\nimport { NotificationsColorPalette, Comp, Theme } from '../../types';\nimport { StyledAlert } from './styles';\nimport { AlertProps, AlertVariant, AlertStyleVariant } from './types';\nimport { Icon } from '../icon';\nimport { Text } from '../text';\nimport { Flexbox } from '../flexbox';\nimport { RedsiftTypographyFontWeightSemiBold } from '../../utils';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Alert';\nconst CLASSNAME = 'redsift-alert';\n\nconst getVariant = (variant: AlertVariant, styleVariant: AlertStyleVariant, theme: Theme) => {\n  switch (variant) {\n    case AlertVariant.info:\n    default:\n      return {\n        color: theme === Theme.light ? NotificationsColorPalette.info : 'white',\n        icon: styleVariant == 'default' ? mdiInformation : mdiInformationOutline,\n      };\n    case AlertVariant.error:\n      return {\n        color: theme === Theme.light ? NotificationsColorPalette.error : 'white',\n        icon: styleVariant == 'default' ? mdiAlertCircle : mdiAlertOutline,\n      };\n    case AlertVariant.success:\n      return {\n        color: theme === Theme.light ? NotificationsColorPalette.success : 'white',\n        icon: styleVariant == 'default' ? mdiCheckCircle : mdiCheck,\n      };\n    case AlertVariant.warning:\n      return {\n        color: theme === Theme.light ? NotificationsColorPalette.warning : 'white',\n        icon: styleVariant == 'default' ? mdiAlert : mdiTriangleOutline,\n      };\n  }\n};\n\n/**\n * The Alert component.\n */\nexport const Alert: Comp<AlertProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    children,\n    className,\n    isClosable,\n    isClosed: propsIsClosed,\n    onClose,\n    theme: propsTheme,\n    title,\n    variant: propsVariant,\n    styleVariant: propsStyleVariant,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n  const variant = Object.values(AlertVariant).includes(propsVariant!) ? propsVariant : 'info';\n  const styleVariant = Object.values(AlertStyleVariant).includes(propsStyleVariant!) ? propsStyleVariant : 'default';\n\n  const format = useMessageFormatter(intlMessages);\n\n  const { color, icon } = getVariant(variant!, styleVariant!, theme);\n  const [isClosed, setIsClosed] = useState(propsIsClosed);\n\n  useEffect(() => {\n    setIsClosed(propsIsClosed);\n  }, [propsIsClosed]);\n\n  const handleClose = useCallback(() => {\n    if (onClose) {\n      onClose(true);\n    }\n    if (propsIsClosed === undefined || propsIsClosed === null) {\n      setIsClosed(true);\n    }\n  }, [onClose]);\n\n  return (\n    <StyledAlert\n      {...forwardedProps}\n      className={classNames(Alert.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n      $hasTitle={Boolean(title)}\n      $isClosable={isClosable}\n      $isClosed={isClosed}\n      $theme={theme}\n      $variant={variant}\n      $styleVariant={styleVariant}\n    >\n      <Flexbox className={`${Alert.className}__header`} justifyContent=\"space-between\">\n        <Flexbox className={`${Alert.className}-header__title`} gap=\"14px\" alignItems=\"center\">\n          <Icon icon={icon} color={color} />\n          {title ? <Text fontWeight={RedsiftTypographyFontWeightSemiBold}>{title}</Text> : null}\n        </Flexbox>\n\n        {isClosable ? (\n          <IconButton\n            aria-label={format('close')}\n            className={`${Alert.className}-header__icon-button`}\n            icon={mdiClose}\n            onClick={handleClose}\n            color={color}\n          />\n        ) : null}\n      </Flexbox>\n\n      {children ? <div className={`${Alert.className}__content`}>{children}</div> : null}\n    </StyledAlert>\n  );\n});\nAlert.className = CLASSNAME;\nAlert.displayName = COMPONENT_NAME;\n"],"names":["AlertVariant","success","error","warning","info","AlertStyleVariant","default","minimal","enUS","frFR","StyledAlert","styled","div","baseStyling","_ref","$hasTitle","$isClosable","$isClosed","$variant","$styleVariant","$theme","css","Theme","light","COMPONENT_NAME","CLASSNAME","getVariant","variant","styleVariant","theme","color","NotificationsColorPalette","icon","mdiInformation","mdiInformationOutline","mdiAlertCircle","mdiAlertOutline","mdiCheckCircle","mdiCheck","mdiAlert","mdiTriangleOutline","Alert","forwardRef","props","ref","children","className","isClosable","isClosed","propsIsClosed","onClose","propsTheme","title","propsVariant","propsStyleVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","includes","format","useMessageFormatter","intlMessages","setIsClosed","useState","useEffect","handleClose","useCallback","undefined","React","createElement","_extends","classNames","Boolean","Flexbox","justifyContent","gap","alignItems","Icon","Text","fontWeight","RedsiftTypographyFontWeightSemiBold","IconButton","mdiClose","onClick","displayName"],"mappings":"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"}

package/_internal/AppBar.js

@@ -0,0 +1,248 @@
+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 style.
+ */
+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.
+ */
+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 { AppBar as A };
+//# sourceMappingURL=AppBar.js.map

package/_internal/AppBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppBar.js","sources":["../../src/components/app-bar/intl/index.ts","../../src/components/app-bar/styles.ts","../../src/components/app-bar/AppBar.tsx"],"sourcesContent":["import enUS from './en-US.json';\nimport frFR from './fr-FR.json';\n\nexport default {\n  'en-US': enUS,\n  'fr-FR': frFR,\n};\n","import styled, { css } from 'styled-components';\nimport { StyledAppBarProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppBar = styled.header<StyledAppBarProps>`\n  align-content: center;\n  align-items: center;\n\n  ${({ $theme }) => css`\n    background-color: var(--redsift-color-${$theme}-components-app-bar-background);\n    color: var(--redsift-color-${$theme}-components-text);\n  `};\n\n  display: flex;\n  flex-direction: row;\n  z-index: var(--redsift-layout-z-index-header);\n\n  ${({ $isAppFullScreen }) =>\n    !$isAppFullScreen\n      ? css`\n          height: 92px;\n          @media (max-width: 1080px) {\n            height: 72px;\n          }\n        `\n      : css`\n          height: 0;\n          visibility: hidden;\n          @media (max-width: 1080px) {\n            height: 0;\n          }\n        `}\n\n  justify-content: space-between;\n  left: 0;\n  position: sticky;\n  top: 0;\n\n  ${({ $hasBorder, $theme }) =>\n    $hasBorder\n      ? css`\n          border-bottom: 2px solid var(--redsift-color-${$theme}-components-app-bar-border);\n        `\n      : css`\n          border-bottom: none;\n        `}\n\n  ${({ $isSidePanelCollapsed, $isAppFullScreen }) =>\n    $isAppFullScreen\n      ? css`\n          width: calc(100%);\n        `\n      : !$isSidePanelCollapsed\n      ? css`\n          transform: translate(254px);\n          width: calc(100% - 254px);\n        `\n      : css`\n          transform: translate(64px);\n          width: calc(100% - 64px);\n        `}\n\n  ${({ $isLoaded }) =>\n    $isLoaded\n      ? css`\n          transition: transform 0.25s ease-out, width 0.25s ease-out, height 0.25s ease-out, visibility 0.25s ease-out;\n        `\n      : ''}\n\n  h1 {\n    margin: unset;\n    padding: unset;\n  }\n\n  .redsift-icon-button {\n    > span,\n    > span > svg {\n      width: 30px;\n      height: 30px;\n    }\n  }\n\n  .redsift-app-bar__left {\n    align-content: center;\n    align-items: center;\n    display: inline-flex;\n    flex-direction: row;\n    gap: 8px;\n    justify-content: center;\n    margin-left: 19px;\n  }\n\n  .redsift-app-bar-left__expand-button,\n  .redsift-app-bar-left__collapse-button {\n    margin-right: 3px;\n    padding: 2px;\n    margin-left: -2px;\n  }\n\n  .redsift-app-bar__right {\n    display: inline-flex;\n    margin: 16px;\n  }\n\n  .redsift-breadcrumb-item,\n  .redsift-breadcrumbs__separator {\n    font-family: var(--redsift-typography-h1-font-family) !important;\n    font-size: var(--redsift-typography-h1-font-size) !important;\n    font-weight: var(--redsift-typography-body-font-weight) !important;\n    line-height: var(--redsift-typography-h1-line-height) !important;\n    color: ${({ $theme }) => css`var(--redsift-color-${$theme}-components-app-bar-breadcrumb-default) !important`};\n  }\n\n  h1.redsift-breadcrumb-item {\n    font-weight: var(--redsift-typography-h1-font-weight) !important;\n  }\n`;\n","import React, { forwardRef, RefObject, useContext, useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\nimport { useMessageFormatter } from '../../react-aria/react-aria/i18n';\nimport intlMessages from './intl';\n\nimport { mdiMenuOpen } from '@redsift/icons';\nimport { Comp, ProductName } from '../../types';\nimport { IconButton } from '../icon-button';\nimport { AppContainerContext } from '../app-container/context';\nimport { useIsLoaded } from '../../hooks/useIsLoaded';\nimport { StyledAppBar } from './styles';\nimport { AppBarProps } from './types';\nimport { Heading } from '../heading';\nimport { AppSidePanelVariant } from '../app-side-panel';\nimport { Breadcrumbs } from '../breadcrumbs';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'AppBar';\nconst CLASSNAME = 'redsift-app-bar';\n\n/**\n * The AppBar component.\n */\nexport const AppBar: Comp<AppBarProps, HTMLHeadingElement> = forwardRef((props, ref) => {\n  const {\n    breadcrumbs,\n    children,\n    className,\n    iconButtonProps,\n    iconButtonRef,\n    fallbackTitle,\n    theme: propsTheme,\n    title: propsTitle,\n    ...forwardedProps\n  } = props;\n\n  const [scroll, setScroll] = useState(false);\n  useEffect(() => {\n    window.addEventListener('scroll', () => {\n      setScroll(window.scrollY > 8);\n    });\n  }, []);\n\n  const { isLoaded } = useIsLoaded();\n  const appContainerState = useContext(AppContainerContext);\n  const theme = useTheme(propsTheme);\n\n  const format = useMessageFormatter(intlMessages);\n\n  return (\n    <StyledAppBar\n      {...forwardedProps}\n      $hasBorder={scroll}\n      $isLoaded={isLoaded}\n      $isSidePanelCollapsed={\n        appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked : true\n      }\n      $isAppFullScreen={appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.hidden : false}\n      $theme={theme}\n      className={classNames(AppBar.className, className)}\n      ref={ref as RefObject<HTMLHeadingElement>}\n    >\n      <div className={`${AppBar.className}__left`}>\n        {appContainerState ? (\n          <>\n            {appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked ? (\n              <div style={{ width: '30px', height: '30px', marginRight: '3px' }} />\n            ) : (\n              <IconButton\n                className={`${AppBar.className}-left__collapse-button`}\n                {...iconButtonProps}\n                aria-label={format('collapse')}\n                icon={mdiMenuOpen}\n                onClick={appContainerState.collapseSidePanel}\n                ref={iconButtonRef as RefObject<HTMLButtonElement>}\n                color=\"grey\"\n              />\n            )}\n          </>\n        ) : null}\n        {propsTitle && typeof propsTitle !== 'string' ? (\n          <>{propsTitle}</>\n        ) : typeof propsTitle === 'string' ? (\n          <Heading as=\"h1\">{propsTitle}</Heading>\n        ) : breadcrumbs ? (\n          <Breadcrumbs aria-label=\"Breadcrumb\">\n            {appContainerState && appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked ? (\n              <Breadcrumbs.Item href=\"/\" as={breadcrumbs[0]?.as || 'a'}>\n                {typeof appContainerState.product === 'string'\n                  ? ProductName[appContainerState.product]\n                  : appContainerState.product?.name}\n              </Breadcrumbs.Item>\n            ) : null}\n            {breadcrumbs.map((breadcrumbItem, index) => (\n              <Breadcrumbs.Item\n                key={index}\n                {...breadcrumbItem}\n                isDisabled={breadcrumbItem.isDisabled || breadcrumbItem.href === undefined}\n                as={\n                  index === breadcrumbs.length - 1\n                    ? 'h1'\n                    : breadcrumbItem.href === undefined\n                    ? 'span'\n                    : breadcrumbItem.as || 'a'\n                }\n              />\n            ))}\n          </Breadcrumbs>\n        ) : fallbackTitle ? (\n          <Heading as=\"h1\">{fallbackTitle}</Heading>\n        ) : null}\n      </div>\n      {children ? <div className={`${AppBar.className}__right`}>{children}</div> : null}\n    </StyledAppBar>\n  );\n});\nAppBar.className = CLASSNAME;\nAppBar.displayName = COMPONENT_NAME;\n"],"names":["enUS","frFR","StyledAppBar","styled","header","_ref","$theme","css","_ref2","$isAppFullScreen","_ref3","$hasBorder","_ref4","$isSidePanelCollapsed","_ref5","$isLoaded","_ref6","COMPONENT_NAME","CLASSNAME","AppBar","forwardRef","props","ref","_breadcrumbs$","_appContainerState$pr","breadcrumbs","children","className","iconButtonProps","iconButtonRef","fallbackTitle","theme","propsTheme","title","propsTitle","forwardedProps","_objectWithoutProperties","_excluded","scroll","setScroll","useState","useEffect","window","addEventListener","scrollY","isLoaded","useIsLoaded","appContainerState","useContext","AppContainerContext","useTheme","format","useMessageFormatter","intlMessages","React","createElement","_extends","sidePanelVariant","AppSidePanelVariant","shrinked","hidden","classNames","Fragment","style","width","height","marginRight","IconButton","icon","mdiMenuOpen","onClick","collapseSidePanel","color","Heading","as","Breadcrumbs","Item","href","product","ProductName","name","map","breadcrumbItem","index","key","isDisabled","undefined","length","displayName"],"mappings":"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"}

package/_internal/AppContainer.js

@@ -0,0 +1,142 @@
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef, useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { A as AppContainerContext } from './context.js';
+import styled from 'styled-components';
+import { A as AppSidePanelVariant } from './types.js';
+import { I as I18nProvider } from './context2.js';
+import { u as useTheme, a as ThemeProvider } from './useTheme.js';
+
+/**
+ * Component style.
+ */
+const StyledAppContainer = styled.div`
+  box-sizing: content-box;
+
+  --redsift-color-text-primary: ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return `var(--redsift-color-${$theme}-components-text-primary);`;
+}};
+  --redsift-color-text-secondary: ${_ref2 => {
+  let {
+    $theme
+  } = _ref2;
+  return `var(--redsift-color-${$theme}-components-text-secondary);`;
+}};
+  color: ${_ref3 => {
+  let {
+    $theme
+  } = _ref3;
+  return `var(--redsift-color-${$theme}-components-text-primary)`;
+}};
+`;
+
+const _excluded = ["children", "className", "locale", "product", "theme", "isFullScreen"];
+const COMPONENT_NAME = 'AppContainer';
+const CLASSNAME = 'redsift-app-container';
+const RadarSvgLinearGradient = () => /*#__PURE__*/React__default.createElement("svg", {
+  width: "0",
+  height: "0"
+}, /*#__PURE__*/React__default.createElement("linearGradient", {
+  id: "radar-gradient-default",
+  x1: "100%",
+  y1: "100%",
+  x2: "0%",
+  y2: "0%"
+}, /*#__PURE__*/React__default.createElement("stop", {
+  stopColor: "rgba(81, 183, 164, 1)",
+  offset: "0%"
+}), /*#__PURE__*/React__default.createElement("stop", {
+  stopColor: "rgba(0, 129, 195, 1)",
+  offset: "100%"
+})), /*#__PURE__*/React__default.createElement("linearGradient", {
+  id: "radar-gradient-hover",
+  x1: "100%",
+  y1: "100%",
+  x2: "0%",
+  y2: "0%"
+}, /*#__PURE__*/React__default.createElement("stop", {
+  stopColor: "rgba(65, 146, 131, 1)",
+  offset: "0%"
+}), /*#__PURE__*/React__default.createElement("stop", {
+  stopColor: "rgba(3, 114, 171, 1)",
+  offset: "100%"
+})), /*#__PURE__*/React__default.createElement("linearGradient", {
+  id: "radar-gradient-active",
+  x1: "100%",
+  y1: "100%",
+  x2: "0%",
+  y2: "0%"
+}, /*#__PURE__*/React__default.createElement("stop", {
+  stopColor: "rgba(58, 122, 110, 1)",
+  offset: "0%"
+}), /*#__PURE__*/React__default.createElement("stop", {
+  stopColor: "rgba(0, 96, 145, 1)",
+  offset: "100%"
+})));
+
+/**
+ * The AppContainer component.
+ */
+const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
+  const _ref = useRef();
+  const divRef = ref || _ref;
+  const {
+      children,
+      className,
+      locale,
+      product,
+      theme: propsTheme,
+      isFullScreen = false
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const [sidePanelVariant, setSidePanelVariant] = useState(isFullScreen ? AppSidePanelVariant.hidden : AppSidePanelVariant.standard);
+  const [breadcrumbs, setBreadcrumbs] = useState();
+  useEffect(() => {
+    if (isFullScreen && sidePanelVariant !== AppSidePanelVariant.hidden) {
+      setSidePanelVariant(AppSidePanelVariant.hidden);
+    } else if (!isFullScreen && sidePanelVariant !== AppSidePanelVariant.standard) {
+      setSidePanelVariant(AppSidePanelVariant.standard);
+    }
+  }, [isFullScreen]);
+  const state = {
+    collapseSidePanel() {
+      setSidePanelVariant(AppSidePanelVariant.shrinked);
+    },
+    expandSidePanel() {
+      setSidePanelVariant(AppSidePanelVariant.standard);
+    },
+    setBreadcrumbs(breadcrumbs) {
+      setBreadcrumbs(breadcrumbs);
+    },
+    product,
+    breadcrumbs,
+    sidePanelVariant,
+    setSidePanelVariant,
+    appContainerRef: divRef,
+    isFullScreen
+  };
+  return /*#__PURE__*/React__default.createElement(StyledAppContainer, _extends({}, forwardedProps, {
+    id: "redsift-app-container",
+    $theme: theme,
+    $product: product,
+    className: classNames(AppContainer.className, className),
+    ref: divRef
+  }), /*#__PURE__*/React__default.createElement(AppContainerContext.Provider, {
+    value: state
+  }, /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(I18nProvider, {
+    locale: locale
+  }, children))), /*#__PURE__*/React__default.createElement(RadarSvgLinearGradient, null));
+});
+AppContainer.className = CLASSNAME;
+AppContainer.displayName = COMPONENT_NAME;
+
+export { AppContainer as A, RadarSvgLinearGradient as R };
+//# sourceMappingURL=AppContainer.js.map