gd-bs 6.6.91 → 6.6.92

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gd-bs",
-    "version": "6.6.91",
+    "version": "6.6.92",
     "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
     "main": "build/index.js",
     "typings": "src/index.d.ts",

package/src/components/dropdown/index.ts

@@ -1,10 +1,10 @@
 import { IDropdown, IDropdownItem, IDropdownProps } from "./types";
 import { ICheckboxGroup, ICheckboxGroupItem } from "../checkboxGroup/types";
-import { IPopover, IPopoverProps } from "../popover/types";
+import { IFloatingUI } from "../floating-ui/types";
 import { Base } from "../base";
 import { ButtonClassNames, ButtonTypes } from "../button";
 import { CheckboxGroup, CheckboxGroupTypes } from "../checkboxGroup"
-import { Popover, PopoverPlacements, PopoverTypes } from "../popover";
+import { FloatingUI, FloatingUIPlacements, FloatingUITypes } from "../floating-ui";
 import { DropdownFormItem } from "./formItem";
 import { DropdownItem } from "./item";
 import { HTML, HTMLForm, HTMLNavItem, HTMLSplit } from "./templates";
@@ -12,7 +12,7 @@ import { HTML, HTMLForm, HTMLNavItem, HTMLSplit } from "./templates";
 /**
  * Dropdown Types
  */
-export const DropdownPlacements = PopoverPlacements;
+export const DropdownPlacements = FloatingUIPlacements;
 export const DropdownTypes = ButtonTypes;
 
 // Gets the template
@@ -38,9 +38,9 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
     private _autoSelect: boolean = null;
     private _cb: ICheckboxGroup = null;
     private _elMenu: HTMLElement;
+    private _floatingUI: IFloatingUI = null;
     private _initFl: boolean = false;
     private _items: Array<DropdownFormItem | DropdownItem> = null;
-    private _popover: IPopover = null;
 
     // Constructor
     constructor(props: IDropdownProps, template: string = GetHTML(props)) {
@@ -213,64 +213,58 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
         let toggle = this.el.querySelector(".dropdown-toggle") as HTMLElement;
         if (toggle && this._elMenu) {
             // Set the type, based on the current dropdown type
-            let popoverType = PopoverTypes.LightBorder;
+            let popoverType = FloatingUITypes.LightBorder;
             switch (this.props.type) {
                 case DropdownTypes.Danger:
                 case DropdownTypes.OutlineDanger:
-                    popoverType = PopoverTypes.Danger;
+                    popoverType = FloatingUITypes.Danger;
                     break;
                 case DropdownTypes.Dark:
                 case DropdownTypes.OutlineDark:
-                    popoverType = PopoverTypes.Dark;
+                    popoverType = FloatingUITypes.Dark;
                     break;
                 case DropdownTypes.Info:
                 case DropdownTypes.OutlineInfo:
-                    popoverType = PopoverTypes.Info;
+                    popoverType = FloatingUITypes.Info;
                     break;
                 case DropdownTypes.Light:
                 case DropdownTypes.OutlineLight:
                 case DropdownTypes.Link:
                 case DropdownTypes.OutlineLink:
-                    popoverType = PopoverTypes.Light;
+                    popoverType = FloatingUITypes.Light;
                     break;
                 case DropdownTypes.Primary:
                 case DropdownTypes.OutlinePrimary:
-                    popoverType = PopoverTypes.Primary;
+                    popoverType = FloatingUITypes.Primary;
                     break;
                 case DropdownTypes.Secondary:
                 case DropdownTypes.OutlineSecondary:
-                    popoverType = PopoverTypes.Secondary;
+                    popoverType = FloatingUITypes.Secondary;
                     break;
                 case DropdownTypes.Success:
                 case DropdownTypes.OutlineSuccess:
-                    popoverType = PopoverTypes.Success;
+                    popoverType = FloatingUITypes.Success;
                     break;
                 case DropdownTypes.Warning:
                 case DropdownTypes.OutlineWarning:
-                    popoverType = PopoverTypes.Warning;
+                    popoverType = FloatingUITypes.Warning;
                     break;
             }
 
-            // Create the props
-            let props: IPopoverProps = {
-                target: toggle,
-                placement: typeof (this.props.placement) === "number" ? this.props.placement : PopoverPlacements.BottomStart,
-                type: popoverType,
+            // Create the menu
+            this._floatingUI = FloatingUI({
+                className: "floating-dropdown",
+                elContent: this._elMenu,
+                elTarget: toggle,
+                placement: typeof (this.props.placement) === "number" ? this.props.placement : FloatingUIPlacements.BottomStart,
+                theme: popoverType,
                 options: {
                     arrow: false,
+                    flip: true,
                     shift: true,
-                    trigger: "click",
+                    trigger: "click"
                 }
-            };
-
-            // Call the render event
-            props = this.props.onMenuRendering ? this.props.onMenuRendering(props) : props;
-
-            // Create a popover to display the menu
-            this._popover = Popover(props);
-
-            // Set the popover content
-            this._popover.setContent(this._elMenu);
+            });
         }
     }
 
