@telus-uds/components-base 0.0.2-prerelease.6 → 1.0.0

package/lib/ExpandCollapse/Panel.js

@@ -1,10 +1,37 @@
-import React, { useState } from 'react';
-import { Animated, Platform, StyleSheet, View } from 'react-native';
-import PropTypes from 'prop-types';
-import ExpandCollapseControl from './Control';
-import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, variantProp, useVerticalExpandAnimation, a11yProps } from '../utils'; // just void functions for now, since there are no style tokens for a panel or control at this point
+"use strict";
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Control = _interopRequireDefault(require("./Control"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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; }
+
+// just void functions for now, since there are no style tokens for a panel or control at this point
 const selectGroupStyles = () => {};
 
 const selectContainerStyles = ({
@@ -30,7 +57,7 @@ const selectContainerStyles = ({
  */
 
 
-const ExpandCollapsePanel = ({
+const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)(({
   openIds = [],
   panelId,
   onToggle,
@@ -41,20 +68,22 @@ const ExpandCollapsePanel = ({
   tokens,
   variant,
   ...rest
-}) => {
-  const [containerHeight, setContainerHeight] = useState(null);
+}, ref) => {
+  const [containerHeight, setContainerHeight] = (0, _react.useState)(null);
   const isExpanded = openIds.includes(panelId);
-  const a11y = a11yProps.select(rest);
+
+  const a11y = _utils.a11yProps.select(rest);
+
   a11y.accessibilityState = { ...(a11y.accessibilityState || {}),
     expanded: isExpanded
   };
-  const themeTokens = useThemeTokens('ExpandCollapsePanel', tokens, variant, {
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ExpandCollapsePanel', tokens, variant, {
     expanded: isExpanded
   });
 
-  const handleControlPress = () => {
-    onToggle(panelId);
-    if (onPress) onPress(panelId);
+  const handleControlPress = event => {
+    onToggle(panelId, event);
+    if (onPress) onPress(panelId, event);
   };
 
   const onContainerLayout = event => {
@@ -68,78 +97,88 @@ const ExpandCollapsePanel = ({
     }
   };
 
-  const animatedStyles = useVerticalExpandAnimation({
+  const animatedStyles = (0, _utils.useVerticalExpandAnimation)({
     containerHeight,
     isExpanded,
     tokens: themeTokens
   }); // on web we can hide the contents until we have the container measured and avoid occasional jitter
   // this won't work on native platforms
 
-  const overflowContainerStyles = containerHeight === null && Platform.OS === 'web' ? {
+  const overflowContainerStyles = containerHeight === null && _Platform.default.OS === 'web' ? {
     height: 0,
     visibility: 'hidden'
   } : undefined;
-  const focusabilityProps = isExpanded ? {} : a11yProps.nonFocusableProps;
-  return /*#__PURE__*/React.createElement(View, {
-    style: selectGroupStyles(themeTokens)
-  }, /*#__PURE__*/React.createElement(ExpandCollapseControl, Object.assign({}, a11y, {
-    isExpanded: isExpanded,
-    tokens: controlTokens,
-    onPress: handleControlPress
-  }), control), /*#__PURE__*/React.createElement(View, Object.assign({
-    style: overflowContainerStyles
-  }, focusabilityProps), /*#__PURE__*/React.createElement(Animated.View, {
-    onLayout: onContainerLayout,
-    style: [staticStyles.itemsContainer, animatedStyles]
-  }, /*#__PURE__*/React.createElement(View, {
-    style: selectContainerStyles(themeTokens)
-  }, children))));
-};
-
+  const focusabilityProps = isExpanded ? {} : _utils.a11yProps.nonFocusableProps;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    ref: ref,
+    style: selectGroupStyles(themeTokens),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Control.default, { ...a11y,
+      isExpanded: isExpanded,
+      tokens: controlTokens,
+      onPress: handleControlPress,
+      children: control
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: overflowContainerStyles,
+      ...focusabilityProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+        onLayout: onContainerLayout,
+        style: [staticStyles.itemsContainer, animatedStyles],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectContainerStyles(themeTokens),
+          children: children
+        })
+      })
+    })]
+  });
+});
+ExpandCollapsePanel.displayName = 'ExpandCollapsePanel';
 ExpandCollapsePanel.propTypes = {
-  variant: variantProp.propType,
-  tokens: getTokensPropType('ExpandCollapsePanel'),
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('ExpandCollapsePanel'),
 
   /**
    * Array of the ids of currently open groups
    */
-  openIds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+  openIds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])),
 
   /**
    * Unique name by which the ExpandCollapse controls this element.
    */
-  panelId: PropTypes.string.isRequired,
+  panelId: _propTypes.default.string.isRequired,
 
   /**
    * Function to call on pressing the panel's control, which should open or close the panel.
    * If Panel is a direct child of `ExpandCollapse`, this prop will be provided by the ExpandCollapse parent.
    */
-  onToggle: PropTypes.func.isRequired,
+  onToggle: _propTypes.default.func.isRequired,
 
   /**
    * Optional function to call on pressing the panel's control, in addition to opening or closing the panel.
    */
-  onPress: PropTypes.func,
+  onPress: _propTypes.default.func,
 
   /**
    * ExpandCollapsePanel's children are the content that is hidden or revealed on open or close, and may be any
    * single React element or a render function which takes this group's isExpanded state, onToggle function and panelId
    */
-  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
 
   /**
    * The content inside the always-visible control element that opens and closes the ExpandCollapse when pressed.
    */
-  control: ExpandCollapseControl.propTypes.children.isRequired,
+  control: _Control.default.propTypes.children.isRequired,
 
   /**
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
    */
-  controlTokens: getTokensPropType('ExpandCollapseControl')
+  controlTokens: (0, _utils.getTokensPropType)('ExpandCollapseControl')
 };
