@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
307 lines • 15.7 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { tokens } from '@neo4j-ndl/base';
import classNames from 'classnames';
import { useMemo } from 'react';
import { components, } from 'react-select';
import { Checkbox } from '../checkbox';
import { ChevronDownIconOutline } from '../icons/generated/heroIcons/ChevronDownIconOutline';
import { XMarkIconOutline } from '../icons/generated/heroIcons/XMarkIconOutline';
import { Tag } from '../tag';
import { useNeedleTheme } from '../theme';
/**
* React-select triggers control/indicator interactions on mouseDown which breaks WCAG 2.5.2 Pointer Cancellation.
* This helper shifts mouseDown to mouseUp to allow users to cancel by dragging away.
*/
const shiftMouseDownToMouseUp = (innerProps, stopPropagation = false) => {
const baseProps = innerProps !== null && innerProps !== void 0 ? innerProps : {};
const maybeStopPropagation = (e) => stopPropagation && e.stopPropagation();
return Object.assign(Object.assign({}, baseProps), { onMouseDown: (e) => {
e.preventDefault();
maybeStopPropagation(e);
}, onMouseUp: (e) => {
var _a, _b;
(_a = baseProps.onMouseUp) === null || _a === void 0 ? void 0 : _a.call(baseProps, e);
(_b = baseProps.onMouseDown) === null || _b === void 0 ? void 0 : _b.call(baseProps, e);
maybeStopPropagation(e);
}, onTouchEnd: (e) => {
var _a, _b;
(_a = baseProps.onTouchEnd) === null || _a === void 0 ? void 0 : _a.call(baseProps, e);
(_b = baseProps.onMouseDown) === null || _b === void 0 ? void 0 : _b.call(baseProps, e);
maybeStopPropagation(e);
}, onTouchStart: (e) => {
e.preventDefault();
maybeStopPropagation(e);
} });
};
/**
* React-select triggers option selection on click which fires on mouseDown.
* This helper shifts the click handler to mouseUp/touchEnd to allow users to cancel by dragging away.
*/
const shiftOptionClickToMouseUp = (innerProps) => {
const baseProps = innerProps !== null && innerProps !== void 0 ? innerProps : {};
return Object.assign(Object.assign({}, baseProps), {
// Remove onClick to prevent double-execution (onMouseUp already calls it, and browser would fire click after mouseup)
onClick: undefined, onMouseDown: (event) => {
event.preventDefault();
}, onMouseUp: (event) => {
var _a, _b;
(_a = baseProps.onMouseUp) === null || _a === void 0 ? void 0 : _a.call(baseProps, event);
(_b = baseProps.onClick) === null || _b === void 0 ? void 0 : _b.call(baseProps, event);
}, onTouchEnd: (event) => {
var _a, _b;
(_a = baseProps.onTouchEnd) === null || _a === void 0 ? void 0 : _a.call(baseProps, event);
(_b = baseProps.onClick) === null || _b === void 0 ? void 0 : _b.call(baseProps, event);
}, onTouchStart: (event) => {
event.preventDefault();
} });
};
export const DropdownIndicatorCurrying = ({ size, }) => function Component(props) {
const classes = classNames('ndl-select-dropdown-indicator', {
'ndl-disabled': props.isDisabled,
'ndl-focused': props.isFocused,
'ndl-is-multi': props.isMulti,
'ndl-large': size === 'large',
'ndl-medium': size === 'medium',
'ndl-small': size === 'small',
});
// stopPropagation so that we prevent the control from also toggling the menu (double-toggle)
const indicatorInnerProps = shiftMouseDownToMouseUp(props.innerProps, true);
return (_jsx(components.DropdownIndicator, Object.assign({}, props, { className: classes, innerProps: indicatorInnerProps, children: _jsx(ChevronDownIconOutline, { className: "ndl-select-icon", style: {
transform: props.selectProps.menuIsOpen
? 'rotate(180deg)'
: 'rotate(0deg)',
transitionDuration: tokens.motion.duration.quick,
} }) })));
};
export const CustomClearIndication = ({ size, }) => function Component(_a) {
var { className, innerProps } = _a, restProps = __rest(_a, ["className", "innerProps"]);
const classes = classNames('ndl-select-clear', className, {
'ndl-focused': restProps.isFocused,
'ndl-is-multi': restProps.isMulti,
'ndl-large': size === 'large',
'ndl-medium': size === 'medium',
'ndl-small': size === 'small',
});
const handleClear = () => {
var _a;
(_a = restProps.clearValue) === null || _a === void 0 ? void 0 : _a.call(restProps);
};
// Stop propagation to prevent react-select's keyboard handling.
const handleKeyDown = (event) => {
var _a, _b;
if (event.key === '') {
event.preventDefault();
}
event.stopPropagation();
(_b = (_a = event.nativeEvent).stopImmediatePropagation) === null || _b === void 0 ? void 0 : _b.call(_a);
};
// Prevent react-select's default clear-on-mousedown/touchend behavior.
const preventAndStop = (e) => {
e.preventDefault();
e.stopPropagation();
};
const safeInnerProps = Object.assign(Object.assign({}, innerProps), { 'aria-hidden': undefined, onMouseDown: preventAndStop, onMouseUp: preventAndStop, onTouchEnd: preventAndStop });
return (_jsxs(components.ClearIndicator, Object.assign({ className: classes, innerProps: safeInnerProps }, restProps, { children: [_jsx("button", { type: "button", className: "ndl-select-clear-button", onClick: handleClear, onKeyDown: handleKeyDown, "aria-label": "Clear selection", children: _jsx(XMarkIconOutline, {}) }), _jsx("div", { className: "ndl-select-divider" })] })));
};
export const CustomMultiValue = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = classNames('ndl-select-multi-value', className, {
'ndl-disabled': restProps.isDisabled,
'ndl-focused': restProps.isFocused,
'ndl-is-multi': restProps.isMulti,
'ndl-large': size === 'large',
'ndl-medium': size === 'medium',
'ndl-small': size === 'small',
});
return (_jsx(components.MultiValueContainer, Object.assign({}, restProps, { innerProps: {
className: classes,
}, children: _jsx(Tag, { size: size, onClick: (e) => {
var _a, _b;
e.preventDefault();
(_b = (_a = restProps.removeProps).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
}, htmlAttributes: {
onMouseDown: (e) => e.preventDefault(),
}, children: children }) })));
};
export const CustomPlaceholder = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = classNames('ndl-select-placeholder', className, {
'ndl-disabled': restProps.isDisabled,
'ndl-focused': restProps.isFocused,
'ndl-is-multi': restProps.isMulti,
'ndl-large': size === 'large',
'ndl-medium': size === 'medium',
'ndl-small': size === 'small',
});
return (_jsx(components.Placeholder, Object.assign({}, restProps, { className: classes, children: children })));
};
export const CustomControl = ({ size, isClean, errorText, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = classNames('ndl-select-control', className, {
'ndl-clean': isClean,
'ndl-disabled': restProps.isDisabled,
'ndl-focused': restProps.isFocused,
'ndl-has-error': !!errorText,
'ndl-is-multi': restProps.isMulti,
'ndl-large': size === 'large',
'ndl-medium': size === 'medium',
'ndl-small': size === 'small',
});
const controlInnerProps = shiftMouseDownToMouseUp(restProps.innerProps);
return (_jsx(components.Control, Object.assign({}, restProps, { className: classes, innerProps: controlInnerProps, children: children })));
};
export const CustomIndicatorsContainer = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = classNames('ndl-select-indicators-container', className, {
'ndl-disabled': restProps.isDisabled,
'ndl-is-multi': restProps.isMulti,
'ndl-large': size === 'large',
'ndl-medium': size === 'medium',
'ndl-small': size === 'small',
});
return (_jsx(components.IndicatorsContainer, Object.assign({}, restProps, { className: classes, children: children })));
};
export const CustomValueContainer = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = classNames('ndl-select-value-container', className, {
'ndl-disabled': restProps.isDisabled,
'ndl-is-multi': restProps.isMulti,
'ndl-large': size === 'large',
'ndl-medium': size === 'medium',
'ndl-small': size === 'small',
});
return (_jsx(components.ValueContainer, Object.assign({}, restProps, { className: classes, children: children })));
};
export const CustomInput = ({ size, errorText, errorTextId, helpText, helpTextId, }) => function Component(_a) {
var { className } = _a, restProps = __rest(_a, ["className"]);
const classes = classNames('ndl-select-input', className, {
'ndl-disabled': restProps.isDisabled,
'ndl-is-multi': restProps.isMulti,
'ndl-large': size === 'large',
'ndl-medium': size === 'medium',
'ndl-small': size === 'small',
});
const defaultAriaDescribedBy = restProps['aria-describedby'];
const combinedAriaDescribedBy = useMemo(() => {
const ariaDescribedBy = [];
if (defaultAriaDescribedBy) {
ariaDescribedBy.push(defaultAriaDescribedBy);
}
if (helpText && !errorText && helpTextId) {
ariaDescribedBy.push(helpTextId);
}
else if (errorText && errorTextId) {
ariaDescribedBy.push(errorTextId);
}
return ariaDescribedBy.join(' ');
}, [defaultAriaDescribedBy]);
return (_jsx(components.Input, Object.assign({}, restProps, { className: classes, "aria-describedby": combinedAriaDescribedBy })));
};
export const CustomSingleValue = ({ size, }) => function Component(_a) {
var { className } = _a, restProps = __rest(_a, ["className"]);
const classes = classNames('ndl-select-single-value', className, {
'ndl-disabled': restProps.isDisabled,
'ndl-is-multi': restProps.isMulti,
'ndl-large': size === 'large',
'ndl-medium': size === 'medium',
'ndl-small': size === 'small',
});
return _jsx(components.SingleValue, Object.assign({}, restProps, { className: classes }));
};
/** Overrides that are part of the popover menu */
export const CustomMenu = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const { themeClassName } = useNeedleTheme();
const classes = classNames('ndl-select-menu', className, themeClassName, {
'ndl-is-multi': restProps.isMulti,
'ndl-large': size === 'large',
'ndl-medium': size === 'medium',
'ndl-small': size === 'small',
});
return (_jsx(components.Menu, Object.assign({}, restProps, { className: classes, children: children })));
};
export const CustomMenuPortal = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = classNames(className, 'ndl-select-menu-portal', {
'ndl-is-multi': restProps.isMulti,
'ndl-large': size === 'large',
'ndl-medium': size === 'medium',
'ndl-small': size === 'small',
});
return (_jsx(components.MenuPortal, Object.assign({}, restProps, { className: classes, children: children })));
};
export const CustomMenuList = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = classNames(className, 'ndl-select-menu-list', {
'ndl-is-multi': restProps.isMulti,
'ndl-large': size === 'large',
'ndl-medium': size === 'medium',
'ndl-small': size === 'small',
});
return (_jsx(components.MenuList, Object.assign({}, restProps, { className: classes, children: children })));
};
export const CustomOption = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = classNames(className, 'ndl-select-option', {
'ndl-disabled': restProps.isDisabled,
'ndl-focused': restProps.isFocused,
'ndl-is-multi': restProps.isMulti,
'ndl-large': size === 'large',
'ndl-medium': size === 'medium',
'ndl-selected': restProps.isSelected,
'ndl-small': size === 'small',
});
const optionInnerProps = shiftOptionClickToMouseUp(restProps.innerProps);
return (_jsxs(components.Option, Object.assign({}, restProps, { className: classes, innerProps: optionInnerProps, children: [restProps.isMulti === true && (_jsx(Checkbox, { isChecked: restProps.isSelected, ariaLabel: restProps.label, isDisabled: restProps.isDisabled, htmlAttributes: {
'aria-hidden': true,
disabled: true,
onPointerDown: (e) => {
e.preventDefault();
},
onPointerUp: (e) => {
var _a, _b;
(_b = (_a = restProps.innerProps).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
},
onTouchEnd: (e) => {
var _a, _b;
(_b = (_a = restProps.innerProps).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
},
onTouchStart: (e) => {
e.preventDefault();
},
role: 'presentation',
tabIndex: -1,
} })), children] })));
};
//# sourceMappingURL=Overrides.js.map