@eccenca/gui-elements 23.0.0-rc.0 → 23.0.0-rc.3-unofficial.0

package/src/components/Icon/icon.scss

@@ -27,7 +27,7 @@ svg.#{$eccgui}-icon {
 
 .#{$ns}-button .#{$eccgui}-icon:first-child:last-child,
 .#{$ns}-button .#{$ns}-spinner + .#{$eccgui}-icon:last-child {
-    margin: 0 (-($pt-button-height - $pt-icon-size-standard) / 2);
+    margin: 0 (-($pt-button-height - $pt-icon-size-standard) * 0.5);
 }
 
 .#{$eccgui}-menu__item {

package/src/components/Icon/stories/Icon.stories.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import {
+    Icon,
+    Button,
+} from "../../../index";
+import canonicalIcons, { ValidIconName } from "./../canonicalIconNames";
+import { Definitions } from "../../../common/Intent";
+
+export default {
+    title: "Components/Icon",
+    component: Icon,
+    argTypes: {
+        name: {
+            control: "select",
+            options: [...(Object.keys(canonicalIcons))],
+        },
+        intent: {
+            control: "select",
+            options: {...Definitions},
+        },
+    },
+} as ComponentMeta<typeof Icon>;
+
+const Template: ComponentStory<typeof Icon> = (args) => (
+    <Icon {...args} tooltipText={args.name?.toString()}/>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    name: "undefined"
+}
+
+export const IconsOverview = () => {
+    return (
+        <>
+            {
+                Object.keys(canonicalIcons).map((iconName) => {
+                    return (
+                        <Button
+                            icon={iconName as ValidIconName}
+                            outlined
+                            large
+                            tooltip={iconName}
+                        />
+                    )
+                })
+            }
+        </>
+    );
+}

package/src/components/Icon/stories/IconButton.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import {
+    IconButton,
+} from "../../../index";
+import canonicalIcons from "./../canonicalIconNames";
+
+export default {
+    title: "Components/IconButton",
+    component: IconButton,
+    argTypes: {
+        name: {
+            control: "select",
+            options: [...(Object.keys(canonicalIcons))],
+        },
+    },
+} as ComponentMeta<typeof IconButton>;
+
+const Template: ComponentStory<typeof IconButton> = (args) => (
+    <IconButton {...args} text={args.name?.toString()}/>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    name: "item-moremenu"
+}

package/src/components/Iframe/IframeModal.tsx

@@ -1,8 +1,7 @@
 import React from "react";
