@papillonbits/components 0.4.0 → 0.7.0

package/build/primer/Select/Select.prop.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectState = exports.propTypes = exports.defaultProps = void 0;
+
+var _propTypes = require("prop-types");
+
+var selectState = {
+  active: 'active',
+  inactive: 'inactive'
+};
+exports.selectState = selectState;
+var propTypes = {
+  id: _propTypes.string,
+  className: _propTypes.string,
+  selectedText: _propTypes.string.isRequired,
+  items: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    text: _propTypes.string,
+    isSelected: _propTypes.bool
+  })).isRequired,
+  onChange: _propTypes.func.isRequired,
+  state: (0, _propTypes.oneOf)(Object.keys(selectState))
+};
+exports.propTypes = propTypes;
+var defaultProps = {
+  id: null,
+  className: null,
+  state: selectState.active
+};
+exports.defaultProps = defaultProps;

package/build/primer/Select/Select.scss

@@ -0,0 +1,49 @@
+@import '../../index.scss';
+
+.select {
+  position: relative;
+}
+
+.select-menu {
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  width: 160px;
+  padding-top: $spacer-1;
+  padding-bottom: $spacer-1;
+  margin-top: 2px;
+  list-style: none;
+  background-color: var(--color-scale-white);
+  background-clip: padding-box;
+  border: $border;
+  border-radius: $border-radius;
+  box-shadow: var(--color-shadow-large);
+
+  &::before,
+  &::after {
+    position: absolute;
+    display: inline-block;
+    content: '';
+  }
+
+  &::before {
+    border: $spacer-2 $border-style transparent;
+    border-bottom-color: rgba(var(--color-scale-black), 0.15);
+  }
+
+  &::after {
+    border: 7px $border-style transparent;
+    border-bottom-color: var(--color-scale-white);
+  }
+
+  > ul {
+    list-style: none;
+  }
+}
+
+.select-inactive {
+  pointer-events: none;
+  cursor: not-allowed;
+  user-select: none;
+  color: var(--color-scale-gray-4) !important;
+}

package/build/primer/Select/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function get() {
+    return _Select.Select;
+  }
+});
+Object.defineProperty(exports, "selectState", {
+  enumerable: true,
+  get: function get() {
+    return _Select2.selectState;
+  }
+});
+
+var _Select = require("./Select");
+
+var _Select2 = require("./Select.prop");

