react-core-ts 2.1.40 → 2.1.41

package/dist/styles/components/autocomplete.css

@@ -1,20 +1,68 @@
-body * {
+/* 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;
 }
-: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;
+
+/* 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;
+  box-sizing: border-box;
 }
-:root {
-  --blue-navy: #001f3f;
-  --table-hover: #your-hover-color; /* Replace with your actual color code */
+.qbs-textfield input.qbs-h-\[25px\],
+input.qbs-peer.qbs-h-\[25px\] {
+  height: 25px;
+  min-height: 25px;
+  box-sizing: border-box;
+}
+.qbs-textfield input.qbs-h-\[34px\],
+input.qbs-peer.qbs-h-\[34px\] {
+  height: 34px;
+  min-height: 34px;
+  box-sizing: border-box;
 }
 
 .custom-spinner {
@@ -394,7 +442,8 @@ ul {
   position: absolute;
   right: 25px;
   z-index: 99;
-  top: 18px;
+  top: 50%;
+  transform: translateY(-50%);
   flex-wrap: wrap;
 }
 
@@ -420,7 +469,8 @@ ul {
   position: absolute;
   right: 8px;
   z-index: 99;
-  top: 6.5px;
+  top: 50%;
+  transform: translateY(-50%);
   flex-wrap: wrap;
 }
 
@@ -819,18 +869,89 @@ span.dropdown-search-icon {
 
 /* TextField Inner Search Button */
 .inner-search-button {
+  position: absolute;
   background: #f8f8f8;
-  border-radius: 6px;
-  padding: 0px 8px;
+  border: none;
+  border-radius: 0 3px 3px 0;
+  padding: 0 8px;
   display: flex;
   align-items: center;
-  justify-content: center;  
+  justify-content: center;
   cursor: pointer;
-  height: 38px;
+  height: calc(100% - 2px);
   width: 38px;
   top: 1px;
-  right: 2px;
+  right: 1px;
+  z-index: 2;
+  box-sizing: border-box;
 }
 .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/components/modern-input.css

@@ -0,0 +1,208 @@
+/**
+ * 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

@@ -0,0 +1,174 @@
+/**
+ * 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/global.css

@@ -2,7 +2,9 @@
 @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/dist/styles/library-entry.css

@@ -0,0 +1,9 @@
+@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';

package/dist/styles/styles/components/autocomplete.css

@@ -200,6 +200,10 @@ body * {
   color: #313131;
 }
 
+.qbs-textfield-default:disabled {
+  z-index: 0;
+}
+
 .qbs-expandable-container {
   border: 1px solid #d6d8dc;
   background: #fff;
@@ -444,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;
 }

package/dist/utilities/debounce.js.map

@@ -1 +1 @@
-{"version":3,"file":"debounce.js","sourceRoot":"","sources":["../../src/utilities/debounce.ts"],"names":[],"mappings":";;;AAAA,SAAgB,QAAQ,CACtB,EAAK,EACL,KAAa;IAEb,IAAI,OAAO,GAA0B,IAAI,CAAC;IAC1C,OAAO;QAAC,cAAsB;aAAtB,UAAsB,EAAtB,qBAAsB,EAAtB,IAAsB;YAAtB,yBAAsB;;QAC5B,IAAI,OAAO,EAAE;YACX,YAAY,CAAC,OAAO,CAAC,CAAC;SACvB;QACD,OAAO,GAAG,UAAU,CAAC;YACnB,EAAE,eAAI,IAAI,EAAE;YACZ,OAAO,GAAG,IAAI,CAAC;QACjB,CAAC,EAAE,KAAK,CAAC,CAAC;IACZ,CAAC,CAAC;AACJ,CAAC;AAdD,4BAcC"}
+{"version":3,"file":"debounce.js","sourceRoot":"","sources":["../../src/utilities/debounce.ts"],"names":[],"mappings":";;;AAAA,SAAgB,QAAQ,CACtB,EAAK,EACL,KAAa;IAEb,IAAI,OAAO,GAAyC,IAAI,CAAC;IACzD,OAAO;QAAC,cAAsB;aAAtB,UAAsB,EAAtB,qBAAsB,EAAtB,IAAsB;YAAtB,yBAAsB;;QAC5B,IAAI,OAAO,EAAE;YACX,YAAY,CAAC,OAAO,CAAC,CAAC;SACvB;QACD,OAAO,GAAG,UAAU,CAAC;YACnB,EAAE,eAAI,IAAI,EAAE;YACZ,OAAO,GAAG,IAAI,CAAC;QACjB,CAAC,EAAE,KAAK,CAAC,CAAC;IACZ,CAAC,CAAC;AACJ,CAAC;AAdD,4BAcC"}

package/package.json

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

package/src/AutoCompleteWithSelectedList.tsx

@@ -1014,10 +1014,10 @@ const AutoCompleteWithSelectedList = forwardRef<
               {!countOnly ? (
                 getSelectedItems(false)
               ) : !tabInlineSearch ? (
-                <div className={`selected-items-counter-container ${disabled ? 'selected-item-inline-counter-disabled' : ''} qbs-text-sm qbs-gap-1 ${!tabInlineSearch && autoDropdown && !disabled ? 'selected-item-nontool-direct-counter' : ''}`}>
+                <div className={`selected-items-counter-container selected-item-inline-counter ${disabled ? 'selected-item-inline-counter-disabled' : ''} qbs-text-sm qbs-gap-1 ${!tabInlineSearch && autoDropdown && !disabled ? 'selected-item-nontool-direct-counter' : ''}`}>
                   <Tooltip title={allSelectedTooltipContent} enabled={selectedItems?.length > 0 ? true : false}>
                     <span className="badge qbs-rounded-full qbs-text-xs qbs-inline-flex qbs-items-center qbs-justify-center qbs-px-2 qbs-py-1 qbs-leading-none qbs-min-w-6 qbs-min-h-6">
-                      {selectedItems?.length}
+                      {selectedItems?.length ?? 0}
                     </span>
                   </Tooltip>
                 </div>

package/src/AutoCompleteWithTabFilter.tsx

@@ -1154,7 +1154,7 @@ const AutoCompleteWithTabFilter = forwardRef<
                                 <div className={`selected-items-counter-container selected-item-inline-counter ${disabled ? 'selected-item-inline-counter-disabled' : ''} qbs-text-sm qbs-gap-1 ${!tabInlineSearch && autoDropdown && !disabled ? 'selected-item-tool-direct-counter' : ''}`}>
                                     <Tooltip title={allSelectedTooltipContent} enabled={selectedItems?.length > 0 ? true : false}>
                                         <span className="badge qbs-rounded-full qbs-text-xs qbs-inline-flex qbs-items-center qbs-justify-center qbs-px-2 qbs-py-1 qbs-leading-none qbs-min-w-6 qbs-min-h-6">
-                                            {selectedItems?.length}
+                                            {selectedItems?.length ?? 0}
                                         </span>
                                     </Tooltip>
                                 </div>

package/src/components/InputActions.tsx

@@ -34,6 +34,19 @@ const InputActions: React.FC<ValueProps> = ({
   uniqueDropArrowId,
   autoDropdown = false,
 }) => {
+  const showClear =
+    Boolean(inputValue || searchValue) &&
+    !disabled &&
+    !readOnly &&
+    !expandable &&
+    !countOnly;
+  const showToggle =
+    !autoDropdown && (!(disabled || readOnly) || Boolean(viewMode));
+
+  if (!showClear && !showToggle) {
+    return null;
+  }
+
   return (
     <div
       className={`${
@@ -42,11 +55,7 @@ const InputActions: React.FC<ValueProps> = ({
           : 'qbs-autocomplete-close-icon'
       } `}
     >
-      {(inputValue || searchValue) &&
-        !disabled &&
-        !readOnly &&
-        !expandable &&
-        !countOnly && (
+      {showClear && (
           <button
             onClick={handleClear}
             className="icon-button text-[#667085] "
@@ -56,7 +65,7 @@ const InputActions: React.FC<ValueProps> = ({
             <Close />
           </button>
         )}
-      {!autoDropdown &&
+      {showToggle &&
         (dropOpen ? (
           <button
             type="button"