@primer/components 0.0.0-202111023322 → 0.0.0-2021111104725

package/lib/utils/theme.js

@@ -0,0 +1,68 @@
+"use strict";
+
+// Utility functions used in theme-preval.js
+// This file needs to be a JavaScript file using CommonJS to be compatiable with preval
+const isEmpty = require('lodash.isempty');
+
+const isObject = require('lodash.isobject');
+
+const chroma = require('chroma-js');
+
+function fontStack(fonts) {
+  return fonts.map(font => font.includes(' ') ? `"${font}"` : font).join(', ');
+} // The following functions are a temporary measure for splitting shadow values out from the colors object.
+// Eventually, we will push these structural changes upstream to primer/primitives so this data manipulation
+// will not be needed.
+
+
+function isShadowValue(value) {
+  return typeof value === 'string' && /(inset\s|)([0-9.]+(\w*)\s){1,4}(rgb[a]?\(.*\)|\w+)/.test(value);
+}
+
+function isColorValue(value) {
+  return chroma.valid(value);
+}
+
+function filterObject(obj, predicate) {
+  if (Array.isArray(obj)) {
+    return obj.filter(predicate);
+  }
+
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    if (isObject(value)) {
+      const result = filterObject(value, predicate); // Don't include empty objects or arrays
+
+      if (!isEmpty(result)) {
+        acc[key] = result;
+      }
+    } else if (predicate(value)) {
+      acc[key] = value;
+    }
+
+    return acc;
+  }, {});
+}
+
+function partitionColors(colors) {
+  return {
+    colors: filterObject(colors, value => isColorValue(value)),
+    shadows: filterObject(colors, value => isShadowValue(value))
+  };
+}
+
+function omitScale(obj) {
+  const {
+    scale,
+    ...rest
+  } = obj;
+  return rest;
+}
+
+module.exports = {
+  fontStack,
+  isShadowValue,
+  isColorValue,
+  filterObject,
+  partitionColors,
+  omitScale
+};

package/lib/utils/types/AriaRole.js

@@ -0,0 +1 @@
+"use strict";

package/lib/utils/types/ComponentProps.js

@@ -0,0 +1 @@
+"use strict";

package/lib/utils/types/Flatten.js

@@ -0,0 +1 @@
+"use strict";

package/lib/utils/types/KeyPaths.js

@@ -0,0 +1 @@
+"use strict";

package/lib/utils/types/MandateProps.js

@@ -0,0 +1 @@
+"use strict";

package/lib/utils/types/Merge.js

@@ -0,0 +1 @@
+"use strict";

package/lib/utils/types/index.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _AriaRole = require("./AriaRole");
+
+Object.keys(_AriaRole).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AriaRole[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AriaRole[key];
+    }
+  });
+});
+
+var _ComponentProps = require("./ComponentProps");
+
+Object.keys(_ComponentProps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ComponentProps[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ComponentProps[key];
+    }
+  });
+});
+
+var _Flatten = require("./Flatten");
+
+Object.keys(_Flatten).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Flatten[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Flatten[key];
+    }
+  });
+});
+
+var _Merge = require("./Merge");
+
+Object.keys(_Merge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Merge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Merge[key];
+    }
+  });
+});
+
+var _MandateProps = require("./MandateProps");
+
+Object.keys(_MandateProps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _MandateProps[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _MandateProps[key];
+    }
+  });
+});

package/lib/utils/uniqueId.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.uniqueId = uniqueId;
+// Note: uniqueId may be unsafe in SSR contexts if it is used create DOM IDs or otherwise cause a hydration warning. Use useSSRSafeId instead.
+let idSeed = 10000;
+
+function uniqueId() {
+  return `__primer_id_${idSeed++}`;
+}

package/lib/utils/use-force-update.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useForceUpdate = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Inspired from reach-ui: https://github.com/reach/reach-ui/blob/develop/packages/utils/src/use-force-update.ts
+const useForceUpdate = () => {
+  const [, rerender] = _react.default.useState({});
+
+  return _react.default.useCallback(() => rerender({}), []);
+};
+
+exports.useForceUpdate = useForceUpdate;

package/lib/utils/useIsomorphicLayoutEffect.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
+var _default = useIsomorphicLayoutEffect;
+exports.default = _default;