-import SimpleDialog, { SimpleDialogProps } from "../Dialog/SimpleDialog";
-import IconButton from "../Icon/IconButton";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { Iframe, IframeProps } from "./Iframe";
+import SimpleDialog, {SimpleDialogProps} from "../Dialog/SimpleDialog";
+import {CLASSPREFIX as eccgui} from "../../configuration/constants";
+import {Iframe, IframeProps} from "./Iframe";
 
 export interface IframeModalProps extends Omit<SimpleDialogProps, "children"> {
     // The title of the dialog
@@ -29,7 +28,6 @@ export function IframeModal({
     size = "large",
     ...otherSimpleDialogProps
 }: IframeModalProps) {
-    const [displayFullscreen, setDisplayFullscreen] = React.useState<boolean>(startFullscreen);
     const {
         useViewportHeight,
         useAvailableSpace,
@@ -44,22 +42,13 @@ export function IframeModal({
         <SimpleDialog
             hasBorder
             title={title}
-            headerOptions={(
-                <>
-                    <IconButton
-                        name={displayFullscreen ? "toggler-minimize" : "toggler-maximize"}
-                        onClick={()=>setDisplayFullscreen(!displayFullscreen)}
-                    />
-                    <>
-                        {headerOptions}
-                    </>
-                </>
-            )}
+            headerOptions={headerOptions}
             className={
                 `${eccgui}-iframemodal` +
                 (className ? ` ${className}` : "")
             }
-            size={displayFullscreen ? "fullscreen" : size}
+            showFullScreenToggler={true}
+            startInFullScreenMode={startFullscreen}
             {...otherSimpleDialogProps}
         >
             <Iframe

package/src/components/Label/Label.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { loremIpsum } from "react-lorem-ipsum";
+
+import {
+  Label
+} from "../../index";
+
+export default {
+  title: "Components/Label",
+  component: Label,
+  argTypes: {
+  },
+} as ComponentMeta<typeof Label>;
+
+const Template: ComponentStory<typeof Label> = (args) => (
+    <Label {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    text: "Label text",
+    info: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 4, random: false }).toString(),
+    tooltip: loremIpsum({ p: 1, avgSentencesPerParagraph: 2, startWithLoremIpsum: false, random: false }).toString(),
+    disabled: false,
+    htmlFor: "inputid",
+}

package/src/components/Label/Label.tsx

@@ -1,8 +1,36 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import Tooltip from "../Tooltip/Tooltip";
+import Tooltip, { TooltipProps } from "../Tooltip/Tooltip";
 import Icon from "../Icon/Icon";
 
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    /**
+     * Label text.
+     */
+    text?: string | JSX.Element;
+    /**
+     * Short info about label semantic, it is displayed in parentesis after the label text.
+     */
+    info?: string | JSX.Element;
+    /**
+     * Additional tooltip, attached to an info icon that is displayed after the info.
+     */
+    tooltip?: string | JSX.Element;
+    /**
+     * Additonal tooltip properties, e.g. `hoverOpenDelay`.
+     */
+    tooltipProps?: Partial<Omit<TooltipProps, "content" | "children" | "disabled">>;
+    /**
+     * Set the name of an HTML element if the display should be used for something else that a `label` element.
+     */
+    isLayoutForElement?: string;
+    /**
+     * Label is displayed inactive.
+     * If there is no `isLayoutForElement` set then a `span` is used.
+     */
+    disabled?: boolean;
+}
+
 function Label({
     children,
     className = "",
@@ -10,34 +38,38 @@ function Label({
     text,
     info,
     tooltip,
-    tooltipProperties,
+    tooltipProps,
     isLayoutForElement = "label",
-    ...otherProps
-}: any) {
+    ...otherLabelProps
+}: LabelProps) {
     let htmlElementstring = isLayoutForElement;
     htmlElementstring = disabled && htmlElementstring === "label" ? "span" : htmlElementstring;
-    const labelElement = React.createElement(htmlElementstring);
 
-    return text ? (
-        <labelElement.type
-            className={`${eccgui}-label` + (className ? " " + className : "") + (disabled ? ` ${eccgui}-label--disabled` : "")}
-            {...otherProps}
-            htmlFor={disabled ? "" : otherProps.htmlFor}
-        >
-            <span className={`${eccgui}-label__text`}>{text}</span>
+    const labelContent = (
+        <>
+            {text && <span className={`${eccgui}-label__text`}>{text}</span>}
             {info && <span className={`${eccgui}-label__info`}>{info}</span>}
             {tooltip && (
                 <span className={`${eccgui}-label__tooltip`}>
-                    <Tooltip content={tooltip} disabled={disabled} {...tooltipProperties}>
+                    <Tooltip content={tooltip} disabled={disabled} {...tooltipProps}>
                         <Icon name="item-info" small />
                     </Tooltip>
                 </span>
             )}
             {children && <span className={`${eccgui}-label__other`}>{children}</span>}
-        </labelElement.type>
+        </>
+    );
+
+    return (!!text || !!info || !!tooltip || !!children) ? React.createElement(
+        htmlElementstring,
+        {
+            className: `${eccgui}-label` + (className ? " " + className : "") + (disabled ? ` ${eccgui}-label--disabled` : ""),
+            ...otherLabelProps,
+        },
+        labelContent
     ) : (
         <></>
-    );
+    )
 }
 
 export default Label;

package/src/components/Label/label.scss

@@ -41,7 +41,7 @@ $eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-mut
     }
 
     .#{$eccgui}-label__text + & {
-        margin-left: $eccgui-size-inline-whitespace / 2;
+        margin-left: $eccgui-size-inline-whitespace * 0.5;
     }
 
     .#{$eccgui}-typography__overflowtext--passdown > .#{$eccgui}-label > & {
@@ -58,7 +58,7 @@ $eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-mut
 
     .#{$eccgui}-label__text + &,
     .#{$eccgui}-label__info + & {
-        margin-left: $eccgui-size-inline-whitespace / 2;
+        margin-left: $eccgui-size-inline-whitespace * 0.5;
     }
 
     .#{$eccgui}-typography__overflowtext--passdown > .#{$eccgui}-label > & {

package/src/components/Menu/MenuItem.tsx

@@ -1,18 +1,15 @@
 import React from 'react';
-import {MenuItem as BlueprintMenuItem, MenuItemProps} from "@blueprintjs/core";
+import {MenuItem as BlueprintMenuItem, MenuItemProps as BlueprintMenuItemProps} from "@blueprintjs/core";
 import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 import Icon from '../Icon/Icon';
 import { openInNewTab } from '../../common/utils/openInNewTab';
 import {ValidIconName} from "../Icon/canonicalIconNames";
 
-interface IProps {
-    children?: React.ReactNode | React.ReactNode[]
-    className?: string
-    icon?: ValidIconName | string[]
-    // Props defined by the Blueprint component that should be forwarded
-    internalProps?: Partial<MenuItemProps> & React.AnchorHTMLAttributes<HTMLAnchorElement>
-    // FIXME: CMEM-3742: For backward compatibility, should be avoided in all code bases
-    [key: string]: any
+export interface MenuItemProps extends Omit<BlueprintMenuItemProps, "icon">, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target"> {
+    /*
+     * If set the icon is diplayed on the left side of the menu item.
+     */
+    icon?: ValidIconName | string[];
 }
 
 /** A single item in a Menu. */
@@ -20,19 +17,15 @@ function MenuItem({
                       children,
                       className = '',
                       icon,
-                      internalProps,
                       onClick,
                       href,
                       ...restProps
-                  }: IProps) {
-    const actualHref = internalProps?.href ?? href;
-    const onClickHandler = internalProps?.onClick ?? onClick;
+                  }: MenuItemProps) {
     return (
         <BlueprintMenuItem
-            {...internalProps}
             {...restProps}
-            href={actualHref}
-            onClick={(e) => openInNewTab(e, onClickHandler, actualHref)}
+            href={href}
+            onClick={(e) => openInNewTab(e, onClick, href)}
             className={`${eccgui}-menu__item ` + className}
             icon={
                 icon ? <Icon name={icon} /> : false

package/src/components/Menu/menu.scss

@@ -26,16 +26,16 @@ $minimal-button-background-color-active: rgba($gray2, 0.3) !default;
 $dark-minimal-button-background-color-hover: rgba($gray3, 0.15) !default;
 $dark-minimal-button-background-color-active: rgba($gray3, 0.3) !default;
 
-// $half-grid-size: $pt-grid-size / 2 !default;
+// $half-grid-size: $pt-grid-size * 0.5 !default;
 // $menu-item-border-radius: $pt-border-radius - 1 !default;
 // $menu-item-line-height-factor: 1.4;
 // $menu-item-line-height: round($pt-font-size * $menu-item-line-height-factor);
 // $menu-item-line-height-large: round($pt-font-size-large * $menu-item-line-height-factor);
 $menu-min-width: 0 !default;
-// $menu-item-padding: ($pt-button-height - $pt-icon-size-standard) / 2 !default;
-// $menu-item-padding-large: ($pt-button-height-large - $pt-icon-size-large) / 2 !default;
-// $menu-item-padding-vertical: ($pt-button-height - $menu-item-line-height) / 2 !default;
-// $menu-item-padding-vertical-large: ($pt-button-height-large - $menu-item-line-height-large) / 2 !default;
+// $menu-item-padding: ($pt-button-height - $pt-icon-size-standard) * 0.5 !default;
+// $menu-item-padding-large: ($pt-button-height-large - $pt-icon-size-large) * 0.5 !default;
+// $menu-item-padding-vertical: ($pt-button-height - $menu-item-line-height) * 0.5 !default;
+// $menu-item-padding-vertical-large: ($pt-button-height-large - $menu-item-line-height-large) * 0.5 !default;
 $menu-background-color: transparent !default;
 // $dark-menu-background-color: $dark-gray4 !default;
 // $menu-item-color-hover: $minimal-button-background-color-hover !default;
@@ -48,8 +48,8 @@ $menu-background-color: transparent !default;
 .#{$ns}-menu {
     padding: 0;
 
-    .#{$ns}-popover-content > & {
-        padding: $eccgui-size-inline-whitespace / 2;
+    .#{$ns}-popover2-content > & {
+        padding: $eccgui-size-inline-whitespace * 0.5;
         min-width: 10em;
         max-width: 20em;
     }
@@ -69,11 +69,12 @@ $menu-background-color: transparent !default;
 
     &:hover {
         .#{$ns}-menu-item {
-            max-width: none;
+            max-width: 100vw; // something similar like `none` in this situation
+            transition: max-width $pt-transition-duration ease-in 0.75s;
         }
         .#{$ns}-text-overflow-ellipsis {
             opacity: $eccgui-opacity-regular;
-            transition: opacity 0.11s;
+            transition: opacity $pt-transition-duration ease-in 0.75s;
         }
     }
 }

