@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
95 lines • 6.84 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.DropdownSelectedStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
const text_1 = require("../../components/text/text");
const useId_1 = require("../../hooks/useId/useId");
const role_1 = require("../../types/role/role");
const type_1 = require("../button/types/type");
const elementOrIcon_1 = require("../elementOrIcon/elementOrIcon");
const listOptions_1 = require("../listOptions/listOptions");
const type_2 = require("../listOptions/types/type");
const listOptions_utils_1 = require("../listOptions/utils/listOptions.utils");
const popoverControlled_1 = require("../popover/popoverControlled");
const component_1 = require("../popover/types/component");
const positionVariant_1 = require("../popover/types/positionVariant");
const component_2 = require("../text/types/component");
const dropdownSelected_styled_1 = require("./dropdownSelected.styled");
const DROPDOWN_SELECTED_BASE_ID = 'DropdownSelected';
const DropdownSelectedStandAloneComponent = ({ dataTestIdComponent = 'dropdown-selected', dataTestIdListOptionsContainer = 'list-options-container', ...props }, ref) => {
const BASE_ID = (0, useId_1.useId)(DROPDOWN_SELECTED_BASE_ID);
const POPOVER_ID = `${BASE_ID}-popover`;
const ariaControls = props.open ? `${BASE_ID}-list` : undefined;
const keyTabMove = (options) => (prevFocus, e) => {
// Go to the previous focusable element
if (e?.shiftKey) {
const newFocus = Math.max(prevFocus, 0) - 1;
// Prevent default if the next element is less than 0
// Go to the button
if (newFocus >= 0) {
e?.preventDefault();
}
return Math.max(newFocus, 0);
}
// Go to the next element focusable
const newFocus = Math.max(prevFocus, 0) + 1;
// Prevent default if the next element does not overflow the options length
// When preventDefault is not called, the focus is moved to the next element (outside the listOptions)
if (newFocus <= options.length - 1) {
e?.preventDefault();
}
return Math.min(newFocus, options.length - 1);
};
const roveFocusProps = (0, react_1.useMemo)(() => ({
size: props.listOptions.options.length,
keyDownMove: (0, listOptions_utils_1.keyDownMove)(props.listOptions.options),
keyUpMove: listOptions_utils_1.keyUpMove,
currentFocusSelected: -1,
keyRightMove: 0,
keyLeftMove: 0,
keyTabMove: keyTabMove(props.listOptions.options),
}), [props.listOptions.options]);
return ((0, jsx_runtime_1.jsxs)(dropdownSelected_styled_1.DropdrownSelectedContainerStyled, { ref: ref, "data-testid": dataTestIdComponent, styles: props.styles, onBlur: props.onBlur, onFocus: props.onFocus, onKeyDown: props.onKeyDown, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, children: [(0, jsx_runtime_1.jsxs)(dropdownSelected_styled_1.ButtonOrLinkContainerStyled, { ref: props.buttonOrLinkRef, "$rotate": props.open, "aria-controls": ariaControls, "aria-expanded": props.open, "aria-haspopup": role_1.ROLES.LISTBOX, as: props.component, styles: props.styles, target: !props.url ? undefined : props.urlTarget, type: !props.url ? type_1.ButtonType.BUTTON : undefined, url: props.url, onClick: props.onButtonClick, onKeyDown: props.onButtonKeyDown, children: [(0, jsx_runtime_1.jsx)(text_1.Text, { component: component_2.TextComponentType.SPAN, customTypography: props.open ? props.styles?.labelOpened : props.styles?.labelClosed, ...props.label, children: props.label.content }), (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { customIconStyles: props.open ? props.styles?.iconOpened : props.styles?.iconClosed, ...props.icon })] }), props.styles?.popover?.variant && ((0, jsx_runtime_1.jsx)(popoverControlled_1.PopoverControlled, { hasBackDrop: true, component: component_1.PopoverComponentType.DIV, focusFirstDescendantAutomatically: false, focusLastElementFocusedAfterClose: false, id: ariaControls, open: props.open, positionVariant: positionVariant_1.PopoverPositionVariantType.ABSOLUTE, pressEscapeClose: true, preventCloseOnClickElements: [props.buttonOrLinkRef?.current], trapFocusInsideModal: false, variant: props.styles?.popover.variant, ...props.popover, onCloseInternally: () => {
props.onClosePopover();
props.popover?.onCloseInternally?.();
}, children: (0, jsx_runtime_1.jsx)(dropdownSelected_styled_1.ListOptionsContainerStyled, { "data-testid": dataTestIdListOptionsContainer, styles: props.styles, children: props.styles?.listOptions?.optionVariant && props.styles.listOptions?.variant && ((0, jsx_runtime_1.jsx)(listOptions_1.ListOptions, { ref: props.listOptionsRef, optionVariant: props.styles.listOptions.optionVariant, roveFocus: props.listOptions.type === type_2.ListOptionsType.SELECTION ? roveFocusProps : undefined, selectedValue: props.optionSelected, variant: props.styles.listOptions.variant, ...props.listOptions, onOptionClick: value => {
props.onOptionClick(value);
props.onClosePopover();
} })) }) }))] }));
};
exports.DropdownSelectedStandAlone = react_1.default.forwardRef(DropdownSelectedStandAloneComponent);
//# sourceMappingURL=dropdownSelectedStandAlone.js.map