@memobit/libs 3.7.0 → 3.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/ControlPanel/ControlPanelFilter.js +1 -1
  2. package/dist/components/Dropdown/Dropdown.css +1 -1
  3. package/dist/components/Dropdown/Dropdown2.js +87 -87
  4. package/dist/helpers/VersionInfo.js +1 -1
  5. package/dist/index.d.ts +1 -0
  6. package/dist/memobit-icons.json +2 -0
  7. package/dist/version.js +2 -2
  8. package/dist/version.json +4 -4
  9. package/package.json +1 -1
package/dist/components/ControlPanel/ControlPanelFilter.js CHANGED
@@ -285,7 +285,7 @@ var H = 3, f = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean"
285
285
  },
286
286
  options: t,
287
287
  placeholder: e.placeholder,
288
- searchable: e.searchable ?? !1,
288
+ searchable: e.searchable ?? !0,
289
289
  selectedCountDisplay: "inline",
290
290
  usePortal: !1,
291
291
  value: typeof e.value == "boolean" ? null : e.value
package/dist/components/Dropdown/Dropdown.css CHANGED
@@ -1 +1 @@
1
- .dropdown-container{width:100%;position:relative}.dropdown-container.disabled{cursor:not-allowed;pointer-events:none;opacity:.6}.dropdown-container .dropdown-label{margin-bottom:var(--spacing-8);color:var(--form-control-label-color,var(--body-color));font-size:var(--form-control-label-font-size,var(--font-size-sm));font-weight:var(--form-control-label-font-weight,var(--font-weight-medium));letter-spacing:var(--form-control-label-letter-spacing,normal);text-transform:var(--form-control-label-text-transform,none);display:block}.dropdown-container .dropdown-input-container{--dropdown-actions-space:var(--spacing-48);background-color:var(--dropdown-header-background-color);width:100%;color:var(--dropdown-header-color);position:relative;overflow:hidden;container-type:inline-size}.dropdown-container .dropdown-input-container .input-text{background-color:#0000}.dropdown-container .dropdown-input-container--clearable{--dropdown-actions-space:calc(var(--spacing-80) + var(--spacing-12))}.dropdown-container .dropdown-input-container:not(.dropdown-input-container--chips) input[type=text]{padding-right:var(--dropdown-actions-space);text-overflow:ellipsis}.dropdown-container .dropdown-input-container--has-prefix-icon input[type=text]{padding-left:var(--spacing-40)}.dropdown-container .dropdown-input-container .dropdown-selected-icon{color:var(--dropdown-header-color);align-items:center;display:flex}.dropdown-container .dropdown-input-container .dropdown-selected-icon--prefix{top:50%;left:var(--spacing-12);z-index:1;pointer-events:none;position:absolute;transform:translateY(-50%)}.dropdown-container .dropdown-input-container .dropdown-selected-icon--suffix{padding:0 var(--spacing-4);pointer-events:none}.dropdown-container .dropdown-input-container input[type=text]{transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.dropdown-container .dropdown-input-container .dropdown-value-chip{box-sizing:border-box;top:50%;left:var(--spacing-12);z-index:1;align-items:center;gap:var(--spacing-4);padding:var(--spacing-2) var(--spacing-8);border-radius:var(--radius-full);border:var(--spacing-1) solid var(--chip-selected-border-color,var(--body-accent-color));background:var(--chip-selected-background-color,var(--card-background-accent-color));color:var(--chip-selected-color,var(--body-accent-color));font-size:var(--font-size-xs);max-width:calc(100% - var(--spacing-12) - var(--dropdown-actions-space));cursor:pointer;display:inline-flex;position:absolute;transform:translateY(-50%)}.dropdown-container .dropdown-input-container .dropdown-value-chip__label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dropdown-container .dropdown-input-container .dropdown-value-chip svg{width:var(--spacing-12);height:var(--spacing-12);flex-shrink:0}.dropdown-container .dropdown-input-container--chips{align-items:center;gap:var(--spacing-4);padding:var(--spacing-4) var(--spacing-80) var(--spacing-4) var(--spacing-8);flex-wrap:nowrap;display:flex;overflow:auto hidden}.dropdown-container .dropdown-input-container--chips::-webkit-scrollbar{height:var(--scrollbar-size)}.dropdown-container .dropdown-input-container--chips .input-text-wrapper{flex:1 1 var(--spacing-80);min-width:var(--spacing-80)}.dropdown-container .dropdown-input-container--chips input[type=text]{padding:var(--spacing-4);border:none}.dropdown-container .dropdown-input-container--chips-multiline{min-height:var(--spacing-40);flex-wrap:wrap;overflow:visible}.dropdown-container .dropdown-input-container--chips-multiline .dropdown-actions-buttons{top:var(--spacing-4);transform:none}.dropdown-container .dropdown-input-container .dropdown-chip{align-items:center;gap:var(--spacing-4);padding:var(--spacing-2) var(--spacing-8);border-radius:var(--radius-full);border:var(--spacing-1) solid var(--chip-selected-border-color,var(--body-accent-color));background:var(--chip-selected-background-color,var(--card-background-accent-color));color:var(--chip-selected-color,var(--body-accent-color));font-size:var(--font-size-xs);flex-shrink:0;max-width:100%;display:inline-flex}.dropdown-container .dropdown-input-container .dropdown-chip__label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dropdown-container .dropdown-input-container .dropdown-chip__remove{cursor:pointer;color:inherit;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}.dropdown-container .dropdown-input-container .dropdown-chip__remove svg{width:var(--spacing-12);height:var(--spacing-12)}.dropdown-container .dropdown-input-container .dropdown-selected-count{font-size:var(--font-size-xs);color:var(--body-color-muted);pointer-events:none;position:absolute;bottom:-20px;left:0}.dropdown-container .dropdown-input-container .dropdown-actions-buttons{z-index:1;justify-content:center;align-items:center;height:calc(100% - 2px);padding:0 6px;display:flex;position:absolute;top:50%;right:1px;transform:translateY(-50%)}.dropdown-container .dropdown-input-container .dropdown-actions-buttons:before{content:"";opacity:.9;z-index:-1;position:absolute;inset:0}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button{justify-content:center;align-items:center;display:flex}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button{padding:var(--spacing-8);border-radius:0}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button span{justify-content:center;align-items:center;display:flex}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button:hover{background-color:var(--dropdown-action-hover-background-color)}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button svg{fill:var(--dropdown-action-color)}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button svg:hover{fill:var(--dropdown-action-hover-color)}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-clear-button:focus{box-shadow:0 0 0 var(--spacing-2) var(--form-control-focus-ring);outline:none}@media (width<=768px){.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-clear-button{width:var(--spacing-40);height:var(--spacing-40);right:var(--spacing-40)}}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-toggle-button button{border-radius:0 var(--radius-sm) var(--radius-sm) 0}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-toggle-button svg{width:var(--spacing-16);height:var(--spacing-16);transition:transform .2s ease-in-out}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-toggle-button:focus{box-shadow:inset 0 0 0 var(--spacing-2) var(--form-control-focus-ring);outline:none}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-toggle-button.open svg{transform:rotate(180deg)}.dropdown-container.dropdown-highlighted .dropdown-input-container input[type=text]{border-color:var(--form-control-focus-border-color)}.dropdown-container.dropdown-error .dropdown-input-container{background-color:var(--form-control-error-background-color)}.dropdown-container.dropdown-error .dropdown-input-container input[type=text]{background-color:var(--form-control-error-background-color);border-color:var(--form-control-error-border-color);color:var(--form-control-error-color)}.dropdown-container.dropdown-error .dropdown-input-container input[type=text]:focus{background-color:var(--form-control-error-background-color);border-color:var(--form-control-error-border-color);box-shadow:0 0 0 var(--spacing-2) var(--box-shadow)}.dropdown-container .dropdown-error-message{font-size:var(--font-size-xs);color:var(--form-control-error-color)}.dropdown-container.dropdown-success .dropdown-input-container{background-color:var(--form-control-success-background-color)}.dropdown-container.dropdown-success .dropdown-input-container input[type=text]{background-color:var(--form-control-success-background-color);border-color:var(--form-control-success-border-color);color:var(--form-control-success-color)}.dropdown-container.dropdown-success .dropdown-input-container input[type=text]:focus{background-color:var(--form-control-success-background-color);border-color:var(--form-control-success-border-color);box-shadow:0 0 0 var(--spacing-2) var(--box-shadow)}.dropdown-container .dropdown-success-message{font-size:var(--font-size-xs);color:var(--form-control-success-color)}.dropdown-container.multiple .dropdown-input-container,.dropdown-container.multiple input[type=text]{min-height:var(--spacing-40)}.dropdown-container.multiple .dropdown-input-container--chips input[type=text]{min-height:var(--spacing-24)}.dropdown-container.count-display-floating .dropdown-input-container{overflow:visible}.dropdown-menu{z-index:1000;width:100%;margin-top:var(--spacing-4);background-color:var(--dropdown-options-background-color);color:var(--dropdown-options-color);border:var(--spacing-1) solid var(--dropdown-border-color);border-radius:var(--radius-sm);box-shadow:0 var(--spacing-8) var(--spacing-16) -3px var(--box-shadow), 0 var(--spacing-4) var(--spacing-8) -2px var(--box-shadow);max-height:240px;position:absolute;overflow-y:auto}.dropdown-menu--portal{margin-top:var(--spacing-4)}.dropdown-menu--upward{margin-top:0;margin-bottom:var(--spacing-4);top:auto;bottom:100%}.dropdown-menu::-webkit-scrollbar{width:var(--scrollbar-size)}.dropdown-menu::-webkit-scrollbar-track{background:var(--scrollbar-track-color);border-radius:var(--scrollbar-radius)}.dropdown-menu::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color);border-radius:var(--scrollbar-radius)}.dropdown-menu::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover-color)}.dropdown-menu .dropdown-options-list{padding:var(--spacing-4) 0;margin:0;list-style:none}.dropdown-menu .dropdown-options-list .dropdown-option{padding:var(--spacing-12) var(--spacing-12);cursor:pointer;border-left:var(--spacing-4) solid transparent;align-items:center;transition:background-color .2s ease-in-out;display:flex}.dropdown-menu .dropdown-options-list .dropdown-option.focused{color:var(--dropdown-options-hover-color);background-color:var(--dropdown-options-hover-background-color);outline:none}.dropdown-menu .dropdown-options-list .dropdown-option.dropdown-option--disabled{opacity:.45;cursor:not-allowed}.dropdown-menu .dropdown-options-list .dropdown-option.dropdown-option--disabled:hover,.dropdown-menu .dropdown-options-list .dropdown-option.dropdown-option--disabled.focused{color:inherit;background-color:#0000}.dropdown-menu .dropdown-options-list .dropdown-option.selected{background-color:var(--dropdown-options-selected-background-color);color:var(--dropdown-options-selected-color)}.dropdown-menu .dropdown-options-list .dropdown-option.selected:hover,.dropdown-menu .dropdown-options-list .dropdown-option.selected.focused{color:var(--dropdown-options-hover-color);background-color:var(--dropdown-options-hover-background-color);opacity:.9}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-checkbox{margin-right:var(--spacing-8);flex-shrink:0}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-checkbox .checkbox{width:var(--spacing-16);height:var(--spacing-16);border:var(--spacing-2) solid var(--form-control-selection-border-color);border-radius:var(--spacing-4);background-color:#0000;justify-content:center;align-items:center;transition:all .2s ease-in-out;display:flex}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-checkbox .checkbox.checked{background-color:var(--form-control-selection-background-color);color:var(--form-control-selection-color)}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content{flex:1;min-width:0}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content .dropdown-option-label{align-items:center;gap:var(--spacing-8);min-width:0;display:inline-flex}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content .dropdown-option-prefix{flex:none;justify-content:center;align-items:center;display:inline-flex}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content .dropdown-option-details{width:100%;font-size:var(--font-size-xs);margin-top:var(--spacing-2);display:block}@media (width<=768px){.dropdown-menu .dropdown-options-list .dropdown-option{padding:var(--spacing-16) var(--spacing-12)}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content{font-size:var(--font-size-md)}}.dropdown-menu .dropdown-no-options{padding:var(--spacing-12);text-align:center;font-style:italic}.dropdown-menu .dropdown-options-list .dropdown-option--create{color:var(--body-accent-color);border-top:1px solid var(--delimiter-color);font-weight:var(--font-weight-medium)}@media (width<=768px){.dropdown-menu{max-height:var(--spacing-300)}.dropdown-menu .dropdown-options-list .dropdown-option{min-height:var(--spacing-48)}}@container (width<=160px){.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button.dropdown-clear-button{display:none}.dropdown-container .dropdown-input-container .dropdown-value-chip{max-width:calc(100% - var(--spacing-12) - var(--spacing-48))}.dropdown-container .dropdown-input-container:not(.dropdown-input-container--chips) input[type=text]{padding-right:var(--spacing-48)}}
1
+ .dropdown-container{width:100%;position:relative}.dropdown-container.disabled{cursor:not-allowed;pointer-events:none;opacity:.6}.dropdown-container .dropdown-label{margin-bottom:var(--spacing-8);color:var(--form-control-label-color,var(--body-color));font-size:var(--form-control-label-font-size,var(--font-size-sm));font-weight:var(--form-control-label-font-weight,var(--font-weight-medium));letter-spacing:var(--form-control-label-letter-spacing,normal);text-transform:var(--form-control-label-text-transform,none);display:block}.dropdown-container .dropdown-input-container{--dropdown-actions-space:var(--spacing-48);background-color:var(--dropdown-header-background-color);width:100%;color:var(--dropdown-header-color);position:relative;overflow:hidden;container-type:inline-size}.dropdown-container .dropdown-input-container .input-text{background-color:#0000}.dropdown-container .dropdown-input-container .input-text:read-only:not(:disabled){cursor:pointer}.dropdown-container .dropdown-input-container--clearable{--dropdown-actions-space:calc(var(--spacing-80) + var(--spacing-12))}.dropdown-container .dropdown-input-container:not(.dropdown-input-container--chips) input[type=text]{padding-right:var(--dropdown-actions-space);text-overflow:ellipsis}.dropdown-container .dropdown-input-container--has-prefix-icon input[type=text]{padding-left:var(--spacing-40)}.dropdown-container .dropdown-input-container .dropdown-selected-icon{color:var(--dropdown-header-color);align-items:center;display:flex}.dropdown-container .dropdown-input-container .dropdown-selected-icon--prefix{top:50%;left:var(--spacing-12);z-index:1;pointer-events:none;position:absolute;transform:translateY(-50%)}.dropdown-container .dropdown-input-container .dropdown-selected-icon--suffix{padding:0 var(--spacing-4);pointer-events:none}.dropdown-container .dropdown-input-container input[type=text]{transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.dropdown-container .dropdown-input-container .dropdown-value-chip{box-sizing:border-box;top:50%;left:var(--spacing-12);z-index:1;align-items:center;gap:var(--spacing-4);padding:var(--spacing-2) var(--spacing-8);border-radius:var(--radius-full);border:var(--spacing-1) solid var(--chip-selected-border-color,var(--body-accent-color));background:var(--chip-selected-background-color,var(--card-background-accent-color));color:var(--chip-selected-color,var(--body-accent-color));font-size:var(--font-size-xs);max-width:calc(100% - var(--spacing-12) - var(--dropdown-actions-space));cursor:pointer;display:inline-flex;position:absolute;transform:translateY(-50%)}.dropdown-container .dropdown-input-container .dropdown-value-chip__label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dropdown-container .dropdown-input-container .dropdown-value-chip svg{width:var(--spacing-12);height:var(--spacing-12);flex-shrink:0}.dropdown-container .dropdown-input-container--chips{align-items:center;gap:var(--spacing-4);padding:var(--spacing-4) var(--spacing-80) var(--spacing-4) var(--spacing-8);flex-wrap:nowrap;display:flex;overflow:auto hidden}.dropdown-container .dropdown-input-container--chips::-webkit-scrollbar{height:var(--scrollbar-size)}.dropdown-container .dropdown-input-container--chips .input-text-wrapper{flex:1 1 var(--spacing-80);min-width:var(--spacing-80)}.dropdown-container .dropdown-input-container--chips input[type=text]{padding:var(--spacing-4);border:none}.dropdown-container .dropdown-input-container--chips-multiline{min-height:var(--spacing-40);flex-wrap:wrap;overflow:visible}.dropdown-container .dropdown-input-container--chips-multiline .dropdown-actions-buttons{top:var(--spacing-4);transform:none}.dropdown-container .dropdown-input-container .dropdown-chip{align-items:center;gap:var(--spacing-4);padding:var(--spacing-2) var(--spacing-8);border-radius:var(--radius-full);border:var(--spacing-1) solid var(--chip-selected-border-color,var(--body-accent-color));background:var(--chip-selected-background-color,var(--card-background-accent-color));color:var(--chip-selected-color,var(--body-accent-color));font-size:var(--font-size-xs);flex-shrink:0;max-width:100%;display:inline-flex}.dropdown-container .dropdown-input-container .dropdown-chip__label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.dropdown-container .dropdown-input-container .dropdown-chip__remove{cursor:pointer;color:inherit;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}.dropdown-container .dropdown-input-container .dropdown-chip__remove svg{width:var(--spacing-12);height:var(--spacing-12)}.dropdown-container .dropdown-input-container .dropdown-selected-count{font-size:var(--font-size-xs);color:var(--body-color-muted);pointer-events:none;position:absolute;bottom:-20px;left:0}.dropdown-container .dropdown-input-container .dropdown-actions-buttons{z-index:1;justify-content:center;align-items:center;height:calc(100% - 2px);padding:0 6px;display:flex;position:absolute;top:50%;right:1px;transform:translateY(-50%)}.dropdown-container .dropdown-input-container .dropdown-actions-buttons:before{content:"";opacity:.9;z-index:-1;position:absolute;inset:0}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button{justify-content:center;align-items:center;display:flex}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button{padding:var(--spacing-8);border-radius:0}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button span{justify-content:center;align-items:center;display:flex}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button:hover{background-color:var(--dropdown-action-hover-background-color)}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button svg{fill:var(--dropdown-action-color)}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button button svg:hover{fill:var(--dropdown-action-hover-color)}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-clear-button:focus{box-shadow:0 0 0 var(--spacing-2) var(--form-control-focus-ring);outline:none}@media (width<=768px){.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-clear-button{width:var(--spacing-40);height:var(--spacing-40);right:var(--spacing-40)}}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-toggle-button button{border-radius:0 var(--radius-sm) var(--radius-sm) 0}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-toggle-button svg{width:var(--spacing-16);height:var(--spacing-16);transition:transform .2s ease-in-out}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-toggle-button:focus{box-shadow:inset 0 0 0 var(--spacing-2) var(--form-control-focus-ring);outline:none}.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-toggle-button.open svg{transform:rotate(180deg)}.dropdown-container.dropdown-highlighted .dropdown-input-container input[type=text]{border-color:var(--form-control-focus-border-color)}.dropdown-container.dropdown-error .dropdown-input-container{background-color:var(--form-control-error-background-color)}.dropdown-container.dropdown-error .dropdown-input-container input[type=text]{background-color:var(--form-control-error-background-color);border-color:var(--form-control-error-border-color);color:var(--form-control-error-color)}.dropdown-container.dropdown-error .dropdown-input-container input[type=text]:focus{background-color:var(--form-control-error-background-color);border-color:var(--form-control-error-border-color);box-shadow:0 0 0 var(--spacing-2) var(--box-shadow)}.dropdown-container .dropdown-error-message{font-size:var(--font-size-xs);color:var(--form-control-error-color)}.dropdown-container.dropdown-success .dropdown-input-container{background-color:var(--form-control-success-background-color)}.dropdown-container.dropdown-success .dropdown-input-container input[type=text]{background-color:var(--form-control-success-background-color);border-color:var(--form-control-success-border-color);color:var(--form-control-success-color)}.dropdown-container.dropdown-success .dropdown-input-container input[type=text]:focus{background-color:var(--form-control-success-background-color);border-color:var(--form-control-success-border-color);box-shadow:0 0 0 var(--spacing-2) var(--box-shadow)}.dropdown-container .dropdown-success-message{font-size:var(--font-size-xs);color:var(--form-control-success-color)}.dropdown-container.multiple .dropdown-input-container,.dropdown-container.multiple input[type=text]{min-height:var(--spacing-40)}.dropdown-container.multiple .dropdown-input-container--chips input[type=text]{min-height:var(--spacing-24)}.dropdown-container.count-display-floating .dropdown-input-container{overflow:visible}.dropdown-menu{z-index:1000;width:100%;margin-top:var(--spacing-4);background-color:var(--dropdown-options-background-color);color:var(--dropdown-options-color);border:var(--spacing-1) solid var(--dropdown-border-color);border-radius:var(--radius-sm);box-shadow:0 var(--spacing-8) var(--spacing-16) -3px var(--box-shadow), 0 var(--spacing-4) var(--spacing-8) -2px var(--box-shadow);max-height:240px;position:absolute;overflow-y:auto}.dropdown-menu--portal{margin-top:var(--spacing-4)}.dropdown-menu--upward{margin-top:0;margin-bottom:var(--spacing-4);top:auto;bottom:100%}.dropdown-menu::-webkit-scrollbar{width:var(--scrollbar-size)}.dropdown-menu::-webkit-scrollbar-track{background:var(--scrollbar-track-color);border-radius:var(--scrollbar-radius)}.dropdown-menu::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color);border-radius:var(--scrollbar-radius)}.dropdown-menu::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover-color)}.dropdown-menu .dropdown-options-list{padding:var(--spacing-4) 0;margin:0;list-style:none}.dropdown-menu .dropdown-options-list .dropdown-option{padding:var(--spacing-12) var(--spacing-12);cursor:pointer;border-left:var(--spacing-4) solid transparent;align-items:center;transition:background-color .2s ease-in-out;display:flex}.dropdown-menu .dropdown-options-list .dropdown-option.focused{color:var(--dropdown-options-hover-color);background-color:var(--dropdown-options-hover-background-color);outline:none}.dropdown-menu .dropdown-options-list .dropdown-option.dropdown-option--disabled{opacity:.45;cursor:not-allowed}.dropdown-menu .dropdown-options-list .dropdown-option.dropdown-option--disabled:hover,.dropdown-menu .dropdown-options-list .dropdown-option.dropdown-option--disabled.focused{color:inherit;background-color:#0000}.dropdown-menu .dropdown-options-list .dropdown-option.selected{background-color:var(--dropdown-options-selected-background-color);color:var(--dropdown-options-selected-color)}.dropdown-menu .dropdown-options-list .dropdown-option.selected:hover,.dropdown-menu .dropdown-options-list .dropdown-option.selected.focused{color:var(--dropdown-options-hover-color);background-color:var(--dropdown-options-hover-background-color);opacity:.9}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-checkbox{margin-right:var(--spacing-8);flex-shrink:0}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-checkbox .checkbox{width:var(--spacing-16);height:var(--spacing-16);border:var(--spacing-2) solid var(--form-control-selection-border-color);border-radius:var(--spacing-4);background-color:#0000;justify-content:center;align-items:center;transition:all .2s ease-in-out;display:flex}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-checkbox .checkbox.checked{background-color:var(--form-control-selection-background-color);color:var(--form-control-selection-color)}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content{flex:1;min-width:0}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content .dropdown-option-label{align-items:center;gap:var(--spacing-8);min-width:0;display:inline-flex}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content .dropdown-option-prefix{flex:none;justify-content:center;align-items:center;display:inline-flex}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content .dropdown-option-details{width:100%;font-size:var(--font-size-xs);margin-top:var(--spacing-2);display:block}@media (width<=768px){.dropdown-menu .dropdown-options-list .dropdown-option{padding:var(--spacing-16) var(--spacing-12)}.dropdown-menu .dropdown-options-list .dropdown-option .dropdown-option-content{font-size:var(--font-size-md)}}.dropdown-menu .dropdown-no-options{padding:var(--spacing-12);text-align:center;font-style:italic}.dropdown-menu .dropdown-options-list .dropdown-option--create{color:var(--body-accent-color);border-top:1px solid var(--delimiter-color);font-weight:var(--font-weight-medium)}@media (width<=768px){.dropdown-menu{max-height:var(--spacing-300)}.dropdown-menu .dropdown-options-list .dropdown-option{min-height:var(--spacing-48)}}@container (width<=160px){.dropdown-container .dropdown-input-container .dropdown-actions-buttons .dropdown-action-button.dropdown-clear-button{display:none}.dropdown-container .dropdown-input-container .dropdown-value-chip{max-width:calc(100% - var(--spacing-12) - var(--spacing-48))}.dropdown-container .dropdown-input-container:not(.dropdown-input-container--chips) input[type=text]{padding-right:var(--spacing-48)}}
package/dist/components/Dropdown/Dropdown2.js CHANGED
@@ -1,40 +1,40 @@
1
1
  import './Dropdown.css';
2
2
  import { Icon as I } from "../Icon/Icon2.js";
3
- import { Button as le } from "../Button/Button2.js";
4
- import { Tooltip as Ae } from "../Tooltip/Tooltip2.js";
5
- import { InputText as Ce } from "../InputText/InputText2.js";
6
- import { foldDiacritics as ae } from "../../helpers/Search.js";
3
+ import { Button as ae } from "../Button/Button2.js";
4
+ import { Tooltip as He } from "../Tooltip/Tooltip2.js";
5
+ import { InputText as je } from "../InputText/InputText2.js";
6
+ import { foldDiacritics as fe } from "../../helpers/Search.js";
7
7
  /* empty css */
8
- import { useEffect as E, useId as He, useRef as D, useState as k } from "react";
8
+ import { useEffect as E, useId as Ce, useRef as D, useState as k } from "react";
9
9
  import { jsx as c, jsxs as g } from "react/jsx-runtime";
10
- import { createPortal as je } from "react-dom";
11
- import { caretDown as _e, clear as fe } from "@memobit/icons";
12
- var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", disabled: x = !1, error: A, highlighted: we = !1, id: he, label: J, maxVisibleSelectedLabels: me = 1, multilineChips: ge = !1, multiple: o = !1, name: N, onChange: u, onSearchChange: ve, options: m, placeholder: C = "Select an option", searchable: f = !0, searchValue: M, selectedCountDisplay: H = "inline", showChips: j = !1, sortSelectedFirst: Q = !1, success: _, usePortal: $ = !0, value: d, valueAsChip: be = !0 }) => {
13
- const [p, v] = k(!1), [s, l] = k(M || ""), [a, X] = k(m), [L, S] = k(-1), [i, w] = k([]), [R, xe] = k({
10
+ import { createPortal as _e } from "react-dom";
11
+ import { caretDown as ze, clear as pe } from "@memobit/icons";
12
+ var Ze = ({ allowCustomValue: h = !1, autofocus: ue = !1, className: we = "", disabled: x = !1, error: A, highlighted: he = !1, id: me, label: J, maxVisibleSelectedLabels: ge = 1, multilineChips: ve = !1, multiple: i = !1, name: N, onChange: u, onSearchChange: be, options: m, placeholder: H = "Select an option", searchable: f = !0, searchValue: M, selectedCountDisplay: j = "inline", showChips: C = !1, sortSelectedFirst: Q = !1, success: _, usePortal: $ = !0, value: d, valueAsChip: xe = !0 }) => {
13
+ const [p, v] = k(!1), [s, l] = k(M || ""), [a, X] = k(m), [L, O] = k(-1), [o, w] = k([]), [R, Ne] = k({
14
14
  top: 0,
15
15
  bottom: 0,
16
16
  left: 0,
17
17
  width: 0,
18
18
  maxHeight: 300
19
- }), [z, Ne] = k(!1), O = D(null), y = D([]), F = D(null), $e = D(null), Y = He(), Z = he ?? `dropdown-${Y}`, U = D(null);
19
+ }), [z, $e] = k(!1), S = D(null), y = D([]), F = D(null), ke = D(null), Y = Ce(), Z = me ?? `dropdown-${Y}`, U = D(null);
20
20
  E(() => {
21
- if (p && Q && o) {
22
- const n = new Set(i.map((r) => r.value)), e = [], t = [];
21
+ if (p && Q && i) {
22
+ const n = new Set(o.map((r) => r.value)), e = [], t = [];
23
23
  m.forEach((r) => (n.has(r.value) ? e : t).push(r)), U.current = [...e, ...t];
24
24
  } else p || (U.current = null);
25
25
  }, [
26
26
  p,
27
27
  Q,
28
- o,
28
+ i,
29
29
  m
30
30
  ]), E(() => {
31
31
  const n = U.current ?? m;
32
32
  if (!f || !s) X(n);
33
33
  else {
34
- const e = ae(s), t = n.filter((r) => ae(r.label).includes(e));
34
+ const e = fe(s), t = n.filter((r) => fe(r.label).includes(e));
35
35
  X(t);
36
36
  }
37
- S(-1);
37
+ O(-1);
38
38
  }, [
39
39
  s,
40
40
  m,
@@ -50,19 +50,19 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
50
50
  e && (w([]), l(""));
51
51
  return;
52
52
  }
53
- if (o && Array.isArray(d) && d.length === 0) {
53
+ if (i && Array.isArray(d) && d.length === 0) {
54
54
  e && (w([]), l(""));
55
55
  return;
56
56
  }
57
- if (!o && d === "") {
57
+ if (!i && d === "") {
58
58
  e && (w([]), l(""));
59
59
  return;
60
60
  }
61
61
  if (m.length > 0) {
62
- if (o && Array.isArray(d)) {
62
+ if (i && Array.isArray(d)) {
63
63
  const t = m.filter((r) => typeof r.value == "number" ? d.includes(r.value) : d.includes(r.value.toString()));
64
64
  w(t), e && l("");
65
- } else if (!o && (typeof d == "string" || typeof d == "number")) {
65
+ } else if (!i && (typeof d == "string" || typeof d == "number")) {
66
66
  const t = m.find((r) => typeof r.value == "number" && typeof d == "number" ? r.value === d : r.value.toString() === d.toString());
67
67
  if (t)
68
68
  w([t]), e && l(t.label);
@@ -75,7 +75,7 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
75
75
  w([r]), e && l(d.trim());
76
76
  } else e && (w([]), l(""));
77
77
  }
78
- } else if (h && !o && typeof d == "string" && d.trim()) {
78
+ } else if (h && !i && typeof d == "string" && d.trim()) {
79
79
  const t = {
80
80
  label: d.trim(),
81
81
  value: d.trim(),
@@ -86,24 +86,24 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
86
86
  }, [
87
87
  d,
88
88
  m,
89
- o,
89
+ i,
90
90
  f,
91
91
  h
92
92
  ]), E(() => {
93
93
  f && M !== void 0 && l(M);
94
94
  }, [M, f]), E(() => {
95
- if (!p || !O.current) return;
95
+ if (!p || !S.current) return;
96
96
  const n = () => {
97
- if (!O.current) return;
98
- const t = O.current.getBoundingClientRect(), r = window.visualViewport, T = r?.offsetTop ?? 0, Be = T + (r?.height ?? window.innerHeight), se = 300, Me = 8, G = Be - t.bottom, ce = t.top - T, de = G < se && ce > G;
99
- if (Ne(de), $) {
100
- const Te = Math.max(0, (de ? ce : G) - Me);
101
- xe({
97
+ if (!S.current) return;
98
+ const t = S.current.getBoundingClientRect(), r = window.visualViewport, T = r?.offsetTop ?? 0, Me = T + (r?.height ?? window.innerHeight), ce = 300, Te = 8, G = Me - t.bottom, de = t.top - T, le = G < ce && de > G;
99
+ if ($e(le), $) {
100
+ const Ae = Math.max(0, (le ? de : G) - Te);
101
+ Ne({
102
102
  top: t.bottom,
103
103
  bottom: window.innerHeight - t.top,
104
104
  left: t.left,
105
105
  width: t.width,
106
- maxHeight: Math.min(se, Te)
106
+ maxHeight: Math.min(ce, Ae)
107
107
  });
108
108
  }
109
109
  };
@@ -114,12 +114,12 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
114
114
  };
115
115
  }, [p, $]), E(() => {
116
116
  const n = (e) => {
117
- if (O.current && !O.current.contains(e.target)) {
117
+ if (S.current && !S.current.contains(e.target)) {
118
118
  if ($ && p) {
119
119
  const t = document.querySelector(".dropdown-menu--portal");
120
120
  if (t && t.contains(e.target)) return;
121
121
  }
122
- if (h && !o && s.trim() && !(i.length > 0 && i[0].label.toLowerCase() === s.trim().toLowerCase())) {
122
+ if (h && !i && s.trim() && !(o.length > 0 && o[0].label.toLowerCase() === s.trim().toLowerCase())) {
123
123
  const t = m.find((r) => r.label.toLowerCase() === s.toLowerCase() || r.value.toString() === s) || {
124
124
  label: s.trim(),
125
125
  value: s.trim(),
@@ -128,7 +128,7 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
128
128
  w([t]), l(t.label), v(!1), u && u(t, N);
129
129
  return;
130
130
  }
131
- v(!1), !o && i.length > 0 ? l(i[0].label) : o && f && l("");
131
+ v(!1), !i && o.length > 0 ? l(o[0].label) : i && f && l("");
132
132
  }
133
133
  };
134
134
  return document.addEventListener("mousedown", n), () => {
@@ -138,20 +138,20 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
138
138
  h,
139
139
  s,
140
140
  p,
141
- o,
141
+ i,
142
142
  N,
143
143
  u,
144
144
  m,
145
145
  f,
146
- i,
146
+ o,
147
147
  $
148
148
  ]);
149
149
  const K = (n) => {
150
150
  if (!n.disabled)
151
- if (o) {
152
- const e = i.some((r) => r.value === n.value);
151
+ if (i) {
152
+ const e = o.some((r) => r.value === n.value);
153
153
  let t;
154
- e ? t = i.filter((r) => r.value !== n.value) : t = [...i, n], w(t), f && l(""), u && u(t, N);
154
+ e ? t = o.filter((r) => r.value !== n.value) : t = [...o, n], w(t), f && l(""), u && u(t, N);
155
155
  } else
156
156
  l(n.label), w([n]), v(!1), u && u(n, N);
157
157
  }, P = () => {
@@ -166,23 +166,23 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
166
166
  value: s.trim(),
167
167
  className: "custom-option"
168
168
  };
169
- if (o) {
170
- const t = [...i, e];
169
+ if (i) {
170
+ const t = [...o, e];
171
171
  w(t), l(""), u && u(t, N);
172
172
  } else
173
173
  w([e]), l(e.label), v(!1), u && u(e, N);
174
174
  }, ee = (n) => {
175
- const e = i.filter((t) => t.value !== n.value);
176
- w(e), u && (o ? u(e, N) : (u(null, N), f || l("")));
177
- }, ke = () => {
178
- w([]), (!f || !o) && l(""), v(!1), u && u(o ? [] : null, N);
179
- }, Le = (n) => {
180
- l(n), p || v(!0), ve?.(n);
175
+ const e = o.filter((t) => t.value !== n.value);
176
+ w(e), u && (i ? u(e, N) : (u(null, N), f || l("")));
177
+ }, Le = () => {
178
+ w([]), (!f || !i) && l(""), v(!1), u && u(i ? [] : null, N);
179
+ }, Oe = (n) => {
180
+ l(n), p || v(!0), be?.(n);
181
181
  }, ne = () => {
182
- x || (v(!0), !o && f && i.length > 0 && l(""), (o || f) && F.current?.focus());
182
+ x || (v(!0), !i && f && o.length > 0 && l(""), (i || f) && F.current?.focus());
183
183
  }, Se = () => {
184
- x || (v(!p), p || (S(-1), !o && f && i.length > 0 && l(""), (o || f) && F.current?.focus()));
185
- }, Oe = (n) => {
184
+ x || (v(!p), p || (O(-1), !i && f && o.length > 0 && l(""), (i || f) && F.current?.focus()));
185
+ }, ye = (n) => {
186
186
  if (!x) {
187
187
  if (!p) {
188
188
  (n.key === "ArrowDown" || n.key === "Enter") && (v(!0), n.preventDefault());
@@ -191,14 +191,14 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
191
191
  switch (n.key) {
192
192
  case "ArrowDown":
193
193
  if (n.preventDefault(), h && s && a.length === 0) return;
194
- S((e) => {
194
+ O((e) => {
195
195
  const t = e < (h && s && !a.some((r) => r.label.toLowerCase() === s.toLowerCase()) ? a.length : a.length - 1) ? e + 1 : 0;
196
196
  return t < a.length && y.current[t] && y.current[t]?.scrollIntoView({ block: "nearest" }), t;
197
197
  });
198
198
  break;
199
199
  case "ArrowUp":
200
200
  if (n.preventDefault(), h && s && a.length === 0) return;
201
- S((e) => {
201
+ O((e) => {
202
202
  const t = h && s && !a.some((T) => T.label.toLowerCase() === s.toLowerCase()) ? a.length : a.length - 1, r = e > 0 ? e - 1 : t;
203
203
  return r < a.length && y.current[r] && y.current[r]?.scrollIntoView({ block: "nearest" }), r;
204
204
  });
@@ -207,25 +207,25 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
207
207
  n.preventDefault(), L >= 0 && L < a.length ? K(a[L]) : (h && s && L === a.length || h && s && a.length === 0) && P();
208
208
  break;
209
209
  case "Escape":
210
- n.preventDefault(), v(!1), !o && i.length > 0 ? l(i[0].label) : o && f && l("");
210
+ n.preventDefault(), v(!1), !i && o.length > 0 ? l(o[0].label) : i && f && l("");
211
211
  break;
212
212
  case "Backspace":
213
- o && s === "" && i.length > 0 && (n.preventDefault(), ee(i[i.length - 1]));
213
+ i && s === "" && o.length > 0 && (n.preventDefault(), ee(o[o.length - 1]));
214
214
  }
215
215
  }
216
- }, q = (n) => i.some((e) => e.value === n.value), ye = () => {
217
- if (i.length === 0) return "";
218
- const n = Math.max(1, me);
219
- if (i.length <= n) return i.map((r) => r.label).join(", ");
220
- const e = i.slice(0, n).map((r) => r.label).join(", "), t = i.length - n;
216
+ }, q = (n) => o.some((e) => e.value === n.value), Ie = () => {
217
+ if (o.length === 0) return "";
218
+ const n = Math.max(1, ge);
219
+ if (o.length <= n) return o.map((r) => r.label).join(", ");
220
+ const e = o.slice(0, n).map((r) => r.label).join(", "), t = o.length - n;
221
221
  return `${e} (+${t} ${t === 1 ? "other" : "others"})`;
222
- }, Ie = () => o && j || f && p ? s : i.length > 0 ? o ? ye() : i[0].label : "", Ee = () => o && j ? i.length > 0 ? "" : C : p && f ? C : i.length > 0 ? "" : C, De = () => !o || i.length === 0 || H === "none" ? null : H === "floating" ? /* @__PURE__ */ g("div", {
222
+ }, Ee = () => i && C || f && p ? s : o.length > 0 ? i ? Ie() : o[0].label : "", De = () => i && C ? o.length > 0 ? "" : H : p && f ? H : o.length > 0 ? "" : H, Re = () => !i || o.length === 0 || j === "none" ? null : j === "floating" ? /* @__PURE__ */ g("div", {
223
223
  className: "dropdown-selected-count",
224
- children: [i.length, " selected"]
225
- }) : null, te = () => !!(h && s && s.trim() && !a.some((n) => n.label.toLowerCase() === s.toLowerCase() || n.value.toString() === s)), Re = () => {
224
+ children: [o.length, " selected"]
225
+ }) : null, te = () => !!(h && s && s.trim() && !a.some((n) => n.label.toLowerCase() === s.toLowerCase() || n.value.toString() === s)), Be = () => {
226
226
  if (!p || x) return null;
227
227
  const n = /* @__PURE__ */ c("div", {
228
- ref: $e,
228
+ ref: ke,
229
229
  className: `dropdown-menu ${$ ? "dropdown-menu--portal" : ""} ${z ? "dropdown-menu--upward" : ""}`,
230
230
  style: $ ? {
231
231
  position: "fixed",
@@ -244,9 +244,9 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
244
244
  },
245
245
  className: `dropdown-option ${e.className || ""} ${L === t ? "focused" : ""} ${q(e) ? "selected" : ""} ${e.disabled ? "dropdown-option--disabled" : ""}`,
246
246
  onClick: () => K(e),
247
- onMouseEnter: () => S(t),
247
+ onMouseEnter: () => O(t),
248
248
  title: e.tooltip,
249
- children: [o && /* @__PURE__ */ c("div", {
249
+ children: [i && /* @__PURE__ */ c("div", {
250
250
  className: "dropdown-option-checkbox",
251
251
  children: /* @__PURE__ */ c("div", {
252
252
  className: `checkbox ${q(e) ? "checked" : ""}`,
@@ -288,7 +288,7 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
288
288
  },
289
289
  className: `dropdown-option dropdown-option--create ${L === a.length ? "focused" : ""}`,
290
290
  onClick: P,
291
- onMouseEnter: () => S(a.length),
291
+ onMouseEnter: () => O(a.length),
292
292
  children: /* @__PURE__ */ c("div", {
293
293
  className: "dropdown-option-content",
294
294
  children: /* @__PURE__ */ g("span", {
@@ -306,11 +306,11 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
306
306
  children: "No options found"
307
307
  })
308
308
  });
309
- return $ ? je(n, document.body) : n;
310
- }, b = !o && i.length === 1 ? i[0] : null, B = be && !p && !o && i.length > 0, re = !!(b?.icon && !s && !B), oe = !!(b?.suffixIcon && !B), W = o && j, ie = i.length > 0;
309
+ return $ ? _e(n, document.body) : n;
310
+ }, b = !i && o.length === 1 ? o[0] : null, B = xe && !p && !i && o.length > 0, re = !!(b?.icon && !s && !B), oe = !!(b?.suffixIcon && !B), W = i && C, ie = o.length > 0, se = f || h;
311
311
  return /* @__PURE__ */ g("div", {
312
- className: `dropdown-container ${A ? "dropdown-error" : ""} ${_ ? "dropdown-success" : ""} ${we ? "dropdown-highlighted" : ""} ${o ? "multiple" : ""} ${x ? "disabled" : ""} ${o ? `count-display-${H}` : ""} ${ue}`,
313
- ref: O,
312
+ className: `dropdown-container ${A ? "dropdown-error" : ""} ${_ ? "dropdown-success" : ""} ${he ? "dropdown-highlighted" : ""} ${i ? "multiple" : ""} ${x ? "disabled" : ""} ${i ? `count-display-${j}` : ""} ${we}`,
313
+ ref: S,
314
314
  children: [
315
315
  J && /* @__PURE__ */ c("label", {
316
316
  htmlFor: Z,
@@ -318,7 +318,7 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
318
318
  children: J
319
319
  }),
320
320
  /* @__PURE__ */ g("div", {
321
- className: `dropdown-input-container ${re ? "dropdown-input-container--has-prefix-icon" : ""} ${oe ? "dropdown-input-container--has-suffix-icon" : ""} ${W ? "dropdown-input-container--chips" : ""} ${W && ge ? "dropdown-input-container--chips-multiline" : ""} ${ie ? "dropdown-input-container--clearable" : ""}`,
321
+ className: `dropdown-input-container ${re ? "dropdown-input-container--has-prefix-icon" : ""} ${oe ? "dropdown-input-container--has-suffix-icon" : ""} ${W ? "dropdown-input-container--chips" : ""} ${W && ve ? "dropdown-input-container--chips-multiline" : ""} ${ie ? "dropdown-input-container--clearable" : ""}`,
322
322
  children: [
323
323
  re && b?.icon && /* @__PURE__ */ c("span", {
324
324
  className: "dropdown-selected-icon dropdown-selected-icon--prefix",
@@ -332,12 +332,12 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
332
332
  children: b.label
333
333
  })]
334
334
  }),
335
- W && i.map((n) => /* @__PURE__ */ g("span", {
335
+ W && o.map((n) => /* @__PURE__ */ g("span", {
336
336
  className: "dropdown-chip",
337
337
  children: [/* @__PURE__ */ c("span", {
338
338
  className: "dropdown-chip__label",
339
339
  children: n.label
340
- }), /* @__PURE__ */ c(Ae, {
340
+ }), /* @__PURE__ */ c(He, {
341
341
  title: "Remove",
342
342
  children: /* @__PURE__ */ c("button", {
343
343
  type: "button",
@@ -346,22 +346,22 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
346
346
  onClick: (e) => {
347
347
  e.stopPropagation(), ee(n);
348
348
  },
349
- children: fe
349
+ children: pe
350
350
  })
351
351
  })]
352
352
  }, `dd-chip-${n.value}`)),
353
- /* @__PURE__ */ c(Ce, {
353
+ /* @__PURE__ */ c(je, {
354
354
  ref: F,
355
355
  id: Z,
356
- placeholder: B ? "" : Ee(),
357
- value: B ? "" : Ie(),
358
- onChange: f || o ? Le : () => {
359
- },
356
+ placeholder: B ? "" : De(),
357
+ value: B ? "" : Ee(),
358
+ onChange: se ? Oe : void 0,
360
359
  onClick: ne,
361
- onKeyDown: Oe,
360
+ onKeyDown: ye,
362
361
  autoComplete: "off",
363
- autoFocus: pe,
364
- disabled: x
362
+ autoFocus: ue,
363
+ disabled: x,
364
+ readOnly: !se
365
365
  }),
366
366
  /* @__PURE__ */ g("div", {
367
367
  className: "dropdown-actions-buttons",
@@ -372,28 +372,28 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
372
372
  }),
373
373
  ie && /* @__PURE__ */ c("span", {
374
374
  className: "dropdown-action-button dropdown-clear-button",
375
- children: /* @__PURE__ */ c(le, {
375
+ children: /* @__PURE__ */ c(ae, {
376
376
  variant: "plain",
377
- onClick: ke,
377
+ onClick: Le,
378
378
  disabled: x,
379
- children: fe
379
+ children: pe
380
380
  })
381
381
  }),
382
382
  /* @__PURE__ */ c("span", {
383
383
  className: `dropdown-action-button dropdown-toggle-button ${p ? "open" : ""}`,
384
- children: /* @__PURE__ */ c(le, {
384
+ children: /* @__PURE__ */ c(ae, {
385
385
  variant: "plain",
386
386
  onClick: Se,
387
387
  disabled: x,
388
- children: _e
388
+ children: ze
389
389
  })
390
390
  })
391
391
  ]
392
392
  }),
393
- De()
393
+ Re()
394
394
  ]
395
395
  }),
396
- Re(),
396
+ Be(),
397
397
  A && /* @__PURE__ */ c("span", {
398
398
  className: "dropdown-error-message",
399
399
  children: A
@@ -406,5 +406,5 @@ var Ye = ({ allowCustomValue: h = !1, autofocus: pe = !1, className: ue = "", di
406
406
  });
407
407
  };
408
408
  export {
409
- Ye as Dropdown
409
+ Ze as Dropdown
410
410
  };
package/dist/helpers/VersionInfo.js CHANGED
@@ -23,7 +23,7 @@ var r = (i) => {
23
23
  const o = {
24
24
  ...i,
25
25
  lib: d,
26
- libBuildNumber: 486,
26
+ libBuildNumber: 491,
27
27
  libCommit: n,
28
28
  libBuildDate: t
29
29
  };
package/dist/index.d.ts CHANGED
@@ -770,6 +770,7 @@ export declare interface ControlPanelFilter {
770
770
  count?: number | string;
771
771
  placeholder?: string;
772
772
  multiple?: boolean;
773
+ /** Dropdown filters are searchable unless set to false; chips filters only show a search box when true. */
773
774
  searchable?: boolean;
774
775
  min?: number;
775
776
  max?: number;
package/dist/memobit-icons.json CHANGED
@@ -31,6 +31,7 @@
31
31
  "key",
32
32
  "link",
33
33
  "lock",
34
+ "logout",
34
35
  "map",
35
36
  "menu-hamburger",
36
37
  "next",
@@ -48,6 +49,7 @@
48
49
  "star",
49
50
  "table",
50
51
  "target",
52
+ "theme-picker",
51
53
  "time",
52
54
  "tree",
53
55
  "tune",
package/dist/version.js CHANGED
@@ -1,7 +1,7 @@
1
- var I = "3.7.0", B = 486, L = "8f360c0", _ = "2026-10-11T18:20:47.879Z", r = "486";
1
+ var I = "3.8.1", B = 491, L = "573fbac", _ = "2026-10-12T08:29:45.572Z", a = "491";
2
2
  export {
3
3
  _ as LIB_BUILD_DATE,
4
- r as LIB_BUILD_ID,
4
+ a as LIB_BUILD_ID,
5
5
  B as LIB_BUILD_NUMBER,
6
6
  L as LIB_COMMIT,
7
7
  I as LIB_VERSION
package/dist/version.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
- "version": "3.7.0",
3
- "buildNumber": 486,
4
- "commit": "8f360c0",
5
- "buildDate": "2026-10-11T18:20:47.879Z"
2
+ "version": "3.8.1",
3
+ "buildNumber": 491,
4
+ "commit": "573fbac",
5
+ "buildDate": "2026-10-12T08:29:45.572Z"
6
6
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@memobit/libs",
3
- "version": "3.7.0",
3
+ "version": "3.8.1",
4
4
  "description": "React component library powering the Memobit apps — 100+ components, helpers and hooks. Icons ship as @memobit/icons and themes as @memobit/themes. TypeScript-first, ESM-only, React 19.",
5
5
  "keywords": [
6
6
  "react",