@eccenca/gui-elements 23.2.0-rc.0 → 23.2.0

package/dist/types/components/Select/Select.d.ts

@@ -1,22 +1,41 @@
 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"> {
+import { Select2Props as BlueprintSelectProps } from "@blueprintjs/select";
+import { ButtonProps, ContextOverlayProps } from "./../../index";
+export interface SelectProps<T> extends Omit<BlueprintSelectProps<T>, "popoverTargetProps" | "popoverContentProps" | "popoverProps" | "popoverRef">, Pick<ButtonProps, "icon" | "rightIcon"> {
+    /**
+     * Textual representation of the the selected value.
+     * This is displayed if the select target is not controlled directly via `children` elements.
+     */
+    text?: string;
+    /**
+     * Placeholder text displayed for selects without defined `text`.
+     * This is displayed if the select target is not controlled directly via `children` elements.
+     */
+    placeholder?: string;
     /**
      * Props to spread to `ContextOverlay` that is used to display the dropdown.
      */
     contextOverlayProps?: Partial<Omit<ContextOverlayProps, "content" | "defaultIsOpen" | "disabled" | "fill" | "renderTarget" | "targetTagName">>;
+    /**
+     * Event handler to reset search input.
+     * Only works with the uncontrolled default select target.
+     * If set then `rightElement` is automatically set with an action button to trigger the handler.
+     */
+    onClearanceHandler?: () => void;
+    /**
+     * Tooltip to show for the clear button.
+     * Only works with the uncontrolled default select target.
+     */
+    onClearanceText?: string;
 }
 /**
  * Create a Select box without the HTML select element.
  * It is possible to filter options, as well as to add new options if necessary.
+ *
+ * **Use this input element when the value is primarily selected from a defined set of elements.**
  */
-export declare function Select<T>({ contextOverlayProps, ...otherSelectProps }: SelectProps<T>): React.JSX.Element;
+export declare function Select<T>({ contextOverlayProps, className, children, text, placeholder, icon, rightIcon, onClearanceHandler, inputProps, onClearanceText, ...otherSelectProps }: SelectProps<T>): React.JSX.Element;
 export declare namespace Select {
-    var ofType: typeof BlueprintSelect.ofType;
+    var ofType: <U>() => (props: SelectProps<U>) => React.JSX.Element;
 }
 export default Select;

package/dist/types/components/SuggestField/SuggestField.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { AutoCompleteFieldProps } from "../AutocompleteField/AutoCompleteField";
+export declare type SuggestFieldProps<T, UPDATE_VALUE> = AutoCompleteFieldProps<T, UPDATE_VALUE>;
+/**
+ * A component with the appearance of an input field that allows to select and optionally create new items.
+ * It shows suggestions for the entered text from which the user can select any option.
+ * It has the following fixed behavior:
+ *
+ * - When not focused, a different representation of the item value can be shown, e.g. the label of the value.
+ * - When changing an existing item the input text is set to the original value in order to be able to edit the original value.
+ * - When for a specific input text, the only item returns is the currently set item itself, all items are shown below it, to make
+ *   clear that there are still other items to choose from.
+ * - The suggestions are fetched with a short delay, so not too many unnecessary requests are fired.
+ * - Items where itemRenderer returns a string have a default representation, i.e. highlighting of search words, active flag etc.
+ */
+export declare function SuggestField<T, UPDATE_VALUE>({ className, ...otherProps }: SuggestFieldProps<T, UPDATE_VALUE>): React.JSX.Element;

package/dist/types/components/SuggestField/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export * from "./SuggestField";
+export declare const suggestFieldUtils: {
+    createNewItemRendererFactory: (itemTextRenderer: (query: string) => string | JSX.Element, iconName?: import("../Icon/canonicalIconNames").ValidIconName | import("react").ReactElement<import("..").TestIconProps, string | import("react").JSXElementConstructor<any>> | undefined) => (query: string, modifiers: import("../AutocompleteField/interfaces").IRenderModifiers, handleClick: import("react").MouseEventHandler<HTMLElement>) => import("react").JSX.Element;
+};

package/dist/types/components/index.d.ts

@@ -1,7 +1,9 @@
 export * from "./Accordion";
 export * from "./Application";
 export * from "./AutocompleteField";