package/lib/utils/userAgent.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isMacOS = isMacOS;
+let isMac = undefined;
+
+function isMacOS() {
+  if (isMac === undefined) {
+    isMac = /^mac/i.test(window.navigator.platform);
+  }
+
+  return isMac;
+}

package/lib-esm/ActionList/Divider.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+import { get } from '../constants';
+export const StyledDivider = styled.div.withConfig({
+  displayName: "Divider__StyledDivider",
+  componentId: "sc-42656i-0"
+})(["height:1px;background:", ";margin-top:calc(", " - 1px);margin-bottom:", ";"], get('colors.border.muted'), get('space.2'), get('space.2'));
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+
+export function Divider() {
+  return /*#__PURE__*/React.createElement(StyledDivider, null);
+}
+Divider.displayName = "Divider";
+
+/**
+ * `Divider` fulfills the `ItemPropsWithCustomRenderer` contract,
+ * so it can be used inline in an `ActionList`’s `items` prop.
+ * In other words, `items={[ActionList.Divider]}` is supported as a concise
+ * alternative to `items={[{renderItem: () => <ActionList.Divider />}]}`.
+ */
+Divider.renderItem = Divider;

package/lib-esm/ActionList/Group.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+import sx from '../sx';
+import { Header } from './Header';
+/**
+ * Contract for props passed to the `Group` component.
+ */
+
+const StyledGroup = styled.div.withConfig({
+  displayName: "Group__StyledGroup",
+  componentId: "sc-10w5bj9-0"
+})(["", ""], sx);
+/**
+ * Collects related `Items` in an `ActionList`.
+ */
+
+export function Group({
+  header,
+  items,
+  ...props
+}) {
+  return /*#__PURE__*/React.createElement(StyledGroup, props, header && /*#__PURE__*/React.createElement(Header, header), items);
+}
+Group.displayName = "Group";

package/lib-esm/ActionList/Header.js

@@ -0,0 +1,33 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { get } from '../constants';
+import sx from '../sx';
+/**
+ * Contract for props passed to the `Header` component.
+ */
+
+export const StyledHeader = styled.div.withConfig({
+  displayName: "Header__StyledHeader",
+  componentId: "qmofje-0"
+})(["{}padding:6px ", ";font-size:", ";font-weight:", ";color:", ";", " ", ""], get('space.3'), get('fontSizes.0'), get('fontWeights.bold'), get('colors.fg.muted'), ({
+  variant
+}) => variant === 'filled' && css(["background:", ";margin:", " 0;border-top:1px solid ", ";border-bottom:1px solid ", ";&:first-child{margin-top:0;}"], get('colors.canvas.subtle'), get('space.2'), get('colors.neutral.muted'), get('colors.neutral.muted')), sx);
+/**
+ * Displays the name and description of a `Group`.
+ */
+
+export function Header({
+  variant = 'subtle',
+  title,
+  auxiliaryText,
+  children: _children,
+  ...props
+}) {
+  return /*#__PURE__*/React.createElement(StyledHeader, _extends({
+    role: "heading",
+    variant: variant
+  }, props), title, auxiliaryText && /*#__PURE__*/React.createElement("span", null, auxiliaryText));
+}
+Header.displayName = "Header";

package/lib-esm/ActionList/Item.js