package/src/components/MultiSelect/MultiSelect.tsx

@@ -1,11 +1,21 @@
 import React from "react";
-import {Intent as BlueprintIntent} from "@blueprintjs/core";
-import {IItemRendererProps, MultiSelect as BlueprintMultiSelect, MultiSelectProps} from "@blueprintjs/select";
-import MenuItem from "../Menu/MenuItem";
-import Highlighter from "../Typography/Highlighter";
-import Button from "../Button/Button";
-import OverflowText from "../Typography/OverflowText";
-import {HTMLInputProps} from "@blueprintjs/core/src/common/props";
+import {
+    Intent as BlueprintIntent,
+    HTMLInputProps as BlueprintHTMLInputProps
+} from "@blueprintjs/core";
+import {
+    IItemRendererProps as BlueprintItemRendererProps,
+    MultiSelect2 as BlueprintMultiSelect,
+    MultiSelect2Props as BlueprintMultiSelectProps
+} from "@blueprintjs/select";
+import {
+    MenuItem,
+    Highlighter,
+    Button,
+    OverflowText,
+    ContextOverlayProps,
+} from "./../../index";
+
 import {removeExtraSpaces} from "../../common/utils/stringUtils";
 
 export interface SelectedParamsType<T> {
@@ -14,7 +24,7 @@ export interface SelectedParamsType<T> {
     createdItems: Partial<T>[];
 }
 
-interface IProps<T> extends Pick<MultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
+interface IProps<T> extends Pick<BlueprintMultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
     /**
      * Returns the unique ID of an item. This will be used for equality of items.
      */
@@ -33,16 +43,16 @@ interface IProps<T> extends Pick<MultiSelectProps<T>, "items" | "placeholder" |
      */
     onSelection?: (params: SelectedParamsType<T>) => void;
     /**
-     * Props to spread to `Popover`. Note that `content` cannot be changed.
+     * Props to spread to `ContextOverlay`. Note that `content` cannot be changed.
      */
-    popoverProps?: MultiSelectProps<T>["popoverProps"];
+    contextOverlayProps?: Partial<Omit<ContextOverlayProps, "content" | "children">>;
     /**
      * Props to spread to `TagInput`. Use `query` and `onQueryChange` to control the input.
      */
-    tagInputProps?: MultiSelectProps<T>["tagInputProps"];
+    tagInputProps?: BlueprintMultiSelectProps<T>["tagInputProps"];
 
     /** Additional properties for the (query) input field of the multi-selection. */
-    inputProps?: HTMLInputProps;
+    inputProps?: BlueprintHTMLInputProps;
 
     /**
      * prop to listen for query changes, when text is entered in the multi-select input
@@ -50,7 +60,7 @@ interface IProps<T> extends Pick<MultiSelectProps<T>, "items" | "placeholder" |
     runOnQueryChange?: (query: string) => Promise<T[] | undefined>;
     /**
      * Whether the component should take up the full width of its container.
-     * This overrides `popoverProps.fill` and `tagInputProps.fill`.
+     * This overrides `tagInputProps.fill`.
      */
     fullWidth?: boolean;
     /**
@@ -99,7 +109,7 @@ function MultiSelect<T>({
     itemId,
     itemLabel,
     onSelection,
-    popoverProps,
+    contextOverlayProps,
     tagInputProps,
     inputProps,
     runOnQueryChange,
@@ -221,7 +231,7 @@ function MultiSelect<T>({
     /**
      * defines how an item in the item list is displayed
      */
-    const onItemRenderer = (item: T, { handleClick, modifiers }: IItemRendererProps) => {
+    const onItemRenderer = (item: T, { handleClick, modifiers }: BlueprintItemRendererProps) => {
         if (!modifiers.matchesPredicate) {
             return null;
         }
@@ -361,13 +371,15 @@ function MultiSelect<T>({
             }}
             popoverProps={{
                 minimal: true,
-                position: "bottom-left",
+                placement: "bottom-start",
                 hasBackdrop: true,
-                ...popoverProps,
-                defaultIsOpen: true,
+                fill: true,
+                ...contextOverlayProps,
             }}
         />
     );
 }
 
+MultiSelect.ofType = BlueprintMultiSelect.ofType;
+
 export default MultiSelect;

package/src/components/Notification/notification.scss

@@ -1,5 +1,7 @@
 // TODO: add vars and process them
 
+@use "sass:math";
+
 @import "~@blueprintjs/core/src/components/toast/toast";
 
 .#{$eccgui}-notification {
@@ -10,7 +12,7 @@
     background-color: $eccgui-color-application-background;
     font-size: 1rem;
     line-height: $eccgui-size-typo-base-lineheight;
-    min-width: 4/16 * 100vw;
+    min-width: math.div(4, 16) * 100vw;
     width: 100%;
     max-width: 40rem;
     margin-top: $eccgui-size-block-whitespace;

package/src/components/OverviewItem/overviewitem.scss

@@ -1,5 +1,5 @@
 $eccgui-color-overviewitem-divider: $ui-03 !default;
-$eccgui-size-overviewitem-spacing: $eccgui-size-typo-base/2 !default;
+$eccgui-size-overviewitem-spacing: $eccgui-size-typo-base * 0.5 !default;
 
 $eccgui-color-overviewitem-depiction-background: $eccgui-color-workspace-text !default;
 $eccgui-color-overviewitem-depiction-text: $eccgui-color-workspace-background !default;
@@ -17,7 +17,7 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
     align-items: stretch;
 
     & > li {
-        width: calc(1/2 * 100% - #{$eccgui-size-overviewitem-spacing});
+        width: calc(50% - #{$eccgui-size-overviewitem-spacing});
 
         &:nth-child(odd) {
             margin-right: $eccgui-size-overviewitem-spacing;
@@ -25,12 +25,12 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
     }
 
     &.#{$eccgui}-overviewitem__list--hasspacing {
-        margin-left: -1 * $eccgui-size-overviewitem-spacing/2;
-        margin-right: -1 * $eccgui-size-overviewitem-spacing/2;
+        margin-left: -1 * $eccgui-size-overviewitem-spacing * 0.5;
+        margin-right: -1 * $eccgui-size-overviewitem-spacing * 0.5;
 
         & > li {
             box-sizing: border-box;
-            padding: $eccgui-size-overviewitem-spacing/2;
+            padding: $eccgui-size-overviewitem-spacing * 0.5;
         }
     }
 }
@@ -40,10 +40,10 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 }
 
 .#{$eccgui}-overviewitem__list--hasspacing:not(.#{$eccgui}-overviewitem__list--hascolumns) > li:not(:first-child) {
-    padding-top: $eccgui-size-overviewitem-spacing/2;
+    padding-top: $eccgui-size-overviewitem-spacing * 0.5;
 }
 .#{$eccgui}-overviewitem__list--hasspacing:not(.#{$eccgui}-overviewitem__list--hascolumns) > li:not(:last-child) {
