@primer/components 0.0.0-202111114525 → 0.0.0-2021111164412

package/lib/ChoiceFieldset/ChoiceFieldsetList.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ = require("..");
+
+var _constants = require("../constants");
+
+var _uniqueId = require("../utils/uniqueId");
+
+var _ChoiceFieldset = require("./ChoiceFieldset");
+
+var _ChoiceFieldsetListContext = _interopRequireDefault(require("./ChoiceFieldsetListContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const List = _styledComponents.default.ul.withConfig({
+  displayName: "ChoiceFieldsetList__List",
+  componentId: "sc-16da7ba-0"
+})(["display:flex;flex-direction:column;list-style:none;margin:0;padding:0;> li + li{margin-top:", ";}"], (0, _constants.get)('space.2'));
+
+const ChoiceFieldsetList = ({
+  selectionVariant,
+  children
+}) => {
+  // generates a name to pass to radio inputs if one was not passed in ChoiceFieldset props
+  const getRadioGroupName = nameFromContext => {
+    if (nameFromContext || selectionVariant !== 'multiple') {
+      return nameFromContext;
+    }
+
+    const generatedName = (0, _uniqueId.uniqueId)();
+    return generatedName;
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_ChoiceFieldset.Slot, {
+    name: "ChoiceList"
+  }, ({
+    name,
+    onSelect,
+    disabled,
+    selected = []
+  }) => {
+    const getSelectedCheckboxes = (value, checked) => {
+      if (checked) {
+        return selectionVariant === 'multiple' ? [...selected, value] : [value];
+      }
+
+      return selected.filter(selectedValue => selectedValue !== value);
+    };
+
+    return /*#__PURE__*/_react.default.createElement(_ChoiceFieldsetListContext.default.Provider, {
+      value: {
+        disabled,
+        selected,
+        name: getRadioGroupName(name),
+        fieldComponent: selectionVariant === 'multiple' ? _.CheckboxInputField : _.RadioInputField,
+        onChange: e => {
+          onSelect && onSelect(getSelectedCheckboxes(e.currentTarget.value, e.currentTarget.checked));
+        }
+      }
+    }, /*#__PURE__*/_react.default.createElement(List, null, _react.default.Children.map(children, (child, i) => /*#__PURE__*/_react.default.createElement("li", {
+      key: i
+    }, child))));
+  });
+};
+
+ChoiceFieldsetList.displayName = "ChoiceFieldsetList";
+ChoiceFieldsetList.defaultProps = {
+  selectionVariant: 'single'
+};
+var _default = ChoiceFieldsetList;
+exports.default = _default;

package/lib/ChoiceFieldset/ChoiceFieldsetListContext.d.ts

@@ -0,0 +1,18 @@
+import { ChangeEventHandler } from 'react';
+import { CheckboxInputField, RadioInputField } from '..';
+import { ComponentProps } from '../utils/types';
+import InputField from '../_InputField';
+import ToggleInputField, { ToggleInputFieldProps } from '../_InputField/ToggleInputField';
+declare const ChoiceFieldsetListContext: import("react").Context<{
+    disabled?: boolean | undefined;
+    name?: string | undefined;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    fieldComponent: React.FC<ToggleInputFieldProps> & {
+        Input: React.FC<ComponentProps<typeof RadioInputField.Input>> | React.FC<ComponentProps<typeof CheckboxInputField.Input>>;
+        Caption: React.FC<ComponentProps<typeof InputField.Caption>>;
+        Label: React.FC<ComponentProps<typeof InputField.Label>>;
+        LeadingVisual: React.FC<ComponentProps<typeof ToggleInputField.LeadingVisual>>;
+    };
+    selected?: string[] | undefined;
+} | null>;
+export default ChoiceFieldsetListContext;

package/lib/ChoiceFieldset/ChoiceFieldsetListContext.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _ = require("..");
+
+const ChoiceFieldsetListContext = /*#__PURE__*/(0, _react.createContext)(null);
+_.CheckboxInputField.Input;
+var _default = ChoiceFieldsetListContext;
+exports.default = _default;

