box-ui-elements 18.1.0-beta.3 → 18.1.0

package/es/components/i18n/FormattedCompMessage.js

@@ -164,7 +164,7 @@ function (_React$Component) {
       // the reviewer finds and submit translation tickets to Jira and/or fixed
       // translations directly back to Mojito.
       // 3. It can be used by the planned "text experiment framework" to identify
-      // whole strings in the UI that can be A/B tested in various langauges without
+      // whole strings in the UI that can be A/B tested in various languages without
       // publishing new versions of the code.
 
       return React.createElement(tagName, _objectSpread({

package/es/components/i18n/FormattedCompMessage.js.flow

@@ -184,7 +184,7 @@ class FormattedCompMessage extends React.Component<Props, State> {
         // the reviewer finds and submit translation tickets to Jira and/or fixed
         // translations directly back to Mojito.
         // 3. It can be used by the planned "text experiment framework" to identify
-        // whole strings in the UI that can be A/B tested in various langauges without
+        // whole strings in the UI that can be A/B tested in various languages without
         // publishing new versions of the code.
         return React.createElement(
             tagName,

package/es/components/i18n/FormattedCompMessage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/i18n/FormattedCompMessage.js"],"names":["React","injectIntl","isNaN","isDevEnvironment","CATEGORY_ZERO","CATEGORY_ONE","CATEGORY_TWO","CATEGORY_FEW","CATEGORY_MANY","CATEGORY_OTHER","Composition","FormattedCompMessage","props","console","warn","defaultMessage","count","children","sourceElements","composition","source","Number","composePluralString","Error","compose","state","categories","Children","forEach","child","isValidElement","type","name","childComposition","category","one","other","categoriesString","map","join","tagName","intl","description","id","rest","values","descriptor","translation","formatMessage","createElement","key","decompose","Component"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { injectIntl } from 'react-intl';\nimport isNaN from 'lodash/isNaN';\n\nimport isDevEnvironment from '../../utils/env';\nimport { CATEGORY_ZERO, CATEGORY_ONE, CATEGORY_TWO, CATEGORY_FEW, CATEGORY_MANY, CATEGORY_OTHER } from './constants';\nimport Composition from './Composition';\n\ntype Props = {\n    /**\n     * The text to translate. This may be a string or JSX. The defaultMessage prop may be\n     * given or the component may have children, but not both.\n     */\n    children?: React.Node,\n\n    /**\n     * Specify the pivot count to choose which plural form to use.\n     * When specified, this FormattedCompMessage component will choose one of the\n     * Plural elements in its children according to the value of this count\n     * and the linguistic rules of the locale which determine which numbers\n     * belong to which plural class.\n     */\n    count?: number,\n\n    /**\n     * The text to translate. This may be a string or JSX. This prop may be\n     * given or the component may have children, but not both.\n     */\n    defaultMessage?: React.ElementType | string,\n\n    /**\n     * A description to send to the translators to explain the context of\n     * this string.\n     */\n    description: string,\n\n    /** The unique id of this string. */\n    id: string,\n\n    /**\n     * The intl provider. This is injected into this component\n     * via the injectIntl function from react-intl.\n     */\n    intl: Object,\n\n    /**\n     * Specify the name of the HTML tag you would like to use to wrap the\n     * translations.\n     */\n    tagName: string,\n};\n\ntype State = {\n    composition: Composition,\n    source: string,\n};\n\n/**\n * Replace the text inside of this component with a translation. This\n * component is built on top of react-intl, so it works along with the\n * regular react-intl components and objects you are used to, and it gets\n * its translations from react intl as well. The FormattedCompMessage component can\n * be used wherever it is valid to put JSX text. In regular Javascript\n * code, you should continue to use the intl.formatMessage() call and\n * extract your strings into a message.js file.\n */\nclass FormattedCompMessage extends React.Component<Props, State> {\n    composition: Composition;\n\n    str: string;\n\n    static defaultProps = {\n        tagName: 'span',\n    };\n\n    constructor(props: Props) {\n        super(props);\n\n        /* eslint-disable no-console */\n        console.warn(\n            \"box-ui-elements: the FormattedCompMessage component is deprecated! Use react-intl's FormattedMessage instead.\",\n        );\n        /* eslint-enable no-console */\n\n        // these parameters echo the ones in react-intl's FormattedMessage\n        // component, plus a few extra\n        const {\n            defaultMessage, // The English string + HTML + components that you want translated\n            count, // the pivot count to choose a plural form\n            children, // the components within the body\n        } = this.props;\n\n        const sourceElements = defaultMessage || children;\n\n        if (sourceElements) {\n            const composition = new Composition(sourceElements);\n            let source = '';\n\n            if (!isNaN(Number(count))) {\n                if (children) {\n                    source = this.composePluralString(children);\n                } else if (isDevEnvironment()) {\n                    throw new Error('Cannot use count prop on a FormattedCompMessage component that has no children.');\n                }\n            } else {\n                source = composition.compose();\n            }\n\n            this.state = {\n                source,\n                composition,\n            };\n        }\n    }\n\n    /**\n     * Search for any Plural elements in the children, and\n     * then construct the English source string in the correct\n     * format for react-intl to use for pluralization\n     * @param {React.Element} children the children of this node\n     * @return {string} the composed plural string\n     */\n    composePluralString(children) {\n        const categories = {};\n        React.Children.forEach(children, child => {\n            if (typeof child === 'object' && React.isValidElement(child) && child.type.name === 'Plural') {\n                const childComposition = new Composition(child.props.children);\n                categories[child.props.category] = childComposition.compose();\n            }\n        });\n        if (!categories.one || !categories.other) {\n            if (isDevEnvironment()) {\n                throw new Error(\n                    'Cannot use count prop on a FormattedCompMessage component without giving both a \"one\" and \"other\" Plural component in the children.',\n                );\n            }\n        }\n        // add these to the string in a particular order so that\n        // we always end up with the same string regardless of\n        // the order that the Plural elements were specified in\n        // the source code\n        const categoriesString = [\n            CATEGORY_ZERO,\n            CATEGORY_ONE,\n            CATEGORY_TWO,\n            CATEGORY_FEW,\n            CATEGORY_MANY,\n            CATEGORY_OTHER,\n        ]\n            .map(category => (categories[category] ? ` ${category} {${categories[category]}}` : ''))\n            .join('');\n\n        // see the intl-messageformat project for an explanation of this syntax\n        return `{count, plural,${categoriesString}}`;\n    }\n\n    render() {\n        const { count, tagName, intl, description, id, defaultMessage, ...rest } = this.props;\n        const { composition, source } = this.state;\n        const values = {};\n        if (typeof count === 'number') {\n            // make sure intl.formatMessage switches properly on the count\n            values.count = count;\n        }\n\n        // react-intl will do the correct plurals if necessary\n        const descriptor = {\n            id,\n            defaultMessage: source,\n            description,\n        };\n        const translation = intl.formatMessage(descriptor, values);\n\n        // always wrap the translated string in a tag to contain everything\n        // and to give us a spot to record the id. The resource id is the\n        // the id in mojito for the string. Having this attr has these advantages:\n        // 1. When debugging i18n or translation problems, it is MUCH easier to find\n        // the exact string to fix in Mojito rather than guessing. It might be useful\n        // for general debugging as well to map from something you see in the UI to\n        // the actual code that implements it.\n        // 2. It can be used by an in-context linguistic review tool. The tool code\n        // can contact mojito and retrieve the English for any translation errors that\n        // the reviewer finds and submit translation tickets to Jira and/or fixed\n        // translations directly back to Mojito.\n        // 3. It can be used by the planned \"text experiment framework\" to identify\n        // whole strings in the UI that can be A/B tested in various langauges without\n        // publishing new versions of the code.\n        return React.createElement(\n            tagName,\n            {\n                key: id,\n                'x-resource-id': id,\n                ...rest,\n            },\n            composition.decompose(translation),\n        );\n    }\n}\n\nexport default injectIntl(FormattedCompMessage);\n"],"file":"FormattedCompMessage.js"}
+{"version":3,"sources":["../../../src/components/i18n/FormattedCompMessage.js"],"names":["React","injectIntl","isNaN","isDevEnvironment","CATEGORY_ZERO","CATEGORY_ONE","CATEGORY_TWO","CATEGORY_FEW","CATEGORY_MANY","CATEGORY_OTHER","Composition","FormattedCompMessage","props","console","warn","defaultMessage","count","children","sourceElements","composition","source","Number","composePluralString","Error","compose","state","categories","Children","forEach","child","isValidElement","type","name","childComposition","category","one","other","categoriesString","map","join","tagName","intl","description","id","rest","values","descriptor","translation","formatMessage","createElement","key","decompose","Component"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { injectIntl } from 'react-intl';\nimport isNaN from 'lodash/isNaN';\n\nimport isDevEnvironment from '../../utils/env';\nimport { CATEGORY_ZERO, CATEGORY_ONE, CATEGORY_TWO, CATEGORY_FEW, CATEGORY_MANY, CATEGORY_OTHER } from './constants';\nimport Composition from './Composition';\n\ntype Props = {\n    /**\n     * The text to translate. This may be a string or JSX. The defaultMessage prop may be\n     * given or the component may have children, but not both.\n     */\n    children?: React.Node,\n\n    /**\n     * Specify the pivot count to choose which plural form to use.\n     * When specified, this FormattedCompMessage component will choose one of the\n     * Plural elements in its children according to the value of this count\n     * and the linguistic rules of the locale which determine which numbers\n     * belong to which plural class.\n     */\n    count?: number,\n\n    /**\n     * The text to translate. This may be a string or JSX. This prop may be\n     * given or the component may have children, but not both.\n     */\n    defaultMessage?: React.ElementType | string,\n\n    /**\n     * A description to send to the translators to explain the context of\n     * this string.\n     */\n    description: string,\n\n    /** The unique id of this string. */\n    id: string,\n\n    /**\n     * The intl provider. This is injected into this component\n     * via the injectIntl function from react-intl.\n     */\n    intl: Object,\n\n    /**\n     * Specify the name of the HTML tag you would like to use to wrap the\n     * translations.\n     */\n    tagName: string,\n};\n\ntype State = {\n    composition: Composition,\n    source: string,\n};\n\n/**\n * Replace the text inside of this component with a translation. This\n * component is built on top of react-intl, so it works along with the\n * regular react-intl components and objects you are used to, and it gets\n * its translations from react intl as well. The FormattedCompMessage component can\n * be used wherever it is valid to put JSX text. In regular Javascript\n * code, you should continue to use the intl.formatMessage() call and\n * extract your strings into a message.js file.\n */\nclass FormattedCompMessage extends React.Component<Props, State> {\n    composition: Composition;\n\n    str: string;\n\n    static defaultProps = {\n        tagName: 'span',\n    };\n\n    constructor(props: Props) {\n        super(props);\n\n        /* eslint-disable no-console */\n        console.warn(\n            \"box-ui-elements: the FormattedCompMessage component is deprecated! Use react-intl's FormattedMessage instead.\",\n        );\n        /* eslint-enable no-console */\n\n        // these parameters echo the ones in react-intl's FormattedMessage\n        // component, plus a few extra\n        const {\n            defaultMessage, // The English string + HTML + components that you want translated\n            count, // the pivot count to choose a plural form\n            children, // the components within the body\n        } = this.props;\n\n        const sourceElements = defaultMessage || children;\n\n        if (sourceElements) {\n            const composition = new Composition(sourceElements);\n            let source = '';\n\n            if (!isNaN(Number(count))) {\n                if (children) {\n                    source = this.composePluralString(children);\n                } else if (isDevEnvironment()) {\n                    throw new Error('Cannot use count prop on a FormattedCompMessage component that has no children.');\n                }\n            } else {\n                source = composition.compose();\n            }\n\n            this.state = {\n                source,\n                composition,\n            };\n        }\n    }\n\n    /**\n     * Search for any Plural elements in the children, and\n     * then construct the English source string in the correct\n     * format for react-intl to use for pluralization\n     * @param {React.Element} children the children of this node\n     * @return {string} the composed plural string\n     */\n    composePluralString(children) {\n        const categories = {};\n        React.Children.forEach(children, child => {\n            if (typeof child === 'object' && React.isValidElement(child) && child.type.name === 'Plural') {\n                const childComposition = new Composition(child.props.children);\n                categories[child.props.category] = childComposition.compose();\n            }\n        });\n        if (!categories.one || !categories.other) {\n            if (isDevEnvironment()) {\n                throw new Error(\n                    'Cannot use count prop on a FormattedCompMessage component without giving both a \"one\" and \"other\" Plural component in the children.',\n                );\n            }\n        }\n        // add these to the string in a particular order so that\n        // we always end up with the same string regardless of\n        // the order that the Plural elements were specified in\n        // the source code\n        const categoriesString = [\n            CATEGORY_ZERO,\n            CATEGORY_ONE,\n            CATEGORY_TWO,\n            CATEGORY_FEW,\n            CATEGORY_MANY,\n            CATEGORY_OTHER,\n        ]\n            .map(category => (categories[category] ? ` ${category} {${categories[category]}}` : ''))\n            .join('');\n\n        // see the intl-messageformat project for an explanation of this syntax\n        return `{count, plural,${categoriesString}}`;\n    }\n\n    render() {\n        const { count, tagName, intl, description, id, defaultMessage, ...rest } = this.props;\n        const { composition, source } = this.state;\n        const values = {};\n        if (typeof count === 'number') {\n            // make sure intl.formatMessage switches properly on the count\n            values.count = count;\n        }\n\n        // react-intl will do the correct plurals if necessary\n        const descriptor = {\n            id,\n            defaultMessage: source,\n            description,\n        };\n        const translation = intl.formatMessage(descriptor, values);\n\n        // always wrap the translated string in a tag to contain everything\n        // and to give us a spot to record the id. The resource id is the\n        // the id in mojito for the string. Having this attr has these advantages:\n        // 1. When debugging i18n or translation problems, it is MUCH easier to find\n        // the exact string to fix in Mojito rather than guessing. It might be useful\n        // for general debugging as well to map from something you see in the UI to\n        // the actual code that implements it.\n        // 2. It can be used by an in-context linguistic review tool. The tool code\n        // can contact mojito and retrieve the English for any translation errors that\n        // the reviewer finds and submit translation tickets to Jira and/or fixed\n        // translations directly back to Mojito.\n        // 3. It can be used by the planned \"text experiment framework\" to identify\n        // whole strings in the UI that can be A/B tested in various languages without\n        // publishing new versions of the code.\n        return React.createElement(\n            tagName,\n            {\n                key: id,\n                'x-resource-id': id,\n                ...rest,\n            },\n            composition.decompose(translation),\n        );\n    }\n}\n\nexport default injectIntl(FormattedCompMessage);\n"],"file":"FormattedCompMessage.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "18.1.0-beta.3",
+    "version": "18.1.0",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",

package/src/components/i18n/FormattedCompMessage.js

@@ -184,7 +184,7 @@ class FormattedCompMessage extends React.Component<Props, State> {
         // the reviewer finds and submit translation tickets to Jira and/or fixed
         // translations directly back to Mojito.
         // 3. It can be used by the planned "text experiment framework" to identify
-        // whole strings in the UI that can be A/B tested in various langauges without
+        // whole strings in the UI that can be A/B tested in various languages without
         // publishing new versions of the code.
         return React.createElement(
             tagName,

package/src/elements/content-preview/README.md

@@ -1,5 +1,5 @@
 ### Demo ([Documentation](https://developer.box.com/docs/box-content-preview))
-***IMPORTANT:*** The Content Preview UI Element works differently from the other UI Elements above. The React component is a wrapper for the [Preview library](https://developer.box.com/docs/box-content-preview). It also requires a langauge (defaults to en-US) to be passed in since the preview library bundles are localized. Providing a language will automatically pull in the corresponding preview.js bundle and dynamically load it by adding a script tag. It will also dynamically load the additional required preview.css file by adding a link tag.
+***IMPORTANT:*** The Content Preview UI Element works differently from the other UI Elements above. The React component is a wrapper for the [Preview library](https://developer.box.com/docs/box-content-preview). It also requires a language (defaults to en-US) to be passed in since the preview library bundles are localized. Providing a language will automatically pull in the corresponding preview.js bundle and dynamically load it by adding a script tag. It will also dynamically load the additional required preview.css file by adding a link tag.
 
 ```jsx
 var ContentPreview = require('./ContentPreview').default;