@blueprintjs/select - npm Package Compare versions

Comparing version 4.2.2 to 4.3.0

lib/cjs/components/index.d.ts

@@ -0,5 +1,8 @@
+export * from "./multi-select/multiSelect";
+export * from "./multi-select/multiSelect2";
 export * from "./omnibar/omnibar";
 export * from "./query-list/queryList";
-export * from "./select/multiSelect";
 export * from "./select/select";
-export * from "./select/suggest";
+export * from "./select/select2";
+export * from "./suggest/suggest";
+export * from "./suggest/suggest2";

lib/cjs/components/index.js

@@ -19,7 +19,10 @@ "use strict";
 var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./multi-select/multiSelect"), exports);
+tslib_1.__exportStar(require("./multi-select/multiSelect2"), exports);
 tslib_1.__exportStar(require("./omnibar/omnibar"), exports);
 tslib_1.__exportStar(require("./query-list/queryList"), exports);
-tslib_1.__exportStar(require("./select/multiSelect"), exports);
 tslib_1.__exportStar(require("./select/select"), exports);
-tslib_1.__exportStar(require("./select/suggest"), exports);
+tslib_1.__exportStar(require("./select/select2"), exports);
+tslib_1.__exportStar(require("./suggest/suggest"), exports);
+tslib_1.__exportStar(require("./suggest/suggest2"), exports);
 //# sourceMappingURL=index.js.map

lib/cjs/components/select/select.d.ts

@@ -57,2 +57,3 @@ import * as React from "react";
 }
