@atlaskit/side-navigation 11.1.14 → 11.1.16

package/dist/es2019/components/NestableNavigationContent/context.js

@@ -1,43 +0,0 @@
-import { createContext, useContext } from 'react';
-
-/**
- * @internal
- */
-
-/**
- * @internal
- */
-export const NestedContext = /*#__PURE__*/createContext(undefined);
-export const useNestedContext = () => {
-  const context = useContext(NestedContext);
-  if (!context) {
-    let error = '';
-    if (process.env.NODE_ENV === 'development') {
-      error = `
-To use a <NestingItem /> it needs to be a descendant of <NestableNavigationContent>.
-You probably need to replace your <NavigationContent> with <NestableNavigationContent>.
-
-import { NestableNavigationContent } from '@atlaskit/side-navigation';
-      `;
-    }
-    throw new Error(error);
-  }
-  return context;
-};
-
-/**
- * Used by children of the NestableNavigationContent component to see if they should render or not.
- * If `shouldRender` returns `true` - return your nodes.
- * If it returns `false` - either return `null` or `children` if you have children.
- */
-export const useShouldNestedElementRender = () => {
-  const context = useContext(NestedContext);
-  if (!context) {
-    return {
-      shouldRender: true
-    };
-  }
-  return {
-    shouldRender: context.currentStackId === context.parentId
-  };
-};

package/dist/es2019/components/Section/index.js

@@ -1,3 +0,0 @@
-export { default as HeadingItem } from './heading-item';
-export { default as Section } from './section';
-export { default as SkeletonHeadingItem } from './skeleton-heading-item';

package/dist/esm/components/NavigationContent/styles.js

