Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@blueprintjs/select
Advanced tools
@blueprintjs/select - npm Package Compare versions
Comparing version 4.4.0 to 4.4.1
@@ -6,4 +6,6 @@ export declare const MULTISELECT: string; | ||
| export declare const OMNIBAR_OVERLAY: string; | ||
| /** @deprecated this class name is not rendered by any component in this package */ | ||
| export declare const SELECT: string; | ||
| export declare const SELECT_POPOVER: string; | ||
| export declare const SELECT_MATCH_TARGET_WIDTH: string; | ||
| export declare const SUGGEST_POPOVER: string; |
@@ -18,3 +18,3 @@ "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| exports.SELECT_MATCH_TARGET_WIDTH = exports.SELECT_POPOVER = exports.SELECT = exports.OMNIBAR_OVERLAY = exports.OMNIBAR = exports.MULTISELECT_TAG_INPUT_INPUT = exports.MULTISELECT_POPOVER = exports.MULTISELECT = void 0; | ||
| exports.SUGGEST_POPOVER = exports.SELECT_MATCH_TARGET_WIDTH = exports.SELECT_POPOVER = exports.SELECT = exports.OMNIBAR_OVERLAY = exports.OMNIBAR = exports.MULTISELECT_TAG_INPUT_INPUT = exports.MULTISELECT_POPOVER = exports.MULTISELECT = void 0; | ||
| var core_1 = require("@blueprintjs/core"); | ||
@@ -27,5 +27,7 @@ var NS = core_1.Classes.getClassNamespace(); | ||
| exports.OMNIBAR_OVERLAY = "".concat(exports.OMNIBAR, "-overlay"); | ||
| /** @deprecated this class name is not rendered by any component in this package */ | ||
| exports.SELECT = "".concat(NS, "-select"); | ||
| exports.SELECT_POPOVER = "".concat(exports.SELECT, "-popover"); | ||
| exports.SELECT_MATCH_TARGET_WIDTH = "".concat(exports.SELECT, "-match-target-width"); | ||
| exports.SELECT_POPOVER = "".concat(NS, "-select-popover"); | ||
| exports.SELECT_MATCH_TARGET_WIDTH = "".concat(NS, "-select-match-target-width"); | ||
| exports.SUGGEST_POPOVER = "".concat(NS, "-suggest-popover"); | ||
| //# sourceMappingURL=classes.js.map |
@@ -38,2 +38,6 @@ /// <reference types="react" /> | ||
| /** | ||
| * Props to apply to the `Menu` created within the `itemListRenderer` | ||
| */ | ||
| menuProps?: React.HTMLAttributes<HTMLUListElement>; | ||
| /** | ||
| * Call this function to render an item. | ||
@@ -40,0 +44,0 @@ * This retrieves the modifiers for the item and delegates actual rendering |
@@ -14,3 +14,3 @@ /// <reference types="react" /> | ||
| */ | ||
| popoverProps?: Partial<Omit<Popover2Props, "content">>; | ||
| popoverProps?: Partial<Omit<Popover2Props, "content" | "defaultIsOpen" | "disabled" | "fill" | "renderTarget" | "targetTagName">>; | ||
| /** | ||
@@ -17,0 +17,0 @@ * Optional ref for the Popover2 component instance. |
@@ -56,3 +56,3 @@ import * as React from "react"; | ||
| /** Controlled selected values. */ | ||
| selectedItems?: T[]; | ||
| selectedItems: T[]; | ||
| /** | ||
@@ -59,0 +59,0 @@ * Props to spread to `TagInput`. |
@@ -63,3 +63,3 @@ "use strict"; | ||
| var _isOpen = _a.isOpen, ref = _a.ref, targetProps = tslib_1.__rest(_a, ["isOpen", "ref"]); | ||
| var _d = _this.props, disabled = _d.disabled, fill = _d.fill, onClear = _d.onClear, placeholder = _d.placeholder, _e = _d.popoverTargetProps, popoverTargetProps = _e === void 0 ? {} : _e, _f = _d.selectedItems, selectedItems = _f === void 0 ? [] : _f, _g = _d.tagInputProps, tagInputProps = _g === void 0 ? {} : _g; | ||
| var _d = _this.props, disabled = _d.disabled, fill = _d.fill, onClear = _d.onClear, placeholder = _d.placeholder, _e = _d.popoverTargetProps, popoverTargetProps = _e === void 0 ? {} : _e, selectedItems = _d.selectedItems, _f = _d.tagInputProps, tagInputProps = _f === void 0 ? {} : _f; | ||
| var handleKeyDown = listProps.handleKeyDown, handleKeyUp = listProps.handleKeyUp; | ||
@@ -74,3 +74,6 @@ if (disabled) { | ||
| var inputProps = tslib_1.__assign(tslib_1.__assign({}, tagInputProps.inputProps), { className: (0, classnames_1.default)((_c = tagInputProps.inputProps) === null || _c === void 0 ? void 0 : _c.className, common_1.Classes.MULTISELECT_TAG_INPUT_INPUT) }); | ||
| var maybeClearButton = onClear !== undefined && selectedItems.length > 0 ? (React.createElement(core_1.Button, { disabled: disabled, icon: "cross", minimal: true, onClick: _this.handleClearButtonClick })) : undefined; | ||
| var maybeClearButton = onClear !== undefined && selectedItems.length > 0 ? ( | ||
| // use both aria-label and title a11y attributes here, for screen readers | ||
| // and mouseover interactions respectively | ||
| React.createElement(core_1.Button, { "aria-label": "Clear selected items", disabled: disabled, icon: "cross", minimal: true, onClick: _this.handleClearButtonClick, title: "Clear selected items" })) : undefined; | ||
| return (React.createElement("div", tslib_1.__assign({ "aria-autocomplete": "list", "aria-controls": _this.listboxId }, popoverTargetProps, targetProps, { "aria-expanded": isOpen, | ||
@@ -128,3 +131,3 @@ // Note that we must set FILL here in addition to TagInput to get the wrapper element to full width | ||
| var _a, _b; | ||
| var _c = _this.props, _d = _c.selectedItems, selectedItems = _d === void 0 ? [] : _d, onRemove = _c.onRemove, tagInputProps = _c.tagInputProps; | ||
| var _c = _this.props, selectedItems = _c.selectedItems, onRemove = _c.onRemove, tagInputProps = _c.tagInputProps; | ||
| onRemove === null || onRemove === void 0 ? void 0 : onRemove(selectedItems[index], index); | ||
@@ -131,0 +134,0 @@ (_a = tagInputProps === null || tagInputProps === void 0 ? void 0 : tagInputProps.onRemove) === null || _a === void 0 ? void 0 : _a.call(tagInputProps, tag, index); |
@@ -60,3 +60,3 @@ "use strict"; | ||
| _this.renderItemList = function (listProps) { | ||
| var _a = _this.props, initialContent = _a.initialContent, noResults = _a.noResults, menuProps = _a.menuProps; | ||
| var _a = _this.props, initialContent = _a.initialContent, noResults = _a.noResults; | ||
| // omit noResults if createNewItemFromQuery and createNewItemRenderer are both supplied, and query is not empty | ||
@@ -70,3 +70,3 @@ var createItemView = listProps.renderCreateItem(); | ||
| var createFirst = _this.isCreateItemFirst(); | ||
| return (React.createElement(core_1.Menu, tslib_1.__assign({ role: "listbox" }, menuProps, { ulRef: listProps.itemsParentRef }), | ||
| return (React.createElement(core_1.Menu, tslib_1.__assign({ role: "listbox" }, listProps.menuProps, { ulRef: listProps.itemsParentRef }), | ||
| createFirst && createItemView, | ||
@@ -219,5 +219,5 @@ menuContent, | ||
| QueryList.prototype.render = function () { | ||
| var _a = this.props, className = _a.className, items = _a.items, renderer = _a.renderer, _b = _a.itemListRenderer, itemListRenderer = _b === void 0 ? this.renderItemList : _b; | ||
| var _a = this.props, className = _a.className, items = _a.items, renderer = _a.renderer, _b = _a.itemListRenderer, itemListRenderer = _b === void 0 ? this.renderItemList : _b, menuProps = _a.menuProps; | ||
| var _c = this.state, createNewItem = _c.createNewItem, spreadableState = tslib_1.__rest(_c, ["createNewItem"]); | ||
| return renderer(tslib_1.__assign(tslib_1.__assign({}, spreadableState), { className: className, handleItemSelect: this.handleItemSelect, handleKeyDown: this.handleKeyDown, handleKeyUp: this.handleKeyUp, handlePaste: this.handlePaste, handleQueryChange: this.handleInputQueryChange, itemList: itemListRenderer(tslib_1.__assign(tslib_1.__assign({}, spreadableState), { items: items, itemsParentRef: this.refHandlers.itemsParent, renderCreateItem: this.renderCreateItemMenuItem, renderItem: this.renderItem })) })); | ||
| return renderer(tslib_1.__assign(tslib_1.__assign({}, spreadableState), { className: className, handleItemSelect: this.handleItemSelect, handleKeyDown: this.handleKeyDown, handleKeyUp: this.handleKeyUp, handlePaste: this.handlePaste, handleQueryChange: this.handleInputQueryChange, itemList: itemListRenderer(tslib_1.__assign(tslib_1.__assign({}, spreadableState), { items: items, itemsParentRef: this.refHandlers.itemsParent, menuProps: menuProps, renderCreateItem: this.renderCreateItemMenuItem, renderItem: this.renderItem })) })); | ||
| }; | ||
@@ -224,0 +224,0 @@ QueryList.prototype.componentDidUpdate = function (prevProps) { |
@@ -42,9 +42,7 @@ "use strict"; | ||
| // not using defaultProps cuz they're hard to type with generics (can't use <T> on static members) | ||
| var _a = _this.props, fill = _a.fill, _b = _a.filterable, filterable = _b === void 0 ? true : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.inputProps, inputProps = _d === void 0 ? {} : _d, _e = _a.popoverContentProps, popoverContentProps = _e === void 0 ? {} : _e, _f = _a.popoverProps, popoverProps = _f === void 0 ? {} : _f, popoverRef = _a.popoverRef; | ||
| if (fill) { | ||
| popoverProps.fill = true; | ||
| } | ||
| var _a = _this.props, _b = _a.filterable, filterable = _b === void 0 ? true : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.inputProps, inputProps = _d === void 0 ? {} : _d, _e = _a.popoverContentProps, popoverContentProps = _e === void 0 ? {} : _e, _f = _a.popoverProps, popoverProps = _f === void 0 ? {} : _f, popoverRef = _a.popoverRef; | ||
| var input = (React.createElement(core_1.InputGroup, tslib_1.__assign({ "aria-autocomplete": "list", leftIcon: "search", placeholder: "Filter...", rightElement: _this.maybeRenderClearButton(listProps.query) }, inputProps, { inputRef: _this.handleInputRef, onChange: listProps.handleQueryChange, value: listProps.query }))); | ||
| var handleKeyDown = listProps.handleKeyDown, handleKeyUp = listProps.handleKeyUp; | ||
| return (React.createElement(popover2_1.Popover2, tslib_1.__assign({ autoFocus: false, enforceFocus: false, isOpen: _this.state.isOpen, disabled: disabled, position: core_1.Position.BOTTOM_LEFT }, popoverProps, { className: (0, classnames_1.default)(listProps.className, popoverProps.className), content: React.createElement("div", tslib_1.__assign({}, popoverContentProps, { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }), | ||
| // N.B. no need to set `fill` since that is unused with the `renderTarget` API | ||
| return (React.createElement(popover2_1.Popover2, tslib_1.__assign({ autoFocus: false, enforceFocus: false, isOpen: _this.state.isOpen, disabled: disabled, placement: popoverProps.position || popoverProps.placement ? undefined : "bottom-start" }, popoverProps, { className: (0, classnames_1.default)(listProps.className, popoverProps.className), content: React.createElement("div", tslib_1.__assign({}, popoverContentProps, { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }), | ||
| filterable ? input : undefined, | ||
@@ -51,0 +49,0 @@ listProps.itemList), onClosing: _this.handlePopoverClosing, onInteraction: _this.handlePopoverInteraction, onOpened: _this.handlePopoverOpened, onOpening: _this.handlePopoverOpening, popoverClassName: (0, classnames_1.default)(common_1.Classes.SELECT_POPOVER, popoverProps.popoverClassName), popupKind: popover2_1.PopupKind.LISTBOX, ref: popoverRef, renderTarget: _this.getPopoverTargetRenderer(listProps, _this.state.isOpen) }))); |
@@ -48,3 +48,3 @@ "use strict"; | ||
| // N.B. no need to set `popoverProps.fill` since that is unused with the `renderTarget` API | ||
| return (React.createElement(popover2_1.Popover2, tslib_1.__assign({ autoFocus: false, enforceFocus: false, isOpen: isOpen, position: core_1.Position.BOTTOM_LEFT }, popoverProps, { className: (0, classnames_1.default)(listProps.className, popoverProps.className), content: React.createElement("div", tslib_1.__assign({}, popoverContentProps, { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }), listProps.itemList), interactionKind: "click", onInteraction: _this.handlePopoverInteraction, onOpened: _this.handlePopoverOpened, onOpening: _this.handlePopoverOpening, popoverClassName: (0, classnames_1.default)(common_1.Classes.SELECT_POPOVER, popoverProps.popoverClassName), popupKind: popover2_1.PopupKind.LISTBOX, ref: popoverRef, renderTarget: _this.getPopoverTargetRenderer(listProps, isOpen) }))); | ||
| return (React.createElement(popover2_1.Popover2, tslib_1.__assign({ autoFocus: false, enforceFocus: false, isOpen: isOpen, placement: popoverProps.position || popoverProps.placement ? undefined : "bottom-start" }, popoverProps, { className: (0, classnames_1.default)(listProps.className, popoverProps.className), content: React.createElement("div", tslib_1.__assign({}, popoverContentProps, { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }), listProps.itemList), interactionKind: "click", onInteraction: _this.handlePopoverInteraction, onOpened: _this.handlePopoverOpened, onOpening: _this.handlePopoverOpening, popoverClassName: (0, classnames_1.default)(common_1.Classes.SUGGEST_POPOVER, popoverProps.popoverClassName), popupKind: popover2_1.PopupKind.LISTBOX, ref: popoverRef, renderTarget: _this.getPopoverTargetRenderer(listProps, isOpen) }))); | ||
| }; | ||
@@ -51,0 +51,0 @@ // We use the renderTarget API to flatten the rendered DOM and make it easier to implement features like |
@@ -6,4 +6,6 @@ export declare const MULTISELECT: string; | ||
| export declare const OMNIBAR_OVERLAY: string; | ||
| /** @deprecated this class name is not rendered by any component in this package */ | ||
| export declare const SELECT: string; | ||
| export declare const SELECT_POPOVER: string; | ||
| export declare const SELECT_MATCH_TARGET_WIDTH: string; | ||
| export declare const SUGGEST_POPOVER: string; |
@@ -23,5 +23,7 @@ /* | ||
| export var OMNIBAR_OVERLAY = "".concat(OMNIBAR, "-overlay"); | ||
| /** @deprecated this class name is not rendered by any component in this package */ | ||
| export var SELECT = "".concat(NS, "-select"); | ||
| export var SELECT_POPOVER = "".concat(SELECT, "-popover"); | ||
| export var SELECT_MATCH_TARGET_WIDTH = "".concat(SELECT, "-match-target-width"); | ||
| export var SELECT_POPOVER = "".concat(NS, "-select-popover"); | ||
| export var SELECT_MATCH_TARGET_WIDTH = "".concat(NS, "-select-match-target-width"); | ||
| export var SUGGEST_POPOVER = "".concat(NS, "-suggest-popover"); | ||
| //# sourceMappingURL=classes.js.map |
@@ -38,2 +38,6 @@ /// <reference types="react" /> | ||
| /** | ||
| * Props to apply to the `Menu` created within the `itemListRenderer` | ||
| */ | ||
| menuProps?: React.HTMLAttributes<HTMLUListElement>; | ||
| /** | ||
| * Call this function to render an item. | ||
@@ -40,0 +44,0 @@ * This retrieves the modifiers for the item and delegates actual rendering |
@@ -14,3 +14,3 @@ /// <reference types="react" /> | ||
| */ | ||
| popoverProps?: Partial<Omit<Popover2Props, "content">>; | ||
| popoverProps?: Partial<Omit<Popover2Props, "content" | "defaultIsOpen" | "disabled" | "fill" | "renderTarget" | "targetTagName">>; | ||
| /** | ||
@@ -17,0 +17,0 @@ * Optional ref for the Popover2 component instance. |
@@ -56,3 +56,3 @@ import * as React from "react"; | ||
| /** Controlled selected values. */ | ||
| selectedItems?: T[]; | ||
| selectedItems: T[]; | ||
| /** | ||
@@ -59,0 +59,0 @@ * Props to spread to `TagInput`. |
@@ -60,3 +60,3 @@ /* | ||
| var _isOpen = _a.isOpen, ref = _a.ref, targetProps = __rest(_a, ["isOpen", "ref"]); | ||
| var _d = _this.props, disabled = _d.disabled, fill = _d.fill, onClear = _d.onClear, placeholder = _d.placeholder, _e = _d.popoverTargetProps, popoverTargetProps = _e === void 0 ? {} : _e, _f = _d.selectedItems, selectedItems = _f === void 0 ? [] : _f, _g = _d.tagInputProps, tagInputProps = _g === void 0 ? {} : _g; | ||
| var _d = _this.props, disabled = _d.disabled, fill = _d.fill, onClear = _d.onClear, placeholder = _d.placeholder, _e = _d.popoverTargetProps, popoverTargetProps = _e === void 0 ? {} : _e, selectedItems = _d.selectedItems, _f = _d.tagInputProps, tagInputProps = _f === void 0 ? {} : _f; | ||
| var handleKeyDown = listProps.handleKeyDown, handleKeyUp = listProps.handleKeyUp; | ||
@@ -71,3 +71,6 @@ if (disabled) { | ||
| var inputProps = __assign(__assign({}, tagInputProps.inputProps), { className: classNames((_c = tagInputProps.inputProps) === null || _c === void 0 ? void 0 : _c.className, Classes.MULTISELECT_TAG_INPUT_INPUT) }); | ||
| var maybeClearButton = onClear !== undefined && selectedItems.length > 0 ? (React.createElement(Button, { disabled: disabled, icon: "cross", minimal: true, onClick: _this.handleClearButtonClick })) : undefined; | ||
| var maybeClearButton = onClear !== undefined && selectedItems.length > 0 ? ( | ||
| // use both aria-label and title a11y attributes here, for screen readers | ||
| // and mouseover interactions respectively | ||
| React.createElement(Button, { "aria-label": "Clear selected items", disabled: disabled, icon: "cross", minimal: true, onClick: _this.handleClearButtonClick, title: "Clear selected items" })) : undefined; | ||
| return (React.createElement("div", __assign({ "aria-autocomplete": "list", "aria-controls": _this.listboxId }, popoverTargetProps, targetProps, { "aria-expanded": isOpen, | ||
@@ -125,3 +128,3 @@ // Note that we must set FILL here in addition to TagInput to get the wrapper element to full width | ||
| var _a, _b; | ||
| var _c = _this.props, _d = _c.selectedItems, selectedItems = _d === void 0 ? [] : _d, onRemove = _c.onRemove, tagInputProps = _c.tagInputProps; | ||
| var _c = _this.props, selectedItems = _c.selectedItems, onRemove = _c.onRemove, tagInputProps = _c.tagInputProps; | ||
| onRemove === null || onRemove === void 0 ? void 0 : onRemove(selectedItems[index], index); | ||
@@ -128,0 +131,0 @@ (_a = tagInputProps === null || tagInputProps === void 0 ? void 0 : tagInputProps.onRemove) === null || _a === void 0 ? void 0 : _a.call(tagInputProps, tag, index); |
@@ -57,3 +57,3 @@ /* | ||
| _this.renderItemList = function (listProps) { | ||
| var _a = _this.props, initialContent = _a.initialContent, noResults = _a.noResults, menuProps = _a.menuProps; | ||
| var _a = _this.props, initialContent = _a.initialContent, noResults = _a.noResults; | ||
| // omit noResults if createNewItemFromQuery and createNewItemRenderer are both supplied, and query is not empty | ||
@@ -67,3 +67,3 @@ var createItemView = listProps.renderCreateItem(); | ||
| var createFirst = _this.isCreateItemFirst(); | ||
| return (React.createElement(Menu, __assign({ role: "listbox" }, menuProps, { ulRef: listProps.itemsParentRef }), | ||
| return (React.createElement(Menu, __assign({ role: "listbox" }, listProps.menuProps, { ulRef: listProps.itemsParentRef }), | ||
| createFirst && createItemView, | ||
@@ -216,5 +216,5 @@ menuContent, | ||
| QueryList.prototype.render = function () { | ||
| var _a = this.props, className = _a.className, items = _a.items, renderer = _a.renderer, _b = _a.itemListRenderer, itemListRenderer = _b === void 0 ? this.renderItemList : _b; | ||
| var _a = this.props, className = _a.className, items = _a.items, renderer = _a.renderer, _b = _a.itemListRenderer, itemListRenderer = _b === void 0 ? this.renderItemList : _b, menuProps = _a.menuProps; | ||
| var _c = this.state, createNewItem = _c.createNewItem, spreadableState = __rest(_c, ["createNewItem"]); | ||
| return renderer(__assign(__assign({}, spreadableState), { className: className, handleItemSelect: this.handleItemSelect, handleKeyDown: this.handleKeyDown, handleKeyUp: this.handleKeyUp, handlePaste: this.handlePaste, handleQueryChange: this.handleInputQueryChange, itemList: itemListRenderer(__assign(__assign({}, spreadableState), { items: items, itemsParentRef: this.refHandlers.itemsParent, renderCreateItem: this.renderCreateItemMenuItem, renderItem: this.renderItem })) })); | ||
| return renderer(__assign(__assign({}, spreadableState), { className: className, handleItemSelect: this.handleItemSelect, handleKeyDown: this.handleKeyDown, handleKeyUp: this.handleKeyUp, handlePaste: this.handlePaste, handleQueryChange: this.handleInputQueryChange, itemList: itemListRenderer(__assign(__assign({}, spreadableState), { items: items, itemsParentRef: this.refHandlers.itemsParent, menuProps: menuProps, renderCreateItem: this.renderCreateItemMenuItem, renderItem: this.renderItem })) })); | ||
| }; | ||
@@ -221,0 +221,0 @@ QueryList.prototype.componentDidUpdate = function (prevProps) { |
@@ -20,3 +20,3 @@ /* | ||
| import * as React from "react"; | ||
| import { AbstractPureComponent2, Button, Classes as CoreClasses, DISPLAYNAME_PREFIX, InputGroup, Keys, Position, refHandler, setRef, Utils, } from "@blueprintjs/core"; | ||
| import { AbstractPureComponent2, Button, Classes as CoreClasses, DISPLAYNAME_PREFIX, InputGroup, Keys, refHandler, setRef, Utils, } from "@blueprintjs/core"; | ||
| import { Popover2, PopupKind } from "@blueprintjs/popover2"; | ||
@@ -40,9 +40,7 @@ import { Classes } from "../../common"; | ||
| // not using defaultProps cuz they're hard to type with generics (can't use <T> on static members) | ||
| var _a = _this.props, fill = _a.fill, _b = _a.filterable, filterable = _b === void 0 ? true : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.inputProps, inputProps = _d === void 0 ? {} : _d, _e = _a.popoverContentProps, popoverContentProps = _e === void 0 ? {} : _e, _f = _a.popoverProps, popoverProps = _f === void 0 ? {} : _f, popoverRef = _a.popoverRef; | ||
| if (fill) { | ||
| popoverProps.fill = true; | ||
| } | ||
| var _a = _this.props, _b = _a.filterable, filterable = _b === void 0 ? true : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.inputProps, inputProps = _d === void 0 ? {} : _d, _e = _a.popoverContentProps, popoverContentProps = _e === void 0 ? {} : _e, _f = _a.popoverProps, popoverProps = _f === void 0 ? {} : _f, popoverRef = _a.popoverRef; | ||
| var input = (React.createElement(InputGroup, __assign({ "aria-autocomplete": "list", leftIcon: "search", placeholder: "Filter...", rightElement: _this.maybeRenderClearButton(listProps.query) }, inputProps, { inputRef: _this.handleInputRef, onChange: listProps.handleQueryChange, value: listProps.query }))); | ||
| var handleKeyDown = listProps.handleKeyDown, handleKeyUp = listProps.handleKeyUp; | ||
| return (React.createElement(Popover2, __assign({ autoFocus: false, enforceFocus: false, isOpen: _this.state.isOpen, disabled: disabled, position: Position.BOTTOM_LEFT }, popoverProps, { className: classNames(listProps.className, popoverProps.className), content: React.createElement("div", __assign({}, popoverContentProps, { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }), | ||
| // N.B. no need to set `fill` since that is unused with the `renderTarget` API | ||
| return (React.createElement(Popover2, __assign({ autoFocus: false, enforceFocus: false, isOpen: _this.state.isOpen, disabled: disabled, placement: popoverProps.position || popoverProps.placement ? undefined : "bottom-start" }, popoverProps, { className: classNames(listProps.className, popoverProps.className), content: React.createElement("div", __assign({}, popoverContentProps, { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }), | ||
| filterable ? input : undefined, | ||
@@ -49,0 +47,0 @@ listProps.itemList), onClosing: _this.handlePopoverClosing, onInteraction: _this.handlePopoverInteraction, onOpened: _this.handlePopoverOpened, onOpening: _this.handlePopoverOpening, popoverClassName: classNames(Classes.SELECT_POPOVER, popoverProps.popoverClassName), popupKind: PopupKind.LISTBOX, ref: popoverRef, renderTarget: _this.getPopoverTargetRenderer(listProps, _this.state.isOpen) }))); |
@@ -20,3 +20,3 @@ /* | ||
| import * as React from "react"; | ||
| import { AbstractPureComponent2, DISPLAYNAME_PREFIX, InputGroup, Keys, mergeRefs, Position, refHandler, setRef, Utils, } from "@blueprintjs/core"; | ||
| import { AbstractPureComponent2, DISPLAYNAME_PREFIX, InputGroup, Keys, mergeRefs, refHandler, setRef, Utils, } from "@blueprintjs/core"; | ||
| import { Popover2, PopupKind } from "@blueprintjs/popover2"; | ||
@@ -46,3 +46,3 @@ import { Classes } from "../../common"; | ||
| // N.B. no need to set `popoverProps.fill` since that is unused with the `renderTarget` API | ||
| return (React.createElement(Popover2, __assign({ autoFocus: false, enforceFocus: false, isOpen: isOpen, position: Position.BOTTOM_LEFT }, popoverProps, { className: classNames(listProps.className, popoverProps.className), content: React.createElement("div", __assign({}, popoverContentProps, { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }), listProps.itemList), interactionKind: "click", onInteraction: _this.handlePopoverInteraction, onOpened: _this.handlePopoverOpened, onOpening: _this.handlePopoverOpening, popoverClassName: classNames(Classes.SELECT_POPOVER, popoverProps.popoverClassName), popupKind: PopupKind.LISTBOX, ref: popoverRef, renderTarget: _this.getPopoverTargetRenderer(listProps, isOpen) }))); | ||
| return (React.createElement(Popover2, __assign({ autoFocus: false, enforceFocus: false, isOpen: isOpen, placement: popoverProps.position || popoverProps.placement ? undefined : "bottom-start" }, popoverProps, { className: classNames(listProps.className, popoverProps.className), content: React.createElement("div", __assign({}, popoverContentProps, { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }), listProps.itemList), interactionKind: "click", onInteraction: _this.handlePopoverInteraction, onOpened: _this.handlePopoverOpened, onOpening: _this.handlePopoverOpening, popoverClassName: classNames(Classes.SUGGEST_POPOVER, popoverProps.popoverClassName), popupKind: PopupKind.LISTBOX, ref: popoverRef, renderTarget: _this.getPopoverTargetRenderer(listProps, isOpen) }))); | ||
| }; | ||
@@ -49,0 +49,0 @@ // We use the renderTarget API to flatten the rendered DOM and make it easier to implement features like |
@@ -6,4 +6,6 @@ export declare const MULTISELECT: string; | ||
| export declare const OMNIBAR_OVERLAY: string; | ||
| /** @deprecated this class name is not rendered by any component in this package */ | ||
| export declare const SELECT: string; | ||
| export declare const SELECT_POPOVER: string; | ||
| export declare const SELECT_MATCH_TARGET_WIDTH: string; | ||
| export declare const SUGGEST_POPOVER: string; |
@@ -23,5 +23,7 @@ /* | ||
| export const OMNIBAR_OVERLAY = `${OMNIBAR}-overlay`; | ||
| /** @deprecated this class name is not rendered by any component in this package */ | ||
| export const SELECT = `${NS}-select`; | ||
| export const SELECT_POPOVER = `${SELECT}-popover`; | ||
| export const SELECT_MATCH_TARGET_WIDTH = `${SELECT}-match-target-width`; | ||
| export const SELECT_POPOVER = `${NS}-select-popover`; | ||
| export const SELECT_MATCH_TARGET_WIDTH = `${NS}-select-match-target-width`; | ||
| export const SUGGEST_POPOVER = `${NS}-suggest-popover`; | ||
| //# sourceMappingURL=classes.js.map |
@@ -38,2 +38,6 @@ /// <reference types="react" /> | ||
| /** | ||
| * Props to apply to the `Menu` created within the `itemListRenderer` | ||
| */ | ||
| menuProps?: React.HTMLAttributes<HTMLUListElement>; | ||
| /** | ||
| * Call this function to render an item. | ||
@@ -40,0 +44,0 @@ * This retrieves the modifiers for the item and delegates actual rendering |
@@ -14,3 +14,3 @@ /// <reference types="react" /> | ||
| */ | ||
| popoverProps?: Partial<Omit<Popover2Props, "content">>; | ||
| popoverProps?: Partial<Omit<Popover2Props, "content" | "defaultIsOpen" | "disabled" | "fill" | "renderTarget" | "targetTagName">>; | ||
| /** | ||
@@ -17,0 +17,0 @@ * Optional ref for the Popover2 component instance. |
@@ -56,3 +56,3 @@ import * as React from "react"; | ||
| /** Controlled selected values. */ | ||
| selectedItems?: T[]; | ||
| selectedItems: T[]; | ||
| /** | ||
@@ -59,0 +59,0 @@ * Props to spread to `TagInput`. |
@@ -76,3 +76,3 @@ /* | ||
| ({ isOpen: _isOpen, ref, ...targetProps }) => { | ||
| const { disabled, fill, onClear, placeholder, popoverTargetProps = {}, selectedItems = [], tagInputProps = {}, } = this.props; | ||
| const { disabled, fill, onClear, placeholder, popoverTargetProps = {}, selectedItems, tagInputProps = {}, } = this.props; | ||
| const { handleKeyDown, handleKeyUp } = listProps; | ||
@@ -90,3 +90,6 @@ if (disabled) { | ||
| }; | ||
| const maybeClearButton = onClear !== undefined && selectedItems.length > 0 ? (React.createElement(Button, { disabled: disabled, icon: "cross", minimal: true, onClick: this.handleClearButtonClick })) : undefined; | ||
| const maybeClearButton = onClear !== undefined && selectedItems.length > 0 ? ( | ||
| // use both aria-label and title a11y attributes here, for screen readers | ||
| // and mouseover interactions respectively | ||
| React.createElement(Button, { "aria-label": "Clear selected items", disabled: disabled, icon: "cross", minimal: true, onClick: this.handleClearButtonClick, title: "Clear selected items" })) : undefined; | ||
| return (React.createElement("div", { "aria-autocomplete": "list", "aria-controls": this.listboxId, ...popoverTargetProps, ...targetProps, "aria-expanded": isOpen, | ||
@@ -136,3 +139,3 @@ // Note that we must set FILL here in addition to TagInput to get the wrapper element to full width | ||
| handleTagRemove = (tag, index) => { | ||
| const { selectedItems = [], onRemove, tagInputProps } = this.props; | ||
| const { selectedItems, onRemove, tagInputProps } = this.props; | ||
| onRemove?.(selectedItems[index], index); | ||
@@ -139,0 +142,0 @@ tagInputProps?.onRemove?.(tag, index); |
@@ -73,3 +73,3 @@ /* | ||
| render() { | ||
| const { className, items, renderer, itemListRenderer = this.renderItemList } = this.props; | ||
| const { className, items, renderer, itemListRenderer = this.renderItemList, menuProps } = this.props; | ||
| const { createNewItem, ...spreadableState } = this.state; | ||
@@ -88,2 +88,3 @@ return renderer({ | ||
| itemsParentRef: this.refHandlers.itemsParent, | ||
| menuProps, | ||
| renderCreateItem: this.renderCreateItemMenuItem, | ||
@@ -189,3 +190,3 @@ renderItem: this.renderItem, | ||
| renderItemList = (listProps) => { | ||
| const { initialContent, noResults, menuProps } = this.props; | ||
| const { initialContent, noResults } = this.props; | ||
| // omit noResults if createNewItemFromQuery and createNewItemRenderer are both supplied, and query is not empty | ||
@@ -199,3 +200,3 @@ const createItemView = listProps.renderCreateItem(); | ||
| const createFirst = this.isCreateItemFirst(); | ||
| return (React.createElement(Menu, { role: "listbox", ...menuProps, ulRef: listProps.itemsParentRef }, | ||
| return (React.createElement(Menu, { role: "listbox", ...listProps.menuProps, ulRef: listProps.itemsParentRef }, | ||
| createFirst && createItemView, | ||
@@ -202,0 +203,0 @@ menuContent, |
@@ -19,3 +19,3 @@ /* | ||
| import * as React from "react"; | ||
| import { AbstractPureComponent2, Button, Classes as CoreClasses, DISPLAYNAME_PREFIX, InputGroup, Keys, Position, refHandler, setRef, Utils, } from "@blueprintjs/core"; | ||
| import { AbstractPureComponent2, Button, Classes as CoreClasses, DISPLAYNAME_PREFIX, InputGroup, Keys, refHandler, setRef, Utils, } from "@blueprintjs/core"; | ||
| import { Popover2, PopupKind } from "@blueprintjs/popover2"; | ||
@@ -54,9 +54,7 @@ import { Classes } from "../../common"; | ||
| // not using defaultProps cuz they're hard to type with generics (can't use <T> on static members) | ||
| const { fill, filterable = true, disabled = false, inputProps = {}, popoverContentProps = {}, popoverProps = {}, popoverRef, } = this.props; | ||
| if (fill) { | ||
| popoverProps.fill = true; | ||
| } | ||
| const { filterable = true, disabled = false, inputProps = {}, popoverContentProps = {}, popoverProps = {}, popoverRef, } = this.props; | ||
| const input = (React.createElement(InputGroup, { "aria-autocomplete": "list", leftIcon: "search", placeholder: "Filter...", rightElement: this.maybeRenderClearButton(listProps.query), ...inputProps, inputRef: this.handleInputRef, onChange: listProps.handleQueryChange, value: listProps.query })); | ||
| const { handleKeyDown, handleKeyUp } = listProps; | ||
| return (React.createElement(Popover2, { autoFocus: false, enforceFocus: false, isOpen: this.state.isOpen, disabled: disabled, position: Position.BOTTOM_LEFT, ...popoverProps, className: classNames(listProps.className, popoverProps.className), content: React.createElement("div", { ...popoverContentProps, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }, | ||
| // N.B. no need to set `fill` since that is unused with the `renderTarget` API | ||
| return (React.createElement(Popover2, { autoFocus: false, enforceFocus: false, isOpen: this.state.isOpen, disabled: disabled, placement: popoverProps.position || popoverProps.placement ? undefined : "bottom-start", ...popoverProps, className: classNames(listProps.className, popoverProps.className), content: React.createElement("div", { ...popoverContentProps, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }, | ||
| filterable ? input : undefined, | ||
@@ -63,0 +61,0 @@ listProps.itemList), onClosing: this.handlePopoverClosing, onInteraction: this.handlePopoverInteraction, onOpened: this.handlePopoverOpened, onOpening: this.handlePopoverOpening, popoverClassName: classNames(Classes.SELECT_POPOVER, popoverProps.popoverClassName), popupKind: PopupKind.LISTBOX, ref: popoverRef, renderTarget: this.getPopoverTargetRenderer(listProps, this.state.isOpen) })); |
@@ -19,3 +19,3 @@ /* | ||
| import * as React from "react"; | ||
| import { AbstractPureComponent2, DISPLAYNAME_PREFIX, InputGroup, Keys, mergeRefs, Position, refHandler, setRef, Utils, } from "@blueprintjs/core"; | ||
| import { AbstractPureComponent2, DISPLAYNAME_PREFIX, InputGroup, Keys, mergeRefs, refHandler, setRef, Utils, } from "@blueprintjs/core"; | ||
| import { Popover2, PopupKind } from "@blueprintjs/popover2"; | ||
@@ -76,3 +76,3 @@ import { Classes } from "../../common"; | ||
| // N.B. no need to set `popoverProps.fill` since that is unused with the `renderTarget` API | ||
| return (React.createElement(Popover2, { autoFocus: false, enforceFocus: false, isOpen: isOpen, position: Position.BOTTOM_LEFT, ...popoverProps, className: classNames(listProps.className, popoverProps.className), content: React.createElement("div", { ...popoverContentProps, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }, listProps.itemList), interactionKind: "click", onInteraction: this.handlePopoverInteraction, onOpened: this.handlePopoverOpened, onOpening: this.handlePopoverOpening, popoverClassName: classNames(Classes.SELECT_POPOVER, popoverProps.popoverClassName), popupKind: PopupKind.LISTBOX, ref: popoverRef, renderTarget: this.getPopoverTargetRenderer(listProps, isOpen) })); | ||
| return (React.createElement(Popover2, { autoFocus: false, enforceFocus: false, isOpen: isOpen, placement: popoverProps.position || popoverProps.placement ? undefined : "bottom-start", ...popoverProps, className: classNames(listProps.className, popoverProps.className), content: React.createElement("div", { ...popoverContentProps, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }, listProps.itemList), interactionKind: "click", onInteraction: this.handlePopoverInteraction, onOpened: this.handlePopoverOpened, onOpening: this.handlePopoverOpening, popoverClassName: classNames(Classes.SUGGEST_POPOVER, popoverProps.popoverClassName), popupKind: PopupKind.LISTBOX, ref: popoverRef, renderTarget: this.getPopoverTargetRenderer(listProps, isOpen) })); | ||
| }; | ||
@@ -79,0 +79,0 @@ // We use the renderTarget API to flatten the rendered DOM and make it easier to implement features like |
| { | ||
| "name": "@blueprintjs/select", | ||
| "version": "4.4.0", | ||
| "version": "4.4.1", | ||
| "description": "Components related to selecting items from a list", | ||
@@ -38,4 +38,4 @@ "main": "lib/cjs/index.js", | ||
| "dependencies": { | ||
| "@blueprintjs/core": "^4.5.0", | ||
| "@blueprintjs/popover2": "^1.4.0", | ||
| "@blueprintjs/core": "^4.5.1", | ||
| "@blueprintjs/popover2": "^1.4.1", | ||
| "classnames": "^2.2", | ||
@@ -42,0 +42,0 @@ "tslib": "~2.3.1" |
@@ -26,4 +26,6 @@ /* | ||
| export const OMNIBAR_OVERLAY = `${OMNIBAR}-overlay`; | ||
| /** @deprecated this class name is not rendered by any component in this package */ | ||
| export const SELECT = `${NS}-select`; | ||
| export const SELECT_POPOVER = `${SELECT}-popover`; | ||
| export const SELECT_MATCH_TARGET_WIDTH = `${SELECT}-match-target-width`; | ||
| export const SELECT_POPOVER = `${NS}-select-popover`; | ||
| export const SELECT_MATCH_TARGET_WIDTH = `${NS}-select-match-target-width`; | ||
| export const SUGGEST_POPOVER = `${NS}-suggest-popover`; |
@@ -60,2 +60,7 @@ /* | ||
| /** | ||
| * Props to apply to the `Menu` created within the `itemListRenderer` | ||
| */ | ||
| menuProps?: React.HTMLAttributes<HTMLUListElement>; | ||
| /** | ||
| * Call this function to render an item. | ||
@@ -62,0 +67,0 @@ * This retrieves the modifiers for the item and delegates actual rendering |
@@ -31,3 +31,5 @@ /* | ||
| */ | ||
| popoverProps?: Partial<Omit<Popover2Props, "content">>; | ||
| popoverProps?: Partial< | ||
| Omit<Popover2Props, "content" | "defaultIsOpen" | "disabled" | "fill" | "renderTarget" | "targetTagName"> | ||
| >; | ||
@@ -34,0 +36,0 @@ /** |
@@ -16,3 +16,3 @@ --- | ||
| You are encouraged to use this new API now to ease the transition to the next major version of Blueprint. | ||
| See the [migration guide](https://github.com/palantir/blueprint/wiki/Select2,-Suggest2,-MultiSelect2-migration) | ||
| See the [migration guide](https://github.com/palantir/blueprint/wiki/select-component-migration) | ||
| on the wiki. | ||
@@ -19,0 +19,0 @@ |
@@ -16,3 +16,3 @@ --- | ||
| You are encouraged to use this new API now to ease the transition to the next major version of Blueprint. | ||
| See the [migration guide](https://github.com/palantir/blueprint/wiki/Select2,-Suggest2,-MultiSelect2-migration) | ||
| See the [migration guide](https://github.com/palantir/blueprint/wiki/select-component-migration) | ||
| on the wiki. | ||
@@ -283,6 +283,6 @@ | ||
| const renderMenu: ItemListRenderer<Film> = ({ items, itemsParentRef, query, renderItem }) => { | ||
| const renderMenu: ItemListRenderer<Film> = ({ items, itemsParentRef, query, renderItem, menuProps }) => { | ||
| const renderedItems = items.map(renderItem).filter(item => item != null); | ||
| return ( | ||
| <Menu ulRef={itemsParentRef}> | ||
| <Menu role="listbox" ulRef={itemsParentRef} {...menuProps}> | ||
| <MenuItem | ||
@@ -289,0 +289,0 @@ disabled={true} |
@@ -16,3 +16,3 @@ --- | ||
| You are encouraged to use this new API now to ease the transition to the next major version of Blueprint. | ||
| See the [migration guide](https://github.com/palantir/blueprint/wiki/Select2,-Suggest2,-MultiSelect2-migration) | ||
| See the [migration guide](https://github.com/palantir/blueprint/wiki/select-component-migration) | ||
| on the wiki. | ||
@@ -19,0 +19,0 @@ |
@@ -7,3 +7,4 @@ --- | ||
| The **@blueprintjs/select** NPM package provides React components related to selecting items from a list: | ||
| The [__@blueprintjs/select__ package](https://www.npmjs.com/package/@blueprintjs/select) | ||
| provides React components for to selecting items from a list: | ||
@@ -32,2 +33,14 @@ - [Select](#select/select-component) for selecting items in a list (DEPRECATED). | ||
| Import CSS with a JS bundler like webpack: | ||
| ```js | ||
| @import "~@blueprintjs/select/lib/css/blueprint-select.css"; | ||
| ``` | ||
| ...or in plain HTML: | ||
| ```html | ||
| <link href="path/to/node_modules/@blueprintjs/select/lib/css/blueprint-select.css" rel="stylesheet" /> | ||
| ``` | ||
| @page select-component | ||
@@ -34,0 +47,0 @@ @page select2 |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.49%
889509
- Lines of code
- increased by0.32%
12147
Dependency changes
Updated@blueprintjs/core@^4.5.1
Updated@blueprintjs/popover2@^1.4.1