@@ -0,0 +1,241 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import { CheckIcon } from '@primer/octicons-react';
+import React, { useCallback } from 'react';
+import { get } from '../constants';
+import sx from '../sx';
+import Truncate from '../Truncate';
+import styled from 'styled-components';
+import { StyledHeader } from './Header';
+import { StyledDivider } from './Divider';
+import { useTheme } from '../ThemeProvider';
+import { activeDescendantActivatedDirectly, activeDescendantActivatedIndirectly, isActiveDescendantAttribute } from '../behaviors/focusZone';
+import { useSSRSafeId } from '@react-aria/ssr';
+
+const getItemVariant = (variant = 'default', disabled) => {
+  if (disabled) {
+    return {
+      color: get('colors.primer.fg.disabled'),
+      iconColor: get('colors.primer.fg.disabled'),
+      annotationColor: get('colors.primer.fg.disabled'),
+      hoverCursor: 'default'
+    };
+  }
+
+  switch (variant) {
+    case 'danger':
+      return {
+        color: get('colors.danger.fg'),
+        iconColor: get('colors.danger.fg'),
+        annotationColor: get('colors.fg.muted'),
+        hoverCursor: 'pointer',
+        hoverBg: get('colors.actionListItem.danger.hoverBg'),
+        focusBg: get('colors.actionListItem.danger.activeBg'),
+        hoverText: get('colors.actionListItem.danger.hoverText')
+      };
+
+    default:
+      return {
+        color: get('colors.fg.default'),
+        iconColor: get('colors.fg.muted'),
+        annotationColor: get('colors.fg.muted'),
+        hoverCursor: 'pointer',
+        hoverBg: get('colors.actionListItem.default.hoverBg'),
+        focusBg: get('colors.actionListItem.default.activeBg')
+      };
+  }
+};
+
+const DividedContent = styled.div.withConfig({
+  displayName: "Item__DividedContent",
+  componentId: "jqpvy8-0"
+})(["display:flex;min-width:0;position:relative;flex-grow:1;"]);
+const MainContent = styled.div.withConfig({
+  displayName: "Item__MainContent",
+  componentId: "jqpvy8-1"
+})(["align-items:baseline;display:flex;min-width:0;flex-direction:var(--main-content-flex-direction);flex-grow:1;"]);
+const StyledItem = styled.div.withConfig({
+  displayName: "Item__StyledItem",
+  componentId: "jqpvy8-2"
+})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var( --item-hover-bg-override,", " );color:", ";cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], get('space.2'), get('radii.2'), ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).color, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverText, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverCursor, StyledDivider, StyledHeader, ({
+  showDivider
+}) => showDivider ? `1px` : '0', DividedContent, get('colors.border.muted'), ({
+  showDivider
+}) => showDivider ? `1px` : '0', DividedContent, DividedContent, DividedContent, DividedContent, isActiveDescendantAttribute, DividedContent, isActiveDescendantAttribute, DividedContent, isActiveDescendantAttribute, activeDescendantActivatedDirectly, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, isActiveDescendantAttribute, activeDescendantActivatedIndirectly, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, sx);
+export const TextContainer = styled.span.withConfig({
+  displayName: "Item__TextContainer",
+  componentId: "jqpvy8-3"
+})([""]);
+const BaseVisualContainer = styled.div.withConfig({
+  displayName: "Item__BaseVisualContainer",
+  componentId: "jqpvy8-4"
+})(["height:20px;width:", ";margin-right:", ";display:flex;justify-content:center;align-items:center;flex-shrink:0;"], get('space.3'), get('space.2'));
+const ColoredVisualContainer = styled(BaseVisualContainer).withConfig({
+  displayName: "Item__ColoredVisualContainer",
+  componentId: "jqpvy8-5"
+})(["svg{fill:", ";font-size:", ";}"], ({
+  variant,
+  disabled
+}) => getItemVariant(variant, disabled).iconColor, get('fontSizes.0'));
+const LeadingVisualContainer = styled(ColoredVisualContainer).withConfig({
+  displayName: "Item__LeadingVisualContainer",
+  componentId: "jqpvy8-6"
+})(["display:flex;flex-direction:column;justify-content:center;"]);
+const TrailingContent = styled(ColoredVisualContainer).withConfig({
+  displayName: "Item__TrailingContent",
+  componentId: "jqpvy8-7"
+})(["color:", "};margin-left:", ";margin-right:0;width:auto;div:nth-child(2){margin-left:", ";}"], ({
+  variant,
+  disabled
+}) => getItemVariant(variant, disabled).annotationColor, get('space.2'), get('space.2'));
+const DescriptionContainer = styled.span.withConfig({
+  displayName: "Item__DescriptionContainer",
+  componentId: "jqpvy8-8"
+})(["color:", ";font-size:", ";line-height:16px;margin-left:var(--description-container-margin-left);min-width:0;flex-grow:1;flex-basis:var(--description-container-flex-basis);"], get('colors.fg.muted'), get('fontSizes.0'));
+const MultiSelectIcon = styled.svg.withConfig({
+  displayName: "Item__MultiSelectIcon",
+  componentId: "jqpvy8-9"
+})(["rect{fill:", ";stroke:", ";shape-rendering:auto;}path{fill:", ";boxshadow:", ";opacity:", ";}"], ({
+  selected
+}) => selected ? get('colors.accent.fg') : get('colors.canvas.default'), ({
+  selected
+}) => selected ? get('colors.accent.fg') : get('colors.border.default'), get('colors.fg.onEmphasis'), get('shadow.small'), ({
+  selected
+}) => selected ? 1 : 0);
+/**
+ * An actionable or selectable `Item` with an optional icon and description.
+ */
+
+export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
+  const {
+    as: Component,
+    text,
+    description,
+    descriptionVariant = 'inline',
+    selected,
+    selectionVariant,
+    leadingVisual: LeadingVisual,
+    trailingIcon: TrailingIcon,
+    trailingVisual: TrailingVisual,
+    trailingText,
+    variant = 'default',
+    showDivider,
+    disabled,
+    onAction,
+    onKeyPress,
+    children,
+    onClick,
+    id,
+    ...props
+  } = itemProps;
+  const labelId = useSSRSafeId();
+  const descriptionId = useSSRSafeId();
+  const keyPressHandler = useCallback(event => {
+    if (disabled) {
+      return;
+    }
+
+    onKeyPress === null || onKeyPress === void 0 ? void 0 : onKeyPress(event);
+
+    if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
+      onAction === null || onAction === void 0 ? void 0 : onAction(itemProps, event);
+    }
+  }, [onAction, disabled, itemProps, onKeyPress]);
+  const clickHandler = useCallback(event => {
+    if (disabled) {
+      return;
+    }
+
+    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+
+    if (!event.defaultPrevented) {
+      onAction === null || onAction === void 0 ? void 0 : onAction(itemProps, event);
+    }
+  }, [onAction, disabled, itemProps, onClick]);
+  const {
+    theme
+  } = useTheme();
+  return /*#__PURE__*/React.createElement(StyledItem, _extends({
+    ref: ref,
+    as: Component,
+    tabIndex: disabled ? undefined : -1,
+    variant: variant,
+    showDivider: showDivider,
+    "aria-selected": selected,
+    "aria-labelledby": text ? labelId : undefined,
+    "aria-describedby": description ? descriptionId : undefined
+  }, props, {
+    "data-id": id,
+    onKeyPress: keyPressHandler,
+    onClick: clickHandler
+  }), !!selected === selected && /*#__PURE__*/React.createElement(BaseVisualContainer, null, selectionVariant === 'multiple' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MultiSelectIcon, {
+    selected: selected,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "2",
+    y: "2",
+    width: "12",
+    height: "12",
+    rx: "4"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    strokeWidth: "0",
+    d: "M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
+  }))) : selected && /*#__PURE__*/React.createElement(CheckIcon, {
+    fill: theme === null || theme === void 0 ? void 0 : theme.colors.fg.default
+  })), LeadingVisual && /*#__PURE__*/React.createElement(LeadingVisualContainer, {
+    variant: variant,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(LeadingVisual, null)), /*#__PURE__*/React.createElement(DividedContent, null, /*#__PURE__*/React.createElement(MainContent, {
+    style: {
+      '--main-content-flex-direction': descriptionVariant === 'inline' ? 'row' : 'column'
+    }
+  }, children, text ? /*#__PURE__*/React.createElement(TextContainer, {
+    id: labelId
+  }, text) : null, description ? /*#__PURE__*/React.createElement(DescriptionContainer, {
+    id: descriptionId,
+    style: {
+      '--description-container-margin-left': descriptionVariant === 'inline' ? get('space.2')(theme) : 0,
+      '--description-container-flex-basis': descriptionVariant === 'inline' ? 0 : 'auto'
+    }
+  }, descriptionVariant === 'block' ? description : /*#__PURE__*/React.createElement(Truncate, {
+    title: description,
+    inline: true,
+    maxWidth: "100%"
+  }, description)) : null), TrailingVisual ? /*#__PURE__*/React.createElement(TrailingContent, {
+    variant: variant,
+    disabled: disabled
+  }, typeof TrailingVisual === 'function' ? /*#__PURE__*/React.createElement(TrailingVisual, null) : TrailingVisual) : TrailingIcon || trailingText ? /*#__PURE__*/React.createElement(TrailingContent, {
+    variant: variant,
+    disabled: disabled
+  }, trailingText, TrailingIcon && /*#__PURE__*/React.createElement(TrailingIcon, null)) : null));
+});
+Item.displayName = 'ActionList.Item';