@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
326 lines • 17.6 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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomOption = exports.CustomMenuList = exports.CustomMenuPortal = exports.CustomMenu = exports.CustomSingleValue = exports.CustomInput = exports.CustomValueContainer = exports.CustomIndicatorsContainer = exports.CustomControl = exports.CustomPlaceholder = exports.CustomMultiValue = exports.CustomClearIndication = exports.DropdownIndicatorCurrying = void 0;
const jsx_runtime_1 = require("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/>.
*/
const base_1 = require("@neo4j-ndl/base");
const classnames_1 = __importDefault(require("classnames"));
const react_1 = require("react");
const react_select_1 = require("react-select");
const checkbox_1 = require("../checkbox");
const ChevronDownIconOutline_1 = require("../icons/generated/heroIcons/ChevronDownIconOutline");
const XMarkIconOutline_1 = require("../icons/generated/heroIcons/XMarkIconOutline");
const tag_1 = require("../tag");
const theme_1 = require("../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();
} });
};
const DropdownIndicatorCurrying = ({ size, }) => function Component(props) {
const classes = (0, classnames_1.default)('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 ((0, jsx_runtime_1.jsx)(react_select_1.components.DropdownIndicator, Object.assign({}, props, { className: classes, innerProps: indicatorInnerProps, children: (0, jsx_runtime_1.jsx)(ChevronDownIconOutline_1.ChevronDownIconOutline, { className: "ndl-select-icon", style: {
transform: props.selectProps.menuIsOpen
? 'rotate(180deg)'
: 'rotate(0deg)',
transitionDuration: base_1.tokens.motion.duration.quick,
} }) })));
};
exports.DropdownIndicatorCurrying = DropdownIndicatorCurrying;
const CustomClearIndication = ({ size, }) => function Component(_a) {
var { className, innerProps } = _a, restProps = __rest(_a, ["className", "innerProps"]);
const classes = (0, classnames_1.default)('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 ((0, jsx_runtime_1.jsxs)(react_select_1.components.ClearIndicator, Object.assign({ className: classes, innerProps: safeInnerProps }, restProps, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "ndl-select-clear-button", onClick: handleClear, onKeyDown: handleKeyDown, "aria-label": "Clear selection", children: (0, jsx_runtime_1.jsx)(XMarkIconOutline_1.XMarkIconOutline, {}) }), (0, jsx_runtime_1.jsx)("div", { className: "ndl-select-divider" })] })));
};
exports.CustomClearIndication = CustomClearIndication;
const CustomMultiValue = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = (0, classnames_1.default)('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 ((0, jsx_runtime_1.jsx)(react_select_1.components.MultiValueContainer, Object.assign({}, restProps, { innerProps: {
className: classes,
}, children: (0, jsx_runtime_1.jsx)(tag_1.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 }) })));
};
exports.CustomMultiValue = CustomMultiValue;
const CustomPlaceholder = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = (0, classnames_1.default)('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 ((0, jsx_runtime_1.jsx)(react_select_1.components.Placeholder, Object.assign({}, restProps, { className: classes, children: children })));
};
exports.CustomPlaceholder = CustomPlaceholder;
const CustomControl = ({ size, isClean, errorText, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = (0, classnames_1.default)('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 ((0, jsx_runtime_1.jsx)(react_select_1.components.Control, Object.assign({}, restProps, { className: classes, innerProps: controlInnerProps, children: children })));
};
exports.CustomControl = CustomControl;
const CustomIndicatorsContainer = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = (0, classnames_1.default)('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 ((0, jsx_runtime_1.jsx)(react_select_1.components.IndicatorsContainer, Object.assign({}, restProps, { className: classes, children: children })));
};
exports.CustomIndicatorsContainer = CustomIndicatorsContainer;
const CustomValueContainer = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = (0, classnames_1.default)('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 ((0, jsx_runtime_1.jsx)(react_select_1.components.ValueContainer, Object.assign({}, restProps, { className: classes, children: children })));
};
exports.CustomValueContainer = CustomValueContainer;
const CustomInput = ({ size, errorText, errorTextId, helpText, helpTextId, }) => function Component(_a) {
var { className } = _a, restProps = __rest(_a, ["className"]);
const classes = (0, classnames_1.default)('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 = (0, react_1.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 ((0, jsx_runtime_1.jsx)(react_select_1.components.Input, Object.assign({}, restProps, { className: classes, "aria-describedby": combinedAriaDescribedBy })));
};
exports.CustomInput = CustomInput;
const CustomSingleValue = ({ size, }) => function Component(_a) {
var { className } = _a, restProps = __rest(_a, ["className"]);
const classes = (0, classnames_1.default)('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 (0, jsx_runtime_1.jsx)(react_select_1.components.SingleValue, Object.assign({}, restProps, { className: classes }));
};
exports.CustomSingleValue = CustomSingleValue;
/** Overrides that are part of the popover menu */
const CustomMenu = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const { themeClassName } = (0, theme_1.useNeedleTheme)();
const classes = (0, classnames_1.default)('ndl-select-menu', className, themeClassName, {
'ndl-is-multi': restProps.isMulti,
'ndl-large': size === 'large',
'ndl-medium': size === 'medium',
'ndl-small': size === 'small',
});
return ((0, jsx_runtime_1.jsx)(react_select_1.components.Menu, Object.assign({}, restProps, { className: classes, children: children })));
};
exports.CustomMenu = CustomMenu;
const CustomMenuPortal = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = (0, classnames_1.default)(className, 'ndl-select-menu-portal', {
'ndl-is-multi': restProps.isMulti,
'ndl-large': size === 'large',
'ndl-medium': size === 'medium',
'ndl-small': size === 'small',
});
return ((0, jsx_runtime_1.jsx)(react_select_1.components.MenuPortal, Object.assign({}, restProps, { className: classes, children: children })));
};
exports.CustomMenuPortal = CustomMenuPortal;
const CustomMenuList = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = (0, classnames_1.default)(className, 'ndl-select-menu-list', {
'ndl-is-multi': restProps.isMulti,
'ndl-large': size === 'large',
'ndl-medium': size === 'medium',
'ndl-small': size === 'small',
});
return ((0, jsx_runtime_1.jsx)(react_select_1.components.MenuList, Object.assign({}, restProps, { className: classes, children: children })));
};
exports.CustomMenuList = CustomMenuList;
const CustomOption = ({ size, }) => function Component(_a) {
var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
const classes = (0, classnames_1.default)(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 ((0, jsx_runtime_1.jsxs)(react_select_1.components.Option, Object.assign({}, restProps, { className: classes, innerProps: optionInnerProps, children: [restProps.isMulti === true && ((0, jsx_runtime_1.jsx)(checkbox_1.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] })));
};
exports.CustomOption = CustomOption;
//# sourceMappingURL=Overrides.js.map