@@ -610,10 +604,10 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
     get isMulti(): boolean { return this.props.multi; }
 
     // Returns true if the dropdown menu is visible
-    get isVisible(): boolean { return this._popover ? this._popover.isVisible : false; }
+    get isVisible(): boolean { return this._floatingUI ? this._floatingUI.isVisible : false; }
 
-    // The popover menu
-    get popover(): IPopover { return this._popover; }
+    // The floating ui menu
+    get floatingUI(): IFloatingUI { return this._floatingUI; }
 
     // Sets the dropdown items
     setItems(newItems: Array<IDropdownItem> = []) {
@@ -771,7 +765,7 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
     // Toggles the menu
     toggle() {
         // Toggle the popover
-        this._popover ? this._popover.toggle() : null;
+        this._floatingUI ? this._floatingUI.toggle() : null;
     }
 }
 export const Dropdown = (props: IDropdownProps, template?: string): IDropdown => { return new _Dropdown(props, template); }

package/src/components/dropdown/types.d.ts

@@ -48,8 +48,7 @@ export const Dropdown: (props: IDropdownProps, template?: string) => IDropdown;
 
 import { IBaseProps } from "../types";
 import { IButtonTypes } from "../button/types";
-import { IFloatingUIPlacements } from "../floating-ui/types";
-import { IPopover, IPopoverProps } from "../popover/types";
+import { IFloatingUI, IFloatingUIProps, IFloatingUIPlacements } from "../floating-ui/types";
 
 /**
  * Dropdown Placements
@@ -84,7 +83,7 @@ export interface IDropdown {
     isMulti: boolean;
 
     /** The popover menu. */
-    popover: IPopover;
+    floatingUI: IFloatingUI;
 
     /** Updates the dropdown items. */
     setItems: (items: Array<IDropdownItem>) => void;
@@ -153,7 +152,7 @@ export interface IDropdownProps extends IBaseProps<IDropdown> {
     multi?: boolean;
     navFl?: boolean;
     onChange?: (item?: IDropdownItem | Array<IDropdownItem>, ev?: Event) => void;
-    onMenuRendering?: (props: IPopoverProps) => IPopoverProps;
+    onMenuRendering?: (props: IFloatingUIProps) => IFloatingUIProps;
     placement?: number;
     required?: boolean;
     title?: string;

package/src/components/floating-ui/index.ts

@@ -385,5 +385,8 @@ class _FloatingUI {
         this._elContent.classList.remove("d-none");
         if (!document.body.contains(this._elContent)) { document.body.appendChild(this._elContent); this.refresh(); }
     }
+
+    // Toggles the floating ui
+    toggle() { this.isVisible ? this.hide() : this.show(); }
 }
 export const FloatingUI = (props: IFloatingUIProps): IFloatingUI => { return new _FloatingUI(props); }

package/src/components/floating-ui/types.d.ts

