react-core-ts 4.0.2 → 4.0.4

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,209 @@
+/**
+ * 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;
+  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;
+}
+
+/* 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

@@ -1,6 +1,8 @@
 @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';

package/package.json

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