From 0614b9bebd1d852fa9f365fdc96b9524a80a3dd9 Mon Sep 17 00:00:00 2001 From: Isaac Hellendag Date: Thu, 26 Sep 2024 14:05:54 -0500 Subject: [PATCH] [ui] Upgrade styled-components to v6 [INTERNAL_BRANCH=dish/plus-styled-components] --- .../dagster-ui/packages/app-oss/package.json | 6 +- .../packages/ui-components/package.json | 6 +- .../packages/ui-components/rollup.config.js | 1 + .../ui-components/src/components/BaseTag.tsx | 11 +- .../src/components/ButtonLink.tsx | 18 +- .../src/components/CollapsibleSection.tsx | 4 +- .../src/components/ConfigTypeSchema.tsx | 7 +- .../src/components/CursorControls.tsx | 3 +- .../src/components/DateRangePickerWrapper.tsx | 8 +- .../ui-components/src/components/Group.tsx | 14 +- .../ui-components/src/components/Icon.tsx | 8 +- .../ui-components/src/components/Menu.tsx | 14 +- .../ui-components/src/components/Radio.tsx | 3 +- .../src/components/RefreshableCountdown.tsx | 4 +- .../ui-components/src/components/Spinner.tsx | 13 +- .../src/components/StyledButton.tsx | 34 +- .../src/components/SubwayDot.tsx | 4 +- .../ui-components/src/components/Suggest.tsx | 4 +- .../ui-components/src/components/Tabs.tsx | 49 +-- .../src/components/TextInput.tsx | 20 +- .../ui-components/src/components/Toaster.tsx | 4 +- .../src/components/UnstyledButton.tsx | 2 +- .../src/components/VirtualizedTable.tsx | 4 +- .../components/__stories__/Tabs.stories.tsx | 2 +- .../__stories__/Toaster.stories.tsx | 115 +++---- .../useSuggestionsForString.stories.tsx | 2 +- .../dagster-ui/packages/ui-core/package.json | 10 +- .../packages/ui-core/src/app/AppProvider.tsx | 68 ++-- .../ui-core/src/app/AppTopNav/AppTopNav.tsx | 16 +- .../ui-core/src/app/GlobalStyleProvider.tsx | 8 +- .../packages/ui-core/src/app/TopNavButton.tsx | 13 +- .../src/assets/AllIndividualEventsButton.tsx | 7 +- .../ui-core/src/assets/AssetEventList.tsx | 8 +- .../src/assets/AssetPageHeader.oss.tsx | 11 +- ...AutomaterializeRequestedPartitionsLink.tsx | 2 +- .../CollapsibleSection.tsx | 2 +- .../PartitionSubsetList.tsx | 2 +- ...VirtualizedAssetPartitionListForDialog.tsx | 2 +- .../assets/asset-checks/AssetChecksTabs.tsx | 2 +- .../code-location/CodeLocationAssetsList.tsx | 7 +- .../CodeLocationSearchableList.tsx | 4 +- .../packages/ui-core/src/gantt/GanttChart.tsx | 3 +- .../packages/ui-core/src/gantt/ZoomSlider.tsx | 4 +- .../ui-core/src/graph/SVGViewport.tsx | 8 +- .../src/instance/backfill/BackfillRow.tsx | 2 +- .../backfill/BackfillStatusTagForPage.tsx | 2 +- .../ui-core/src/instigation/TickHistory.tsx | 7 +- .../launchpad/ConfigEditorConfigPicker.tsx | 7 +- .../ui-core/src/launchpad/LaunchpadTabs.tsx | 6 +- .../packages/ui-core/src/nav/LeftNavItem.tsx | 6 +- .../packages/ui-core/src/nav/RepoNavItem.tsx | 7 +- .../packages/ui-core/src/nav/RepoSelector.tsx | 17 +- .../ui-core/src/nav/RepositoryLink.tsx | 18 +- .../ui-core/src/overview/OverviewSensors.tsx | 5 +- .../ui-core/src/overview/OverviewTabs.tsx | 4 +- .../src/pipelines/SidebarComponents.tsx | 2 +- .../src/pipelines/SidebarOpHelpers.tsx | 4 +- .../src/pipelines/SidebarResourcesSection.tsx | 4 +- .../ui-core/src/runs/RawLogContent.tsx | 14 +- .../ui-core/src/runs/RunStatusPez.tsx | 2 +- .../packages/ui-core/src/runs/RunTimeline.tsx | 8 +- .../ui-core/src/schedules/CronTag.tsx | 2 +- .../ui-core/src/search/SearchDialog.tsx | 2 +- .../src/sensors/SensorPageAutomaterialize.tsx | 2 +- .../src/typeexplorer/TypeWithTooltip.tsx | 2 +- .../src/ui/BaseFilters/FilterDropdown.tsx | 9 +- .../packages/ui-core/src/ui/ClearButton.tsx | 11 +- .../packages/ui-core/src/ui/MenuLink.tsx | 13 +- .../ui-core/src/ui/SectionedLeftNav.tsx | 32 +- .../packages/ui-core/src/ui/SideNavItem.tsx | 10 +- .../packages/ui-core/src/ui/TagActions.tsx | 6 +- .../ui-core/src/ui/VirtualizedTable.tsx | 6 +- .../src/workspace/RepositoryCountTags.tsx | 4 +- .../src/workspace/TableSectionHeader.tsx | 10 +- js_modules/dagster-ui/yarn.lock | 310 +++++++----------- 75 files changed, 500 insertions(+), 571 deletions(-) diff --git a/js_modules/dagster-ui/packages/app-oss/package.json b/js_modules/dagster-ui/packages/app-oss/package.json index b9d8ff82d924a..f6d3fb76365a6 100644 --- a/js_modules/dagster-ui/packages/app-oss/package.json +++ b/js_modules/dagster-ui/packages/app-oss/package.json @@ -12,7 +12,6 @@ "@dagster-io/ui-components": "workspace:*", "@dagster-io/ui-core": "workspace:*", "@rive-app/react-canvas": "^3.0.34", - "@types/styled-components": "^5.1.26", "eslint-config-next": "^13.5.3", "graphql": "^16.8.1", "next": "^14.2.10", @@ -23,7 +22,8 @@ "react-router-dom": "^5.3.0", "react-router-dom-v5-compat": "^6.3.0", "recoil": "^0.7.7", - "styled-components": "^5.3.3", + "styled-components": "^6", + "stylis": "^4", "uuid": "^9.0.0", "validator": "^13.7.0", "web-vitals": "^2.1.3" @@ -33,7 +33,7 @@ "@types/jest": "^29.5.11", "@types/node": "^16.11.20", "@types/react": "^18.3.9", - "@types/react-dom": "^18.3.0", + "@types/react-dom": "^18.3.1", "@types/uuid": "^8.3.4", "@types/validator": "^13", "@types/webpack-bundle-analyzer": "^4", diff --git a/js_modules/dagster-ui/packages/ui-components/package.json b/js_modules/dagster-ui/packages/ui-components/package.json index db6d23b1bd4c7..ed9663e1c969a 100644 --- a/js_modules/dagster-ui/packages/ui-components/package.json +++ b/js_modules/dagster-ui/packages/ui-components/package.json @@ -30,7 +30,8 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-is": "^18.3.1", - "styled-components": "^5.3.3" + "styled-components": "^6", + "stylis": "^4" }, "dependencies": { "@react-hook/resize-observer": "^1.2.6", @@ -77,9 +78,8 @@ "@types/mdx-js__react": "^1", "@types/react": "^18.3.9", "@types/react-dates": "^21.8.0", - "@types/react-dom": "^18.3.0", + "@types/react-dom": "^18.3.1", "@types/react-is": "^18.3.0", - "@types/styled-components": "^5.1.26", "@types/testing-library__jest-dom": "^5.14.2", "babel-jest": "^27.4.6", "babel-loader": "^9.1.2", diff --git a/js_modules/dagster-ui/packages/ui-components/rollup.config.js b/js_modules/dagster-ui/packages/ui-components/rollup.config.js index c66887edc241a..10d98f392aca3 100644 --- a/js_modules/dagster-ui/packages/ui-components/rollup.config.js +++ b/js_modules/dagster-ui/packages/ui-components/rollup.config.js @@ -57,5 +57,6 @@ export default { 'react-dom', 'react-is', 'styled-components', + 'stylis', ], }; diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/BaseTag.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/BaseTag.tsx index fade0b5caf56c..5151dbf7b29f5 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/components/BaseTag.tsx +++ b/js_modules/dagster-ui/packages/ui-components/src/components/BaseTag.tsx @@ -2,8 +2,6 @@ import * as React from 'react'; import styled from 'styled-components'; import {Colors} from './Color'; -import {IconWrapper} from './Icon'; -import {SpinnerWrapper} from './Spinner'; interface Props { fillColor?: string; @@ -86,17 +84,20 @@ export const StyledTag = styled.div` text-overflow: ellipsis; } - > ${IconWrapper}:first-child, > ${SpinnerWrapper}:first-child { + > .iconWrapper:first-child, + > .spinnerWrapper:first-child { margin-right: 4px; margin-left: -4px; } - > ${IconWrapper}:last-child, > ${SpinnerWrapper}:last-child { + > .iconWrapper:last-child, + > .spinnerWrapper:last-child { margin-left: 4px; margin-right: -4px; } - > ${IconWrapper}:first-child:last-child, > ${SpinnerWrapper}:first-child:last-child { + > .iconWrapper:first-child:last-child, + > .spinnerWrapper:first-child:last-child { margin: 0 -4px; } `; diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/ButtonLink.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/ButtonLink.tsx index 193e1545566a3..5e12d576d9781 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/components/ButtonLink.tsx +++ b/js_modules/dagster-ui/packages/ui-components/src/components/ButtonLink.tsx @@ -13,6 +13,13 @@ type Colors = type Underline = 'never' | 'always' | 'hover'; +type Props = Omit, 'color'> & { + color?: Colors; + disabled?: boolean; + underline?: Underline; + children?: React.ReactNode; +}; + const fontColor = (color: Colors) => { if (typeof color === 'string') { return css` @@ -49,14 +56,9 @@ const textDecoration = (underline: Underline) => { } }; -interface Props extends Omit, 'color'> { - color?: Colors; - underline?: Underline; -} - -export const ButtonLink = styled(({color: _color, underline: _underline, ...rest}: Props) => ( - - - - - + + + + + + + ); }; diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/useSuggestionsForString.stories.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/useSuggestionsForString.stories.tsx index aa716cdf47404..6084c1967594c 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/useSuggestionsForString.stories.tsx +++ b/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/useSuggestionsForString.stories.tsx @@ -59,7 +59,7 @@ export const Example = () => { {suggestions.map((suggestion) => (
) => { + onMouseDown={(e: React.MouseEvent) => { e.preventDefault(); setValue(onSelectSuggestion(suggestion)); }} diff --git a/js_modules/dagster-ui/packages/ui-core/package.json b/js_modules/dagster-ui/packages/ui-core/package.json index 9ff120bef1f57..23d40dd9517ab 100644 --- a/js_modules/dagster-ui/packages/ui-core/package.json +++ b/js_modules/dagster-ui/packages/ui-core/package.json @@ -30,9 +30,11 @@ "react-router": "^5.2.1", "react-router-dom": "^5.3.0", "react-router-dom-v5-compat": "^6.3.0", - "styled-components": "^5.3.3" + "styled-components": "^6", + "stylis": "^4" }, "dependencies": { + "@emotion/is-prop-valid": "^1.3.1", "@koale/useworker": "^4.0.2", "@tanstack/react-virtual": "^3.0.1", "@testing-library/react-hooks": "^7.0.2", @@ -122,10 +124,9 @@ "@types/mdx-js__react": "^1", "@types/qs": "^6.9.6", "@types/react": "^18.3.9", - "@types/react-dom": "^18.3.0", + "@types/react-dom": "^18.3.1", "@types/react-router": "^5.1.17", "@types/react-router-dom": "^5.3.3", - "@types/styled-components": "^5.1.26", "@types/testing-library__jest-dom": "^5.14.2", "@types/ws": "^6.0.3", "@typescript-eslint/eslint-plugin": "^8.9.0", @@ -158,7 +159,8 @@ "react-router-dom-v5-compat": "^6.3.0", "resize-observer-polyfill": "^1.5.1", "storybook": "^8.2.7", - "styled-components": "^5.3.3", + "styled-components": "^6", + "stylis": "^4", "ts-node": "9.1.1", "ts-prune": "0.10.3", "typescript": "5.5.4", diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/AppProvider.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/AppProvider.tsx index f92823501710b..284588acd0c7b 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/app/AppProvider.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/app/AppProvider.tsx @@ -2,10 +2,12 @@ import {RetryLink} from '@apollo/client/link/retry'; import {WebSocketLink} from '@apollo/client/link/ws'; import {getMainDefinition, isMutationOperation} from '@apollo/client/utilities'; import {CustomTooltipProvider} from '@dagster-io/ui-components'; +import isPropValid from '@emotion/is-prop-valid'; import * as React from 'react'; import {useContext} from 'react'; import {BrowserRouter} from 'react-router-dom'; import {CompatRouter} from 'react-router-dom-v5-compat'; +import {StyleSheetManager, WebTarget} from 'styled-components'; import {SubscriptionClient} from 'subscriptions-transport-ws'; import {v4 as uuidv4} from 'uuid'; @@ -186,31 +188,33 @@ export const AppProvider = (props: AppProviderProps) => { - - - - - - - - - - - - {props.children} - - - - - - - - - - - - - + + + + + + + + + + + + + {props.children} + + + + + + + + + + + + + + @@ -219,6 +223,20 @@ export const AppProvider = (props: AppProviderProps) => { ); }; +// This implements the default behavior from styled-components v5. +// If we can ensure that all styled-components props are migrated to transient +// props (myProp -> -$myProp), we can remove this function. +// https://styled-components.com/docs/faqs#shouldforwardprop-is-no-longer-provided-by-default +function shouldForwardProp(propName: string, target: WebTarget) { + if (typeof target === 'string') { + // For HTML elements, forward the prop if it is a valid HTML attribute + return isPropValid(propName); + } + + // For other elements, forward all props + return true; +} + export const usePrefixedCacheKey = (key: string) => { const {localCacheIdPrefix} = useContext(AppContext); return `${localCacheIdPrefix}/${key}`; diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNav.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNav.tsx index c7bcbe54c1157..ea41991d8ebef 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNav.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNav.tsx @@ -1,4 +1,4 @@ -import {Box, Colors, Icon, IconWrapper, Tooltip} from '@dagster-io/ui-components'; +import {Box, Colors, Icon, Tooltip} from '@dagster-io/ui-components'; import * as React from 'react'; import {Link, NavLink} from 'react-router-dom'; import {AppTopNavRightOfLogo} from 'shared/app/AppTopNav/AppTopNavRightOfLogo.oss'; @@ -177,18 +177,18 @@ export const TopNavLink = styled(NavLink)` padding: 24px 0; text-decoration: none; - :hover { + &:hover { color: ${Colors.navTextHover()}; text-decoration: none; } - :active, + &:active, &.active { color: ${Colors.navTextSelected()}; text-decoration: none; } - :focus { + &:focus { outline: none !important; color: ${Colors.navTextSelected()}; } @@ -230,19 +230,19 @@ const NavButton = styled.button` background: ${Colors.navBackground()}; display: block; - ${IconWrapper} { + .iconWrapper { transition: background 100ms linear; } - :hover ${IconWrapper} { + &:hover .iconWrapper { background: ${Colors.navTextHover()}; } - :active ${IconWrapper} { + &:active .iconWrapper { background: ${Colors.navTextHover()}; } - :focus { + &:focus { background: ${Colors.navButton()}; } `; diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/GlobalStyleProvider.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/GlobalStyleProvider.tsx index 5465daa552df3..d67a9893c4ba8 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/app/GlobalStyleProvider.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/app/GlobalStyleProvider.tsx @@ -68,16 +68,16 @@ const GlobalStyle = createGlobalStyle` font-variant-ligatures: none; } - :focus-visible { + &:focus-visible { outline: ${Colors.focusRing()} auto 1px; } - :focus:not(:focus-visible) { + &:focus:not(:focus-visible) { outline: none; } - :not(a):focus, - :not(a):focus-visible { + &:not(a):focus, + &:not(a):focus-visible { outline-offset: 1px; } `; diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/TopNavButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/TopNavButton.tsx index 4b11f5e7b876f..a44c901a438d4 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/app/TopNavButton.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/app/TopNavButton.tsx @@ -1,4 +1,4 @@ -import {Box, Colors, FontFamily, IconWrapper, UnstyledButton} from '@dagster-io/ui-components'; +import {Box, Colors, FontFamily, UnstyledButton} from '@dagster-io/ui-components'; import {ReactNode} from 'react'; import styled from 'styled-components'; @@ -11,21 +11,22 @@ export const TopNavButton = styled(UnstyledButton)` align-items: center; justify-content: center; - :hover, - :focus { + &:hover, + &:focus { background-color: ${Colors.navButtonHover()}; } - :focus:not(:active) { + &:focus:not(:active) { outline: ${Colors.focusRing()} auto 1px; } - ${IconWrapper} { + .iconWrapper { background-color: ${Colors.accentWhite()}; transition: background-color 100ms linear; } - :focus ${IconWrapper}, :hover ${IconWrapper} { + &:focus .iconWrapper, + &:hover .iconWrapper { background-color: ${Colors.navTextHover()}; } `; diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AllIndividualEventsButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AllIndividualEventsButton.tsx index d9f420cdc8810..41bf08d15a61c 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AllIndividualEventsButton.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AllIndividualEventsButton.tsx @@ -6,7 +6,6 @@ import { DialogFooter, Group, Icon, - IconWrapper, Mono, Table, } from '@dagster-io/ui-components'; @@ -383,16 +382,16 @@ const DisclosureTriangleButton = styled.button<{$open: boolean}>` background: transparent; outline: none; - ${IconWrapper} { + .iconWrapper { margin: -2px -5px; transform: ${({$open}) => ($open ? 'rotate(0deg)' : 'rotate(-90deg)')}; opacity: 0.25; } - :focus { + &:focus { outline: none; - ${IconWrapper} { + .iconWrapper { background: ${Colors.textDefault()}; opacity: 0.5; } diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventList.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventList.tsx index bc3585f50b4c4..96334fab099fb 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventList.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventList.tsx @@ -137,9 +137,9 @@ export const AssetListRow = styled(Row)<{$focused: boolean}>` cursor: pointer; user-select: none; - :focus, - :active, - :hover { + &:focus, + &:active, + &:hover { outline: none; background: ${Colors.backgroundLight()}; } @@ -147,7 +147,7 @@ export const AssetListRow = styled(Row)<{$focused: boolean}>` p.$focused && `background: ${Colors.backgroundBlue()}; color: ${Colors.textBlue()}; - :hover { + &:hover { background: ${Colors.backgroundBlue()}; } `} diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPageHeader.oss.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPageHeader.oss.tsx index fad106e3612ab..a477816cbbc6b 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPageHeader.oss.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPageHeader.oss.tsx @@ -5,7 +5,6 @@ import { Colors, Heading, Icon, - IconWrapper, MiddleTruncate, PageHeader, Tooltip, @@ -129,15 +128,15 @@ const CopyButton = styled.button` padding: 3px; margin-top: 2px; - :focus { + &:focus { outline: none; } - ${IconWrapper} { + .iconWrapper { transition: background-color 100ms linear; } - :hover ${IconWrapper} { + &:hover .iconWrapper { background-color: ${Colors.accentGrayHover()}; } `; @@ -181,8 +180,8 @@ const BreadcrumbLink = styled(Link)` color: ${Colors.textLight()}; white-space: nowrap; - :hover, - :active { + &:hover, + &:active { color: ${Colors.textLight()}; } `; diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeRequestedPartitionsLink.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeRequestedPartitionsLink.tsx index e0fb1d2fe7905..85ceaa0dad5f4 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeRequestedPartitionsLink.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeRequestedPartitionsLink.tsx @@ -305,7 +305,7 @@ export const RUN_STATUS_AND_PARTITION_KEY = gql` `; const TagLink = styled(Link)` - :focus { + &:focus { outline: none; } `; diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/CollapsibleSection.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/CollapsibleSection.tsx index 9f713fee970fd..068da3e3dfb4d 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/CollapsibleSection.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/CollapsibleSection.tsx @@ -72,7 +72,7 @@ const SectionHeader = styled.button` padding: 0; margin: 0; - :focus { + &:focus { outline: none; } `; diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/PartitionSubsetList.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/PartitionSubsetList.tsx index 1f5527acc6b72..09efcdb99187d 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/PartitionSubsetList.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/PartitionSubsetList.tsx @@ -195,7 +195,7 @@ const PartitionStatusDot = styled.div<{$color: string; $hoverColor: string}>` border-radius: 50%; transition: background-color 100ms linear; - :hover { + &:hover { background-color: ${({$hoverColor}) => $hoverColor}; } `; diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/VirtualizedAssetPartitionListForDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/VirtualizedAssetPartitionListForDialog.tsx index 8299b10bc0fb0..3919e271fbc7e 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/VirtualizedAssetPartitionListForDialog.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/VirtualizedAssetPartitionListForDialog.tsx @@ -138,7 +138,7 @@ const PartitionNameButton = styled.button` align-items: center; gap: 8px; - :focus { + &:focus { outline: none; } `; diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecksTabs.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecksTabs.tsx index bd5380d6d1933..ef635e57f4ad8 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecksTabs.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecksTabs.tsx @@ -9,7 +9,7 @@ interface Props { export const AssetChecksTabs = ({activeTab, onChange}: Props) => { return ( - + onChange(tabId as AssetChecksTabType)}> diff --git a/js_modules/dagster-ui/packages/ui-core/src/code-location/CodeLocationAssetsList.tsx b/js_modules/dagster-ui/packages/ui-core/src/code-location/CodeLocationAssetsList.tsx index 2627ba4aa759e..9f3e54b393327 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/code-location/CodeLocationAssetsList.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/code-location/CodeLocationAssetsList.tsx @@ -2,7 +2,6 @@ import { Box, Colors, Icon, - IconWrapper, NonIdealState, SpinnerWithText, Tag, @@ -219,12 +218,12 @@ const GroupNameRow = (props: GroupNameRowProps) => { const ClickableRow = styled(Row)<{$open: boolean}>` cursor: pointer; - :focus, - :active { + &:focus, + &:active { outline: none; } - ${IconWrapper}[aria-label="arrow_drop_down"] { + .iconWrapper[aria-label='arrow_drop_down'] { transition: transform 100ms linear; ${({$open}) => ($open ? null : `transform: rotate(-90deg);`)} } diff --git a/js_modules/dagster-ui/packages/ui-core/src/code-location/CodeLocationSearchableList.tsx b/js_modules/dagster-ui/packages/ui-core/src/code-location/CodeLocationSearchableList.tsx index 7fdf41ef644ff..d47f71a1a9dc0 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/code-location/CodeLocationSearchableList.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/code-location/CodeLocationSearchableList.tsx @@ -119,8 +119,8 @@ export const SearchableListRow = ({iconName, label, path}: SearchableListRowProp }; const ListLink = styled(Link)` - :active, - :focus { + &:active, + &:focus { outline: none; } `; diff --git a/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChart.tsx b/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChart.tsx index 39b4fcdc0f4e8..32368c27ff387 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChart.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChart.tsx @@ -7,7 +7,6 @@ import { Icon, NonIdealState, Spinner, - SpinnerWrapper, SplitPanelContainer, useViewport, } from '@dagster-io/ui-components'; @@ -823,7 +822,7 @@ const GanttChartContainer = styled.div` filter: brightness(115%); } - ${SpinnerWrapper} { + .spinnerWrapper { display: inline-block; vertical-align: text-bottom; padding-right: 4px; diff --git a/js_modules/dagster-ui/packages/ui-core/src/gantt/ZoomSlider.tsx b/js_modules/dagster-ui/packages/ui-core/src/gantt/ZoomSlider.tsx index 9859314f9537f..241de647fa69a 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/gantt/ZoomSlider.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/gantt/ZoomSlider.tsx @@ -52,6 +52,8 @@ export const ZoomSlider = React.memo((props: {value: number; onChange: (v: numbe ); }); -const ZoomSliderContainer = styled.div` +const ZoomSliderContainer = styled.div<{ + $fillColor: string; +}>` ${SliderStyles} `; diff --git a/js_modules/dagster-ui/packages/ui-core/src/graph/SVGViewport.tsx b/js_modules/dagster-ui/packages/ui-core/src/graph/SVGViewport.tsx index 429441a0ef715..5360530b260a5 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/graph/SVGViewport.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/graph/SVGViewport.tsx @@ -260,16 +260,16 @@ const IconButton = styled.button` position: relative; border-radius: 8px; transition: background 200ms ease-in-out; -} - :hover { + + &:hover { background-color: ${Colors.backgroundLightHover()}; } - :focus { + &:focus { outline: none; } - :active { + &:active { background-color: ${Colors.backgroundLight()}; } `; diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRow.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRow.tsx index 79e89aa81cbd3..392385df56fa9 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRow.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRow.tsx @@ -283,7 +283,7 @@ const TagButton = styled.button` padding: 0; margin: 0; - :focus { + &:focus { outline: none; } `; diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillStatusTagForPage.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillStatusTagForPage.tsx index 09e087bee92ed..020e138da2bb2 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillStatusTagForPage.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillStatusTagForPage.tsx @@ -55,7 +55,7 @@ const TagButton = styled.button` padding: 0; margin: 0; - :focus { + &:focus { outline: none; } `; diff --git a/js_modules/dagster-ui/packages/ui-core/src/instigation/TickHistory.tsx b/js_modules/dagster-ui/packages/ui-core/src/instigation/TickHistory.tsx index 4b65d1891a343..5aab55c8c05f7 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/instigation/TickHistory.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/instigation/TickHistory.tsx @@ -9,7 +9,6 @@ import { CursorHistoryControls, FontFamily, Icon, - IconWrapper, Menu, MenuItem, MiddleTruncate, @@ -601,16 +600,16 @@ const CopyButton = styled.button` margin: -6px; outline: none; - ${IconWrapper} { + .iconWrapper { background-color: ${Colors.accentGray()}; transition: background-color 100ms; } - :hover ${IconWrapper} { + &:hover .iconWrapper { background-color: ${Colors.accentGrayHover()}; } - :focus ${IconWrapper} { + &:focus .iconWrapper { background-color: ${Colors.linkDefault()}; } `; diff --git a/js_modules/dagster-ui/packages/ui-core/src/launchpad/ConfigEditorConfigPicker.tsx b/js_modules/dagster-ui/packages/ui-core/src/launchpad/ConfigEditorConfigPicker.tsx index 40d453f9c8a05..fba656daedcd2 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/launchpad/ConfigEditorConfigPicker.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/launchpad/ConfigEditorConfigPicker.tsx @@ -5,7 +5,6 @@ import { Button, Colors, Icon, - IconWrapper, Menu, MenuDivider, MenuItem, @@ -445,12 +444,12 @@ export const SortButton = styled.button` border-radius: 4px; transition: background-color 100ms; - :focus { + &:focus { background-color: ${Colors.backgroundLighterHover()}; outline: none; } - :hover { - ${IconWrapper} { + &:hover { + .iconWrapper { background-color: ${Colors.backgroundLight()}; } } diff --git a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadTabs.tsx b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadTabs.tsx index 069745d2e8446..0f18a3792eef4 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadTabs.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadTabs.tsx @@ -1,4 +1,4 @@ -import {Box, ButtonLink, Colors, Icon, IconWrapper} from '@dagster-io/ui-components'; +import {Box, ButtonLink, Colors, Icon} from '@dagster-io/ui-components'; import * as React from 'react'; import styled, {css} from 'styled-components'; @@ -239,11 +239,11 @@ const RemoveButton = styled.button` cursor: pointer; padding: 0; - ${IconWrapper} { + .iconWrapper { transition: background-color 100ms; } - &:hover ${IconWrapper} { + &:hover .iconWrapper { background-color: ${Colors.accentPrimaryHover()}; } `; diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/LeftNavItem.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/LeftNavItem.tsx index df739a14ca3c0..2131314d42d31 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/nav/LeftNavItem.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/nav/LeftNavItem.tsx @@ -221,9 +221,9 @@ const SensorScheduleDialogButton = styled.button` border: 0; cursor: pointer; - :focus, - :active, - :hover { + &:focus, + &:active, + &:hover { outline: none; } `; diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/RepoNavItem.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/RepoNavItem.tsx index 9dbf021527916..886c783fdedc3 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/nav/RepoNavItem.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/nav/RepoNavItem.tsx @@ -7,7 +7,6 @@ import { DialogHeader, Group, Icon, - IconWrapper, Spinner, Tooltip, } from '@dagster-io/ui-components'; @@ -198,15 +197,15 @@ const ReloadButton = styled.button` padding: 8px; margin: -8px; - :focus:not(:focus-visible) { + &:focus:not(:focus-visible) { outline: none; } - & ${IconWrapper} { + & .iconWrapper { transition: color 0.1s ease-in-out; } - :hover ${IconWrapper} { + &:hover .iconWrapper { color: ${Colors.accentBlue()}; } `; diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/RepoSelector.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/RepoSelector.tsx index 12ae651ef8e62..7564a0318ae19 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/nav/RepoSelector.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/nav/RepoSelector.tsx @@ -4,7 +4,6 @@ import { Checkbox, Colors, Icon, - IconWrapper, Spinner, Table, Tooltip, @@ -129,12 +128,12 @@ const RepoLabel = styled.label` user-select: none; white-space: nowrap; - :focus, - :active { + &:focus, + &:active { outline: none; } - :hover { + &:hover { filter: opacity(0.8); } `; @@ -188,25 +187,25 @@ const ReloadButtonInner = styled.button` margin: -6px; outline: none; - :disabled { + &:disabled { cursor: default; } - :disabled ${IconWrapper} { + &:disabled .iconWrapper { background-color: ${Colors.textDisabled()}; transition: background-color 100ms; } - ${IconWrapper} { + .iconWrapper { background-color: ${Colors.textLight()}; transition: background-color 100ms; } - :hover:not(:disabled) ${IconWrapper} { + &:hover:not(:disabled) .iconWrapper { background-color: ${Colors.textLighter()}; } - :focus ${IconWrapper} { + &:focus .iconWrapper { background-color: ${Colors.linkDefault()}; } `; diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/RepositoryLink.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/RepositoryLink.tsx index 1e4f42a30f9f7..1a76fc9f24d04 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/nav/RepositoryLink.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/nav/RepositoryLink.tsx @@ -1,12 +1,4 @@ -import { - Box, - Colors, - Icon, - IconWrapper, - MiddleTruncate, - Spinner, - Tooltip, -} from '@dagster-io/ui-components'; +import {Box, Colors, Icon, MiddleTruncate, Spinner, Tooltip} from '@dagster-io/ui-components'; import {Link} from 'react-router-dom'; import styled from 'styled-components'; @@ -95,20 +87,20 @@ const StyledButton = styled.button` padding: 0; margin: 0; - :disabled { + &:disabled { cursor: default; } - :focus:not(:focus-visible) { + &:focus:not(:focus-visible) { outline: none; } - & ${IconWrapper} { + & .iconWrapper { display: block; transition: color 100ms linear; } - :hover ${IconWrapper} { + &:hover .iconWrapper { color: ${Colors.accentBlue()}; } `; diff --git a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSensors.tsx b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSensors.tsx index e62362c0b88a3..2e5ec5d1dd472 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSensors.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSensors.tsx @@ -285,6 +285,9 @@ export const OverviewSensors = () => { }; const showSearchSpinner = queryLoading && !data; + const sensorDaemonStatus = data?.instance.daemonHealth.allDaemonStatuses.find( + (status) => status.daemonType === 'SENSOR', + ); return ( <> @@ -341,7 +344,7 @@ export const OverviewSensors = () => { ) : ( <> diff --git a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewTabs.tsx b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewTabs.tsx index 6fe7e563a27de..4955214c43e60 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewTabs.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewTabs.tsx @@ -25,9 +25,9 @@ export const OverviewTabs = >(props: Props - {enableAssetHealthOverviewPreview && ( + {enableAssetHealthOverviewPreview ? ( - )} + ) : null} {automaterializeSensorsFlagState === 'has-global-amp' ? ( { return ( <> - + {showScrollToTop ? ( { ) : null} - {location ? {location} : null} + {location ? {location} : null} ); }); @@ -350,16 +350,16 @@ const ContentContainer = styled.div` background-color: ${Colors.backgroundLight()}; `; -const FileContainer = styled.div` +const FileContainer = styled.div<{$isVisible: boolean}>` flex: 1; height: 100%; position: relative; display: flex; flex-direction: column; - ${({isVisible}: {isVisible: boolean}) => (isVisible ? null : 'display: none;')} + ${({$isVisible}) => ($isVisible ? null : 'display: none;')} `; -const FileFooter = styled.div` +const FileFooter = styled.div<{$isVisible: boolean}>` display: flex; flex-direction: row; align-items: center; @@ -369,7 +369,7 @@ const FileFooter = styled.div` color: ${Colors.textLight()}; padding: 2px 5px; font-size: 0.85em; - ${({isVisible}: {isVisible: boolean}) => (isVisible ? null : 'display: none;')} + ${({$isVisible}) => ($isVisible ? null : 'display: none;')} `; const FileContent = styled.div` @@ -434,7 +434,7 @@ const ScrollToTop = styled.button` cursor: pointer; transition: background-color 100ms linear; - :hover { + &:hover { background-color: ${Colors.backgroundLighterHover()}; border-color: ${Colors.borderHover()}; } diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusPez.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusPez.tsx index c872313221cc8..6d607cf1d0850 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusPez.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusPez.tsx @@ -126,7 +126,7 @@ const SummaryContainer = styled.div` white-space: nowrap; padding: 4px 8px 8px; - :empty { + &:empty { display: none; } `; diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunTimeline.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunTimeline.tsx index 558f4173e8edc..d5e19eeeaf4cc 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunTimeline.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunTimeline.tsx @@ -530,7 +530,7 @@ const DividerLabels = styled.div` width: 100%; overflow: hidden; - :first-child { + &:first-child { box-shadow: inset 1px 0 0 ${Colors.keylineDefault()}, inset -1px 0 0 ${Colors.keylineDefault()}; @@ -542,7 +542,7 @@ const DateLabel = styled.div` padding: 8px 0; white-space: nowrap; - :not(:first-child) { + &:not(:first-child) { box-shadow: inset 1px 0 0 ${Colors.keylineDefault()}; } `; @@ -740,7 +740,7 @@ export const TimelineRowContainer = styled.div.attrs(({$height, $start overflow: hidden; transition: background-color 100ms linear; - :hover { + &:hover { background-color: ${Colors.backgroundDefaultHover()}; } `; @@ -784,7 +784,7 @@ export const RunChunk = styled.div` opacity 200ms linear, width 200ms ease-in-out; - :hover { + &:hover { opacity: 0.7; } .chunk-popover-target { diff --git a/js_modules/dagster-ui/packages/ui-core/src/schedules/CronTag.tsx b/js_modules/dagster-ui/packages/ui-core/src/schedules/CronTag.tsx index a9032489b0cf9..27f3c982b1fe2 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/schedules/CronTag.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/schedules/CronTag.tsx @@ -53,7 +53,7 @@ const Container = styled.div` .bp5-popover-target { max-width: 100%; - :focus { + &:focus { outline: none; } } diff --git a/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx index 5f50a72c81fed..e9855337ff37c 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx @@ -260,7 +260,7 @@ export const SearchBox = styled.div` padding: 12px 20px 12px 12px; transition: all 100ms linear; - :hover { + &:hover { box-shadow: ${({$hasQueryString}) => $hasQueryString ? Colors.keylineDefault() : Colors.borderHover()} 0 0 0 1px inset; diff --git a/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorPageAutomaterialize.tsx b/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorPageAutomaterialize.tsx index 747d5e3600db5..c5c86a569183d 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorPageAutomaterialize.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorPageAutomaterialize.tsx @@ -167,7 +167,7 @@ export const SensorPageAutomaterialize = (props: Props) => { return ( <> - + Evaluation timeline diff --git a/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeWithTooltip.tsx b/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeWithTooltip.tsx index 5ab6582a83de1..4e0c094cd8d7f 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeWithTooltip.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeWithTooltip.tsx @@ -36,7 +36,7 @@ export const DAGSTER_TYPE_WITH_TOOLTIP_FRAGMENT = gql` `; const TypeLink = styled(Link)` - :hover { + &:hover { text-decoration: none; } `; diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/BaseFilters/FilterDropdown.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/BaseFilters/FilterDropdown.tsx index 48f72748e91c3..d4e7d75d923a1 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ui/BaseFilters/FilterDropdown.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ui/BaseFilters/FilterDropdown.tsx @@ -3,7 +3,6 @@ import { Button, Colors, Icon, - IconWrapper, Menu, MenuItem, Popover, @@ -381,7 +380,7 @@ export const FilterDropdownButton = React.memo(({filters, label}: FilterDropdown }); const DropdownMenuContainer = styled.div` - ${IconWrapper} { + .iconWrapper { margin-left: 0 !important; } `; @@ -400,9 +399,9 @@ const TextInputWrapper = styled.div` padding: 12px 16px; &, - :focus, - :active, - :hover { + &:focus, + &:active, + &:hover { box-shadow: none; background-color: ${Colors.popoverBackground()}; } diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/ClearButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/ClearButton.tsx index 415ad954c9e21..f0b6cda9fe5e0 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ui/ClearButton.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ui/ClearButton.tsx @@ -1,4 +1,4 @@ -import {Colors, IconWrapper} from '@dagster-io/ui-components'; +import {Colors} from '@dagster-io/ui-components'; import styled from 'styled-components'; export const ClearButton = styled.button` @@ -8,20 +8,21 @@ export const ClearButton = styled.button` margin: 0 -2px 0 0; padding: 2px; - ${IconWrapper} { + .iconWrapper { background-color: ${Colors.accentGray()}; transition: background-color 100ms linear; } - :hover ${IconWrapper}, :focus ${IconWrapper} { + &:hover .iconWrapper, + &:focus .iconWrapper { background-color: ${Colors.accentGrayHover()}; } - :active ${IconWrapper} { + &:active .iconWrapper { background-color: ${Colors.textDefault()}; } - :focus { + &:focus { outline: none; } `; diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/MenuLink.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/MenuLink.tsx index 975fc336b43d1..289bbd0262649 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ui/MenuLink.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ui/MenuLink.tsx @@ -1,11 +1,4 @@ -import { - Box, - Colors, - CommonMenuItemProps, - IconWrapper, - MenuItem, - iconWithColor, -} from '@dagster-io/ui-components'; +import {Box, Colors, CommonMenuItemProps, MenuItem, iconWithColor} from '@dagster-io/ui-components'; import * as React from 'react'; import {Link, LinkProps} from 'react-router-dom'; import styled from 'styled-components'; @@ -51,11 +44,11 @@ const StyledMenuLink = styled(Link)` * Use margin instead of align-items: center because the contents of the menu item may wrap * in unusual circumstances. */ - ${IconWrapper} { + .iconWrapper { margin-top: 2px; } - ${IconWrapper}:first-child { + .iconWrapper:first-child { margin-left: -4px; } diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/SectionedLeftNav.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/SectionedLeftNav.tsx index 3952f2d14b291..eaa2b54a57a48 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ui/SectionedLeftNav.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ui/SectionedLeftNav.tsx @@ -1,12 +1,4 @@ -import { - BaseTag, - Box, - Colors, - Icon, - IconWrapper, - MiddleTruncate, - StyledTag, -} from '@dagster-io/ui-components'; +import {BaseTag, Box, Colors, Icon, MiddleTruncate, StyledTag} from '@dagster-io/ui-components'; import {useVirtualizer} from '@tanstack/react-virtual'; import * as React from 'react'; import {useRouteMatch} from 'react-router-dom'; @@ -507,31 +499,31 @@ const SectionHeader = styled.button<{ box-shadow: inset 0px 1px 0 ${Colors.keylineDefault()}, inset 0px -1px 0 ${Colors.keylineDefault()}; - :disabled { + &:disabled { cursor: default; } - :hover, - :active { + &:hover, + &:active { background-color: ${Colors.backgroundLightHover()}; } - :disabled:hover, - :disabled:active { + &:disabled:hover, + &:disabled:active { background-color: ${Colors.backgroundDisabled()}; } - :focus, - :active { + &:focus, + &:active { outline: none; } - ${IconWrapper}[aria-label="arrow_drop_down"] { + .iconWrapper[aria-label="arrow_drop_down"] { transition: transform 100ms linear; ${({$open}) => ($open ? null : `transform: rotate(-90deg);`)} } - :disabled ${IconWrapper} { + &:disabled .iconWrapper { background-color: ${Colors.textDisabled()}; } @@ -540,11 +532,11 @@ const SectionHeader = styled.button<{ margin-left: 6px; } - :not(:disabled) ${StyledTag} { + &:not(:disabled) ${StyledTag} { cursor: pointer; } - :disabled ${StyledTag} { + &:disabled ${StyledTag} { color: ${Colors.textDisabled()}; } }`; diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/SideNavItem.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/SideNavItem.tsx index 126da6c56a51f..a529d6d17ac7e 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ui/SideNavItem.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ui/SideNavItem.tsx @@ -1,4 +1,4 @@ -import {Box, Colors, IconWrapper, Tooltip, UnstyledButton} from '@dagster-io/ui-components'; +import {Box, Colors, Tooltip, UnstyledButton} from '@dagster-io/ui-components'; import {Link} from 'react-router-dom'; import styled, {css} from 'styled-components'; @@ -76,14 +76,14 @@ const sharedSideNavItemStyle = css<{$active: boolean}>` user-select: none; width: 100%; - :focus { + &:focus { outline: none; background-color: ${({$active}) => $active ? Colors.backgroundBlue() : Colors.backgroundLight()}; } - :hover, - :active { + &:hover, + &:active { background-color: ${({$active}) => $active ? Colors.backgroundBlue() : Colors.backgroundLightHover()}; color: ${({$active}) => ($active ? Colors.textBlue() : Colors.textDefault())}; @@ -91,7 +91,7 @@ const sharedSideNavItemStyle = css<{$active: boolean}>` } .iconAndLabel { - ${IconWrapper} { + .iconWrapper { background-color: ${({$active}) => ($active ? Colors.textBlue() : Colors.textDefault())}; } } diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/TagActions.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/TagActions.tsx index c6411049ac7e5..493f3148bbbe1 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ui/TagActions.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ui/TagActions.tsx @@ -71,11 +71,11 @@ const TagButtonSharedStyles = css` opacity: 0.85; transition: opacity 50ms linear; - :not(:last-child) { + &:not(:last-child) { box-shadow: -1px 0 0 inset ${Colors.borderHover()}; } - :focus { + &:focus { outline: none; } `; @@ -83,7 +83,7 @@ const TagButtonSharedStyles = css` const TagButton = styled.button` ${TagButtonSharedStyles} - :hover { + &:hover { opacity: 1; } `; diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/VirtualizedTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/VirtualizedTable.tsx index d29c096b1b7f2..c5c87886ac7e8 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ui/VirtualizedTable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ui/VirtualizedTable.tsx @@ -42,7 +42,7 @@ export const HeaderCell = ({ ...rest }: React.ComponentProps) => { // no text select - const clickStyle = onClick ? {cursor: 'pointer', userSelect: 'none'} : {}; + const clickStyle = onClick ? {cursor: 'pointer', userSelect: 'none' as const} : {}; return ( ` height: ${SECTION_HEADER_HEIGHT}px; text-align: left; - :focus, - :active { + &:focus, + &:active { outline: none; } - :hover { + &:hover { background-color: ${Colors.backgroundLightHover()}; } - ${IconWrapper}[aria-label="arrow_drop_down"] { + .iconWrapper[aria-label='arrow_drop_down'] { transition: transform 100ms linear; ${({$open}) => ($open ? null : `transform: rotate(-90deg);`)} } diff --git a/js_modules/dagster-ui/yarn.lock b/js_modules/dagster-ui/yarn.lock index 31c77e01dd912..cc614aadaf3b3 100644 --- a/js_modules/dagster-ui/yarn.lock +++ b/js_modules/dagster-ui/yarn.lock @@ -353,18 +353,6 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.25.6": - version: 7.25.6 - resolution: "@babel/generator@npm:7.25.6" - dependencies: - "@babel/types": "npm:^7.25.6" - "@jridgewell/gen-mapping": "npm:^0.3.5" - "@jridgewell/trace-mapping": "npm:^0.3.25" - jsesc: "npm:^2.5.1" - checksum: 10/541e4fbb6ea7806f44232d70f25bf09dee9a57fe43d559e375536870ca5261ebb4647fec3af40dcbb3325ea2a49aff040e12a4e6f88609eaa88f10c4e27e31f8 - languageName: node - linkType: hard - "@babel/helper-annotate-as-pure@npm:^7.18.6, @babel/helper-annotate-as-pure@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-annotate-as-pure@npm:7.22.5" @@ -640,16 +628,6 @@ __metadata: languageName: node linkType: hard -"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.24.7": - version: 7.24.7 - resolution: "@babel/helper-module-imports@npm:7.24.7" - dependencies: - "@babel/traverse": "npm:^7.24.7" - "@babel/types": "npm:^7.24.7" - checksum: 10/df8bfb2bb18413aa151ecd63b7d5deb0eec102f924f9de6bc08022ced7ed8ca7fed914562d2f6fa5b59b74a5d6e255dc35612b2bc3b8abf361e13f61b3704770 - languageName: node - linkType: hard - "@babel/helper-module-imports@npm:^7.10.4, @babel/helper-module-imports@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-module-imports@npm:7.22.5" @@ -668,6 +646,16 @@ __metadata: languageName: node linkType: hard +"@babel/helper-module-imports@npm:^7.24.7": + version: 7.24.7 + resolution: "@babel/helper-module-imports@npm:7.24.7" + dependencies: + "@babel/traverse": "npm:^7.24.7" + "@babel/types": "npm:^7.24.7" + checksum: 10/df8bfb2bb18413aa151ecd63b7d5deb0eec102f924f9de6bc08022ced7ed8ca7fed914562d2f6fa5b59b74a5d6e255dc35612b2bc3b8abf361e13f61b3704770 + languageName: node + linkType: hard + "@babel/helper-module-transforms@npm:^7.22.5, @babel/helper-module-transforms@npm:^7.22.9": version: 7.22.9 resolution: "@babel/helper-module-transforms@npm:7.22.9" @@ -874,13 +862,6 @@ __metadata: languageName: node linkType: hard -"@babel/helper-string-parser@npm:^7.24.8": - version: 7.24.8 - resolution: "@babel/helper-string-parser@npm:7.24.8" - checksum: 10/6d1bf8f27dd725ce02bdc6dffca3c95fb9ab8a06adc2edbd9c1c9d68500274230d1a609025833ed81981eff560045b6b38f7b4c6fb1ab19fc90e5004e3932535 - languageName: node - linkType: hard - "@babel/helper-validator-identifier@npm:^7.22.20": version: 7.22.20 resolution: "@babel/helper-validator-identifier@npm:7.22.20" @@ -1106,17 +1087,6 @@ __metadata: languageName: node linkType: hard -"@babel/parser@npm:^7.25.0, @babel/parser@npm:^7.25.6": - version: 7.25.6 - resolution: "@babel/parser@npm:7.25.6" - dependencies: - "@babel/types": "npm:^7.25.6" - bin: - parser: ./bin/babel-parser.js - checksum: 10/830aab72116aa14eb8d61bfa8f9d69fc8f3a43d909ce993cb4350ae14d3af1a2f740a54410a22d821c48a253263643dfecbc094f9608e6a70ce9ff3c0bbfe91a - languageName: node - linkType: hard - "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.24.7": version: 7.24.7 resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.24.7" @@ -3301,17 +3271,6 @@ __metadata: languageName: node linkType: hard -"@babel/template@npm:^7.25.0": - version: 7.25.0 - resolution: "@babel/template@npm:7.25.0" - dependencies: - "@babel/code-frame": "npm:^7.24.7" - "@babel/parser": "npm:^7.25.0" - "@babel/types": "npm:^7.25.0" - checksum: 10/07ebecf6db8b28244b7397628e09c99e7a317b959b926d90455c7253c88df3677a5a32d1501d9749fe292a263ff51a4b6b5385bcabd5dadd3a48036f4d4949e0 - languageName: node - linkType: hard - "@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.14.0, @babel/traverse@npm:^7.16.8, @babel/traverse@npm:^7.22.10, @babel/traverse@npm:^7.22.6, @babel/traverse@npm:^7.22.8": version: 7.23.2 resolution: "@babel/traverse@npm:7.23.2" @@ -3366,21 +3325,6 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.4.5": - version: 7.25.6 - resolution: "@babel/traverse@npm:7.25.6" - dependencies: - "@babel/code-frame": "npm:^7.24.7" - "@babel/generator": "npm:^7.25.6" - "@babel/parser": "npm:^7.25.6" - "@babel/template": "npm:^7.25.0" - "@babel/types": "npm:^7.25.6" - debug: "npm:^4.3.1" - globals: "npm:^11.1.0" - checksum: 10/de75a918299bc27a44ec973e3f2fa8c7902bbd67bd5d39a0be656f3c1127f33ebc79c12696fbc8170a0b0e1072a966d4a2126578d7ea2e241b0aeb5d16edc738 - languageName: node - linkType: hard - "@babel/types@npm:^7.0.0, @babel/types@npm:^7.1.6, @babel/types@npm:^7.16.8, @babel/types@npm:^7.18.13, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.5, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3": version: 7.22.5 resolution: "@babel/types@npm:7.22.5" @@ -3447,17 +3391,6 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.25.0, @babel/types@npm:^7.25.6": - version: 7.25.6 - resolution: "@babel/types@npm:7.25.6" - dependencies: - "@babel/helper-string-parser": "npm:^7.24.8" - "@babel/helper-validator-identifier": "npm:^7.24.7" - to-fast-properties: "npm:^2.0.0" - checksum: 10/7b54665e1b51f525fe0f451efdd9fe7a4a6dfba3fd4956c3530bc77336b66ffe3d78c093796ed044119b5d213176af7cf326f317a2057c538d575c6cefcb3562 - languageName: node - linkType: hard - "@base2/pretty-print-object@npm:1.0.1": version: 1.0.1 resolution: "@base2/pretty-print-object@npm:1.0.1" @@ -3592,8 +3525,7 @@ __metadata: "@types/jest": "npm:^29.5.11" "@types/node": "npm:^16.11.20" "@types/react": "npm:^18.3.9" - "@types/react-dom": "npm:^18.3.0" - "@types/styled-components": "npm:^5.1.26" + "@types/react-dom": "npm:^18.3.1" "@types/uuid": "npm:^8.3.4" "@types/validator": "npm:^13" "@types/webpack-bundle-analyzer": "npm:^4" @@ -3617,7 +3549,8 @@ __metadata: react-router-dom: "npm:^5.3.0" react-router-dom-v5-compat: "npm:^6.3.0" recoil: "npm:^0.7.7" - styled-components: "npm:^5.3.3" + styled-components: "npm:^6" + stylis: "npm:^4" typescript: "npm:5.5.4" uuid: "npm:^9.0.0" validator: "npm:^13.7.0" @@ -3706,9 +3639,8 @@ __metadata: "@types/mdx-js__react": "npm:^1" "@types/react": "npm:^18.3.9" "@types/react-dates": "npm:^21.8.0" - "@types/react-dom": "npm:^18.3.0" + "@types/react-dom": "npm:^18.3.1" "@types/react-is": "npm:^18.3.0" - "@types/styled-components": "npm:^5.1.26" "@types/testing-library__jest-dom": "npm:^5.14.2" amator: "npm:^1.1.0" babel-jest: "npm:^27.4.6" @@ -3742,7 +3674,8 @@ __metadata: react: ^18.3.1 react-dom: ^18.3.1 react-is: ^18.3.1 - styled-components: ^5.3.3 + styled-components: ^6 + stylis: ^4 languageName: unknown linkType: soft @@ -3767,6 +3700,7 @@ __metadata: "@chromatic-com/storybook": "npm:^1.6.1" "@dagster-io/eslint-config": "workspace:*" "@dagster-io/ui-components": "workspace:*" + "@emotion/is-prop-valid": "npm:^1.3.1" "@graphql-codegen/add": "npm:^5.0.2" "@graphql-codegen/cli": "npm:^5.0.2" "@graphql-codegen/near-operation-file-preset": "npm:^3.0.0" @@ -3800,10 +3734,9 @@ __metadata: "@types/mdx-js__react": "npm:^1" "@types/qs": "npm:^6.9.6" "@types/react": "npm:^18.3.9" - "@types/react-dom": "npm:^18.3.0" + "@types/react-dom": "npm:^18.3.1" "@types/react-router": "npm:^5.1.17" "@types/react-router-dom": "npm:^5.3.3" - "@types/styled-components": "npm:^5.1.26" "@types/testing-library__jest-dom": "npm:^5.14.2" "@types/ws": "npm:^6.0.3" "@typescript-eslint/eslint-plugin": "npm:^8.9.0" @@ -3870,7 +3803,8 @@ __metadata: resize-observer-polyfill: "npm:^1.5.1" storybook: "npm:^8.2.7" strip-markdown: "npm:^6.0.0" - styled-components: "npm:^5.3.3" + styled-components: "npm:^6" + stylis: "npm:^4" subscriptions-transport-ws: "npm:^0.9.15" ts-node: "npm:9.1.1" ts-prune: "npm:0.10.3" @@ -3889,7 +3823,8 @@ __metadata: react-router: ^5.2.1 react-router-dom: ^5.3.0 react-router-dom-v5-compat: ^6.3.0 - styled-components: ^5.3.3 + styled-components: ^6 + stylis: ^4 languageName: unknown linkType: soft @@ -3909,7 +3844,16 @@ __metadata: languageName: node linkType: hard -"@emotion/is-prop-valid@npm:^1.1.0": +"@emotion/is-prop-valid@npm:1.2.2": + version: 1.2.2 + resolution: "@emotion/is-prop-valid@npm:1.2.2" + dependencies: + "@emotion/memoize": "npm:^0.8.1" + checksum: 10/0fa3960abfbe845d40cc230ab8c9408e1f33d3c03b321980359911c7212133cdcb0344d249e9dab23342b304567eece7a10ec44b986f7230e0640ba00049dceb + languageName: node + linkType: hard + +"@emotion/is-prop-valid@npm:^1.3.1": version: 1.3.1 resolution: "@emotion/is-prop-valid@npm:1.3.1" dependencies: @@ -3918,6 +3862,13 @@ __metadata: languageName: node linkType: hard +"@emotion/memoize@npm:^0.8.1": + version: 0.8.1 + resolution: "@emotion/memoize@npm:0.8.1" + checksum: 10/a19cc01a29fcc97514948eaab4dc34d8272e934466ed87c07f157887406bc318000c69ae6f813a9001c6a225364df04249842a50e692ef7a9873335fbcc141b0 + languageName: node + linkType: hard + "@emotion/memoize@npm:^0.9.0": version: 0.9.0 resolution: "@emotion/memoize@npm:0.9.0" @@ -3925,17 +3876,10 @@ __metadata: languageName: node linkType: hard -"@emotion/stylis@npm:^0.8.4": - version: 0.8.5 - resolution: "@emotion/stylis@npm:0.8.5" - checksum: 10/ceaa673457f501a393cb52873b2bc34dbe35ef0fb8faa4b943d73ecbbb42bc3cea53b87cbf482038b7b9b1f95859be3d8b58d508422b4d15aec5b62314cc3c1e - languageName: node - linkType: hard - -"@emotion/unitless@npm:^0.7.4": - version: 0.7.5 - resolution: "@emotion/unitless@npm:0.7.5" - checksum: 10/f976e5345b53fae9414a7b2e7a949aa6b52f8bdbcc84458b1ddc0729e77ba1d1dfdff9960e0da60183877873d3a631fa24d9695dd714ed94bcd3ba5196586a6b +"@emotion/unitless@npm:0.8.1": + version: 0.8.1 + resolution: "@emotion/unitless@npm:0.8.1" + checksum: 10/918f73c46ac0b7161e3c341cc07d651ce87e31ab1695e74b12adb7da6bb98dfbff8c69cf68a4e40d9eb3d820ca055dc1267aeb3007927ce88f98b885bf729b63 languageName: node linkType: hard @@ -7263,16 +7207,6 @@ __metadata: languageName: node linkType: hard -"@types/hoist-non-react-statics@npm:*": - version: 3.3.5 - resolution: "@types/hoist-non-react-statics@npm:3.3.5" - dependencies: - "@types/react": "npm:*" - hoist-non-react-statics: "npm:^3.3.0" - checksum: 10/b645b062a20cce6ab1245ada8274051d8e2e0b2ee5c6bd58215281d0ec6dae2f26631af4e2e7c8abe238cdcee73fcaededc429eef569e70908f82d0cc0ea31d7 - languageName: node - linkType: hard - "@types/html-minifier-terser@npm:^6.0.0": version: 6.1.0 resolution: "@types/html-minifier-terser@npm:6.1.0" @@ -7511,7 +7445,7 @@ __metadata: languageName: node linkType: hard -"@types/react-dom@npm:>=16.9.0, @types/react-dom@npm:^18.3.0": +"@types/react-dom@npm:>=16.9.0": version: 18.3.0 resolution: "@types/react-dom@npm:18.3.0" dependencies: @@ -7520,6 +7454,15 @@ __metadata: languageName: node linkType: hard +"@types/react-dom@npm:^18.3.1": + version: 18.3.1 + resolution: "@types/react-dom@npm:18.3.1" + dependencies: + "@types/react": "npm:*" + checksum: 10/33f9ba79b26641ddf00a8699c30066b7e3573ab254e97475bf08f82fab83a6d3ce8d4ebad86afeb49bb8df3374390a9ba93125cece33badc4b3e8f7eac3c84d8 + languageName: node + linkType: hard + "@types/react-is@npm:^18.3.0": version: 18.3.0 resolution: "@types/react-is@npm:18.3.0" @@ -7568,23 +7511,13 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:*, @types/react@npm:>=16.9.0, @types/react@npm:^18.3.9": - version: 18.3.9 - resolution: "@types/react@npm:18.3.9" - dependencies: - "@types/prop-types": "npm:*" - csstype: "npm:^3.0.2" - checksum: 10/d1321e874e6523b0a944d4ce514c071cbe44501b04591e17c0b265c9a03fb3e4486337ae1bec74541b72a41f34beef157342205dd07b31d116f4d06fa39cf32f - languageName: node - linkType: hard - -"@types/react@npm:^16.8.0 || ^17.0.0 || ^18.0.0": - version: 18.3.3 - resolution: "@types/react@npm:18.3.3" +"@types/react@npm:*, @types/react@npm:>=16.9.0, @types/react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, @types/react@npm:^18.3.9": + version: 18.3.12 + resolution: "@types/react@npm:18.3.12" dependencies: "@types/prop-types": "npm:*" csstype: "npm:^3.0.2" - checksum: 10/68e203b7f1f91d6cf21f33fc7af9d6d228035a26c83f514981e54aa3da695d0ec6af10c277c6336de1dd76c4adbe9563f3a21f80c4462000f41e5f370b46e96c + checksum: 10/c9bbdfeacd5347d2240e0d2cb5336bc57dbc1b9ff557b6c4024b49df83419e4955553518169d3736039f1b62608e15b35762a6c03d49bd86e33add4b43b19033 languageName: node linkType: hard @@ -7639,14 +7572,10 @@ __metadata: languageName: node linkType: hard -"@types/styled-components@npm:^5.1.26": - version: 5.1.34 - resolution: "@types/styled-components@npm:5.1.34" - dependencies: - "@types/hoist-non-react-statics": "npm:*" - "@types/react": "npm:*" - csstype: "npm:^3.0.2" - checksum: 10/3da291b46f03d378a0176c9d034deee7ee0684c5d62e1c5ce82f3be0972918eaa806f45c62e9a4f1c8d24c5ba6571c260caba2493fc7e82b528ac7d15903e2c1 +"@types/stylis@npm:4.2.5": + version: 4.2.5 + resolution: "@types/stylis@npm:4.2.5" + checksum: 10/f8dde326432a7047b6684b96442f0e2ade2cfe8c29bf56217fb8cbbe4763997051fa9dc0f8dba4aeed2fddb794b4bc91feba913b780666b3adc28198ac7c63d4 languageName: node linkType: hard @@ -9409,21 +9338,6 @@ __metadata: languageName: node linkType: hard -"babel-plugin-styled-components@npm:>= 1.12.0": - version: 2.1.4 - resolution: "babel-plugin-styled-components@npm:2.1.4" - dependencies: - "@babel/helper-annotate-as-pure": "npm:^7.22.5" - "@babel/helper-module-imports": "npm:^7.22.5" - "@babel/plugin-syntax-jsx": "npm:^7.22.5" - lodash: "npm:^4.17.21" - picomatch: "npm:^2.3.1" - peerDependencies: - styled-components: ">= 2" - checksum: 10/34f10dd4d44cf1c8605097dd4796e2d1443266ebc686f10a9f56b5d1492b5c3de9c13d7e30b075756610adf592ed807cc8145189d00b4454f6af9879a19a5e0b - languageName: node - linkType: hard - "babel-plugin-syntax-trailing-function-commas@npm:^7.0.0-beta.0": version: 7.0.0-beta.0 resolution: "babel-plugin-syntax-trailing-function-commas@npm:7.0.0-beta.0" @@ -10013,31 +9927,10 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001517, caniuse-lite@npm:^1.0.30001565": - version: 1.0.30001606 - resolution: "caniuse-lite@npm:1.0.30001606" - checksum: 10/55ee377f9b5e09d290d2a60d339aa1fbab949d3086cfd0546d2896bc57f4df693cf69e9a0c828cb9622df039403927c66ec2d6a7ff4b7580f38846314bdb4800 - languageName: node - linkType: hard - -"caniuse-lite@npm:^1.0.30001579": - version: 1.0.30001617 - resolution: "caniuse-lite@npm:1.0.30001617" - checksum: 10/eac442b9ad12801086be19f6dc17056827fe398f1c05983357e2531c8183ee890ffc8fb973d54519ad7114a2fd47de8f33ec66d98565b995fef1c6ba02b5bc5b - languageName: node - linkType: hard - -"caniuse-lite@npm:^1.0.30001629": - version: 1.0.30001636 - resolution: "caniuse-lite@npm:1.0.30001636" - checksum: 10/9e6c5ab4c20df31df36720dda77cf6a781549ac2ad844bc0a416b327a793da21486358a1f85fdd6c39e22d336f70aac3b0e232f5f228cdff0ceb6e3e1c5e98fd - languageName: node - linkType: hard - -"caniuse-lite@npm:^1.0.30001646": - version: 1.0.30001653 - resolution: "caniuse-lite@npm:1.0.30001653" - checksum: 10/cd9b1c0fe03249e593789a11a9ef14f987b385e60441748945916b19e74e7bc5c82c40d4836496a647586651898741aed1598ae0792114a9f0d7d7fdb2b7deb0 +"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001517, caniuse-lite@npm:^1.0.30001565, caniuse-lite@npm:^1.0.30001579, caniuse-lite@npm:^1.0.30001629, caniuse-lite@npm:^1.0.30001646": + version: 1.0.30001686 + resolution: "caniuse-lite@npm:1.0.30001686" + checksum: 10/dc34d4daa992256b94def2894e478ba4d9786581dff3b180d642d74c7578f7d8958be985d9da5d08f09b81dd9811b653e4980616bae26b1896968cfdf8d535da languageName: node linkType: hard @@ -10997,7 +10890,7 @@ __metadata: languageName: node linkType: hard -"css-to-react-native@npm:^3.0.0": +"css-to-react-native@npm:3.2.0": version: 3.2.0 resolution: "css-to-react-native@npm:3.2.0" dependencies: @@ -11141,6 +11034,13 @@ __metadata: languageName: node linkType: hard +"csstype@npm:3.1.3": + version: 3.1.3 + resolution: "csstype@npm:3.1.3" + checksum: 10/f593cce41ff5ade23f44e77521e3a1bcc2c64107041e1bf6c3c32adc5187d0d60983292fda326154d20b01079e24931aa5b08e4467cc488b60bb1e7f6d478ade + languageName: node + linkType: hard + "csstype@npm:^3.0.2": version: 3.1.2 resolution: "csstype@npm:3.1.2" @@ -14521,7 +14421,7 @@ __metadata: languageName: node linkType: hard -"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.2.1, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2": +"hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.2.1, hoist-non-react-statics@npm:^3.3.2": version: 3.3.2 resolution: "hoist-non-react-statics@npm:3.3.2" dependencies: @@ -19363,7 +19263,7 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^8.2.14, postcss@npm:^8.4.33, postcss@npm:^8.4.38": +"postcss@npm:8.4.38, postcss@npm:^8.2.14, postcss@npm:^8.4.33, postcss@npm:^8.4.38": version: 8.4.38 resolution: "postcss@npm:8.4.38" dependencies: @@ -21262,7 +21162,7 @@ __metadata: languageName: node linkType: hard -"shallowequal@npm:^1.1.0": +"shallowequal@npm:1.1.0": version: 1.1.0 resolution: "shallowequal@npm:1.1.0" checksum: 10/f4c1de0837f106d2dbbfd5d0720a5d059d1c66b42b580965c8f06bb1db684be8783538b684092648c981294bf817869f743a066538771dbecb293df78f765e00 @@ -22048,25 +21948,23 @@ __metadata: languageName: node linkType: hard -"styled-components@npm:^5.3.3": - version: 5.3.11 - resolution: "styled-components@npm:5.3.11" +"styled-components@npm:^6": + version: 6.1.13 + resolution: "styled-components@npm:6.1.13" dependencies: - "@babel/helper-module-imports": "npm:^7.0.0" - "@babel/traverse": "npm:^7.4.5" - "@emotion/is-prop-valid": "npm:^1.1.0" - "@emotion/stylis": "npm:^0.8.4" - "@emotion/unitless": "npm:^0.7.4" - babel-plugin-styled-components: "npm:>= 1.12.0" - css-to-react-native: "npm:^3.0.0" - hoist-non-react-statics: "npm:^3.0.0" - shallowequal: "npm:^1.1.0" - supports-color: "npm:^5.5.0" + "@emotion/is-prop-valid": "npm:1.2.2" + "@emotion/unitless": "npm:0.8.1" + "@types/stylis": "npm:4.2.5" + css-to-react-native: "npm:3.2.0" + csstype: "npm:3.1.3" + postcss: "npm:8.4.38" + shallowequal: "npm:1.1.0" + stylis: "npm:4.3.2" + tslib: "npm:2.6.2" peerDependencies: react: ">= 16.8.0" react-dom: ">= 16.8.0" - react-is: ">= 16.8.0" - checksum: 10/7e1baee0f7b4479fe1a4064e4ae87e40f1ba583030d04827cef73fa7b36d3a91ed552dc76164d319216039f906af42a5229648c023482280fa4b5f71f00eef2d + checksum: 10/8be7bcb156945e876f560b1bef4f2e5a6a214e53fa6e7f98cd7294c83f3cfb2d712c4561d175abcd6d331a65ef5b9b2004c916aa035ddec9633f0661d9c8205c languageName: node linkType: hard @@ -22098,6 +21996,20 @@ __metadata: languageName: node linkType: hard +"stylis@npm:4.3.2": + version: 4.3.2 + resolution: "stylis@npm:4.3.2" + checksum: 10/4d3e3cb5cbfc7abdf14e424c8631a15fd15cbf0357ffc641c319587e00c2d1036b1a71cb88b42411bc3ce10d7730ad3fb9789b034d11365e8a19d23f56486c77 + languageName: node + linkType: hard + +"stylis@npm:^4": + version: 4.3.4 + resolution: "stylis@npm:4.3.4" + checksum: 10/69b902a3c9fc3329c8ddb18d422f8130068356dd4d4a20ae245953679cc88ae08d49c55e32b0b57c8fe8a76f2ed7f32697240b8db4d368a25fc2db045ebaeba8 + languageName: node + linkType: hard + "subscriptions-transport-ws@npm:^0.9.15": version: 0.9.19 resolution: "subscriptions-transport-ws@npm:0.9.19" @@ -22113,7 +22025,7 @@ __metadata: languageName: node linkType: hard -"supports-color@npm:^5.3.0, supports-color@npm:^5.5.0": +"supports-color@npm:^5.3.0": version: 5.5.0 resolution: "supports-color@npm:5.5.0" dependencies: @@ -22703,6 +22615,13 @@ __metadata: languageName: node linkType: hard +"tslib@npm:2.6.2, tslib@npm:^2.6.2, tslib@npm:~2.6.0": + version: 2.6.2 + resolution: "tslib@npm:2.6.2" + checksum: 10/bd26c22d36736513980091a1e356378e8b662ded04204453d353a7f34a4c21ed0afc59b5f90719d4ba756e581a162ecbf93118dc9c6be5acf70aa309188166ca + languageName: node + linkType: hard + "tslib@npm:^1.13.0, tslib@npm:^1.8.1": version: 1.14.1 resolution: "tslib@npm:1.14.1" @@ -22717,13 +22636,6 @@ __metadata: languageName: node linkType: hard -"tslib@npm:^2.6.2, tslib@npm:~2.6.0": - version: 2.6.2 - resolution: "tslib@npm:2.6.2" - checksum: 10/bd26c22d36736513980091a1e356378e8b662ded04204453d353a7f34a4c21ed0afc59b5f90719d4ba756e581a162ecbf93118dc9c6be5acf70aa309188166ca - languageName: node - linkType: hard - "tslib@npm:~2.4.0": version: 2.4.1 resolution: "tslib@npm:2.4.1"