diff --git a/package.json b/package.json index a3c69eb5d79..3140400af5d 100644 --- a/package.json +++ b/package.json @@ -115,12 +115,12 @@ "@cypress/webpack-dev-server": "^1.7.0", "@elastic/charts": "^53.1.1", "@elastic/datemath": "^5.0.3", - "@emotion/babel-preset-css-prop": "^11.10.0", - "@emotion/cache": "^11.10.3", - "@emotion/css": "^11.10.0", - "@emotion/eslint-plugin": "^11.10.0", - "@emotion/jest": "^11.10.0", - "@emotion/react": "^11.10.4", + "@emotion/babel-preset-css-prop": "^11.11.0", + "@emotion/cache": "^11.11.0", + "@emotion/css": "^11.11.0", + "@emotion/eslint-plugin": "^11.11.0", + "@emotion/jest": "^11.11.0", + "@emotion/react": "^11.11.0", "@faker-js/faker": "^7.6.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", "@svgr/core": "5.5.0", diff --git a/scripts/jest/setup/throw_on_console_error.js b/scripts/jest/setup/throw_on_console_error.js index c6d2464bdbe..e0eec3d52fd 100644 --- a/scripts/jest/setup/throw_on_console_error.js +++ b/scripts/jest/setup/throw_on_console_error.js @@ -1,4 +1,4 @@ -import { format } from 'util' +import { format } from 'util'; // Fail if a test ends up `console.error`-ing, e.g. if React logs because of a // failed prop types check. @@ -16,5 +16,15 @@ console.error = (message, ...rest) => { return; } + // @see https://github.com/jsdom/jsdom/issues/2177 + // JSDOM doesn't yet know how to parse @container CSS queries - + // all we can do is silence its errors for now + if ( + typeof message === 'string' && + message.startsWith('Error: Could not parse CSS stylesheet') + ) { + return; + } + throw new Error(format(message, ...rest)); }; diff --git a/src-docs/src/views/date_picker/date_picker_example.js b/src-docs/src/views/date_picker/date_picker_example.js index eaf6fb87677..2a329ccdeae 100644 --- a/src-docs/src/views/date_picker/date_picker_example.js +++ b/src-docs/src/views/date_picker/date_picker_example.js @@ -170,13 +170,19 @@ const utcSnippet = ``; -const inlineSnippet = ``; +/>`, + `} + endDateControl={} +/>`, +]; const classesSnippet = ` Use the inline prop to display the date picker - directly in the page. If you do not need the shadows / popover effect - to the date picker then also apply the{' '} - shadow=false prop as shown in the - second example. + directly in the page instead of inside a popover. This prop works for + both EuiDatePicker as well as{' '} + EuiDatePickerRange. If you do not need the default + inline shadow effect, apply the{' '} + {'shadow={false}'} prop.

), snippet: inlineSnippet, diff --git a/src-docs/src/views/date_picker/inline.js b/src-docs/src/views/date_picker/inline.js deleted file mode 100644 index f660d9351a5..00000000000 --- a/src-docs/src/views/date_picker/inline.js +++ /dev/null @@ -1,31 +0,0 @@ -import React, { useState } from 'react'; - -import moment from 'moment'; - -import { EuiDatePicker } from '../../../../src/components'; - -export default () => { - const [startDate, setStartDate] = useState(moment()); - - const handleChange = (date) => { - setStartDate(date); - }; - - return ( -
- - -
- ); -}; diff --git a/src-docs/src/views/date_picker/inline.tsx b/src-docs/src/views/date_picker/inline.tsx new file mode 100644 index 00000000000..fd4ffe722ec --- /dev/null +++ b/src-docs/src/views/date_picker/inline.tsx @@ -0,0 +1,75 @@ +import React, { useState } from 'react'; + +import moment from 'moment'; + +import { + EuiDatePicker, + EuiDatePickerRange, + EuiFlexGroup, + EuiSwitch, + EuiSpacer, +} from '../../../../src/components'; + +import { DisplayToggles } from '../form_controls/display_toggles'; + +export default () => { + const [shadow, setShadow] = useState(true); + const [showTimeSelect, setShowTimeSelect] = useState(true); + + const [startDate, setStartDate] = useState(moment()); + const [endDate, setEndDate] = useState(moment().add(11, 'd')); + + return ( + <> + + setShadow((toggle) => !toggle)} + /> + setShowTimeSelect((toggle) => !toggle)} + /> + + + + date && setStartDate(date)} + inline + showTimeSelect={showTimeSelect} + shadow={shadow} + /> + + + + date && setStartDate(date)} + startDate={startDate} + endDate={endDate} + showTimeSelect={showTimeSelect} + /> + } + endDateControl={ + date && setEndDate(date)} + startDate={startDate} + endDate={endDate} + showTimeSelect={showTimeSelect} + /> + } + /> + + + ); +}; diff --git a/src-docs/src/views/date_picker/range.tsx b/src-docs/src/views/date_picker/range.tsx index a9ecf02cbc6..87d1576bfd5 100644 --- a/src-docs/src/views/date_picker/range.tsx +++ b/src-docs/src/views/date_picker/range.tsx @@ -10,9 +10,8 @@ export default () => { return ( /* DisplayToggles wrapper for Docs only */ - + endDate} startDateControl={ { return ( date && setStartDate(date)} startDate={startDate} endDate={endDate} minDate={minDate} maxDate={endDate} - isInvalid={isInvalid} aria-label="Start date" showTimeSelect /> @@ -31,12 +31,11 @@ export default () => { endDateControl={ date && setEndDate(date)} startDate={startDate} endDate={endDate} minDate={startDate} maxDate={maxDate} - isInvalid={isInvalid} aria-label="End date" showTimeSelect /> diff --git a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap index a09129ee578..5d3697d518d 100644 --- a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap +++ b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap @@ -2,7 +2,7 @@ exports[`EuiDatePicker is rendered 1`] = `
- -
-
+ class="euiFormControlLayoutCustomIcon" + > + +
- + class="euiPopover__anchor css-zih94u-render" + > +
+ +
-
-
- - to - -
-
+ + to + +
- + class="euiPopover__anchor css-zih94u-render" + > +
+ +
-
+ `; -exports[`EuiDatePickerRange is rendered 1`] = ` -
- -
-
+ class="euiFormControlLayoutCustomIcon" + > + +
- +
+ +
-
-
- + + to + +
+
- to - +
+
+ +
+
+
+
+ +`; + +exports[`EuiDatePickerRange props fullWidth 1`] = ` + +
-
- + +
+
+
+
+ +
+
+
+
+ + to + +
+
+
+
+ +
-
+ `; -exports[`EuiDatePickerRange isInvalid is rendered 1`] = ` -
- +
+ + +
+
+
+ January 2000 +
+
+
+
+ + + January + +
+
+
+
+ + + 2000 + +
+
+
+
+
+ Su +
+
+ Mo +
+
+ Tu +
+
+ We +
+
+ Th +
+
+ Fr +
+
+ Sa +
+
+
+
+ +
+
+ 26 +
+
+ 27 +
+
+ 28 +
+
+ 29 +
+
+ 30 +
+
+ 31 +
+
+ 1 +
+
+
+
+ 2 +
+
+ 3 +
+
+ 4 +
+
+ 5 +
+
+ 6 +
+
+ 7 +
+
+ 8 +
+
+
+
+ 9 +
+
+ 10 +
+
+ 11 +
+
+ 12 +
+
+ 13 +
+
+ 14 +
+
+ 15 +
+
+
+
+ 16 +
+
+ 17 +
+
+ 18 +
+
+ 19 +
+
+ 20 +
+
+ 21 +
+
+ 22 +
+
+
+
+ 23 +
+
+ 24 +
+
+ 25 +
+
+ 26 +
+
+ 27 +
+
+ 28 +
+
+ 29 +
+
+
+
+ 30 +
+
+ 31 +
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+ 4 +
+
+ 5 +
+
+
+
+
+
+
+
+
- + + +
+
+
+ January 2000 +
+
+
+
+ + + January + +
+
+
+
+ + + 2000 + +
+
+
+
+
+ Su +
+
+ Mo +
+
+ Tu +
+
+ We +
+
+ Th +
+
+ Fr +
+
+ Sa +
+
+
+
+ +
+
+ 26 +
+
+ 27 +
+
+ 28 +
+
+ 29 +
+
+ 30 +
+
+ 31 +
+
+ 1 +
+
+
+
+ 2 +
+
+ 3 +
+
+ 4 +
+
+ 5 +
+
+ 6 +
+
+ 7 +
+
+ 8 +
+
+
+
+ 9 +
+
+ 10 +
+
+ 11 +
+
+ 12 +
+
+ 13 +
+
+ 14 +
+
+ 15 +
+
+
+
+ 16 +
+
+ 17 +
+
+ 18 +
+
+ 19 +
+
+ 20 +
+
+ 21 +
+
+ 22 +
+
+
+
+ 23 +
+
+ 24 +
+
+ 25 +
+
+ 26 +
+
+ 27 +
+
+ 28 +
+
+ 29 +
+
+
+
+ 30 +
+
+ 31 +
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+ 4 +
+
+ 5 +
+
+
+
+
+
+ +`; + +exports[`EuiDatePickerRange props isInvalid 1`] = ` + +
-
- + +
+
+
+
+ +
-
-
- - to - -
-
+ + to + +
- +
+ +
-
-
- +
+ +
-
+ `; -exports[`EuiDatePickerRange readOnly is rendered 1`] = ` -
-
+
+
+
+ +
+
+
+
+ + to + +
+
+
+
+ +
+
+
+
+ - +
+
+ +`; + +exports[`EuiDatePickerRange props readOnly 1`] = ` + +
-
- + +
+
+
+
+ +
-
-
- - to - -
-
+ + to + +
- + class="euiPopover__anchor css-zih94u-render" + > +
+ +
-
+ `; exports[`EuiDatePickerRange uses individual EuiDatePicker props 1`] = ` -
- -
-
+ class="euiFormControlLayoutCustomIcon" + > + +
- +
+ +
-
-
- - to - -
-
+ + to + +
- +
+ +
- + `; diff --git a/src/components/date_picker/_date_picker_range.scss b/src/components/date_picker/_date_picker_range.scss deleted file mode 100644 index 5ef1251be83..00000000000 --- a/src/components/date_picker/_date_picker_range.scss +++ /dev/null @@ -1,5 +0,0 @@ -.euiDatePickerRange { - .euiFieldText.euiDatePicker { - height: $euiFormControlLayoutGroupInputHeight; - } -} diff --git a/src/components/date_picker/_index.scss b/src/components/date_picker/_index.scss index 962d4bc7df3..08789b2448c 100644 --- a/src/components/date_picker/_index.scss +++ b/src/components/date_picker/_index.scss @@ -1,4 +1,3 @@ // The react-date-picker overrides exists in the global_styling folder // to easily style differently between default and Amsterdam theme -@import 'date_picker_range'; @import 'super_date_picker/index'; diff --git a/src/components/date_picker/date_picker.spec.tsx b/src/components/date_picker/date_picker.spec.tsx new file mode 100644 index 00000000000..31963f9068f --- /dev/null +++ b/src/components/date_picker/date_picker.spec.tsx @@ -0,0 +1,74 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +/// +/// +/// + +import React from 'react'; + +import { EuiDatePicker } from './date_picker'; + +describe('EuiDatePicker', () => { + describe('inline', () => { + // TODO: These might be better as storybook/visual snapshot tests + + it('renders a calendar inline', () => { + cy.realMount(); + + cy.get('.euiDatePicker--inline').should( + 'have.class', + 'euiDatePicker--shadow' + ); + cy.get('.react-datepicker').should('exist'); + + cy.realPress('Tab'); + cy.focused().should( + 'have.class', + 'react-datepicker__navigation--previous' + ); + }); + + it('renders without a shadow', () => { + cy.realMount(); + + cy.get('.euiDatePicker--inline').should( + 'not.have.class', + 'euiDatePicker--shadow' + ); + }); + + it('renders form control icons below the date picker', () => { + cy.realMount(); + + cy.get('.euiFormControlLayoutIcons').should( + 'have.class', + 'euiFormControlLayoutIcons--static' + ); + cy.get('.euiFormControlLayoutDelimited--isInvalid').should('exist'); + }); + + it('renders as disabled', () => { + cy.realMount(); + + cy.get('.euiFormControlLayout-isDisabled').should('exist'); + + cy.realPress('Tab'); + cy.focused().should('not.exist'); + }); + + it('renders as readonly', () => { + cy.realMount(); + + cy.get('.euiFormControlLayout--readOnly').should('exist'); + + cy.realPress('Tab'); + cy.focused().should('not.exist'); + }); + }); +}); diff --git a/src/components/date_picker/date_picker.tsx b/src/components/date_picker/date_picker.tsx index a82cb76af81..d141e1e925c 100644 --- a/src/components/date_picker/date_picker.tsx +++ b/src/components/date_picker/date_picker.tsx @@ -106,7 +106,13 @@ interface EuiExtendedDatePickerProps placeholder?: string; /** - * Can turn the shadow off if using the inline prop + * Displays the date picker calendar on directly on the page. + * Will not render `iconType` or `fullWidth`. + */ + inline?: boolean; + + /** + * Allows turning the shadow off if using the `inline` prop */ shadow?: boolean; @@ -165,6 +171,7 @@ export const EuiDatePicker: FunctionComponent = ({ placeholder, popperClassName, popoverPlacement = 'downLeft', + readOnly, selected, shadow = true, shouldCloseOnSelect = true, @@ -176,8 +183,8 @@ export const EuiDatePicker: FunctionComponent = ({ ...rest }) => { const classes = classNames('euiDatePicker', { - 'euiDatePicker--shadow': shadow, 'euiDatePicker--inline': inline, + 'euiDatePicker--shadow': inline && shadow, }); const numIconsClass = controlOnly @@ -238,6 +245,7 @@ export const EuiDatePicker: FunctionComponent = ({ dateFormat={fullDateFormat} dayClassName={dayClassName} disabled={disabled} + readOnly={readOnly} excludeDates={excludeDates} filterDate={filterDate} injectTimes={injectTimes} @@ -261,7 +269,7 @@ export const EuiDatePicker: FunctionComponent = ({ timeFormat={timeFormat} utcOffset={utcOffset} yearDropdownItemNumber={7} - accessibleMode + accessibleMode={!(disabled || readOnly)} popperPlacement={popoverPlacement} {...rest} /> @@ -280,6 +288,15 @@ export const EuiDatePicker: FunctionComponent = ({ clear={selected && onClear ? { onClick: onClear } : undefined} isLoading={isLoading} isInvalid={isInvalid} + isDisabled={disabled} + readOnly={readOnly} + className={classNames({ + // Take advantage of `euiFormControlLayoutDelimited`'s replacement input styling + euiFormControlLayoutDelimited: inline, + 'euiFormControlLayoutDelimited--isInvalid': + inline && isInvalid && !disabled && !readOnly, + })} + iconsPosition={inline ? 'static' : undefined} > {control} diff --git a/src/components/date_picker/date_picker_range.styles.ts b/src/components/date_picker/date_picker_range.styles.ts new file mode 100644 index 00000000000..f1687ab739a --- /dev/null +++ b/src/components/date_picker/date_picker_range.styles.ts @@ -0,0 +1,119 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; +import { logicalCSS } from '../../global_styling'; +import { euiShadowMedium } from '../../themes/amsterdam/global_styling/mixins'; +import { UseEuiTheme } from '../../services'; +import { euiFormVariables } from '../form/form.styles'; + +export const euiDatePickerRangeStyles = (euiThemeContext: UseEuiTheme) => { + const { controlLayoutGroupInputHeight } = euiFormVariables(euiThemeContext); + + return { + euiDatePickerRange: css` + .euiFieldText.euiDatePicker { + // Needed for correct focus/invalid box-shadow styles + ${logicalCSS('height', controlLayoutGroupInputHeight)} + } + `, + }; +}; + +export const euiDatePickerRangeInlineStyles = ( + euiThemeContext: UseEuiTheme +) => { + const { euiTheme } = euiThemeContext; + + // Use a container query to stack date pickers vertically if the container is + // not wide enough to fit both. We need a fn for this to render two width queries, + // depending on whether time selection is being rendered or not + const containerQuery = ( + datePickerWidth: number, + delimiterWidth: number = 16 + ) => ` + display: block; + container-type: inline-size; + + .euiFormControlLayout__childrenWrapper { + // Use static px widths for now, since render behavior comes from a third party library + @container (max-width: ${datePickerWidth * 2 + delimiterWidth}px) { + // Unset grid display + display: block !important; + + // Center and point the default delimiter arrow downwards + & > .euiText > [data-icon-type='sortRight'] { + transform: rotate(90deg); + margin-inline: auto; + } + } + }`; + + return { + inline: css` + .euiFormControlLayoutDelimited { + // Reset form control styling + ${logicalCSS('height', 'auto')} + ${logicalCSS('width', 'fit-content')} + ${logicalCSS('max-width', '100%')} + background-color: transparent; + box-shadow: none; + padding: 0; + + .euiFormControlLayout__childrenWrapper { + display: grid; + grid-template-columns: 1fr auto 1fr; + grid-template-rows: auto; + align-items: stretch; + background-color: transparent; + } + + // Fix --group height when append/prepend are present + &.euiFormControlLayout--group { + & > *, + .euiFormControlLayoutDelimited__delimiter { + ${logicalCSS('height', 'auto')} + } + } + + // Display form control icons below both date pickers + .euiFormControlLayoutIcons { + justify-content: center; + grid-column: 1 / span 3; + ${logicalCSS('height', 'auto')} + ${logicalCSS('padding-bottom', euiTheme.size.s)} + } + } + + // Make sure the inline date picker sets is absolute positioning based off the correct parent + .react-datepicker { + position: relative; + } + + // The time list creates some weird spacing when inline. Remove its padding to make it less horizontally unbalanced + .react-datepicker__time-list { + padding: 0; + } + `, + responsive: css` + ${containerQuery(268)} + `, + responsiveWithTimeSelect: css` + ${containerQuery(350)} + `, + shadow: css` + .euiFormControlLayoutDelimited { + ${euiShadowMedium(euiThemeContext)} + + .euiFormControlLayout__childrenWrapper { + background-color: ${euiTheme.colors.emptyShade}; + } + } + `, + }; +}; diff --git a/src/components/date_picker/date_picker_range.test.tsx b/src/components/date_picker/date_picker_range.test.tsx index 0f7fdd1c2bd..902104f8e7f 100644 --- a/src/components/date_picker/date_picker_range.test.tsx +++ b/src/components/date_picker/date_picker_range.test.tsx @@ -9,6 +9,7 @@ import React from 'react'; import { render, mount } from 'enzyme'; import { requiredProps } from '../../test'; +import moment from 'moment'; import { EuiDatePickerRange } from './date_picker_range'; import { EuiDatePicker } from './date_picker'; @@ -26,8 +27,20 @@ describe('EuiDatePickerRange', () => { expect(component).toMatchSnapshot(); }); - describe('readOnly', () => { - it('is rendered', () => { + describe('props', () => { + test('fullWidth', () => { + const component = render( + } + endDateControl={} + fullWidth + /> + ); + + expect(component).toMatchSnapshot(); + }); + + test('readOnly', () => { const component = render( } @@ -38,10 +51,8 @@ describe('EuiDatePickerRange', () => { expect(component).toMatchSnapshot(); }); - }); - describe('disabled', () => { - it('is rendered', () => { + test('disabled', () => { const component = render( } @@ -52,10 +63,8 @@ describe('EuiDatePickerRange', () => { expect(component).toMatchSnapshot(); }); - }); - describe('isInvalid', () => { - it('is rendered', () => { + test('isInvalid', () => { const component = render( } @@ -66,6 +75,56 @@ describe('EuiDatePickerRange', () => { expect(component).toMatchSnapshot(); }); + + test('isLoading', () => { + const component = render( + } + endDateControl={} + isLoading + /> + ); + + expect(component).toMatchSnapshot(); + }); + + describe('inline', () => { + it('renders', () => { + const selectedStartDate = moment('2000-01-01T00:00:00-0800'); + const selectedEndDate = moment(selectedStartDate).add(1, 'd'); + + const component = render( + } + endDateControl={} + inline + // All of the below props should be ignored/not render when `inline` + iconType={true} + fullWidth + prepend="test" + append="test" + /> + ); + + expect(component).toMatchSnapshot(); + }); + + it('allows turning off the default shadow', () => { + const component = render( + } + endDateControl={} + inline + shadow={false} + /> + ); + + expect(component.attr('class')).not.toContain('shadow'); + }); + + // TODO: Use storybook to test inline invalid, loading, disabled, & readOnly + // visually instead of via DOM + }); }); it('uses individual EuiDatePicker props', () => { diff --git a/src/components/date_picker/date_picker_range.tsx b/src/components/date_picker/date_picker_range.tsx index 1b5cc77c05a..c44ff5fd883 100644 --- a/src/components/date_picker/date_picker_range.tsx +++ b/src/components/date_picker/date_picker_range.tsx @@ -7,6 +7,7 @@ */ import React, { + useMemo, FocusEvent, FocusEventHandler, FunctionComponent, @@ -22,12 +23,19 @@ import { } from '../form'; import { IconType } from '../icon'; import { CommonProps } from '../common'; + +import { useEuiTheme } from '../../services'; +import { + euiDatePickerRangeStyles, + euiDatePickerRangeInlineStyles, +} from './date_picker_range.styles'; + import { EuiDatePickerProps } from './date_picker'; export type EuiDatePickerRangeProps = CommonProps & Pick< EuiFormControlLayoutDelimitedProps, - 'isInvalid' | 'readOnly' | 'fullWidth' | 'prepend' | 'append' + 'isLoading' | 'isInvalid' | 'readOnly' | 'fullWidth' | 'prepend' | 'append' > & { /** * Including any children will replace all innards with the provided children @@ -59,6 +67,19 @@ export type EuiDatePickerRangeProps = CommonProps & */ disabled?: boolean; + /** + * Displays both date picker calendars directly on the page. + * Will not render `iconType`, `fullWidth`, `prepend`, or `append`. + * + * Passes through to each control if `isCustom` is not set. + */ + inline?: EuiDatePickerProps['inline']; + + /** + * Allows turning the shadow off if using the `inline` prop + */ + shadow?: EuiDatePickerProps['shadow']; + /** * Triggered whenever the start or end controls are blurred */ @@ -76,9 +97,12 @@ export const EuiDatePickerRange: FunctionComponent = ({ startDateControl, endDateControl, iconType = true, - fullWidth, + inline, + shadow = true, + fullWidth: _fullWidth, isCustom, readOnly, + isLoading, isInvalid, disabled, onFocus, @@ -87,16 +111,30 @@ export const EuiDatePickerRange: FunctionComponent = ({ prepend, ...rest }) => { - const classes = classNames( - 'euiDatePickerRange', - { - 'euiDatePickerRange--fullWidth': fullWidth, - 'euiDatePickerRange--readOnly': readOnly, - 'euiDatePickerRange--isInvalid': isInvalid, - 'euiDatePickerRange--isDisabled': disabled, - }, - className - ); + // `fullWidth` should not affect inline datepickers (matches non-range behavior) + const fullWidth = _fullWidth && !inline; + + const classes = classNames('euiDatePickerRange', className); + + const euiTheme = useEuiTheme(); + const styles = euiDatePickerRangeStyles(euiTheme); + const cssStyles = [styles.euiDatePickerRange]; + + if (inline) { + // Determine the inline container query to use based on the width of the react-datepicker + const hasTimeSelect = + startDateControl.props.showTimeSelect || + endDateControl.props.showTimeSelect; + + const inlineStyles = euiDatePickerRangeInlineStyles(euiTheme); + cssStyles.push(inlineStyles.inline); + cssStyles.push( + hasTimeSelect + ? inlineStyles.responsiveWithTimeSelect + : inlineStyles.responsive + ); + if (shadow) cssStyles.push(inlineStyles.shadow); + } let startControl = startDateControl; let endControl = endDateControl; @@ -107,8 +145,9 @@ export const EuiDatePickerRange: FunctionComponent = ({ { controlOnly: true, showIcon: false, - fullWidth: fullWidth, - readOnly: readOnly, + inline, + fullWidth, + readOnly, disabled: disabled || startDateControl.props.disabled, isInvalid: isInvalid || startDateControl.props.isInvalid, className: classNames( @@ -131,8 +170,9 @@ export const EuiDatePickerRange: FunctionComponent = ({ { controlOnly: true, showIcon: false, - fullWidth: fullWidth, - readOnly: readOnly, + inline, + fullWidth, + readOnly, disabled: disabled || endDateControl.props.disabled, isInvalid: isInvalid || endDateControl.props.isInvalid, popoverPlacement: 'downRight', @@ -152,19 +192,27 @@ export const EuiDatePickerRange: FunctionComponent = ({ ); } + const icon = useMemo(() => { + if (inline) return undefined; + if (iconType === false) return undefined; + if (iconType === true) return 'calendar'; + return iconType; + }, [iconType, inline]); + return ( - + + + ); }; diff --git a/src/components/date_picker/react-datepicker/src/calendar.js b/src/components/date_picker/react-datepicker/src/calendar.js index e95659887c7..1acbb2916d5 100644 --- a/src/components/date_picker/react-datepicker/src/calendar.js +++ b/src/components/date_picker/react-datepicker/src/calendar.js @@ -417,6 +417,7 @@ export default class Calendar extends React.Component { type="button" className={classes.join(" ")} onClick={clickHandler} + disabled={!this.props.accessibleMode} > {this.props.previousMonthButtonLabel} @@ -466,6 +467,7 @@ export default class Calendar extends React.Component { type="button" className={classes.join(" ")} onClick={clickHandler} + disabled={!this.props.accessibleMode} > {this.props.nextMonthButtonLabel} @@ -717,6 +719,11 @@ export default class Calendar extends React.Component { render() { const Container = this.props.container || CalendarContainer; + const classes = classnames("react-datepicker", this.props.className, { + "react-datepicker--time-only": this.props.showTimeSelectOnly, + "react-datepicker--non-interactive": !this.props.isCalendarInteractive, + }); + const trapFocus = this.props.accessibleMode && !this.props.inline; const initialFocusTarget = this.props.showTimeSelectOnly ? ".react-datepicker__time-box--accessible" @@ -724,11 +731,7 @@ export default class Calendar extends React.Component { if (trapFocus) { return ( - + + {this.renderPreviousMonthButton()} {this.renderNextMonthButton()} {this.renderMonths()} diff --git a/src/components/date_picker/react-datepicker/src/index.js b/src/components/date_picker/react-datepicker/src/index.js index 375e131d265..a8048cfcb3e 100644 --- a/src/components/date_picker/react-datepicker/src/index.js +++ b/src/components/date_picker/react-datepicker/src/index.js @@ -755,6 +755,7 @@ export default class DatePicker extends React.Component { updateSelection={this.updateSelection} accessibleMode={this.props.accessibleMode} enableFocusTrap={this.state.enableFocusTrap} + isCalendarInteractive={!(this.props.disabled || this.props.readOnly)} > {this.props.children} diff --git a/src/themes/amsterdam/global_styling/react_date_picker/_date_picker.scss b/src/themes/amsterdam/global_styling/react_date_picker/_date_picker.scss index a09f8cc8e64..f216cab5e65 100644 --- a/src/themes/amsterdam/global_styling/react_date_picker/_date_picker.scss +++ b/src/themes/amsterdam/global_styling/react_date_picker/_date_picker.scss @@ -10,29 +10,35 @@ height: auto; } - &.euiDatePicker--inline { + /** + * Inline datepickers + */ + + &--inline { .euiFormControlLayout { - width: auto; + width: fit-content; + background-color: transparent; + box-shadow: none; + padding: 0; + } + // Extra specificity required to override .euiFormControlLayoutDelimited styles + .euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper { + background-color: transparent; + flex-direction: column; // Render form control icons below date picker + } + .euiFormControlLayoutIcons { + justify-content: center; + padding-block-end: $euiSizeS; } } - &.euiDatePicker--shadow { - .react-datepicker-popper { + &--shadow { + .euiFormControlLayout { @include euiBottomShadowMedium; - border: $euiBorderThin; - background-color: $euiColorEmptyShade; - border-radius: 0 0 $euiBorderRadius $euiBorderRadius; } - - // If the shadow is on, and it is inline, we need to put the shadow on the datepicker - // itself rather than the popper. - &.euiDatePicker--inline { - .react-datepicker { - @include euiBottomShadowMedium; - border: $euiBorderThin; - background-color: $euiColorEmptyShade; - border-radius: $euiBorderRadius; - } + // Extra specificity required to override .euiFormControlLayoutDelimited styles + .euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper { + background-color: $euiColorEmptyShade; } } } @@ -46,22 +52,8 @@ justify-content: center; } -.euiDatePicker.euiDatePicker--shadow .react-datepicker-popper { - z-index: $euiZContentMenu; - animation: euiAnimFadeIn $euiAnimSpeedFast ease-in; - - &[data-placement^='top'] { - @include euiBottomShadowFlat; - border-radius: $euiBorderRadius $euiBorderRadius 0 0; - } - - &[data-placement^='right'] { - margin-left: 0; - } - - &[data-placement^='left'] { - margin-right: 0; - } +.react-datepicker--non-interactive { + pointer-events: none; } // Hidden things that we don't want to show/use, ever diff --git a/src/themes/amsterdam/overrides/_date_picker.scss b/src/themes/amsterdam/overrides/_date_picker.scss deleted file mode 100644 index aebe13a68d4..00000000000 --- a/src/themes/amsterdam/overrides/_date_picker.scss +++ /dev/null @@ -1,13 +0,0 @@ -.euiDatePicker { - &.euiDatePicker--shadow { - .react-datepicker-popper, - .react-datepicker-popper[data-placement^='top'] { - border: none; - border-radius: $euiBorderRadius; - } - } -} - -.euiDatePicker.euiDatePicker--shadow.euiDatePicker--inline .react-datepicker { - border: none; -} diff --git a/src/themes/amsterdam/overrides/_index.scss b/src/themes/amsterdam/overrides/_index.scss index 7fb853f7628..576b9d8bb93 100644 --- a/src/themes/amsterdam/overrides/_index.scss +++ b/src/themes/amsterdam/overrides/_index.scss @@ -1,6 +1,5 @@ @import 'combo_box'; @import 'data_grid'; -@import 'date_picker'; @import 'description_list'; @import 'filter_group'; @import 'form_control_layout'; diff --git a/upcoming_changelogs/6795.md b/upcoming_changelogs/6795.md new file mode 100644 index 00000000000..f748ca2d420 --- /dev/null +++ b/upcoming_changelogs/6795.md @@ -0,0 +1,10 @@ +- Updated `EuiDatePickerRange` to support `inline` display + +**Bug fixes** + +- Fixed `EuiDatePicker`'s `inline` display to correctly render and prevent user interaction when `disabled` or `readOnly` +- Fixed `EuiDatePicker`'s `inline` display to correctly render `isInvalid` and `isLoading` icons + +**CSS-in-JS conversions** + +- Converted `EuiDatePickerRange` to Emotion diff --git a/yarn.lock b/yarn.lock index e54466d2dba..b9b6f774642 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1190,146 +1190,145 @@ dependencies: tslib "^1.9.3" -"@emotion/babel-plugin-jsx-pragmatic@^0.2.0": - version "0.2.0" - resolved "https://registry.yarnpkg.com/@emotion/babel-plugin-jsx-pragmatic/-/babel-plugin-jsx-pragmatic-0.2.0.tgz#6fdd78600417973fa2610704693158181d8505b7" - integrity sha512-VPfKAtb/bVyu5y+HzCPj9bb2nHnj9yX5mMAU7N0pIDcrFZo8aqDyHXLYF8BD7tY4pNL09N87dygVLKIkQvshJw== +"@emotion/babel-plugin-jsx-pragmatic@^0.2.1": + version "0.2.1" + resolved "https://registry.yarnpkg.com/@emotion/babel-plugin-jsx-pragmatic/-/babel-plugin-jsx-pragmatic-0.2.1.tgz#01d3306fde73b60d683f78f3bd9f6b2c919b63b6" + integrity sha512-xy1SlgEJygAAIvIuC2idkGKJYa6v5iwoyILkvNKgk347bV+IImXrUat5Z86EmLGyWhEoTplVT9EHqTnHZG4HFw== dependencies: "@babel/plugin-syntax-jsx" "^7.17.12" -"@emotion/babel-plugin@^11.10.0": - version "11.10.2" - resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.2.tgz#879db80ba622b3f6076917a1e6f648b1c7d008c7" - integrity sha512-xNQ57njWTFVfPAc3cjfuaPdsgLp5QOSuRsj9MA6ndEhH/AzuZM86qIQzt6rq+aGBwj3n5/TkLmU5lhAfdRmogA== +"@emotion/babel-plugin@^11.11.0": + version "11.11.0" + resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c" + integrity sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ== dependencies: "@babel/helper-module-imports" "^7.16.7" - "@babel/plugin-syntax-jsx" "^7.17.12" "@babel/runtime" "^7.18.3" - "@emotion/hash" "^0.9.0" - "@emotion/memoize" "^0.8.0" - "@emotion/serialize" "^1.1.0" + "@emotion/hash" "^0.9.1" + "@emotion/memoize" "^0.8.1" + "@emotion/serialize" "^1.1.2" babel-plugin-macros "^3.1.0" convert-source-map "^1.5.0" escape-string-regexp "^4.0.0" find-root "^1.1.0" source-map "^0.5.7" - stylis "4.0.13" + stylis "4.2.0" -"@emotion/babel-preset-css-prop@^11.10.0": - version "11.10.0" - resolved "https://registry.yarnpkg.com/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-11.10.0.tgz#23922787561d8376782b0e9006323512fe797275" - integrity sha512-oN2lCP0NJTEt80IIeFM1RbmapeEVNYzKXYk2pYirAuom9WvV9Oz/aJQN5Hn3RyBMPaY+Of1OZYpTVMle2jUm4g== +"@emotion/babel-preset-css-prop@^11.11.0": + version "11.11.0" + resolved "https://registry.yarnpkg.com/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-11.11.0.tgz#6a86d3df74f7804af1ae0b37cd8893a9863ddbb7" + integrity sha512-+1Cba68IyBeltWzvbBSXcBWqP2eKQuQcSUpIu3ma4pOUeRol4EvwWrYS2Rv51aIVqg066fLB+Z9O/8NKR7uUlQ== dependencies: "@babel/plugin-transform-react-jsx" "^7.17.12" "@babel/runtime" "^7.18.3" - "@emotion/babel-plugin" "^11.10.0" - "@emotion/babel-plugin-jsx-pragmatic" "^0.2.0" + "@emotion/babel-plugin" "^11.11.0" + "@emotion/babel-plugin-jsx-pragmatic" "^0.2.1" -"@emotion/cache@^11.10.0", "@emotion/cache@^11.10.3": - version "11.10.3" - resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.3.tgz#c4f67904fad10c945fea5165c3a5a0583c164b87" - integrity sha512-Psmp/7ovAa8appWh3g51goxu/z3iVms7JXOreq136D8Bbn6dYraPnmL6mdM8GThEx9vwSn92Fz+mGSjBzN8UPQ== +"@emotion/cache@^11.11.0": + version "11.11.0" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff" + integrity sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ== dependencies: - "@emotion/memoize" "^0.8.0" - "@emotion/sheet" "^1.2.0" - "@emotion/utils" "^1.2.0" - "@emotion/weak-memoize" "^0.3.0" - stylis "4.0.13" + "@emotion/memoize" "^0.8.1" + "@emotion/sheet" "^1.2.2" + "@emotion/utils" "^1.2.1" + "@emotion/weak-memoize" "^0.3.1" + stylis "4.2.0" -"@emotion/css-prettifier@^1.1.0": - version "1.1.0" - resolved "https://registry.yarnpkg.com/@emotion/css-prettifier/-/css-prettifier-1.1.0.tgz#1b5ac1588af9525e583f56fa898abb7edb3c7d9e" - integrity sha512-ALZCKBcpC9FeA0D6HLc4Et3bwY06fOG63CqLtWwk4W/u7+bWjorRxS9yikcJ2aTmlKur/ST9eWm5ohzBmWlTOQ== +"@emotion/css-prettifier@^1.1.3": + version "1.1.3" + resolved "https://registry.yarnpkg.com/@emotion/css-prettifier/-/css-prettifier-1.1.3.tgz#014ff59a87a3be5f2ce555b70f096af66b2dc845" + integrity sha512-KNv23+VQ+pcw3ebd1vSEl11CQ6SKAG5EQkrinjVGsfw3ZTWe6/tpWQrsvFLqCtU2LRiLPi04KgFCE4A9+crfpQ== dependencies: - "@emotion/memoize" "^0.8.0" - stylis "4.0.13" + "@emotion/memoize" "^0.8.1" + stylis "4.2.0" -"@emotion/css@^11.10.0": - version "11.10.0" - resolved "https://registry.yarnpkg.com/@emotion/css/-/css-11.10.0.tgz#270b4fdf2419e59cb07081d0e9f7940d88b8b443" - integrity sha512-dH9f+kSCucc8ilMg0MUA1AemabcyzYpe5EKX24F528PJjD7HyIY/VBNJHxfUdc8l400h2ncAjR6yEDu+DBj2cg== +"@emotion/css@^11.11.0": + version "11.11.0" + resolved "https://registry.yarnpkg.com/@emotion/css/-/css-11.11.0.tgz#dad6a27a77d5e5cbb0287674c3ace76d762563ca" + integrity sha512-m4g6nKzZyiKyJ3WOfdwrBdcujVcpaScIWHAnyNKPm/A/xJKwfXPfQAbEVi1kgexWTDakmg+r2aDj0KvnMTo4oQ== dependencies: - "@emotion/babel-plugin" "^11.10.0" - "@emotion/cache" "^11.10.0" - "@emotion/serialize" "^1.1.0" - "@emotion/sheet" "^1.2.0" - "@emotion/utils" "^1.2.0" + "@emotion/babel-plugin" "^11.11.0" + "@emotion/cache" "^11.11.0" + "@emotion/serialize" "^1.1.2" + "@emotion/sheet" "^1.2.2" + "@emotion/utils" "^1.2.1" -"@emotion/eslint-plugin@^11.10.0": - version "11.10.0" - resolved "https://registry.yarnpkg.com/@emotion/eslint-plugin/-/eslint-plugin-11.10.0.tgz#e0d8544c8a568bb2dac605b87346baaa3b846e80" - integrity sha512-nWpuoQQrzI9aM9fgn+Pbb0pOau4BhheXyVqHcOYKFq46uSuSR2ivZaDwwCJKI6ScA8Pm7OcoOpwdRH2iisf9cg== +"@emotion/eslint-plugin@^11.11.0": + version "11.11.0" + resolved "https://registry.yarnpkg.com/@emotion/eslint-plugin/-/eslint-plugin-11.11.0.tgz#9f19ecf64ba67c4472576c4c82f6bd4df646be61" + integrity sha512-jCOYqU/0Sqm+g+6D7QuIlG99q8YAF0T7BP98zQF/MPZKfbcm46z5mizXn0YlhZ9AYZfNtZ1DeODXdncYxZzR4Q== -"@emotion/hash@^0.9.0": - version "0.9.0" - resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7" - integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ== +"@emotion/hash@^0.9.1": + version "0.9.1" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43" + integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ== -"@emotion/jest@^11.10.0": - version "11.10.0" - resolved "https://registry.yarnpkg.com/@emotion/jest/-/jest-11.10.0.tgz#a39c16d0a5794254e0e4c5caf3f11278a64ae4a4" - integrity sha512-jeevEzauWrjDPWt9BGITjKzgLd31Q6kZ35gmH77f+LSaU/Ie1bFfxroum0nQNPEHS+kUxh6unv9DQIw+DEr5Ug== +"@emotion/jest@^11.11.0": + version "11.11.0" + resolved "https://registry.yarnpkg.com/@emotion/jest/-/jest-11.11.0.tgz#4d64b33052308739dcdd7396fd2bc902f7244f82" + integrity sha512-XZlnmdUZ32YjQnInsCFk/plKpkV/NXN1Ab4YoNvXN887MeR3Hr5ZsTyoblIW8AWwdfQiZHHphaPMb56lk6Ofdw== dependencies: "@babel/runtime" "^7.18.3" - "@emotion/css-prettifier" "^1.1.0" + "@emotion/css-prettifier" "^1.1.3" chalk "^4.1.0" specificity "^0.4.1" - stylis "4.0.13" + stylis "4.2.0" -"@emotion/memoize@^0.8.0": - version "0.8.0" - resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f" - integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA== +"@emotion/memoize@^0.8.1": + version "0.8.1" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17" + integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA== -"@emotion/react@^11.10.4": - version "11.10.4" - resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.4.tgz#9dc6bccbda5d70ff68fdb204746c0e8b13a79199" - integrity sha512-j0AkMpr6BL8gldJZ6XQsQ8DnS9TxEQu1R+OGmDZiWjBAJtCcbt0tS3I/YffoqHXxH6MjgI7KdMbYKw3MEiU9eA== +"@emotion/react@^11.11.0": + version "11.11.0" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.0.tgz#408196b7ef8729d8ad08fc061b03b046d1460e02" + integrity sha512-ZSK3ZJsNkwfjT3JpDAWJZlrGD81Z3ytNDsxw1LKq1o+xkmO5pnWfr6gmCC8gHEFf3nSSX/09YrG67jybNPxSUw== dependencies: "@babel/runtime" "^7.18.3" - "@emotion/babel-plugin" "^11.10.0" - "@emotion/cache" "^11.10.0" - "@emotion/serialize" "^1.1.0" - "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0" - "@emotion/utils" "^1.2.0" - "@emotion/weak-memoize" "^0.3.0" + "@emotion/babel-plugin" "^11.11.0" + "@emotion/cache" "^11.11.0" + "@emotion/serialize" "^1.1.2" + "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1" + "@emotion/utils" "^1.2.1" + "@emotion/weak-memoize" "^0.3.1" hoist-non-react-statics "^3.3.1" -"@emotion/serialize@^1.1.0": - version "1.1.0" - resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.0.tgz#b1f97b1011b09346a40e9796c37a3397b4ea8ea8" - integrity sha512-F1ZZZW51T/fx+wKbVlwsfchr5q97iW8brAnXmsskz4d0hVB4O3M/SiA3SaeH06x02lSNzkkQv+n3AX3kCXKSFA== +"@emotion/serialize@^1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.2.tgz#017a6e4c9b8a803bd576ff3d52a0ea6fa5a62b51" + integrity sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA== dependencies: - "@emotion/hash" "^0.9.0" - "@emotion/memoize" "^0.8.0" - "@emotion/unitless" "^0.8.0" - "@emotion/utils" "^1.2.0" + "@emotion/hash" "^0.9.1" + "@emotion/memoize" "^0.8.1" + "@emotion/unitless" "^0.8.1" + "@emotion/utils" "^1.2.1" csstype "^3.0.2" -"@emotion/sheet@^1.2.0": - version "1.2.0" - resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.0.tgz#771b1987855839e214fc1741bde43089397f7be5" - integrity sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w== +"@emotion/sheet@^1.2.2": + version "1.2.2" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec" + integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA== -"@emotion/unitless@^0.8.0": - version "0.8.0" - resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db" - integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw== +"@emotion/unitless@^0.8.1": + version "0.8.1" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3" + integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ== -"@emotion/use-insertion-effect-with-fallbacks@^1.0.0": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz#ffadaec35dbb7885bd54de3fa267ab2f860294df" - integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A== +"@emotion/use-insertion-effect-with-fallbacks@^1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963" + integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw== -"@emotion/utils@^1.2.0": - version "1.2.0" - resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561" - integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw== +"@emotion/utils@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.1.tgz#bbab58465738d31ae4cb3dbb6fc00a5991f755e4" + integrity sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg== -"@emotion/weak-memoize@^0.3.0": - version "0.3.0" - resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb" - integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg== +"@emotion/weak-memoize@^0.3.1": + version "0.3.1" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6" + integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww== "@eslint/eslintrc@^0.1.3": version "0.1.3" @@ -16665,10 +16664,10 @@ stylelint@^14.15.0: v8-compile-cache "^2.3.0" write-file-atomic "^4.0.2" -stylis@4.0.13: - version "4.0.13" - resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91" - integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag== +stylis@4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51" + integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw== sudo-block@^1.1.0: version "1.2.0"