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

package/_internal/SideNavigationMenuItem.js

@@ -1,9 +1,304 @@
-import { f as SideNavigationMenuItemProps } from './types23.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef, useContext, useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
+import styled, { css } from 'styled-components';
+import { a as Icon, I as IconSize } from './Icon2.js';
+import { a as Badge, B as BadgeVariant } from './Badge2.js';
+import { u as useTheme } from './useTheme.js';
+import { F as Flexbox } from './Flexbox2.js';
+
+/**
+ * Component variant.
+ */
+const SideNavigationMenuBarVariant = {
+  shrinked: 'shrinked',
+  standard: 'standard'
+};
+
+/**
+ * Context props.
+ */
+
+/**
+ * Component props.
+ */
+
+/**
+ * Hook props.
+ */
+
+const SideNavigationMenuBarContext = /*#__PURE__*/React__default.createContext(null);
+
+const SideNavigationMenuContext = /*#__PURE__*/React__default.createContext(null);
+
+const StyledSideNavigationMenuItemIndicatorContainer = styled.div`
+  min-width: 4px;
+`;
+const StyledSideNavigationMenuItemIndicator = styled.div`
+  position: relative;
+  width: 4px;
+  height: 40px;
+  border-radius: 0px 4px 4px 0px;
+  background-color: ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return `var(--redsift-color-${$theme}-components-side-navigation-current-marker)`;
+}};
+`;
+const StyledSideNavigationMenuItemBorder = styled.div`
+  position: relative;
+  width: 100%;
+  height: 1px;
+  background-color: var(--redsift-color-neutral-light-grey);
+  margin-left: 62px;
+  margin-top: -1px;
+`;
+
+/**
+ * Component style.
+ */
+const StyledSideNavigationMenuItem = styled.a`
+  /**
+   * Common style
+   */
+  ${_ref2 => {
+  let {
+    $isDisabled,
+    $theme,
+    $color
+  } = _ref2;
+  return !$isDisabled ? css`
+          & {
+            color: ${$color ? $color : `var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-resting)`};
+          }
+        ` : css`
+          & {
+            color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-disabled);
+          }
+        `;
+}}
+  align-items: center;
+  border-radius: 0 4px 4px 0;
+  display: flex;
+  font-family: var(--redsift-typography-body-font-family);
+  font-size: 14px;
+  font-weight: var(--redsift-typography-body-font-weight);
+  gap: 8px;
+  line-height: var(--redsift-typography-body-line-height);
+  overflow: hidden;
+  text-decoration: none;
+  text-transform: uppercase;
+  width: 100%;
+
+  &:hover,
+  &:focus-visible {
+    outline: none;
+
+    ${_ref3 => {
+  let {
+    $isDisabled,
+    $theme,
+    $color
+  } = _ref3;
+  return !$isDisabled ? css`
+            background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-hover);
+            & {
+              color: ${$color ? $color : `var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-hover)`};
+            }
+          ` : '';
+}}
+  }
+
+  :active {
+    ${_ref4 => {
+  let {
+    $isDisabled,
+    $theme
+  } = _ref4;
+  return !$isDisabled ? css`
+            background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-active);
+          ` : '';
+}}
+  }
+
+  ${_ref5 => {
+  let {
+    $variant
+  } = _ref5;
+  return css`
+    @media (prefers-reduced-motion: no-preference) {
+      :focus-visible {
+        > span${$variant === SideNavigationMenuBarVariant.shrinked ? '.first' : '.content'} {
+          outline: 2px solid var(--redsift-color-primary-n);
+          transition: outline-offset 75ms ease-out;
+        }
+
+        :not(:active):focus-visible {
+          > span${$variant === SideNavigationMenuBarVariant.shrinked ? '.first' : '.content'} {
+            transition-duration: 0.25s;
+          }
+        }
+      }
+
+      :not(:active):focus-visible {
+        > span${$variant === SideNavigationMenuBarVariant.shrinked ? '.first' : '.content'} {
+          outline-offset: 0.25rem;
+        }
+      }
+    }
+
+    .content {
+      transition: opacity 300ms ease-out;
+      opacity: ${$variant === SideNavigationMenuBarVariant.shrinked ? '0' : '1'};
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  `;
+}}
+
+  ${_ref6 => {
+  let {
+    $hasIcon,
+    $isSecondLevel,
+    $variant,
+    $theme
+  } = _ref6;
+  return !$isSecondLevel ? css`
+          /**
+           * First-level items
+           */
+
+          background-color: var(--redsift-color-${$theme}-components-side-navigation-background);
+          height: 40px;
+          margin-bottom: 4px;
+          margin-left: -4px;
+          transition: padding 300ms ease-out;
+          padding: 0 16px 0 ${$variant === SideNavigationMenuBarVariant.shrinked ? '16px' : '16px'};
+
+          .redsift-icon.first {
+            box-sizing: unset;
+          }
+        ` : `
+    /**
+     * Second-level items
+     */
+
+    background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-secondary);
+    font-size: var(--redsift-typography-caption-font-size);
+    padding-bottom: 4px;
+    padding-left: ${$hasIcon ? '18px' : '54px'};
+    padding-right: 0;
+    padding-top: 4px;
+    border-radius: 0;
+
+    .redsift-icon.first {
+      box-sizing: unset;
+      margin-right: 8px;
+    }
+  `;
+}}
+`;
+
+const _excluded = ["as", "badge", "badgeProps", "children", "className", "color", "hasBorder", "href", "icon", "iconProps", "iconRef", "isCurrent", "isDisabled", "isSecondLevel", "onClick", "onKeyDown", "tabIndex", "theme"];
+const COMPONENT_NAME = 'SideNavigationMenuItem';
+const CLASSNAME = 'redsift-side-navigation-menu-item';
 
 /**
  * The SideNavigationMenuItem component.
  */
