@toptal/picasso-select 100.0.4 → 100.0.5-alpha-pf-react-19-improvements-970580a42.0
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.js +1 -2
- package/dist-package/src/NativeSelect/NativeSelectInput.js.map +1 -1
- package/dist-package/src/NonNativeSelect/NonNativeSelect.js +2 -2
- package/dist-package/src/NonNativeSelect/NonNativeSelect.js.map +1 -1
- package/dist-package/src/ScrollMenu/ScrollMenu.d.ts +1 -1
- package/dist-package/src/ScrollMenu/ScrollMenu.d.ts.map +1 -1
- package/dist-package/src/ScrollMenu/ScrollMenu.js.map +1 -1
- package/dist-package/src/SelectCaret/SelectCaret.d.ts.map +1 -1
- package/dist-package/src/SelectCaret/SelectCaret.js +3 -9
- package/dist-package/src/SelectCaret/SelectCaret.js.map +1 -1
- package/dist-package/src/SelectOptions/SelectOptions.js +2 -2
- package/dist-package/src/SelectOptions/SelectOptions.js.map +1 -1
- package/package.json +19 -19
- package/src/NativeSelect/NativeSelectInput.tsx +2 -2
- package/src/NonNativeSelect/NonNativeSelect.tsx +2 -2
- package/src/ScrollMenu/ScrollMenu.tsx +2 -2
- package/src/SelectBase/hooks/use-adornments/test.ts +1 -1
- package/src/SelectBase/hooks/use-highlighted-index/test.ts +10 -9
- package/src/SelectBase/hooks/use-select-props/use-arrows-keydown-handler/test.ts +1 -1
- package/src/SelectBase/hooks/use-select-props/use-blur-handler/test.ts +1 -1
- package/src/SelectBase/hooks/use-select-props/use-click-handler/test.ts +1 -1
- package/src/SelectBase/hooks/use-select-props/use-enter-or-space-keydown-handler/test.ts +1 -1
- package/src/SelectBase/hooks/use-select-props/use-escape-keydown-handler/test.ts +1 -1
- package/src/SelectBase/hooks/use-select-props/use-focus-handler/test.ts +1 -1
- package/src/SelectBase/hooks/use-select-props/use-item-on-click-handler/test.ts +1 -1
- package/src/SelectBase/hooks/use-select-props/use-item-on-mouse-down-handler/test.ts +1 -1
- package/src/SelectBase/hooks/use-select-props/use-item-on-mouse-enter-handler/test.ts +1 -1
- package/src/SelectBase/hooks/use-select-props/use-reset-click-handler/test.ts +1 -1
- package/src/SelectBase/hooks/use-select-props/use-search-blur-handler/test.ts +1 -1
- package/src/SelectBase/hooks/use-select-props/use-search-change-handler/test.ts +1 -1
- package/src/SelectBase/hooks/use-select-props/use-search-keydown-handler/test.ts +1 -1
- package/src/SelectBase/hooks/use-select-props/use-select-handler/test.ts +1 -1
- package/src/SelectBase/hooks/use-select-props/use-select-keydown-handler/test.ts +1 -1
- package/src/SelectBase/hooks/use-select-state/test.ts +1 -1
- package/src/SelectCaret/SelectCaret.tsx +5 -6
- package/src/SelectOptions/SelectOptions.tsx +2 -2
|
@@ -16,8 +16,7 @@ export const NativeSelectInput = forwardRef((props, ref) => {
|
|
|
16
16
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
17
17
|
const { ownerState, className, disabled, multiple, IconComponent } = props, other = __rest(props, ["ownerState", "className", "disabled", "multiple", "IconComponent"]);
|
|
18
18
|
return (React.createElement(React.Fragment, null,
|
|
19
|
-
React.createElement("select", Object.assign({ className: twMerge(
|
|
20
|
-
focus:bg-black/[.05] focus:rounded-none`, disabled && 'cursor-default', multiple ? 'h-auto' : '[&_option]:bg-white [&_optgroup]:bg-white', className), disabled: disabled, multiple: multiple, ref: ref }, other)),
|
|
19
|
+
React.createElement("select", Object.assign({ className: twMerge('appearance-none select-none rounded-none min-w-4 cursor-pointer', 'focus:bg-black/[.05] focus:rounded-none', disabled && 'cursor-default', multiple ? 'h-auto' : '[&_option]:bg-white [&_optgroup]:bg-white', className), disabled: disabled, multiple: multiple, ref: ref }, other)),
|
|
21
20
|
multiple
|
|
22
21
|
? null
|
|
23
22
|
: IconComponent && (React.createElement(IconComponent, { className: twJoin('absolute right-0 top-[calc(50%-12px)] pointer-events-none', disabled ? 'text-black/[.26]' : 'text-black/[.54]') }))));
|
|
@@ -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;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
|
|
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,iEAAiE,EACjE,yCAAyC,EACzC,QAAQ,IAAI,gBAAgB,EAC5B,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,2CAA2C,EACjE,SAAS,CACV,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"}
|
|
@@ -17,7 +17,7 @@ import { MenuItem } from '@toptal/picasso-menu';
|
|
|
17
17
|
import { documentable, forwardRef, noop, useCombinedRefs, } from '@toptal/picasso-utils';
|
|
18
18
|
import { InputAdornment } from '@toptal/picasso-input-adornment';
|
|
19
19
|
import { useFieldsLayoutContext } from '@toptal/picasso-form';
|
|
20
|
-
import { twMerge
|
|
20
|
+
import { twMerge } from '@toptal/picasso-tailwind-merge';
|
|
21
21
|
import { SelectCaret } from '../SelectCaret';
|
|
22
22
|
import { NonNativeSelectLoader } from '../NonNativeSelectLoader';
|
|
23
23
|
import { useAdornments, useSelectState, useSelectProps, renderOption as defaultRenderOption, getOptionText, DEFAULT_LIMIT, DEFAULT_SEARCH_THRESHOLD, countOptions, filterFlatOptions as defaultFilterOptions, } from '../SelectBase';
|
|
@@ -76,7 +76,7 @@ export const NonNativeSelect = documentable(forwardRef(
|
|
|
76
76
|
disabled,
|
|
77
77
|
});
|
|
78
78
|
const selectComponent = (React.createElement(React.Fragment, null,
|
|
79
|
-
React.createElement("div", Object.assign({}, rootProps, { className:
|
|
79
|
+
React.createElement("div", Object.assign({}, rootProps, { className: twMerge('w-[inherit] outline-0', layout === 'horizontal' && 'w-full') }),
|
|
80
80
|
!enableAutofill && name && (React.createElement("input", { type: 'hidden', value: displayValue, name: name })),
|
|
81
81
|
React.createElement(OutlinedInput
|
|
82
82
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NonNativeSelect.js","sourceRoot":"","sources":["../../../src/NonNativeSelect/NonNativeSelect.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EACL,YAAY,EACZ,UAAU,EACV,IAAI,EACJ,eAAe,GAChB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAA;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAA;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"NonNativeSelect.js","sourceRoot":"","sources":["../../../src/NonNativeSelect/NonNativeSelect.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EACL,YAAY,EACZ,UAAU,EACV,IAAI,EACJ,eAAe,GAChB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAA;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAA;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAA;AAEhE,OAAO,EACL,aAAa,EACb,cAAc,EACd,cAAc,EACd,YAAY,IAAI,mBAAmB,EACnC,aAAa,EACb,aAAa,EACb,wBAAwB,EACxB,YAAY,EACZ,iBAAiB,IAAI,oBAAoB,GAC1C,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAA;AAClE,OAAO,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAA;AAE1E,MAAM,yBAAyB,GAAgB,EAAE,CAAA;AAEjD,MAAM,cAAc,GAGhB;IACF,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,QAAQ;IACd,MAAM,EAAE,QAAQ;CACjB,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,YAAY,CACzC,UAAU;AACR,8DAA8D;AAC9D,CACE,KAAwB,EACxB,GAAuC,EACvC,EAAE;IACF,MAAM,EACJ,SAAS,EACT,KAAK,EACL,KAAK,GAAG,MAAM,EACd,SAAS,EACT,OAAO,GAAG,KAAK,EACf,EAAE,EACF,IAAI,EACJ,YAAY,GAAG,OAAO,EACtB,IAAI,EACJ,aAAa,GAAG,kBAAkB,EAClC,YAAY,GAAG,mBAAmB,EAClC,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,aAAa,EACb,MAAM,GAAG,SAAS,EAClB,QAAQ,EACR,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EACjD,IAAI,GAAG,QAAQ,EACf,WAAW,EACX,eAAe,EACf,cAAc,GAAG,KAAK,EACtB,iBAAiB,EACjB,YAAY,EACZ,iBAAiB,GAAG,QAAQ,EAC5B,eAAe,GAAG,wBAAwB,EAC1C,KAAK,GAAG,aAAa,EACrB,eAAe,GAAG,aAAa,EAC/B,OAAO,EACP,QAAQ,GAAG,IAAI,EACf,aAAa,GAAG,oBAAoB;IACpC,6DAA6D;IAC7D,MAAM,EACN,OAAO,EACP,SAAS,KAEP,KAAK,EADJ,IAAI,UACL,KAAK,EApCH,wbAoCL,CAAQ,CAAA;IAET,MAAM,SAAS,GAAG,eAAe,CAC/B,GAAG,EACH,MAAM,CAAmB,IAAI,CAAC,CAC/B,CAAA;IACD,MAAM,cAAc,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAA;IACrD,MAAM,SAAS,GAAG,MAAM,CAAe,IAAI,CAAC,CAAA;IAC5C,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAEpD,MAAM,WAAW,GAAG,cAAc,CAAC;QACjC,eAAe;QACf,iBAAiB,EAAE,aAAa;QAChC,OAAO;QACP,QAAQ;QACR,QAAQ;QACR,KAAK;QACL,eAAe;QACf,KAAK;KACN,CAAC,CAAA;IACF,MAAM,EACJ,gBAAgB,EAChB,MAAM,EACN,UAAU,EACV,kBAAkB,EAClB,YAAY,EACZ,SAAS,EACT,eAAe,GAChB,GAAG,WAAW,CAAA;IACf,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,GACtE,cAAc,CAAC;QACb,SAAS;QACT,SAAS;QACT,cAAc;QACd,WAAW,EAAE,KAAK;QAClB,WAAW;KACZ,CAAC,CAAA;IAEJ,MAAM,EAAE,MAAM,EAAE,GAAG,sBAAsB,EAAE,CAAA;IAE3C,sEAAsE;IACtE,+CAA+C;IAC/C,MAAM,UAAU,GACd,KAAK,KAAK,QAAQ;QAChB,CAAC,CAAC;YACE,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,YAAY,IAAI,WAAW,IAAI,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;YAC7D,SAAS,EAAE,8BAA8B;SAC1C;QACH,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAA;IAEjB,MAAM,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC,CAC/B,oBAAC,QAAQ,IACP,EAAE,EAAC,KAAK,EACR,aAAa,QACb,SAAS,EAAC,8BAA8B;QAExC,oBAAC,aAAa,kBACZ,QAAQ,EAAE,cAAc,EACxB,SAAS,EAAC,QAAQ,EAClB,cAAc,EACZ,oBAAC,cAAc,IAAC,QAAQ,EAAC,OAAO,EAAC,oBAAoB;gBACnD,oBAAC,QAAQ,OAAG,CACG,EAEnB,WAAW,EAAE,iBAAiB,EAC9B,WAAW,EAAE,iBAAiB,EAC9B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,kBAAkB,EACzB,OAAO,EAAE,OAAO,uBACE,MAAM,iBACX,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,IAE7B,mBAAmB,EAAE,EACzB,CACO,CACZ,CAAC,CAAC,CAAC,IAAI,CAAA;IAER,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAEhC,MAAM,CAAC,cAAc,EAAE,YAAY,CAAC,GAAG,aAAa,CAAC;QACnD,QAAQ,EAAE,YAAY;QACtB,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,MAAM,eAAe,GAAG,CACtB;QACE,6CACM,SAAS,IACb,SAAS,EAAE,OAAO,CAChB,uBAAuB,EACvB,MAAM,KAAK,YAAY,IAAI,QAAQ,CACpC;YAEA,CAAC,cAAc,IAAI,IAAI,IAAI,CAC1B,+BAAO,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,GAAI,CACzD;YACD,oBAAC,aAAa;YACZ,wDAAwD;gCACpD,IAAI,IACR,QAAQ,EAAE,QAAe,EACzB,QAAQ,EAAE,SAAS,EACnB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY;gBAC1B,uBAAuB;gBACvB,KAAK,EAAE,YAAY,IACf,aAAa,EAAE,IACnB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,QACR,YAAY,EAAE,SAAS,EACvB,SAAS,EAAC,eAAe,EACzB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,SAAS,EACd,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,KAAK,EACzD,YAAY,EACV,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,IAAI,KAAK,EAEvD,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACvC,OAAO,EAAE,OAAO,IAChB;YACF,oBAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,GAAI,CAC/B;QACL,CAAC,QAAQ,IAAI,MAAM,IAAI,CACtB,oBAAC,MAAM,IACL,IAAI,EAAC,cAAc,EACnB,GAAG,EAAE,SAAS,EACd,SAAS,QACT,KAAK,EAAE,SAAS,EAChB,SAAS,EAAC,cAAc,EACxB,IAAI,QACJ,QAAQ,EAAE,eAAe,CAAC,OAAO,EACjC,SAAS,EAAE,eAAe,EAC1B,aAAa,EAAE,aAAa,IAE3B,OAAO,CAAC,CAAC,CAAC,CACT,oBAAC,qBAAqB,mBAAc,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,GAAI,CACxD,CAAC,CAAC,CAAC,CACF,oBAAC,sBAAsB,IACrB,OAAO,EAAE,eAAe,EACxB,YAAY,EAAE,YAAmB,EACjC,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,SAAS,CAAC,MAAM,EACxB,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,kBAAkB,EACtC,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,WAAW,EACT,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAC9B,oBAAC,0BAA0B,IACzB,UAAU,EAAE,YAAY,CAAC,OAAO,CAAC,EACjC,KAAK,EAAE,KAAK,iBACC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,GACjC,CACH,CAAC,CAAC,CAAC,IAAI,EAEV,OAAO,EAAE;gBACP,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS;aAC9B,GACD,CACH,CACM,CACV,CACA,CACJ,CAAA;IAED,OAAO,CACL,6BACE,SAAS,EAAE,OAAO,CAChB,iDAAiD,EACjD,SAAS,EACT,cAAc,CAAC,KAAK,CAAC,EACrB,QAAQ,IAAI,gBAAgB,CAC7B,EACD,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,eAAe,IAEnB,eAAe,CACZ,CACP,CAAA;AACH,CAAC,CACF,CACF,CAAA;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAA;AAE/C,eAAe,eAAe,CAAA"}
|
|
@@ -13,7 +13,7 @@ export interface Props extends BaseProps {
|
|
|
13
13
|
list?: string;
|
|
14
14
|
};
|
|
15
15
|
}
|
|
16
|
-
export declare const scrollToSelection: (menuRef: RefObject<HTMLDivElement>, selectedIndex?: number | null) => void;
|
|
16
|
+
export declare const scrollToSelection: (menuRef: RefObject<HTMLDivElement | null>, selectedIndex?: number | null) => void;
|
|
17
17
|
declare const ScrollMenu: {
|
|
18
18
|
({ role, ...props }: Props): JSX.Element;
|
|
19
19
|
displayName: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollMenu.d.ts","sourceRoot":"","sources":["../../../src/ScrollMenu/ScrollMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,KAAiB,MAAM,OAAO,CAAA;AACrC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKvD,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IACzB,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;CACF;AAUD,eAAO,MAAM,iBAAiB,YACnB,SAAS,CAAC,cAAc,CAAC,
|
|
1
|
+
{"version":3,"file":"ScrollMenu.d.ts","sourceRoot":"","sources":["../../../src/ScrollMenu/ScrollMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,KAAiB,MAAM,OAAO,CAAA;AACrC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKvD,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IACzB,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;CACF;AAUD,eAAO,MAAM,iBAAiB,YACnB,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,kBACzB,MAAM,GAAG,IAAI,SAiB9B,CAAA;AAQD,QAAA,MAAM,UAAU;yBAAiC,KAAK;;CA+CrD,CAAA;AAID,eAAe,UAAU,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollMenu.js","sourceRoot":"","sources":["../../../src/ScrollMenu/ScrollMenu.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAehE,MAAM,mBAAmB,GAAG,CAC1B,
|
|
1
|
+
{"version":3,"file":"ScrollMenu.js","sourceRoot":"","sources":["../../../src/ScrollMenu/ScrollMenu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectCaret.d.ts","sourceRoot":"","sources":["../../../src/SelectCaret/SelectCaret.tsx"],"names":[],"mappings":"AAIA,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,WAAW,iBAAkB,KAAK,
|
|
1
|
+
{"version":3,"file":"SelectCaret.d.ts","sourceRoot":"","sources":["../../../src/SelectCaret/SelectCaret.tsx"],"names":[],"mappings":"AAIA,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,WAAW,iBAAkB,KAAK,gBAavC,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -1,17 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DropdownArrows16 } from '@toptal/picasso-icons';
|
|
3
|
-
import {
|
|
3
|
+
import { twMerge } from '@toptal/picasso-tailwind-merge';
|
|
4
4
|
const SelectCaret = ({ disabled }) => {
|
|
5
|
-
return (React.createElement(DropdownArrows16
|
|
6
|
-
// className={twJoin(classes.caret, disabled && classes.caretDisabled)}
|
|
7
|
-
, {
|
|
8
|
-
// className={twJoin(classes.caret, disabled && classes.caretDisabled)}
|
|
9
|
-
className: twJoin(
|
|
5
|
+
return (React.createElement(DropdownArrows16, { className: twMerge(
|
|
10
6
|
// in specs right spacing is defined relative to 6px icon width, while we use 16px
|
|
11
7
|
// so 5px are left instead of 10px when we use wider icon.
|
|
12
|
-
|
|
13
|
-
text-graphite-700 text-[1rem]
|
|
14
|
-
cursor-inherit pointer-events-none`, disabled && 'text-graphite-700/[.48] z-[1]') }));
|
|
8
|
+
'absolute top-[calc(50%-0.5rem)] right-[0.3125rem]', 'text-graphite-700 text-[1rem]', 'cursor-inherit pointer-events-none', disabled && 'text-graphite-700/[.48] z-[1]') }));
|
|
15
9
|
};
|
|
16
10
|
export default SelectCaret;
|
|
17
11
|
//# sourceMappingURL=SelectCaret.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectCaret.js","sourceRoot":"","sources":["../../../src/SelectCaret/SelectCaret.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"SelectCaret.js","sourceRoot":"","sources":["../../../src/SelectCaret/SelectCaret.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAMxD,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAS,EAAE,EAAE;IAC1C,OAAO,CACL,oBAAC,gBAAgB,IACf,SAAS,EAAE,OAAO;QAChB,kFAAkF;QAClF,0DAA0D;QAC1D,mDAAmD,EACnD,+BAA+B,EAC/B,oCAAoC,EACpC,QAAQ,IAAI,+BAA+B,CAC5C,GACD,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -10,12 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import React from 'react';
|
|
13
|
-
import {
|
|
13
|
+
import { twMerge } from '@toptal/picasso-tailwind-merge';
|
|
14
14
|
import { ScrollMenu } from '../ScrollMenu';
|
|
15
15
|
const SelectOptions = (_a) => {
|
|
16
16
|
var { role = 'menu' } = _a, props = __rest(_a, ["role"]);
|
|
17
17
|
const { selectedIndex, onBlur, children, style, fixedHeader, fixedFooter, className } = props, rest = __rest(props, ["selectedIndex", "onBlur", "children", "style", "fixedHeader", "fixedFooter", "className"]);
|
|
18
|
-
return (React.createElement(ScrollMenu, Object.assign({ className:
|
|
18
|
+
return (React.createElement(ScrollMenu, Object.assign({ className: twMerge('shadow-5', Boolean(fixedHeader) && 'pt-[0.125rem] [&>div:first-child]:pb-2', Boolean(fixedFooter) && 'pb-0', className), style: style, selectedIndex: selectedIndex, fixedFooter: fixedFooter, fixedHeader: fixedHeader, onBlur: onBlur, role: role }, rest), children));
|
|
19
19
|
};
|
|
20
20
|
SelectOptions.displayName = 'SelectOptions';
|
|
21
21
|
export default SelectOptions;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectOptions.js","sourceRoot":"","sources":["../../../src/SelectOptions/SelectOptions.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"SelectOptions.js","sourceRoot":"","sources":["../../../src/SelectOptions/SelectOptions.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGxD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAI1C,MAAM,aAAa,GAAG,CAAC,EAAkC,EAAE,EAAE;QAAtC,EAAE,IAAI,GAAG,MAAM,OAAmB,EAAd,KAAK,cAAzB,QAA2B,CAAF;IAC9C,MAAM,EACJ,aAAa,EACb,MAAM,EACN,QAAQ,EACR,KAAK,EACL,WAAW,EACX,WAAW,EACX,SAAS,KAEP,KAAK,EADJ,IAAI,UACL,KAAK,EATH,2FASL,CAAQ,CAAA;IAET,OAAO,CACL,oBAAC,UAAU,kBACT,SAAS,EAAE,OAAO,CAChB,UAAU,EACV,OAAO,CAAC,WAAW,CAAC,IAAI,wCAAwC,EAChE,OAAO,CAAC,WAAW,CAAC,IAAI,MAAM,EAC9B,SAAS,CACV,EACD,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,IACN,IAAI,GAEP,QAAQ,CACE,CACd,CAAA;AACH,CAAC,CAAA;AAED,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA;AAE3C,eAAe,aAAa,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-select",
|
|
3
|
-
"version": "100.0.
|
|
3
|
+
"version": "100.0.5-alpha-pf-react-19-improvements-970580a42.0",
|
|
4
4
|
"description": "Toptal UI components library - Select",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -19,32 +19,32 @@
|
|
|
19
19
|
"homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"ap-style-title-case": "^1.1.2",
|
|
22
|
-
"@toptal/picasso-container": "100.0.
|
|
23
|
-
"@toptal/picasso-form": "100.0.
|
|
24
|
-
"@toptal/picasso-icons": "100.0.
|
|
25
|
-
"@toptal/picasso-input": "100.0.
|
|
26
|
-
"@toptal/picasso-input-adornment": "100.0.
|
|
27
|
-
"@toptal/picasso-loader": "100.0.
|
|
28
|
-
"@toptal/picasso-menu": "100.0.
|
|
29
|
-
"@toptal/picasso-outlined-input": "100.1.0",
|
|
30
|
-
"@toptal/picasso-popper": "100.0.
|
|
31
|
-
"@toptal/picasso-shared": "100.1.0",
|
|
32
|
-
"@toptal/picasso-typography": "100.0.
|
|
33
|
-
"@toptal/picasso-utils": "100.0.
|
|
22
|
+
"@toptal/picasso-container": "100.0.2-alpha-pf-react-19-improvements-970580a42.0",
|
|
23
|
+
"@toptal/picasso-form": "100.0.3-alpha-pf-react-19-improvements-970580a42.0",
|
|
24
|
+
"@toptal/picasso-icons": "100.0.2-alpha-pf-react-19-improvements-970580a42.0",
|
|
25
|
+
"@toptal/picasso-input": "100.0.4-alpha-pf-react-19-improvements-970580a42.0",
|
|
26
|
+
"@toptal/picasso-input-adornment": "100.0.2-alpha-pf-react-19-improvements-970580a42.0",
|
|
27
|
+
"@toptal/picasso-loader": "100.0.2-alpha-pf-react-19-improvements-970580a42.0",
|
|
28
|
+
"@toptal/picasso-menu": "100.0.4-alpha-pf-react-19-improvements-970580a42.0",
|
|
29
|
+
"@toptal/picasso-outlined-input": "100.1.1-alpha-pf-react-19-improvements-970580a42.0",
|
|
30
|
+
"@toptal/picasso-popper": "100.0.3-alpha-pf-react-19-improvements-970580a42.0",
|
|
31
|
+
"@toptal/picasso-shared": "100.1.1-alpha-pf-react-19-improvements-970580a42.0",
|
|
32
|
+
"@toptal/picasso-typography": "100.0.2-alpha-pf-react-19-improvements-970580a42.0",
|
|
33
|
+
"@toptal/picasso-utils": "100.0.2-alpha-pf-react-19-improvements-970580a42.0"
|
|
34
34
|
},
|
|
35
35
|
"sideEffects": [
|
|
36
36
|
"**/styles.ts",
|
|
37
37
|
"**/styles.js"
|
|
38
38
|
],
|
|
39
39
|
"peerDependencies": {
|
|
40
|
-
"react": "
|
|
41
|
-
"@toptal/picasso-tailwind-merge": "^100.0.0",
|
|
42
|
-
"@toptal/picasso-tailwind": "^100.0.0"
|
|
40
|
+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
41
|
+
"@toptal/picasso-tailwind-merge": "^100.0.1-alpha-pf-react-19-improvements-970580a42.0",
|
|
42
|
+
"@toptal/picasso-tailwind": "^100.0.1-alpha-pf-react-19-improvements-970580a42.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@toptal/picasso-tailwind": "100.0.0",
|
|
46
|
-
"@toptal/picasso-tailwind-merge": "100.0.0",
|
|
47
|
-
"@toptal/picasso-test-utils": "100.1.0"
|
|
45
|
+
"@toptal/picasso-tailwind": "100.0.1-alpha-pf-react-19-improvements-970580a42.0",
|
|
46
|
+
"@toptal/picasso-tailwind-merge": "100.0.1-alpha-pf-react-19-improvements-970580a42.0",
|
|
47
|
+
"@toptal/picasso-test-utils": "100.1.1-alpha-pf-react-19-improvements-970580a42.0"
|
|
48
48
|
},
|
|
49
49
|
"exports": {
|
|
50
50
|
".": "./dist-package/src/index.js"
|
|
@@ -22,8 +22,8 @@ export const NativeSelectInput = forwardRef<
|
|
|
22
22
|
<>
|
|
23
23
|
<select
|
|
24
24
|
className={twMerge(
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
'appearance-none select-none rounded-none min-w-4 cursor-pointer',
|
|
26
|
+
'focus:bg-black/[.05] focus:rounded-none',
|
|
27
27
|
disabled && 'cursor-default',
|
|
28
28
|
multiple ? 'h-auto' : '[&_option]:bg-white [&_optgroup]:bg-white',
|
|
29
29
|
className
|
|
@@ -12,7 +12,7 @@ import {
|
|
|
12
12
|
} from '@toptal/picasso-utils'
|
|
13
13
|
import { InputAdornment } from '@toptal/picasso-input-adornment'
|
|
14
14
|
import { useFieldsLayoutContext } from '@toptal/picasso-form'
|
|
15
|
-
import { twMerge
|
|
15
|
+
import { twMerge } from '@toptal/picasso-tailwind-merge'
|
|
16
16
|
|
|
17
17
|
import { SelectCaret } from '../SelectCaret'
|
|
18
18
|
import { NonNativeSelectLoader } from '../NonNativeSelectLoader'
|
|
@@ -174,7 +174,7 @@ export const NonNativeSelect = documentable(
|
|
|
174
174
|
<>
|
|
175
175
|
<div
|
|
176
176
|
{...rootProps}
|
|
177
|
-
className={
|
|
177
|
+
className={twMerge(
|
|
178
178
|
'w-[inherit] outline-0',
|
|
179
179
|
layout === 'horizontal' && 'w-full'
|
|
180
180
|
)}
|
|
@@ -19,7 +19,7 @@ export interface Props extends BaseProps {
|
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
const getMenuSelectedNode = (
|
|
22
|
-
menuRef: RefObject<HTMLDivElement>,
|
|
22
|
+
menuRef: RefObject<HTMLDivElement | null>,
|
|
23
23
|
selectedIndex?: number | null
|
|
24
24
|
) =>
|
|
25
25
|
typeof selectedIndex === 'number'
|
|
@@ -27,7 +27,7 @@ const getMenuSelectedNode = (
|
|
|
27
27
|
: undefined
|
|
28
28
|
|
|
29
29
|
export const scrollToSelection = (
|
|
30
|
-
menuRef: RefObject<HTMLDivElement>,
|
|
30
|
+
menuRef: RefObject<HTMLDivElement | null>,
|
|
31
31
|
selectedIndex?: number | null
|
|
32
32
|
) => {
|
|
33
33
|
const menuNode = menuRef.current
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import { renderHook, act } from '@testing-library/react
|
|
1
|
+
import type { RenderHookResult } from '@testing-library/react'
|
|
2
|
+
import { renderHook, act } from '@testing-library/react'
|
|
3
3
|
|
|
4
4
|
import type { Option } from '../../types'
|
|
5
5
|
import useHighlightedIndex from './use-highlighted-index'
|
|
@@ -17,14 +17,15 @@ const disableOptions = (options: Option[], indicies: number[]) =>
|
|
|
17
17
|
indicies.includes(index) ? { ...option, disabled: true } : option
|
|
18
18
|
)
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
type HighlightedIndexResult = RenderHookResult<
|
|
21
|
+
ReturnType<typeof useHighlightedIndex>,
|
|
22
|
+
{ isOpen: boolean }
|
|
23
|
+
>['result']
|
|
23
24
|
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
const getHighlightIndex = (result: HighlightedIndexResult) => result.current[0]
|
|
26
|
+
|
|
27
|
+
const setHighlightedIndex = (result: HighlightedIndexResult, index: number) =>
|
|
28
|
+
result.current[1](index)
|
|
28
29
|
|
|
29
30
|
const renderUseHighlightedIndex = ({
|
|
30
31
|
options,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import { DropdownArrows16 } from '@toptal/picasso-icons'
|
|
3
|
-
import {
|
|
3
|
+
import { twMerge } from '@toptal/picasso-tailwind-merge'
|
|
4
4
|
|
|
5
5
|
interface Props {
|
|
6
6
|
disabled?: boolean
|
|
@@ -9,13 +9,12 @@ interface Props {
|
|
|
9
9
|
const SelectCaret = ({ disabled }: Props) => {
|
|
10
10
|
return (
|
|
11
11
|
<DropdownArrows16
|
|
12
|
-
|
|
13
|
-
className={twJoin(
|
|
12
|
+
className={twMerge(
|
|
14
13
|
// in specs right spacing is defined relative to 6px icon width, while we use 16px
|
|
15
14
|
// so 5px are left instead of 10px when we use wider icon.
|
|
16
|
-
|
|
17
|
-
text-graphite-700 text-[1rem]
|
|
18
|
-
cursor-inherit pointer-events-none
|
|
15
|
+
'absolute top-[calc(50%-0.5rem)] right-[0.3125rem]',
|
|
16
|
+
'text-graphite-700 text-[1rem]',
|
|
17
|
+
'cursor-inherit pointer-events-none',
|
|
19
18
|
disabled && 'text-graphite-700/[.48] z-[1]'
|
|
20
19
|
)}
|
|
21
20
|
/>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import {
|
|
2
|
+
import { twMerge } from '@toptal/picasso-tailwind-merge'
|
|
3
3
|
|
|
4
4
|
import type { ScrollMenuProps } from '../ScrollMenu'
|
|
5
5
|
import { ScrollMenu } from '../ScrollMenu'
|
|
@@ -20,7 +20,7 @@ const SelectOptions = ({ role = 'menu', ...props }: Props) => {
|
|
|
20
20
|
|
|
21
21
|
return (
|
|
22
22
|
<ScrollMenu
|
|
23
|
-
className={
|
|
23
|
+
className={twMerge(
|
|
24
24
|
'shadow-5',
|
|
25
25
|
Boolean(fixedHeader) && 'pt-[0.125rem] [&>div:first-child]:pb-2',
|
|
26
26
|
Boolean(fixedFooter) && 'pb-0',
|