@toptal/picasso-tabs 7.0.0 → 7.0.1
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.
|
@@ -73,13 +73,11 @@ export const Tab = forwardRef(function Tab(props, ref) {
|
|
|
73
73
|
orientation,
|
|
74
74
|
titleCase,
|
|
75
75
|
});
|
|
76
|
-
return (React.createElement(MUITab, Object.assign({}, rest, { className: '', ref: ref, tabIndex: 0, disabled: disabled, value: value, onChange: onChange,
|
|
76
|
+
return (React.createElement(MUITab, Object.assign({}, rest, { className: '', ref: ref, tabIndex: 0, disabled: disabled, value: value, onChange: onChange, slotProps: {
|
|
77
77
|
root: ownerState => {
|
|
78
|
-
return {
|
|
79
|
-
className: twMerge(getOpacityClass(ownerState.selected, ownerState.disabled, orientation), rootClassesByOrientation(ownerState.selected)[orientation], classesByVariant[variant], ownerState.disabled
|
|
78
|
+
return Object.assign({ className: twMerge(getOpacityClass(ownerState.selected, ownerState.disabled, orientation), rootClassesByOrientation(ownerState.selected)[orientation], classesByVariant[variant], ownerState.disabled
|
|
80
79
|
? 'cursor-default text-gray-500'
|
|
81
|
-
: 'cursor-pointer', ownerState.disabled && 'pointer-events-none', icon && isHorizontal && 'min-h-0 pr-6', 'min-w-0 sm:min-w-[160px] md:min-w-[auto]', 'border-0 cursor-pointer inline-flex outline-hidden', 'items-center select-none align-middle appearance-none', 'justify-center no-underline [-webkit-tap-highlight-color:transparent]', 'normal-case whitespace-normal leading-4', 'relative ', className),
|
|
82
|
-
};
|
|
80
|
+
: 'cursor-pointer', ownerState.disabled && 'pointer-events-none', icon && isHorizontal && 'min-h-0 pr-6', 'min-w-0 sm:min-w-[160px] md:min-w-[auto]', 'border-0 cursor-pointer inline-flex outline-hidden', 'items-center select-none align-middle appearance-none', 'justify-center no-underline [-webkit-tap-highlight-color:transparent]', 'normal-case whitespace-normal leading-4', 'relative ', className) }, (onClick && { onClick }));
|
|
83
81
|
},
|
|
84
82
|
} }),
|
|
85
83
|
React.createElement("span", { className: twJoin('w-full', wrapperClassesByOrientation[orientation]) },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/Tab/Tab.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,EAAE,GAAG,IAAI,MAAM,EAAE,MAAM,eAAe,CAAA;AAE7C,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAkClD,MAAM,eAAe,GAAG,CACtB,QAAiB,EACjB,QAAiB,EACjB,WAAsC,EACtC,EAAE;IACF,IAAI,QAAQ,EAAE;QACZ,OAAO,YAAY,CAAA;KACpB;IAED,IAAI,QAAQ,IAAI,WAAW,KAAK,UAAU,EAAE;QAC1C,OAAO,cAAc,CAAA;KACtB;IAED,OAAO,YAAY,CAAA;AACrB,CAAC,CAAA;AAED,MAAM,2BAA2B,GAAG;IAClC,UAAU,EAAE,kDAAkD;IAC9D,QAAQ,EAAE,OAAO;CAClB,CAAA;AAED,MAAM,wBAAwB,GAAG,CAAC,QAAiB,EAAE,EAAE,CAAC,CAAC;IACvD,UAAU,EAAE;QACV,kDAAkD;QAClD,gEAAgE;QAChE,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,mBAAmB;QAC7C,QAAQ,IAAI,yCAAyC;KACtD;IACD,QAAQ,EAAE;QACR,0CAA0C;QAC1C,sDAAsD;QACtD,wBAAwB;QACxB,QAAQ,IAAI,UAAU;QACtB,QAAQ,IAAI;YACV,iBAAiB;YACjB,qBAAqB;YACrB,iBAAiB;YACjB,eAAe;YACf,cAAc;YACd,gBAAgB;YAChB,oBAAoB;SACrB;QACD,QAAQ;YACN,CAAC,CAAC,uBAAuB;YACzB,CAAC,CAAC,kEAAkE;KACvE;CACF,CAAC,CAAA;AAEF,MAAM,gBAAgB,GAAG;IACvB,UAAU,EAAE,wBAAwB;IACpC,SAAS,EAAE,qBAAqB;CACjC,CAAA;AAED,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAA2B,SAAS,GAAG,CAClE,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,QAAQ,EACR,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,EAAE,cAAc,EACzB,WAAW,EACX,MAAM,EACN,SAAS,KAEP,KAAK,EADJ,IAAI,UACL,KAAK,EAZH,gHAYL,CAAQ,CAAA;IACT,MAAM,SAAS,GAAG,YAAY,CAAC,cAAc,CAAC,CAAA;IAC9C,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IACxD,MAAM,YAAY,GAAG,WAAW,KAAK,YAAY,CAAA;IAEjD,MAAM,WAAW,GAAG,iBAAiB,CAAC;QACpC,MAAM;QACN,WAAW;QACX,QAAQ;QACR,KAAK;QACL,WAAW;QACX,SAAS;KACV,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,MAAM,oBACD,IAAI,IACR,SAAS,EAAC,EAAE,EACZ,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,
|
|
1
|
+
{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/Tab/Tab.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/Tab/Tab.tsx
CHANGED
|
@@ -135,7 +135,6 @@ export const Tab = forwardRef<HTMLButtonElement, Props>(function Tab(
|
|
|
135
135
|
disabled={disabled}
|
|
136
136
|
value={value}
|
|
137
137
|
onChange={onChange}
|
|
138
|
-
onClick={onClick}
|
|
139
138
|
slotProps={{
|
|
140
139
|
root: ownerState => {
|
|
141
140
|
return {
|
|
@@ -160,6 +159,7 @@ export const Tab = forwardRef<HTMLButtonElement, Props>(function Tab(
|
|
|
160
159
|
'relative ',
|
|
161
160
|
className
|
|
162
161
|
),
|
|
162
|
+
...(onClick && { onClick }),
|
|
163
163
|
}
|
|
164
164
|
},
|
|
165
165
|
}}
|
package/src/Tabs/test.tsx
CHANGED
|
@@ -46,6 +46,7 @@ const renderTabs = (
|
|
|
46
46
|
value={tab.value}
|
|
47
47
|
label={tab.label}
|
|
48
48
|
disabled={tab.disabled}
|
|
49
|
+
onClick={tab.onClick}
|
|
49
50
|
/>
|
|
50
51
|
))}
|
|
51
52
|
</Tabs>
|
|
@@ -165,4 +166,38 @@ describe('Tabs', () => {
|
|
|
165
166
|
|
|
166
167
|
expect(container).toMatchSnapshot()
|
|
167
168
|
})
|
|
169
|
+
|
|
170
|
+
it('does not fire Tab onClick when the tab is disabled', () => {
|
|
171
|
+
const onClick = jest.fn()
|
|
172
|
+
const { getByTestId } = renderTabs(
|
|
173
|
+
[{ label: 'Tab 1' }, { label: 'Tab 2', disabled: true, onClick }],
|
|
174
|
+
{ value: 0 }
|
|
175
|
+
)
|
|
176
|
+
|
|
177
|
+
fireEvent.click(getByTestId('tab-2'))
|
|
178
|
+
expect(onClick).not.toHaveBeenCalled()
|
|
179
|
+
})
|
|
180
|
+
|
|
181
|
+
it('does not fire onChange when re-clicking the already-selected tab', () => {
|
|
182
|
+
const onChange = jest.fn()
|
|
183
|
+
const { getByTestId } = renderTabs(
|
|
184
|
+
[{ label: 'Tab 1' }, { label: 'Tab 2' }],
|
|
185
|
+
{ value: 0, onChange }
|
|
186
|
+
)
|
|
187
|
+
|
|
188
|
+
fireEvent.click(getByTestId('tab-1'))
|
|
189
|
+
expect(onChange).not.toHaveBeenCalled()
|
|
190
|
+
})
|
|
191
|
+
|
|
192
|
+
it('fires Tab onClick on every click, including re-click of the selected tab', () => {
|
|
193
|
+
const onClick = jest.fn()
|
|
194
|
+
const { getByTestId } = renderTabs(
|
|
195
|
+
[{ label: 'Tab 1', onClick }, { label: 'Tab 2' }],
|
|
196
|
+
{ value: 0 }
|
|
197
|
+
)
|
|
198
|
+
|
|
199
|
+
fireEvent.click(getByTestId('tab-1'))
|
|
200
|
+
fireEvent.click(getByTestId('tab-1'))
|
|
201
|
+
expect(onClick).toHaveBeenCalledTimes(2)
|
|
202
|
+
})
|
|
168
203
|
})
|