box-ui-elements 19.0.0-beta.5 → 19.0.0-beta.6

package/es/components/form-elements/draft-js-mention-selector/DraftJSMentionSelector.js

@@ -81,7 +81,7 @@ class DraftJSMentionSelector extends React.Component {
     const mentionDecorator = new CompositeDecorator([{
       strategy: mentionStrategy,
       component: DraftMentionItem
-    }]); // @NOTE (smotraghi 2017-05-30):
+    }]); // @NOTE:
     // This component might be either own its EditorState (in which case it lives in `this.state.internalEditorState`)
     // or be a controlled component whose EditorState is passed in via the `editorState` prop.
     // If `props.editorState` is set, `internalEditorState` is `null`,

package/es/components/form-elements/draft-js-mention-selector/DraftJSMentionSelector.js.flow

@@ -73,7 +73,7 @@ class DraftJSMentionSelector extends React.Component<Props, State> {
             },
         ]);
 
-        // @NOTE (smotraghi 2017-05-30):
+        // @NOTE:
         // This component might be either own its EditorState (in which case it lives in `this.state.internalEditorState`)
         // or be a controlled component whose EditorState is passed in via the `editorState` prop.
         // If `props.editorState` is set, `internalEditorState` is `null`,

package/es/components/form-elements/draft-js-mention-selector/DraftJSMentionSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/form-elements/draft-js-mention-selector/DraftJSMentionSelector.js"],"names":["React","CompositeDecorator","EditorState","noop","DraftJSMentionSelectorCore","DraftMentionItem","FormInput","messages","mentionStrategy","contentBlock","callback","contentState","findEntityRanges","character","entityKey","getEntity","ret","getType","DraftJSMentionSelector","Component","constructor","props","event","validateOnBlur","containerEl","relatedTarget","Node","contains","checkValidity","onFocus","nextEditorState","internalEditorState","state","onChange","setState","isTouched","error","getErrorFromValidityState","handleValidityStateUpdateHandler","mentionDecorator","strategy","component","contacts","editorState","createEmpty","getDerivedStateFromProps","nextProps","componentDidUpdate","prevProps","prevState","prevInternalEditorState","prevEditorStateFromProps","prevEditorState","currentEditorState","newState","getDerivedStateFromEditorState","checkValidityIfAllowed","previousEditorState","isPreviousEditorStateEmpty","isEditorStateEmpty","isCurrentEditorStateEmpty","isNewEditorState","isEditorStateDirty","text","getCurrentContent","getPlainText","trim","lastChangeType","getLastChangeType","length","externalEditorState","isRequired","maxLength","minLength","valueMissing","tooShort","tooLong","render","className","contactsLoaded","hideLabel","isDisabled","label","description","mentionTriggers","name","onMention","placeholder","selectorRow","startMentionMessage","onReturn","handleBlur","handleChange","handleFocus"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { CompositeDecorator, EditorState } from 'draft-js';\nimport noop from 'lodash/noop';\n\nimport DraftJSMentionSelectorCore from './DraftJSMentionSelectorCore';\nimport DraftMentionItem from './DraftMentionItem';\nimport FormInput from '../form/FormInput';\nimport * as messages from '../input-messages';\nimport type { SelectorItems } from '../../../common/types/core';\n\n/**\n * Scans a Draft ContentBlock for entity ranges, so they can be annotated\n * @see docs at {@link https://draftjs.org/docs/advanced-topics-decorators.html#compositedecorator}\n * @param {ContentBlock} contentBlock\n * @param {function} callback\n * @param {ContentState} contentState\n */\nconst mentionStrategy = (contentBlock, callback, contentState) => {\n    contentBlock.findEntityRanges(character => {\n        const entityKey = character.getEntity();\n\n        const ret = entityKey !== null && contentState.getEntity(entityKey).getType() === 'MENTION';\n        return ret;\n    }, callback);\n};\n\ntype Props = {\n    className?: string,\n    contacts: SelectorItems<>,\n    contactsLoaded?: boolean,\n    description?: React.Node,\n    editorState?: EditorState,\n    hideLabel?: boolean,\n    isDisabled?: boolean,\n    isRequired?: boolean,\n    label: React.Node,\n    maxLength?: number,\n    mentionTriggers?: Array<string>,\n    minLength?: number,\n    name: string,\n    onChange: Function,\n    onFocus?: Function,\n    onMention?: Function,\n    onReturn?: Function,\n    placeholder?: string,\n    selectorRow?: React.Element<any>,\n    startMentionMessage?: React.Node,\n    validateOnBlur?: boolean,\n};\n\ntype State = {\n    contacts: SelectorItems<>,\n    error: ?Object,\n    internalEditorState: ?EditorState,\n    isTouched: boolean,\n};\n\nclass DraftJSMentionSelector extends React.Component<Props, State> {\n    static defaultProps = {\n        isRequired: false,\n        onChange: noop,\n        validateOnBlur: true,\n    };\n\n    constructor(props: Props) {\n        super(props);\n\n        const mentionDecorator = new CompositeDecorator([\n            {\n                strategy: mentionStrategy,\n                component: DraftMentionItem,\n            },\n        ]);\n\n        // @NOTE (smotraghi 2017-05-30):\n        // This component might be either own its EditorState (in which case it lives in `this.state.internalEditorState`)\n        // or be a controlled component whose EditorState is passed in via the `editorState` prop.\n        // If `props.editorState` is set, `internalEditorState` is `null`,\n        // otherwise we initialize it here\n        this.state = {\n            contacts: [],\n            isTouched: false,\n            internalEditorState: props.editorState ? null : EditorState.createEmpty(mentionDecorator),\n            error: null,\n        };\n    }\n\n    static getDerivedStateFromProps(nextProps: Props) {\n        const { contacts } = nextProps;\n        return contacts ? { contacts } : null;\n    }\n\n    componentDidUpdate(prevProps: Props, prevState: State) {\n        const { internalEditorState: prevInternalEditorState } = prevState;\n        const { internalEditorState } = this.state;\n\n        const { editorState: prevEditorStateFromProps } = prevProps;\n        const { editorState } = this.props;\n\n        // Determine whether we're working with the internal editor state or\n        // external editor state passed in from props\n        const prevEditorState = prevInternalEditorState || prevEditorStateFromProps;\n        const currentEditorState = internalEditorState || editorState;\n\n        // Only handle isTouched state transitions and check validity if the\n        // editorState references are different. This is to avoid getting stuck\n        // in an infinite loop of checking validity because checkValidity always\n        // calls setState({ error })\n        if (prevEditorState && currentEditorState && prevEditorState !== currentEditorState) {\n            const newState = this.getDerivedStateFromEditorState(currentEditorState, prevEditorState);\n            if (newState) {\n                this.setState(newState, this.checkValidityIfAllowed);\n            } else {\n                this.checkValidityIfAllowed();\n            }\n        }\n    }\n\n    getDerivedStateFromEditorState(currentEditorState: EditorState, previousEditorState: EditorState) {\n        const isPreviousEditorStateEmpty = this.isEditorStateEmpty(previousEditorState);\n        const isCurrentEditorStateEmpty = this.isEditorStateEmpty(currentEditorState);\n        const isNewEditorState = isCurrentEditorStateEmpty && !isPreviousEditorStateEmpty;\n        const isEditorStateDirty = isPreviousEditorStateEmpty && !isCurrentEditorStateEmpty;\n\n        let newState = null;\n        // Detect case where controlled EditorState is created anew and empty.\n        // If next editorState is empty and the current editorState is not empty\n        // that means it is a new empty state and this component should not be marked dirty\n        if (isNewEditorState) {\n            newState = { isTouched: false, error: null };\n        } else if (isEditorStateDirty) {\n            // Detect case where controlled EditorState has been made dirty\n            // If the current editorState is empty and the next editorState is not\n            // empty then this is the first interaction so mark this component dirty\n            newState = { isTouched: true };\n        }\n\n        return newState;\n    }\n\n    checkValidityIfAllowed() {\n        const { validateOnBlur }: Props = this.props;\n\n        if (!validateOnBlur) {\n            this.checkValidity();\n        }\n    }\n\n    isEditorStateEmpty(editorState: EditorState): boolean {\n        const text = editorState\n            .getCurrentContent()\n            .getPlainText()\n            .trim();\n        const lastChangeType = editorState.getLastChangeType();\n\n        return text.length === 0 && lastChangeType === null;\n    }\n\n    /**\n     * @returns {string}\n     */\n    getErrorFromValidityState() {\n        const { editorState: externalEditorState, isRequired, maxLength, minLength } = this.props;\n        const { internalEditorState } = this.state;\n\n        // manually check for content length if isRequired is true\n        const editorState: EditorState = internalEditorState || externalEditorState;\n        const { length } = editorState\n            .getCurrentContent()\n            .getPlainText()\n            .trim();\n\n        if (isRequired && !length) {\n            return messages.valueMissing();\n        }\n\n        if (typeof minLength !== 'undefined' && length < minLength) {\n            return messages.tooShort(minLength);\n        }\n\n        if (typeof maxLength !== 'undefined' && length > maxLength) {\n            return messages.tooLong(maxLength);\n        }\n\n        return null;\n    }\n\n    containerEl: ?HTMLDivElement;\n\n    /**\n     * Event handler called on blur. Triggers validation\n     * @param {SyntheticFocusEvent} event The event object\n     * @returns {void}\n     */\n    handleBlur = (event: SyntheticFocusEvent<>) => {\n        if (\n            this.props.validateOnBlur &&\n            this.containerEl &&\n            event.relatedTarget instanceof Node &&\n            !this.containerEl.contains(event.relatedTarget)\n        ) {\n            this.checkValidity();\n        }\n    };\n\n    handleFocus = (event: SyntheticEvent<>) => {\n        const { onFocus } = this.props;\n\n        if (onFocus) {\n            onFocus(event);\n        }\n    };\n\n    /**\n     * Updates editorState, rechecks validity\n     * @param {EditorState} nextEditorState The new editor state to set in the state\n     * @returns {void}\n     */\n    handleChange = (nextEditorState: EditorState) => {\n        const { internalEditorState }: State = this.state;\n        const { onChange }: Props = this.props;\n\n        onChange(nextEditorState);\n\n        if (internalEditorState) {\n            this.setState({ internalEditorState: nextEditorState });\n        }\n    };\n\n    handleValidityStateUpdateHandler = () => {\n        const { isTouched } = this.state;\n\n        if (!isTouched) {\n            return;\n        }\n\n        const error = this.getErrorFromValidityState();\n\n        this.setState({ error });\n    };\n\n    checkValidity = () => {\n        this.handleValidityStateUpdateHandler();\n    };\n\n    render() {\n        const {\n            className = '',\n            contactsLoaded,\n            editorState: externalEditorState,\n            hideLabel,\n            isDisabled,\n            isRequired,\n            label,\n            description,\n            mentionTriggers,\n            name,\n            onMention,\n            placeholder,\n            selectorRow,\n            startMentionMessage,\n            onReturn,\n        } = this.props;\n        const { contacts, internalEditorState, error } = this.state;\n        const { handleBlur, handleChange, handleFocus } = this;\n        const editorState: EditorState = internalEditorState || externalEditorState;\n\n        return (\n            <div\n                ref={containerEl => {\n                    this.containerEl = containerEl;\n                }}\n                className={className}\n            >\n                <FormInput name={name} onValidityStateUpdate={this.handleValidityStateUpdateHandler}>\n                    <DraftJSMentionSelectorCore\n                        contacts={contacts}\n                        contactsLoaded={contactsLoaded}\n                        editorState={editorState}\n                        error={error}\n                        hideLabel={hideLabel}\n                        isDisabled={isDisabled}\n                        isRequired={isRequired}\n                        label={label}\n                        description={description}\n                        mentionTriggers={mentionTriggers}\n                        onBlur={handleBlur}\n                        onChange={handleChange}\n                        onFocus={handleFocus}\n                        onMention={onMention}\n                        onReturn={onReturn}\n                        placeholder={placeholder}\n                        selectorRow={selectorRow}\n                        startMentionMessage={startMentionMessage}\n                    />\n                </FormInput>\n            </div>\n        );\n    }\n}\n\nexport default DraftJSMentionSelector;\n"],"file":"DraftJSMentionSelector.js"}
+{"version":3,"sources":["../../../../src/components/form-elements/draft-js-mention-selector/DraftJSMentionSelector.js"],"names":["React","CompositeDecorator","EditorState","noop","DraftJSMentionSelectorCore","DraftMentionItem","FormInput","messages","mentionStrategy","contentBlock","callback","contentState","findEntityRanges","character","entityKey","getEntity","ret","getType","DraftJSMentionSelector","Component","constructor","props","event","validateOnBlur","containerEl","relatedTarget","Node","contains","checkValidity","onFocus","nextEditorState","internalEditorState","state","onChange","setState","isTouched","error","getErrorFromValidityState","handleValidityStateUpdateHandler","mentionDecorator","strategy","component","contacts","editorState","createEmpty","getDerivedStateFromProps","nextProps","componentDidUpdate","prevProps","prevState","prevInternalEditorState","prevEditorStateFromProps","prevEditorState","currentEditorState","newState","getDerivedStateFromEditorState","checkValidityIfAllowed","previousEditorState","isPreviousEditorStateEmpty","isEditorStateEmpty","isCurrentEditorStateEmpty","isNewEditorState","isEditorStateDirty","text","getCurrentContent","getPlainText","trim","lastChangeType","getLastChangeType","length","externalEditorState","isRequired","maxLength","minLength","valueMissing","tooShort","tooLong","render","className","contactsLoaded","hideLabel","isDisabled","label","description","mentionTriggers","name","onMention","placeholder","selectorRow","startMentionMessage","onReturn","handleBlur","handleChange","handleFocus"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { CompositeDecorator, EditorState } from 'draft-js';\nimport noop from 'lodash/noop';\n\nimport DraftJSMentionSelectorCore from './DraftJSMentionSelectorCore';\nimport DraftMentionItem from './DraftMentionItem';\nimport FormInput from '../form/FormInput';\nimport * as messages from '../input-messages';\nimport type { SelectorItems } from '../../../common/types/core';\n\n/**\n * Scans a Draft ContentBlock for entity ranges, so they can be annotated\n * @see docs at {@link https://draftjs.org/docs/advanced-topics-decorators.html#compositedecorator}\n * @param {ContentBlock} contentBlock\n * @param {function} callback\n * @param {ContentState} contentState\n */\nconst mentionStrategy = (contentBlock, callback, contentState) => {\n    contentBlock.findEntityRanges(character => {\n        const entityKey = character.getEntity();\n\n        const ret = entityKey !== null && contentState.getEntity(entityKey).getType() === 'MENTION';\n        return ret;\n    }, callback);\n};\n\ntype Props = {\n    className?: string,\n    contacts: SelectorItems<>,\n    contactsLoaded?: boolean,\n    description?: React.Node,\n    editorState?: EditorState,\n    hideLabel?: boolean,\n    isDisabled?: boolean,\n    isRequired?: boolean,\n    label: React.Node,\n    maxLength?: number,\n    mentionTriggers?: Array<string>,\n    minLength?: number,\n    name: string,\n    onChange: Function,\n    onFocus?: Function,\n    onMention?: Function,\n    onReturn?: Function,\n    placeholder?: string,\n    selectorRow?: React.Element<any>,\n    startMentionMessage?: React.Node,\n    validateOnBlur?: boolean,\n};\n\ntype State = {\n    contacts: SelectorItems<>,\n    error: ?Object,\n    internalEditorState: ?EditorState,\n    isTouched: boolean,\n};\n\nclass DraftJSMentionSelector extends React.Component<Props, State> {\n    static defaultProps = {\n        isRequired: false,\n        onChange: noop,\n        validateOnBlur: true,\n    };\n\n    constructor(props: Props) {\n        super(props);\n\n        const mentionDecorator = new CompositeDecorator([\n            {\n                strategy: mentionStrategy,\n                component: DraftMentionItem,\n            },\n        ]);\n\n        // @NOTE:\n        // This component might be either own its EditorState (in which case it lives in `this.state.internalEditorState`)\n        // or be a controlled component whose EditorState is passed in via the `editorState` prop.\n        // If `props.editorState` is set, `internalEditorState` is `null`,\n        // otherwise we initialize it here\n        this.state = {\n            contacts: [],\n            isTouched: false,\n            internalEditorState: props.editorState ? null : EditorState.createEmpty(mentionDecorator),\n            error: null,\n        };\n    }\n\n    static getDerivedStateFromProps(nextProps: Props) {\n        const { contacts } = nextProps;\n        return contacts ? { contacts } : null;\n    }\n\n    componentDidUpdate(prevProps: Props, prevState: State) {\n        const { internalEditorState: prevInternalEditorState } = prevState;\n        const { internalEditorState } = this.state;\n\n        const { editorState: prevEditorStateFromProps } = prevProps;\n        const { editorState } = this.props;\n\n        // Determine whether we're working with the internal editor state or\n        // external editor state passed in from props\n        const prevEditorState = prevInternalEditorState || prevEditorStateFromProps;\n        const currentEditorState = internalEditorState || editorState;\n\n        // Only handle isTouched state transitions and check validity if the\n        // editorState references are different. This is to avoid getting stuck\n        // in an infinite loop of checking validity because checkValidity always\n        // calls setState({ error })\n        if (prevEditorState && currentEditorState && prevEditorState !== currentEditorState) {\n            const newState = this.getDerivedStateFromEditorState(currentEditorState, prevEditorState);\n            if (newState) {\n                this.setState(newState, this.checkValidityIfAllowed);\n            } else {\n                this.checkValidityIfAllowed();\n            }\n        }\n    }\n\n    getDerivedStateFromEditorState(currentEditorState: EditorState, previousEditorState: EditorState) {\n        const isPreviousEditorStateEmpty = this.isEditorStateEmpty(previousEditorState);\n        const isCurrentEditorStateEmpty = this.isEditorStateEmpty(currentEditorState);\n        const isNewEditorState = isCurrentEditorStateEmpty && !isPreviousEditorStateEmpty;\n        const isEditorStateDirty = isPreviousEditorStateEmpty && !isCurrentEditorStateEmpty;\n\n        let newState = null;\n        // Detect case where controlled EditorState is created anew and empty.\n        // If next editorState is empty and the current editorState is not empty\n        // that means it is a new empty state and this component should not be marked dirty\n        if (isNewEditorState) {\n            newState = { isTouched: false, error: null };\n        } else if (isEditorStateDirty) {\n            // Detect case where controlled EditorState has been made dirty\n            // If the current editorState is empty and the next editorState is not\n            // empty then this is the first interaction so mark this component dirty\n            newState = { isTouched: true };\n        }\n\n        return newState;\n    }\n\n    checkValidityIfAllowed() {\n        const { validateOnBlur }: Props = this.props;\n\n        if (!validateOnBlur) {\n            this.checkValidity();\n        }\n    }\n\n    isEditorStateEmpty(editorState: EditorState): boolean {\n        const text = editorState\n            .getCurrentContent()\n            .getPlainText()\n            .trim();\n        const lastChangeType = editorState.getLastChangeType();\n\n        return text.length === 0 && lastChangeType === null;\n    }\n\n    /**\n     * @returns {string}\n     */\n    getErrorFromValidityState() {\n        const { editorState: externalEditorState, isRequired, maxLength, minLength } = this.props;\n        const { internalEditorState } = this.state;\n\n        // manually check for content length if isRequired is true\n        const editorState: EditorState = internalEditorState || externalEditorState;\n        const { length } = editorState\n            .getCurrentContent()\n            .getPlainText()\n            .trim();\n\n        if (isRequired && !length) {\n            return messages.valueMissing();\n        }\n\n        if (typeof minLength !== 'undefined' && length < minLength) {\n            return messages.tooShort(minLength);\n        }\n\n        if (typeof maxLength !== 'undefined' && length > maxLength) {\n            return messages.tooLong(maxLength);\n        }\n\n        return null;\n    }\n\n    containerEl: ?HTMLDivElement;\n\n    /**\n     * Event handler called on blur. Triggers validation\n     * @param {SyntheticFocusEvent} event The event object\n     * @returns {void}\n     */\n    handleBlur = (event: SyntheticFocusEvent<>) => {\n        if (\n            this.props.validateOnBlur &&\n            this.containerEl &&\n            event.relatedTarget instanceof Node &&\n            !this.containerEl.contains(event.relatedTarget)\n        ) {\n            this.checkValidity();\n        }\n    };\n\n    handleFocus = (event: SyntheticEvent<>) => {\n        const { onFocus } = this.props;\n\n        if (onFocus) {\n            onFocus(event);\n        }\n    };\n\n    /**\n     * Updates editorState, rechecks validity\n     * @param {EditorState} nextEditorState The new editor state to set in the state\n     * @returns {void}\n     */\n    handleChange = (nextEditorState: EditorState) => {\n        const { internalEditorState }: State = this.state;\n        const { onChange }: Props = this.props;\n\n        onChange(nextEditorState);\n\n        if (internalEditorState) {\n            this.setState({ internalEditorState: nextEditorState });\n        }\n    };\n\n    handleValidityStateUpdateHandler = () => {\n        const { isTouched } = this.state;\n\n        if (!isTouched) {\n            return;\n        }\n\n        const error = this.getErrorFromValidityState();\n\n        this.setState({ error });\n    };\n\n    checkValidity = () => {\n        this.handleValidityStateUpdateHandler();\n    };\n\n    render() {\n        const {\n            className = '',\n            contactsLoaded,\n            editorState: externalEditorState,\n            hideLabel,\n            isDisabled,\n            isRequired,\n            label,\n            description,\n            mentionTriggers,\n            name,\n            onMention,\n            placeholder,\n            selectorRow,\n            startMentionMessage,\n            onReturn,\n        } = this.props;\n        const { contacts, internalEditorState, error } = this.state;\n        const { handleBlur, handleChange, handleFocus } = this;\n        const editorState: EditorState = internalEditorState || externalEditorState;\n\n        return (\n            <div\n                ref={containerEl => {\n                    this.containerEl = containerEl;\n                }}\n                className={className}\n            >\n                <FormInput name={name} onValidityStateUpdate={this.handleValidityStateUpdateHandler}>\n                    <DraftJSMentionSelectorCore\n                        contacts={contacts}\n                        contactsLoaded={contactsLoaded}\n                        editorState={editorState}\n                        error={error}\n                        hideLabel={hideLabel}\n                        isDisabled={isDisabled}\n                        isRequired={isRequired}\n                        label={label}\n                        description={description}\n                        mentionTriggers={mentionTriggers}\n                        onBlur={handleBlur}\n                        onChange={handleChange}\n                        onFocus={handleFocus}\n                        onMention={onMention}\n                        onReturn={onReturn}\n                        placeholder={placeholder}\n                        selectorRow={selectorRow}\n                        startMentionMessage={startMentionMessage}\n                    />\n                </FormInput>\n            </div>\n        );\n    }\n}\n\nexport default DraftJSMentionSelector;\n"],"file":"DraftJSMentionSelector.js"}

package/es/styles/theme.js

@@ -40,7 +40,7 @@ const theme = {
     progressBarBackground: '#006ae9',
     scrollShadowRgba: 'rgba(0, 0, 0, 0.12)'
   },
-  // TODO(akahn): Should be the same keys as the default if applicable
+  // TODO: Should be the same keys as the default if applicable
   modes: {
     admin: {},
     dark: {}

package/es/styles/theme.js.flow

@@ -49,7 +49,7 @@ const theme = {
         scrollShadowRgba: 'rgba(0, 0, 0, 0.12)',
     },
 
-    // TODO(akahn): Should be the same keys as the default if applicable
+    // TODO: Should be the same keys as the default if applicable
     modes: {
         admin: {},
         dark: {},

package/es/styles/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/theme.js"],"names":["vars","theme","base","background","white","backgroundHover","bdlGray05","backgroundActive","bdlGray10","foreground","bdlGray","border","bdlGray30","buttonForeground","black","buttonBackground","buttonBackgroundHover","buttonBackgroundActive","buttonBorder","buttonBorderHover","buttonBorderActive","progressBarBackground","bdlGray40","scrollShadowRgba","gridUnitPx","parseInt","bdlGridUnitPx","primary","bdlBoxBlue","backgroundGradient","modes","admin","dark"],"mappings":"AAAA;AACA;AACA;AACA;AAEA,OAAO,KAAKA,IAAZ,MAAsB,aAAtB;AAEA,MAAMC,KAAK,GAAG;AACVC,EAAAA,IAAI,EAAE;AACFC,IAAAA,UAAU,EAAEH,IAAI,CAACI,KADf;AAEFC,IAAAA,eAAe,EAAEL,IAAI,CAACM,SAFpB;AAGFC,IAAAA,gBAAgB,EAAEP,IAAI,CAACQ,SAHrB;AAIFC,IAAAA,UAAU,EAAET,IAAI,CAACU,OAJf;AAKFC,IAAAA,MAAM,EAAEX,IAAI,CAACY,SALX;AAOFC,IAAAA,gBAAgB,EAAEb,IAAI,CAACc,KAPrB;AAQFC,IAAAA,gBAAgB,EAAEf,IAAI,CAACI,KARrB;AASFY,IAAAA,qBAAqB,EAAEhB,IAAI,CAACM,SAT1B;AAUFW,IAAAA,sBAAsB,EAAEjB,IAAI,CAACQ,SAV3B;AAWFU,IAAAA,YAAY,EAAElB,IAAI,CAACY,SAXjB;AAYFO,IAAAA,iBAAiB,EAAEnB,IAAI,CAACY,SAZtB;AAaFQ,IAAAA,kBAAkB,EAAEpB,IAAI,CAACY,SAbvB;AAeFS,IAAAA,qBAAqB,EAAErB,IAAI,CAACsB,SAf1B;AAiBFC,IAAAA,gBAAgB,EAAE,qBAjBhB;AAkBFC,IAAAA,UAAU,EAAEC,QAAQ,CAACzB,IAAI,CAAC0B,aAAN,EAAqB,EAArB,CAlBlB,CAkB4C;;AAlB5C,GADI;AAsBV;AACAC,EAAAA,OAAO,EAAE;AACLxB,IAAAA,UAAU,EAAEH,IAAI,CAAC4B,UADZ;AAELrB,IAAAA,gBAAgB,EAAE,SAFb;AAGLsB,IAAAA,kBAAkB,EAAE,SAHf;AAILxB,IAAAA,eAAe,EAAE,SAJZ;AAKLM,IAAAA,MAAM,EAAEX,IAAI,CAAC4B,UALR;AAOLb,IAAAA,gBAAgB,EAAEf,IAAI,CAAC4B,UAPlB;AAQLX,IAAAA,sBAAsB,EAAE,SARnB;AASLD,IAAAA,qBAAqB,EAAE,SATlB;AAULE,IAAAA,YAAY,EAAElB,IAAI,CAAC4B,UAVd;AAWLR,IAAAA,kBAAkB,EAAE,SAXf;AAYLD,IAAAA,iBAAiB,EAAE,SAZd;AAaLN,IAAAA,gBAAgB,EAAEb,IAAI,CAACI,KAblB;AAcLK,IAAAA,UAAU,EAAET,IAAI,CAACI,KAdZ;AAgBLiB,IAAAA,qBAAqB,EAAE,SAhBlB;AAkBLE,IAAAA,gBAAgB,EAAE;AAlBb,GAvBC;AA4CV;AACAO,EAAAA,KAAK,EAAE;AACHC,IAAAA,KAAK,EAAE,EADJ;AAEHC,IAAAA,IAAI,EAAE;AAFH;AA7CG,CAAd;AAmDA,eAAe/B,KAAf","sourcesContent":["// export our theme to the provider\n// This is globally available in styled-components when interpolating a function like so:\n// ${(props) => props.theme}\n// Or using import { withTheme } from 'styled-components';\n\nimport * as vars from './variables';\n\nconst theme = {\n    base: {\n        background: vars.white,\n        backgroundHover: vars.bdlGray05,\n        backgroundActive: vars.bdlGray10,\n        foreground: vars.bdlGray,\n        border: vars.bdlGray30,\n\n        buttonForeground: vars.black,\n        buttonBackground: vars.white,\n        buttonBackgroundHover: vars.bdlGray05,\n        buttonBackgroundActive: vars.bdlGray10,\n        buttonBorder: vars.bdlGray30,\n        buttonBorderHover: vars.bdlGray30,\n        buttonBorderActive: vars.bdlGray30,\n\n        progressBarBackground: vars.bdlGray40,\n\n        scrollShadowRgba: 'rgba(0, 0, 0, 0.12)',\n        gridUnitPx: parseInt(vars.bdlGridUnitPx, 10), // grid unit in pixels (as number for computations)\n    },\n\n    // Primary or brand color\n    primary: {\n        background: vars.bdlBoxBlue,\n        backgroundActive: '#004eac',\n        backgroundGradient: '#0055bc',\n        backgroundHover: '#006ae9',\n        border: vars.bdlBoxBlue,\n\n        buttonBackground: vars.bdlBoxBlue,\n        buttonBackgroundActive: '#004eac',\n        buttonBackgroundHover: '#006ae9',\n        buttonBorder: vars.bdlBoxBlue,\n        buttonBorderActive: '#004eac',\n        buttonBorderHover: '#006ae9',\n        buttonForeground: vars.white,\n        foreground: vars.white,\n\n        progressBarBackground: '#006ae9',\n\n        scrollShadowRgba: 'rgba(0, 0, 0, 0.12)',\n    },\n\n    // TODO(akahn): Should be the same keys as the default if applicable\n    modes: {\n        admin: {},\n        dark: {},\n    },\n};\n\nexport default theme;\n"],"file":"theme.js"}
+{"version":3,"sources":["../../src/styles/theme.js"],"names":["vars","theme","base","background","white","backgroundHover","bdlGray05","backgroundActive","bdlGray10","foreground","bdlGray","border","bdlGray30","buttonForeground","black","buttonBackground","buttonBackgroundHover","buttonBackgroundActive","buttonBorder","buttonBorderHover","buttonBorderActive","progressBarBackground","bdlGray40","scrollShadowRgba","gridUnitPx","parseInt","bdlGridUnitPx","primary","bdlBoxBlue","backgroundGradient","modes","admin","dark"],"mappings":"AAAA;AACA;AACA;AACA;AAEA,OAAO,KAAKA,IAAZ,MAAsB,aAAtB;AAEA,MAAMC,KAAK,GAAG;AACVC,EAAAA,IAAI,EAAE;AACFC,IAAAA,UAAU,EAAEH,IAAI,CAACI,KADf;AAEFC,IAAAA,eAAe,EAAEL,IAAI,CAACM,SAFpB;AAGFC,IAAAA,gBAAgB,EAAEP,IAAI,CAACQ,SAHrB;AAIFC,IAAAA,UAAU,EAAET,IAAI,CAACU,OAJf;AAKFC,IAAAA,MAAM,EAAEX,IAAI,CAACY,SALX;AAOFC,IAAAA,gBAAgB,EAAEb,IAAI,CAACc,KAPrB;AAQFC,IAAAA,gBAAgB,EAAEf,IAAI,CAACI,KARrB;AASFY,IAAAA,qBAAqB,EAAEhB,IAAI,CAACM,SAT1B;AAUFW,IAAAA,sBAAsB,EAAEjB,IAAI,CAACQ,SAV3B;AAWFU,IAAAA,YAAY,EAAElB,IAAI,CAACY,SAXjB;AAYFO,IAAAA,iBAAiB,EAAEnB,IAAI,CAACY,SAZtB;AAaFQ,IAAAA,kBAAkB,EAAEpB,IAAI,CAACY,SAbvB;AAeFS,IAAAA,qBAAqB,EAAErB,IAAI,CAACsB,SAf1B;AAiBFC,IAAAA,gBAAgB,EAAE,qBAjBhB;AAkBFC,IAAAA,UAAU,EAAEC,QAAQ,CAACzB,IAAI,CAAC0B,aAAN,EAAqB,EAArB,CAlBlB,CAkB4C;;AAlB5C,GADI;AAsBV;AACAC,EAAAA,OAAO,EAAE;AACLxB,IAAAA,UAAU,EAAEH,IAAI,CAAC4B,UADZ;AAELrB,IAAAA,gBAAgB,EAAE,SAFb;AAGLsB,IAAAA,kBAAkB,EAAE,SAHf;AAILxB,IAAAA,eAAe,EAAE,SAJZ;AAKLM,IAAAA,MAAM,EAAEX,IAAI,CAAC4B,UALR;AAOLb,IAAAA,gBAAgB,EAAEf,IAAI,CAAC4B,UAPlB;AAQLX,IAAAA,sBAAsB,EAAE,SARnB;AASLD,IAAAA,qBAAqB,EAAE,SATlB;AAULE,IAAAA,YAAY,EAAElB,IAAI,CAAC4B,UAVd;AAWLR,IAAAA,kBAAkB,EAAE,SAXf;AAYLD,IAAAA,iBAAiB,EAAE,SAZd;AAaLN,IAAAA,gBAAgB,EAAEb,IAAI,CAACI,KAblB;AAcLK,IAAAA,UAAU,EAAET,IAAI,CAACI,KAdZ;AAgBLiB,IAAAA,qBAAqB,EAAE,SAhBlB;AAkBLE,IAAAA,gBAAgB,EAAE;AAlBb,GAvBC;AA4CV;AACAO,EAAAA,KAAK,EAAE;AACHC,IAAAA,KAAK,EAAE,EADJ;AAEHC,IAAAA,IAAI,EAAE;AAFH;AA7CG,CAAd;AAmDA,eAAe/B,KAAf","sourcesContent":["// export our theme to the provider\n// This is globally available in styled-components when interpolating a function like so:\n// ${(props) => props.theme}\n// Or using import { withTheme } from 'styled-components';\n\nimport * as vars from './variables';\n\nconst theme = {\n    base: {\n        background: vars.white,\n        backgroundHover: vars.bdlGray05,\n        backgroundActive: vars.bdlGray10,\n        foreground: vars.bdlGray,\n        border: vars.bdlGray30,\n\n        buttonForeground: vars.black,\n        buttonBackground: vars.white,\n        buttonBackgroundHover: vars.bdlGray05,\n        buttonBackgroundActive: vars.bdlGray10,\n        buttonBorder: vars.bdlGray30,\n        buttonBorderHover: vars.bdlGray30,\n        buttonBorderActive: vars.bdlGray30,\n\n        progressBarBackground: vars.bdlGray40,\n\n        scrollShadowRgba: 'rgba(0, 0, 0, 0.12)',\n        gridUnitPx: parseInt(vars.bdlGridUnitPx, 10), // grid unit in pixels (as number for computations)\n    },\n\n    // Primary or brand color\n    primary: {\n        background: vars.bdlBoxBlue,\n        backgroundActive: '#004eac',\n        backgroundGradient: '#0055bc',\n        backgroundHover: '#006ae9',\n        border: vars.bdlBoxBlue,\n\n        buttonBackground: vars.bdlBoxBlue,\n        buttonBackgroundActive: '#004eac',\n        buttonBackgroundHover: '#006ae9',\n        buttonBorder: vars.bdlBoxBlue,\n        buttonBorderActive: '#004eac',\n        buttonBorderHover: '#006ae9',\n        buttonForeground: vars.white,\n        foreground: vars.white,\n\n        progressBarBackground: '#006ae9',\n\n        scrollShadowRgba: 'rgba(0, 0, 0, 0.12)',\n    },\n\n    // TODO: Should be the same keys as the default if applicable\n    modes: {\n        admin: {},\n        dark: {},\n    },\n};\n\nexport default theme;\n"],"file":"theme.js"}

package/package.json

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

package/src/components/context-menu/README.md

@@ -5,7 +5,7 @@ It handles positioning the menu attached to the target on right click and global
 ### Examples
 **Simple Menu**
 ```js
-// @NOTE (wyu): You can only use require instead of import in markdown.
+// @NOTE: You can only use require instead of import in markdown.
 const Menu = require('../menu').Menu;
 const MenuItem = require('../menu').MenuItem;
 

package/src/components/form-elements/draft-js-mention-selector/DraftJSMentionSelector.js

@@ -73,7 +73,7 @@ class DraftJSMentionSelector extends React.Component<Props, State> {
             },
         ]);
 
-        // @NOTE (smotraghi 2017-05-30):
+        // @NOTE:
         // This component might be either own its EditorState (in which case it lives in `this.state.internalEditorState`)
         // or be a controlled component whose EditorState is passed in via the `editorState` prop.
         // If `props.editorState` is set, `internalEditorState` is `null`,

package/src/components/progress-bar/README.md

@@ -9,7 +9,7 @@ Renders a progress bar similar to the ones used on Youtube.
 ```
 **Demo**
 ```
-// @NOTE (wyu): As recommended by styleguidist, if you need a more complex demo
+// @NOTE: As recommended by styleguidist, if you need a more complex demo
 // it’s often a good idea to define it in a separate JavaScript file and require
 // it in Markdown
 

package/src/styles/theme.js

@@ -49,7 +49,7 @@ const theme = {
         scrollShadowRgba: 'rgba(0, 0, 0, 0.12)',
     },
 
-    // TODO(akahn): Should be the same keys as the default if applicable
+    // TODO: Should be the same keys as the default if applicable
     modes: {
         admin: {},
         dark: {},