Skip to content

Commit 1b656d4

Browse files
marcus-wishesmarcus-wishes
authored
Merge pull request #187 from linked-planet/dev
Dev
2 parents d4d5623 + a333f69 commit 1b656d4

File tree

4 files changed

+656
-958
lines changed

4 files changed

+656
-958
lines changed

‎library/src/components/inputs/Select.tsx‎

Lines changed: 74 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {
2626
default as RSelect,
2727
type SelectComponentsConfig,
2828
type SelectInstance,
29+
type StylesConfig,
2930
} from "react-select"
3031
import ReactSelectAsync from "react-select/async"
3132
import ReactSelectCreatable, {
@@ -144,31 +145,33 @@ function useClassNamesConfig<ValueType, IsMulti extends boolean = boolean>(
144145
),
145146
placeholder: (provided) =>
146147
twMerge(
147-
`${
148+
`font-normal ${
148149
provided.isDisabled
149150
? "text-disabled-text"
150151
: "text-text-subtlest"
151-
} overflow-hidden text-ellipsis whitespace-nowrap`,
152+
} overflow-hidden text-ellipsis whitespace-nowrap text-base`,
152153
classNamesConfig?.placeholder?.(provided),
153154
),
154155
singleValue: (provided) =>
155-
twJoin(
156-
provided.isDisabled
157-
? "text-disabled-text"
158-
: "text-text",
159-
"text-ellipsis whitespace-nowrap",
156+
twMerge(
157+
twJoin(
158+
provided.isDisabled
159+
? "text-disabled-text"
160+
: "text-text",
161+
"text-ellipsis whitespace-nowrap font-normal text-base",
162+
),
160163
classNamesConfig?.singleValue?.(provided),
161164
),
162165
multiValue: (provided) => {
163-
return twJoin(
164-
twMerge(
166+
return twMerge(
167+
twJoin(
165168
"bg-neutral w-auto rounded-xs pl-1 mr-2 my-1 text-text",
166169
provided.isDisabled
167170
? "bg-disabled text-disabled-text"
168171
: undefined,
169172
provided.data.isFixed ? "pr-1" : undefined,
173+
"text-ellipsis whitespace-nowrap font-normal",
170174
),
171-
"text-ellipsis whitespace-nowrap",
172175
classNamesConfig?.multiValue?.(provided),
173176
)
174177
},
@@ -208,7 +211,7 @@ function useClassNamesConfig<ValueType, IsMulti extends boolean = boolean>(
208211
}
209212

210213
// className overwrite doesn't work because it seems like that the css of react-select gets included after TW
211-
const customStyles = {
214+
const customStyles: StylesConfig = {
212215
control: (provided: CSSObjectWithLabel) => ({
213216
...provided,
214217
cursor: "pointer",
@@ -225,6 +228,64 @@ const customStyles = {
225228
}),
226229
}
227230

231+
type StylesConfigKey = keyof StylesConfig
232+
233+
function useCustomStyles<ValueType, IsMulti extends boolean = boolean>(
234+
styles:
235+
| StylesConfig<
236+
OptionType<ValueType>,
237+
IsMulti,
238+
OptionGroupType<ValueType>
239+
>
240+
| undefined,
241+
) {
242+
return useMemo(() => {
243+
if (!styles) {
244+
return customStyles as StylesConfig<
245+
OptionType<ValueType>,
246+
IsMulti,
247+
OptionGroupType<ValueType>
248+
>
249+
}
250+
const ret: StylesConfig<
251+
OptionType<ValueType>,
252+
IsMulti,
253+
OptionGroupType<ValueType>
254+
> = {}
255+
const objectKeys = new Set<StylesConfigKey>(
256+
Object.keys(styles) as StylesConfigKey[],
257+
)
258+
for (const key of Object.keys(customStyles)) {
259+
objectKeys.add(key as StylesConfigKey)
260+
}
261+
for (const key of objectKeys) {
262+
if (styles[key] && customStyles[key]) {
263+
ret[key] = (provided: CSSObjectWithLabel, props: any) => {
264+
return {
265+
...customStyles[key]?.(provided, props),
266+
...styles[key]?.(provided, props),
267+
}
268+
}
269+
} else if (styles[key]) {
270+
ret[key] = styles[key] as (
271+
provided: CSSObjectWithLabel,
272+
props: any,
273+
) => CSSObjectWithLabel
274+
} else if (customStyles[key]) {
275+
ret[key] = customStyles[key] as (
276+
provided: CSSObjectWithLabel,
277+
props: any,
278+
) => CSSObjectWithLabel
279+
}
280+
}
281+
return ret as StylesConfig<
282+
OptionType<ValueType>,
283+
IsMulti,
284+
OptionGroupType<ValueType>
285+
>
286+
}, [styles])
287+
}
288+
228289
//#endregion styles
229290

230291
// this are basically all the props that are passed to the react-select component... except for the ones that are not needed
@@ -546,6 +607,8 @@ const SelectInner = <ValueType, IsMulti extends boolean = boolean>({
546607
)
547608
}
548609

610+
const customStyles = useCustomStyles<ValueType, IsMulti>(styles)
611+
549612
if (isCreateable) {
550613
return (
551614
<ReactSelectCreatable<

‎library/src/utils/getPortal.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export function createPortalRootNode(props?: {
2626
}) {
2727
const {
2828
id = portalContainerID,
29-
zIndex = 511, // the atlaskit portal has 510, the hamburger menu has 512
29+
zIndex = 3001, // the atlaskit portal dialogue menu has 3000 that it is shown above other atlaskit components
3030
portalParentNode = document.body,
3131
setAsPortalRootNode = true,
3232
} = props ?? {}

‎package.json‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,22 @@
1717
],
1818
"types": "./dist/index.d.ts",
1919
"exports": {
20-
".": "./dist/index.js",
21-
"./*": "./dist/**/*.js",
22-
"./bundler-plugins": "./dist/bundler-plugins/index.js",
23-
"./bundler-plugins/*": "./dist/bundler-plugins/*.js"
20+
".": {
21+
"types": "./dist/index.d.ts",
22+
"import": "./dist/index.js"
23+
},
24+
"./*": {
25+
"types": "./dist/**/*.d.ts",
26+
"import": "./dist/**/*.js"
27+
},
28+
"./bundler-plugins": {
29+
"types": "./dist/bundler-plugins/index.d.ts",
30+
"import": "./dist/bundler-plugins/index.js"
31+
},
32+
"./bundler-plugins/*": {
33+
"types": "./dist/bundler-plugins/*.d.ts",
34+
"import": "./dist/bundler-plugins/*.js"
35+
}
2436
},
2537
"scripts": {
2638
"build:lib": "tsc --noEmit -p tsconfig.lib.json && vitest run && vite build -c vite.config.lib.ts && npm run messages:compile && cp -r ./twThemes dist && npm run tsc:plugin",
@@ -110,10 +122,10 @@
110122
"lowlight": "^3.3.0",
111123
"lucide-react": "^0.544.0",
112124
"mime-types": "^3.0.1",
113-
"motion": "^12.23.13",
125+
"motion": "^12.23.20",
114126
"postcss": "^8.5.6",
115127
"react-awesome-slider": "^4.1.0",
116-
"react-day-picker": "^9.10.0",
128+
"react-day-picker": "^9.11.0",
117129
"react-intl": "^7.1.11",
118130
"react-joyride": "^2.9.3",
119131
"react-router-dom": "^7.9.1",
@@ -123,11 +135,11 @@
123135
"use-resize-observer": "^9.1.0"
124136
},
125137
"devDependencies": {
126-
"@atlaskit/atlassian-navigation": "^5.3.17",
127-
"@atlaskit/css-reset": "^7.3.6",
128-
"@atlaskit/table-tree": "^12.2.8",
138+
"@atlaskit/atlassian-navigation": "^5.3.18",
139+
"@atlaskit/css-reset": "^7.3.7",
140+
"@atlaskit/table-tree": "^12.2.9",
129141
"@atlaskit/theme": "^21.0.0",
130-
"@atlaskit/tokens": "^6.3.1",
142+
"@atlaskit/tokens": "^6.3.3",
131143
"@babel/generator": "^7.28.3",
132144
"@babel/parser": "^7.28.4",
133145
"@babel/traverse": "^7.28.4",
@@ -137,18 +149,17 @@
137149
"@hello-pangea/dnd": "^18.0.1",
138150
"@monaco-editor/react": "^4.7.0",
139151
"@tailwindcss/vite": "^4.1.13",
140-
"@tanstack/react-query": "^5.89.0",
152+
"@tanstack/react-query": "^5.90.2",
141153
"@testing-library/jest-dom": "^6.8.0",
142154
"@total-typescript/ts-reset": "^0.6.1",
143-
"@types/node": "^24.5.0",
155+
"@types/node": "^24.5.2",
144156
"@types/react": "^18.3.24",
145157
"@types/react-dom": "^18.3.7",
146158
"@types/react-transition-group": "^4.4.12",
147-
"@vitejs/plugin-react-swc": "^4.0.1",
148-
"cypress": "^15.2.0",
159+
"@vitejs/plugin-react-swc": "^4.1.0",
160+
"cypress": "^15.3.0",
149161
"cypress-terminal-report": "^7.2.1",
150162
"dayjs": "^1.11.18",
151-
"eslint-plugin-react-refresh": "^0.4.20",
152163
"jsdom": "^26.1.0",
153164
"process": "^0.11.10",
154165
"react": "^18.3.1",
@@ -163,7 +174,7 @@
163174
"tailwindcss": "^4.1.13",
164175
"typescript": "^5.9.2",
165176
"typescript-plugin-css-modules": "^5.2.0",
166-
"vite": "^7.1.5",
177+
"vite": "^7.1.7",
167178
"vite-plugin-dts": "^4.5.4",
168179
"vitest": "^3.2.4"
169180
},

0 commit comments

Comments
 (0)