-declare const SideNavigationMenuItem: Comp<SideNavigationMenuItemProps, HTMLAnchorElement>;
+const SideNavigationMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const menuItemRef = ref || useRef();
+  const {
+      as,
+      badge,
+      badgeProps,
+      children,
+      className,
+      color,
+      hasBorder,
+      href,
+      icon,
+      iconProps,
+      iconRef = useRef(),
+      isCurrent,
+      isDisabled,
+      isSecondLevel,
+      onClick,
+      onKeyDown,
+      tabIndex,
+      theme: propsTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  warnIfNoAccessibleLabelFound(props, [children], 'SideNavigationMenuItem');
+  const sideNavigationMenuBarContext = useContext(SideNavigationMenuBarContext);
+  const sideNavigationMenuContext = useContext(SideNavigationMenuContext);
+  const theme = useTheme(propsTheme);
+  const [isFirstChild, setIsFirstChild] = useState(false);
+  const {
+    menuItems
+  } = sideNavigationMenuContext || sideNavigationMenuBarContext || {};
+  useEffect(() => {
+    if (!(sideNavigationMenuContext || sideNavigationMenuBarContext)) {
+      setIsFirstChild(true);
+      return;
+    }
+    const menuItemNode = menuItemRef.current;
+    if (menuItemNode) {
+      if (!menuItems.size) {
+        setIsFirstChild(true);
+      }
+      menuItems.add(menuItemNode);
+    }
+    return () => {
+      menuItems.delete(menuItemNode);
+    };
+  }, [menuItems]);
+  const sideNavigationVariant = sideNavigationMenuBarContext === null || sideNavigationMenuBarContext === void 0 ? void 0 : sideNavigationMenuBarContext.sideNavigationMenuBarVariant;
+  return /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "column",
+    gap: "0px"
+  }, /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "row",
+    gap: "0px"
+  }, !isSecondLevel ? /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuItemIndicatorContainer, null, isCurrent ? /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuItemIndicator, {
+    $theme: theme
+  }) : null) : null, /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuItem, _extends({
+    as: as,
+    role: "menuitem"
+  }, forwardedProps, {
+    $color: color,
+    $hasIcon: icon !== undefined,
+    $isCurrent: isCurrent,
+    $isDisabled: isDisabled,
+    $isSecondLevel: isSecondLevel,
+    $theme: theme,
+    $variant: sideNavigationVariant,
+    "aria-current": isCurrent ? 'page' : undefined,
+    "aria-disabled": isDisabled,
+    className: classNames(SideNavigationMenuItem.className, className),
+    href: !isDisabled ? href : undefined,
+    onClick: isDisabled ? undefined : onClick,
+    onKeyDown: isDisabled ? undefined : onKeyDown,
+    ref: menuItemRef,
+    tabIndex: tabIndex !== undefined ? tabIndex : !sideNavigationMenuContext && isFirstChild ? 0 : -1
+  }), !isSecondLevel || icon ? /*#__PURE__*/React__default.createElement(Icon, _extends({
+    color: `var(--redsift-side-navigation-color-menu-item-text-${isSecondLevel || isDisabled ? 'disabled' : 'resting'})`
+  }, iconProps, {
+    icon: icon,
+    ref: iconRef,
+    className: "first",
+    size: isSecondLevel ? IconSize.small : IconSize.medium
+  })) : null, /*#__PURE__*/React__default.createElement("span", {
+    className: "content"
+  }, children), badge ? /*#__PURE__*/React__default.createElement(Badge, _extends({
+    variant: BadgeVariant.standard,
+    color: "error"
+  }, badgeProps), badge) : null)), isSecondLevel && hasBorder ? /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuItemBorder, null) : null);
+});
+SideNavigationMenuItem.className = CLASSNAME;
+SideNavigationMenuItem.displayName = COMPONENT_NAME;
 
