@primer/components 0.0.0-2021116153325 → 0.0.0-2021116165050

package/lib/ActionList/Item.js

@@ -23,7 +23,7 @@ var _Divider = require("./Divider");
 
 var _ThemeProvider = require("../ThemeProvider");
 
-var _behaviors = require("@primer/behaviors");
+var _focusZone = require("../behaviors/focusZone");
 
 var _ssr = require("@react-aria/ssr");
 
@@ -98,10 +98,10 @@ const StyledItem = _styledComponents.default.div.withConfig({
   showDivider
 }) => showDivider ? `1px` : '0', DividedContent, (0, _constants.get)('colors.border.muted'), ({
   showDivider
-}) => showDivider ? `1px` : '0', DividedContent, DividedContent, DividedContent, DividedContent, _behaviors.isActiveDescendantAttribute, DividedContent, _behaviors.isActiveDescendantAttribute, DividedContent, _behaviors.isActiveDescendantAttribute, _behaviors.activeDescendantActivatedDirectly, ({
+}) => showDivider ? `1px` : '0', DividedContent, DividedContent, DividedContent, DividedContent, _focusZone.isActiveDescendantAttribute, DividedContent, _focusZone.isActiveDescendantAttribute, DividedContent, _focusZone.isActiveDescendantAttribute, _focusZone.activeDescendantActivatedDirectly, ({
   variant,
   item
-}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, _behaviors.isActiveDescendantAttribute, _behaviors.activeDescendantActivatedIndirectly, ({
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, _focusZone.isActiveDescendantAttribute, _focusZone.activeDescendantActivatedIndirectly, ({
   variant,
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverBg, ({

package/lib/ActionList/List.js

@@ -17,7 +17,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _constants = require("../constants");
 
-var _behaviors = require("@primer/behaviors");
+var _focusZone = require("../behaviors/focusZone");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -38,7 +38,7 @@ function isGroupedListProps(props) {
 const StyledList = _styledComponents.default.div.withConfig({
   displayName: "List__StyledList",
   componentId: "sc-yr2k7d-0"
-})(["font-size:", ";line-height:20px;&[", "],&:focus-within{--item-hover-bg-override:none;--item-hover-divider-border-color-override:", ";}"], (0, _constants.get)('fontSizes.1'), _behaviors.hasActiveDescendantAttribute, (0, _constants.get)('colors.border.muted'));
+})(["font-size:", ";line-height:20px;&[", "],&:focus-within{--item-hover-bg-override:none;--item-hover-divider-border-color-override:", ";}"], (0, _constants.get)('fontSizes.1'), _focusZone.hasActiveDescendantAttribute, (0, _constants.get)('colors.border.muted'));
 /**
  * Returns `sx` prop values for `List` children matching the given `List` style variation.
  * @param variant `List` style variation.

package/lib/AnchoredOverlay/AnchoredOverlay.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { OverlayProps } from '../Overlay';
 import { FocusTrapHookSettings } from '../hooks/useFocusTrap';
 import { FocusZoneHookSettings } from '../hooks/useFocusZone';
-import type { PositionSettings } from '@primer/behaviors';
+import { PositionSettings } from '../behaviors/anchoredPosition';
 interface AnchoredOverlayPropsWithAnchor {
     /**
      * A custom function component used to render the anchor element.

package/lib/Autocomplete/AutocompleteMenu.js

@@ -17,9 +17,13 @@ var _AutocompleteContext = require("./AutocompleteContext");
 
 var _octiconsReact = require("@primer/octicons-react");
 
-var _utils = require("@primer/behaviors/utils");
+var _uniqueId = require("../utils/uniqueId");
 
-var _behaviors = require("@primer/behaviors");
+var _scrollIntoViewingArea = require("../behaviors/scrollIntoViewingArea");
+
+var _VisuallyHidden = _interopRequireDefault(require("../_VisuallyHidden"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -27,11 +31,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const getDefaultSortFn = isItemSelectedFn => (itemIdA, itemIdB) => isItemSelectedFn(itemIdA) === isItemSelectedFn(itemIdB) ? 0 : isItemSelectedFn(itemIdA) ? -1 : 1;
 
-const menuScrollMargins = {
-  startMargin: 0,
-  endMargin: 8
-};
-
 function getDefaultItemFilter(filterValue) {
   return function (item, _i) {
     var _item$text;
@@ -130,7 +129,7 @@ function AutocompleteMenu(props) {
     onAction: item => {
       // TODO: make it possible to pass a leadingVisual when using `addNewItem`
       addNewItem.handleAddItem({ ...item,
-        id: item.id || (0, _utils.uniqueId)(),
+        id: item.id || (0, _uniqueId.uniqueId)(),
         leadingVisual: undefined
       });
 
@@ -157,9 +156,9 @@ function AutocompleteMenu(props) {
       }
 
       if (current && customScrollContainerRef && customScrollContainerRef.current && directlyActivated) {
-        (0, _behaviors.scrollIntoView)(current, customScrollContainerRef.current, menuScrollMargins);
+        (0, _scrollIntoViewingArea.scrollIntoViewingArea)(current, customScrollContainerRef.current);
       } else if (current && scrollContainerRef.current && directlyActivated) {
-        (0, _behaviors.scrollIntoView)(current, scrollContainerRef.current, menuScrollMargins);
+        (0, _scrollIntoViewingArea.scrollIntoViewingArea)(current, scrollContainerRef.current);
       }
     }
   }, [loading]);
@@ -187,19 +186,8 @@ function AutocompleteMenu(props) {
       setSelectedItemLength(selectedItemIds.length);
     }
   }, [selectedItemIds, setSelectedItemLength]);
-  return /*#__PURE__*/_react.default.createElement(_.Box, {
-    sx: !showMenu ? {
-      // visually hides this label for sighted users
-      position: 'absolute',
-      width: '1px',
-      height: '1px',
-      padding: '0',
-      margin: '-1px',
-      overflow: 'hidden',
-      clip: 'rect(0, 0, 0, 0)',
-      whiteSpace: 'nowrap',
-      borderWidth: '0'
-    } : {}
+  return /*#__PURE__*/_react.default.createElement(_VisuallyHidden.default, {
+    isVisible: showMenu
   }, loading ? /*#__PURE__*/_react.default.createElement(_.Box, {
     p: 3,
     display: "flex",

package/lib/CheckboxInputField.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare const _default: React.FC<import("./_InputField/ToggleInputField").Props> & {
+    Input: React.FC<Omit<React.HTMLProps<HTMLInputElement>, "ref"> & {
+        ref?: React.Ref<HTMLInputElement> | undefined;
+    }>;
+    Caption: React.FC<{}>;
+    Label: React.FC<import("./_InputField/InputFieldLabel").Props>;
+    LeadingVisual: React.FC<{}>;
+};
+export default _default;

package/lib/CheckboxInputField.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require(".");
+
+var _InputField = _interopRequireDefault(require("./_InputField/InputField"));
+
+var _slots = require("./_InputField/slots");
+
+var _ToggleInputField = _interopRequireDefault(require("./_InputField/ToggleInputField"));
+
+var _ToggleInputLeadingVisual = _interopRequireDefault(require("./_InputField/ToggleInputLeadingVisual"));
+
+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 Input = ({
+  id: idProp,
+  required: requiredProp,
+  disabled: disabledProp,
+  ...rest
+}) => {
+  if (idProp) {
+    // eslint-disable-next-line no-console
+    console.warn("instead of passing the 'id' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
+  }
+
+  if (disabledProp) {
+    // eslint-disable-next-line no-console
+    console.warn("instead of passing the 'disabled' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
+  }
+
+  if (requiredProp) {
+    // eslint-disable-next-line no-console
+    console.warn("instead of passing the 'required' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_slots.Slot, {
+    name: "Input"
+  }, ({
+    disabled,
+    id,
+    required,
+    captionId
+  }) => /*#__PURE__*/_react.default.createElement(_.Checkbox, _extends({
+    "aria-describedby": captionId,
+    id: id,
+    required: required,
+    disabled: disabled
+  }, rest)));
+};
+
+Input.displayName = "Input";
+
+const CheckboxInputField = props => /*#__PURE__*/_react.default.createElement(_ToggleInputField.default, props);
+
+CheckboxInputField.displayName = "CheckboxInputField";
+
+var _default = Object.assign(CheckboxInputField, {
+  Input,
+  Caption: _InputField.default.Caption,
+  Label: _InputField.default.Label,
+  LeadingVisual: _ToggleInputLeadingVisual.default
+});
+
+exports.default = _default;

package/lib/Dialog/ConfirmationDialog.js

@@ -16,7 +16,7 @@ var _Box = _interopRequireDefault(require("../Box"));
 
 var _ThemeProvider = require("../ThemeProvider");
 
-var _behaviors = require("@primer/behaviors");
+var _focusZone = require("../behaviors/focusZone");
 
 var _constants = require("../constants");
 
@@ -81,7 +81,7 @@ const ConfirmationFooter = ({
   const {
     containerRef: footerRef
   } = (0, _useFocusZone.useFocusZone)({
-    bindKeys: _behaviors.FocusKeys.ArrowHorizontal | _behaviors.FocusKeys.Tab,
+    bindKeys: _focusZone.FocusKeys.ArrowHorizontal | _focusZone.FocusKeys.Tab,
     focusInStrategy: 'closest'
   }); // Must have exactly 2 buttons!
 

package/lib/Dialog/Dialog.js

@@ -27,7 +27,7 @@ var _octiconsReact = require("@primer/octicons-react");
 
 var _useFocusZone = require("../hooks/useFocusZone");
 
-var _behaviors = require("@primer/behaviors");
+var _focusZone = require("../behaviors/focusZone");
 
 var _Portal = _interopRequireDefault(require("../Portal"));
 
@@ -121,7 +121,7 @@ const DefaultFooter = ({
   const {
     containerRef: footerRef
   } = (0, _useFocusZone.useFocusZone)({
-    bindKeys: _behaviors.FocusKeys.ArrowHorizontal | _behaviors.FocusKeys.Tab,
+    bindKeys: _focusZone.FocusKeys.ArrowHorizontal | _focusZone.FocusKeys.Tab,
     focusInStrategy: 'closest'
   });
   return footerButtons ? /*#__PURE__*/_react.default.createElement(Dialog.Footer, {

package/lib/FilteredActionList/FilteredActionList.js

@@ -29,7 +29,7 @@ var _useProvidedRefOrCreate = require("../hooks/useProvidedRefOrCreate");
 
 var _useScrollFlash = _interopRequireDefault(require("../hooks/useScrollFlash"));
 
-var _behaviors = require("@primer/behaviors");
+var _scrollIntoViewingArea = require("../behaviors/scrollIntoViewingArea");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -39,11 +39,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && 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 menuScrollMargins = {
-  startMargin: 0,
-  endMargin: 8
-};
-
 const StyledHeader = _styledComponents.default.div.withConfig({
   displayName: "FilteredActionList__StyledHeader",
   componentId: "sc-yg3jkv-0"
@@ -91,7 +86,7 @@ function FilteredActionList({
       activeDescendantRef.current = current;
 
       if (current && scrollContainerRef.current && directlyActivated) {
-        (0, _behaviors.scrollIntoView)(current, scrollContainerRef.current, menuScrollMargins);
+        (0, _scrollIntoViewingArea.scrollIntoViewingArea)(current, scrollContainerRef.current);
       }
     }
   }, [// List ref isn't set while loading.  Need to re-bind focus zone when it changes
@@ -99,9 +94,7 @@ function FilteredActionList({
   (0, _react.useEffect)(() => {
     // if items changed, we want to instantly move active descendant into view
     if (activeDescendantRef.current && scrollContainerRef.current) {
-      (0, _behaviors.scrollIntoView)(activeDescendantRef.current, scrollContainerRef.current, { ...menuScrollMargins,
-        behavior: 'auto'
-      });
+      (0, _scrollIntoViewingArea.scrollIntoViewingArea)(activeDescendantRef.current, scrollContainerRef.current, 'vertical', undefined, undefined, 'auto');
     }
   }, [items]);
   (0, _useScrollFlash.default)(scrollContainerRef);

package/lib/Overlay.d.ts

@@ -2,7 +2,7 @@ import React, { ComponentPropsWithRef } from 'react';
 import { AriaRole, Merge } from './utils/types';
 import { TouchOrMouseEvent } from './hooks';
 import { SxProp } from './sx';
-import type { AnchorSide } from '@primer/behaviors';
+import { AnchorSide } from './behaviors/anchoredPosition';
 import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
 declare type StyledOverlayProps = {
     width?: keyof typeof widthMap;

package/lib/RadioInputField.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { RadioProps } from '.';
+declare const _default: React.FC<import("./_InputField/ToggleInputField").Props> & {
+    Input: React.FC<RadioProps>;
+    Caption: React.FC<{}>;
+    Label: React.FC<import("./_InputField/InputFieldLabel").Props>;
+    LeadingVisual: React.FC<{}>;
+};
+export default _default;

package/lib/RadioInputField.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require(".");
+
+var _InputField = _interopRequireDefault(require("./_InputField/InputField"));
+
+var _slots = require("./_InputField/slots");
+
+var _ToggleInputField = _interopRequireDefault(require("./_InputField/ToggleInputField"));
+
+var _ToggleInputLeadingVisual = _interopRequireDefault(require("./_InputField/ToggleInputLeadingVisual"));
+
+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); }
+
+// pulling out `id`, `disabled`, and `required` because those should come from the parent TextInputField component
+const Input = ({
+  id: idProp,
+  required: requiredProp,
+  disabled: disabledProp,
+  ...rest
+}) => {
+  if (idProp) {
+    // eslint-disable-next-line no-console
+    console.warn("instead of passing the 'id' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
+  }
+
+  if (disabledProp) {
+    // eslint-disable-next-line no-console
+    console.warn("instead of passing the 'disabled' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
+  }
+
+  if (requiredProp) {
+    // eslint-disable-next-line no-console
+    console.warn("instead of passing the 'required' prop directly to <TextInputField.Input>, it should be passed to the parent component, <TextInputField>");
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_slots.Slot, {
+    name: "Input"
+  }, ({
+    disabled,
+    id,
+    required,
+    captionId
+  }) => /*#__PURE__*/_react.default.createElement(_.Radio, _extends({
+    "aria-describedby": captionId,
+    id: id,
+    required: required,
+    disabled: disabled
+  }, rest)));
+};
+
+Input.displayName = "Input";
+
+const RadioInputField = props => /*#__PURE__*/_react.default.createElement(_ToggleInputField.default, props);
+
+RadioInputField.displayName = "RadioInputField";
+
+var _default = Object.assign(RadioInputField, {
+  Input,
+  Caption: _InputField.default.Caption,
+  Label: _InputField.default.Label,
+  LeadingVisual: _ToggleInputLeadingVisual.default
+});
+
+exports.default = _default;