-    padding-bottom: $eccgui-size-overviewitem-spacing/2;
+    padding-bottom: $eccgui-size-overviewitem-spacing * 0.5;
 }
 
 .#{$eccgui}-overviewitem__item {
@@ -83,7 +83,7 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
 .#{$eccgui}-overviewitem__item--hasspacing {
     box-sizing: content-box;
-    padding: $eccgui-size-overviewitem-spacing/2;
+    padding: $eccgui-size-overviewitem-spacing * 0.5;
 
     &.#{$eccgui}-overviewitem__item--highdensity,
     .#{$eccgui}-overviewitem__list--highdensity > li > & {

package/src/components/PropertyValuePair/propertyvalue.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .#{$eccgui}-propertyvalue__list {
     display: block;
 }
@@ -13,11 +15,11 @@
     }
     &.#{$eccgui}-propertyvalue__pair--hasspacing {
         &:not(:last-child) {
-            padding-bottom: $eccgui-size-block-whitespace / 2;
-            margin-bottom: $eccgui-size-block-whitespace / 2;
+            padding-bottom: $eccgui-size-block-whitespace * 0.5;
+            margin-bottom: $eccgui-size-block-whitespace * 0.5;
         }
         .#{$eccgui}-propertyvalue__pair + & {
-            margin-top: $eccgui-size-block-whitespace / 2;
+            margin-top: $eccgui-size-block-whitespace * 0.5;
         }
     }
 }
