@atlaskit/drawer 6.0.8 → 7.0.1

package/dist/es2019/theme/drawer-item-theme.js

@@ -1,161 +0,0 @@
-import chromatism from 'chromatism';
-import { itemThemeNamespace } from '@atlaskit/item';
-import * as colors from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-import { darkDrawerItemActiveBackground, darkDrawerItemHoverBackground, gridSize } from '../constants';
-// These themes are copied over from @atlaskit/global-navigation to preserve the theming
-// of search and starred drawers.
-const focus = {
-  outline: themed({
-    light: colors.B100,
-    dark: colors.B75
-  })
-};
-
-function lightenColor(color, alpha) {
-  const {
-    r: red,
-    g: green,
-    b: blue
-  } = chromatism.convert(color).rgb;
-  return `rgba(${red}, ${green}, ${blue}, 0.${alpha})`;
-}
-
-const navigationTheme = (() => {
-  const primaryBackground = colors.codeBlock;
-  const item = {
-    default: {
-      background: 'transparent'
-    },
-    hover: {
-      background: themed({
-        light: colors.N20A,
-        dark: darkDrawerItemHoverBackground
-      })
-    },
-    active: {
-      background: themed({
-        light: colors.B50,
-        dark: darkDrawerItemActiveBackground
-      })
-    },
-    selected: {
-      background: colors.N20A,
-      text: colors.B400
-    },
-    focus,
-    dragging: {
-      // similar to hover - but without opacity
-      background: themed({
-        light: colors.N30,
-        dark: colors.DN30
-      })
-    }
-  };
-  const scrollBar = {
-    default: {
-      background: themed({
-        light: lightenColor(colors.N500, 36),
-        dark: lightenColor(colors.DN600, 36)
-      })
-    },
-    hover: {
-      background: themed({
-        light: lightenColor(colors.N500, 56),
-        dark: lightenColor(colors.DN600, 56)
-      })
-    }
-  };
-  const dropdown = {
-    default: {
-      background: item.hover.background
-    },
-    hover: {
-      background: themed({
-        light: colors.N30A,
-        dark: colors.DN30A
-      })
-    },
-    active: item.active,
-    selected: item.selected,
-    focus: item.focus,
-    dragging: item.dragging
-  };
-  const theme = {
-    background: {
-      primary: primaryBackground,
-      secondary: primaryBackground,
-      tertiary: themed({
-        light: colors.N0,
-        dark: colors.DN30
-      })
-    },
-    text: themed({
-      light: colors.N500,
-      dark: colors.DN600
-    }),
-    subText: colors.subtleText,
-    keyline: themed({
-      light: colors.N30A,
-      dark: colors.DN30A
-    }),
-    item,
-    dropdown,
-    scrollBar
-  };
-  return theme;
-})();
-
-export default {
-  [itemThemeNamespace]: {
-    padding: {
-      compact: {
-        bottom: gridSize,
-        left: gridSize,
-        right: gridSize,
-        top: gridSize
-      },
-      default: {
-        bottom: gridSize,
-        left: gridSize * 1.5,
-        right: gridSize * 1.5,
-        top: gridSize
-      }
-    },
-    borderRadius: 3,
-    height: {
-      compact: gridSize * 4.5,
-      default: gridSize * 5
-    },
-    beforeItemSpacing: {
-      compact: gridSize,
-      default: gridSize * 2
-    },
-    default: {
-      background: navigationTheme.item.default.background,
-      text: navigationTheme.text,
-      secondaryText: navigationTheme.subText
-    },
-    hover: {
-      background: navigationTheme.item.hover.background,
-      text: navigationTheme.text,
-      secondaryText: navigationTheme.subText
-    },
-    active: {
-      background: navigationTheme.item.active.background,
-      text: navigationTheme.item.active.text || navigationTheme.text,
-      secondaryText: navigationTheme.subText
-    },
-    selected: {
-      background: navigationTheme.item.selected.background,
-      text: navigationTheme.item.selected.text || '',
-      secondaryText: navigationTheme.subText
-    },
-    focus: {
-      outline: navigationTheme.item.focus.outline
-    },
-    dragging: {
-      background: navigationTheme.item.dragging.background
-    }
-  }
-};

package/dist/esm/components/item-group.js