@@ -9,6 +9,7 @@ export interface IFloatingUI {
     isVisible: boolean;
     setContent: (el: string | Element) => void;
     show: () => void;
+    toggle: () => void;
 }
 
 export interface IFloatingUIOptions {

package/src/components/form/controlTypes.d.ts

@@ -25,7 +25,7 @@ import { ICheckboxGroup, ICheckboxGroupItem } from "../checkboxGroup/types";
 import { IDropdown, IDropdownItem, IDropdownProps } from "../dropdown/types";
 import { IInputGroup } from "../inputGroup/types";
 import { IListBox } from "../listBox/types";
-import { IPopoverProps } from "../popover/types";
+import { IFloatingUIProps } from "../floating-ui/types";
 
 /**
  * Custom Controls
@@ -115,7 +115,7 @@ export interface IFormControlPropsDropdown extends IFormControlProps {
     onChange?: (item: IDropdownItem, ev?: Event) => void;
     onControlRendering?: (control: IFormControlPropsDropdown) => void | PromiseLike<IFormControlPropsDropdown>;
     onGetValue?: (control: IFormControlPropsDropdown) => any;
-    onMenuRendering?: (props: IPopoverProps) => IPopoverProps;
+    onMenuRendering?: (props: IFloatingUIProps) => IFloatingUIProps;
     onValidate?: (control: IFormControlPropsDropdown, results: IFormControlValidationResult<IDropdownItem>) => boolean | IFormControlValidationResult<IDropdownItem>;
 }
 
@@ -168,7 +168,7 @@ export interface IFormControlPropsMultiDropdown extends IFormControlProps {
     onChange?: (item: Array<IDropdownItem>, ev?: Event) => void;
     onControlRendering?: (control: IFormControlPropsDropdown) => void | PromiseLike<IFormControlPropsDropdown>;
     onGetValue?: (control: IFormControlPropsDropdown) => any;
-    onMenuRendering?: (props: IPopoverProps) => IPopoverProps;
+    onMenuRendering?: (props: IFloatingUIProps) => IFloatingUIProps;
     onValidate?: (control: IFormControlPropsDropdown, results: IFormControlValidationResult<Array<IDropdownItem>>) => boolean | IFormControlValidationResult<Array<IDropdownItem>>;
 }
 

package/src/components/navbar/types.d.ts

@@ -92,7 +92,7 @@ export const NavbarTypes: INavbarTypes;
 
 import { IBaseProps } from "../types";
 import { IDropdownItem } from "../dropdown/types";
-import { IPopoverProps } from "../popover/types";
+import { IFloatingUIProps } from "../floating-ui/types";
 
 /**
  * Navbar
@@ -130,7 +130,7 @@ export interface INavbarItem {
     isDisabled?: boolean;
     items?: Array<IDropdownItem>;
     onClick?: (item?: INavbarItem, ev?: Event) => void;
-    onMenuRendering?: (props: IPopoverProps) => IPopoverProps;
+    onMenuRendering?: (props: IFloatingUIProps) => IFloatingUIProps;
     onRender?: (el?: HTMLElement, item?: INavbarItem) => void;
     target?: string;
     text?: string;

package/src/index-icons.ts

@@ -12,14 +12,10 @@ export { Components }
 import { render } from "./render";
 export { render };
 
-// TippyJS library
-import tippy from "tippy.js";
-export { tippy }
-
 // Icons
 import { Icons, IconTypes } from "./icons";
 export { Icons, IconTypes }
 
 // Bootstrap Global library
-const BS = { Components, Icons, IconTypes, render, tippy }
+const BS = { Components, Icons, IconTypes, render }
 window["GD"] = window["GD"] || BS;

package/src/index.ts

@@ -12,10 +12,6 @@ export { Components }
 import { render } from "./render";
 export { render };
 
-// TippyJS library
-import tippy from "tippy.js";
-export { tippy }
-
 // Bootstrap Global library
-const BS = { Components, render, tippy }
+const BS = { Components, render }
 window["GD"] = window["GD"] || BS;

package/src/styles/_floating-ui.scss

@@ -13,9 +13,10 @@
     }
 
     /* Add some padding if the Floating UI content is a dropdown */
-    :has(>.dropdown-menu) {
-        padding-top: 0.5rem !important;
-        padding-bottom: 0.5rem !important;
+    &.floating-dropdown {
+        border-radius: var(--bs-dropdown-border-radius, 5px);
+        min-width: var(--bs-dropdown-min-width, 10rem);
+        padding: var(--bs-dropdown-padding-y, 0.5rem) var (--bs-dropdown-padding-x, 0);
     }
 
 }
@@ -40,19 +41,19 @@
         color: var(--sp-white, #ffffff);
     }
 
-    &[data-theme~='primary']&[data-placement^='top']>.arrow::before {
+    &[data-theme~='primary'][data-placement^='top']>.arrow::before {
         border-top-color: var(--sp-theme-primary, #0078d4);
     }
 
-    &[data-theme~='primary']&[data-placement^='bottom']>.arrow::before {
+    &[data-theme~='primary'][data-placement^='bottom']>.arrow::before {
         border-bottom-color: var(--sp-theme-primary, #0078d4);
     }
 
-    &[data-theme~='primary']&[data-placement^='left']>.arrow::before {
+    &[data-theme~='primary'][data-placement^='left']>.arrow::before {
         border-left-color: var(--sp-theme-primary, #0078d4);
     }
 
-    &[data-theme~='primary']&[data-placement^='right']>.arrow::before {
+    &[data-theme~='primary'][data-placement^='right']>.arrow::before {
         border-right-color: var(--sp-theme-primary, #0078d4);
     }
 
@@ -63,19 +64,19 @@
         color: var(--sp-white, #ffffff);
     }
 
-    &[data-theme~='secondary']&[data-placement^='top']>.arrow::before {
+    &[data-theme~='secondary'][data-placement^='top']>.arrow::before {
         border-top-color: var(--sp-info-icon, #605e5c);
     }
 
-    &[data-theme~='secondary']&[data-placement^='bottom']>.arrow::before {
+    &[data-theme~='secondary'][data-placement^='bottom']>.arrow::before {
         border-bottom-color: var(--sp-info-icon, #605e5c);
     }
 
-    &[data-theme~='secondary']&[data-placement^='left']>.arrow::before {
+    &[data-theme~='secondary'][data-placement^='left']>.arrow::before {
         border-left-color: var(--sp-info-icon, #605e5c);
     }
 
-    &[data-theme~='secondary']&[data-placement^='right']>.arrow::before {
+    &[data-theme~='secondary'][data-placement^='right']>.arrow::before {
         border-right-color: var(--sp-info-icon, #605e5c);
     }
 
@@ -86,19 +87,19 @@
         color: var(--sp-white, #ffffff);
     }
 
-    &[data-theme~='success']&[data-placement^='top']>.arrow::before {
+    &[data-theme~='success'][data-placement^='top']>.arrow::before {
         border-top-color: var(--sp-success-icon, #107c10);
     }
 
-    &[data-theme~='success']&[data-placement^='bottom']>.arrow::before {
+    &[data-theme~='success'][data-placement^='bottom']>.arrow::before {
         border-bottom-color: var(--sp-success-icon, #107c10);
     }
 
-    &[data-theme~='success']&[data-placement^='left']>.arrow::before {
+    &[data-theme~='success'][data-placement^='left']>.arrow::before {
         border-left-color: var(--sp-success-icon, #107c10);
     }
 
-    &[data-theme~='success']&[data-placement^='right']>.arrow::before {
+    &[data-theme~='success'][data-placement^='right']>.arrow::before {
         border-right-color: var(--sp-success-icon, #107c10);
     }
 
@@ -109,19 +110,19 @@
         color: var(--sp-black, #000000);
     }
 
-    &[data-theme~='info']&[data-placement^='top']>.arrow::before {
+    &[data-theme~='info'][data-placement^='top']>.arrow::before {
         border-top-color: var(--sp-accent, #8764b8);
     }
 
-    &[data-theme~='info']&[data-placement^='bottom']>.arrow::before {
+    &[data-theme~='info'][data-placement^='bottom']>.arrow::before {
         border-bottom-color: var(--sp-accent, #8764b8);
     }
 
-    &[data-theme~='info']&[data-placement^='left']>.arrow::before {
+    &[data-theme~='info'][data-placement^='left']>.arrow::before {
         border-left-color: var(--sp-accent, #8764b8);
     }
 
-    &[data-theme~='info']&[data-placement^='right']>.arrow::before {
+    &[data-theme~='info'][data-placement^='right']>.arrow::before {
         border-right-color: var(--sp-accent, #8764b8);
     }
 
@@ -132,19 +133,19 @@
         color: var(--sp-white, #ffffff);
     }
 
-    &[data-theme~='warning']&[data-placement^='top']>.arrow::before {
+    &[data-theme~='warning'][data-placement^='top']>.arrow::before {
         border-top-color: var(--sp-severe-warning-icon, #d83b01);
     }
 
-    &[data-theme~='warning']&[data-placement^='bottom']>.arrow::before {
+    &[data-theme~='warning'][data-placement^='bottom']>.arrow::before {
         border-bottom-color: var(--sp-severe-warning-icon, #d83b01);
     }
 
-    &[data-theme~='warning']&[data-placement^='left']>.arrow::before {
+    &[data-theme~='warning'][data-placement^='left']>.arrow::before {
         border-left-color: var(--sp-severe-warning-icon, #d83b01);
     }
 
-    &[data-theme~='warning']&[data-placement^='right']>.arrow::before {
+    &[data-theme~='warning'][data-placement^='right']>.arrow::before {
         border-right-color: var(--sp-severe-warning-icon, #d83b01);
     }
 
@@ -155,19 +156,19 @@
         color: var(--sp-white, #ffffff);
     }
 
-    &[data-theme~='danger']&[data-placement^='top']>.arrow::before {
+    &[data-theme~='danger'][data-placement^='top']>.arrow::before {
         border-top-color: var(--sp-error-icon, #a80000);
     }
 
-    &[data-theme~='danger']&[data-placement^='bottom']>.arrow::before {
+    &[data-theme~='danger'][data-placement^='bottom']>.arrow::before {
         border-bottom-color: var(--sp-error-icon, #a80000);
     }
 
-    &[data-theme~='danger']&[data-placement^='left']>.arrow::before {
+    &[data-theme~='danger'][data-placement^='left']>.arrow::before {
         border-left-color: var(--sp-error-icon, #a80000);
     }
 
-    &[data-theme~='danger']&[data-placement^='right']>.arrow::before {
+    &[data-theme~='danger'][data-placement^='right']>.arrow::before {
         border-right-color: var(--sp-error-icon, #a80000);
     }
 
@@ -178,19 +179,19 @@
         color: var(--sp-black, #000000) !important;
     }
 
-    &[data-theme~='light']&[data-placement^='top']>.arrow::before {
+    &[data-theme~='light'][data-placement^='top']>.arrow::before {
         border-top-color: var(--sp-neutral-lighter, #f3f2f1) !important;
     }
 
-    &[data-theme~='light']&[data-placement^='bottom']>.arrow::before {
+    &[data-theme~='light'][data-placement^='bottom']>.arrow::before {
         border-bottom-color: var(--sp-neutral-lighter, #f3f2f1) !important;
     }
 
-    &[data-theme~='light']&[data-placement^='left']>.arrow::before {
+    &[data-theme~='light'][data-placement^='left']>.arrow::before {
         border-left-color: var(--sp-neutral-lighter, #f3f2f1) !important;
     }
 
-    &[data-theme~='light']&[data-placement^='right']>.arrow::before {
+    &[data-theme~='light'][data-placement^='right']>.arrow::before {
         border-right-color: var(--sp-neutral-lighter, #f3f2f1) !important;
     }
 
@@ -202,27 +203,27 @@
         color: var(--sp-primary-text, #333333) !important;
     }
 
-    &[data-theme~='light-border']&[data-placement^='top']>.arrow::before {
+    &[data-theme~='light-border'][data-placement^='top']>.arrow::before {
         border-top-color: var(--sp-white, #ffffff) !important;
     }
 
-    &[data-theme~='light-border']&[data-placement^='bottom']>.arrow::before {
+    &[data-theme~='light-border'][data-placement^='bottom']>.arrow::before {
         border-bottom-color: var(--sp-white, #ffffff) !important;
     }
 
-    &[data-theme~='light-border']&[data-placement^='left']>.arrow::before {
+    &[data-theme~='light-border'][data-placement^='left']>.arrow::before {
         border-left-color: var(--sp-white, #ffffff) !important;
     }
 
-    &[data-theme~='light-border']&[data-placement^='right']>.arrow::before {
+    &[data-theme~='light-border'][data-placement^='right']>.arrow::before {
         border-right-color: var(--sp-white, #ffffff) !important;
     }
 
-    &[data-theme~='light-border']&[data-placement^='bottom']>.arrow::after {
+    &[data-theme~='light-border'][data-placement^='bottom']>.arrow::after {
         border-bottom-color: var(--sp-neutral-quaternary, #d2d0ce) !important;
     }
 
-    &[data-theme~='light-border']&[data-placement^='top']>.arrow::after {
+    &[data-theme~='light-border'][data-placement^='top']>.arrow::after {
         border-top-color: var(--sp-neutral-quaternary, #d2d0ce) !important;
     }
 
@@ -233,19 +234,19 @@
         color: var(--sp-white, #ffffff);
     }
 
-    &[data-theme~='dark']&[data-placement^='top']>.arrow::before {
+    &[data-theme~='dark'][data-placement^='top']>.arrow::before {
         border-top-color: var(--sp-neutral-dark, #201f1e);
     }
 
-    &[data-theme~='dark']&[data-placement^='bottom']>.arrow::before {
+    &[data-theme~='dark'][data-placement^='bottom']>.arrow::before {
         border-bottom-color: var(--sp-neutral-dark, #201f1e);
     }
 
-    &[data-theme~='dark']&[data-placement^='left']>.arrow::before {
+    &[data-theme~='dark'][data-placement^='left']>.arrow::before {
         border-left-color: var(--sp-neutral-dark, #201f1e);
     }
 
-    &[data-theme~='dark']&[data-placement^='right']>.arrow::before {
+    &[data-theme~='dark'][data-placement^='right']>.arrow::before {
         border-right-color: var(--sp-neutral-dark, #201f1e);
     }
 
@@ -256,19 +257,19 @@
         color: var(--sp-white, #ffffff);
     }
 
-    &[data-theme~='sharepoint']&[data-placement^='top']>.arrow::before {
+    &[data-theme~='sharepoint'][data-placement^='top']>.arrow::before {
         border-top-color: var(--sp-theme-dark, #005a9e);
     }
 
-    &[data-theme~='sharepoint']&[data-placement^='bottom']>.arrow::before {
+    &[data-theme~='sharepoint'][data-placement^='bottom']>.arrow::before {
         border-bottom-color: var(--sp-theme-dark, #005a9e);
     }
 
-    &[data-theme~='sharepoint']&[data-placement^='left']>.arrow::before {
+    &[data-theme~='sharepoint'][data-placement^='left']>.arrow::before {
         border-left-color: var(--sp-theme-dark, #005a9e);
     }
 
-    &[data-theme~='sharepoint']&[data-placement^='right']>.arrow::before {
+    &[data-theme~='sharepoint'][data-placement^='right']>.arrow::before {
         border-right-color: var(--sp-theme-dark, #005a9e);
     }
 }