-export { SideNavigationMenuItem as S };
+export { SideNavigationMenuBarVariant as S, SideNavigationMenuItem as a, SideNavigationMenuBarContext as b, SideNavigationMenuContext as c, StyledSideNavigationMenuItemIndicator as d };
+//# sourceMappingURL=SideNavigationMenuItem.js.map

package/_internal/Skeleton2.js

@@ -1,15 +1,42 @@
-import { a as SkeletonTextProps } from './types26.js';
-import { S as SkeletonCircleProps } from './types25.js';
-import { S as SkeletonProps } from './types24.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { S as StyledSkeleton } from './styles6.js';
+import { S as SkeletonCircle } from './SkeletonCircle.js';
+import { S as SkeletonText } from './SkeletonText.js';
+import { u as useTheme } from './useTheme.js';
+
+const _excluded = ["children", "className", "isLoaded", "theme"];
+const COMPONENT_NAME = 'Skeleton';
+const CLASSNAME = 'redsift-skeleton';
 
 /**
  * The Skeleton component.
  */
-declare const BaseSkeleton: Comp<SkeletonProps, HTMLDivElement>;
-declare const Skeleton: Comp<SkeletonProps, HTMLDivElement> & {
-    Circle: Comp<SkeletonCircleProps, HTMLDivElement>;
-    Text: Comp<SkeletonTextProps, HTMLDivElement>;
-};
+const BaseSkeleton = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      isLoaded,
+      theme: propsTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  if (isLoaded) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
+  }
+  return /*#__PURE__*/React__default.createElement(StyledSkeleton, _extends({}, forwardedProps, {
+    $theme: theme,
+    className: classNames(BaseSkeleton.className, className),
+    ref: ref
+  }), typeof children === 'string' ? /*#__PURE__*/React__default.createElement("span", null, children) : children);
+});
+BaseSkeleton.className = CLASSNAME;
+BaseSkeleton.displayName = COMPONENT_NAME;
+const Skeleton = Object.assign(BaseSkeleton, {
+  Circle: SkeletonCircle,
+  Text: SkeletonText
+});
 
 export { BaseSkeleton as B, Skeleton as S };
+//# sourceMappingURL=Skeleton2.js.map

package/_internal/SkeletonCircle.js

