@primer/components 0.0.0-202111619107 → 0.0.0-2021116202529

package/lib-esm/utils/iterateFocusableElements.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Options to the focusable elements iterator
+ */
+export interface IterateFocusableElements {
+    /**
+     * (Default: false) Iterate through focusable elements in reverse-order
+     */
+    reverse?: boolean;
+    /**
+     * (Default: false) Perform additional checks to determine tabbability
+     * which may adversely affect app performance.
+     */
+    strict?: boolean;
+    /**
+     * (Default: false) Only iterate tabbable elements, which is the subset
+     * of focusable elements that are part of the page's tab sequence.
+     */
+    onlyTabbable?: boolean;
+}
+/**
+ * Returns an iterator over all of the focusable elements within `container`.
+ * Note: If `container` is itself focusable it will be included in the results.
+ * @param container The container over which to find focusable elements.
+ * @param reverse If true, iterate backwards through focusable elements.
+ */
+export declare function iterateFocusableElements(container: HTMLElement, options?: IterateFocusableElements): Generator<HTMLElement, undefined, undefined>;
+/**
+ * Determines whether the given element is focusable. If `strict` is true, we may
+ * perform additional checks that require a reflow (less performant).
+ * @param elem
+ * @param strict
+ */
+export declare function isFocusable(elem: HTMLElement, strict?: boolean): boolean;
+/**
+ * Determines whether the given element is tabbable. If `strict` is true, we may
+ * perform additional checks that require a reflow (less performant). This check
+ * ensures that the element is focusable and that its tabindex is not explicitly
+ * set to "-1" (which makes it focusable, but removes it from the tab order).
+ * @param elem
+ * @param strict
+ */
+export declare function isTabbable(elem: HTMLElement, strict?: boolean): boolean;

package/lib-esm/utils/iterateFocusableElements.js

@@ -0,0 +1,102 @@
+/**
+ * Options to the focusable elements iterator
+ */
+
+/**
+ * Returns an iterator over all of the focusable elements within `container`.
+ * Note: If `container` is itself focusable it will be included in the results.
+ * @param container The container over which to find focusable elements.
+ * @param reverse If true, iterate backwards through focusable elements.
+ */
+export function* iterateFocusableElements(container, options = {}) {
+  var _options$strict, _options$onlyTabbable;
+
+  const strict = (_options$strict = options.strict) !== null && _options$strict !== void 0 ? _options$strict : false;
+  const acceptFn = ((_options$onlyTabbable = options.onlyTabbable) !== null && _options$onlyTabbable !== void 0 ? _options$onlyTabbable : false) ? isTabbable : isFocusable;
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: node => node instanceof HTMLElement && acceptFn(node, strict) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
+  });
+  let nextNode = null; // Allow the container to participate
+
+  if (!options.reverse && acceptFn(container, strict)) {
+    yield container;
+  } // If iterating in reverse, continue traversing down into the last child until we reach
+  // a leaf DOM node
+
+
+  if (options.reverse) {
+    let lastChild = walker.lastChild();
+
+    while (lastChild) {
+      nextNode = lastChild;
+      lastChild = walker.lastChild();
+    }
+  } else {
+    nextNode = walker.firstChild();
+  }
+
+  while (nextNode instanceof HTMLElement) {
+    yield nextNode;
+    nextNode = options.reverse ? walker.previousNode() : walker.nextNode();
+  } // Allow the container to participate (in reverse)
+
+
+  if (options.reverse && acceptFn(container, strict)) {
+    yield container;
+  }
+
+  return undefined;
+}
+/**
+ * Determines whether the given element is focusable. If `strict` is true, we may
+ * perform additional checks that require a reflow (less performant).
+ * @param elem
+ * @param strict
+ */
+
+export function isFocusable(elem, strict = false) {
+  // Certain conditions cause an element to never be focusable, even if they have tabindex="0"
+  const disabledAttrInert = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET'].includes(elem.tagName) && elem.disabled;
+  const hiddenInert = elem.hidden;
+  const hiddenInputInert = elem instanceof HTMLInputElement && elem.type === 'hidden';
+
+  if (disabledAttrInert || hiddenInert || hiddenInputInert) {
+    return false;
+  } // Each of the conditions checked below require a reflow, thus are gated by the `strict`
+  // argument. If any are true, the element is not focusable, even if tabindex is set.
+
+
+  if (strict) {
+    const sizeInert = elem.offsetWidth === 0 || elem.offsetHeight === 0;
+    const visibilityInert = ['hidden', 'collapse'].includes(getComputedStyle(elem).visibility);
+    const clientRectsInert = elem.getClientRects().length === 0;
+
+    if (sizeInert || visibilityInert || clientRectsInert) {
+      return false;
+    }
+  } // Any element with `tabindex` explicitly set can be focusable, even if it's set to "-1"
+
+
+  if (elem.getAttribute('tabindex') != null) {
+    return true;
+  } // One last way `elem.tabIndex` can be wrong.
+
+
+  if (elem instanceof HTMLAnchorElement && elem.getAttribute('href') == null) {
+    return false;
+  }
+
+  return elem.tabIndex !== -1;
+}
+/**
+ * Determines whether the given element is tabbable. If `strict` is true, we may
+ * perform additional checks that require a reflow (less performant). This check
+ * ensures that the element is focusable and that its tabindex is not explicitly
+ * set to "-1" (which makes it focusable, but removes it from the tab order).
+ * @param elem
+ * @param strict
+ */
+
+export function isTabbable(elem, strict = false) {
+  return isFocusable(elem, strict) && elem.getAttribute('tabindex') !== '-1';
+}

