@procore/core-react
Version:
React library of Procore Design Guidelines
660 lines (649 loc) • 31.1 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
var _excluded = ["circular", "onDragEnd", "onScrollBottom", "onSelect", "role", "onChangeActiveDescendant", "onKeyboardNavigation", "id", "multiple"],
_excluded2 = ["clickable", "item", "label", "labelId", "children", "id"],
_excluded3 = ["id", "children"],
_excluded4 = ["hasCheckbox", "children", "selected", "provided", "dndInstructionsId"],
_excluded5 = ["as", "children", "item", "onClick", "selected", "suggested", "disabled", "id", "role", "restoreFocus", "draggableId", "draggableIndex", "droppableIn"],
_excluded6 = ["selected", "disabled", "error", "indeterminate", "children", "role"],
_excluded7 = ["className", "i18nScope", "placeholder", "onChange", "value"],
_excluded8 = ["padding"];
function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
import { DragDropContext, Draggable, Droppable as DndDroppable } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration';
import { Grip } from '@procore/core-icons/dist';
import { useLabel } from '@react-aria/label';
import { useId } from '@react-aria/utils';
import React, { isValidElement, useEffect, useMemo, useState } from 'react';
import { flushSync } from 'react-dom';
import { Checkbox, FakeCheckbox } from '../Checkbox/Checkbox';
import { Typeahead } from '../Typeahead';
import { useI18nContext } from '../_hooks/I18n';
import { useZIndexContext } from '../_hooks/ZIndex';
import { colors } from '../_styles/colors';
import { addSubcomponents } from '../_utils/addSubcomponents';
import { mergeRefs } from '../_utils/mergeRefs';
import { StyledDroppable, StyledFooter, StyledGrip, StyledGroup, StyledGroupLabel, StyledHeader, StyledItem, StyledMenu, StyledOptions, StyledSearch, StyledWrapper } from './MenuImperative.styles';
import { createSensors } from './sensors';
var onScrollBottomThreshold = 8;
/**
* Finds the group element for a given droppable ID (from DnD result).
* Locates the Droppable via data-droppable-id, then returns its parent Group
* (ancestor with data-group="true") so we can read data-title for announcements.
*/
function findGroupByDroppableId(container, droppableId) {
var droppable = container === null || container === void 0 ? void 0 : container.querySelector("[data-droppable-id=\"".concat(droppableId, "\"]"));
if (!droppable) return null;
var group = droppable.closest('[data-group="true"]');
return group !== null && group !== void 0 ? group : null;
}
function noop() {}
function isScrolledToBottom(e) {
return e.currentTarget instanceof HTMLElement && e.currentTarget.scrollTop >= e.currentTarget.scrollHeight - e.currentTarget.clientHeight - onScrollBottomThreshold;
}
export var MenuContext = /*#__PURE__*/React.createContext({
a11yOptionsProps: {},
currentlyDroppableIn: [],
dndInstructionsId: '',
onHoverItem: noop,
onFocusItem: noop,
onBlurItem: noop,
onScrollBottom: noop,
onSelect: noop,
role: 'none'
});
export function useMenuContext() {
var context = React.useContext(MenuContext);
if (context === null) {
throw new Error('Cannot find `Menu` context, please wrap your component in `<MenuContext.Provider>`');
}
return context;
}
var IsInsideDroppableContext = /*#__PURE__*/React.createContext(false);
function useIsInsideDroppable() {
return React.useContext(IsInsideDroppableContext);
}
/**
* Usefully if navigation is controlled by search input or another input.
*
* @param ref MenuImperative ref
* @param enable True by default. Setting to false will change all props
* to undefined (except id in menuProps), so navigation controlled by menu itself is restored.
* @param options.menuId provide id otherwise it will be generated
* @since 11.5.0
*/
export var useMenuImperativeControlNavigation = function useMenuImperativeControlNavigation(ref) {
var enable = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var _id = options.menuId;
var id = useId(_id);
var _React$useState = React.useState(),
_React$useState2 = _slicedToArray(_React$useState, 2),
activeDescendant = _React$useState2[0],
setActiveDescendant = _React$useState2[1];
var _useState = useState(),
_useState2 = _slicedToArray(_useState, 2),
onKeyDown = _useState2[0],
setOnKeyDown = _useState2[1];
// ref is null on first render
React.useEffect(function () {
setOnKeyDown(function () {
var _ref$current;
return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.defaultKeyDownNavigationHandler;
});
}, []);
if (enable) {
var menuNavigationTriggerProps = {
'aria-activedescendant': activeDescendant,
'aria-controls': id,
onKeyDown: onKeyDown
};
var menuProps = {
onChangeActiveDescendant: setActiveDescendant,
id: id
};
return {
menuNavigationTriggerProps: menuNavigationTriggerProps,
menuProps: menuProps
};
} else {
return {
menuNavigationTriggerProps: {},
menuProps: {
id: id
}
};
}
};
function changeAriaActiveDescendantOnOptions() {
var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var menuRef = arguments.length > 1 ? arguments[1] : undefined;
var options = menuRef === null || menuRef === void 0 ? void 0 : menuRef.querySelector('[data-internal="menuimperative-options"]');
options === null || options === void 0 ? void 0 : options.setAttribute('aria-activedescendant', id);
}
var MenuImperative_ = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
var _ref$circular = _ref.circular,
circular = _ref$circular === void 0 ? false : _ref$circular,
_ref$onDragEnd = _ref.onDragEnd,
onDragEnd_ = _ref$onDragEnd === void 0 ? noop : _ref$onDragEnd,
_ref$onScrollBottom = _ref.onScrollBottom,
onScrollBottom_ = _ref$onScrollBottom === void 0 ? noop : _ref$onScrollBottom,
_ref$onSelect = _ref.onSelect,
onSelect_ = _ref$onSelect === void 0 ? noop : _ref$onSelect,
_ref$role = _ref.role,
role = _ref$role === void 0 ? 'none' : _ref$role,
onChangeActiveDescendant = _ref.onChangeActiveDescendant,
onKeyboardNavigation_ = _ref.onKeyboardNavigation,
id = _ref.id,
multiple = _ref.multiple,
props = _objectWithoutProperties(_ref, _excluded);
var ref = React.useRef(null);
var _useState3 = useState([]),
_useState4 = _slicedToArray(_useState3, 2),
currentlyDroppableIn = _useState4[0],
setCurrentlyDroppableIn = _useState4[1];
var i18n = useI18nContext();
var dndInstructionsId = useId();
// for context, used by Menu.Item
var onSelect = React.useCallback(function (selection) {
onSelect_(selection);
}, [onSelect_]);
var onChangeHighlight = onChangeActiveDescendant ? onChangeActiveDescendant : changeAriaActiveDescendantOnOptions;
var _useMemo = useMemo(function () {
return createSensors(ref, circular, onChangeHighlight);
}, [circular, onChangeHighlight]),
handleItemHover = _useMemo.handleItemHover,
handleItemFocus = _useMemo.handleItemFocus,
handleItemBlur = _useMemo.handleItemBlur,
defaultKeyDownNavigationHandler = _useMemo.handleKeyDown,
highlight = _useMemo.highlight,
highlighted = _useMemo.highlighted,
highlightFirst = _useMemo.highlightFirst,
highlightLast = _useMemo.highlightLast,
highlightSelected = _useMemo.highlightSelected,
highlightSuggested = _useMemo.highlightSuggested,
rehighlightCurrent = _useMemo.rehighlightCurrent,
prev = _useMemo.prev,
next = _useMemo.next,
select = _useMemo.select,
updateSelectCallback = _useMemo.updateSelectCallback,
setIsDragging = _useMemo.setIsDragging;
var commonA11yOptionProps = _defineProperty({
role: role,
id: id
}, 'aria-multiselectable', multiple);
var a11yOptionsProps = !onChangeActiveDescendant ? _objectSpread(_objectSpread({}, commonA11yOptionProps), {}, {
onKeyDown: onKeyboardNavigation_ !== null && onKeyboardNavigation_ !== void 0 ? onKeyboardNavigation_ : defaultKeyDownNavigationHandler,
tabIndex: 0
}) : _objectSpread(_objectSpread({}, commonA11yOptionProps), {}, {
onKeyDown: undefined,
tabIndex: undefined
});
updateSelectCallback(onSelect);
// exposes internal menu API
React.useImperativeHandle(forwardRef, function () {
return {
el: ref.current,
highlight: highlight,
highlighted: highlighted,
highlightFirst: highlightFirst,
highlightLast: highlightLast,
highlightSelected: highlightSelected,
highlightSuggested: highlightSuggested,
next: next,
prev: prev,
select: select,
defaultKeyDownNavigationHandler: defaultKeyDownNavigationHandler
};
});
useEffect(rehighlightCurrent);
function onDragStart(start, provided) {
var _findGroupByDroppable, _findGroupByDroppable2;
var itemInfo = JSON.parse(start.draggableId);
// flushSync needed to ensure proper behavior in Safari
flushSync(function () {
return setCurrentlyDroppableIn(itemInfo.droppableIn);
});
setIsDragging(true);
var startPosition = start.source.index + 1;
var startGroupTitle = (_findGroupByDroppable = (_findGroupByDroppable2 = findGroupByDroppableId(ref.current, start.source.droppableId)) === null || _findGroupByDroppable2 === void 0 ? void 0 : _findGroupByDroppable2.getAttribute('data-title')) !== null && _findGroupByDroppable !== void 0 ? _findGroupByDroppable : '';
var announcement = startGroupTitle ? i18n.t('core.menuImperative.dragStartWithGroup', {
startPosition: startPosition,
startGroupTitle: startGroupTitle
}) : i18n.t('core.menuImperative.dragStart', {
startPosition: startPosition
});
provided.announce(announcement);
}
var onDragUpdate = React.useCallback(function (_update, provided) {
var _findGroupByDroppable3, _findGroupByDroppable4, _update$destination, _findGroupByDroppable5, _findGroupByDroppable6;
var startPosition = _update.source.index + 1;
var startGroupTitle = (_findGroupByDroppable3 = (_findGroupByDroppable4 = findGroupByDroppableId(ref.current, _update.source.droppableId)) === null || _findGroupByDroppable4 === void 0 ? void 0 : _findGroupByDroppable4.getAttribute('data-title')) !== null && _findGroupByDroppable3 !== void 0 ? _findGroupByDroppable3 : '';
var endPosition = ((_update$destination = _update.destination) === null || _update$destination === void 0 ? void 0 : _update$destination.index) + 1;
var endGroupTitle = _update.destination ? (_findGroupByDroppable5 = (_findGroupByDroppable6 = findGroupByDroppableId(ref.current, _update.destination.droppableId)) === null || _findGroupByDroppable6 === void 0 ? void 0 : _findGroupByDroppable6.getAttribute('data-title')) !== null && _findGroupByDroppable5 !== void 0 ? _findGroupByDroppable5 : '' : '';
var announcement = startGroupTitle === endGroupTitle || !endGroupTitle || !startGroupTitle ? i18n.t('core.menuImperative.dragUpdate', {
startPosition: startPosition,
endPosition: endPosition
}) : i18n.t('core.menuImperative.dragUpdateWithGroup', {
startPosition: startPosition,
endPosition: endPosition,
startGroupTitle: startGroupTitle,
endGroupTitle: endGroupTitle
});
provided.announce(announcement);
}, []);
var onDragEnd = React.useCallback(function (result, provided) {
var _result$destination, _findGroupByDroppable7, _findGroupByDroppable8;
var endPosition = ((_result$destination = result.destination) === null || _result$destination === void 0 ? void 0 : _result$destination.index) + 1;
var endGroupTitle = result.destination ? (_findGroupByDroppable7 = (_findGroupByDroppable8 = findGroupByDroppableId(ref.current, result.destination.droppableId)) === null || _findGroupByDroppable8 === void 0 ? void 0 : _findGroupByDroppable8.getAttribute('data-title')) !== null && _findGroupByDroppable7 !== void 0 ? _findGroupByDroppable7 : '' : '';
var announcement = endGroupTitle ? i18n.t('core.menuImperative.dragEndWithGroup', {
endPosition: endPosition,
endGroupTitle: endGroupTitle
}) : i18n.t('core.menuImperative.dragEnd', {
endPosition: endPosition
});
provided.announce(announcement);
setCurrentlyDroppableIn([]);
setIsDragging(false);
if (result.reason === 'DROP' && result.destination) {
var itemInfo = JSON.parse(result.draggableId);
onDragEnd_({
draggableId: itemInfo.draggableId,
source: result.source,
destination: result.destination
});
}
}, [onDragEnd_, setIsDragging]);
// for context, used by Menu.Options
var onScrollBottom = React.useCallback(function (e) {
if (isScrolledToBottom(e)) {
onScrollBottom_(e);
}
}, [onScrollBottom_]);
return /*#__PURE__*/React.createElement(MenuContext.Provider, {
value: {
a11yOptionsProps: a11yOptionsProps,
currentlyDroppableIn: currentlyDroppableIn,
dndInstructionsId: dndInstructionsId,
onHoverItem: handleItemHover,
onFocusItem: handleItemFocus,
onBlurItem: handleItemBlur,
onScrollBottom: onScrollBottom,
onSelect: onSelect,
role: role
}
}, /*#__PURE__*/React.createElement(StyledWrapper, {
ref: ref
}, /*#__PURE__*/React.createElement(DragDropContext, {
onDragStart: onDragStart,
onDragUpdate: onDragUpdate,
onDragEnd: onDragEnd
}, /*#__PURE__*/React.createElement(StyledMenu, props))), /*#__PURE__*/React.createElement("div", {
id: dndInstructionsId,
hidden: true
}, i18n.t('core.menuImperative.dragAndDropInstructions')));
});
export var Group = /*#__PURE__*/React.forwardRef(function Group(_ref2, ref) {
var clickable = _ref2.clickable,
_ref2$item = _ref2.item,
item = _ref2$item === void 0 ? 'group' : _ref2$item,
label = _ref2.label,
labelId = _ref2.labelId,
children = _ref2.children,
id = _ref2.id,
props = _objectWithoutProperties(_ref2, _excluded2);
var _useLabel = useLabel({
id: id,
label: label !== null && label !== void 0 ? label : children,
labelElementType: 'span'
}),
fieldProps = _useLabel.fieldProps,
labelProps = _useLabel.labelProps;
if (labelId) {
fieldProps = _objectSpread(_objectSpread({}, fieldProps), {}, {
'aria-labelledby': labelId
});
labelProps = _objectSpread(_objectSpread({}, labelProps), {}, {
id: labelId
});
}
return /*#__PURE__*/React.createElement(StyledGroup, _extends({
ref: ref,
"data-group": true,
"data-value": JSON.stringify(item),
"data-title": label,
role: label ? 'group' : 'separator'
}, fieldProps, props), /*#__PURE__*/React.createElement(StyledGroupLabel, labelProps, label !== null && label !== void 0 ? label : children), label ? children : null);
});
function findDraggableRecursively(children, draggableId) {
var nodeChildren = React.Children.toArray(children);
for (var i = 0; i < nodeChildren.length; i++) {
var child = nodeChildren[i];
if ( /*#__PURE__*/isValidElement(child)) {
if ('draggableId' in child.props) {
if (child.props.draggableId === draggableId) {
return child;
}
} else {
var matchingChild = findDraggableRecursively(child.props.children, draggableId);
if (matchingChild) {
return matchingChild;
}
}
}
}
return null;
}
export function Droppable(_ref3) {
var id = _ref3.id,
children = _ref3.children,
props = _objectWithoutProperties(_ref3, _excluded3);
var ctx = useMenuContext();
var cloneZIndex = useZIndexContext().value;
function renderItemClone(provided, _snapshot, rubric) {
var _draggingChild$props;
var draggableInfo = JSON.parse(rubric.draggableId);
var draggingChild = findDraggableRecursively(children, draggableInfo.draggableId);
var cloneProps = (_draggingChild$props = draggingChild === null || draggingChild === void 0 ? void 0 : draggingChild.props) !== null && _draggingChild$props !== void 0 ? _draggingChild$props : {};
return /*#__PURE__*/React.createElement(ClonedItem, _extends({
hasCheckbox: (draggingChild === null || draggingChild === void 0 ? void 0 : draggingChild.type) === CheckboxItem,
provided: provided,
cloneZIndex: cloneZIndex,
dndInstructionsId: ctx.dndInstructionsId
}, cloneProps));
}
return /*#__PURE__*/React.createElement(DndDroppable, {
droppableId: id,
isDropDisabled: !ctx.currentlyDroppableIn.includes(id),
renderClone: renderItemClone
}, function (provided, snapshot) {
return /*#__PURE__*/React.createElement(StyledDroppable, _extends({
ref: provided.innerRef,
"data-droppable": true,
"data-droppable-id": id
}, props), /*#__PURE__*/React.createElement(IsInsideDroppableContext.Provider, {
value: true
}, children, provided.placeholder));
});
}
// creates a version of a draggable item that can be positioned correctly within modals
// this should always have the same appearance of an Item or CheckboxItem, but doesn't
// need to handle selection events, which can't be done while the item is being dragged
var ClonedItem = function ClonedItem(_ref4) {
var _ref4$hasCheckbox = _ref4.hasCheckbox,
hasCheckbox = _ref4$hasCheckbox === void 0 ? false : _ref4$hasCheckbox,
_ref4$children = _ref4.children,
children = _ref4$children === void 0 ? null : _ref4$children,
_ref4$selected = _ref4.selected,
selected = _ref4$selected === void 0 ? false : _ref4$selected,
provided = _ref4.provided,
dndInstructionsId = _ref4.dndInstructionsId,
props = _objectWithoutProperties(_ref4, _excluded4);
var itemProps = _objectSpread(_objectSpread({}, props), {}, {
'aria-describedby': dndInstructionsId,
$selected: selected
});
var itemChildren = hasCheckbox ? /*#__PURE__*/React.createElement(Checkbox, {
indeterminate: props.indeterminate,
error: props.error,
checked: selected,
onChange: noop
}, children) : children;
return /*#__PURE__*/React.createElement(StyledItem, _extends({
ref: provided.innerRef
}, provided.draggableProps, provided.dragHandleProps, itemProps, {
$isDraggable: true,
$isDragging: true,
style: _objectSpread(_objectSpread(_objectSpread({}, provided.draggableProps.style), props.style), {}, {
zIndex: props.cloneZIndex
})
}), /*#__PURE__*/React.createElement(StyledGrip, null, /*#__PURE__*/React.createElement(Grip, {
color: colors.gray45
})), itemChildren);
};
export var Item = /*#__PURE__*/React.forwardRef(function Item(_ref5,
/**
* TODO: although it is typed just fine from the outside (`<Menu.Item ref>` that is),
* an effort is required to type it properly here too
*/
forwardRef) {
var as = _ref5.as,
_ref5$children = _ref5.children,
children = _ref5$children === void 0 ? null : _ref5$children,
_ref5$item = _ref5.item,
item = _ref5$item === void 0 ? null : _ref5$item,
_ref5$onClick = _ref5.onClick,
onClick_ = _ref5$onClick === void 0 ? noop : _ref5$onClick,
_ref5$selected = _ref5.selected,
selected = _ref5$selected === void 0 ? false : _ref5$selected,
_ref5$suggested = _ref5.suggested,
suggested = _ref5$suggested === void 0 ? false : _ref5$suggested,
_ref5$disabled = _ref5.disabled,
disabled = _ref5$disabled === void 0 ? false : _ref5$disabled,
_id = _ref5.id,
role = _ref5.role,
restoreFocus = _ref5.restoreFocus,
draggableId = _ref5.draggableId,
draggableIndex = _ref5.draggableIndex,
droppableIn = _ref5.droppableIn,
props = _objectWithoutProperties(_ref5, _excluded5);
var id = useId(_id);
var ctx = useMenuContext();
var isInsideDroppable = useIsInsideDroppable();
var onClick = React.useCallback(function (event) {
if (disabled) return;
onClick_(event);
ctx.onSelect(_objectSpread({
item: item,
event: event,
group: false,
action: selected ? 'unselected' : 'selected'
}, restoreFocus === undefined ? {} : {
restoreFocus: restoreFocus
}));
}, [ctx, item, onClick_, disabled, selected]);
var contextRole;
var ariaSelected;
if (ctx.role === 'listbox') {
contextRole = 'option';
} else if (ctx.role === 'menu') {
contextRole = 'menuitem';
}
if ([role, contextRole].includes('option')) {
ariaSelected = selected ? true : undefined;
}
var ariaDescribedBy = isInsideDroppable ? ctx.dndInstructionsId : undefined;
var itemProps = _objectSpread(_objectSpread({
'aria-disabled': disabled ? true : undefined,
'aria-describedby': ariaDescribedBy
}, props), {}, {
'aria-selected': ariaSelected,
id: id,
role: role !== null && role !== void 0 ? role : contextRole,
onClick: onClick,
onMouseMove: function onMouseMove(e) {
return ctx.onHoverItem(e.currentTarget);
},
onFocus: function onFocus(e) {
return ctx.onFocusItem(e.currentTarget);
},
onBlur: function onBlur(e) {
return ctx.onBlurItem(e.currentTarget);
},
'data-group': false,
'data-value': JSON.stringify(item),
'data-selected': selected,
'data-suggested': suggested,
'data-disabled': disabled,
'data-restorefocus': restoreFocus,
$disabled: disabled,
$selected: selected
});
if (droppableIn !== undefined && draggableId !== undefined && draggableIndex !== undefined) {
// encoding id and valid droppables as the draggableId, so we can use them to determine where this item can be dropped
var droppableInfo = {
draggableId: draggableId,
droppableIn: Array.isArray(droppableIn) ? droppableIn : [droppableIn]
};
return /*#__PURE__*/React.createElement(Draggable, {
draggableId: JSON.stringify(droppableInfo),
index: draggableIndex,
isDragDisabled: disabled
}, function (provided) {
return /*#__PURE__*/React.createElement(StyledItem, _extends({
ref: mergeRefs(provided.innerRef, forwardRef),
as: as
}, provided.draggableProps, provided.dragHandleProps, itemProps, {
$isDraggable: !disabled,
style: _objectSpread(_objectSpread({}, provided.draggableProps.style), itemProps.style)
}), !disabled && /*#__PURE__*/React.createElement(StyledGrip, null, /*#__PURE__*/React.createElement(Grip, {
color: colors.gray45
})), children);
});
}
return /*#__PURE__*/React.createElement(StyledItem, _extends({
ref: forwardRef,
as: as
}, itemProps), children);
});
export var CheckboxItem = /*#__PURE__*/React.forwardRef(function CheckboxItem(_ref6, forwardRef) {
var _ref6$selected = _ref6.selected,
selected = _ref6$selected === void 0 ? false : _ref6$selected,
_ref6$disabled = _ref6.disabled,
disabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
_ref6$error = _ref6.error,
error = _ref6$error === void 0 ? false : _ref6$error,
_ref6$indeterminate = _ref6.indeterminate,
indeterminate = _ref6$indeterminate === void 0 ? false : _ref6$indeterminate,
_ref6$children = _ref6.children,
children = _ref6$children === void 0 ? null : _ref6$children,
role = _ref6.role,
props = _objectWithoutProperties(_ref6, _excluded6);
var ctx = useMenuContext();
var contextRole;
var ariaChecked;
var ariaSelected;
if (ctx.role === 'listbox') {
contextRole = 'option';
ariaSelected = selected ? true : undefined;
} else if (ctx.role === 'menu') {
contextRole = 'menuitemcheckbox';
if (indeterminate) {
ariaChecked = 'mixed';
} else {
ariaChecked = selected ? 'true' : 'false';
}
}
return /*#__PURE__*/React.createElement(Item, _extends({
"aria-checked": ariaChecked,
"aria-disabled": disabled ? true : undefined,
"aria-selected": ariaSelected
}, props, {
role: role !== null && role !== void 0 ? role : contextRole,
selected: selected,
disabled: disabled,
ref: forwardRef
}), /*#__PURE__*/React.createElement(FakeCheckbox, {
indeterminate: indeterminate,
error: error,
disabled: disabled,
checked: selected
}, children));
});
export var Options = /*#__PURE__*/React.forwardRef(function Options(props, ref) {
var ctx = useMenuContext();
var i18n = useI18nContext();
return /*#__PURE__*/React.createElement(StyledOptions, _extends({
"aria-label": i18n.t('core.menuImperative.options.ariaLabel')
}, props, ctx.a11yOptionsProps, {
"data-internal": "menuimperative-options",
ref: ref,
onScroll: ctx.onScrollBottom
}));
});
export var Search = function Search(_ref7) {
var className = _ref7.className,
_ref7$i18nScope = _ref7.i18nScope,
i18nScope = _ref7$i18nScope === void 0 ? 'core.menu' : _ref7$i18nScope,
placeholder = _ref7.placeholder,
_onChange = _ref7.onChange,
valueProp = _ref7.value,
props = _objectWithoutProperties(_ref7, _excluded7);
var I18n = useI18nContext();
var isControlled = valueProp !== undefined;
var _React$useState3 = React.useState(''),
_React$useState4 = _slicedToArray(_React$useState3, 2),
internalValue = _React$useState4[0],
setInternalValue = _React$useState4[1];
var value = isControlled ? valueProp : internalValue;
var onChange = React.useCallback(function (value, event) {
if (!isControlled) {
setInternalValue(value);
}
_onChange === null || _onChange === void 0 ? void 0 : _onChange(event);
}, [_onChange, isControlled]);
// intentionally changed to type text + searchbox,
// voiceOver focus goes to clear button when no results in Chrome
return /*#__PURE__*/React.createElement(StyledSearch, {
className: className
}, /*#__PURE__*/React.createElement(Typeahead, _extends({}, props, {
type: "text",
role: "searchbox",
autoFocus: true,
placeholder: placeholder || I18n.t('search', {
scope: i18nScope
}),
onChange: onChange,
value: value
})));
};
export var Header = /*#__PURE__*/React.forwardRef(function Header(_ref8, ref) {
var props = _extends({}, (_objectDestructuringEmpty(_ref8), _ref8));
return /*#__PURE__*/React.createElement(StyledHeader, _extends({
ref: ref
}, props));
});
export var Footer = /*#__PURE__*/React.forwardRef(function Footer(_ref9, ref) {
var _ref9$padding = _ref9.padding,
padding = _ref9$padding === void 0 ? 'md lg' : _ref9$padding,
props = _objectWithoutProperties(_ref9, _excluded8);
return /*#__PURE__*/React.createElement(StyledFooter, _extends({
ref: ref,
padding: padding
}, props));
});
MenuImperative_.displayName = 'Menu';
Droppable.displayName = 'Menu.Droppable';
Footer.displayName = 'Menu.Footer';
Group.displayName = 'Menu.Group';
Header.displayName = 'Menu.Header';
Item.displayName = 'Menu.Item';
Options.displayName = 'Menu.Options';
Search.displayName = 'Menu.Search';
/**
@since 10.19.0
@see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-menu-imperative--demo)
*/
export var MenuImperative = addSubcomponents({
CheckboxItem: CheckboxItem,
Droppable: Droppable,
Footer: Footer,
Group: Group,
Header: Header,
Item: Item,
Options: Options,
Search: Search
}, MenuImperative_);
//# sourceMappingURL=MenuImperative.js.map