@sendgrid/ui-components - npm Package Compare versions

Comparing version 1.44.8 to 1.44.9

package.json

 {
   "name": "@sendgrid/ui-components",
-  "version": "1.44.8",
+  "version": "1.44.9",
   "description": "Reusable UI components for Sendgrid's applications.",
@@ -5,0 +5,0 @@ "main": "index.js",

select/index.d.ts

@@ -10,7 +10,12 @@ import { PointerEventsProperty, TextTransformProperty } from 'csstype';
 import { Omit } from '../types/utils';
-export declare const DropdownIndicatorStylesOverride: (base: object) => {
-    padding: number;
-    pointerEvents: PointerEventsProperty;
-};
-export declare const baseOptionStyles: (base: object, state: any) => {
+interface SelectStyleState {
+    data: {
+        error?: boolean;
+    };
+    isFocused: boolean;
+    isSelected: boolean;
+    hasValue: boolean;
+    selectProps: SelectProps;
+}
+export declare const baseOptionStyles: (base: object, state: SelectStyleState) => {
     ':active': {};
@@ -44,3 +49,3 @@ 'line-height': string;
 };
-export declare const linkOptionStyles: (base: object, state: any) => {
+export declare const linkOptionStyles: (base: object, state: SelectStyleState) => {
     'border-top': string;
@@ -89,3 +94,3 @@ ':active': {};
     };
-    control: (base: object, state: any) => {
+    control: (base: object, state: SelectStyleState) => {
         color: any;
@@ -331,4 +336,9 @@ cursor: string;
     };
-    dropdownIndicator: (base: object) => {
+    dropdownIndicator: (base: object, state: SelectStyleState) => {
         padding: number;
+        pointerEvents: PointerEventsProperty;
+        '&::after'?: undefined;
+        svg?: undefined;
+    } | {
+        padding: number;
         '&::after': any;
@@ -338,2 +348,3 @@ svg: {
         };
+        pointerEvents?: undefined;
     };
@@ -355,3 +366,3 @@ groupHeading: (base: object) => {
     menuList: (base: object) => {};
-    multiValue: (base: object, state: any) => {
+    multiValue: (base: object, state: SelectStyleState) => {
         backgroundColor: any;
@@ -373,3 +384,3 @@ color: any;
     };
-    multiValueLabel: (base: object, state: any) => {
+    multiValueLabel: (base: object, state: SelectStyleState) => {
         padding: number;
@@ -389,3 +400,3 @@ paddingBottom: number;
     };
-    multiValueRemove: (base: object, state: any) => {
+    multiValueRemove: (base: object, state: SelectStyleState) => {
         display: string;
@@ -403,3 +414,3 @@ } | {
     };
-    option: (base: object, state: any) => {
+    option: (base: object, state: SelectStyleState) => {
         ':active': {};
@@ -433,3 +444,3 @@ 'line-height': string;
     };
-    placeholder: (base: object, state: any) => {
+    placeholder: (base: object, state: SelectStyleState) => {
         color: any;
@@ -442,3 +453,4 @@ marginLeft: number;
     };
-    singleValue: (base: object) => {
+    singleValue: (base: object, state: SelectStyleState) => {
+        paddingRight: string;
         marginLeft: number;
@@ -448,5 +460,11 @@ marginRight: number;
         margin: number;
+    } | {
+        paddingRight?: undefined;
+        marginLeft: number;
+        marginRight: number;
+        color: string;
+        margin: number;
     };
-    valueContainer: (base: object) => {
-        padding: number;
+    valueContainer: (base: object, state: SelectStyleState) => {
+        padding: string | number;
         color: string;
@@ -453,0 +471,0 @@ margin: number;

select/index.js

@@ -53,17 +53,2 @@ var __rest = (this && this.__rest) || function (s, e) {
 });
-const DropdownIndicatorStyles = (base) => {
-    const dropdownIndicator = {
-        padding: 0,
-        '&::after': Object.assign({}, mixins, { color: SassVars['slate-60'], content: iconCaret, position: 'absolute', right: 5 }),
-        svg: {
-            display: 'none',
-        },
-    };
-    return Object.assign({}, base, dropdownIndicator);
-};
-// Override styling to make tooltip work even if select is disabled
-export const DropdownIndicatorStylesOverride = (base) => (Object.assign({}, base, {
-    padding: 0,
-    pointerEvents: 'initial',
-}));
 export const baseOptionStyles = (base, state) => {
@@ -135,3 +120,17 @@ const focusedState = state.isFocused
     },
-    dropdownIndicator: DropdownIndicatorStyles,
+    dropdownIndicator: (base, state) => {
+        const dropdownIndicator = state.selectProps.tooltip
+            ? {
+                padding: 0,
+                pointerEvents: 'initial',
+            }
+            : {
+                padding: 0,
+                '&::after': Object.assign({}, mixins, { color: SassVars['slate-60'], content: iconCaret, position: 'absolute', right: 5 }),
+                svg: {
+                    display: 'none',
+                },
+            };
+        return Object.assign({}, base, dropdownIndicator);
+    },
     groupHeading: (base) => {
@@ -193,11 +192,14 @@ const groupStyle = {
     },
-    singleValue: (base) => {
+    singleValue: (base, state) => {
+        const tooltipAdjust = state.selectProps.tooltip
+            ? { paddingRight: '10px' }
+            : {};
         return Object.assign({}, base, inputSelect, {
             marginLeft: 0,
             marginRight: 0,
-        });
+        }, tooltipAdjust);
     },
-    valueContainer: (base) => {
+    valueContainer: (base, state) => {
         return Object.assign({}, base, inputSelect, {
-            padding: 0,
+            padding: state.selectProps.tooltip ? '0 15px 0 0' : 0,
         });
@@ -232,9 +234,2 @@ },
     const { id, styles: propsStyles } = props, restProps = __rest(props, ["id", "styles"]);
-    // Override dropdownIndicator styling when tooltip is present
-    let dropdownIndicatorStylesOverride;
-    if (props.tooltip) {
-        dropdownIndicatorStylesOverride = {
-            dropdownIndicator: DropdownIndicatorStylesOverride,
-        };
-    }
     return (React.createElement("div", { id: id, className: cn('input-select-wrap', Styles['input-select-wrap'], {
@@ -249,3 +244,3 @@ [Styles['is-disabled']]: props.disabled,
         props.label && (React.createElement("label", { className: cn('input-select-label', Styles['input-select-label']) }, props.label)),
-        props.isSearchable && !props.isMulti ? (React.createElement(SearchableSelect, Object.assign({ styles: propsStyles }, restProps))) : (React.createElement(ReactSelect, Object.assign({}, restProps, { components: props.components || { DropdownIndicator }, isClearable: props.isClearable || false, styles: Object.assign({}, applyStyles(Object.assign({}, SelectStyles, dropdownIndicatorStylesOverride), propsStyles)), isDisabled: props.disabled }))),
+        props.isSearchable && !props.isMulti ? (React.createElement(SearchableSelect, Object.assign({ styles: propsStyles }, restProps))) : (React.createElement(ReactSelect, Object.assign({}, restProps, { components: props.components || { DropdownIndicator }, isClearable: props.isClearable || false, styles: Object.assign({}, applyStyles(Object.assign({}, SelectStyles), propsStyles)), isDisabled: props.disabled }))),
         props.info && (React.createElement("span", { className: cn('input-info', Styles['input-info'], {
@@ -260,9 +255,2 @@ danger: props.error,
     const { styles: propsStyles } = props, restProps = __rest(props, ["styles"]);
-    // Override dropdownIndicator styling when tooltip is present
-    let dropdownIndicatorStylesOverride;
-    if (props.tooltip) {
-        dropdownIndicatorStylesOverride = {
-            dropdownIndicator: DropdownIndicatorStylesOverride,
-        };
-    }
     return (React.createElement("div", { className: cn('input-select-wrap', Styles['input-select-wrap'], {
@@ -277,3 +265,3 @@ [Styles['is-disabled']]: props.disabled,
         props.label && (React.createElement("label", { className: cn('input-select-label', Styles['input-select-label']) }, props.label)),
-        React.createElement(ReactCreateable, Object.assign({}, restProps, { components: props.components || { DropdownIndicator }, isClearable: props.isClearable || false, styles: Object.assign({}, applyStyles(Object.assign({}, SelectStyles, dropdownIndicatorStylesOverride), propsStyles)), isDisabled: props.disabled })),
+        React.createElement(ReactCreateable, Object.assign({}, restProps, { components: props.components || { DropdownIndicator }, isClearable: props.isClearable || false, styles: Object.assign({}, applyStyles(Object.assign({}, SelectStyles), propsStyles)), isDisabled: props.disabled })),
         props.info && (React.createElement("span", { className: cn('input-info', Styles['input-info'], {
@@ -291,9 +279,2 @@ danger: props.error,
     const { styles: propsStyles } = props, restProps = __rest(props, ["styles"]);
-    // Override dropdownIndicator styling when tooltip is present
-    let dropdownIndicatorStylesOverride;
-    if (props.tooltip) {
-        dropdownIndicatorStylesOverride = {
-            dropdownIndicator: DropdownIndicatorStylesOverride,
-        };
-    }
     return (React.createElement("div", { className: cn('input-select-wrap', Styles['input-select-wrap'], {
@@ -312,3 +293,3 @@ [Styles['is-disabled']]: props.disabled,
                 LoadingIndicator: null,
-            }, isClearable: props.isClearable || false, styles: Object.assign({}, applyStyles(Object.assign({}, SelectStyles, dropdownIndicatorStylesOverride), propsStyles)), isDisabled: props.disabled })),
+            }, isClearable: props.isClearable || false, styles: Object.assign({}, applyStyles(Object.assign({}, SelectStyles), propsStyles)), isDisabled: props.disabled })),
         props.info && (React.createElement("span", { className: cn('input-info', Styles['input-info'], {
@@ -315,0 +296,0 @@ danger: props.error,

select/SearchableSelect.js

@@ -16,3 +16,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 import Icon from '../icon';
-import { applyStyles, DropdownIndicator, DropdownIndicatorStylesOverride, SelectStyles, } from './index';
+import { applyStyles, DropdownIndicator, SelectStyles } from './index';
 import Styles from './select.module.scss';
@@ -108,12 +108,5 @@ // The select needs to find a *partial* subtree of elements that are valid to close the menu on click.
         const _a = this.props, { styles: propsStyles } = _a, restProps = __rest(_a, ["styles"]);
-        // Override dropdownIndicator styling when tooltip is present
-        let dropdownIndicatorStylesOverride;
-        if (this.props.tooltip) {
-            dropdownIndicatorStylesOverride = {
-                dropdownIndicator: DropdownIndicatorStylesOverride,
-            };
-        }
         const { isOpen } = this.state;
         return (React.createElement("div", { style: { position: 'relative' } },
-            React.createElement(ReactSelect, Object.assign({}, restProps, { components: this.props.components || { DropdownIndicator }, placeholder: this.props.placeholder, menuIsOpen: false, onMenuOpen: () => this.toggleOpen(), styles: Object.assign({}, applyStyles(Object.assign({}, SelectStyles, dropdownIndicatorStylesOverride), propsStyles)), isDisabled: this.props.disabled })),
+            React.createElement(ReactSelect, Object.assign({}, restProps, { components: this.props.components || { DropdownIndicator }, placeholder: this.props.placeholder, menuIsOpen: false, onMenuOpen: () => this.toggleOpen(), styles: Object.assign({}, applyStyles(Object.assign({}, SelectStyles), propsStyles)), isDisabled: this.props.disabled })),
             isOpen && (React.createElement("div", { className: cn('input-search-wrap', Styles['input-search-wrap']), ref: this.searchMenuRef },
@@ -123,3 +116,3 @@ React.createElement(ReactSelect, Object.assign({}, restProps, { autoFocus: true, backspaceRemovesValue: false, components: {
                         IndicatorSeparator: null,
-                    }, controlShouldRenderValue: false, hideSelectedOptions: false, isClearable: false, menuIsOpen: true, onChange: (value) => this.onSelectChange(value), options: this.props.options, placeholder: "Search...", styles: Object.assign({}, applyStyles(SelectStyles, propsStyles), dropdownIndicatorStylesOverride), classNamePrefix: "search", tabSelectsValue: false }))))));
+                    }, controlShouldRenderValue: false, hideSelectedOptions: false, isClearable: false, menuIsOpen: true, onChange: (value) => this.onSelectChange(value), options: this.props.options, placeholder: "Search...", styles: Object.assign({}, applyStyles(Object.assign({}, SelectStyles), propsStyles)), classNamePrefix: "search", tabSelectsValue: false }))))));
     }
@@ -126,0 +119,0 @@ }

select/Select.stories.js

@@ -17,3 +17,7 @@ import { storiesOf } from '@storybook/react';
     { label: 'Stupendous', value: 'stupendous' },
-    { label: 'Extraordinary', value: 'plvs_extra' },
+    { label: 'Extraordinary', value: 'extra' },
+    {
+        label: 'A superbly long and descriptive option which will cause fantastic things to occur',
+        value: 'long',
+    },
 ];
@@ -60,4 +64,5 @@ const powerups = [
     React.createElement(Select, { options: feels, placeholder: "Goobers" }))));
-stories.add('With tooltip', () => (React.createElement("div", { className: "input-select-wrap" },
-    React.createElement(Select, { options: feels, placeholder: "Goobers", tooltip: "Great stuff!", tooltipDirection: "left" }))));
+stories.add('With tooltip', () => (React.createElement("div", { style: { width: '250px' } },
+    React.createElement("div", { className: "input-select-wrap" },
+        React.createElement(Select, { options: feels, placeholder: "Goobers", tooltip: "Great stuff!", tooltipDirection: "left", value: feels.find(opt => opt.value === 'long') })))));
 stories.add('With long tooltip', () => (React.createElement("div", { className: "input-select-wrap" },
@@ -80,2 +85,5 @@ React.createElement(Select, { options: feels, placeholder: "Goobers", tooltip: "This tooltip has a lot of words, but that's okay because it should wrap. Don't be afraid to be descriptive using this select tooltip!", tooltipDirection: "left", tooltipLength: "large" }))));
     React.createElement(Select, { defaultValue: [powerups[0], powerups[1]], isSearchable: true, isMulti: true, options: powerups }))));
+stories.add('Multi select with a tooltip and constrained width', () => (React.createElement("div", { style: { width: '180px' } },
+    React.createElement("div", { className: "input-select-wrap" },
+        React.createElement(Select, { defaultValue: [powerups[0], powerups[1]], isSearchable: true, isMulti: true, options: powerups, tooltip: "Options can still be removed with the 'x'", tooltipDirection: "left" })))));
 stories.add('Multi select - disabled', () => (React.createElement("div", { className: "input-select-wrap" },
@@ -82,0 +90,0 @@ React.createElement(Select, { defaultValue: [powerups[0], powerups[1]], isSearchable: true, isMulti: true, options: powerups, disabled: true }))));

text-area.js

@@ -63,2 +63,3 @@ var __rest = (this && this.__rest) || function (s, e) {
                 'is-scrollable': scrollable,
+                [Styles['has-tooltip']]: !!tooltip,
             }) },
@@ -65,0 +66,0 @@ React.createElement("label", { className: cn('textarea-label', Styles['textarea-label']), htmlFor: id }, label),

text-input.js

@@ -31,5 +31,2 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
-const onInputFocus = function () {
-    this.setState({ isInputFocused: true });
-};
 // DEBT: (MCFE-746) Make ui-component text inputs support min and max values @reedsa
@@ -105,2 +102,3 @@ export class TextInput extends React.Component {
             'is-search': this.props.isSearch,
+            [Styles['has-tooltip']]: !!tooltip,
         });
@@ -107,0 +105,0 @@ const infoId = info && `${id}-info`;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

980103

increased by0.03%

Worsened metrics

Lines of code

9386

decreased by-0.01%

No dependency changes