@primer/components 0.0.0-2021111235020 → 0.0.0-202111194229

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.d.ts

@@ -0,0 +1 @@
+export declare type AriaRole = 'alert' | 'alertdialog' | 'application' | 'article' | 'banner' | 'button' | 'cell' | 'checkbox' | 'columnheader' | 'combobox' | 'complementary' | 'contentinfo' | 'definition' | 'dialog' | 'directory' | 'document' | 'feed' | 'figure' | 'form' | 'grid' | 'gridcell' | 'group' | 'heading' | 'img' | 'link' | 'list' | 'listbox' | 'listitem' | 'log' | 'main' | 'marquee' | 'math' | 'menu' | 'menubar' | 'menuitem' | 'menuitemcheckbox ' | 'menuitemradio' | 'navigation' | 'none' | 'note' | 'option' | 'presentation' | 'progressbar' | 'radio' | 'radiogroup' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'scrollbar' | 'search' | 'searchbox' | 'separator' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'table' | 'tablist' | 'tabpanel' | 'term' | 'textbox' | 'timer' | 'toolbar' | 'tooltip' | 'tree' | 'treegrid' | 'treeitem';

package/lib/utils/types/AriaRole.js

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

package/lib/utils/types/ComponentProps.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+/**
+ * Extract a component's props
+ *
+ * Source: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase#wrappingmirroring-a-component
+ *
+ * @example ComponentProps<typeof MyComponent>
+ */
+export declare type ComponentProps<T> = T extends React.ComponentType<infer Props> ? Props extends object ? Props : never : never;

package/lib/utils/types/ComponentProps.js

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

package/lib/utils/types/Flatten.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Contruct a type describing the items in `T`, if `T` is an array.
+ */
+export declare type Flatten<T extends unknown> = T extends (infer U)[] ? U : never;

package/lib/utils/types/Flatten.js

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

package/lib/utils/types/KeyPaths.d.ts

@@ -0,0 +1,3 @@
+export declare type KeyPaths<O extends Record<string, unknown>> = {
+    [K in keyof O]: K extends string ? O[K] extends string ? `${K}` : `${K}.${KeyPaths<O[K]>}` : never;
+}[keyof O];

package/lib/utils/types/KeyPaths.js

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

package/lib/utils/types/MandateProps.d.ts

@@ -0,0 +1,3 @@
+export declare type MandateProps<T extends unknown, K extends keyof T> = Omit<T, K> & {
+    [MK in K]-?: NonNullable<T[MK]>;
+};

package/lib/utils/types/MandateProps.js

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

package/lib/utils/types/Merge.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Given two object types A and B, return a type with all the properties of A that aren't also
+ * properties of B, and all the properties of B.
+ *
+ * Useful when we have a component that spreads a "rest" of its props on a subcomponent:
+ *
+ * ```ts
+ * interface OwnProps {
+ *  foo: string
+ * }
+ *
+ * type MyComponentProps = Merge<SubcomponentProps, OwnProps>
+ * const MyComponent = ({foo, ...rest}: MyComponentProps) => {
+ *   // ...
+ *   return <SubComponent {...rest} />
+ * }
+ * ```
+ */
+export declare type Merge<A = {}, B = {}> = Omit<A, keyof B> & B;

package/lib/utils/types/Merge.js

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

package/lib/utils/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from './AriaRole';
+export * from './ComponentProps';
+export * from './Flatten';
+export * from './Merge';
+export * from './MandateProps';

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.d.ts

@@ -0,0 +1 @@
+export declare function uniqueId(): string;

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.d.ts

@@ -0,0 +1 @@
+export declare const useForceUpdate: () => () => void;

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.d.ts

@@ -0,0 +1,3 @@
+import { useEffect } from 'react';
+declare const useIsomorphicLayoutEffect: typeof useEffect;
+export default useIsomorphicLayoutEffect;

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.d.ts