+export * from "./SuggestField";
 export * from "./AutoSuggestion";
+export * from "./CodeAutocompleteField";
 export * from "./Badge/Badge";
 export * from "./Breadcrumb";
 export * from "./Button/Button";
@@ -21,6 +23,7 @@ export * from "./Link/Link";
 export * from "./List/List";
 export * from "./Menu";
 export * from "./MultiSelect/MultiSelect";
+export * from "./MultiSuggestField/MultiSuggestField";
 export * from "./Notification";
 export * from "./NumericInput/NumericInput";
 export * from "./OverviewItem";

package/dist/types/extensions/react-flow/nodes/NodeContent.d.ts

@@ -1,19 +1,19 @@
 import React from "react";
 import { Position } from "react-flow-renderer";
-import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
-import { DepictionProps } from "../../../components/Depiction/Depiction";
 import { IntentTypes } from "../../../common/Intent";
+import { DepictionProps } from "../../../components/Depiction/Depiction";
+import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
 import { ReacFlowVersionSupportProps } from "../versionsupport";
-import { HandleProps, HandleNextProps } from "./../handles/HandleDefault";
-import { NodeProps } from "./NodeDefault";
+import { HandleNextProps, HandleProps } from "./../handles/HandleDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
+import { NodeProps } from "./NodeDefault";
 import { HighlightingState, NodeHighlightColor } from "./sharedTypes";
 export type { HighlightingState };
 interface NodeContentHandleLegacyProps extends HandleProps {
     category?: "configuration";
 }
 export declare type IHandleProps = NodeContentHandleLegacyProps;
-interface NodeContentHandleNextProps extends HandleNextProps {
+export interface NodeContentHandleNextProps extends HandleNextProps {
     category?: "configuration";
 }
 export declare type NodeContentHandleProps = NodeContentHandleLegacyProps | NodeContentHandleNextProps;
@@ -148,12 +148,12 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      * This property is only forwarded from the `NodeDefault` element.
      * If set then it will be always overwritten internally.
      */
-    targetPosition?: typeof Position[keyof typeof Position];
+    targetPosition?: (typeof Position)[keyof typeof Position];
     /**
      * This property is only forwarded from the `NodeDefault` element.
      * If set then it will be always overwritten internally.
      */
-    sourcePosition?: typeof Position[keyof typeof Position];
+    sourcePosition?: (typeof Position)[keyof typeof Position];
     /**
      * This property is only forwarded from the `NodeDefault` element.
      * If set then it will be always overwritten internally.

package/dist/types/index.d.ts

@@ -12,8 +12,9 @@ declare const HelperClasses: {
         [key: string]: string;
     };
 };
+export * from "./configuration/constants";
 export * from "./common";
 export * from "./components";
 export * from "./extensions";
 export * from "./cmem";
-export { ClassNames, HelperClasses, LegacyReplacements, };
+export { ClassNames, HelperClasses, LegacyReplacements };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "23.2.0-rc.0",
+    "version": "23.2.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",

package/src/components/Application/_header.scss

@@ -5,32 +5,37 @@
     own rule patches.
 */
 
+@use "sass:color";
+
 /// Header bar background
 $shell-header-bg-01: $eccgui-color-applicationheader-background !default;
 
 /// Header menu trigger hover, Header nav link hover
-$shell-header-bg-02: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default;
+$shell-header-bg-02: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%) !default;
 
 /// Header action active background
-$shell-header-bg-03: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%) !default;
+$shell-header-bg-03: color.adjust($eccgui-color-applicationheader-background, $lightness: -10%) !default;
 
 /// Header submenu link hover
-$shell-header-bg-04: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default; //TODO needs color var gray-90-hover
+$shell-header-bg-04: color.adjust(
+    $eccgui-color-applicationheader-background,
+    $lightness: -5%
+) !default; // TODO needs color var gray-90-hover
 
 /// Header nav link active and focus background
-$shell-header-bg-05: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default;
+$shell-header-bg-05: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%) !default;
 
 /// Header nav link submenu
-$shell-header-bg-06: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%) !default;
+$shell-header-bg-06: color.adjust($eccgui-color-applicationheader-background, $lightness: -10%) !default;
 
 /// Header border bottom
 $shell-header-border-01: transparent !default;
 
 /// Header focus