package/lib/ChoiceFieldset/ChoiceFieldsetListItem.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ComponentProps } from '../utils/types';
+export interface ChoiceFieldProps {
+    /**
+     * Whether the field is ready for user input
+     */
+    disabled?: boolean;
+    /**
+     * The unique identifier for this field. Used to associate the label, validation text, and caption text
+     */
+    id?: string;
+    /**
+     * The value that is being selected
+     */
+    value: string;
+}
+declare const ChoiceFieldsetListItem: React.FC<ChoiceFieldProps>;
+export declare type ChoiceFieldComponentProps = ComponentProps<typeof ChoiceFieldsetListItem>;
+declare const _default: React.FC<ChoiceFieldProps> & {
+    Caption: React.FC<{}>;
+    Label: React.FC<{}>;
+    LeadingVisual: React.FC<{}>;
+};
+export default _default;

package/lib/ChoiceFieldset/ChoiceFieldsetListItem.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _uniqueId = require("../utils/uniqueId");
+
+var _ToggleInputLeadingVisual = _interopRequireDefault(require("../_InputField/ToggleInputLeadingVisual"));
+
+var _ChoiceFieldCaption = _interopRequireDefault(require("./ChoiceFieldCaption"));
+
+var _ChoiceFieldLabel = _interopRequireDefault(require("./ChoiceFieldLabel"));
+
+var _ChoiceFieldsetListContext = _interopRequireDefault(require("./ChoiceFieldsetListContext"));
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const ChoiceFieldsetListItem = ({
+  children,
+  id,
+  disabled: disabledProp,
+  value
+}) => {
+  const choiceFieldsetListContext = (0, _react.useContext)(_ChoiceFieldsetListContext.default);
+
+  if (choiceFieldsetListContext === null) {
+    throw new Error('ChoiceFieldsetListContext returned null');
+  }
+
+  const {
+    name,
+    onChange,
+    fieldComponent: FieldComponent,
+    selected,
+    disabled
+  } = choiceFieldsetListContext;
+  const fieldId = id || (0, _uniqueId.uniqueId)();
+  return /*#__PURE__*/_react.default.createElement(FieldComponent, {
+    id: fieldId,
+    disabled: disabledProp || disabled
+  }, /*#__PURE__*/_react.default.createElement(FieldComponent.Input, {
+    checked: selected === null || selected === void 0 ? void 0 : selected.includes(value),
+    value: value,
+    name: name,
+    onChange: onChange
+  }), children);
+};
+
+ChoiceFieldsetListItem.displayName = "ChoiceFieldsetListItem";
+
+var _default = Object.assign(ChoiceFieldsetListItem, {
+  Caption: _ChoiceFieldCaption.default,
+  Label: _ChoiceFieldLabel.default,
+  LeadingVisual: _ToggleInputLeadingVisual.default
+});
+
+exports.default = _default;

package/lib/ChoiceFieldset/ChoiceFieldsetValidation.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface ChoiceFieldsetValidationProps {
+    validationKey: string;
+}
+declare const ChoiceFieldsetValidation: React.FC<ChoiceFieldsetValidationProps>;
+export default ChoiceFieldsetValidation;

package/lib/ChoiceFieldset/ChoiceFieldsetValidation.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ChoiceFieldsetValidation = ({
+  children
+}) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+
+var _default = ChoiceFieldsetValidation;
+exports.default = _default;

package/lib/ChoiceFieldset/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './ChoiceFieldset';
+export { default as Item } from './ChoiceFieldsetListItem';
+export type { ChoiceFieldsetProps } from './ChoiceFieldset';