@@ -1,53 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { ItemGroup } from '@atlaskit/item';
-import { // @ts-ignore - it's exported the type is just missing
-fontSizeSmall, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
-var groupTitleFontSize = fontSizeSmall();
-var gridSize = gridSizeFn();
-
-var SkeletonGroupTitle = function SkeletonGroupTitle(_ref) {
-  var props = _extends({}, _ref);
-
-  return jsx("div", _extends({
-    css: {
-      fontSize: "".concat(groupTitleFontSize, "px"),
-      lineHeight: "".concat(gridSize * 2 / groupTitleFontSize),
-      fontWeight: 600,
-      marginTop: "".concat(gridSize * 1.5, "px")
-    }
-  }, props));
-};
-
-var ItemChildrenWrapper = function ItemChildrenWrapper(_ref2) {
-  var props = _extends({}, _ref2);
-
-  return jsx("div", _extends({
-    css: {
-      marginLeft: "".concat(gridSize, "px")
-    }
-  }, props));
-};
-
-var ItemGroupWrapper = function ItemGroupWrapper(_ref3) {
-  var props = _extends({}, _ref3);
-
-  return jsx("div", _extends({
-    css: {
-      paddingRight: "".concat(gridSize * 4, "px")
-    }
-  }, props));
-};
-
-export var DrawerItemGroup = function DrawerItemGroup(_ref4) {
-  var title = _ref4.title,
-      isCompact = _ref4.isCompact,
-      children = _ref4.children;
-  var wrappedTitle = title ? jsx(SkeletonGroupTitle, null, title) : null;
-  return jsx(ItemGroupWrapper, null, jsx(ItemGroup, {
-    title: wrappedTitle,
-    isCompact: isCompact
-  }, jsx(ItemChildrenWrapper, null, children)));
-};

package/dist/esm/components/item.js

@@ -1,41 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import Item from '@atlaskit/item';
-export var DrawerItem = function DrawerItem(props) {
-  var autoFocus = props.autoFocus,
-      children = props.children,
-      description = props.description,
-      dnd = props.dnd,
-      elemAfter = props.elemAfter,
-      elemBefore = props.elemBefore,
-      href = props.href,
-      isCompact = props.isCompact,
-      isDisabled = props.isDisabled,
-      isDragging = props.isDragging,
-      isHidden = props.isHidden,
-      isSelected = props.isSelected,
-      onClick = props.onClick,
-      onKeyDown = props.onKeyDown,
-      onMouseEnter = props.onMouseEnter,
-      onMouseLeave = props.onMouseLeave,
-      target = props.target,
-      title = props.title;
-  return /*#__PURE__*/React.createElement(Item, _extends({
-    autoFocus: autoFocus,
-    description: description,
-    elemAfter: elemAfter,
-    elemBefore: elemBefore,
-    href: href,
-    isCompact: isCompact,
-    isDisabled: isDisabled,
-    isDragging: isDragging,
-    isHidden: isHidden,
-    isSelected: isSelected,
-    onClick: onClick,
-    onKeyDown: onKeyDown,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    target: target,
-    title: title
-  }, dnd), children);
-};

package/dist/esm/components/skeletons.js

@@ -1,88 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-
-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; }
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { Skeleton as SkeletonAvatar } from '@atlaskit/avatar';
-import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
-var gridSize = gridSizeFn();
-/* Primitives */
-
-var Wrapper = function Wrapper(_ref) {
-  var isAvatarHidden = _ref.isAvatarHidden,
-      isHeader = _ref.isHeader,
-      props = _objectWithoutProperties(_ref, ["isAvatarHidden", "isHeader"]);
-
-  return jsx("div", _extends({
-    css: _objectSpread({
-      display: 'flex',
-      alignItems: 'center',
-      margin: isAvatarHidden ? "".concat(gridSize * 2, "px") : "".concat(gridSize / 2, "px ").concat(gridSize, "px ").concat(gridSize, "px ").concat(gridSize * 2, "px")
-    }, isHeader && !isAvatarHidden ? {
-      marginLeft: "".concat(gridSize, "px")
-    } : {})
-  }, props));
-};
-
-var headerStylesOverride = function headerStylesOverride(isAvatarHidden) {
-  return _objectSpread(_objectSpread({}, !isAvatarHidden ? {
-    marginLeft: "".concat(gridSize * 2, "px")
-  } : null), {}, {
-    width: "".concat(gridSize * 18, "px"),
-    opacity: 0.3
-  });
-};
-
-var SkeletonText = function SkeletonText(_ref2) {
-  var isAvatarHidden = _ref2.isAvatarHidden,
-      isHeader = _ref2.isHeader,
-      itemTextWidth = _ref2.itemTextWidth;
-  return jsx("div", {
-    css: _objectSpread(_objectSpread({
-      height: "".concat(gridSize * 2.5, "px"),
-      backgroundColor: 'currentColor',
-      borderRadius: gridSize / 2,
-      opacity: 0.15,
-      width: itemTextWidth || "".concat(gridSize * 17, "px")
-    }, !isAvatarHidden ? {
-      marginLeft: "".concat(gridSize * 3, "px")
-    } : null), isHeader ? headerStylesOverride(isAvatarHidden) : null)
-  });
-};
-/* Exported Components */
-
-
-export var DrawerSkeletonHeader = function DrawerSkeletonHeader(props) {
-  var isAvatarHidden = props.isAvatarHidden,
-      isCollapsed = props.isCollapsed;
-  return jsx(Wrapper, {
-    isAvatarHidden: isAvatarHidden,
-    isHeader: true
-  }, !isAvatarHidden && jsx(SkeletonAvatar, {
-    appearance: "square",
-    size: "large",
-    weight: "strong"
-  }), !isCollapsed && jsx(SkeletonText, {
-    isHeader: true,
-    isAvatarHidden: isAvatarHidden
-  }));
-};
-export var DrawerSkeletonItem = function DrawerSkeletonItem(props) {
-  var isAvatarHidden = props.isAvatarHidden,
-      isCollapsed = props.isCollapsed,
-      itemTextWidth = props.itemTextWidth;
-  return jsx(Wrapper, {
-    isAvatarHidden: isAvatarHidden
-  }, !isAvatarHidden && jsx(SkeletonAvatar, {
-    size: "small",
-    weight: "normal"
-  }), !isCollapsed && jsx(SkeletonText, {
-    itemTextWidth: itemTextWidth,
-    isAvatarHidden: isAvatarHidden
-  }));
-};