-$shell-header-focus: adjust-color($eccgui-color-applicationheader-text, $lightness: 39%) !default;
+$shell-header-focus: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%) !default;
 
 /// Primary text in header, Title text
-$shell-header-text-01: adjust-color($eccgui-color-applicationheader-text, $lightness: -5%) !default;
+$shell-header-text-01: color.adjust($eccgui-color-applicationheader-text, $lightness: -5%) !default;
 
 /// Secondary text in header, Menu item nav text
 $shell-header-text-02: $eccgui-color-applicationheader-text !default;
@@ -48,7 +53,7 @@ $shell-header-icon-03: $eccgui-color-applicationheader-text !default;
 $shell-header-link: $blue-60 !default;
 
 // load library sub component
-@import '~@carbon/styles/scss/components/ui-shell/header/index';
+@import "~@carbon/styles/scss/components/ui-shell/header/index";
 
 // tweack original layout
 
@@ -62,11 +67,10 @@ $shell-header-link: $blue-60 !default;
 }
 
 .#{$prefix}--header__menu-trigger {
-    margin-right: 0;
     flex-shrink: 0;
+    margin-right: 0;
 }
 
-
 span.#{$prefix}--header__name {
     // @extend a.#{$prefix}--header__name;
     @extend .#{$prefix}--header__name;
@@ -79,15 +83,19 @@ span.#{$prefix}--header__name {
 }
 
 .#{$eccgui}-application__title--withsidebar {
-    width: mini-units(40 - 8);
     flex-shrink: 0;
+    width: mini-units(40 - 8);
 }
 
 .#{$eccgui}-application__title--content {
-    white-space: nowrap;
     display: inline-block;
     overflow: hidden;
+    font-size: $eccgui-size-typo-caption;
+    font-weight: $eccgui-font-weight-bold;
+    line-height: $eccgui-size-typo-caption-lineheight;
     text-overflow: ellipsis;
+    letter-spacing: $eccgui-font-spacing-wide;
+    white-space: nowrap;
 }
 
 .#{$eccgui}-application__title--depiction {
@@ -98,38 +106,23 @@ span.#{$prefix}--header__name {
         display: none;
     }
 
-    & > img, & > svg {
+    & > img,
+    & > svg {
         display: inline;
+        width: auto;
+        max-width: mini-units(5);
+        height: auto;
+        max-height: mini-units(5);
         padding: 0;
         margin: mini-units(1.4) 0 mini-units(1.6) 0;
-        max-height: mini-units(5);
-        max-width: mini-units(5);
-        width: auto;
-        height:auto;
         vertical-align: middle;
     }
 }
 
-.#{$prefix}--header__nav {
-    // padding-left: mini-units(2);
-}
-
-a.#{$prefix}--header__menu-item {
-    // padding: 0 mini-units(2);
-}
-
-.#{$prefix}--header__menu-title[aria-expanded='true'] + .#{$prefix}--header__menu {
-    // width: mini-units(25);
-}
-
 .#{$prefix}--header__menu .#{$prefix}--header__menu-item {
     height: mini-units(8);
 }
 
-.#{$prefix}--header__menu-arrow {
-    // margin-left: mini-units(1);
-}
-
 // tweak original colors (as long as config does not work properly)
 
 // $shell-header-bg-01
@@ -137,38 +130,40 @@ a.#{$prefix}--header__menu-item {
 .#{$prefix}--skip-to-content:focus {
     background-color: $eccgui-color-applicationheader-background;
 }
+
 // $shell-header-bg-02
 a.#{$prefix}--header__menu-item:hover {
-    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
+    background-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
 }
 .#{$prefix}--header__menu-trigger:hover {
-    fill: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
+    fill: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
 }
 
 // $shell-header-bg-03
 .#{$prefix}--header__action:active,
-.#{$prefix}--header__menu-title[aria-expanded='true'] + .#{$prefix}--header__menu .#{$prefix}--header__menu-item:active,
-.#{$prefix}--header__action:active,
+.#{$prefix}--header__menu-title[aria-expanded="true"] + .#{$prefix}--header__menu .#{$prefix}--header__menu-item:active,
 a.#{$prefix}--header__menu-item:active {