package/build/primer/SelectMenu/SelectMenu.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectMenu = SelectMenu;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _uuid = require("uuid");
+
+var _array = require("@papillonbits/library/array");
+
+var _hooks = require("@papillonbits/library/hooks");
+
+var _margin = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/margin.scss"));
+
+var _details = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/details.scss"));
+
+var _SelectMenu = require("./SelectMenu.prop");
+
+var _SelectMenu2 = _interopRequireDefault(require("./SelectMenu.scss"));
+
+var _Button = _interopRequireDefault(require("../Button/Button.scss"));
+
+var _Icon = require("../Icon");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function SelectMenu(_ref) {
+  var className = _ref.className,
+      summary = _ref.summary,
+      icon = _ref.icon,
+      title = _ref.title,
+      ariaAttr = _ref.ariaAttr,
+      items = _ref.items,
+      _onClick = _ref.onClick;
+
+  var _useState = (0, _hooks.useState)((0, _array.getIndexItems)(items)),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      indexItems = _useState2[0],
+      setIndexItems = _useState2[1];
+
+  var haspopup = ariaAttr.haspopup;
+  var details = (0, _hooks.useRef)(null);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("details", {
+    ref: details,
+    className: (0, _classnames["default"])(className, _details["default"]['details-reset'], _details["default"]['details-overlay']),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("summary", {
+      className: (0, _classnames["default"])(_Button["default"].btn, _Button["default"]['btn-outline']),
+      "aria-haspopup": haspopup,
+      children: [summary, " ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+        className: (0, _classnames["default"])(_margin["default"]['ml-2']),
+        icon: icon,
+        size: _Icon.iconSize.small
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _SelectMenu2["default"].SelectMenu,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _SelectMenu2["default"]['SelectMenu-modal'],
+        children: [title && /*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
+          className: _SelectMenu2["default"]['SelectMenu-header'],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+            className: _SelectMenu2["default"]['SelectMenu-title'],
+            children: title
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            className: _SelectMenu2["default"]['SelectMenu-closeButton'],
+            type: "button"
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: _SelectMenu2["default"]['SelectMenu-list'],
+          children: indexItems.map(function (indexItem) {
+            var text = indexItem.text;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+              type: "button",
+              onClick: function onClick(e) {
+                e.preventDefault();
+                var newIndexItems = (0, _array.getIndexItemsWithSelected)(indexItems, indexItem);
+                setIndexItems(newIndexItems);
+
+                _onClick({
+                  ariaAttr: ariaAttr,
+                  items: newIndexItems.map(function (newIndexItem) {
+                    return function (_ref2) {
+                      var text = _ref2.text,
+                          isSelected = _ref2.isSelected;
+                      return {
+                        text: text,
+                        isSelected: isSelected
+                      };
+                    }(newIndexItem);
+                  }) // eslint-disable-line
+
+                });
+
+                details.current.removeAttribute('open');
+              },
+              className: _SelectMenu2["default"]['SelectMenu-item'],
+              role: "menuitem",
+              children: text
+            }, (0, _uuid.v1)());
+          })
+        })]
+      })
+    })]
+  });
+}
+
+SelectMenu.propTypes = _SelectMenu.propTypes;
+SelectMenu.defaultProps = _SelectMenu.defaultProps;

package/build/primer/SelectMenu/SelectMenu.prop.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.defaultProps = void 0;
+
+var _propTypes = require("prop-types");
+
+var _Icon = require("../Icon/Icon.prop");
+
+var propTypes = {
+  className: _propTypes.string,
+  summary: _propTypes.string.isRequired,
+  icon: (0, _propTypes.oneOf)(Object.keys(_Icon.iconName)),
+  title: _propTypes.string,
+  ariaAttr: (0, _propTypes.shape)({
+    haspopup: _propTypes.bool
+  }).isRequired,
+  items: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    text: _propTypes.string,
+    isSelected: _propTypes.bool
+  })).isRequired,
+  onClick: _propTypes.func.isRequired
+};
+exports.propTypes = propTypes;
+var defaultProps = {
+  className: null,
+  title: null
+};
+exports.defaultProps = defaultProps;

package/build/primer/SelectMenu/SelectMenu.scss

@@ -0,0 +1,467 @@
+@import '../../index.scss';
+
+// stylelint-disable no-descending-specificity
+// stylelint-disable selector-max-type
+// selector-max-type is needed for body:not(.intent-mouse) to target keyboard only styles.
+
+$SelectMenu-max-height: 480px !default;
+
+// Select Menu
+//
+// A more advanced menu with support for navigation, filtering, and more.
+
+.SelectMenu {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 99;
+  display: flex;
+  padding: $spacer-3;
+  pointer-events: none;
+  flex-direction: column;
+
+  @include breakpoint(sm) {
+    position: absolute;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    padding: 0;
+  }
+}
+
+// Backdrop
+//
+// Adds a dark, semi transparent "cover" underneath the modal. Only visible for xs.
+
+.SelectMenu::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  content: '';
+  background-color: var(--color-primer-canvas-backdrop);
+
+  @include breakpoint(sm) {
+    display: none;
+  }
+}
+
+// Modal
+//
+// The main "box" that contains the content
+
+.SelectMenu-modal {
+  position: relative;
+  z-index: 99; // Needs to be higher than .details-overlay's z-index: 80.
+  display: flex;
+  max-height: 66%;
+  margin: auto 0;
+  overflow: hidden; // Enables border radius on scrollable child elements
+  pointer-events: auto;
+  flex-direction: column;
+  background-color: var(--color-canvas-overlay);
+  border: $border-width $border-style var(--color-select-menu-backdrop-border);
+  // stylelint-disable-next-line primer/borders
+  border-radius: $border-radius * 2;
+  box-shadow: var(--color-shadow-large);
+  animation: SelectMenu-modal-animation 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards;
+
+  @keyframes SelectMenu-modal-animation {
+    0% {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+  }
+
+  @keyframes SelectMenu-modal-animation--sm {
+    0% {
+      opacity: 0;
+      transform: translateY(-$spacer-3);
+    }
+  }
+
+  @include breakpoint(sm) {
+    width: 300px;
+    height: auto;
+    max-height: $SelectMenu-max-height;
+    margin: $spacer-2 0 $spacer-3 0;
+    font-size: $font-size-small;
+    border-color: var(--color-border-default);
+    border-radius: $border-radius;
+    box-shadow: var(--color-shadow-large);
+    animation-name: SelectMenu-modal-animation--sm;
+  }
+}
+
+// Header
+//
+// Used for showing a title and the close button. Close button is only visible for xs.
+
+.SelectMenu-header {
+  display: flex;
+  padding: $spacer-3;
+  flex: none; // fixes header from getting squeezed in Safari iOS
+  align-items: center;
+  border-bottom: $border-width $border-style var(--color-border-muted);
+
+  @include breakpoint(sm) {
+    // stylelint-disable-next-line primer/spacing
+    padding: 7px 7px 7px $spacer-3;
+  }
+}
+
+.SelectMenu-title {
+  flex: 1;
+  font-size: $body-font-size;
+  font-weight: $font-weight-bold;
+
+  @include breakpoint(sm) {
+    font-size: inherit;
+  }
+}
+
+.SelectMenu-closeButton {
+  padding: $spacer-3;
+  margin: -$spacer-3;
+  line-height: 1;
+  color: var(--color-fg-muted);
+  background-color: transparent;
+  border: 0;
+
+  @include breakpoint(sm) {
+    padding: $spacer-2;
+    // stylelint-disable-next-line primer/spacing
+    margin: (-$spacer-2) (-7px); // Using -7px fixes a :focus glitch
+  }
+}
+
+// Filter
+//
+// An input to filter a large list
+
+.SelectMenu-filter {
+  padding: $spacer-3;
+  margin: 0;
+  border-bottom: $border-width $border-style var(--color-border-muted);
+
+  @include breakpoint(sm) {
+    padding: $spacer-2;
+  }
+}
+
+.SelectMenu-input {
+  display: block;
+  width: 100%;
+
+  @include breakpoint(sm) {
+    font-size: $h5-size;
+  }
+}
+
+// List
+//
+// The container that holds all the list items. Starts scrolling when the list gets too long.
+
+.SelectMenu-list {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  // stylelint-disable-next-line primer/spacing
+  margin-bottom: -$border-width; // Hides the last border in the list
+  flex: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: var(--color-canvas-overlay);
+  -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
+}
+
+// List Item
+//
+// The interactive element used to make a selection
+
+.SelectMenu-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: $spacer-3;
+  overflow: hidden;
+  color: var(--color-fg-default);
+  text-align: left;
+  cursor: pointer;
+  background-color: var(--color-canvas-overlay);
+  border: 0;
+  border-bottom: $border-width $border-style var(--color-border-muted);
+
+  @include breakpoint(sm) {
+    // stylelint-disable-next-line primer/spacing
+    padding-top: 7px;
+    // stylelint-disable-next-line primer/spacing
+    padding-bottom: 7px;
+  }
+
+  // Borderless
+  .SelectMenu-list--borderless & {
+    border-bottom: 0;
+  }
+}
+
+// Icon
+//
+// Icon shown on the left of a list item.
+
+.SelectMenu-icon {
+  width: $spacer-3; // fixed width to make sure following content aligns
+  margin-right: $spacer-2;
+  flex-shrink: 0;
+}
+
+// Check icon
+.SelectMenu-icon--check {
+  visibility: hidden;
+  transition: transform 0.12s cubic-bezier(0.5, 0.1, 1, 0.5), visibility 0s 0.12s linear;
+  transform: scale(0);
+}
+
+// Tabs
+//
+// Allows switching between multiple lists
+
+.SelectMenu-tabs {
+  display: flex;
+  flex-shrink: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: inset 0 -1px 0 var(--color-border-muted);
+  -webkit-overflow-scrolling: touch;
+
+  // Hide scrollbar so it doesn't cover the text
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  @include breakpoint(sm) {
+    padding: $spacer-2 $spacer-2 0 $spacer-2;
+  }
+}
+
+.SelectMenu-tab {
+  flex: 1;
+  padding: $spacer-2 $spacer-3;
+  font-size: $font-size-small;
+  font-weight: $font-weight-semibold;
+  color: var(--color-fg-muted);
+  text-align: center;
+  background-color: transparent;
+  border: 0;
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: inset 0 -1px 0 var(--color-border-muted);
+
+  @include breakpoint(sm) {
+    flex: none;
+    padding: $spacer-1 $spacer-3;
+    border: $border-width $border-style transparent;
+    border-bottom-width: 0;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+  }
+
+  &[aria-selected='true'] {
+    z-index: 1; // Keeps box-shadow visible when hovering
+    color: var(--color-fg-default);
+    cursor: default;
+    background-color: var(--color-canvas-overlay);
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: 0 0 0 1px var(--color-border-muted);
+
+    @include breakpoint(sm) {
+      border-color: var(--color-border-muted);
+      box-shadow: none;
+    }
+  }
+}
+
+// Message
+//
+// A container used to show different kinds of text messages.
+
+.SelectMenu-message {
+  // stylelint-disable-next-line primer/spacing
+  padding: 7px $spacer-3;
+  text-align: center;
+  background-color: var(--color-canvas-overlay);
+  border-bottom: $border-width $border-style var(--color-border-muted);
+}
+
+// Blankslate and Loading
+//
+// A container used to show a blankslate or the loading animation.
+
+.SelectMenu-blankslate,
+.SelectMenu-loading {
+  padding: $spacer-4 $spacer-3;
+  text-align: center;
+  background-color: var(--color-canvas-overlay);
+}
+
+// Divider
+//
+// Can be used to divide the list into multiple groups
+
+.SelectMenu-divider {
+  padding: $spacer-1 $spacer-3;
+  margin: 0;
+  font-size: $font-size-small;
+  font-weight: $font-weight-semibold;
+  color: var(--color-fg-muted);
+  background-color: var(--color-canvas-subtle);
+  border-bottom: $border-width $border-style var(--color-border-muted);
+
+  // Borderless
+  .SelectMenu-list--borderless & {
+    border-top: $border-width $border-style var(--color-border-muted);
+
+    &:empty {
+      padding: 0;
+      border-top: 0;
+    }
+  }
+}
+
+// Footer
+//
+// A container at the bottom.
+
+.SelectMenu-footer {
+  z-index: 0; // Avoid top border from getting covered by the negative margin of the list
+  padding: $spacer-2 $spacer-3;
+  font-size: $font-size-small;
+  color: var(--color-fg-muted);
+  text-align: center;
+  border-top: $border-width $border-style var(--color-border-muted);
+
+  @include breakpoint(sm) {
+    // stylelint-disable-next-line primer/spacing
+    padding: 7px $spacer-3;
+  }
+}
+
+// Has Filter (modifier)
+//
+// Makes sure that the filter input keeps a fixed position at the top while typing. Only visible for xs.
+
+.SelectMenu--hasFilter {
+  .SelectMenu-modal {
+    height: 80%;
+    max-height: none;
+    margin-top: 0;
+
+    @include breakpoint(sm) {
+      height: auto;
+      max-height: $SelectMenu-max-height;
+      margin-top: $spacer-2;
+    }
+  }
+}
+
+// States
+//
+// Different states
+
+// Reset outlines
+.SelectMenu-closeButton:focus,
+.SelectMenu-tab:focus,
+.SelectMenu-item:focus {
+  outline: 0;
+}
+
+// Reset <a> elements
+.SelectMenu-item:hover {
+  text-decoration: none;
+}
+
+// Selected
+//
+// Visible when a user clicks/taps on a list item
+
+.SelectMenu-item[aria-checked='true'] {
+  font-weight: $font-weight-semibold;
+  color: var(--color-fg-default);
+
+  .SelectMenu-icon--check {
+    visibility: visible;
+    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), visibility 0s linear;
+    transform: scale(1);
+  }
+}
+
+// Disabled
+//
+// Prevent list items to be selected
+
+.SelectMenu-item:disabled,
+.SelectMenu-item[aria-disabled='true'] {
+  color: var(--color-primer-fg-disabled);
+  pointer-events: none;
+}
+
+// Can hover states
+//
+// For mouse/keyboard input
+
+@media (hover: hover) {
+  body:not(.intent-mouse) .SelectMenu-closeButton:focus,
+  .SelectMenu-closeButton:hover {
+    color: var(--color-fg-default);
+  }
+
+  .SelectMenu-closeButton:active {
+    color: var(--color-fg-muted);
+  }
+
+  body:not(.intent-mouse) .SelectMenu-item:focus,
+  .SelectMenu-item:hover {
+    background-color: var(--color-neutral-subtle);
+  }
+
+  .SelectMenu-item:active {
+    background-color: var(--color-canvas-subtle);
+  }
+
+  body:not(.intent-mouse) .SelectMenu-tab:focus {
+    background-color: var(--color-select-menu-tap-focus-bg);
+  }
+
+  .SelectMenu-tab:hover {
+    color: var(--color-fg-default);
+  }
+
+  .SelectMenu-tab:not([aria-selected='true']):active {
+    color: var(--color-fg-default);
+    background-color: var(--color-canvas-subtle);
+  }
+}
+
+// Can not hover states
+//
+// For touch input
+
+@media (hover: none) {
+  // Android
+  .SelectMenu-item:focus,
+  .SelectMenu-item:active {
+    background-color: var(--color-canvas-subtle);
+  }
+
+  // iOS Safari
+  // :active would work if ontouchstart is added to the button
+  // Instead this tweaks the "native" highlight color
+  .SelectMenu-item {
+    -webkit-tap-highlight-color: var(--color-select-menu-tap-highlight);
+  }
+}