Fix #187 - Multiselect bug (container always wraps)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dassana-io/web-components",
-	"version": "0.8.1",
+	"version": "0.8.2",
 	"publishConfig": {
 		"registry": "https://npm.pkg.github.com/dassana-io"
 	},

src/__snapshots__/storybook.test.ts.snap

@@ -733,6 +733,7 @@ exports[`Storyshots Popover Default 1`] = `
     }
   >
     <span
+      className=""
       data-test="popover-trigger"
       onClick={[Function]}
       onMouseDown={[Function]}
@@ -763,6 +764,7 @@ exports[`Storyshots Popover Title 1`] = `
     }
   >
     <span
+      className=""
       data-test="popover-trigger"
       onClick={[Function]}
       onMouseDown={[Function]}

src/components/Popover/index.tsx

@@ -45,6 +45,7 @@ export interface PopoverProps extends CommonComponentProps {
 	 * Selector of HTML element inside which to render the popup
 	 */
 	popupContainerSelector?: string
+	popupTriggerClasses?: string[]
 	/**
 	 * Position of popover relative to the target
 	 */
@@ -71,6 +72,7 @@ export const Popover: FC<PopoverProps> = ({
 	onVisibleChange,
 	placement = 'bottom',
 	popupContainerSelector,
+	popupTriggerClasses = [],
 	title,
 	trigger = 'click',
 	visible
@@ -105,7 +107,10 @@ export const Popover: FC<PopoverProps> = ({
 			{...controlledCmpProps}
 			{...popupContainerProps}
 		>
-			<span {...getDataTestAttributeProp('popover-trigger', dataTag)}>
+			<span
+				className={cn(popupTriggerClasses)}
+				{...getDataTestAttributeProp('popover-trigger', dataTag)}
+			>
 				{children}
 			</span>
 		</AntDPopover>

src/components/Select/BaseSelect.tsx

@@ -18,7 +18,7 @@ const { Option } = AntDSelect
 
 interface CommonBaseSelectProps
 	extends Omit<SelectProps, 'defaultValue' | 'onChange' | 'value'> {
-	useStyles(data?: unknown): Record<string, string>
+	useStyles: (data?: unknown) => Record<string, string>
 }
 
 interface BaseMultiSelectProps

src/components/Select/MultiSelect/index.tsx

@@ -1,10 +1,12 @@
-import '../../assets/styles/antdAnimations.css'
-import 'antd/lib/select/style/index.css'
 import { BaseSelect } from '../BaseSelect'
 import Fuse from 'fuse.js'
 import { Input } from '../../Input'
 import { MultiSelectProps } from './types'
-import { getSortedAndFilteredValues, useStyles } from './utils'
+import {
+	getSortedAndFilteredValues,
+	useDropdownStyles,
+	useStyles
+} from './utils'
 import React, {
 	ChangeEvent,
 	FC,
@@ -41,15 +43,16 @@ export const MultiSelect: FC<MultiSelectProps> = (props: MultiSelectProps) => {
 
 	const [searchTerm, setSearchTerm] = useState('')
 
-	const componentClasses = useStyles(props)
+	const dropdownClasses = useDropdownStyles(props)
 
 	const dropdownRender = (menu: ReactNode) => (
 		<>
 			{showSearch && (
 				<Input
-					classes={[componentClasses.searchBar]}
+					classes={[dropdownClasses.searchBar]}
 					onChange={(e: ChangeEvent<HTMLInputElement>) => {
 						if (onSearch) onSearch(e.target.value)
+
 						setSearchTerm(e.target.value)
 					}}
 					onKeyDown={(e: KeyboardEvent) => {

src/components/Select/MultiSelect/utils.ts

@@ -15,8 +15,7 @@ import {
 	generateThemedFocusedStyles,
 	generateThemedInputStyles,
 	generateThemedOptionStyles,
-	generateThemedSelectStyles,
-	tooltipStyles
+	generateThemedSelectStyles
 } from '../utils'
 import { themedStyles, ThemeType } from '../../assets/styles/themes'
 
@@ -84,6 +83,13 @@ export const generateThemedMSOptionStyles = (themeType: ThemeType) => {
 const focusedClasses =
 	'&.ant-select-focused.ant-select-multiple:not(.ant-select-disabled) .ant-select-selector'
 
+export const useDropdownStyles = createUseStyles({
+	searchBar: {
+		margin: 3 * spacing.xs,
+		width: `calc(100% - ${6 * spacing.xs}px)`
+	}
+})
+
 export const useStyles = createUseStyles({
 	checkbox: { marginRight: spacing.s },
 	container: ({ fullWidth, matchSelectedContentWidth }) => ({
@@ -96,6 +102,11 @@ export const useStyles = createUseStyles({
 				...generateThemedSelectStyles(light),
 				...generateThemedTagStyles(light),
 				'& .ant-select-selector': {
+					'& .ant-select-selection-overflow': {
+						display: 'flex',
+						flexWrap: matchSelectedContentWidth ? 'nowrap' : 'wrap'
+					},
+					'&:after': { display: 'none' },
 					...generateThemedInputStyles(light),
 					borderRadius
 				},
@@ -112,15 +123,6 @@ export const useStyles = createUseStyles({
 	dropdown: generateThemedDropdownStyles(light),
 	error: { ...fieldErrorStyles.error },
 	option: generateThemedMSOptionStyles(light),
-	searchBar: {
-		margin: 3 * spacing.xs,
-		width: `calc(100% - ${6 * spacing.xs}px)`
-	},
-	tag: {
-		marginRight: spacing.xs
-	},
-	tooltip: tooltipStyles,
-	tooltipTriggerClasses: { minWidth: 0 },
 	// eslint-disable-next-line sort-keys
 	'@global': {
 		...fieldErrorStyles['@global'],

src/components/Select/SingleSelect/Select.stories.tsx

@@ -3,7 +3,6 @@ import { SbTheme } from '../../../../.storybook/preview'
 import { SecondaryBgDecorator } from '../../../../.storybook/utils'
 import { Select } from './index'
 import { SelectProps } from './types'
-import { useStyles } from '../utils'
 import { useTheme } from 'react-jss'
 import {
 	basicOptions,
@@ -16,7 +15,7 @@ import React, { FC } from 'react'
 export default {
 	argTypes: {
 		onChange: { defaultValue: action('onChange') },
-		useStyles: { defaultValue: useStyles },
+		popupContainerSelector: { control: { disable: true } },
 		value: { control: { disable: true } }
 	},
 	component: Select,

src/components/Select/SingleSelect/index.tsx

@@ -1,8 +1,6 @@
-import '../../assets/styles/antdAnimations.css'
-import 'antd/lib/select/style/index.css'
 import { BaseSelect } from '../BaseSelect'
 import { SelectProps } from './types'
-import { useStyles } from '../utils'
+import { useStyles } from './utils'
 import React, { FC } from 'react'
 
 export const Select: FC<SelectProps> = (props: SelectProps) => {

src/components/Select/SingleSelect/utils.ts

@@ -0,0 +1,88 @@
+import { createUseStyles } from 'react-jss'
+import {
+	defaultFieldWidth,
+	fieldErrorStyles,
+	styleguide
+} from '../../assets/styles/styleguide'
+import {
+	generateThemedDisabledStyles,
+	generateThemedDropdownStyles,
+	generateThemedFocusedStyles,
+	generateThemedInputStyles,
+	generateThemedOptionStyles,
+	generateThemedSelectStyles
+} from '../utils'
+import { themedStyles, ThemeType } from '../../assets/styles/themes'
+
+const { dark, light } = ThemeType
+
+const { borderRadius } = styleguide
+
+const generateThemedSelectedItemStyles = (themeType: ThemeType) => {
+	const {
+		base: { color }
+	} = themedStyles[themeType]
+
+	return {
+		'&.ant-select-single.ant-select-open .ant-select-selection-item': {
+			color
+		}
+	}
+}
+
+const disabledClasses =
+	'&.ant-select-disabled.ant-select-single:not(.ant-select-customize-input)'
+const focusedClasses =
+	'&.ant-select-focused:not(.ant-select-disabled).ant-select-single:not(.ant-select-customize-input) .ant-select-selector'
+
+export const useStyles = createUseStyles({
+	container: ({ fullWidth, matchSelectedContentWidth }) => ({
+		'& .ant-select': {
+			borderRadius,
+			...generateThemedSelectStyles(light),
+			...generateThemedSelectedItemStyles(light),
+			'& .ant-select-selector': {
+				...generateThemedInputStyles(light),
+				borderRadius
+			},
+			'&$error > .ant-select-selector': {
+				border: `1px solid ${themedStyles[light].error.borderColor}`
+			},
+			[disabledClasses]: generateThemedDisabledStyles(light),
+			[focusedClasses]: generateThemedFocusedStyles(light),
+			minWidth: matchSelectedContentWidth
+				? matchSelectedContentWidth
+				: 'unset',
+			width: matchSelectedContentWidth ? 'unset' : '100%'
+		},
+		width:
+			fullWidth || matchSelectedContentWidth ? '100%' : defaultFieldWidth
+	}),
+	dropdown: generateThemedDropdownStyles(light),
+	error: { ...fieldErrorStyles.error },
+	option: {
+		...generateThemedOptionStyles(light)
+	},
+	// eslint-disable-next-line sort-keys
+	'@global': {
+		...fieldErrorStyles['@global'],
+		[`.${dark}`]: {
+			'& $container': {
+				'& .ant-select': {
+					...generateThemedSelectStyles(dark),
+					...generateThemedSelectedItemStyles(dark),
+					'& .ant-select-selector': {
+						...generateThemedInputStyles(dark)
+					},
+					'&$error > .ant-select-selector': {
+						border: `1px solid ${themedStyles[dark].error.borderColor}`
+					},
+					[disabledClasses]: generateThemedDisabledStyles(dark),
+					[focusedClasses]: generateThemedFocusedStyles(dark)
+				}
+			},
+			'& $dropdown': generateThemedDropdownStyles(dark),
+			'& $option': generateThemedOptionStyles(dark)
+		}
+	}
+})

src/components/Select/utils.tsx → src/components/Select/utils.ts

@@ -1,16 +1,10 @@
-import { createUseStyles } from 'react-jss'
 import { generatePopupSelector } from 'components/utils'
-import {
-	defaultFieldWidth,
-	fieldErrorStyles,
-	styleguide
-} from '../assets/styles/styleguide'
+import { styleguide } from '../assets/styles/styleguide'
 import { themedStyles, ThemeType } from '../assets/styles/themes'
 
 const { dark, light } = ThemeType
 
 const {
-	borderRadius,
 	colors: { blacks, grays, whites },
 	fontWeight
 } = styleguide
@@ -163,23 +157,6 @@ export const generateThemedSelectStyles = (themeType: ThemeType) => {
 	}
 }
 
-const generateThemedSelectedItemStyles = (themeType: ThemeType) => {
-	const {
-		base: { color }
-	} = themedStyles[themeType]
-
-	return {
-		'&.ant-select-single.ant-select-open .ant-select-selection-item': {
-			color
-		}
-	}
-}
-
-const disabledClasses =
-	'&.ant-select-disabled.ant-select-single:not(.ant-select-customize-input)'
-const focusedClasses =
-	'&.ant-select-focused:not(.ant-select-disabled).ant-select-single:not(.ant-select-customize-input) .ant-select-selector'
-
 export const tooltipStyles = {
 	'&.ant-tooltip': {
 		'& > .ant-tooltip-content > .ant-tooltip-inner': {
@@ -189,58 +166,6 @@ export const tooltipStyles = {
 	}
 }
 
-export const useStyles = createUseStyles({
-	container: ({ fullWidth, matchSelectedContentWidth }) => ({
-		'& .ant-select': {
-			borderRadius,
-			...generateThemedSelectStyles(light),
-			...generateThemedSelectedItemStyles(light),
-			'& .ant-select-selector': {
-				...generateThemedInputStyles(light),
-				borderRadius
-			},
-			'&$error > .ant-select-selector': {
-				border: `1px solid ${themedStyles[light].error.borderColor}`
-			},
-			[disabledClasses]: generateThemedDisabledStyles(light),
-			[focusedClasses]: generateThemedFocusedStyles(light),
-			minWidth: matchSelectedContentWidth
-				? matchSelectedContentWidth
-				: 'unset',
-			width: matchSelectedContentWidth ? 'unset' : '100%'
-		},
-		width:
-			fullWidth || matchSelectedContentWidth ? '100%' : defaultFieldWidth
-	}),
-	dropdown: generateThemedDropdownStyles(light),
-	error: { ...fieldErrorStyles.error },
-	option: {
-		...generateThemedOptionStyles(light)
-	},
-	// eslint-disable-next-line sort-keys
-	'@global': {
-		...fieldErrorStyles['@global'],
-		[`.${dark}`]: {
-			'& $container': {
-				'& .ant-select': {
-					...generateThemedSelectStyles(dark),
-					...generateThemedSelectedItemStyles(dark),
-					'& .ant-select-selector': {
-						...generateThemedInputStyles(dark)
-					},
-					'&$error > .ant-select-selector': {
-						border: `1px solid ${themedStyles[dark].error.borderColor}`
-					},
-					[disabledClasses]: generateThemedDisabledStyles(dark),
-					[focusedClasses]: generateThemedFocusedStyles(dark)
-				}
-			},
-			'& $dropdown': generateThemedDropdownStyles(dark),
-			'& $option': generateThemedOptionStyles(dark)
-		}
-	}
-})
-
 export const getPopupContainerProps = (popupContainerSelector = '') => {
 	let popupContainerProps = {}