@@ -32,7 +34,7 @@
 
 .#{$eccgui}-propertyvalue__property {
     float: left;
-    width: 3/16 * 100%;
+    width: math.div(3, 16) * 100%;
     overflow: hidden;
 
     & > div {
@@ -41,7 +43,7 @@
 }
 
 .#{$eccgui}-propertyvalue__value {
-    margin-left: 3/16 * 100%;
+    margin-left: math.div(3, 16) * 100%;
     box-sizing: content-box;
 
     &:not(:last-child) {
@@ -49,8 +51,8 @@
             border-bottom: solid 1px $pt-divider-black;
         }
         .#{$eccgui}-propertyvalue__pair--hasspacing > & {
-            padding-bottom: $eccgui-size-block-whitespace / 2;
-            margin-bottom: $eccgui-size-block-whitespace / 2;
+            padding-bottom: $eccgui-size-block-whitespace * 0.5;
+            margin-bottom: $eccgui-size-block-whitespace * 0.5;
         }
     }
 }

package/src/components/Select/Select.stories.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { loremIpsum } from "react-lorem-ipsum";
+
+import {
+  Select,
+  Button,
+  MenuItem,
+} from "../../index";
+
+export default {
+  title: "Components/Select",
+  component: Select,
+  argTypes: {
+  },
+} as ComponentMeta<typeof Select>;
+
+const Template: ComponentStory<typeof Select> = (args) => (
+    <Select {...args}>
+        <Button alignText="left" text="Select an element" fill outlined rightIcon="toggler-showmore"/>
+    </Select>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    items: loremIpsum({ p: 1, avgSentencesPerParagraph: 5, random: false })
+        .toString()
+        .split(".")
+        .map((item) => { return { label: item }}),
+    itemRenderer: (item, props) => {
+        return <MenuItem text={item.label} />
+    },
+    fill: true,
+    filterable: false,
+}