-const staticStyles = StyleSheet.create({
+
+const staticStyles = _StyleSheet.default.create({
   itemsContainer: {
     overflow: 'hidden'
   }
 });
-export default ExpandCollapsePanel;
+
+var _default = ExpandCollapsePanel;
+exports.default = _default;

package/lib/ExpandCollapse/index.js

@@ -1,7 +1,25 @@
-import ExpandCollapse from './ExpandCollapse';
-import Accordion from './Accordion';
-import Panel from './Panel';
-ExpandCollapse.Panel = Panel;
-Accordion.Panel = Panel;
-export default ExpandCollapse;
-export { Accordion };
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Accordion", {
+  enumerable: true,
+  get: function () {
+    return _Accordion.default;
+  }
+});
+exports.default = void 0;
+
+var _ExpandCollapse = _interopRequireDefault(require("./ExpandCollapse"));
+
+var _Accordion = _interopRequireDefault(require("./Accordion"));
+
+var _Panel = _interopRequireDefault(require("./Panel"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_ExpandCollapse.default.Panel = _Panel.default;
+_Accordion.default.Panel = _Panel.default;
+var _default = _ExpandCollapse.default;
+exports.default = _default;

package/lib/Feedback/Feedback.js

@@ -1,23 +1,47 @@
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import PropTypes from 'prop-types';
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectTokens, variantProp } from '../utils';
-import StackView from '../StackView';
+"use strict";
 
-const selectStyles = tokens => selectTokens('Feedback', tokens);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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 selectStyles = tokens => (0, _utils.selectTokens)('Feedback', tokens);
 
 const selectTitleTextStyles = ({
   titleFontSize,
   ...tokens
-}) => applyTextStyles(selectTokens('Typography', { ...tokens,
+}) => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', { ...tokens,
   fontSize: titleFontSize
 }));
 
 const selectContentTextStyles = ({
   contentFontSize,
   ...tokens
-}) => applyTextStyles(selectTokens('Typography', { ...tokens,
+}) => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', { ...tokens,
   fontSize: contentFontSize
 }));
 
