@carbon/react 1.16.0 → 1.17.0-rc.1

package/lib/components/Tabs/index.js

@@ -9,39 +9,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FeatureFlags = require('@carbon/feature-flags');
-var Tabs$2 = require('./next/Tabs.js');
-var Tabs$3 = require('./Tabs.js');
-var Tabs_Skeleton$1 = require('./Tabs.Skeleton.js');
-var Tabs_Skeleton = require('./next/Tabs.Skeleton.js');
+var Tabs = require('./Tabs.js');
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
 
-var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
-var Tabs = FeatureFlags__namespace.enabled('enable-v11-release') ? Tabs$2.Tabs : Tabs$3["default"];
-FeatureFlags__namespace.enabled('enable-v11-release') ? Tabs_Skeleton["default"] : Tabs_Skeleton$1["default"];
-var Tabs$1 = Tabs;
-
-exports.IconTab = Tabs$2.IconTab;
-exports.Tab = Tabs$2.Tab;
-exports.TabList = Tabs$2.TabList;
-exports.TabPanel = Tabs$2.TabPanel;
-exports.TabPanels = Tabs$2.TabPanels;
-exports["default"] = Tabs$1;
+exports.IconTab = Tabs.IconTab;
+exports.Tab = Tabs.Tab;
+exports.TabList = Tabs.TabList;
+exports.TabPanel = Tabs.TabPanel;
+exports.TabPanels = Tabs.TabPanels;
+exports["default"] = Tabs.Tabs;

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

@@ -9,7 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 
 function usePressable(ref) {

package/lib/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/lib/components/Text/Text.js

@@ -22,15 +22,16 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
+  // TODO: Update with context typing once its been converted to TS
   var context = React.useContext(TextDirectionContext.TextDirectionContext);
   var textProps = {};
+  var BaseComponent = as !== null && as !== void 0 ? as : 'span';
 
   var value = _rollupPluginBabelHelpers.objectSpread2({}, context);
 
@@ -83,21 +84,23 @@ Text.propTypes = {
 };
 
 function getTextFromChildren(children) {
+  var _React$Children$map;
+
   if (typeof children === 'string') {
     return children;
   }
 
-  var text = React__default["default"].Children.map(children, function (child) {
+  var text = (_React$Children$map = React__default["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/lib/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/lib/components/Text/TextDirectionContext.js

@@ -11,6 +11,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
+/** @type any */
+
 var TextDirectionContext = /*#__PURE__*/React.createContext(null);
 
 exports.TextDirectionContext = TextDirectionContext;

package/lib/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/lib/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/lib/components/Text/index.js

@@ -9,9 +9,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var TextDirection = require('./TextDirection.js');
+var Text = require('./Text.js');
 var createTextComponent = require('./createTextComponent.js');
 
 createTextComponent.createTextComponent('label', 'Label');
 var Legend = createTextComponent.createTextComponent('legend', 'Legend');
 
+exports.TextDirection = TextDirection.TextDirection;
+exports.Text = Text.Text;
 exports.Legend = Legend;

package/lib/components/TextArea/TextArea.js

@@ -59,6 +59,11 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
       textCount = _useState2[0],
       setTextCount = _useState2[1];
 
+  var _useState3 = React.useState(''),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      ariaAnnouncement = _useState4[0],
+      setAriaAnnouncement = _useState4[1];
+
   var textareaProps = {
     id: id,
     onChange: function onChange(evt) {
@@ -82,6 +87,15 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
     textareaProps.maxLength = maxCount;
   }
 
+  React.useEffect(function () {
+    var lastTen = maxCount - 10;
+
+    if (textCount >= lastTen) {
+      setAriaAnnouncement("".concat(maxCount - textCount, " characters left."));
+    } else {
+      setAriaAnnouncement('');
+    }
+  }, [textCount, maxCount]);
   var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--visually-hidden"), hideLabel && !isFluid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--label--disabled"), disabled), _classNames));
   var label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: id,
@@ -120,7 +134,10 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
     "data-invalid": invalid || null
   }, invalid && !isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: "".concat(prefix, "--text-area__invalid-icon")
-  }), input, isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
+  }), input, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--text-area__counter-alert"),
+    role: "alert"
+  }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
     className: "".concat(prefix, "--text-area__divider")
   }), isFluid && invalid ? error : null), invalid && !isFluid ? error : helper);
 });