package/lib/ChoiceFieldset/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ChoiceFieldset.default;
+  }
+});
+Object.defineProperty(exports, "Item", {
+  enumerable: true,
+  get: function () {
+    return _ChoiceFieldsetListItem.default;
+  }
+});
+
+var _ChoiceFieldset = _interopRequireDefault(require("./ChoiceFieldset"));
+
+var _ChoiceFieldsetListItem = _interopRequireDefault(require("./ChoiceFieldsetListItem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/CircleBadge.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="hoist-non-react-statics" />
+/// <reference types="react" />
+import { SxProp } from './sx';
+import { ComponentProps } from './utils/types';
+declare const CircleBadge: import("styled-components").StyledComponent<"div", any, {
+    inline?: boolean | undefined;
+    variant?: "small" | "medium" | "large" | undefined;
+    size?: number | undefined;
+} & SxProp, never>;
+declare const CircleBadgeIcon: import("styled-components").StyledComponent<({ icon: IconComponent, ...rest }: {
+    icon: import("react").ElementType<any>;
+} & import("@primer/octicons-react/dist/icons").IconProps) => JSX.Element, any, SxProp, never>;
+export declare type CircleBadgeProps = ComponentProps<typeof CircleBadge>;
+export declare type CircleBadgeIconProps = ComponentProps<typeof CircleBadgeIcon>;
+declare const _default: string & import("styled-components").StyledComponentBase<"div", any, {
+    inline?: boolean | undefined;
+    variant?: "small" | "medium" | "large" | undefined;
+    size?: number | undefined;
+} & SxProp, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
+    Icon: import("styled-components").StyledComponent<({ icon: IconComponent, ...rest }: {
+        icon: import("react").ElementType<any>;
+    } & import("@primer/octicons-react/dist/icons").IconProps) => JSX.Element, any, SxProp, never>;
+};
+export default _default;

package/lib/CircleBadge.js

@@ -5,26 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _constants = require("./constants");
 
-var _isNumeric = _interopRequireDefault(require("./utils/isNumeric"));
-
-var _theme = _interopRequireDefault(require("./theme"));
+var _StyledOcticon = _interopRequireDefault(require("./StyledOcticon"));
 
 var _sx = _interopRequireDefault(require("./sx"));
 
-var _StyledOcticon = _interopRequireDefault(require("./StyledOcticon"));
+var _isNumeric = _interopRequireDefault(require("./utils/isNumeric"));
 
 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 variantSizes = {
   small: 56,
   medium: 96,
@@ -33,7 +25,7 @@ const variantSizes = {
 
 const sizeStyles = ({
   size,
-  variant
+  variant = 'medium'
 }) => {
   const calc = (0, _isNumeric.default)(size) ? size : variantSizes[variant];
   return {
@@ -44,36 +36,20 @@ const sizeStyles = ({
 
 const CircleBadge = _styledComponents.default.div.withConfig({
   displayName: "CircleBadge",
-  componentId: "sc-19eysyj-0"
-})(["display:", ";align-items:center;justify-content:center;background-color:", ";border-radius:50%;box-shadow:", ";", " ", ";", ";"], props => props.inline ? 'inline-flex' : 'flex', (0, _constants.get)('colors.white'), (0, _constants.get)('shadows.medium'), _constants.COMMON, sizeStyles, _sx.default);
-
-CircleBadge.Icon = props => /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, _extends({}, props, {
-  sx: Object.assign(props.sx, {
-    height: 'auto',
-    maxWidth: '60%',
-    maxHeight: '55%'
-  })
-}));
+  componentId: "sc-1lho816-0"
+})(["display:", ";align-items:center;justify-content:center;background-color:", ";border-radius:50%;box-shadow:", ";", ";", ";"], props => props.inline ? 'inline-flex' : 'flex', (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('shadows.shadow.medium'), sizeStyles, _sx.default);
 
+const CircleBadgeIcon = (0, _styledComponents.default)(_StyledOcticon.default).withConfig({
+  displayName: "CircleBadge__CircleBadgeIcon",
+  componentId: "sc-1lho816-1"
+})(["height:auto;max-width:60%;max-height:55%;"]);
 CircleBadge.defaultProps = {
-  inline: false,
-  theme: _theme.default,
-  variant: 'medium'
-};
-CircleBadge.propTypes = {
-  inline: _propTypes.default.bool,
-  size: _propTypes.default.number,
-  theme: _propTypes.default.object,
-  variant: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
-CircleBadge.Icon.defaultProps = {
-  theme: _theme.default,
-  sx: {}
-};
-CircleBadge.Icon.propTypes = { ..._StyledOcticon.default.propTypes
+  inline: false
 };
-CircleBadge.Icon.displayName = 'CircleBadge.Icon';
-var _default = CircleBadge;
+CircleBadgeIcon.displayName = 'CircleBadge.Icon';
+
+var _default = Object.assign(CircleBadge, {
+  Icon: CircleBadgeIcon
+});
+
 exports.default = _default;