@haiilo/catalyst 0.15.1 → 1.0.0

package/dist/types/components/cat-select/cat-select.d.ts

@@ -1,11 +1,51 @@
+import { Placement } from '@floating-ui/dom';
 import { EventEmitter } from '../../stencil-public-runtime';
-import { Choice } from 'choices.js';
+import { Observable } from 'rxjs';
+export interface Item {
+  id: string;
+}
+export interface Page<T> {
+  content: T[];
+  last: boolean;
+  totalElements?: number;
+}
+export interface RenderInfo {
+  label: string;
+  description?: string;
+  avatar?: {
+    src?: string;
+    round?: boolean;
+  };
+}
 /**
- * A single option in the select.
+ * @property resolve - Resolves the value of the select.
+ * @property retrieve - Retrieves the options of the select.
+ * @property render - Renders the items of the select.
  */
-export declare type CatSelectItem = Pick<Choice, 'label' | 'value' | 'customProperties'>;
+export interface CatSelectConnector<T extends Item = any> {
+  resolve: (ids: string[]) => Observable<T[]>;
+  retrieve: (term: string, page: number) => Observable<Page<T>>;
+  render: (item: T) => RenderInfo;
+}
+export interface CatSelectState {
+  term: string;
+  isOpen: boolean;
+  isLoading: boolean;
+  isResolving: boolean;
+  options: {
+    item: Item;
+    render: RenderInfo;
+  }[];
+  selection: {
+    item: Item;
+    render: RenderInfo;
+  }[];
+  activeOptionIndex: number;
+  activeSelectionIndex: number;
+  totalElements?: number;
+}
 /**
- * Select lets user choose one option from an options menu. Consider using
+ * Select lets user choose one option from an options' menu. Consider using
  * select when you have 6 or more options. Select component supports any content
  * type.
  *
@@ -14,97 +54,115 @@ export declare type CatSelectItem = Pick<Choice, 'label' | 'value' | 'customProp
  * @part label - The label content.
  */
 export declare class CatSelect {
+  private static readonly SKELETON_COUNT;
+  private static readonly DROPDOWN_OFFSET;
   private readonly i18n;
   private readonly id;
-  private resetItemsOnNextValueChange;
-  private choice?;
-  private choicesElement?;
-  private choiceInner?;
-  private choiceDropdown?;
-  private selectElement?;
-  private removeElement?;
+  private dropdown?;
+  private trigger?;
+  private input?;
+  private subscription?;
+  private term$;
+  private more$;
   hostElement: HTMLElement;
+  connector?: CatSelectConnector;
+  state: CatSelectState;
   hasSlottedLabel: boolean;
   /**
-   * The label for the select.
-   */
-  label: string;
-  /**
-   * Visually hide the label, but still show it to assistive technologies like screen readers.
+   * Enable multiple selection.
    */
-  labelHidden: boolean;
+  multiple: boolean;
   /**
-   * A value is required or must be check for the form to be submittable.
+   * The debounce time for the search.
    */
-  required: boolean;
+  debounce: number;
   /**
-   * The available options for the input.
+   * The placement of the select.
    */
-  items: CatSelectItem[];
+  placement: Placement;
   /**
    * The value of the select.
    */
-  value?: any;
+  value?: string | string[];
   /**
-   * Disable the select.
+   * Whether the select is disabled.
    */
   disabled: boolean;
   /**
-   * Enable multiple selection.
+   * The placeholder text to display within the select.
    */
-  multiple: boolean;
+  placeholder?: string;
+  /**
+   * Optional hint text(s) to be displayed with the select.
+   */
+  hint?: string | string[];
   /**
-   * The placeholder for the select.
+   * The label for the select.
    */
-  placeholder: string;
+  label: string;
   /**
-   * Whether the dropdown should appear above `(top)` or below `(bottom)` the
-   * input. By default, if there is not enough space within the window the
-   * dropdown will appear above the input, otherwise below it.
+   * The name of the form control. Submitted with the form as part of a name/value pair.
    */
-  position: 'auto' | 'top' | 'bottom';
+  name: string;
   /**
-   * Enable search for the select.
+   * Visually hide the label, but still show it to assistive technologies like screen readers.
    */
-  search: boolean;
+  labelHidden: boolean;
   /**
-   * Optional hint text(s) to be displayed with the select.
+   * A value is required or must be checked for the form to be submittable.
    */
-  hint?: string | string[];
+  required: boolean;
   /**
-   * Emitted when the value is changed.
+   * Whether the select should show a clear button.
    */
-  catChange: EventEmitter;
+  clearable: boolean;
+  onConnectorChange(connector: CatSelectConnector): void;
+  onStateChange(newState: CatSelectState, oldState: CatSelectState): void;
   /**
-   * Emitted when the search is triggered.
+   * Emitted when the select dropdown is opened.
    */
-  catSearch: EventEmitter;
+  catOpen: EventEmitter<FocusEvent>;
   /**
-   * Emitted when scrolled to the bottom.
+   * Emitted when the select dropdown is closed.
    */
-  catScrolledBottom: EventEmitter;
+  catClose: EventEmitter<FocusEvent>;
+  /**
+   * Emitted when the value is changed.
+   */
+  catChange: EventEmitter;
   /**
-   * Emitted when the select loses focus.
+   * Emitted when the select loses the focus.
    */
   catBlur: EventEmitter<FocusEvent>;
-  setChoicesHandler(items: CatSelectItem[]): void;
-  setValueHandler(value?: any): void;
-  componentWillRender(): void;
   componentDidLoad(): void;
-  disconnectedCallback(): void;
+  componentWillRender(): void;
   onBlur(event: FocusEvent): void;
+  onKeyDown(event: KeyboardEvent): void;
+  onKeyUp(event: KeyboardEvent): void;
+  /**
+   * Connect the functions of the select
+   *
+   * @param connector - The {@link CatSelectConnector} of the select.
+   */
+  connect(connector: CatSelectConnector): Promise<void>;
   render(): any;
-  private init;
   private get hintSection();
-  private onChange;
-  private showMultipleFocus;
-  private resetFocus;
-  private isFocused;
-  private onChoice;
-  private onSearch;
-  private onScrolledBottom;
-  private showDropdownHandler;
-  private createRemoveItemButton;
-  private updateRemoveItemButtonVisibility;
-  private onRemoveItemButtonClick;
+  private get connectorSafe();
+  private resolve;
+  private show;
+  private hide;
+  private search;
+  private isSelected;
+  private select;
+  private deselect;
+  private toggle;
+  private clear;
+  private reset;
+  private onClick;
+  private onInput;
+  private update;
+  private patchState;
+  private isPillboxActive;
+  private get activeDescendant();
+  private onArrowKeyDown;
 }