package/dist/esm/theme/drawer-item-theme.js

@@ -1,159 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import chromatism from 'chromatism';
-import { itemThemeNamespace } from '@atlaskit/item';
-import * as colors from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-import { darkDrawerItemActiveBackground, darkDrawerItemHoverBackground, gridSize } from '../constants';
-// These themes are copied over from @atlaskit/global-navigation to preserve the theming
-// of search and starred drawers.
-var focus = {
-  outline: themed({
-    light: colors.B100,
-    dark: colors.B75
-  })
-};
-
-function lightenColor(color, alpha) {
-  var _chromatism$convert$r = chromatism.convert(color).rgb,
-      red = _chromatism$convert$r.r,
-      green = _chromatism$convert$r.g,
-      blue = _chromatism$convert$r.b;
-  return "rgba(".concat(red, ", ").concat(green, ", ").concat(blue, ", 0.").concat(alpha, ")");
-}
-
-var navigationTheme = function () {
-  var primaryBackground = colors.codeBlock;
-  var item = {
-    default: {
-      background: 'transparent'
-    },
-    hover: {
-      background: themed({
-        light: colors.N20A,
-        dark: darkDrawerItemHoverBackground
-      })
-    },
-    active: {
-      background: themed({
-        light: colors.B50,
-        dark: darkDrawerItemActiveBackground
-      })
-    },
-    selected: {
-      background: colors.N20A,
-      text: colors.B400
-    },
-    focus: focus,
-    dragging: {
-      // similar to hover - but without opacity
-      background: themed({
-        light: colors.N30,
-        dark: colors.DN30
-      })
-    }
-  };
-  var scrollBar = {
-    default: {
-      background: themed({
-        light: lightenColor(colors.N500, 36),
-        dark: lightenColor(colors.DN600, 36)
-      })
-    },
-    hover: {
-      background: themed({
-        light: lightenColor(colors.N500, 56),
-        dark: lightenColor(colors.DN600, 56)
-      })
-    }
-  };
-  var dropdown = {
-    default: {
-      background: item.hover.background
-    },
-    hover: {
-      background: themed({
-        light: colors.N30A,
-        dark: colors.DN30A
-      })
-    },
-    active: item.active,
-    selected: item.selected,
-    focus: item.focus,
-    dragging: item.dragging
-  };
-  var theme = {
-    background: {
-      primary: primaryBackground,
-      secondary: primaryBackground,
-      tertiary: themed({
-        light: colors.N0,
-        dark: colors.DN30
-      })
-    },
-    text: themed({
-      light: colors.N500,
-      dark: colors.DN600
-    }),
-    subText: colors.subtleText,
-    keyline: themed({
-      light: colors.N30A,
-      dark: colors.DN30A
-    }),
-    item: item,
-    dropdown: dropdown,
-    scrollBar: scrollBar
-  };
-  return theme;
-}();
-
-export default _defineProperty({}, itemThemeNamespace, {
-  padding: {
-    compact: {
-      bottom: gridSize,
-      left: gridSize,
-      right: gridSize,
-      top: gridSize
-    },
-    default: {
-      bottom: gridSize,
-      left: gridSize * 1.5,
-      right: gridSize * 1.5,
-      top: gridSize
-    }
-  },
-  borderRadius: 3,
-  height: {
-    compact: gridSize * 4.5,
-    default: gridSize * 5
-  },
-  beforeItemSpacing: {
-    compact: gridSize,
-    default: gridSize * 2
-  },
-  default: {
-    background: navigationTheme.item.default.background,
-    text: navigationTheme.text,
-    secondaryText: navigationTheme.subText
-  },
-  hover: {
-    background: navigationTheme.item.hover.background,
-    text: navigationTheme.text,
-    secondaryText: navigationTheme.subText
-  },
-  active: {
-    background: navigationTheme.item.active.background,
-    text: navigationTheme.item.active.text || navigationTheme.text,
-    secondaryText: navigationTheme.subText
-  },
-  selected: {
-    background: navigationTheme.item.selected.background,
-    text: navigationTheme.item.selected.text || '',
-    secondaryText: navigationTheme.subText
-  },
-  focus: {
-    outline: navigationTheme.item.focus.outline
-  },
-  dragging: {
-    background: navigationTheme.item.dragging.background
-  }
-});