@@ -54,14 +78,18 @@ const selectIconContainerStyles = ({
  */
 
 
-const Feedback = ({
+const Feedback = /*#__PURE__*/(0, _react.forwardRef)(({
   title,
   children,
+  id,
+  validation,
   tokens,
   variant,
   ...rest
-}) => {
-  const themeTokens = useThemeTokens('Feedback', tokens, variant);
+}, ref) => {
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Feedback', tokens, { ...variant,
+    validation
+  });
   const {
     space
   } = themeTokens;
@@ -70,43 +98,66 @@ const Feedback = ({
   } = themeTokens;
   const titleTextStyles = selectTitleTextStyles(themeTokens);
   const contentTextStyles = selectContentTextStyles(themeTokens);
-  const content = typeof children === 'string' ? /*#__PURE__*/React.createElement(Text, {
-    style: contentTextStyles
-  }, children) : children;
-  const accessibilityProps = a11yProps.select(rest);
-  return /*#__PURE__*/React.createElement(View, Object.assign({
-    style: selectStyles(themeTokens)
-  }, accessibilityProps), /*#__PURE__*/React.createElement(StackView, {
-    space: space
-  }, title !== undefined && /*#__PURE__*/React.createElement(View, {
-    style: staticStyles.title
-  }, IconComponent && /*#__PURE__*/React.createElement(View, {
-    style: selectIconContainerStyles(themeTokens)
-  }, /*#__PURE__*/React.createElement(IconComponent, {
-    tokens: selectIconTokens(themeTokens)
-  })), /*#__PURE__*/React.createElement(Text, {
-    style: titleTextStyles
-  }, title)), content && typeof content === 'function' ? content({
-    textStyles: contentTextStyles,
-    variant
-  }) : content));
-};
+  const content = typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+    style: contentTextStyles,
+    children: children
+  }) : children;
+
+  const accessibilityProps = _utils.a11yProps.select({
+    accessibilityRole: validation === 'error' ? 'alert' : undefined,
+    ...rest
+  });
 
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    style: selectStyles(themeTokens),
+    ...accessibilityProps,
+    nativeID: id,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+      space: space,
+      children: [title !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        style: staticStyles.title,
+        children: [IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectIconContainerStyles(themeTokens),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconTokens(themeTokens)
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          style: titleTextStyles,
+          children: title
+        })]
+      }), content && typeof content === 'function' ? content({
+        textStyles: contentTextStyles,
+        variant
+      }) : content]
+    })
+  });
+});
+Feedback.displayName = 'Feedback';
 Feedback.propTypes = {
   /**
    * Emphasized summary of the feedback. If an icon is set, it is rendered next to the title.
    */
-  title: PropTypes.string,
+  title: _propTypes.default.string,
 
   /**
    * Feedback content rendered below the title. A render function `({textStyles, variant}) => {}` is supported.
    */
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
-  tokens: getTokensPropType('Feedback'),
-  variant: variantProp.propType
+  children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func]),
+
+  /**
+   * Use to visually mark the Feedback as valid or invalid.
+   */
+  validation: _propTypes.default.oneOf(['error', 'success']),
+
+  /** @ignore */
+  id: _propTypes.default.string,
+  tokens: (0, _utils.getTokensPropType)('Feedback'),
+  variant: _utils.variantProp.propType
 };