@@ -0,0 +1 @@
+export declare function isMacOS(): boolean;

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.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StyledDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+export declare function Divider(): JSX.Element;
+export declare namespace Divider {
+    var renderItem: typeof Divider;
+}

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.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { SxProp } from '../sx';
+import { HeaderProps } from './Header';
+/**
+ * Contract for props passed to the `Group` component.
+ */
+export interface GroupProps extends React.ComponentPropsWithoutRef<'div'>, SxProp {
+    /**
+     * Props for a `Header` to render in the `Group`.
+     */
+    header?: HeaderProps;
+    /**
+     * The id of the group.
+     */
+    groupId?: string;
+    /**
+     * `Items` to render in the `Group`.
+     */
+    items?: JSX.Element[];
+    /**
+     * Whether to display a divider above each `Item` in this `Group` when it does not follow a `Header` or `Divider`.
+     */
+    showItemDividers?: boolean;
+}
+/**
+ * Collects related `Items` in an `ActionList`.
+ */
+export declare function Group({ header, items, ...props }: GroupProps): JSX.Element;

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.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { SxProp } from '../sx';
+/**
+ * Contract for props passed to the `Header` component.
+ */
+export interface HeaderProps extends React.ComponentPropsWithoutRef<'div'>, SxProp {
+    /**
+     * Style variations. Usage is discretionary.
+     *
+     * - `"filled"` - Superimposed on a background, offset from nearby content
+     * - `"subtle"` - Relatively less offset from nearby content
+     */
+    variant?: 'subtle' | 'filled';
+    /**
+     * Primary text which names a `Group`.
+     */
+    title: string;
+    /**
+     * Secondary text which provides additional information about a `Group`.
+     */
+    auxiliaryText?: string;
+}
+export declare const StyledHeader: import("styled-components").StyledComponent<"div", any, {
+    variant: HeaderProps['variant'];
+} & SxProp, never>;
+/**
+ * Displays the name and description of a `Group`.
+ */
+export declare function Header({ variant, title, auxiliaryText, children: _children, ...props }: HeaderProps): JSX.Element;

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.d.ts

@@ -0,0 +1,98 @@
+import { IconProps } from '@primer/octicons-react';
+import React from 'react';
+import { SxProp } from '../sx';
+import { ItemInput } from './List';
+import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
+import { AriaRole } from '../utils/types';
+/**
+ * Contract for props passed to the `Item` component.
+ */
+export interface ItemProps extends SxProp {
+    /**
+     * Primary text which names an `Item`.
+     */
+    text?: string;
+    /**
+     * Secondary text which provides additional information about an `Item`.
+     */
+    description?: string;
+    /**
+     * Secondary text style variations. Usage is discretionary.
+     *
+     * - `"inline"` - Secondary text is positioned beside primary text.
+     * - `"block"` - Secondary text is positioned below primary text.
+     */
+    descriptionVariant?: 'inline' | 'block';
+    /**
+     * Icon (or similar) positioned before `Item` text.
+     */
+    leadingVisual?: React.FunctionComponent<IconProps>;
+    /**
+     * @deprecated Use `trailingVisual` instead
+     * Icon (or similar) positioned after `Item` text.
+     */
+    trailingIcon?: React.FunctionComponent<IconProps>;
+    /**
+     * @deprecated Use `trailingVisual` instead
+     * Text positioned after `Item` text and optional trailing icon.
+     */
+    trailingText?: string;
+    /**
+     * Icon or text positioned after `Item` text.
+     */
+    trailingVisual?: React.ReactNode;
+    /**
+     * Style variations associated with various `Item` types.
+     *
+     * - `"default"` - An action `Item`.
+     * - `"danger"` - A destructive action `Item`.
+     */
+    variant?: 'default' | 'danger';
+    /**
+     * Whether to display a divider above the `Item` when it does not follow a `Header` or `Divider`.
+     */
+    showDivider?: boolean;
+    /**
+     * For `Item`s which can be selected, whether the `Item` is currently selected.
+     */
+    selected?: boolean;
+    /**
+     *  For `Item`s which can be selected, whether `multiple` `Item`s or a `single` `Item` can be selected
+     */
+    selectionVariant?: 'single' | 'multiple';
+    /**
+     * Designates the group that an item belongs to.
+     */
+    groupId?: string;
+    /**
+     * Items that are disabled can not be clicked, selected, or navigated through.
+     */
+    disabled?: boolean;
+    /**
+     * Callback that will trigger both on click selection and keyboard selection.
+     */
+    onAction?: (item: ItemProps, event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+    /**
+     * An id associated with this item.  Should be unique between items
+     */
+    id?: number | string;
+    /**
+     * Node to be included inside the item before the text.
+     */
+    children?: React.ReactNode;
+    /**
+     * The ARIA role describing the function of `List` component. `option` is a common value.
+     */
+    role?: AriaRole;
+    /**
+     * An item to pass back in the `onAction` callback, meant as
+     */
+    item?: ItemInput;
+}
+export declare const TextContainer: import("styled-components").StyledComponent<"span", any, {
+    dangerouslySetInnerHtml?: React.DOMAttributes<HTMLDivElement>['dangerouslySetInnerHTML'];
+}, never>;
+/**
+ * An actionable or selectable `Item` with an optional icon and description.
+ */
+export declare const Item: PolymorphicForwardRefComponent<"div", ItemProps>;