@@ -1,9 +1,58 @@
-import { S as SkeletonCircleProps } from './types25.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled, { css } from 'styled-components';
+import { S as StyledSkeleton } from './styles6.js';
+import { u as useTheme } from './useTheme.js';
+
+/**
+ * Component style.
+ */
+const StyledSkeletonCircle = styled(StyledSkeleton)`
+  border-radius: 50%;
+
+  ${_ref => {
+  let {
+    height,
+    width
+  } = _ref;
+  return css`
+    &,
+    &::after {
+      ${height ? `height: ${height};` : width ? `height: ${width};` : ''}
+      ${width ? `width: ${width};` : height ? `width: ${height};` : ''}
+    }
+  `;
+}}
+`;
+
+const _excluded = ["children", "className", "isLoaded", "theme"];
+const COMPONENT_NAME = 'SkeletonCircle';
+const CLASSNAME = 'redsift-skeleton-circle';
 
 /**
  * The SkeletonCircle component.
  */
-declare const SkeletonCircle: Comp<SkeletonCircleProps, HTMLDivElement>;
+const SkeletonCircle = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      isLoaded,
+      theme: propsTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  if (isLoaded) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
+  }
+  return /*#__PURE__*/React__default.createElement(StyledSkeletonCircle, _extends({}, forwardedProps, {
+    $theme: theme,
+    className: classNames(SkeletonCircle.className, className),
+    ref: ref
+  }), typeof children === 'string' ? /*#__PURE__*/React__default.createElement("span", null, children) : children);
+});
+SkeletonCircle.className = CLASSNAME;
+SkeletonCircle.displayName = COMPONENT_NAME;
 
 export { SkeletonCircle as S };
+//# sourceMappingURL=SkeletonCircle.js.map

package/_internal/SkeletonText.js

@@ -1,9 +1,77 @@
-import { a as SkeletonTextProps } from './types26.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled, { css } from 'styled-components';
+import { S as StyledSkeleton } from './styles6.js';
+import { u as useTheme } from './useTheme.js';
+
+/**
+ * Component style.
+ */
+const StyledSkeletonText = styled(StyledSkeleton)`
+  background-clip: content-box;
+
+  ${_ref => {
+  let {
+    height,
+    $fontSize,
+    $lineHeight,
+    $variant
+  } = _ref;
+  return height ? css`
+          &,
+          &::after {
+            height: ${height};
+          }
+        ` : css`
+          &,
+          &::after {
+            height: ${$fontSize ? $fontSize : `var(--redsift-typography-${$variant}-font-size)`};
+            padding: calc(
+                (
+                    ${$lineHeight ? $lineHeight : `var(--redsift-typography-${$variant}-line-height)`} -
+                      ${$fontSize ? $fontSize : `var(--redsift-typography-${$variant}-font-size)`}
+                  ) / 2
+              )
+              0px;
+          }
+        `;
+}}}
+`;
+
+const _excluded = ["children", "className", "fontSize", "isLoaded", "lineHeight", "theme", "variant"];
+const COMPONENT_NAME = 'SkeletonText';
+const CLASSNAME = 'redsift-skeleton-text';
 
 /**
  * The SkeletonText component.
  */
-declare const SkeletonText: Comp<SkeletonTextProps, HTMLDivElement>;
+const SkeletonText = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      fontSize,
+      isLoaded,
+      lineHeight,
+      theme: propsTheme,
+      variant = 'body'
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  if (isLoaded) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
+  }
+  return /*#__PURE__*/React__default.createElement(StyledSkeletonText, _extends({}, forwardedProps, {
+    className: classNames(SkeletonText.className, className),
+    ref: ref,
+    $fontSize: fontSize,
+    $lineHeight: lineHeight,
+    $theme: theme,
+    $variant: variant
+  }), typeof children === 'string' ? /*#__PURE__*/React__default.createElement("span", null, children) : children);
+});
+SkeletonText.className = CLASSNAME;
+SkeletonText.displayName = COMPONENT_NAME;
 
 export { SkeletonText as S };
+//# sourceMappingURL=SkeletonText.js.map