+/** @deprecated use { Select2 } from "@blueprintjs/select" */
 export declare class Select<T> extends AbstractPureComponent2<SelectProps<T>, ISelectState> {
@@ -59,0 +60,0 @@ static displayName: string;

lib/cjs/components/select/select.js

@@ -25,2 +25,3 @@ "use strict";
 var queryList_1 = require("../query-list/queryList");
+/** @deprecated use { Select2 } from "@blueprintjs/select" */
 var Select = /** @class */ (function (_super) {
@@ -120,2 +121,3 @@ tslib_1.__extends(Select, _super);
             // timeout allows popover to begin closing and remove focus handlers beforehand.
+            /* istanbul ignore next */
             _this.requestAnimationFrame(function () {
@@ -133,2 +135,3 @@ if (_this.previousFocusedElement !== undefined) {
     Select.ofType = function () {
+        // eslint-disable-next-line deprecation/deprecation
         return Select;
@@ -139,3 +142,5 @@ };
         var _a = this.props, filterable = _a.filterable, inputProps = _a.inputProps, popoverProps = _a.popoverProps, restProps = tslib_1.__rest(_a, ["filterable", "inputProps", "popoverProps"]);
-        return (React.createElement(this.TypedQueryList, tslib_1.__assign({}, restProps, { onItemSelect: this.handleItemSelect, ref: this.handleQueryListRef, renderer: this.renderQueryList })));
+        return (
+        /* eslint-disable-next-line deprecation/deprecation */
+        React.createElement(this.TypedQueryList, tslib_1.__assign({}, restProps, { onItemSelect: this.handleItemSelect, ref: this.handleQueryListRef, renderer: this.renderQueryList })));
     };
@@ -142,0 +147,0 @@ Select.prototype.componentDidUpdate = function (prevProps, prevState) {

lib/esm/components/index.d.ts

@@ -0,5 +1,8 @@
+export * from "./multi-select/multiSelect";
+export * from "./multi-select/multiSelect2";
 export * from "./omnibar/omnibar";
 export * from "./query-list/queryList";
-export * from "./select/multiSelect";
 export * from "./select/select";
-export * from "./select/suggest";
+export * from "./select/select2";
+export * from "./suggest/suggest";
+export * from "./suggest/suggest2";

lib/esm/components/index.js

@@ -16,7 +16,10 @@ /*
  */
+export * from "./multi-select/multiSelect";
+export * from "./multi-select/multiSelect2";
 export * from "./omnibar/omnibar";
 export * from "./query-list/queryList";
-export * from "./select/multiSelect";
 export * from "./select/select";
-export * from "./select/suggest";
+export * from "./select/select2";
+export * from "./suggest/suggest";
+export * from "./suggest/suggest2";
 //# sourceMappingURL=index.js.map

lib/esm/components/select/select.d.ts

@@ -57,2 +57,3 @@ import * as React from "react";
 }
+/** @deprecated use { Select2 } from "@blueprintjs/select" */
 export declare class Select<T> extends AbstractPureComponent2<SelectProps<T>, ISelectState> {
@@ -59,0 +60,0 @@ static displayName: string;

lib/esm/components/select/select.js

@@ -22,2 +22,3 @@ /*
 import { QueryList } from "../query-list/queryList";
+/** @deprecated use { Select2 } from "@blueprintjs/select" */
 var Select = /** @class */ (function (_super) {
@@ -117,2 +118,3 @@ __extends(Select, _super);
             // timeout allows popover to begin closing and remove focus handlers beforehand.
+            /* istanbul ignore next */
             _this.requestAnimationFrame(function () {
@@ -130,2 +132,3 @@ if (_this.previousFocusedElement !== undefined) {
     Select.ofType = function () {
+        // eslint-disable-next-line deprecation/deprecation
         return Select;
@@ -136,3 +139,5 @@ };
         var _a = this.props, filterable = _a.filterable, inputProps = _a.inputProps, popoverProps = _a.popoverProps, restProps = __rest(_a, ["filterable", "inputProps", "popoverProps"]);
-        return (React.createElement(this.TypedQueryList, __assign({}, restProps, { onItemSelect: this.handleItemSelect, ref: this.handleQueryListRef, renderer: this.renderQueryList })));
+        return (
+        /* eslint-disable-next-line deprecation/deprecation */
+        React.createElement(this.TypedQueryList, __assign({}, restProps, { onItemSelect: this.handleItemSelect, ref: this.handleQueryListRef, renderer: this.renderQueryList })));
     };
@@ -139,0 +144,0 @@ Select.prototype.componentDidUpdate = function (prevProps, prevState) {

lib/esnext/components/index.d.ts

@@ -0,5 +1,8 @@
+export * from "./multi-select/multiSelect";
+export * from "./multi-select/multiSelect2";
 export * from "./omnibar/omnibar";
 export * from "./query-list/queryList";
-export * from "./select/multiSelect";
 export * from "./select/select";
-export * from "./select/suggest";
+export * from "./select/select2";
+export * from "./suggest/suggest";
+export * from "./suggest/suggest2";

lib/esnext/components/index.js

@@ -16,7 +16,10 @@ /*
  */
+export * from "./multi-select/multiSelect";
+export * from "./multi-select/multiSelect2";
 export * from "./omnibar/omnibar";
 export * from "./query-list/queryList";
-export * from "./select/multiSelect";
 export * from "./select/select";
-export * from "./select/suggest";
+export * from "./select/select2";
+export * from "./suggest/suggest";
+export * from "./suggest/suggest2";
 //# sourceMappingURL=index.js.map

lib/esnext/components/select/select.d.ts

@@ -57,2 +57,3 @@ import * as React from "react";
 }
+/** @deprecated use { Select2 } from "@blueprintjs/select" */
 export declare class Select<T> extends AbstractPureComponent2<SelectProps<T>, ISelectState> {
@@ -59,0 +60,0 @@ static displayName: string;

lib/esnext/components/select/select.js

@@ -21,5 +21,7 @@ /*
 import { QueryList } from "../query-list/queryList";
+/** @deprecated use { Select2 } from "@blueprintjs/select" */
 export class Select extends AbstractPureComponent2 {
     static displayName = `${DISPLAYNAME_PREFIX}.Select`;
     static ofType() {
+        // eslint-disable-next-line deprecation/deprecation
         return Select;
@@ -37,3 +39,5 @@ }
         const { filterable, inputProps, popoverProps, ...restProps } = this.props;
-        return (React.createElement(this.TypedQueryList, { ...restProps, onItemSelect: this.handleItemSelect, ref: this.handleQueryListRef, renderer: this.renderQueryList }));
+        return (
+        /* eslint-disable-next-line deprecation/deprecation */
+        React.createElement(this.TypedQueryList, { ...restProps, onItemSelect: this.handleItemSelect, ref: this.handleQueryListRef, renderer: this.renderQueryList }));
     }
@@ -128,2 +132,3 @@ componentDidUpdate(prevProps, prevState) {
         // timeout allows popover to begin closing and remove focus handlers beforehand.
+        /* istanbul ignore next */
         this.requestAnimationFrame(() => {
@@ -130,0 +135,0 @@ if (this.previousFocusedElement !== undefined) {

package.json

 {
     "name": "@blueprintjs/select",
-    "version": "4.2.2",
+    "version": "4.3.0",
     "description": "Components related to selecting items from a list",
@@ -38,3 +38,4 @@ "main": "lib/cjs/index.js",
     "dependencies": {
-        "@blueprintjs/core": "^4.3.2",
+        "@blueprintjs/core": "^4.4.0",
+        "@blueprintjs/popover2": "^1.3.0",
         "classnames": "^2.2",
@@ -41,0 +42,0 @@ "tslib": "~2.3.1"

src/components/index.ts

@@ -17,6 +17,9 @@ /*
 
+export * from "./multi-select/multiSelect";
+export * from "./multi-select/multiSelect2";
 export * from "./omnibar/omnibar";
 export * from "./query-list/queryList";
-export * from "./select/multiSelect";
 export * from "./select/select";
-export * from "./select/suggest";
+export * from "./select/select2";
+export * from "./suggest/suggest";
+export * from "./suggest/suggest2";

src/components/select/select-component.md

 @# Select
 
-Use `Select<T>` for choosing one item from a list. The component's children will be wrapped in a [`Popover`](#core/components/popover) that contains the list and an optional `InputGroup` to filter it. Provide a predicate to customize the filtering algorithm. The value of a `Select<T>` (the currently chosen item) is uncontrolled: listen to changes with `onItemSelect`.
+<div class="@ns-callout @ns-intent-danger @ns-icon-error">
+    <h4 class="@ns-heading">
 
-<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-    <h4 class="@ns-heading">Disabling a Select</h4>
+Deprecated: use [Select2](#select/select2)
 
-Disabling the component requires setting the `disabled` prop to `true`
-and separately disabling the component's children as appropriate (because `Select` accepts arbitrary children).
+</h4>
 
-For example, `<Select ... disabled={true}><Button ... disabled={true} /></Select>`
+This component is **deprecated since @blueprintjs/select v4.3.0** in favor of the new
+Select2 component, which uses Popover2 instead of Popover under the hood.
+You should migrate to the new API which will become the standard in Blueprint v5.
 
 </div>
 
-@reactExample SelectExample
+The Select component renders a UI to choose one item from a list. Its children are wrapped in a
+[Popover](#core/components/popover) that contains the list and an optional
+[InputGroup](#core/components/text-inputs.input-group) to filter it.
+You may provide a predicate to customize the filtering algorithm. The value of a Select
+(the currently chosen item) is uncontrolled: listen to changes with the `onItemSelect` callback prop.
 
-```tsx
-import { Button, MenuItem } from "@blueprintjs/core";
-import { Select } from "@blueprintjs/select";
-import * as Films from "./films";
+The API for this component is nearly identical to that of Select2, except for a slight change in
+`popoverProps` and the wrapper element(s) rendered around its children. Please refer to the
+[Select2](#select/select2) documentation for full API details.
 
-// Select<T> is a generic component to work with your data types.
-// In TypeScript, you must first obtain a non-generic reference:
-const FilmSelect = Select.ofType<Films.Film>();
+@## Props interface
 
-ReactDOM.render(
-    <FilmSelect
-        items={Films.items}
-        itemPredicate={Films.itemPredicate}
-        itemRenderer={Films.itemRenderer}
-        noResults={<MenuItem disabled={true} text="No results." />}
-        onItemSelect={...}
-    >
-        {/* children become the popover target; render value here */}
-        <Button text={Films.items[0].title} rightIcon="double-caret-vertical" />
-    </FilmSelect>,
-    document.querySelector("#root")
-);
-```
-
-In TypeScript, `Select<T>` is a _generic component_ so you must define a local type that specifies `<T>`, the type of one item in `items`. The props on this local type will now operate on your data type (speak your language) so you can easily define handlers without transformation steps, but most props are required as a result. The static `Select.ofType<T>()` method is available to streamline this process. (Note that this has no effect on JavaScript usage: the `Select` export is a perfectly valid React component class.)
-
-@## Querying
-
-Supply a predicate to automatically query items based on the `InputGroup` value. Use `itemPredicate` to filter each item individually; this is great for lightweight searches. Use `itemListPredicate` to query the entire array in one go, and even reorder it, such as with [fuzz-aldrin-plus](https://github.com/jeancroy/fuzz-aldrin-plus). The array of filtered items is cached internally by `QueryList` state and only recomputed when `query` or `items`-related props change.
-
-Omitting both `itemPredicate` and `itemListPredicate` props will cause the component to always render all `items`. It will not hide the `InputGroup`; use the `filterable` prop for that. In this case, you can implement your own filtering and simply change the `items` prop.
-
-The **@blueprintjs/select** package exports `ItemPredicate<T>` and `ItemListPredicate<T>` type aliases to simplify the process of implementing these functions.
-See the code sample in [Item Renderer API](#select/select-component.item-renderer) below for usage.
-
-@### Non-ideal states
-
-If the query returns no results or `items` is empty, then `noResults` will be rendered in place of the usual list. You also have the option to provide `initialContent`, which will render in place of the item list if the query is empty.
-
-@## Custom menu
-
-By default, `Select` renders the displayed items in a [`Menu`](#core/components/menu). This behavior can be overridden by providing the `itemListRenderer` prop, giving you full control over the layout of the items. For example, you can group items under a common heading, or render large data sets using [react-virtualized](https://github.com/bvaughn/react-virtualized).
-
-Note that the non-ideal states of `noResults` and `initialContent` are specific to the default renderer. If you provide the `itemListRenderer` prop, these props will be ignored.
-
-See the code sample in [Item List Renderer API](#select/select-component.item-list-renderer) below for usage.
-
-@## Controlled usage
-
-The input value can be controlled with the `query` and `onQueryChange` props. _Do not use `inputProps` for this;_ the component ignores `inputProps.value` and `inputProps.onChange` in favor of `query` and `onQueryChange` (as noted in the prop documentation).
-
-The focused item (for keyboard interactions) can be controlled with the `activeItem` and `onActiveItemChange` props.
-
-```tsx
-<FilmSelect
-    items={myFilter(ALL_ITEMS, this.state.myQuery)}
-    itemRenderer={...}
-    onItemSelect={...}
-    // controlled active item
-    activeItem={this.state.myActiveItem}
-    onActiveItemChange={this.handleActiveItemChange}
-    // controlled query
-    query={this.state.myQuery}
-    onQueryChange={this.handleQueryChange}
-/>
-```
-
-This controlled usage allows you to implement all sorts of advanced behavior on
-top of the basic `Select` interactions, such as windowed filtering for large
-data sets.
-
-<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
-
-To control the active item when a "Create Item" option is present, See [Controlling the active item](#select/select-component.controlling-the-active-item) in the "Creating new items" section below.
-</div>
-
-@## Creating new items
-
-If you wish, you can allow users to select a brand new item that doesn't appear
-in the list, based on the current query string. Use `createNewItemFromQuery` and
-`createNewItemRenderer` to enable this:
-- `createNewItemFromQuery`: Specifies how to convert a user-entered query string
-into an item of type `<T>` that `Select` understands.
-- `createNewItemRenderer`: Renders a custom "Create Item" element that will be
-shown at the bottom of the list. When selected via click or `Enter`, this element
-will invoke `onItemSelect` with the item returned from `createNewItemFromQuery`.
-
-<div class="@ns-callout @ns-intent-warning @ns-icon-info-sign">
-    <h4 class="@ns-heading">Avoiding type conflicts</h4>
-
-The "Create Item" option is represented by the reserved type `ICreateNewItem`
-exported from this package. It is exceedingly unlikely but technically possible
-for your custom type `<T>` to conflict with this type. If your type conflicts,
-you may see unexpected behavior; to resolve, consider changing the schema for
-your items.
-
-</div>
-
-```tsx
-function createFilm(title: string): IFilm {
-    return {
-        rank: /* ... */,
-        title,
-        year: /* ... */,
-    };
-}
-
-function renderCreateFilmOption(
-    query: string,
-    active: boolean,
-    handleClick: React.MouseEventHandler<HTMLElement>,
-) {
-    return (
-        <MenuItem
-            icon="add"
-            text={`Create "${query}"`}
-            selected={active}
-            onClick={handleClick}
-            shouldDismissPopover={false}
-        />
-    )
-}
-
-ReactDOM.render(
-    <FilmSelect
-        createNewItemFromQuery={createFilm}
-        createNewItemRenderer={renderCreateFilmOption}
-        items={Films.items}
-        itemPredicate={Films.itemPredicate}
-        itemRenderer={Films.itemRenderer}
-        noResults={<MenuItem disabled={true} text="No results." />}
-        onItemSelect={...}
-    />,
-    document.querySelector("#root")
-);
-```
-
-@### Controlling the active item
-
-Controlling the active item is slightly more involved when the "Create Item"
-option is present. At a high level, the process works the same way as before:
-control the `activeItem` value and listen for updates via `onActiveItemChange`.
-However, some special handling is required.
-
-When the "Create Item" option is present, the callback will emit
-`activeItem=null` and `isCreateNewItem=true`:
-
-```tsx
-onActiveItemChange(null, true);
-```
-
-You can then make the "Create Item" option active by passing the result of
-`getCreateNewItem()` to the `activeItem` prop (the `getCreateNewItem` function
-is exported from this package):
-
-```tsx
-activeItem={isCreateNewItemActive ? getCreateNewItem() : activeItem}
-```
-
-Altogether, the code might look something like this:
-
-```tsx
-const currentActiveItem: Film | ICreateNewItem | null;
-const isCreateNewItemActive: Film | ICreateNewItem | null;
-
-function handleActiveItemChange(
-    activeItem: Film | ICreateNewItem | null,
-    isCreateNewItem: boolean,
-) {
-    currentActiveItem = activeItem;
-    isCreateNewItemActive = isCreateNewItem;
-}
-
-function getActiveItem() {
-    return isCreateNewItemActive ? getCreateNewItem() : currentActiveItem;
-}
-
-ReactDOM.render(
-    <FilmSelect
-        {...} // Other required props (see previous examples).
-        activeItem={getActiveItem()}
-        createNewItemFromQuery={...}
-        createNewItemRenderer={...}
-        onActiveItemChange={handleActiveItemChange}
-    />,
-    document.querySelector("#root")
-);
-```
-
-@## JavaScript API
-
 @interface ISelectProps
-
-@### Item renderer
-
-`Select`'s `itemRenderer` will be called for each item and receives the item and a props object containing data specific
-to rendering this item in this frame. The renderer is called for all items, so don't forget to respect
-`modifiers.matchesPredicate` to hide items that don't match the predicate. Also, don't forget to define a `key` for each item, or face React's console wrath!
-
-```tsx
-import { Classes, MenuItem } from "@blueprintjs/core";
-import { ItemRenderer, ItemPredicate, Select } from "@blueprintjs/select";
-
-const FilmSelect = Select.ofType<Film>();
-
-const filterFilm: ItemPredicate<IFilm> = (query, film) => {
-    return film.title.toLowerCase().indexOf(query.toLowerCase()) >= 0;
-};
-
-const renderFilm: ItemRenderer<Film> = (film, { handleClick, handleFocus, modifiers }) => {
-    if (!modifiers.matchesPredicate) {
-        return null;
-    }
-    return (
-        <MenuItem
-            selected={modifiers.active}
-            key={film.title}
-            label={film.year}
-            onClick={handleClick}
-            onFocus={handleFocus}
-            text={film.title}
-        />
-    );
-};
-
-<FilmSelect itemPredicate={filterFilm} itemRenderer={renderFilm} items={...} onItemSelect={...} />
-```
-
-@interface IItemRendererProps
-
-@### Item list renderer
-
-If provided, the `itemListRenderer` prop will be called to render the contents of the dropdown menu. It has access to the items, the current query, and a `renderItem` callback for rendering a single item. A ref handler (`itemsParentRef`) is given as well; it should be attached to the parent element of the rendered menu items so that the currently selected item can be scrolled into view automatically.
-
-```tsx
-import { ItemListRenderer } from "@blueprintjs/select";
-
-const renderMenu: ItemListRenderer<Film> = ({ items, itemsParentRef, query, renderItem }) => {
-    const renderedItems = items.map(renderItem).filter(item => item != null);
-    return (
-        <Menu ulRef={itemsParentRef}>
-            <MenuItem
-                disabled={true}
-                text={`Found ${renderedItems.length} items matching "${query}"`}
-            />
-            {renderedItems}
-        </Menu>
-    );
-};
-
-<FilmSelect
-    itemListRenderer={renderMenu}
-    itemPredicate={filterFilm}
-    itemRenderer={renderFilm}
-    items={...}
-    onItemSelect={...}
-/>
-```
-
-@interface IItemListRendererProps

src/index.md

@@ -9,12 +9,18 @@ ---
 
-- [`Select`](#select/select-component) for selecting items in a list.
+- [Select](#select/select-component) for selecting items in a list (DEPRECATED).
 
-- [`Suggest`](#select/suggest) for selecting items in a list, from a text input.
+- [Select2](#select/select2) replacement for Select, uses Popover2 instead of Popover under the hood.
 
-- [`MultiSelect`](#select/multi-select) for selecting multiple items in a list.
+- [Suggest](#select/suggest) for selecting items in a list, from a text input (DEPRECATED).
 
-- [`Omnibar`](#select/omnibar), a macOS spotlight-style typeahead component.
+- [Suggest2](#select/suggest2) replacement for Suggest, uses Popover2 instead of Popover under the hood.
 
-- [`QueryList`](#select/query-list), a higher-order component that provides interactions between a query string and a list of items.
+- [MultiSelect](#select/multi-select) for selecting multiple items in a list (DEPRECATED).
 
+- [MultiSelect2](#select/multi-select2) replacement for MultiSelect, uses Popover2 instead of Popover under the hood.
+
+- [Omnibar](#select/omnibar), a macOS spotlight-style typeahead component.
+
+- [QueryList](#select/query-list), a higher-order component that provides interactions between a query string and a list of items.
+
 Make sure to review the [getting started docs for installation info](#blueprint/getting-started).
@@ -27,5 +33,8 @@
 @page select-component
+@page select2
 @page suggest
+@page suggest2
 @page multi-select
+@page multi-select2
 @page omnibar
 @page query-list

New alerts

License Policy Violation

License

This 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

License

This 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

832168

increased by45.29%

Number of package files

192

increased by21.52%

Lines of code

11461

increased by36.82%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Added@blueprintjs/popover2@^1.3.0

• + Added@blueprintjs/popover2@1.14.11(transitive)

• + Added@popperjs/core@2.11.8(transitive)

• + Addedreact-fast-compare@3.2.2(transitive)

• + Addedreact-popper@2.3.0(transitive)

• Updated@blueprintjs/core@^4.4.0