package/lib-esm/utils/uniqueId.d.ts

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

package/lib-esm/utils/uniqueId.js

@@ -0,0 +1,5 @@
+// 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;
+export function uniqueId() {
+  return `__primer_id_${idSeed++}`;
+}

package/lib-esm/utils/userAgent.d.ts

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

package/lib-esm/utils/userAgent.js

@@ -0,0 +1,8 @@
+let isMac = undefined;
+export function isMacOS() {
+  if (isMac === undefined) {
+    isMac = /^mac/i.test(window.navigator.platform);
+  }
+
+  return isMac;
+}

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-202111619107",
+  "version": "0.0.0-2021116202529",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
   "typings": "lib/index.d.ts",
+  "sideEffects": [
+    "(lib|lib-esm)/behaviors/focusZone.js",
+    "(lib|lib-esm)/behaviors/focusTrap.js"
+  ],
   "scripts": {
     "setup": "./script/setup",
     "build": "./script/build",
@@ -39,7 +43,6 @@
   "author": "GitHub, Inc.",
   "license": "MIT",
   "dependencies": {
-    "@primer/behaviors": "^1.0.2",
     "@primer/octicons-react": "^16.1.0",
     "@primer/primitives": "7.1.1",
     "@radix-ui/react-polymorphic": "0.0.14",

package/lib/Radio.d.ts

@@ -1,38 +0,0 @@
-import React, { InputHTMLAttributes } from 'react';
-import { SxProp } from './sx';
-export declare type RadioProps = {
-    /**
-     * A unique value that is never shown to the user.
-     * Used during form submission and to identify which radio button in a group is selected
-     */
-    value: string;
-    /**
-     * Name attribute of the input element. Required for grouping radio inputs
-     */
-    name: string;
-    /**
-     * Apply inactive visual appearance to the radio button
-     */
-    disabled?: boolean;
-    /**
-     * Indicates whether the radio button is selected
-     */
-    checked?: boolean;
-    /**
-     * Forward a ref to the underlying input element
-     */
-    ref?: React.RefObject<HTMLInputElement>;
-    /**
-     * Indicates whether the radio button must be checked before the form can be submitted
-     */
-    required?: boolean;
-    /**
-     * Indicates whether the radio button validation state is non-standard
-     */
-    validationStatus?: 'error' | 'success';
-} & InputHTMLAttributes<HTMLInputElement> & SxProp;
-/**
- * An accessible, native radio component for selecting one option from a list.
- */
-declare const Radio: React.ForwardRefExoticComponent<Pick<RadioProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "validationStatus"> & React.RefAttributes<HTMLInputElement>>;
-export default Radio;

package/lib/Radio.js

@@ -1,55 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _sx = _interopRequireDefault(require("./sx"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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); }
-
-const StyledRadio = _styledComponents.default.input.withConfig({
-  displayName: "Radio__StyledRadio",
-  componentId: "sc-1ak1fjg-0"
-})(["cursor:pointer;", " ", ""], props => props.disabled && `cursor: not-allowed;`, _sx.default);
-/**
- * An accessible, native radio component for selecting one option from a list.
- */
-
-
-const Radio = /*#__PURE__*/_react.default.forwardRef(({
-  checked,
-  disabled,
-  sx: sxProp,
-  required,
-  validationStatus,
-  value,
-  name,
-  ...rest
-}, ref) => {
-  return /*#__PURE__*/_react.default.createElement(StyledRadio, _extends({
-    type: "radio",
-    value: value,
-    name: name,
-    ref: ref,
-    disabled: disabled,
-    "aria-disabled": disabled ? 'true' : 'false',
-    checked: checked,
-    "aria-checked": checked ? 'true' : 'false',
-    required: required,
-    "aria-required": required ? 'true' : 'false',
-    "aria-invalid": validationStatus === 'error' ? 'true' : 'false',
-    sx: sxProp
-  }, rest));
-});
-
-Radio.displayName = 'Radio';
-var _default = Radio;
-exports.default = _default;

package/lib-esm/Radio.d.ts

@@ -1,38 +0,0 @@
-import React, { InputHTMLAttributes } from 'react';
-import { SxProp } from './sx';
-export declare type RadioProps = {
-    /**
-     * A unique value that is never shown to the user.
-     * Used during form submission and to identify which radio button in a group is selected
-     */
-    value: string;
-    /**
-     * Name attribute of the input element. Required for grouping radio inputs
-     */
-    name: string;
-    /**
-     * Apply inactive visual appearance to the radio button
-     */
-    disabled?: boolean;
-    /**
-     * Indicates whether the radio button is selected
-     */
-    checked?: boolean;
-    /**
-     * Forward a ref to the underlying input element
-     */
-    ref?: React.RefObject<HTMLInputElement>;
-    /**
-     * Indicates whether the radio button must be checked before the form can be submitted
-     */
-    required?: boolean;
-    /**
-     * Indicates whether the radio button validation state is non-standard
-     */
-    validationStatus?: 'error' | 'success';
-} & InputHTMLAttributes<HTMLInputElement> & SxProp;
-/**
- * An accessible, native radio component for selecting one option from a list.
- */
-declare const Radio: React.ForwardRefExoticComponent<Pick<RadioProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "validationStatus"> & React.RefAttributes<HTMLInputElement>>;
-export default Radio;

package/lib-esm/Radio.js

@@ -1,40 +0,0 @@
-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 styled from 'styled-components';
-import React from 'react';
-import sx from './sx';
-const StyledRadio = styled.input.withConfig({
-  displayName: "Radio__StyledRadio",
-  componentId: "sc-1ak1fjg-0"
-})(["cursor:pointer;", " ", ""], props => props.disabled && `cursor: not-allowed;`, sx);
-/**
- * An accessible, native radio component for selecting one option from a list.
- */
-
-const Radio = /*#__PURE__*/React.forwardRef(({
-  checked,
-  disabled,
-  sx: sxProp,
-  required,
-  validationStatus,
-  value,
-  name,
-  ...rest
-}, ref) => {
-  return /*#__PURE__*/React.createElement(StyledRadio, _extends({
-    type: "radio",
-    value: value,
-    name: name,
-    ref: ref,
-    disabled: disabled,
-    "aria-disabled": disabled ? 'true' : 'false',
-    checked: checked,
-    "aria-checked": checked ? 'true' : 'false',
-    required: required,
-    "aria-required": required ? 'true' : 'false',
-    "aria-invalid": validationStatus === 'error' ? 'true' : 'false',
-    sx: sxProp
-  }, rest));
-});
-Radio.displayName = 'Radio';
-export default Radio;