package/src/components/Select/Select.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import {
+    Select2 as BlueprintSelect,
+    Select2Props as BlueprintSelectProps,
+} from "@blueprintjs/select";
+import { ContextOverlayProps } from "./../../index";
+
+/**
+ * FIXME: Currently we only route the original element through.
+ * We should add here basic elemeents and processes for target and selections, etc.
+ */
+
+export interface SelectProps<T> extends Omit<
+    BlueprintSelectProps<T>,
+    "popoverTargetProps" | "popoverContentProps" | "popoverProps" | "popoverRef"
+> {
+    /**
+     * Props to spread to `ContextOverlay` that is used to display the dropdown.
+     */
+    contextOverlayProps?: Partial<Omit<ContextOverlayProps, "content" | "defaultIsOpen" | "disabled" | "fill" | "renderTarget" | "targetTagName">>
+}
+
+/**
+ * Create a Select box without the HTML select element.
+ * It is possible to filter options, as well as to add new options if necessary.
+ */
+function Select<T>({contextOverlayProps, ...otherSelectProps}: SelectProps<T>) {
+    return (
+        <BlueprintSelect<T>
+            popoverProps={{ minimal: true, ...contextOverlayProps}}
+            {...otherSelectProps}
+        />
+    );
+}
+
+Select.ofType = BlueprintSelect.ofType;
+
+export default Select;