-export default Feedback;
-const staticStyles = StyleSheet.create({
+var _default = Feedback;
+exports.default = _default;
+
+const staticStyles = _StyleSheet.default.create({
   title: {
     display: 'flex',
     flexDirection: 'row',

package/lib/Feedback/index.js

@@ -1,2 +1,13 @@
-import Feedback from './Feedback';
-export default Feedback;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Feedback = _interopRequireDefault(require("./Feedback"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _Feedback.default;
+exports.default = _default;

package/lib/Fieldset/Fieldset.js

@@ -0,0 +1,165 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Feedback = _interopRequireDefault(require("../Feedback"));
+
+var _utils = require("../utils");
+
+var _FieldsetContainer = _interopRequireDefault(require("./FieldsetContainer"));
+
+var _StackView = require("../StackView");
+
+var _InputLabel = _interopRequireDefault(require("../InputLabel"));
+
+var _useInputSupports = _interopRequireDefault(require("../InputSupports/useInputSupports"));
+
+var _Legend = _interopRequireDefault(require("./Legend"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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; }
+
+/**
+ * An alternative to InputSupports for groups of input elements that, on web, are to be
+ * wrapped in a `<fieldset>` tag, with label content displated in a `<legend>` tag.
+ *
+ * Follows the same theming and most of the same props as InputSupports.
+ */
+const Fieldset = /*#__PURE__*/(0, _react.forwardRef)(({
+  space,
+  feedback,
+  feedbackPosition = 'top',
+  validation,
+  legend,
+  hint,
+  hintPosition,
+  tooltip,
+  inactive,
+  accessibilityRole,
+  name: fieldsetName,
+  children
+}, ref) => {
+  // Skips `inputId` because a fieldset' legend describes multiple inputs
+  const {
+    hintId,
+    feedbackId,
+    a11yProps
+  } = (0, _useInputSupports.default)({
+    feedback,
+    hint,
+    label: legend,
+    validation
+  });
+  const legendContent = legend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+      label: legend,
+      hint: hint,
+      hintPosition: hintPosition,
+      hintId: hintId,
+      tooltip: tooltip
+    })
+  });
+  const feedbackContent = feedback && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Feedback.default, {
+    id: feedbackId,
+    title: feedback,
+    validation: validation
+  }); // Some accessibility patterns depend on elements being direct children, e.g. fieldset -> legend,
+  // and on MacOS voiceover, radiogroup -> radio. To allow elements to be direct children of the
+  // fieldset as much as possible, but also allow different spacing within content and between
+  // fieldset / feedback / etc, wrap resolved children in a fragment, and stack with `preserveFragments`.
+
+  const childContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: typeof children === 'function' ? children({
+      a11yProps
+    }) : children
+  });
+  const orderedContent = feedbackPosition === 'bottom' ? [legendContent, feedbackContent, childContent] : [legendContent, childContent, feedbackContent];
+  const stackedContent = (0, _StackView.getStackedContent)(orderedContent, {
+    space,
+    preserveFragments: true
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldsetContainer.default, {
+    ref: ref,
+    inactive: inactive,
+    accessibilityRole: accessibilityRole,
+    name: fieldsetName,
+    children: stackedContent
+  });
+});
+Fieldset.displayName = 'Fieldset';
+Fieldset.propTypes = {
+  children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
+
+  /**
+   * The accessibility role of the `<fieldset>` element itself. Other React Native accessibility
+   * props are not supported because there is not an appropriate counterpart for Fieldsets.
+   */
+  accessibilityRole: _propTypes.default.string,
+
+  /**
+   * The amout of space between legend, feedback and content; according  to the theme's spacing scale.
+   * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
+   * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
+   */
+  space: _utils.spacingProps.types.spacingValue,
+
+  /**
+   * The text for the fieldset's legend, describing the fieldset content.
+   */
+  legend: _propTypes.default.string,
+
+  /**
+   * A short description of the expected input.
+   */
+  hint: _propTypes.default.string,
+
+  /**
+   * Position of the hint relative to label.
+   */
+  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+
+  /**
+   * A detailed description of validation error/success or additional instructions.
+   * Visual variant is determined based on the `validation` prop.
+   */
+  feedback: _propTypes.default.string,
+
+  /**
+   * Position of the feedback block relative to the fieldset's content.
+   */
+  feedbackPosition: _propTypes.default.oneOf(['above', 'below']),
+
+  /**
+   * If true, the fieldset is treated as inactive (setting `disabled` attribute on web).
+   */
+  inactive: _propTypes.default.bool,
+
+  /**
+   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+   */
+  tooltip: _propTypes.default.string,
+
+  /**
+   * On web, this is passed to the `<fieldset>`'s `name` attribute.
+   */
+  name: _propTypes.default.string,
+
+  /**
+   * Use to visually mark an input as valid or invalid.
+   */
+  validation: _propTypes.default.oneOf(['error', 'success'])
+};
+var _default = Fieldset;
+exports.default = _default;

package/lib/Fieldset/FieldsetContainer.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _cssReset = _interopRequireDefault(require("./cssReset"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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; }
+
+/**
+ * On Web, wraps children with a HTML `<fieldset>` and sets its attributes as necessary.
+ */
+const FieldsetContainer = /*#__PURE__*/(0, _react.forwardRef)(({
+  children,
+  inactive,
+  accessibilityRole,
+  name: fieldsetName
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
+  ref: ref,
+  disabled: inactive,
+  style: _cssReset.default,
+  role: accessibilityRole,
+  name: fieldsetName,
+  children: children
+}));
+FieldsetContainer.displayName = 'FieldsetContainer';
+FieldsetContainer.propTypes = {
+  accessibilityRole: _propTypes.default.string,
+  children: _propTypes.default.node,
+  inactive: _propTypes.default.bool,
+  name: _propTypes.default.string
+};
+var _default = FieldsetContainer;
+exports.default = _default;