@toptal/picasso-select 1.0.20-alpha-feature-tailwind-w21-af158c5d2.43 → 1.0.20-alpha-feature-tailwind-w21-a69309e6a.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-package/src/NativeSelect/NativeSelectInput.d.ts +1 -0
- package/dist-package/src/NativeSelect/NativeSelectInput.d.ts.map +1 -1
- package/dist-package/src/NativeSelect/NativeSelectInput.js +3 -1
- package/dist-package/src/NativeSelect/NativeSelectInput.js.map +1 -1
- package/package.json +17 -17
- package/src/NativeSelect/NativeSelectInput.tsx +5 -1
- package/src/NativeSelect/__snapshots__/test.tsx.snap +2 -2
- package/src/NonNativeSelect/__snapshots__/test.tsx.snap +1 -0
|
@@ -4,5 +4,6 @@ export declare const NativeSelectInput: React.ForwardRefExoticComponent<{
|
|
|
4
4
|
disabled?: boolean | undefined;
|
|
5
5
|
IconComponent?: React.ElementType<any> | undefined;
|
|
6
6
|
multiple?: boolean | undefined;
|
|
7
|
+
ownerState?: {} | undefined;
|
|
7
8
|
} & React.HTMLAttributes<HTMLSelectElement> & React.RefAttributes<HTMLSelectElement>>;
|
|
8
9
|
//# sourceMappingURL=NativeSelectInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NativeSelectInput.d.ts","sourceRoot":"","sources":["../../../src/NativeSelect/NativeSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"NativeSelectInput.d.ts","sourceRoot":"","sources":["../../../src/NativeSelect/NativeSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAWzC,eAAO,MAAM,iBAAiB;;;;;;qFAqC5B,CAAA"}
|
|
@@ -12,7 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import React, { forwardRef } from 'react';
|
|
13
13
|
import { twMerge, twJoin } from '@toptal/picasso-tailwind-merge';
|
|
14
14
|
export const NativeSelectInput = forwardRef((props, ref) => {
|
|
15
|
-
|
|
15
|
+
// omit ownerState from the props
|
|
16
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
17
|
+
const { ownerState, className, disabled, multiple, IconComponent } = props, other = __rest(props, ["ownerState", "className", "disabled", "multiple", "IconComponent"]);
|
|
16
18
|
return (React.createElement(React.Fragment, null,
|
|
17
19
|
React.createElement("select", Object.assign({ className: twMerge(`appearance-none select-none rounded-none min-w-4 cursor-pointer
|
|
18
20
|
focus:bg-black/[.05] focus:rounded-none`, disabled && 'cursor-default', multiple ? 'h-auto' : '[&_option]:bg-white [&_optgroup]:bg-white', className, 'pr-6' // From MUI, this rule is more specific and should override classname
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NativeSelectInput.js","sourceRoot":"","sources":["../../../src/NativeSelect/NativeSelectInput.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;
|
|
1
|
+
{"version":3,"file":"NativeSelectInput.js","sourceRoot":"","sources":["../../../src/NativeSelect/NativeSelectInput.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AAUhE,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAAU,CAGzC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,iCAAiC;IACjC,6DAA6D;IAC7D,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,KAC9D,KAAK,EAD8D,KAAK,UACxE,KAAK,EADD,oEAAsE,CACrE,CAAA;IAEP,OAAO,CACL;QACE,8CACE,SAAS,EAAE,OAAO,CAChB;mDACyC,EACzC,QAAQ,IAAI,gBAAgB,EAC5B,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,2CAA2C,EACjE,SAAS,EACT,MAAM,CAAC,qEAAqE;aAC7E,EACD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,IACJ,KAAK,EACT;QACD,QAAQ;YACP,CAAC,CAAC,IAAI;YACN,CAAC,CAAC,aAAa,IAAI,CACf,oBAAC,aAAa,IACZ,SAAS,EAAE,MAAM,CACf,2DAA2D,EAC3D,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,kBAAkB,CACnD,GACD,CACH,CACJ,CACJ,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-select",
|
|
3
|
-
"version": "1.0.20-alpha-feature-tailwind-w21-
|
|
3
|
+
"version": "1.0.20-alpha-feature-tailwind-w21-a69309e6a.47+a69309e6a",
|
|
4
4
|
"description": "Toptal UI components library - Select",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -22,18 +22,18 @@
|
|
|
22
22
|
},
|
|
23
23
|
"homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@toptal/picasso-container": "1.0.4-alpha-feature-tailwind-w21-
|
|
26
|
-
"@toptal/picasso-form": "3.0.3-alpha-feature-tailwind-w21-
|
|
27
|
-
"@toptal/picasso-icons": "1.1.2-alpha-feature-tailwind-w21-
|
|
28
|
-
"@toptal/picasso-input": "2.0.1-alpha-feature-tailwind-w21-
|
|
29
|
-
"@toptal/picasso-input-adornment": "1.0.5-alpha-feature-tailwind-w21-
|
|
30
|
-
"@toptal/picasso-loader": "1.0.4-alpha-feature-tailwind-w21-
|
|
31
|
-
"@toptal/picasso-menu": "1.0.12-alpha-feature-tailwind-w21-
|
|
32
|
-
"@toptal/picasso-outlined-input": "1.0.18-alpha-feature-tailwind-w21-
|
|
33
|
-
"@toptal/picasso-popper": "1.0.4-alpha-feature-tailwind-w21-
|
|
34
|
-
"@toptal/picasso-shared": "15.0.1-alpha-feature-tailwind-w21-
|
|
35
|
-
"@toptal/picasso-typography": "2.0.2-alpha-feature-tailwind-w21-
|
|
36
|
-
"@toptal/picasso-utils": "1.0.4-alpha-feature-tailwind-w21-
|
|
25
|
+
"@toptal/picasso-container": "1.0.4-alpha-feature-tailwind-w21-a69309e6a.55+a69309e6a",
|
|
26
|
+
"@toptal/picasso-form": "3.0.3-alpha-feature-tailwind-w21-a69309e6a.49+a69309e6a",
|
|
27
|
+
"@toptal/picasso-icons": "1.1.2-alpha-feature-tailwind-w21-a69309e6a.55+a69309e6a",
|
|
28
|
+
"@toptal/picasso-input": "2.0.1-alpha-feature-tailwind-w21-a69309e6a.47+a69309e6a",
|
|
29
|
+
"@toptal/picasso-input-adornment": "1.0.5-alpha-feature-tailwind-w21-a69309e6a.55+a69309e6a",
|
|
30
|
+
"@toptal/picasso-loader": "1.0.4-alpha-feature-tailwind-w21-a69309e6a.55+a69309e6a",
|
|
31
|
+
"@toptal/picasso-menu": "1.0.12-alpha-feature-tailwind-w21-a69309e6a.53+a69309e6a",
|
|
32
|
+
"@toptal/picasso-outlined-input": "1.0.18-alpha-feature-tailwind-w21-a69309e6a.49+a69309e6a",
|
|
33
|
+
"@toptal/picasso-popper": "1.0.4-alpha-feature-tailwind-w21-a69309e6a.55+a69309e6a",
|
|
34
|
+
"@toptal/picasso-shared": "15.0.1-alpha-feature-tailwind-w21-a69309e6a.55+a69309e6a",
|
|
35
|
+
"@toptal/picasso-typography": "2.0.2-alpha-feature-tailwind-w21-a69309e6a.55+a69309e6a",
|
|
36
|
+
"@toptal/picasso-utils": "1.0.4-alpha-feature-tailwind-w21-a69309e6a.55+a69309e6a",
|
|
37
37
|
"ap-style-title-case": "^1.1.2"
|
|
38
38
|
},
|
|
39
39
|
"sideEffects": [
|
|
@@ -46,9 +46,9 @@
|
|
|
46
46
|
"react": ">=16.12.0 < 19.0.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@toptal/picasso-tailwind": "2.5.1-alpha-feature-tailwind-w21-
|
|
50
|
-
"@toptal/picasso-tailwind-merge": "1.1.1-alpha-feature-tailwind-w21-
|
|
51
|
-
"@toptal/picasso-test-utils": "1.1.2-alpha-feature-tailwind-w21-
|
|
49
|
+
"@toptal/picasso-tailwind": "2.5.1-alpha-feature-tailwind-w21-a69309e6a.55+a69309e6a",
|
|
50
|
+
"@toptal/picasso-tailwind-merge": "1.1.1-alpha-feature-tailwind-w21-a69309e6a.4280+a69309e6a",
|
|
51
|
+
"@toptal/picasso-test-utils": "1.1.2-alpha-feature-tailwind-w21-a69309e6a.55+a69309e6a",
|
|
52
52
|
"popper.js": "^1.16.1"
|
|
53
53
|
},
|
|
54
54
|
"exports": {
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"!dist-package/tsconfig.tsbuildinfo",
|
|
60
60
|
"src"
|
|
61
61
|
],
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "a69309e6a801ad2ae34a02e65d88b594f3a8271a"
|
|
63
63
|
}
|
|
@@ -6,13 +6,17 @@ type NativeSelectInputProps = {
|
|
|
6
6
|
disabled?: boolean
|
|
7
7
|
IconComponent?: React.ElementType
|
|
8
8
|
multiple?: boolean
|
|
9
|
+
ownerState?: {}
|
|
9
10
|
} & React.HTMLAttributes<HTMLSelectElement>
|
|
10
11
|
|
|
11
12
|
export const NativeSelectInput = forwardRef<
|
|
12
13
|
HTMLSelectElement,
|
|
13
14
|
NativeSelectInputProps
|
|
14
15
|
>((props, ref) => {
|
|
15
|
-
|
|
16
|
+
// omit ownerState from the props
|
|
17
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
18
|
+
const { ownerState, className, disabled, multiple, IconComponent, ...other } =
|
|
19
|
+
props
|
|
16
20
|
|
|
17
21
|
return (
|
|
18
22
|
<>
|
|
@@ -12,8 +12,8 @@ exports[`NativeSelect renders native select 1`] = `
|
|
|
12
12
|
class="base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible h-8 w-full after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(input:focus)]:after:border-blue after:border [&:has(input:focus)]:after:shadow-[0_0_0_3px] [&:has(input:focus)]:after:shadow-blue hover:[&:not(:has(input:focus))]:after:border-gray text-black cursor-[inherit] p-0 bg-white"
|
|
13
13
|
>
|
|
14
14
|
<select
|
|
15
|
+
aria-invalid="false"
|
|
15
16
|
class="appearance-none select-none rounded-none min-w focus:rounded-none [&_option]:bg-white [&_optgroup]:bg-white base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none peer resize-none text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100 w-full p-2 focus:bg-inheritColor pr-6"
|
|
16
|
-
ownerstate="[object Object]"
|
|
17
17
|
type="text"
|
|
18
18
|
>
|
|
19
19
|
<option
|
|
@@ -68,8 +68,8 @@ exports[`NativeSelect renders native select with the empty option enabled when e
|
|
|
68
68
|
class="base-Input relative inline-flex gap-y gap-x items-center rounded-sm [font-size:_unset] hover:[&_.resetButtonDirty]:visible h-8 w-full after:content-[""] after:inline-block after:absolute after:top-0 after:bottom-0 after:right-0 after:left-0 after:pointer-events after:border-solid after:rounded-sm after:border-gray [&:has(input:focus)]:after:border-blue after:border [&:has(input:focus)]:after:shadow-[0_0_0_3px] [&:has(input:focus)]:after:shadow-blue hover:[&:not(:has(input:focus))]:after:border-gray text-black cursor-[inherit] p-0 bg-white"
|
|
69
69
|
>
|
|
70
70
|
<select
|
|
71
|
+
aria-invalid="false"
|
|
71
72
|
class="appearance-none select-none rounded-none min-w focus:rounded-none [&_option]:bg-white [&_optgroup]:bg-white base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none peer resize-none text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100 w-full p-2 focus:bg-inheritColor pr-6"
|
|
72
|
-
ownerstate="[object Object]"
|
|
73
73
|
type="text"
|
|
74
74
|
>
|
|
75
75
|
<option
|
|
@@ -16,6 +16,7 @@ exports[`NonNativeSelect renders 1`] = `
|
|
|
16
16
|
role="textbox"
|
|
17
17
|
>
|
|
18
18
|
<input
|
|
19
|
+
aria-invalid="false"
|
|
19
20
|
autocomplete="off"
|
|
20
21
|
class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100"
|
|
21
22
|
readonly=""
|