react-core-ts 4.0.2 → 4.0.3

package/dist/styles/components/autocomplete.css

@@ -22,6 +22,49 @@
   --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;
+  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;
+}
+.qbs-textfield input.qbs-h-\[34px\],
+input.qbs-peer.qbs-h-\[34px\] {
+  height: 34px;
+  min-height: 34px;
+  box-sizing: border-box;
+}
+
 .custom-spinner {
   width: 24px !important; /* w-6 */
   height: 24px; /* h-6 */
@@ -399,7 +442,8 @@ ul {
   position: absolute;
   right: 25px;
   z-index: 99;
-  top: 18px;
+  top: 50%;
+  transform: translateY(-50%);
   flex-wrap: wrap;
 }
 
@@ -425,7 +469,8 @@ ul {
   position: absolute;
   right: 8px;
   z-index: 99;
-  top: 6.5px;
+  top: 50%;
+  transform: translateY(-50%);
   flex-wrap: wrap;
 }
 
@@ -824,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,159 @@
+/**
+ * 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 {
+  border-color: #001f3f;
+}
+
+input.qbs-peer:disabled {
+  color: #98a2b3;
+  background-color: #f2f4f7;
+  cursor: not-allowed;
+}
+
+/* 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-grey-medium {
+  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;
+  color: #101828;
+}
+.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;
+}

package/dist/styles/global.css

@@ -2,7 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
+@import './components/modern-input.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

@@ -1,6 +1,7 @@
 @tailwind components;
 @tailwind utilities;
 
+@import './components/modern-input.css';
 @import './components/autocomplete.css';
 @import './components/treedropdown.css';
 @import './components/selectedautocomplete.css';

package/package.json

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