package/dist/types/components/cat-select-demo/cat-select-demo.d.ts

@@ -0,0 +1,8 @@
+export declare class CatSelectTest {
+  private multipleSelect?;
+  private multipleSelectAvatar?;
+  private singleSelect?;
+  private singleSelectAvatar?;
+  componentDidLoad(): void;
+  render(): any;
+}

package/dist/types/components.d.ts

@@ -8,8 +8,7 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Breakpoint } from "./utils/breakpoints";
 import { InputType } from "./components/cat-input/input-type";
 import { Placement } from "@floating-ui/dom";
-import { CatSelectItem } from "./components/cat-select/cat-select";
-import { CatSelectRemoteConnector, Item } from "./components/cat-select-remote/cat-select-remote";
+import { CatSelectConnector, Item } from "./components/cat-select/cat-select";
 import { Observable } from "rxjs";
 export namespace Components {
     interface CatAlert {
@@ -431,57 +430,15 @@ export namespace Components {
         "scrolledBuffer": number;
     }
     interface CatSelect {
-        /**
-          * Disable the select.
-         */
-        "disabled": boolean;
-        /**
-          * Optional hint text(s) to be displayed with the select.
-         */
-        "hint"?: string | string[];
-        /**
-          * The available options for the input.
-         */
-        "items": CatSelectItem[];
-        /**
-          * The label for the select.
-         */
-        "label": string;
-        /**
-          * Visually hide the label, but still show it to assistive technologies like screen readers.
-         */
-        "labelHidden": boolean;
-        /**
-          * Enable multiple selection.
-         */
-        "multiple": boolean;
-        /**
-          * The placeholder for the select.
-         */
-        "placeholder": string;
-        /**
-          * Whether the dropdown should appear above `(top)` or below `(bottom)` the input. By default, if there is not enough space within the window the dropdown will appear above the input, otherwise below it.
-         */
-        "position": 'auto' | 'top' | 'bottom';
-        /**
-          * A value is required or must be check for the form to be submittable.
-         */
-        "required": boolean;
-        /**
-          * Enable search for the select.
-         */
-        "search": boolean;
-        /**
-          * The value of the select.
-         */
-        "value"?: any;
-    }
-    interface CatSelectRemote {
         /**
           * Whether the select should show a clear button.
          */
         "clearable": boolean;
-        "connect": (connector: CatSelectRemoteConnector) => Promise<void>;
+        /**
+          * Connect the functions of the select
+          * @param connector - The {@link CatSelectConnector} of the select.
+         */
+        "connect": (connector: CatSelectConnector) => Promise<void>;
         /**
           * The debounce time for the search.
          */
@@ -519,7 +476,7 @@ export namespace Components {
          */
         "placement": Placement;
         /**
-          * A value is required or must be check for the form to be submittable.
+          * A value is required or must be checked for the form to be submittable.
          */
         "required": boolean;
         /**
@@ -527,7 +484,7 @@ export namespace Components {
          */
         "value"?: string | string[];
     }
-    interface CatSelectRemoteTest {
+    interface CatSelectDemo {
     }
     interface CatSkeleton {
         /**
@@ -756,10 +713,6 @@ export interface CatSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCatSelectElement;
 }
-export interface CatSelectRemoteCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLCatSelectRemoteElement;
-}
 export interface CatTabCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCatTabElement;
@@ -857,17 +810,11 @@ declare global {
         prototype: HTMLCatSelectElement;
         new (): HTMLCatSelectElement;
     };
-    interface HTMLCatSelectRemoteElement extends Components.CatSelectRemote, HTMLStencilElement {
+    interface HTMLCatSelectDemoElement extends Components.CatSelectDemo, HTMLStencilElement {
     }
-    var HTMLCatSelectRemoteElement: {
-        prototype: HTMLCatSelectRemoteElement;
-        new (): HTMLCatSelectRemoteElement;
-    };
-    interface HTMLCatSelectRemoteTestElement extends Components.CatSelectRemoteTest, HTMLStencilElement {
-    }
-    var HTMLCatSelectRemoteTestElement: {
-        prototype: HTMLCatSelectRemoteTestElement;
-        new (): HTMLCatSelectRemoteTestElement;
+    var HTMLCatSelectDemoElement: {
+        prototype: HTMLCatSelectDemoElement;
+        new (): HTMLCatSelectDemoElement;
     };
     interface HTMLCatSkeletonElement extends Components.CatSkeleton, HTMLStencilElement {
     }
@@ -932,8 +879,7 @@ declare global {
         "cat-radio-group": HTMLCatRadioGroupElement;
         "cat-scrollable": HTMLCatScrollableElement;
         "cat-select": HTMLCatSelectElement;
-        "cat-select-remote": HTMLCatSelectRemoteElement;
-        "cat-select-remote-test": HTMLCatSelectRemoteTestElement;
+        "cat-select-demo": HTMLCatSelectDemoElement;
         "cat-skeleton": HTMLCatSkeletonElement;
         "cat-spinner": HTMLCatSpinnerElement;
         "cat-tab": HTMLCatTabElement;
@@ -1416,68 +1362,6 @@ declare namespace LocalJSX {
         "scrolledBuffer"?: number;
     }
     interface CatSelect {
-        /**
-          * Disable the select.
-         */
-        "disabled"?: boolean;
-        /**
-          * Optional hint text(s) to be displayed with the select.
-         */
-        "hint"?: string | string[];
-        /**
-          * The available options for the input.
-         */
-        "items"?: CatSelectItem[];
-        /**
-          * The label for the select.
-         */
-        "label"?: string;
-        /**
-          * Visually hide the label, but still show it to assistive technologies like screen readers.
-         */
-        "labelHidden"?: boolean;
-        /**
-          * Enable multiple selection.
-         */
-        "multiple"?: boolean;
-        /**
-          * Emitted when the select loses focus.
-         */
-        "onCatBlur"?: (event: CatSelectCustomEvent<FocusEvent>) => void;
-        /**
-          * Emitted when the value is changed.
-         */
-        "onCatChange"?: (event: CatSelectCustomEvent<any>) => void;
-        /**
-          * Emitted when scrolled to the bottom.
-         */
-        "onCatScrolledBottom"?: (event: CatSelectCustomEvent<any>) => void;
-        /**
-          * Emitted when the search is triggered.
-         */
-        "onCatSearch"?: (event: CatSelectCustomEvent<any>) => void;
-        /**
-          * The placeholder for the select.
-         */
-        "placeholder"?: string;
-        /**
-          * Whether the dropdown should appear above `(top)` or below `(bottom)` the input. By default, if there is not enough space within the window the dropdown will appear above the input, otherwise below it.
-         */
-        "position"?: 'auto' | 'top' | 'bottom';
-        /**
-          * A value is required or must be check for the form to be submittable.
-         */
-        "required"?: boolean;
-        /**
-          * Enable search for the select.
-         */
-        "search"?: boolean;
-        /**
-          * The value of the select.
-         */
-        "value"?: any;
-    }
-    interface CatSelectRemote {
         /**
           * Whether the select should show a clear button.
          */
@@ -1513,19 +1397,19 @@ declare namespace LocalJSX {
         /**
           * Emitted when the select loses the focus.
          */
-        "onCatBlur"?: (event: CatSelectRemoteCustomEvent<FocusEvent>) => void;
+        "onCatBlur"?: (event: CatSelectCustomEvent<FocusEvent>) => void;
         /**
           * Emitted when the value is changed.
          */
-        "onCatChange"?: (event: CatSelectRemoteCustomEvent<any>) => void;
+        "onCatChange"?: (event: CatSelectCustomEvent<any>) => void;
         /**
           * Emitted when the select dropdown is closed.
          */
-        "onCatClose"?: (event: CatSelectRemoteCustomEvent<FocusEvent>) => void;
+        "onCatClose"?: (event: CatSelectCustomEvent<FocusEvent>) => void;
         /**
           * Emitted when the select dropdown is opened.
          */
-        "onCatOpen"?: (event: CatSelectRemoteCustomEvent<FocusEvent>) => void;
+        "onCatOpen"?: (event: CatSelectCustomEvent<FocusEvent>) => void;
         /**
           * The placeholder text to display within the select.
          */
@@ -1535,7 +1419,7 @@ declare namespace LocalJSX {
          */
         "placement"?: Placement;
         /**
-          * A value is required or must be check for the form to be submittable.
+          * A value is required or must be checked for the form to be submittable.
          */
         "required"?: boolean;
         /**
@@ -1543,7 +1427,7 @@ declare namespace LocalJSX {
          */
         "value"?: string | string[];
     }
-    interface CatSelectRemoteTest {
+    interface CatSelectDemo {
     }
     interface CatSkeleton {
         /**
@@ -1772,8 +1656,7 @@ declare namespace LocalJSX {
         "cat-radio-group": CatRadioGroup;
         "cat-scrollable": CatScrollable;
         "cat-select": CatSelect;
-        "cat-select-remote": CatSelectRemote;
-        "cat-select-remote-test": CatSelectRemoteTest;
+        "cat-select-demo": CatSelectDemo;
         "cat-skeleton": CatSkeleton;
         "cat-spinner": CatSpinner;
         "cat-tab": CatTab;
@@ -1802,8 +1685,7 @@ declare module "@stencil/core" {
             "cat-radio-group": LocalJSX.CatRadioGroup & JSXBase.HTMLAttributes<HTMLCatRadioGroupElement>;
             "cat-scrollable": LocalJSX.CatScrollable & JSXBase.HTMLAttributes<HTMLCatScrollableElement>;
             "cat-select": LocalJSX.CatSelect & JSXBase.HTMLAttributes<HTMLCatSelectElement>;
-            "cat-select-remote": LocalJSX.CatSelectRemote & JSXBase.HTMLAttributes<HTMLCatSelectRemoteElement>;
-            "cat-select-remote-test": LocalJSX.CatSelectRemoteTest & JSXBase.HTMLAttributes<HTMLCatSelectRemoteTestElement>;
+            "cat-select-demo": LocalJSX.CatSelectDemo & JSXBase.HTMLAttributes<HTMLCatSelectDemoElement>;
             "cat-skeleton": LocalJSX.CatSkeleton & JSXBase.HTMLAttributes<HTMLCatSkeletonElement>;
             "cat-spinner": LocalJSX.CatSpinner & JSXBase.HTMLAttributes<HTMLCatSpinnerElement>;
             "cat-tab": LocalJSX.CatTab & JSXBase.HTMLAttributes<HTMLCatTabElement>;

package/dist/types/index.d.ts

@@ -2,7 +2,4 @@ export { Components, JSX } from './components';
 export { CatI18nRegistry } from './components/cat-i18n/cat-i18n-registry';
 export { CatIconRegistry } from './components/cat-icon/cat-icon-registry';
 export { NotificationsService } from './components/cat-notification/cat-notification';
-export { CatSelectItem } from './components/cat-select/cat-select';
-export { CatSelectRemoteConnector } from './components/cat-select-remote/cat-select-remote';
-export { RenderInfo } from './components/cat-select-remote/cat-select-remote';
-export { Page } from './components/cat-select-remote/cat-select-remote';
+export { CatSelectConnector, Item, Page, RenderInfo } from './components/cat-select/cat-select';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haiilo/catalyst",
-  "version": "0.15.1",
+  "version": "1.0.0",
   "description": "Catalyst Design System",
   "license": "MIT",
   "repository": {
@@ -43,16 +43,15 @@
   },
   "dependencies": {
     "@floating-ui/dom": "0.4.1",
-    "@haiilo/catalyst-tokens": "0.15.1",
+    "@haiilo/catalyst-tokens": "1.0.0",
     "@stencil/core": "2.17.0",
     "autosize": "5.0.1",
     "autosize-input": "^1.0.2",
     "choices.js": "10.1.0",
-    "focus-trap": "6.8.1",
+    "focus-trap": "7.0.0",
     "loglevel": "1.8.0",
     "sanitize.css": "13.0.0",
-    "tabbable": "5.3.1",
-    "toastify-js": "1.11.2"
+    "toastify-js": "1.12.0"
   },
   "devDependencies": {
     "@babel/core": "^7.16.5",
@@ -64,19 +63,19 @@
     "@types/autosize": "^4.0.1",
     "@types/jest": "^27.4.0",
     "@types/toastify-js": "^1.11.0",
-    "@typescript-eslint/eslint-plugin": "^5.11.0",
-    "@typescript-eslint/parser": "^5.11.0",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/parser": "^5.36.2",
     "babel-loader": "^8.2.3",
-    "eslint": "^8.18.0",
+    "eslint": "^8.23.0",
     "eslint-config-prettier": "^8.3.0",
     "jest": "^27.5.1",
     "jest-cli": "^27.5.1",
     "prettier": "^2.7.1",
     "puppeteer": "^13.5.2",
     "rxjs": "^7.5.5",
-    "stylelint": "^14.9.1",
+    "stylelint": "^14.11.0",
     "stylelint-config-prettier-scss": "^0.0.1",
-    "stylelint-config-standard-scss": "^4.0.0",
+    "stylelint-config-standard-scss": "^5.0.0",
     "typescript": "^4.5.5"
   }
 }