@razorpay/blade
Version:
The Design System that powers Razorpay
284 lines (279 loc) • 14 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { DropdownContext } from './useDropdown.js';
import { dropdownComponentIds } from './dropdownComponentIds.js';
import { useId } from '../../utils/useId.js';
import { ComponentIds } from '../BottomSheet/componentIds.js';
import { BottomSheetAndDropdownGlueContext } from '../BottomSheet/BottomSheetContext.js';
import '../Box/styledProps/index.js';
import '../Box/BaseBox/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import '../../utils/isValidAllowedChildren/index.js';
import '../../utils/metaAttribute/index.js';
import '../../utils/logger/index.js';
import { useControllableState } from '../../utils/useControllable.js';
import { mergeRefs } from '../../utils/useMergeRefs.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import { jsx } from 'react/jsx-runtime';
import { getComponentId, isValidAllowedChildren } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
import { throwBladeError } from '../../utils/logger/logger.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
var _excluded = ["children", "isOpen", "onOpenChange", "selectionType", "testID", "_width"];
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; }
var validDropdownChildren = [
// TODO: Remove Box once CountrySelector's button sizing is fixed
dropdownComponentIds.BaseBox, dropdownComponentIds.triggers.SelectInput, dropdownComponentIds.triggers.SearchInput, dropdownComponentIds.triggers.DropdownButton, dropdownComponentIds.triggers.DropdownIconButton, dropdownComponentIds.triggers.DropdownLink, dropdownComponentIds.DropdownOverlay, dropdownComponentIds.triggers.AutoComplete, ComponentIds.BottomSheet, dropdownComponentIds.triggers.FilterChipSelectInput];
/**
* ### Dropdown component
*
* Dropdown component is generic component that controls the dropdown functionality.
* It can be used with multiple triggers and mostly contains ActionList component inside it
*
* ---
*
* #### Usage
*
* ```jsx
* <Dropdown selectionType="single">
* <SelectInput />
* <DropdownOverlay>
* <ActionList>
* <ActionListItem />
* <ActionListItem />
* </ActionList>
* </DropdownOverlay>
* </Dropdown>
* ```
*
* ---
*
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-select--with-single-select Dropdown Documentation}
*/
var _Dropdown = function _Dropdown(_ref, ref) {
var children = _ref.children,
isOpenControlled = _ref.isOpen,
onOpenChange = _ref.onOpenChange,
_ref$selectionType = _ref.selectionType,
selectionType = _ref$selectionType === void 0 ? 'single' : _ref$selectionType,
testID = _ref.testID,
_width = _ref._width,
rest = _objectWithoutProperties(_ref, _excluded);
var _React$useState = React__default.useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
options = _React$useState2[0],
setOptions = _React$useState2[1];
var _React$useState3 = React__default.useState([]),
_React$useState4 = _slicedToArray(_React$useState3, 2),
filteredValues = _React$useState4[0],
setFilteredValues = _React$useState4[1];
var _React$useState5 = React__default.useState([]),
_React$useState6 = _slicedToArray(_React$useState5, 2),
selectedIndices = _React$useState6[0],
setSelectedIndices = _React$useState6[1];
var _React$useState7 = React__default.useState([]),
_React$useState8 = _slicedToArray(_React$useState7, 2),
controlledValueIndices = _React$useState8[0],
setControlledValueIndices = _React$useState8[1];
var _React$useState9 = React__default.useState(-1),
_React$useState10 = _slicedToArray(_React$useState9, 2),
activeIndex = _React$useState10[0],
setActiveIndex = _React$useState10[1];
var _React$useState11 = React__default.useState(-1),
_React$useState12 = _slicedToArray(_React$useState11, 2),
activeTagIndex = _React$useState12[0],
setActiveTagIndex = _React$useState12[1];
var _React$useState13 = React__default.useState(false),
_React$useState14 = _slicedToArray(_React$useState13, 2),
shouldIgnoreBlurAnimation = _React$useState14[0],
setShouldIgnoreBlurAnimation = _React$useState14[1];
var _React$useState15 = React__default.useState(false),
_React$useState16 = _slicedToArray(_React$useState15, 2),
hasFooterAction = _React$useState16[0],
setHasFooterAction = _React$useState16[1];
var _React$useState17 = React__default.useState(false),
_React$useState18 = _slicedToArray(_React$useState17, 2),
hasAutoCompleteInHeader = _React$useState18[0],
setHasAutoCompleteInHeader = _React$useState18[1];
var _React$useState19 = React__default.useState(false),
_React$useState20 = _slicedToArray(_React$useState19, 2),
hasUnControlledFilterChipSelectInput = _React$useState20[0],
setHasUnControlledFilterChipSelectInput = _React$useState20[1];
var _React$useState21 = React__default.useState(false),
_React$useState22 = _slicedToArray(_React$useState21, 2),
isKeydownPressed = _React$useState22[0],
setIsKeydownPressed = _React$useState22[1];
var _React$useState23 = React__default.useState(0),
_React$useState24 = _slicedToArray(_React$useState23, 2),
changeCallbackTriggerer = _React$useState24[0],
setChangeCallbackTriggerer = _React$useState24[1];
var _React$useState25 = React__default.useState(false),
_React$useState26 = _slicedToArray(_React$useState25, 2),
isControlled = _React$useState26[0],
setIsControlled = _React$useState26[1];
// keep track if dropdown contains bottomsheet
var _React$useState27 = React__default.useState(false),
_React$useState28 = _slicedToArray(_React$useState27, 2),
dropdownHasBottomSheet = _React$useState28[0],
setDropdownHasBottomSheet = _React$useState28[1];
/**
* In inputs, actual input is smaller than the visible input wrapper.
* You can set this reference in such cases so floating ui calculations happen correctly
* */
var triggererWrapperRef = React__default.useRef(null);
var triggererRef = React__default.useRef(null);
var headerAutoCompleteRef = React__default.useRef(null);
var actionListItemRef = React__default.useRef(null);
var dropdownTriggerer = React__default.useRef();
var isTagDismissedRef = React__default.useRef({
value: false
});
var visibleTagsCountRef = React__default.useRef({
value: 0
});
var dropdownContainerRef = React__default.useRef(null);
var dropdownBaseId = useId('dropdown');
var isDropdownOpenRef = React__default.useRef(isOpenControlled);
var _useControllableState = useControllableState({
value: isOpenControlled,
defaultValue: false,
onChange: function onChange(isOpenControlledValue) {
isDropdownOpenRef.current = isOpenControlledValue;
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpenControlledValue);
}
}),
_useControllableState2 = _slicedToArray(_useControllableState, 2),
isDropdownOpen = _useControllableState2[0],
setIsDropdownOpen = _useControllableState2[1];
isDropdownOpenRef.current = isDropdownOpen;
var setIsOpen = function setIsOpen(isOpenValue) {
isDropdownOpenRef.current = isOpenValue;
setIsDropdownOpen(function () {
return isOpenValue;
});
};
var close = React__default.useCallback(function () {
setActiveTagIndex(-1);
setIsOpen(false);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
React__default.Children.map(children, function (child) {
if ( /*#__PURE__*/React__default.isValidElement(child)) {
if (false) {
var _getComponentId;
if (!validDropdownChildren.includes((_getComponentId = getComponentId(child)) !== null && _getComponentId !== void 0 ? _getComponentId : '')) {
throwBladeError({
message: "Dropdown can only have one of following elements as children - \n\n ".concat(validDropdownChildren.join(', '), " \n\n Check out: https://blade.razorpay.com/?path=/story/components-dropdown"),
moduleName: 'Dropdown'
});
}
}
if (isValidAllowedChildren(child, dropdownComponentIds.triggers.SelectInput)) {
dropdownTriggerer.current = 'SelectInput';
}
if (isValidAllowedChildren(child, dropdownComponentIds.triggers.SearchInput)) {
dropdownTriggerer.current = 'SearchInput';
}
if (isValidAllowedChildren(child, dropdownComponentIds.triggers.DropdownButton)) {
dropdownTriggerer.current = 'DropdownButton';
}
if (isValidAllowedChildren(child, dropdownComponentIds.triggers.DropdownIconButton)) {
dropdownTriggerer.current = 'DropdownIconButton';
}
if (isValidAllowedChildren(child, dropdownComponentIds.triggers.AutoComplete)) {
dropdownTriggerer.current = 'AutoComplete';
}
if (isValidAllowedChildren(child, dropdownComponentIds.triggers.FilterChipSelectInput)) {
dropdownTriggerer.current = 'FilterChipSelectInput';
}
}
});
var contextValue = React__default.useMemo(function () {
return {
isOpen: isDropdownOpen,
setIsOpen: setIsOpen,
close: close,
selectedIndices: selectedIndices,
setSelectedIndices: setSelectedIndices,
controlledValueIndices: controlledValueIndices,
setControlledValueIndices: setControlledValueIndices,
options: options,
setOptions: setOptions,
filteredValues: filteredValues,
setFilteredValues: setFilteredValues,
activeIndex: activeIndex,
setActiveIndex: setActiveIndex,
activeTagIndex: activeTagIndex,
setActiveTagIndex: setActiveTagIndex,
visibleTagsCountRef: visibleTagsCountRef,
shouldIgnoreBlurAnimation: shouldIgnoreBlurAnimation,
setShouldIgnoreBlurAnimation: setShouldIgnoreBlurAnimation,
isKeydownPressed: isKeydownPressed,
setIsKeydownPressed: setIsKeydownPressed,
dropdownBaseId: dropdownBaseId,
triggererRef: triggererRef,
headerAutoCompleteRef: headerAutoCompleteRef,
triggererWrapperRef: triggererWrapperRef,
actionListItemRef: actionListItemRef,
selectionType: selectionType,
hasFooterAction: hasFooterAction,
setHasFooterAction: setHasFooterAction,
hasAutoCompleteInHeader: hasAutoCompleteInHeader,
setHasAutoCompleteInHeader: setHasAutoCompleteInHeader,
hasUnControlledFilterChipSelectInput: hasUnControlledFilterChipSelectInput,
setHasUnControlledFilterChipSelectInput: setHasUnControlledFilterChipSelectInput,
dropdownTriggerer: dropdownTriggerer.current,
changeCallbackTriggerer: changeCallbackTriggerer,
setChangeCallbackTriggerer: setChangeCallbackTriggerer,
isControlled: isControlled,
setIsControlled: setIsControlled,
isTagDismissedRef: isTagDismissedRef
};
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[isDropdownOpen, isOpenControlled, selectedIndices, controlledValueIndices, options, filteredValues, activeIndex, activeTagIndex, shouldIgnoreBlurAnimation, selectionType, hasFooterAction, isKeydownPressed, changeCallbackTriggerer, isControlled]);
var BottomSheetAndDropdownGlueContextValue = React__default.useMemo(function () {
return {
isOpen: isDropdownOpen,
dropdownHasBottomSheet: dropdownHasBottomSheet,
hasAutoCompleteInHeader: hasAutoCompleteInHeader,
setDropdownHasBottomSheet: setDropdownHasBottomSheet,
// This is the dismiss function which will be injected into the BottomSheet
// Basically <BottomSheet onDismiss={onBottomSheetDismiss} />
onBottomSheetDismiss: close
};
}, [dropdownHasBottomSheet, hasAutoCompleteInHeader, isDropdownOpen, close]);
return /*#__PURE__*/jsx(BottomSheetAndDropdownGlueContext.Provider, {
value: BottomSheetAndDropdownGlueContextValue,
children: /*#__PURE__*/jsx(DropdownContext.Provider, {
value: contextValue,
children: /*#__PURE__*/jsx(BaseBox
// eslint-disable-next-line @typescript-eslint/no-explicit-any
, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
ref: mergeRefs(ref, dropdownContainerRef)
}, metaAttribute({
name: MetaConstants.Dropdown,
testID: testID
})), getStyledProps(rest)), makeAnalyticsAttribute(rest)), {}, {
width: _width,
children: /*#__PURE__*/jsx(BaseBox, {
position: "relative",
textAlign: 'left',
children: children
})
}))
})
});
};
var Dropdown = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_Dropdown), {
componentId: dropdownComponentIds.Dropdown
});
export { Dropdown };
//# sourceMappingURL=Dropdown.js.map