@razorpay/blade
Version:
The Design System that powers Razorpay
97 lines (92 loc) • 4.45 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import React__default from 'react';
import { BaseDropdownInputTrigger } from './BaseDropdownInputTrigger.js';
import { useDropdown } from '../../Dropdown/useDropdown.js';
import '../../Box/BaseBox/index.js';
import '../../VisuallyHidden/index.web.js';
import '../../../utils/index.js';
import '../../../utils/assignWithoutSideEffects/index.js';
import { dropdownComponentIds } from '../../Dropdown/dropdownComponentIds.js';
import '../../../utils/makeAnalyticsAttribute/index.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
import { isReactNative } from '../../../utils/platform/isReactNative.js';
import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.web.js';
import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
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 _SelectInput = function _SelectInput(props, ref) {
var _useDropdown = useDropdown(),
value = _useDropdown.value,
triggererRef = _useDropdown.triggererRef,
onTriggerKeydown = _useDropdown.onTriggerKeydown,
_onTriggerClick = _useDropdown.onTriggerClick;
return (
/*#__PURE__*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
jsxs(BaseBox, {
position: "relative",
children: [!isReactNative() ? /*#__PURE__*/jsx(VisuallyHidden, {
children: /*#__PURE__*/jsx("input", _objectSpread(_objectSpread({
onFocus: function onFocus() {
var _triggererRef$current;
(_triggererRef$current = triggererRef.current) === null || _triggererRef$current === void 0 ? void 0 : _triggererRef$current.focus();
},
ref: ref,
tabIndex: -1,
required: props.isRequired,
name: props.name,
value: value
}, makeAnalyticsAttribute(props)), {}, {
// Adding onChange to surpass no onChange on controlled component warning
// eslint-disable-next-line @typescript-eslint/no-empty-function
onChange: function onChange() {}
// Accessibility is covered in the select input itself so we hide this field from a11y tree
,
"aria-hidden": true
}))
}) : null, /*#__PURE__*/jsx(BaseDropdownInputTrigger, _objectSpread(_objectSpread({}, props), {}, {
isSelectInput: true,
onTriggerKeydown: onTriggerKeydown,
onTriggerClick: function onTriggerClick(e) {
var _props$onClick;
_onTriggerClick();
props === null || props === void 0 ? void 0 : (_props$onClick = props.onClick) === null || _props$onClick === void 0 ? void 0 : _props$onClick.call(props, e);
}
}))]
})
);
};
/**
* ### SelectInput
*
* Our equivalent of `<select>` tag. Lets you select items from given options.
*
* To be used in combination of `Dropdown` and `ActionList` component
*
* ---
*
* #### Usage
*
* ```diff
* <Dropdown>
* + <SelectInput label="Select Fruits" />
* <DropdownOverlay>
* <ActionList>
* <ActionListItem title="Mango" value="mango" />
* <ActionListItem title="Apple" value="apple" />
* </ActionList>
* </DropdownOverlay>
* </Dropdown>
* ```
*
* ---
*
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-select--with-single-select SelectInput Documentation}.
*/
var SelectInput = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_SelectInput), {
componentId: dropdownComponentIds.triggers.SelectInput
});
export { SelectInput };
//# sourceMappingURL=SelectInput.js.map