@atlaskit/menu 1.1.3 → 1.2.2

package/dist/esm/internal/styles/menu-item/skeleton-item.js

@@ -1,81 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-import { keyframes } from '@emotion/core';
-import { skeleton as skeletonColorFn } from '@atlaskit/theme/colors';
-import { borderRadius as borderRadiusFn, gridSize as gridSizeFn, skeletonShimmer } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
-import { baseItemCSS } from './base-item';
-var gridSize = gridSizeFn();
-var borderRadius = borderRadiusFn();
-var itemElemSpacing = gridSize * 1.5;
-var itemExpectedElemSize = gridSize * 3;
-var itemMinHeight = gridSize * 5;
-var skeletonItemElemSize = gridSize * 2.5;
-var itemElemSkeletonOffset = (itemExpectedElemSize - skeletonItemElemSize) / 2;
-var skeletonTextBorderRadius = 100;
-var skeletonContentHeight = 9;
-var skeletonColor = token('color.background.subtleNeutral.resting', skeletonColorFn());
-var shimmer = skeletonShimmer();
-var shimmerKeyframes = keyframes(shimmer.keyframes);
-export var skeletonItemCSS = function skeletonItemCSS(hasAvatar, hasIcon, width, isShimmering) {
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, baseItemCSS(false, false)), {}, {
-    pointerEvents: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    minHeight: itemMinHeight
-  }, !width && {
-    '&:nth-child(1n)::after': {
-      flexBasis: '70%'
-    },
-    '&:nth-child(2n)::after': {
-      flexBasis: '50%'
-    },
-    '&:nth-child(3n)::after': {
-      flexBasis: '60%'
-    },
-    '&:nth-child(4n)::after': {
-      flexBasis: '90%'
-    },
-    '&:nth-child(5n)::after': {
-      flexBasis: '35%'
-    },
-    '&:nth-child(6n)::after': {
-      flexBasis: '77%'
-    }
-  }), (hasAvatar || hasIcon) && {
-    '&::before': _objectSpread(_objectSpread({
-      // This will render a skeleton in the "elemBefore" position.
-      content: '""',
-      backgroundColor: skeletonColor
-    }, isShimmering && _objectSpread(_objectSpread({}, shimmer.css), {}, {
-      animationName: "".concat(shimmerKeyframes)
-    })), {}, {
-      marginRight: itemElemSpacing + itemElemSkeletonOffset,
-      width: skeletonItemElemSize,
-      height: skeletonItemElemSize,
-      marginLeft: itemElemSkeletonOffset,
-      borderRadius: hasAvatar ? '100%' : borderRadius,
-      flexShrink: 0
-    })
-  }), {}, {
-    '&::after': _objectSpread(_objectSpread({
-      // This will render the skeleton "text".
-      content: '""',
-      backgroundColor: skeletonColor
-    }, isShimmering && _objectSpread(_objectSpread({}, shimmer.css), {}, {
-      animationName: "".concat(shimmerKeyframes)
-    })), {}, {
-      // This is a little bespoke but we need to push everything down 1px
-      //  because the skeleton content should align to the bottom of the text.
-      // Confirm VR test failures before accepting a change.
-      marginTop: 1,
-      height: skeletonContentHeight,
-      borderRadius: skeletonTextBorderRadius,
-      flexBasis: width || '100%'
-    })
-  });
-};

package/dist/esm/internal/styles/menu-section/menu-group.js

@@ -1,15 +0,0 @@
-export var menuGroupCSS = function menuGroupCSS(_ref) {
-  var minWidth = _ref.minWidth,
-      maxWidth = _ref.maxWidth,
-      minHeight = _ref.minHeight,
-      maxHeight = _ref.maxHeight;
-  return {
-    display: 'flex',
-    flexDirection: 'column',
-    overflow: 'auto',
-    maxWidth: maxWidth,
-    minWidth: minWidth,
-    maxHeight: maxHeight,
-    minHeight: minHeight
-  };
-};

package/dist/esm/internal/styles/menu-section/section.js