-    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%);
+    background-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -10%);
 }
 
 // $shell-header-bg-04
 .#{$prefix}--header__action:hover,
-.#{$prefix}--header__menu-title[aria-expanded='true'] + .#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover {
-    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%);
+.#{$prefix}--header__menu-title[aria-expanded="true"] + .#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover {
+    background-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -10%);
 }
 
 // $shell-header-bg-05
 .#{$prefix}--header__action--active {
-    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
-    border-bottom-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
+    background-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
+    border-right-color: transparent;
+    border-bottom-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
+    border-left-color: transparent;
 }
 
 // $shell-header-bg-06
-.#{$prefix}--header__menu-title[aria-expanded='true'],
+.#{$prefix}--header__menu-title[aria-expanded="true"],
 .#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover {
-    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%);
+    background-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -10%);
 }
 
 // $shell-header-border-01
@@ -176,10 +171,6 @@ a.#{$prefix}--header__menu-item:active {
 .#{$prefix}--header__action {
     border-bottom: none;
 }
-.#{$prefix}--header__action--active {
-    border-left-color: transparent;
-    border-right-color: transparent;
-}
 .#{$prefix}--header__nav {
     &::before {
         background-color: transparent;
@@ -187,13 +178,13 @@ a.#{$prefix}--header__menu-item:active {
 }
 
 // $shell-header-focus
-.#{$prefix}--header__action:focus ,
+.#{$prefix}--header__action:focus,
 a.#{$prefix}--header__name:focus,
 a.#{$prefix}--header__menu-item:focus {
-    border-color: adjust-color($eccgui-color-applicationheader-text, $lightness: 39%);
+    border-color: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%);
 }
-.#{$prefix}--header__menu-title[aria-expanded='true'] {
-    color: adjust-color($eccgui-color-applicationheader-text, $lightness: 39%);
+.#{$prefix}--header__menu-title[aria-expanded="true"] {
+    color: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%);
 }
 
 // $shell-header-text-01
@@ -205,34 +196,34 @@ a.#{$prefix}--header__menu-item:active,
 a.#{$prefix}--header__menu-item:focus,
 .#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover,
 .#{$prefix}--skip-to-content:focus {
-  color: adjust-color($eccgui-color-applicationheader-text, $lightness: -5%);
+    color: color.adjust($eccgui-color-applicationheader-text, $lightness: -5%);
 }
 
 // $shell-header-text-02
 a.#{$prefix}--header__menu-item {
-  color: $eccgui-color-applicationheader-text;
+    color: $eccgui-color-applicationheader-text;
 }
 
 // $shell-header-icon-01
 .#{$prefix}--header__action,
 .#{$prefix}--header__action:hover,
 .#{$prefix}--header__action:active,
- .#{$prefix}--header__action:focus {
+.#{$prefix}--header__action:focus {
     color: $eccgui-color-applicationheader-text;
 }
 .#{$prefix}--header__menu-trigger > svg,
 a.#{$prefix}--header__menu-item:hover > svg,
 a.#{$prefix}--header__menu-item:active > svg,
 a.#{$prefix}--header__menu-item:focus > svg {
-  fill: $eccgui-color-applicationheader-text;
+    fill: $eccgui-color-applicationheader-text;
 }
 
 // $shell-header-icon-02
 .#{$prefix}--header__action > svg {
-  fill: $eccgui-color-applicationheader-text;
+    fill: $eccgui-color-applicationheader-text;
 }
 
 // $shell-header-icon-03
 .#{$prefix}--header__menu-arrow {
-  fill: $eccgui-color-applicationheader-text;
+    fill: $eccgui-color-applicationheader-text;
 }

package/src/components/AutoSuggestion/AutoSuggestion.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta } from "@storybook/react";
+
+import { AutoSuggestion } from "./../../../index";
+export { Default } from "../CodeAutocompleteField/CodeAutocompleteField.stories";
+
+export default {
+    title: "Forms/AutoSuggestion",
+    component: AutoSuggestion,
+    parameters: {
+        controls: {
+            exclude: /.*/g,
+        },
+    },
+} as Meta<typeof AutoSuggestion>;