@carbon/react 1.16.0 → 1.17.0-rc.1

package/es/components/Tabs/index.js

@@ -5,15 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import * as FeatureFlags from '@carbon/feature-flags';
-import { Tabs as Tabs$2 } from './next/Tabs.js';
-export { IconTab, Tab, TabList, TabPanel, TabPanels } from './next/Tabs.js';
-import Tabs$3 from './Tabs.js';
-import TabsSkeleton$1 from './Tabs.Skeleton.js';
-import TabsSkeleton from './next/Tabs.Skeleton.js';
-
-var Tabs = FeatureFlags.enabled('enable-v11-release') ? Tabs$2 : Tabs$3;
-FeatureFlags.enabled('enable-v11-release') ? TabsSkeleton : TabsSkeleton$1;
-var Tabs$1 = Tabs;
-
-export { Tabs$1 as default };
+import { Tabs } from './Tabs.js';
+export { IconTab, Tab, TabList, TabPanel, TabPanels, Tabs as default } from './Tabs.js';

package/es/components/Tabs/{next/usePressable.js → usePressable.js}

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { useRef, useState, useEffect } from 'react';
 
 function usePressable(ref) {

package/es/components/Text/Text.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+import { PolymorphicProps } from '../../types/common';
+import { TextDir } from './TextDirection';
+export interface TextBaseProps {
+    dir?: TextDir | undefined;
+}
+export declare type TextProps<T extends React.ElementType> = PolymorphicProps<T, TextBaseProps>;
+declare function Text<T extends React.ElementType>({ as, children, dir, ...rest }: TextProps<T>): JSX.Element;
+declare namespace Text {
+    var propTypes: {
+        /**
+         * Provide a custom element type used to render the outermost node
+         */
+        as: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.ReactComponentLike | null | undefined>>;
+        /**
+         * Provide child elements or text to be rendered inside of this component
+         */
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /**
+         * Specify the text direction to be used for this component and any of its
+         * children
+         */
+        dir: PropTypes.Requireable<string>;
+    };
+}
+export { Text };

package/es/components/Text/Text.js

@@ -13,15 +13,16 @@ import { TextDirectionContext } from './TextDirectionContext.js';
 var _excluded = ["as", "children", "dir"];
 
 function Text(_ref) {
-  var _ref$as = _ref.as,
-      BaseComponent = _ref$as === void 0 ? 'span' : _ref$as,
+  var as = _ref.as,
       children = _ref.children,
       _ref$dir = _ref.dir,
       dir = _ref$dir === void 0 ? 'auto' : _ref$dir,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  // TODO: Update with context typing once its been converted to TS
   var context = useContext(TextDirectionContext);
   var textProps = {};
+  var BaseComponent = as !== null && as !== void 0 ? as : 'span';
 
   var value = _objectSpread2({}, context);
 
@@ -74,21 +75,23 @@ Text.propTypes = {
 };
 
 function getTextFromChildren(children) {
+  var _React$Children$map;
+
   if (typeof children === 'string') {
     return children;
   }
 
-  var text = React__default.Children.map(children, function (child) {
+  var text = (_React$Children$map = React__default.Children.map(children, function (child) {
     if (typeof child === 'string') {
       return child;
     }
 
     return null;
-  }).filter(function (text) {
+  })) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.filter(function (text) {
     return text !== null;
   });
 
-  if (text.length === 1) {
+  if ((text === null || text === void 0 ? void 0 : text.length) === 1) {
     return text[0];
   }
 

package/es/components/Text/TextDirection.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+import { ReactNode } from 'react';
+export declare type TextDir = 'ltr' | 'rtl' | 'auto';
+export declare type GetTextDirection = (text: string | string[] | undefined) => TextDir;
+export interface TextDirectionProps {
+    children: ReactNode | undefined;
+    dir?: TextDir;
+    getTextDirection?: GetTextDirection;
+}
+declare function TextDirection({ children, dir, getTextDirection, }: TextDirectionProps): JSX.Element;
+declare namespace TextDirection {
+    var propTypes: {
+        /**
+         * Provide children to be rendered inside of this component
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify the text direction for rendered children
+         */
+        dir: PropTypes.Requireable<string>;
+        /**
+         * Optionally provide a custom function to get the text direction for a piece
+         * of text. Whatever is returned will become the value of the `dir` attribute
+         * on a node of text. Should return one of: 'ltr', 'rtl', or 'auto'
+         */
+        getTextDirection: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export { TextDirection };

package/es/components/Text/TextDirectionContext.js

@@ -7,6 +7,8 @@
 
 import { createContext } from 'react';
 
+/** @type any */
+
 var TextDirectionContext = /*#__PURE__*/createContext(null);
 
 export { TextDirectionContext };

package/es/components/Text/createTextComponent.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import { TextProps } from './Text';
+/**
+ * Create a text component wrapper for a given text node type. Useful for
+ * returning a `Text` component for a text node like a `<label>`.
+ * @param {string} element
+ * @param {string} displayName
+ */
+export declare function createTextComponent(element: React.ElementType, displayName: string): {
+    (props: TextProps<React.ElementType>): JSX.Element;
+    displayName: string;
+};

package/es/components/Text/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { TextDirection, TextDirectionProps, GetTextDirection, TextDir } from './TextDirection';
+import { Text, TextBaseProps, TextProps } from './Text';
+export { TextDirection, Text };
+export type { TextBaseProps, TextProps, TextDirectionProps, GetTextDirection, TextDir, };
+export declare const Label: {
+    (props: TextProps<import("react").ElementType<any>>): JSX.Element;
+    displayName: string;
+};
+export declare const Legend: {
+    (props: TextProps<import("react").ElementType<any>>): JSX.Element;
+    displayName: string;
+};

package/es/components/Text/index.js

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+export { TextDirection } from './TextDirection.js';
+export { Text } from './Text.js';
 import { createTextComponent } from './createTextComponent.js';
 
 createTextComponent('label', 'Label');

package/es/components/TextArea/TextArea.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useState } from 'react';
+import React__default, { useContext, useState, useEffect } from 'react';
 import cx from 'classnames';
 import deprecate from '../../prop-types/deprecate.js';
 import { WarningFilled } from '@carbon/icons-react';
@@ -49,6 +49,11 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
       textCount = _useState2[0],
       setTextCount = _useState2[1];
 
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      ariaAnnouncement = _useState4[0],
+      setAriaAnnouncement = _useState4[1];
+
   var textareaProps = {
     id: id,
     onChange: function onChange(evt) {
@@ -72,6 +77,15 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
     textareaProps.maxLength = maxCount;
   }
 
+  useEffect(function () {
+    var lastTen = maxCount - 10;
+
+    if (textCount >= lastTen) {
+      setAriaAnnouncement("".concat(maxCount - textCount, " characters left."));
+    } else {
+      setAriaAnnouncement('');
+    }
+  }, [textCount, maxCount]);
   var labelClasses = cx("".concat(prefix, "--label"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--visually-hidden"), hideLabel && !isFluid), _defineProperty(_classNames, "".concat(prefix, "--label--disabled"), disabled), _classNames));
   var label = labelText ? /*#__PURE__*/React__default.createElement("label", {
     htmlFor: id,
@@ -110,7 +124,10 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
     "data-invalid": invalid || null
   }, invalid && !isFluid && /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: "".concat(prefix, "--text-area__invalid-icon")
-  }), input, isFluid && /*#__PURE__*/React__default.createElement("hr", {
+  }), input, /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--text-area__counter-alert"),
+    role: "alert"
+  }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default.createElement("hr", {
     className: "".concat(prefix, "--text-area__divider")
   }), isFluid && invalid ? error : null), invalid && !isFluid ? error : helper);
 });