@@ -1,67 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-import { N30A } from '@atlaskit/theme/colors';
-import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
-import { headingSizes } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
-var gridSize = gridSizeFn();
-var itemHeadingTopMargin = gridSize * 2.5;
-var itemHeadingBottomMargin = gridSize * 0.75; // 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 itemHeadingContentHeight = headingSizes.h100.lineHeight;
-var skeletonHeadingHeight = gridSize;
-var skeletonHeadingMarginOffset = 3;
-var skeletonHeadingTopMargin = itemHeadingTopMargin + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset; // We want to move the entire body up by 3px without affecting the height of the skeleton container.
-
-var skeletonHeadingBottomMargin = itemHeadingBottomMargin + skeletonHeadingMarginOffset;
-var sectionPaddingTopBottom = gridSize * 0.75;
-var VAR_SEPARATOR_COLOR = '--ds-menu-seperator-color';
-export var sectionCSS = function sectionCSS(isScrollable, hasSeparator) {
-  return _objectSpread(_objectSpread(_objectSpread({
-    '&:before, &:after': {
-      content: '" "',
-      display: 'block',
-      height: sectionPaddingTopBottom
-    },
-    '& [data-ds--menu--heading-item]': {
-      '&:first-of-type': {
-        marginTop: itemHeadingTopMargin - sectionPaddingTopBottom
-      },
-      marginTop: itemHeadingTopMargin,
-      marginBottom: itemHeadingBottomMargin
-    },
-    '& [data-ds--menu--skeleton-heading-item]': {
-      '&:first-of-type': {
-        marginTop: skeletonHeadingTopMargin - sectionPaddingTopBottom
-      },
-      marginTop: skeletonHeadingTopMargin,
-      marginBottom: skeletonHeadingBottomMargin
-    }
-  }, isScrollable ? {
-    flexShrink: 1,
-    overflow: 'auto'
-  } : {
-    flexShrink: 0
-  }), hasSeparator ? {
-    borderTop: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ").concat(token('color.border.neutral', N30A), ")")
-  } : {
-    // this is to ensure that adjacent sections without separators don't get additional margins.
-    '[data-section] + &': {
-      marginTop: -6
-    }
-  }), {}, {
-    '&:focus': {
-      // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
-      // We have made a deliberate choice to leave this behaviour as is.
-      // This makes the outline go inside by 1px so it can actually be displayed
-      // else it gets cut off from the overflow: scroll from the parent menu group.
-      outlineOffset: -1
-    }
-  });
-};

package/dist/types/internal/components/base-item.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import type { BaseItemProps } from '../../types';
-/**
- * __Base item__
- *
- * A base item should be composed for all item experiences.
- */
-declare const BaseItem: import("react").MemoExoticComponent<({ children, description, iconAfter, iconBefore, overrides, shouldTitleWrap, shouldDescriptionWrap, }: BaseItemProps) => JSX.Element>;
-export default BaseItem;

package/dist/types/internal/styles/menu-item/base-item.d.ts

@@ -1,23 +0,0 @@
-import { CSSObject } from '@emotion/core';
-export declare const baseItemCSS: (isDisabled?: boolean | undefined, isSelected?: boolean | undefined) => CSSObject;
-export declare const contentCSS: CSSObject;
-export declare const truncateCSS: CSSObject;
-export declare const wrapTextCSS: CSSObject;
-export declare const elemBeforeCSS: {
-    display: string;
-    flexShrink: number;
-    marginRight: number;
-};
-export declare const elemAfterCSS: {
-    display: string;
-    flexShrink: number;
-    marginLeft: number;
-};
-export declare const wrapDescriptionCSS: CSSObject;
-export declare const descriptionCSS: CSSObject;
-export declare const contentCSSWrapper: {
-    readonly display: "flex";
-    readonly minHeight: number;
-    readonly alignItems: "center";
-    readonly width: "100%";
-};

package/dist/types/internal/styles/menu-item/button-item.d.ts

@@ -1,2 +0,0 @@
-import { CSSObject } from '@emotion/core';
-export declare const buttonItemCSS: (isDisabled?: boolean | undefined, isSelected?: boolean | undefined) => CSSObject;

package/dist/types/internal/styles/menu-item/custom-item.d.ts

@@ -1,2 +0,0 @@
-import { CSSObject } from '@emotion/core';
-export declare const customItemCSS: (isDisabled?: boolean | undefined, isSelected?: boolean | undefined) => CSSObject;

package/dist/types/internal/styles/menu-item/heading-item.d.ts

@@ -1,2 +0,0 @@
-import { CSSObject } from '@emotion/core';
-export declare const headingItemCSS: CSSObject;

package/dist/types/internal/styles/menu-item/link-item.d.ts

@@ -1,2 +0,0 @@
-import { CSSObject } from '@emotion/core';
-export declare const linkItemCSS: (isDisabled?: boolean | undefined, isSelected?: boolean | undefined) => CSSObject;

package/dist/types/internal/styles/menu-item/skeleton-heading-item.d.ts

@@ -1,2 +0,0 @@
-import { CSSObject } from '@emotion/core';
-export declare const skeletonHeadingItemCSS: (width?: string | number | undefined, isShimmering?: boolean | undefined) => CSSObject;

package/dist/types/internal/styles/menu-item/skeleton-item.d.ts

@@ -1,2 +0,0 @@
-import { CSSObject } from '@emotion/core';
-export declare const skeletonItemCSS: (hasAvatar?: boolean | undefined, hasIcon?: boolean | undefined, width?: string | number | undefined, isShimmering?: boolean | undefined) => CSSObject;

package/dist/types/internal/styles/menu-section/menu-group.d.ts

@@ -1,3 +0,0 @@
-import { CSSObject } from '@emotion/core';
-import type { MenuGroupSizing } from '../../../types';
-export declare const menuGroupCSS: ({ minWidth, maxWidth, minHeight, maxHeight, }: MenuGroupSizing) => CSSObject;

package/dist/types/internal/styles/menu-section/section.d.ts

@@ -1,2 +0,0 @@
-import { CSSObject } from '@emotion/core';
-export declare const sectionCSS: (isScrollable?: boolean | undefined, hasSeparator?: boolean | undefined) => CSSObject;