@instructure/ui-i18n 8.56.0 → 9.0.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [9.0.0](https://github.com/instructure/instructure-ui/compare/v8.56.0...v9.0.0) (2024-05-09)
+
+**Note:** Version bump only for package @instructure/ui-i18n
+
+
+
+
+
 # [8.56.0](https://github.com/instructure/instructure-ui/compare/v8.55.1...v8.56.0) (2024-05-06)
 
 **Note:** Version bump only for package @instructure/ui-i18n

package/README.md

@@ -15,7 +15,6 @@ Helper components and utilities for internationalization.
 The `ui-i18n` package contains the following:
 
 - [ApplyLocale](#ApplyLocale)
-- [ApplyTextDirection](#ApplyTextDirection)
 
 ### Utilities
 

package/es/index.js

@@ -24,11 +24,9 @@
 
 export { ApplyLocale } from './ApplyLocale';
 export { ApplyLocaleContext } from './ApplyLocale/ApplyLocaleContext';
-export { bidirectional } from './bidirectional';
 export { textDirectionContextConsumer } from './textDirectionContextConsumer';
 export { DateTime } from './DateTime';
 export { getTextDirection } from './getTextDirection';
 export { I18nPropTypes } from './I18nPropTypes';
 export { Locale } from './Locale';
-export { DIRECTION, TextDirectionContext } from './TextDirectionContext';
-export { ApplyTextDirection } from './ApplyTextDirection';
+export { DIRECTION, TextDirectionContext } from './TextDirectionContext';

package/es/textDirectionContextConsumer.js

@@ -1,3 +1,5 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["forwardedRef"];
 /*
  * The MIT License (MIT)
  *
@@ -21,9 +23,15 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+import React, { forwardRef } from 'react';
+import { decorator } from '@instructure/ui-decorator';
+import { DIRECTION, TextDirectionContext } from './TextDirectionContext';
+import hoistNonReactStatics from 'hoist-non-react-statics';
 
-import { bidirectional } from './bidirectional';
-
+// This is a workaround because TS cannot take type information from
+// decorators into account. This type needs to be added to every component,
+// that uses the TextDirectionContextConsumer decorator.
+// see https://github.com/microsoft/TypeScript/issues/4881
 /**
  * ---
  * category: utilities/i18n
@@ -46,15 +54,57 @@ import { bidirectional } from './bidirectional';
  * export default textDirectionContextConsumer()(Example)
  * ```
  *
- * When used as a child of [InstUISettingsProvider](#InstUISettingsProvider), bidirectional components use
+ * When used as a child of [InstUISettingsProvider](#InstUISettingsProvider), textDirectionContextConsumer components use
  * the direction provided in `TextDirectionContext`. When used without [InstUISettingsProvider](#InstUISettingsProvider),
  * the direction can be supplied explicitly via the `dir` prop. If no `dir` prop is provided,
- * bidirectional components query the documentElement for the `dir` attribute, defaulting to `ltr`
+ * textDirectionContextConsumer components query the documentElement for the `dir` attribute, defaulting to `ltr`
  * if it is not present.
  *
  * @module textDirectionContextConsumer
- * @return The decorator that composes the bidirectional component.
+ * @return The decorator that composes the textDirectionContextConsumer component.
  */
-const textDirectionContextConsumer = bidirectional;
+const textDirectionContextConsumer = decorator(ComposedComponent => {
+  class TextDirectionContextConsumerComponent extends React.Component {
+    render() {
+      const _this$props = this.props,
+        forwardedRef = _this$props.forwardedRef,
+        rest = _objectWithoutProperties(_this$props, _excluded);
+      // Quite complex code, this is the priority order of applying the `dir` prop:
+      // 1. The highest priority is adding it via a prop
+      // 2. If there is a <TextDirectionContext.Provider> (or <ApplyTextDirection>
+      //    which uses it) above the @textDirectionContextConsumer in the DOM, use its value.
+      // 3. If TextDirectionContext.Provider was called without params
+      //    TextDirectionContext calls getTextDirection() which returns
+      //    the 'dir' prop of the HTML document element.
+      return /*#__PURE__*/React.createElement(TextDirectionContext.Consumer, null, dir => {
+        if (process.env.NODE_ENV !== 'production' && dir === 'auto') {}
+        return /*#__PURE__*/React.createElement(ComposedComponent, Object.assign({
+          ref: forwardedRef,
+          dir: dir
+        }, rest));
+      });
+    }
+  }
+  TextDirectionContextConsumerComponent.displayName = "TextDirectionContextConsumerComponent";
+  const TextDirectionContextConsumerForwardingRef = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(TextDirectionContextConsumerComponent, Object.assign({}, props, {
+    forwardedRef: ref
+  })));
+  if (process.env.NODE_ENV !== 'production') {
+    const displayName = ComposedComponent.displayName || ComposedComponent.name;
+    TextDirectionContextConsumerForwardingRef.displayName = `TextDirectionContextConsumerForwardingRef(${displayName})`;
+  }
+  hoistNonReactStatics(TextDirectionContextConsumerForwardingRef, ComposedComponent);
+  TextDirectionContextConsumerForwardingRef.defaultProps = ComposedComponent.defaultProps;
+  // eslint-disable-next-line react/forbid-foreign-prop-types
+  TextDirectionContextConsumerForwardingRef.propTypes = ComposedComponent.propTypes;
+  // @ts-expect-error These static fields exist on InstUI components
+  TextDirectionContextConsumerForwardingRef.allowedProps = ComposedComponent.allowedProps;
+
+  // added so it can be tested with ReactTestUtils
+  // more info: https://github.com/facebook/react/issues/13455
+  TextDirectionContextConsumerForwardingRef.originalType = ComposedComponent.originalType || ComposedComponent;
+  return TextDirectionContextConsumerForwardingRef;
+});
+textDirectionContextConsumer.DIRECTION = DIRECTION;
 export default textDirectionContextConsumer;
 export { textDirectionContextConsumer };

package/lib/index.js

@@ -15,12 +15,6 @@ Object.defineProperty(exports, "ApplyLocaleContext", {
     return _ApplyLocaleContext.ApplyLocaleContext;
   }
 });
-Object.defineProperty(exports, "ApplyTextDirection", {
-  enumerable: true,
-  get: function () {
-    return _ApplyTextDirection.ApplyTextDirection;
-  }
-});
 Object.defineProperty(exports, "DIRECTION", {
   enumerable: true,
   get: function () {
@@ -51,12 +45,6 @@ Object.defineProperty(exports, "TextDirectionContext", {
     return _TextDirectionContext.TextDirectionContext;
   }
 });
-Object.defineProperty(exports, "bidirectional", {
-  enumerable: true,
-  get: function () {
-    return _bidirectional.bidirectional;
-  }
-});
 Object.defineProperty(exports, "getTextDirection", {
   enumerable: true,
   get: function () {
@@ -71,11 +59,9 @@ Object.defineProperty(exports, "textDirectionContextConsumer", {
 });
 var _ApplyLocale = require("./ApplyLocale");
 var _ApplyLocaleContext = require("./ApplyLocale/ApplyLocaleContext");
-var _bidirectional = require("./bidirectional");
 var _textDirectionContextConsumer = require("./textDirectionContextConsumer");
 var _DateTime = require("./DateTime");
 var _getTextDirection = require("./getTextDirection");
 var _I18nPropTypes = require("./I18nPropTypes");
 var _Locale = require("./Locale");
-var _TextDirectionContext = require("./TextDirectionContext");
-var _ApplyTextDirection = require("./ApplyTextDirection");
+var _TextDirectionContext = require("./TextDirectionContext");

package/lib/textDirectionContextConsumer.js

@@ -1,10 +1,17 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.textDirectionContextConsumer = exports.default = void 0;
-var _bidirectional = require("./bidirectional");
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _decorator = require("@instructure/ui-decorator/lib/decorator.js");
+var _TextDirectionContext = require("./TextDirectionContext");
+var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
+const _excluded = ["forwardedRef"];
 /*
  * The MIT License (MIT)
  *
@@ -28,7 +35,10 @@ var _bidirectional = require("./bidirectional");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
+// This is a workaround because TS cannot take type information from
+// decorators into account. This type needs to be added to every component,
+// that uses the TextDirectionContextConsumer decorator.
+// see https://github.com/microsoft/TypeScript/issues/4881
 /**
  * ---
  * category: utilities/i18n
@@ -51,14 +61,56 @@ var _bidirectional = require("./bidirectional");
  * export default textDirectionContextConsumer()(Example)
  * ```
  *
- * When used as a child of [InstUISettingsProvider](#InstUISettingsProvider), bidirectional components use
+ * When used as a child of [InstUISettingsProvider](#InstUISettingsProvider), textDirectionContextConsumer components use
  * the direction provided in `TextDirectionContext`. When used without [InstUISettingsProvider](#InstUISettingsProvider),
  * the direction can be supplied explicitly via the `dir` prop. If no `dir` prop is provided,
- * bidirectional components query the documentElement for the `dir` attribute, defaulting to `ltr`
+ * textDirectionContextConsumer components query the documentElement for the `dir` attribute, defaulting to `ltr`
  * if it is not present.
  *
  * @module textDirectionContextConsumer
- * @return The decorator that composes the bidirectional component.
+ * @return The decorator that composes the textDirectionContextConsumer component.
  */
-const textDirectionContextConsumer = exports.textDirectionContextConsumer = _bidirectional.bidirectional;
+const textDirectionContextConsumer = exports.textDirectionContextConsumer = (0, _decorator.decorator)(ComposedComponent => {
+  class TextDirectionContextConsumerComponent extends _react.default.Component {
+    render() {
+      const _this$props = this.props,
+        forwardedRef = _this$props.forwardedRef,
+        rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+      // Quite complex code, this is the priority order of applying the `dir` prop:
+      // 1. The highest priority is adding it via a prop
+      // 2. If there is a <TextDirectionContext.Provider> (or <ApplyTextDirection>
+      //    which uses it) above the @textDirectionContextConsumer in the DOM, use its value.
+      // 3. If TextDirectionContext.Provider was called without params
+      //    TextDirectionContext calls getTextDirection() which returns
+      //    the 'dir' prop of the HTML document element.
+      return /*#__PURE__*/_react.default.createElement(_TextDirectionContext.TextDirectionContext.Consumer, null, dir => {
+        if (process.env.NODE_ENV !== 'production' && dir === 'auto') {}
+        return /*#__PURE__*/_react.default.createElement(ComposedComponent, Object.assign({
+          ref: forwardedRef,
+          dir: dir
+        }, rest));
+      });
+    }
+  }
+  TextDirectionContextConsumerComponent.displayName = "TextDirectionContextConsumerComponent";
+  const TextDirectionContextConsumerForwardingRef = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/_react.default.createElement(TextDirectionContextConsumerComponent, Object.assign({}, props, {
+    forwardedRef: ref
+  })));
+  if (process.env.NODE_ENV !== 'production') {
+    const displayName = ComposedComponent.displayName || ComposedComponent.name;
+    TextDirectionContextConsumerForwardingRef.displayName = `TextDirectionContextConsumerForwardingRef(${displayName})`;
+  }
+  (0, _hoistNonReactStatics.default)(TextDirectionContextConsumerForwardingRef, ComposedComponent);
+  TextDirectionContextConsumerForwardingRef.defaultProps = ComposedComponent.defaultProps;
+  // eslint-disable-next-line react/forbid-foreign-prop-types
+  TextDirectionContextConsumerForwardingRef.propTypes = ComposedComponent.propTypes;
+  // @ts-expect-error These static fields exist on InstUI components
+  TextDirectionContextConsumerForwardingRef.allowedProps = ComposedComponent.allowedProps;
+
+  // added so it can be tested with ReactTestUtils
+  // more info: https://github.com/facebook/react/issues/13455
+  TextDirectionContextConsumerForwardingRef.originalType = ComposedComponent.originalType || ComposedComponent;
+  return TextDirectionContextConsumerForwardingRef;
+});
+textDirectionContextConsumer.DIRECTION = _TextDirectionContext.DIRECTION;
 var _default = exports.default = textDirectionContextConsumer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-i18n",
-  "version": "8.56.0",
+  "version": "9.0.0",
   "description": "Helper components and utilities for internationalization.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,19 +23,19 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.56.0",
-    "@instructure/ui-test-utils": "8.56.0",
+    "@instructure/ui-babel-preset": "9.0.0",
+    "@instructure/ui-test-utils": "9.0.0",
     "@types/hoist-non-react-statics": "^3.3.3",
     "react-dom": "^18.2.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/shared-types": "8.56.0",
-    "@instructure/ui-decorator": "8.56.0",
-    "@instructure/ui-dom-utils": "8.56.0",
-    "@instructure/ui-prop-types": "8.56.0",
-    "@instructure/ui-react-utils": "8.56.0",
-    "@instructure/ui-utils": "8.56.0",
+    "@instructure/shared-types": "9.0.0",
+    "@instructure/ui-decorator": "9.0.0",
+    "@instructure/ui-dom-utils": "9.0.0",
+    "@instructure/ui-prop-types": "9.0.0",
+    "@instructure/ui-react-utils": "9.0.0",
+    "@instructure/ui-utils": "9.0.0",
     "hoist-non-react-statics": "^3.3.2",
     "moment-timezone": "^0.5.43",
     "prop-types": "^15.8.1"

package/src/index.ts

@@ -25,16 +25,13 @@
 export { ApplyLocale } from './ApplyLocale'
 export { ApplyLocaleContext } from './ApplyLocale/ApplyLocaleContext'
 
-export { bidirectional } from './bidirectional'
 export { textDirectionContextConsumer } from './textDirectionContextConsumer'
 export { DateTime } from './DateTime'
 export { getTextDirection } from './getTextDirection'
 export { I18nPropTypes } from './I18nPropTypes'
 export { Locale } from './Locale'
 export { DIRECTION, TextDirectionContext } from './TextDirectionContext'
-export { ApplyTextDirection } from './ApplyTextDirection'
 
 export type { Moment } from './DateTime'
-export type { BidirectionalProps } from './bidirectional'
+export type { TextDirectionContextConsumerProps } from './textDirectionContextConsumer'
 export type { ApplyLocaleProps } from './ApplyLocale/props'
-export type { ApplyTextDirectionProps } from './ApplyTextDirection/props'

package/src/textDirectionContextConsumer.tsx

@@ -21,9 +21,33 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+import React, { ForwardedRef, forwardRef, PropsWithChildren } from 'react'
+import type {
+  ForwardRefExoticComponent,
+  PropsWithoutRef,
+  RefAttributes
+} from 'react'
+import { decorator } from '@instructure/ui-decorator'
+import { DIRECTION, TextDirectionContext } from './TextDirectionContext'
+import hoistNonReactStatics from 'hoist-non-react-statics'
 
-import { bidirectional } from './bidirectional'
+// This is a workaround because TS cannot take type information from
+// decorators into account. This type needs to be added to every component,
+// that uses the TextDirectionContextConsumer decorator.
+// see https://github.com/microsoft/TypeScript/issues/4881
+export type TextDirectionContextConsumerProps = PropsWithChildren<{
+  dir?: 'ltr' | 'rtl'
+}>
 
+type TextDirectionContextConsumerInternalProps = {
+  forwardedRef: ForwardedRef<any>
+}
+
+type TextDirectionContextConsumerType = {
+  // TODO likely this can be typed better.
+  (): (ComposedComponent: any) => any
+  DIRECTION: typeof DIRECTION
+}
 /**
  * ---
  * category: utilities/i18n
@@ -46,16 +70,76 @@ import { bidirectional } from './bidirectional'
  * export default textDirectionContextConsumer()(Example)
  * ```
  *
- * When used as a child of [InstUISettingsProvider](#InstUISettingsProvider), bidirectional components use
+ * When used as a child of [InstUISettingsProvider](#InstUISettingsProvider), textDirectionContextConsumer components use
  * the direction provided in `TextDirectionContext`. When used without [InstUISettingsProvider](#InstUISettingsProvider),
  * the direction can be supplied explicitly via the `dir` prop. If no `dir` prop is provided,
- * bidirectional components query the documentElement for the `dir` attribute, defaulting to `ltr`
+ * textDirectionContextConsumer components query the documentElement for the `dir` attribute, defaulting to `ltr`
  * if it is not present.
  *
  * @module textDirectionContextConsumer
- * @return The decorator that composes the bidirectional component.
+ * @return The decorator that composes the textDirectionContextConsumer component.
  */
-const textDirectionContextConsumer = bidirectional
+const textDirectionContextConsumer: TextDirectionContextConsumerType =
+  decorator((ComposedComponent) => {
+    class TextDirectionContextConsumerComponent extends React.Component<TextDirectionContextConsumerInternalProps> {
+      render() {
+        const { forwardedRef, ...rest } = this.props
+        // Quite complex code, this is the priority order of applying the `dir` prop:
+        // 1. The highest priority is adding it via a prop
+        // 2. If there is a <TextDirectionContext.Provider> (or <ApplyTextDirection>
+        //    which uses it) above the @textDirectionContextConsumer in the DOM, use its value.
+        // 3. If TextDirectionContext.Provider was called without params
+        //    TextDirectionContext calls getTextDirection() which returns
+        //    the 'dir' prop of the HTML document element.
+        return (
+          <TextDirectionContext.Consumer>
+            {(dir) => {
+              if (process.env.NODE_ENV !== 'production' && dir === 'auto') {
+                console.warn(
+                  "'auto' is not an supported value for the 'dir' prop. Please pass 'ltr' or 'rtl'"
+                )
+              }
+              return (
+                <ComposedComponent ref={forwardedRef} dir={dir} {...rest} />
+              )
+            }}
+          </TextDirectionContext.Consumer>
+        )
+      }
+    }
+
+    const TextDirectionContextConsumerForwardingRef: ForwardRefExoticComponent<
+      PropsWithoutRef<Record<string, unknown>> & RefAttributes<any>
+    > & {
+      originalType?: React.ComponentClass
+    } = forwardRef<any, TextDirectionContextConsumerProps>((props, ref) => (
+      <TextDirectionContextConsumerComponent {...props} forwardedRef={ref} />
+    ))
+    if (process.env.NODE_ENV !== 'production') {
+      const displayName =
+        ComposedComponent.displayName || ComposedComponent.name
+      TextDirectionContextConsumerForwardingRef.displayName = `TextDirectionContextConsumerForwardingRef(${displayName})`
+    }
+    hoistNonReactStatics(
+      TextDirectionContextConsumerForwardingRef,
+      ComposedComponent
+    )
+    TextDirectionContextConsumerForwardingRef.defaultProps =
+      ComposedComponent.defaultProps
+    // eslint-disable-next-line react/forbid-foreign-prop-types
+    TextDirectionContextConsumerForwardingRef.propTypes = ComposedComponent.propTypes
+    // @ts-expect-error These static fields exist on InstUI components
+    TextDirectionContextConsumerForwardingRef.allowedProps = ComposedComponent.allowedProps
+
+    // added so it can be tested with ReactTestUtils
+    // more info: https://github.com/facebook/react/issues/13455
+    TextDirectionContextConsumerForwardingRef.originalType =
+      (ComposedComponent as any).originalType || ComposedComponent
+
+    return TextDirectionContextConsumerForwardingRef
+  }) as TextDirectionContextConsumerType
+
+textDirectionContextConsumer.DIRECTION = DIRECTION
 
 export default textDirectionContextConsumer
 export { textDirectionContextConsumer }