Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix #5493: Multiselect passthrough fixes #5504

Merged
merged 1 commit into from
Dec 2, 2023
+72 −44
Merged

Fix #5493: Multiselect passthrough fixes #5504

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 24 additions & 22 deletions components/doc/multiselect/theming/tailwinddoc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const Tailwind = {
multiselect: {
root: ({ props }) => ({
className: classNames('inline-flex cursor-pointer select-none', 'bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40 transition-colors duration-200 ease-in-out rounded-md', 'w-full md:w-80', {
'opacity-60 select-none pointer-events-none cursor-default': props?.disabled
'opacity-60 select-none pointer-events-none cursor-default': props.disabled
})
}),
labelContainer: 'overflow-hidden flex flex-auto cursor-pointer',
Expand All @@ -47,18 +47,20 @@ const Tailwind = {
headerCheckboxContainer: {
className: classNames('inline-flex cursor-pointer select-none align-bottom relative', 'mr-2', 'w-6 h-6')
},
headerCheckbox: ({ context }) => ({
className: classNames(
'flex items-center justify-center',
'border-2 w-6 h-6 text-gray-600 dark:text-white/70 rounded-lg transition-colors duration-200',
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
{
'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !context?.selected,
'border-blue-500 bg-blue-500': context?.selected
}
)
}),
headercheckboxicon: 'w-4 h-4 transition-all duration-200 text-white text-base',
headerCheckbox: {
root: ({ props }) => ({
className: classNames(
'flex items-center justify-center',
'border-2 w-6 h-6 text-gray-600 dark:text-white/70 rounded-lg transition-colors duration-200',
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
{
'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !props?.checked,
'border-blue-500 bg-blue-500': props?.checked
}
)
})
},
headerCheckboxIcon: 'w-4 h-4 transition-all duration-200 text-white text-base',
closeButton: {
className: classNames(
'flex items-center justify-center overflow-hidden relative',
Expand All @@ -67,7 +69,7 @@ const Tailwind = {
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
)
},
closeButtonIcon: 'w-4 h-4 inline-block',
closeIcon: 'w-4 h-4 inline-block',
wrapper: {
className: classNames('max-h-[200px] overflow-auto', 'bg-white text-gray-700 border-0 rounded-md shadow-lg', 'dark:bg-gray-900 dark:text-white/80')
},
Expand All @@ -89,17 +91,17 @@ const Tailwind = {
'border-2 w-6 h-6 text-gray-600 dark:text-white/80 rounded-lg transition-colors duration-200',
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
{
'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !context?.selected,
'border-blue-500 bg-blue-500': context?.selected
'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !context.selected,
'border-blue-500 bg-blue-500': context.selected
}
)
}),
checkboxicon: 'w-4 h-4 transition-all duration-200 text-white text-base',
itemgroup: {
checkboxIcon: 'w-4 h-4 transition-all duration-200 text-white text-base',
itemGroup: {
className: classNames('m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto')
},
filtercontainer: 'relative',
filterinput: {
filterContainer: 'relative',
filterInput: {
className: classNames(
'pr-7 -mr-7',
'w-full',
Expand All @@ -108,8 +110,8 @@ const Tailwind = {
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
)
},
filtericon: '-mt-2 absolute top-1/2',
clearicon: 'text-gray-500 right-12 -mt-2 absolute top-1/2',
filterIcon: '-mt-2 absolute top-1/2',
clearIcon: 'text-gray-500 right-12 -mt-2 absolute top-1/2',
transition: TRANSITIONS.overlay
}
}
Expand Down
11 changes: 9 additions & 2 deletions components/lib/multiselect/MultiSelectHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,12 +116,19 @@ export const MultiSelectHeader = React.memo((props) => {
getPTOptions('headerCheckboxIcon')
);

const headerCheckboxContainerProps = mergeProps(
{
className: cx('headerCheckboxContainer')
},
getPTOptions('headerCheckboxContainer')
);

const checkedIcon = props.itemCheckboxIcon || <CheckIcon {...headerCheckboxIconProps} />;
const itemCheckboxIcon = IconUtils.getJSXIcon(checkedIcon, { ...headerCheckboxIconProps }, { selected: props.selected });

const checkboxElement = props.showSelectAll && (
<div className="p-multiselect-select-all">
<Checkbox id={selectAllId} checked={props.selectAll} onChange={onSelectAll} role="checkbox" aria-checked={props.selectAll} icon={itemCheckboxIcon} pt={ptm('headercheckbox')} unstyled={isUnstyled()} />
<div {...headerCheckboxContainerProps}>
<Checkbox id={selectAllId} checked={props.selectAll} onChange={onSelectAll} role="checkbox" aria-checked={props.selectAll} icon={itemCheckboxIcon} pt={ptm('headerCheckbox')} unstyled={isUnstyled()} />
{!props.filter && <label {...headerSelectAllLabelProps}>{props.selectAllLabel}</label>}
</div>
);
Expand Down
15 changes: 14 additions & 1 deletion components/lib/multiselect/MultiSelectItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,16 @@ import { Ripple } from '../ripple/Ripple';
import { IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils';

export const MultiSelectItem = React.memo((props) => {
const [focused, setFocused] = React.useState(false);
const { ptm, cx } = props;

const getPTOptions = (key) => {
return ptm(key, {
hostName: props.hostName,
context: {
selected: props.selected
selected: props.selected,
disabled: props.disabled,
focused: focused
}
});
};
Expand All @@ -36,6 +39,14 @@ export const MultiSelectItem = React.memo((props) => {
}
};

const onFocus = (event) => {
setFocused(true);
};

const onBlur = (event) => {
setFocused(false);
};

const checkboxIconProps = mergeProps(
{
className: cx('checkboxIcon')
Expand Down Expand Up @@ -71,6 +82,8 @@ export const MultiSelectItem = React.memo((props) => {
onClick: onClick,
tabIndex: tabIndex,
onKeyDown: onKeyDown,
onFocus: onFocus,
onBlur: onBlur,
role: 'option',
'aria-selected': props.selected,
'data-p-highlight': props.selected,
Expand Down
4 changes: 4 additions & 0 deletions components/lib/multiselect/multiselect.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,10 @@ export interface MultiSelectPassThroughOptions {
* Uses to pass attributes to the header's DOM element.
*/
header?: MultiSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Uses to pass attributes to the header checkbox's container DOM element.
*/
headerCheckboxContainer?: MultiSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
/**
* Uses to pass attributes to the header checkbox's DOM element.
*/
Expand Down
40 changes: 21 additions & 19 deletions components/lib/passthrough/tailwind/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1313,18 +1313,20 @@ const Tailwind = {
headerCheckboxContainer: {
className: classNames('inline-flex cursor-pointer select-none align-bottom relative', 'mr-2', 'w-6 h-6')
},
headerCheckbox: ({ context }) => ({
className: classNames(
'flex items-center justify-center',
'border-2 w-6 h-6 text-gray-600 dark:text-white/70 rounded-lg transition-colors duration-200',
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
{
'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !context.selected,
'border-blue-500 bg-blue-500': context.selected
}
)
}),
headercheckboxicon: 'w-4 h-4 transition-all duration-200 text-white text-base',
headerCheckbox: {
root: ({ props }) => ({
className: classNames(
'flex items-center justify-center',
'border-2 w-6 h-6 text-gray-600 dark:text-white/70 rounded-lg transition-colors duration-200',
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
{
'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !props?.checked,
'border-blue-500 bg-blue-500': props?.checked
}
)
})
},
headerCheckboxIcon: 'w-4 h-4 transition-all duration-200 text-white text-base',
closeButton: {
className: classNames(
'flex items-center justify-center overflow-hidden relative',
Expand All @@ -1333,7 +1335,7 @@ const Tailwind = {
'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
)
},
closeButtonIcon: 'w-4 h-4 inline-block',
closeIcon: 'w-4 h-4 inline-block',
wrapper: {
className: classNames('max-h-[200px] overflow-auto', 'bg-white text-gray-700 border-0 rounded-md shadow-lg', 'dark:bg-gray-900 dark:text-white/80')
},
Expand All @@ -1360,12 +1362,12 @@ const Tailwind = {
}
)
}),
checkboxicon: 'w-4 h-4 transition-all duration-200 text-white text-base',
itemgroup: {
checkboxIcon: 'w-4 h-4 transition-all duration-200 text-white text-base',
itemGroup: {
className: classNames('m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto')
},
filtercontainer: 'relative',
filterinput: {
filterContainer: 'relative',
filterInput: {
className: classNames(
'pr-7 -mr-7',
'w-full',
Expand All @@ -1374,8 +1376,8 @@ const Tailwind = {
'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
)
},
filtericon: '-mt-2 absolute top-1/2',
clearicon: 'text-gray-500 right-12 -mt-2 absolute top-1/2',
filterIcon: '-mt-2 absolute top-1/2',
clearIcon: 'text-gray-500 right-12 -mt-2 absolute top-1/2',
transition: TRANSITIONS.overlay
},
multistatecheckbox: {
Expand Down
Loading