react-core-ts 2.1.41 → 2.1.42

package/dist/styles/components/autocomplete.css

@@ -1,68 +1,20 @@
-/* Intentionally no global `body *` reset — avoids conflicting with consumer apps. */
-:root {
-  --rcts-grey-dark: #4a4a4a;
-  --rcts-grey-light: #d3d3d3;
-  --rcts-blue-navy: #001f3f;
-  --rcts-input-disabled: #a9a9a9;
-  --rcts-error-light: #f08080;
-  --rcts-error-extra-light: #fddede;
-  --rcts-success: #28a745;
-  --rcts-success-light: #d4edda;
-  --rcts-blue-light: #add8e6;
-  /* Back-compat aliases */
-  --grey-dark: var(--rcts-grey-dark);
-  --grey-light: var(--rcts-grey-light);
-  --blue-navy: var(--rcts-blue-navy);
-  --input-disabled: var(--rcts-input-disabled);
-  --error-light: var(--rcts-error-light);
-  --error-extra-light: var(--rcts-error-extra-light);
-  --success: var(--rcts-success);
-  --success-light: var(--rcts-success-light);
-  --blue-light: var(--rcts-blue-light);
-  --table-hover: #f8f8f8;
-}
-
-/*
- * Scoped border-box so TextField / Autocomplete heights match pre-4.0.2 behavior.
- * (Removing global body * broke height because padding+border were added outside h-*).
- */
-.qbs-textfield,
-.qbs-textfield *,
-.qbs-autocomplete-selected-comp,
-.qbs-autocomplete-selected-comp *,
-.qbs-autocomplete-suggestions,
-.qbs-autocomplete-suggestions *,
-.autocomplete-suggections,
-.autocomplete-suggections *,
-.qbs-expandable-container,
-.qbs-expandable-container *,
-.tooltip-container,
-.tooltip-container *,
-.react-core-ts-search-container,
-.react-core-ts-search-container *,
-.qbs-autocomplete-container-table-view,
-.qbs-autocomplete-container-table-view * {
-  box-sizing: border-box;
-}
-
-/* Explicit TextField size heights — reliable even if utility order fights other CSS */
-.qbs-textfield input.qbs-h-10,
-input.qbs-peer.qbs-h-10 {
-  height: 2.5rem;
-  min-height: 2.5rem;
+body * {
   box-sizing: border-box;
 }
-.qbs-textfield input.qbs-h-\[25px\],
-input.qbs-peer.qbs-h-\[25px\] {
-  height: 25px;
-  min-height: 25px;
-  box-sizing: border-box;
+:root {
+  --grey-dark: #4a4a4a;
+  --grey-light: #d3d3d3;
+  --blue-navy: #001f3f;
+  --input-disabled: #a9a9a9;
+  --error-light: #f08080;
+  --error-extra-light: #fddede;
+  --success: #28a745;
+  --success-light: #d4edda;
+  --blue-light: #add8e6;
 }
-.qbs-textfield input.qbs-h-\[34px\],
-input.qbs-peer.qbs-h-\[34px\] {
-  height: 34px;
-  min-height: 34px;
-  box-sizing: border-box;
+:root {
+  --blue-navy: #001f3f;
+  --table-hover: #your-hover-color; /* Replace with your actual color code */
 }
 
 .custom-spinner {
@@ -248,6 +200,10 @@ input.qbs-peer.qbs-h-\[34px\] {
   color: #313131;
 }
 
+.qbs-textfield-default:disabled {
+  z-index: 0;
+}
+
 .qbs-expandable-container {
   border: 1px solid #d6d8dc;
   background: #fff;
@@ -442,8 +398,7 @@ ul {
   position: absolute;
   right: 25px;
   z-index: 99;
-  top: 50%;
-  transform: translateY(-50%);
+  top: 18px;
   flex-wrap: wrap;
 }
 
@@ -469,8 +424,7 @@ ul {
   position: absolute;
   right: 8px;
   z-index: 99;
-  top: 50%;
-  transform: translateY(-50%);
+  top: 6.5px;
   flex-wrap: wrap;
 }
 
@@ -494,6 +448,12 @@ ul {
   right: 8px;
 }
 
+.selected-item-inline-counter-disabled .badge {
+  background-color: #c63a3a;
+  color: #fff;
+  opacity: 1;
+}
+
 .selected-item-tool-direct-counter {
   right: 60px;
 }
@@ -869,89 +829,18 @@ span.dropdown-search-icon {
 
 /* TextField Inner Search Button */
 .inner-search-button {
-  position: absolute;
   background: #f8f8f8;
-  border: none;
-  border-radius: 0 3px 3px 0;
-  padding: 0 8px;
+  border-radius: 6px;
+  padding: 0px 8px;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: center;  
   cursor: pointer;
-  height: calc(100% - 2px);
+  height: 38px;
   width: 38px;
   top: 1px;
-  right: 1px;
-  z-index: 2;
-  box-sizing: border-box;
+  right: 2px;
 }
 .search-btn-input {
   padding-right: 38px;
-}
-
-/*
- * Keep end icons inside the input border.
- * (Sibling flex + qbs-w-full previously pushed icons outside the bordered input.)
- */
-.qbs-autocomplete-adorement-wrapper,
-.qbs-input-adorement-wrapper {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  z-index: 2;
-  pointer-events: none;
-}
-.qbs-autocomplete-adorement-wrapper > *,
-.qbs-input-adorement-wrapper > * {
-  pointer-events: auto;
-}
-
-.qbs-autocomplete-adorement-wrapper .adorement,
-.qbs-autocomplete-adorement-wrapper .qbs-autocomplete-adorement,
-.qbs-input-adorement-wrapper .adorement {
-  position: relative !important;
-  right: auto !important;
-  top: auto !important;
-  height: 100%;
-  padding-right: 4px;
-  box-sizing: border-box;
-}
-
-/* Avoid Tailwind `container` utility collision (prefix makes it `.qbs-container`) */
-.qbs-selected-comp-normal {
-  position: relative;
-  display: block;
-  width: 100%;
-  max-width: none;
-}
-
-.qbs-autocomplete-selected-comp {
-  position: relative;
-  display: block;
-  width: 100%;
-}
-
-.qbs-autocomplete-selected-comp > .qbs-textfield-expandable.qbs-normal,
-.qbs-autocomplete-selected-comp > .qbs-textfield-expandable.qbs-normal .qbs-textfield-default {
-  display: block;
-  width: 100%;
-}
-
-/* Tools icon should sit inside the field, vertically centered */
-.qbs-tools-drop-btn {
-  position: absolute !important;
-  right: 8px !important;
-  top: 50% !important;
-  transform: translateY(-50%);
-  z-index: 2;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: none;
-  padding: 0;
-  cursor: pointer;
 }

package/dist/styles/global.css

@@ -2,9 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-@import './components/modern-input.css';
-@import './components/qbs-fallbacks.css';
 @import './components/autocomplete.css';
 @import './components/treedropdown.css';
 @import './components/selectedautocomplete.css';
-@import './components/tooltip.css';
+@import './components/tooltip.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-core-ts",
-  "version": "2.1.41",
+  "version": "2.1.42",
   "description": "React Components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/styles/components/modern-input.css

@@ -1,208 +0,0 @@
-/**
- * Self-contained modern TextField / Autocomplete input styles.
- * These used to live in host apps; the library must ship them for Vite / local preview.
- */
-
-/* Base peer input (height + border) */
-input.qbs-peer,
-.qbs-textfield input[class*='qbs-h-'] {
-  box-sizing: border-box !important;
-  display: block;
-  width: 100%;
-  height: 2.5rem !important;
-  min-height: 2.5rem !important;
-  margin: 0;
-  border-style: solid;
-  border-width: 1px;
-  border-color: #d0d5dd;
-  border-radius: 4px;
-  background-color: #fff;
-  color: #111827;
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.25rem;
-  padding-left: 0.875rem;
-  padding-right: 0.875rem;
-  padding-top: 0;
-  padding-bottom: 0;
-  outline: none;
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-input.qbs-peer.qbs-h-\[34px\],
-.qbs-textfield input.qbs-h-\[34px\] {
-  height: 34px !important;
-  min-height: 34px !important;
-}
-
-input.qbs-peer.qbs-h-\[25px\],
-.qbs-textfield input.qbs-h-\[25px\] {
-  height: 25px !important;
-  min-height: 25px !important;
-  font-size: 0.75rem;
-}
-
-input.qbs-peer:focus:not(.qbs-input-error) {
-  border-color: #001f3f;
-}
-
-input.qbs-peer:disabled {
-  color: #98a2b3;
-  background-color: #f2f4f7;
-  cursor: not-allowed;
-}
-
-/*
- * Error state — must beat `input.qbs-peer` / `:focus` (element+class specificity).
- * Broken Tailwind classes like `focus:qbs-border-error-[#FDA29B]` never ship in CSS.
- */
-input.qbs-peer.qbs-input-error,
-.qbs-textfield input.qbs-input-error,
-.qbs-autocomplete-container-table-view input.qbs-input-error {
-  border-color: #fda29b !important;
-  outline: none;
-}
-
-input.qbs-peer.qbs-input-error:focus,
-.qbs-textfield input.qbs-input-error:focus,
-.qbs-autocomplete-container-table-view input.qbs-input-error:focus {
-  border-color: #fda29b !important;
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(253, 162, 155, 0.35);
-}
-
-/* Host-token fallbacks (prefixed utilities that are not in default Tailwind theme) */
-.qbs-border-input-light {
-  border-color: #d0d5dd;
-}
-.qbs-text-input-text {
-  color: #111827;
-}
-.qbs-text-input-disabled,
-.disabled\:qbs-text-input-disabled:disabled {
-  color: #98a2b3;
-}
-.qbs-bg-disabled,
-.disabled\:qbs-bg-disabled:disabled {
-  background-color: #f2f4f7;
-}
-.qbs-text-grey-dark {
-  color: #344054;
-}
-.qbs-text-error-light {
-  color: #f04438;
-}
-.qbs-text-error-icon,
-.qbs-text-error-label {
-  color: #f04438;
-}
-.qbs-text-warning-icon,
-.qbs-text-warning-label {
-  color: #f79009;
-}
-.qbs-text-tick-label {
-  color: #28b440;
-}
-.qbs-text-grey-medium {
-  color: #667085;
-}
-.qbs-border-grey-light {
-  border-color: #d0d5dd;
-}
-.qbs-text-table-bodyColor {
-  color: #667085;
-}
-.placeholder-input-label::placeholder {
-  color: #667085;
-}
-.qbs-bg-bodyBG {
-  background-color: #f9fafb;
-}
-.qbs-text-xxs {
-  font-size: 0.625rem;
-  line-height: 0.875rem;
-}
-.qbs-input-outline {
-  outline: none;
-}
-.text-common {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-.text-error {
-  color: #f04438;
-}
-.text-grey-secondary {
-  color: #667085;
-}
-.text-text-primary {
-  color: #101828;
-}
-
-/* Floating label: hide native placeholder when modern label is used */
-.placeholder-transparent::placeholder {
-  color: transparent !important;
-}
-.placeholder-transparent::-webkit-input-placeholder {
-  color: transparent !important;
-}
-.focus\:placeholder-grey-secondary:focus::placeholder {
-  color: #98a2b3;
-}
-
-.modern-input-label-truncate {
-  max-width: calc(100% - 1.75rem);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  pointer-events: none;
-  background-color: transparent;
-}
-
-.modern-input-label-size {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
-.modern-input-peer-focus-label-size,
-.peer-focus\:modern-input-peer-focus-label-size {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
-/* When peer has value / is focused, shrink label (Tailwind peer-focus variant class name) */
-.qbs-peer:focus ~ .peer-focus\:modern-input-peer-focus-label-size,
-.qbs-peer:not(:placeholder-shown) ~ .modern-input-peer-focus-label-size,
-.qbs-peer:not(:placeholder-shown) ~ label.modern-input-label-truncate {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
-.active-input-label-bg {
-  background-color: #fff;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
-.disabled-input-label-bg {
-  background-color: #f2f4f7;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
-/* Ensure bordered utility actually draws a border */
-.qbs-border {
-  border-style: solid;
-}
-
-/* Utilities that apps expect but Tailwind may not emit / lose specificity */
-.qbs-z-1 {
-  z-index: 1;
-}
-.qbs-start-\[14px\] {
-  inset-inline-start: 14px;
-}
-.hover\:qbs-text-dark:hover {
-  color: #101828;
-}

package/dist/styles/components/qbs-fallbacks.css

@@ -1,174 +0,0 @@
-/**
- * Semantic / host-token fallbacks that Tailwind may not emit, or that
- * need guaranteed styles when the library is consumed in Vite apps.
- */
-
-/* --- Missing important / RTL utilities --- */
-.\!qbs-pt-\[10px\] {
-  padding-top: 10px !important;
-}
-.\!qbs-pl-\[45px\] {
-  padding-left: 45px !important;
-}
-
-/* TextArea RTL peer-focus nudge (class used in ReactTextArea) */
-[dir='rtl'] .qbs-peer:focus ~ .rtl\:peer-focus\:qbs-translate-x-1\/6,
-.qbs-peer:focus ~ .rtl\:peer-focus\:qbs-translate-x-1\/6:where([dir='rtl'] *) {
-  transform: translateX(16.666667%);
-}
-
-/* --- Labels / selected chrome --- */
-.qbs-label-text,
-.labels.qbs-label-text {
-  font-size: 12px;
-  font-weight: 500;
-  color: #344054;
-  line-height: 16px;
-}
-.qbs-selected-label-text {
-  color: #344054;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  white-space: nowrap;
-}
-.qbs-text-hundred-plus {
-  font-size: 10px;
-  letter-spacing: -0.02em;
-}
-.qbs-text-grey-label {
-  color: #667085;
-  font-size: 0.875rem;
-}
-
-/* --- Search-on-button chrome --- */
-.qbs-btn-search-on {
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  color: #667085;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.qbs-btn-search-on:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-.qbs-btn-search-on:focus-visible {
-  outline: 2px solid #cbd5e1;
-  outline-offset: 1px;
-}
-
-/* --- Adornment hooks --- */
-.qbs-custom-dorpdown-adorement,
-.qbs-auto-dorpdown-adorement,
-.qbs-autocomplete-adorement {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  height: 100%;
-  padding-right: 4px;
-  box-sizing: border-box;
-}
-.adorement {
-  display: inline-flex;
-  align-items: center;
-}
-
-/* --- Loader / empty dropdown padding --- */
-.qbs-autocomplete-loader {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-height: 64px;
-  padding-top: 4rem;
-  box-sizing: border-box;
-}
-
-/* --- Suggestion list (Name/Count autocomplete) --- */
-.qbs-autocomplete-with-suggection {
-  width: 100%;
-}
-.qbs-suggection-list {
-  margin-top: 4px;
-  width: 100%;
-}
-.qbs-suggection-item {
-  cursor: pointer;
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-.qbs-suggection-item:hover {
-  background-color: #f8f8f8;
-}
-.qbs-suggection-label {
-  color: #344054;
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-.qbs-suggection-count {
-  background-color: #f97316;
-  color: #fff;
-}
-.qbs-autosuggection-list {
-  position: absolute;
-  z-index: 50;
-}
-
-/* Warning / success suggestion containers */
-.suggection-warning-container .qbs-peer {
-  border-color: #fdb022;
-}
-.suggection-okey-container .qbs-peer {
-  border-color: #28b440;
-}
-
-/* --- Radio / checkbox hooks --- */
-.qbs-custom-radio-container {
-  gap: 8px;
-}
-.qbs-radio-button {
-  cursor: pointer;
-}
-
-/* --- Misc icon hooks (no-op safe defaults) --- */
-.qbs-all-dropdow-arrow-icon,
-.qbs-tools-arrow-icon,
-.qbs-tree-single-select-icon {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-/* Extra color tokens often expected from host design systems */
-.qbs-text-gray-500 {
-  color: #6b7280;
-}
-.qbs-text-gray-700 {
-  color: #374151;
-}
-.qbs-text-gray-900 {
-  color: #111827;
-}
-.qbs-bg-gray-100 {
-  background-color: #f3f4f6;
-}
-.qbs-shadow-gray-300 {
-  --tw-shadow-color: #d1d5db;
-}
-.qbs-border-b {
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-}
-.qbs-border-r {
-  border-right-width: 1px;
-  border-right-style: solid;
-}
-
-/* Ensure focus outline utilities work when host CSS resets outlines */
-.focus-visible\:qbs-outline-slate-100:focus-visible {
-  outline: 2px solid #f1f5f9;
-  outline-offset: 2px;
-}

package/dist/styles/library-entry.css

@@ -1,9 +0,0 @@
-@tailwind components;
-@tailwind utilities;
-
-@import './components/modern-input.css';
-@import './components/qbs-fallbacks.css';
-@import './components/autocomplete.css';
-@import './components/treedropdown.css';
-@import './components/selectedautocomplete.css';
-@import './components/tooltip.css';