@@ -1,120 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from '../../common/constants';
-var scrollIndicatorMaskZIndex = 2;
-var scrollIndicatorZIndex = 1;
-var scrollIndicatorHeight = 2;
-var scrollIndicatorBorderRadius = '1px';
-var containerPadding = 8;
-var itemHeadingContentHeight = 16; // Originally headingSizes.h100.lineHeight from '@atlaskit/theme/typography'
-var skeletonHeadingHeight = containerPadding;
-var skeletonHeadingMarginOffset = 3;
-// Skeleton content is slightly shorter than the real content.
-// Because of that we slightly increase the top margin to offset this so the
-// containing size both real and skeleton always equal approx 30px.
-var skeletonHeadingTopMargin = containerPadding * 2.5 + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset;
-// We want to move the entire body up by 3px without affecting the height of the skeleton container.
-var skeletonHeadingBottomMargin = containerPadding * 0.75 + skeletonHeadingMarginOffset;
-/**
- * This outer container css contains the "real" scroll indicators which are
- * always rendered to the screen.
- * They are "conditionally" shown from the users perspective using the inner container CSS
- * which has other pseudo elements which "mask" the "real" scroll indicators.
- */
-export var outerContainerCSS = function outerContainerCSS(opts) {
-  return {
-    // Flex is needed to ensure the overflow indicators are positioned correctly.
-    display: 'flex',
-    height: '100%',
-    overflow: 'hidden',
-    position: 'relative',
-    '&::before': {
-      content: "''",
-      display: 'block',
-      left: "var(--ds-space-100, 8px)",
-      right: containerPadding + opts.scrollbarWidth,
-      height: scrollIndicatorHeight,
-      borderRadius: "var(--ds-radius-xsmall, ".concat(scrollIndicatorBorderRadius, ")"),
-      backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, #0B120E24)", ")"),
-      position: 'absolute',
-      zIndex: scrollIndicatorZIndex
-    },
-    '&::after': {
-      content: "''",
-      position: 'absolute',
-      display: 'block',
-      borderRadius: "var(--ds-radius-xsmall, ".concat(scrollIndicatorBorderRadius, ")"),
-      flexShrink: 0,
-      height: scrollIndicatorHeight,
-      left: "var(--ds-space-100, 8px)",
-      right: containerPadding + opts.scrollbarWidth,
-      bottom: 0,
-      zIndex: scrollIndicatorZIndex,
-      backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, #0B120E24)", ")")
-    }
-  };
-};
-
-/**
- * This inner container css contains the "mask" logic for the scroll indicators.
- * Essentially they cover (mask) the "real" scroll indicators when the user is scrolled
- * to the top or bottom of the container.
- */
-export var innerContainerCSS = function innerContainerCSS(opts) {
-  return _objectSpread(_objectSpread({
-    display: 'flex',
-    overflow: 'auto',
-    width: '100%',
-    position: 'relative',
-    boxSizing: 'border-box',
-    flexDirection: 'column'
-  }, !opts.showTopScrollIndicator && {
-    '&::before': {
-      borderRadius: "var(--ds-radius-xsmall, ".concat(scrollIndicatorBorderRadius, ")"),
-      content: "''",
-      left: 0,
-      right: 0,
-      height: scrollIndicatorHeight,
-      backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ", "var(--ds-surface, #FFFFFF)", ")"),
-      position: 'absolute',
-      display: 'block',
-      zIndex: scrollIndicatorMaskZIndex
-    }
-  }), {}, {
-    // This after pseudo element abuses being a flex child and pushes itself down to the
-    // very bottom of the container - doing so ends up "masking" the actual scroll indicator.
-    '&::after': {
-      borderRadius: "var(--ds-radius-xsmall, ".concat(scrollIndicatorBorderRadius, ")"),
-      content: "''",
-      display: 'block',
-      flexShrink: 0,
-      height: scrollIndicatorHeight,
-      // This is used to "push" the element to the bottom of the flex container.
-      marginTop: 'auto',
-      position: 'relative',
-      zIndex: scrollIndicatorMaskZIndex,
-      backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ", "var(--ds-surface, #FFFFFF)", ")")
-    }
-  });
-};
-export var containerCSS = function containerCSS(opts) {
-  return {
-    // When the scroll indicator is always shown we need to add some padding
-    // so the spacing between matches what it would be if the indicator was a "block" element.
-    // We use margin here so any child absolutely positioned elements are positioned correctly.
-    marginTop: opts.showTopScrollIndicator ? scrollIndicatorHeight : 0,
-    marginLeft: "var(--ds-space-100, 8px)",
-    marginRight: "var(--ds-space-100, 8px)",
-    // Enables child absolutely positioned elements to be positioned relative to this element.
-    position: 'relative',
-    '& [data-ds--menu--heading-item]': {
-      marginBottom: "var(--ds-space-075, 6px)",
-      marginTop: "var(--ds-space-200, 16px)"
-    },
-    '& [data-ds--menu--skeleton-heading-item]': {
-      marginTop: skeletonHeadingTopMargin,
-      marginBottom: skeletonHeadingBottomMargin
-    }
-  };
-};

package/dist/esm/components/NestableNavigationContent/context.js

@@ -1,38 +0,0 @@
-import { createContext, useContext } from 'react';
-
-/**
- * @internal
- */
-
-/**
- * @internal
- */
-export var NestedContext = /*#__PURE__*/createContext(undefined);
-export var useNestedContext = function useNestedContext() {
-  var context = useContext(NestedContext);
-  if (!context) {
-    var error = '';
-    if (process.env.NODE_ENV === 'development') {
-      error = "\nTo use a <NestingItem /> it needs to be a descendant of <NestableNavigationContent>.\nYou probably need to replace your <NavigationContent> with <NestableNavigationContent>.\n\nimport { NestableNavigationContent } from '@atlaskit/side-navigation';\n      ";
-    }
-    throw new Error(error);
-  }
-  return context;
-};
-
-/**
- * Used by children of the NestableNavigationContent component to see if they should render or not.
- * If `shouldRender` returns `true` - return your nodes.
- * If it returns `false` - either return `null` or `children` if you have children.
- */
-export var useShouldNestedElementRender = function useShouldNestedElementRender() {
-  var context = useContext(NestedContext);
-  if (!context) {
-    return {
-      shouldRender: true
-    };
-  }
-  return {
-    shouldRender: context.currentStackId === context.parentId
-  };
-};

package/dist/esm/components/Section/index.js

@@ -1,3 +0,0 @@
-export { default as HeadingItem } from './heading-item';
-export { default as Section } from './section';
-export { default as SkeletonHeadingItem } from './skeleton-heading-item';

package/dist/types/components/NavigationContent/styles.d.ts

@@ -1,91 +0,0 @@
-interface StyleOpts {
-    showTopScrollIndicator?: boolean;
-}
-/**
- * This outer container css contains the "real" scroll indicators which are
- * always rendered to the screen.
- * They are "conditionally" shown from the users perspective using the inner container CSS
- * which has other pseudo elements which "mask" the "real" scroll indicators.
- */
-export declare const outerContainerCSS: (opts: StyleOpts & {
-    scrollbarWidth: number;
-}) => {
-    readonly display: "flex";
-    readonly height: "100%";
-    readonly overflow: "hidden";
-    readonly position: "relative";
-    readonly "&::before": {
-        readonly content: "''";
-        readonly display: "block";
-        readonly left: "var(--ds-space-100)";
-        readonly right: number;
-        readonly height: 2;
-        readonly borderRadius: "var(--ds-radius-xsmall)";
-        readonly backgroundColor: "var(--ds-menu-seperator-color, var(--ds-border))";
-        readonly position: "absolute";
-        readonly zIndex: 1;
-    };
-    readonly "&::after": {
-        readonly content: "''";
-        readonly position: "absolute";
-        readonly display: "block";
-        readonly borderRadius: "var(--ds-radius-xsmall)";
-        readonly flexShrink: 0;
-        readonly height: 2;
-        readonly left: "var(--ds-space-100)";
-        readonly right: number;
-        readonly bottom: 0;
-        readonly zIndex: 1;
-        readonly backgroundColor: "var(--ds-menu-seperator-color, var(--ds-border))";
-    };
-};
-/**
- * This inner container css contains the "mask" logic for the scroll indicators.
- * Essentially they cover (mask) the "real" scroll indicators when the user is scrolled
- * to the top or bottom of the container.
- */
-export declare const innerContainerCSS: (opts: StyleOpts) => {
-    readonly "&::after": {
-        readonly borderRadius: "var(--ds-radius-xsmall)";
-        readonly content: "''";
-        readonly display: "block";
-        readonly flexShrink: 0;
-        readonly height: 2;
-        readonly marginTop: "auto";
-        readonly position: "relative";
-        readonly zIndex: 2;
-        readonly backgroundColor: "var(--ds-menu-scroll-indicator-color, var(--ds-surface))";
-    };
-    readonly "&::before"?: {
-        readonly borderRadius: "var(--ds-radius-xsmall)";
-        readonly content: "''";
-        readonly left: 0;
-        readonly right: 0;
-        readonly height: 2;
-        readonly backgroundColor: "var(--ds-menu-scroll-indicator-color, var(--ds-surface))";
-        readonly position: "absolute";
-        readonly display: "block";
-        readonly zIndex: 2;
-    } | undefined;
-    readonly display: "flex";
-    readonly overflow: "auto";
-    readonly width: "100%";
-    readonly position: "relative";
-    readonly boxSizing: "border-box";
-    readonly flexDirection: "column";
-};
-export declare const containerCSS: (opts: StyleOpts) => {
-    readonly marginTop: 0 | 2;
-    readonly marginLeft: "var(--ds-space-100)";
-    readonly marginRight: "var(--ds-space-100)";
-    readonly position: "relative";
-    readonly "& [data-ds--menu--heading-item]": {
-        readonly marginBottom: "var(--ds-space-075)";
-        readonly marginTop: "var(--ds-space-200)";
-    };
-    readonly "& [data-ds--menu--skeleton-heading-item]": {
-        readonly marginTop: number;
-        readonly marginBottom: number;
-    };
-};
-export {};

package/dist/types/components/Section/index.d.ts

@@ -1,6 +0,0 @@
-export { default as HeadingItem } from './heading-item';
-export type { HeadingItemProps } from './heading-item';
-export { default as Section } from './section';
-export type { SectionProps } from './section';
-export { default as SkeletonHeadingItem } from './skeleton-heading-item';
-export type { SkeletonHeadingItemProps } from './skeleton-heading-item';

package/dist/types-ts4.5/components/NavigationContent/styles.d.ts

@@ -1,91 +0,0 @@
-interface StyleOpts {
-    showTopScrollIndicator?: boolean;
-}
-/**
- * This outer container css contains the "real" scroll indicators which are
- * always rendered to the screen.
- * They are "conditionally" shown from the users perspective using the inner container CSS
- * which has other pseudo elements which "mask" the "real" scroll indicators.
- */
-export declare const outerContainerCSS: (opts: StyleOpts & {
-    scrollbarWidth: number;
-}) => {
-    readonly display: "flex";
-    readonly height: "100%";
-    readonly overflow: "hidden";
-    readonly position: "relative";
-    readonly "&::before": {
-        readonly content: "''";
-        readonly display: "block";
-        readonly left: "var(--ds-space-100)";
-        readonly right: number;
-        readonly height: 2;
-        readonly borderRadius: "var(--ds-radius-xsmall)";
-        readonly backgroundColor: "var(--ds-menu-seperator-color, var(--ds-border))";
-        readonly position: "absolute";
-        readonly zIndex: 1;
-    };
-    readonly "&::after": {
-        readonly content: "''";
-        readonly position: "absolute";
-        readonly display: "block";
-        readonly borderRadius: "var(--ds-radius-xsmall)";
-        readonly flexShrink: 0;
-        readonly height: 2;
-        readonly left: "var(--ds-space-100)";
-        readonly right: number;
-        readonly bottom: 0;
-        readonly zIndex: 1;
-        readonly backgroundColor: "var(--ds-menu-seperator-color, var(--ds-border))";
-    };
-};
-/**
- * This inner container css contains the "mask" logic for the scroll indicators.
- * Essentially they cover (mask) the "real" scroll indicators when the user is scrolled
- * to the top or bottom of the container.
- */
-export declare const innerContainerCSS: (opts: StyleOpts) => {
-    readonly "&::after": {
-        readonly borderRadius: "var(--ds-radius-xsmall)";
-        readonly content: "''";
-        readonly display: "block";
-        readonly flexShrink: 0;
-        readonly height: 2;
-        readonly marginTop: "auto";
-        readonly position: "relative";
-        readonly zIndex: 2;
-        readonly backgroundColor: "var(--ds-menu-scroll-indicator-color, var(--ds-surface))";
-    };
-    readonly "&::before"?: {
-        readonly borderRadius: "var(--ds-radius-xsmall)";
-        readonly content: "''";
-        readonly left: 0;
-        readonly right: 0;
-        readonly height: 2;
-        readonly backgroundColor: "var(--ds-menu-scroll-indicator-color, var(--ds-surface))";
-        readonly position: "absolute";
-        readonly display: "block";
-        readonly zIndex: 2;
-    } | undefined;
-    readonly display: "flex";
-    readonly overflow: "auto";
-    readonly width: "100%";
-    readonly position: "relative";
-    readonly boxSizing: "border-box";
-    readonly flexDirection: "column";
-};
-export declare const containerCSS: (opts: StyleOpts) => {
-    readonly marginTop: 0 | 2;
-    readonly marginLeft: "var(--ds-space-100)";
-    readonly marginRight: "var(--ds-space-100)";
-    readonly position: "relative";
-    readonly "& [data-ds--menu--heading-item]": {
-        readonly marginBottom: "var(--ds-space-075)";
-        readonly marginTop: "var(--ds-space-200)";
-    };
-    readonly "& [data-ds--menu--skeleton-heading-item]": {
-        readonly marginTop: number;
-        readonly marginBottom: number;
-    };
-};
-export {};

package/dist/types-ts4.5/components/Section/index.d.ts

@@ -1,6 +0,0 @@
-export { default as HeadingItem } from './heading-item';
-export type { HeadingItemProps } from './heading-item';
-export { default as Section } from './section';
-export type { SectionProps } from './section';
-export { default as SkeletonHeadingItem } from './skeleton-heading-item';
-export type { SkeletonHeadingItemProps } from './skeleton-heading-item';