jb-select 6.4.2 → 7.0.0

package/lib/render.ts

@@ -1,18 +1,8 @@
 export function renderHTML(): string {
-  return /* html */ `
+    return /* html */ `
   <div class="jb-select-web-component">
     <div class="label-wrapper">
         <label class="--hide"><span class="label-value"></span></label>
-        <!-- close button will be visible on mobile modal -->
-        <div class="close-button">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
-                <path class="close-btn-svg-bg" opacity="0.4"
-                    d="M16.3399 1.9998H7.66988C4.27988 1.9998 1.99988 4.3798 1.99988 7.9198V16.0898C1.99988 19.6198 4.27988 21.9998 7.66988 21.9998H16.3399C19.7299 21.9998 21.9999 19.6198 21.9999 16.0898V7.9198C21.9999 4.3798 19.7299 1.9998 16.3399 1.9998Z" />
-                <path class="close-btn-svg-path"
-                    d="M15.0156 13.7703L13.2366 11.9923L15.0146 10.2143C15.3566 9.8733 15.3566 9.3183 15.0146 8.9773C14.6726 8.6333 14.1196 8.6343 13.7776 8.9763L11.9986 10.7543L10.2196 8.9743C9.87758 8.6323 9.32358 8.6343 8.98158 8.9743C8.64058 9.3163 8.64058 9.8713 8.98158 10.2123L10.7616 11.9923L8.98558 13.7673C8.64358 14.1093 8.64358 14.6643 8.98558 15.0043C9.15658 15.1763 9.37958 15.2613 9.60358 15.2613C9.82858 15.2613 10.0516 15.1763 10.2226 15.0053L11.9986 13.2293L13.7786 15.0083C13.9496 15.1793 14.1726 15.2643 14.3966 15.2643C14.6206 15.2643 14.8446 15.1783 15.0156 15.0083C15.3576 14.6663 15.3576 14.1123 15.0156 13.7703Z"
-                    fill="#200E32" />
-            </svg>
-        </div>
     </div>
     <div class="select-box">
         <div class="start-section">
@@ -21,11 +11,16 @@ export function renderHTML(): string {
         <div class="middle-section">
             <div class="selected-value-wrapper"></div>
             <div class="front-box">
-                <input class="input" />
-
+                <input class="search-input" />
             </div>
         </div>
         <div class="end-section">
+        <jb-button class="clear-button" color="dark" variant="ghost" size="xs">
+            <svg  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M2.11183 24C1.57504 24 1.03826 23.8023 0.614479 23.3786C-0.204826 22.5596 -0.204826 21.2039 0.614479 20.3848L20.3908 0.614298C21.2101 -0.204766 22.5662 -0.204766 23.3855 0.614298C24.2048 1.43336 24.2048 2.78905 23.3855 3.60811L3.60918 23.3786C3.1854 23.8023 2.64861 24 2.11183 24Z" fill="currentColor"/>
+                <path d="M21.8882 24C21.3514 24 20.8146 23.8023 20.3908 23.3786L0.614479 3.60811C-0.204826 2.78905 -0.204826 1.43336 0.614479 0.614298C1.43378 -0.204766 2.78987 -0.204766 3.60918 0.614298L23.3855 20.3848C24.2048 21.2039 24.2048 22.5596 23.3855 23.3786C22.9617 23.8023 22.425 24 21.8882 24Z" fill="currentColor"/>
+            </svg>
+        </jb-button>
             <div class="arrow-icon" tabindex="-1">
                 <slot name="select-arrow-icon">
                     <svg width='8' height='8' id='Layer_1' x='0px' y='0px' viewBox='0 0 494.1 371.1'
@@ -37,16 +32,18 @@ export function renderHTML(): string {
             </div>
         </div>
     </div>
-    <div class="middle-divider">
-        <!-- middle line between input box and list (hidden by default but user may need it sometimes) -->
-    </div>
-    <div class="select-list-wrapper">
-        <div class="select-list" tabindex="-1">
-            <slot></slot>
-        </div>
-        <div class="empty-list-placeholder">
-            <slot name="empty-list-message">no item available</slot>
-        </div>
+    <div class="popover-wrapper">
+        <jb-popover class="select-list-wrapper">
+            <div class="mobile-search-input-wrapper">
+            <!-- Here we put search input in Mobile -->
+            </div>
+            <div class="select-list" tabindex="-1" role="listbox">
+                <slot></slot>
+            </div>
+            <div class="empty-list-placeholder">
+                <slot name="empty-list-message">no item available</slot>
+            </div>
+        </jb-popover>
     </div>
     <div class="message-box"></div>
   </div>

package/lib/types.ts

@@ -1,6 +1,8 @@
 import type { JBOptionWebComponent } from "./jb-option/jb-option";
 import type {EventTypeWithTarget} from "jb-core";
 import type{ JBSelectWebComponent } from "./jb-select";
+import type {JBButtonWebComponent} from "jb-button";
+import type { JBPopoverWebComponent } from "jb-popover";
 export type JBSelectCallbacks<TValue> = {
     getSelectedValueDOM?:(value:TValue,content:HTMLElement) => HTMLElement;
 }
@@ -11,14 +13,17 @@ export type JBSelectElements = {
     selectedValueWrapper: HTMLDivElement,
     messageBox:HTMLDivElement,
     optionList: HTMLDivElement,
-    optionListWrapper: HTMLDivElement,
+    optionListWrapper: JBPopoverWebComponent,
     optionListSlot:HTMLSlotElement,
     arrowIcon: HTMLDivElement,
+    clearButton: JBButtonWebComponent,
     label:{
         wrapper: HTMLLabelElement,
         text: HTMLSpanElement
     },
     emptyListPlaceholder: HTMLDivElement,
+    mobileSearchInputWrapper:HTMLDivElement,
+    frontBox:HTMLDivElement
 }
 export type ValidationValue<TValue> = {
     selectedOption:JBOptionWebComponent<TValue> | null,

package/lib/variables.css

@@ -1,11 +1,13 @@
 :host {
-  --border-radius:var(--jb-select-border-radius, var(--jb-radius));
+  --height:var(--jb-select-height, 2.5rem);
+  /*its rounded because it's only one value and not all radius 4 part value and needed to be one vale due to change in different situation*/
+  --rounded:var(--jb-select-rounded, var(--jb-radius));
+  --box-border-radius:var(--jb-select-box-border-radius, var(--rounded));
+  --list-border-radius: 0 0 var(--rounded) var(--rounded);
   --middle-div-height: var(--jb-select-middle-div-height, 0px);
   --border-width: var(--jb-select-border-width, 1px);
   --border-bottom-width: var(--jb-select-border-bottom-width, var(--jb-select-border-width, 3px));
   --base-z-index: 1;
-  --mobile-modal-z-index: 900;
-  --mobile-modal-height: var(--jb-select-mobile-modal-height, 100vh);
   /*colors*/
   --border-color: var(--jb-select-border-color, var(--jb-neutral-10));
   --message-color: var(--jb-select-message-color, var(--jb-text-secondary));
@@ -13,10 +15,7 @@
   --value-color: var(--jb-select-value-color, var(--jb-text-primary));
   --placeholder-color: var(--jb-select-placeholder-color, var(--jb-neutral-6));
   --select-box-bg-color: var(--jb-select-bgcolor, var(--jb-neutral-10));
-  --overlay-bg-color:var(--jb-select-overlay-bg-color, oklch(from var(--jb-neutral) l c h / calc(alpha - 0.5)));
-  --modal-label-color:var(--jb-select-modal-label-color, var(--jb-text-contrast));
-  --modal-close-color:var(--jb-select-modal-close-color, var(--jb-white));
-  --close-bg-color:var(--jb-select-close-bg-color, var(--jb-neutral-2));
+  --overlay-bg-color:var(--jb-select-overlay-bg-color, oklch(from var(--jb-black) l c h / calc(alpha - 0.5)));
   --list-scroll-color:var(--jb-select-list-scroll-color, oklch(from var(--select-box-bg-color) calc(l - 0.2) c h));
   --empty-list-placeholder-color:var(--jb-select-empty-list-placeholder-color, var(--jb-text-secondary))
 }

package/package.json

@@ -16,7 +16,7 @@
     "web component",
     "react component"
   ],
-  "version": "6.4.2",
+  "version": "7.0.0",
   "bugs": "https://github.com/javadbat/jb-select/issues",
   "license": "MIT",
   "files": [
@@ -35,9 +35,11 @@
   },
   "dependencies": {
     "jb-validation": ">=0.4.0",
-    "jb-core":">=0.14.0"
+    "jb-button": ">=3.7.0",
+    "jb-popover": ">=1.5.0",
+    "jb-core":">=0.22.0"
   },
   "devDependencies": {
-    "jb-form":">=0.6.10"
+    "jb-form":">=0.7.1"
   }
 }

package/react/README.md

@@ -8,7 +8,9 @@ Demo :  Demo: [codeSandbox preview](https://3f63dj.csb.app/samples/jb-select) fo
 
 ## installation
 
-run `npm install jb-select` to install package with npm
+```sh
+npm install jb-select
+```
 
 ## usage
 

package/lib/jb-select.scss

@@ -1,354 +0,0 @@
-@use "~jb-core/styles/medias.scss" as *;
-@use './variables.css';
-
-:host {
-
-}
-
-.jb-select-web-component {
-    width: var(--jb-select-width, 100%);
-    margin: var(--jb-select-margin, 0 0);
-    position: relative;
-    box-sizing: border-box;
-
-    &.--focused {
-        @include mobile-tablet {
-            position: fixed;
-            bottom: 0;
-            top: initial;
-            left: 0;
-            background-color: var(--overlay-bg-color);
-            width: 100vw;
-            height: var(--mobile-modal-height);
-            border-radius: var(--jb-select-mobile-modal-border-radius, 0) var(--jb-select-mobile-modal-border-radius, 0) 0 0;
-            margin: 0;
-            padding: 16px 8px;
-            z-index: var(--mobile-modal-z-index);
-        }
-
-        .select-box {
-            @include mobile-tablet {
-                height: var(--jb-select-mobile-search-input-height, var(--jb-select-height, 40px));
-                background-color: var(--jb-select-mobile-input-bgcolor, var(--select-box-bg-color));
-                border-width: var(--jb-select-mobile-search-border-width, var(--border-width));
-                border-color: var(--jb-select-mobile-search-border-color, var(--border-color));
-                border-bottom-width: var(--jb-select-mobile-search-border-bottom-width, var(--border-bottom-width));
-                border-bottom-color: var(--jb-select-mobile-search-border-bottom-color, var(--jb-select-border-bottom-color, var(--border-color)));
-                border-radius: var(--jb-select-mobile-search-border-radius, var(--border-radius));
-            }
-
-            .front-box {
-                .arrow-icon {
-                    @include mobile-tablet {
-                        display: none;
-                    }
-                }
-            }
-
-            .selected-value-wrapper {
-                @include mobile-tablet {
-                    opacity: 0;
-                    transition: none;
-                }
-
-                .selected-value {}
-            }
-        }
-
-        .middle-divider {
-            display: block;
-
-            @include mobile-tablet {
-                margin: var(--jb-select-middle-div-mobile-margin, 16px 0 0 0);
-            }
-        }
-
-        .select-list-wrapper {
-            @include mobile-tablet {
-                position: initial;
-                margin: var(--jb-select-mobile-item-list-margin, 16px 0);
-                border-radius: var(--jb-select-mobile-item-list-border-radius, var(--border-radius));
-            }
-        }
-
-        .label-wrapper {
-            @include mobile-tablet {
-                display: flex;
-            }
-
-            label {
-                @include mobile-tablet {
-                    color: var(--modal-label-color);
-                    font-size: 1.5em;
-                    display: flex;
-                    align-items: center;
-                }
-            }
-
-            .close-button {
-                display: none;
-
-                @include mobile-tablet {
-                    display: flex;
-                    width: 48px;
-                    height: 48px;
-                    justify-content: center;
-                    align-items: center;
-                    color: var(--modal-close-color);
-
-                    .close-btn-svg-bg {
-                        opacity: var(--jb-select-close-bg-opacity, 0.4);
-                        fill: var(--close-bg-color);
-                    }
-
-                    .close-btn-svg-path {
-                        fill: var(--modal-close-color);
-                    }
-                }
-            }
-        }
-    }
-
-    &.--has-value {
-
-        //if user select a option and value is setted and not null
-        .select-box {
-            border-color: var(--jb-select-border-color-selected, var(--border-color));
-            background-color: var(--jb-select-bgcolor-selected, var(--select-box-bg-color));
-            @include mobile-tablet {
-                &:focus-within {
-                    background-color: var(--jb-select-mobile-input-bgcolor, var(--select-box-bg-color));
-                }
-            }
-        }
-    }
-
-    .label-wrapper {
-        label {
-            width: 100%;
-            margin: 4px 0px;
-            display: block;
-            font-size: var(--jb-select-label-font-size, 0.8em);
-            font-weight: var(--jb-select-label-font-weight, normal);
-            color: var(--label-color);
-
-            &.--hide {
-                display: none;
-            }
-        }
-
-        .close-button {
-            display: none;
-        }
-    }
-
-    .select-box {
-        width: 100%;
-        box-sizing: border-box;
-        height: var(--jb-select-height, 2.5rem);
-        border: solid var(--border-width) var(--border-color);
-        border-bottom: solid var(--border-bottom-width) var(--border-color);
-        border-radius: var(--border-radius);
-        background-color: var(--select-box-bg-color);
-        margin: var(--jb-select-select-box-margin, 4px 0px 0px 0px);
-        overflow: hidden;
-        display: flex;
-        padding-inline-end: var(--jb-select-box-padding-end, 1rem);
-        gap: 0.5rem;
-        align-items: center;
-
-        &:focus-within {
-            border-color: var(--jb-select-border-color, var(--border-color));
-            border-bottom-color: var(--jb-select-border-color, var(--border-color));
-            border-radius: var(--border-radius) var(--border-radius) 0 0;
-
-            @include mobile-tablet {
-                border-radius: var(--jb-select-mobile-search-border-radius, var(--border-radius));
-            }
-        }
-
-        .start-section {
-            height: 100%;
-            width: auto;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-
-        .middle-section {
-            position: relative;
-            width: 100%;
-            height: 100%;
-            flex: 1;
-
-            .selected-value-wrapper {
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                border-radius: inherit;
-                overflow: hidden;
-                z-index: 1;
-
-                &.--search-typed {
-                    opacity: 0;
-                }
-
-                .selected-value {
-                    width: 100%;
-                    box-sizing: border-box;
-                    height: 100%;
-                    background-color: transparent;
-                    padding: 2px 12px 0 12px;
-                    display: block;
-                    font-family: inherit;
-                    font-size: var(--jb-select-selected-value-font-size, 1.1em);
-                    color: var(--value-color);
-                    margin: 0;
-                    border-radius: 0;
-                    display: flex;
-                    align-items: center;
-                }
-            }
-
-            .front-box {
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                border-radius: inherit;
-                overflow: hidden;
-                z-index: 2;
-
-                input {
-                    border: none;
-                    width: 100%;
-                    box-sizing: border-box;
-                    height: 100%;
-                    background-color: transparent;
-                    padding: 2px 12px 0 12px;
-                    display: block;
-                    font-family: inherit;
-                    font-size: var(--jb-select-value-font-size, 1.1rem);
-                    color: var(--value-color);
-                    margin: 0;
-                    border-radius: 0;
-
-                    &:focus {
-                        outline: none;
-                    }
-
-                    &::placeholder {
-                        color: var(--placeholder-color);
-                        font-size: var(--jb-select-placeholder-font-size, 1.1em);
-                    }
-                }
-            }
-        }
-
-        .end-section {
-            .arrow-icon {
-                margin: var(--jb-select-arrow-icon-margin, 0 0 0 0);
-            }
-        }
-
-
-        &:focus-within .selected-value {
-            opacity: 0.7;
-            transition: all 0.3s ease;
-        }
-
-
-    }
-
-    .middle-divider {
-        display: none;
-        position: relative;
-        z-index: calc(var(--base-z-index) + 3);
-        width: 100%;
-        height: var(--middle-div-height);
-        background-color: var(--jb-select-middle-div-color, var(--border-color));
-        margin: var(--jb-select-middle-div-margin, calc(-1 * var(--border-bottom-width)) 0);
-        border-radius: var(--jb-select-middle-div-radius, 0px);
-    }
-
-    .message-box {
-        font-size: var(--jb-select-message-font-size, 0.7em);
-        font-weight: var(--jb-select-message-font-weight, normal);
-        padding: 4px 8px;
-        color: var(--message-color);
-
-        &:empty {
-            padding: 0;
-        }
-
-        &.--error {
-            color: red;
-        }
-    }
-
-    .select-list-wrapper {
-        display: none;
-        position: absolute;
-        margin: calc(-1 * var(--border-bottom-width)) 0;
-        height: auto;
-        overflow: hidden;
-        width: 100%;
-        background-color: var(--select-box-bg-color);
-        border-radius: 0 0 var(--border-radius) var(--border-radius);
-        border: solid var(--jb-select-list-border-width, 1px) var(--border-color);
-        border-top: none;
-        border-bottom: solid var(--border-bottom-width) var(--border-color);
-        box-shadow: var(--jb-select-list-box-shadow);
-        box-sizing: border-box;
-        z-index: calc(var(--base-z-index) + 2);
-
-        &.--show {
-            display: block;
-        }
-
-        .select-list {
-            width: 100%;
-            max-height: var(--jb-select-list-max-height, 400px);
-            overflow-y: auto;
-            slot {
-                padding: var(--jb-select-list-padding, 16px 0);
-                &:empty {
-                    padding: 0;
-                }
-            }
-
-
-            @include mobile-tablet {
-                max-height: calc(var(--mobile-modal-height) - 15rem);
-            }
-
-            /* option style places */
-
-            &::-webkit-scrollbar {
-                width: 9px;
-                background-color: transparent;
-            }
-
-            &::-webkit-scrollbar-thumb {
-                background-color: var(--list-scroll-color);
-                border-radius: var(--jb-select-list-scroll-border-radius, 4px);
-            }
-        }
-
-        .empty-list-placeholder {
-            display: none;
-            text-align: center;
-            color: var(--empty-list-placeholder-color);
-            font-style: italic;
-            padding: 8px 0;
-
-            &.--show {
-                display: block;
-            }
-        }
-
-    }
-}