package/dist/types/components/item-group.d.ts

@@ -1,13 +0,0 @@
-/** @jsx jsx */
-import { ReactNode } from 'react';
-interface Props {
-    /** React Elements to be displayed within the group. This should generally be
-     a collection of NavigationItems. */
-    children?: ReactNode;
-    /** Set whether the text should be compacted. */
-    isCompact?: boolean;
-    /** Text to appear as heading above group. Will be auto-capitalised. */
-    title?: string;
-}
-export declare const DrawerItemGroup: ({ title, isCompact, children }: Props) => JSX.Element;
-export {};

package/dist/types/components/item.d.ts

@@ -1,2 +0,0 @@
-import { ItemProps } from './types';
-export declare const DrawerItem: (props: ItemProps) => JSX.Element;

package/dist/types/components/skeletons.d.ts

@@ -1,13 +0,0 @@
-/** @jsx jsx */
-interface DrawerSkeletonItemProps {
-    isCollapsed?: boolean;
-    itemTextWidth?: string;
-    isAvatarHidden?: boolean;
-}
-interface DrawerSkeletonHeaderProps {
-    isCollapsed?: boolean;
-    isAvatarHidden?: boolean;
-}
-export declare const DrawerSkeletonHeader: (props: DrawerSkeletonHeaderProps) => JSX.Element;
-export declare const DrawerSkeletonItem: (props: DrawerSkeletonItemProps) => JSX.Element;
-export {};

package/dist/types/theme/drawer-item-theme.d.ts

@@ -1,54 +0,0 @@
-declare const _default: {
-    [x: number]: {
-        padding: {
-            compact: {
-                bottom: number;
-                left: number;
-                right: number;
-                top: number;
-            };
-            default: {
-                bottom: number;
-                left: number;
-                right: number;
-                top: number;
-            };
-        };
-        borderRadius: number;
-        height: {
-            compact: number;
-            default: number;
-        };
-        beforeItemSpacing: {
-            compact: number;
-            default: number;
-        };
-        default: {
-            background: import("./types").Color;
-            text: import("./types").Color;
-            secondaryText: import("./types").Color;
-        };
-        hover: {
-            background: import("./types").Color;
-            text: import("./types").Color;
-            secondaryText: import("./types").Color;
-        };
-        active: {
-            background: import("./types").Color;
-            text: import("./types").Color;
-            secondaryText: import("./types").Color;
-        };
-        selected: {
-            background: import("./types").Color;
-            text: import("./types").Color;
-            secondaryText: import("./types").Color;
-        };
-        focus: {
-            outline: string | Function | undefined;
-        };
-        dragging: {
-            background: import("./types").Color;
-        };
-    };
-};
-export default _default;

package/dist/types/theme/types.d.ts

@@ -1,49 +0,0 @@
-export declare type Color = string | Function;
-export declare type Background = Color;
-export declare type Text = Color;
-export declare type Line = Color;
-export interface ItemTheme {
-    default: {
-        background: Background;
-    };
-    hover: {
-        background: Background;
-    };
-    active: {
-        background: Background;
-        text?: Text;
-    };
-    focus: {
-        background?: Background;
-        outline?: Color;
-    };
-    selected: {
-        background: Background;
-        text?: Text;
-    };
-    dragging: {
-        background: Background;
-    };
-}
-export interface ScrollBarTheme {
-    default: {
-        background: Background;
-    };
-    hover: {
-        background: Background;
-    };
-}
-export interface DrawerTheme {
-    background: {
-        primary: Background;
-        secondary: Background;
-        tertiary: Background;
-    };
-    text: Text;
-    subText: Text;
-    keyline: Line;
-    item: ItemTheme;
-    dropdown: ItemTheme;
-    hasDarkmode?: boolean;
-    scrollBar: ScrollBarTheme;
-}