fix: InputTags style. fixes

Author: tugcekucukoglu

packages/@primereact/styles/src/inputtags/InputTags.style.ts

@@ -1,8 +1,10 @@
 import { createStyles } from '@primereact/styles/utils';
 import type { InputTagsRootInstance } from '@primereact/types/primitive/inputtags';
+import { style } from '@primeuix/styles/autocomplete';
 import { isNotEmpty } from '@primeuix/utils';
 
-const style = /*css*/ `
+const _style = /*css*/ `
+    ${style}
     .p-inputtags {
         display: flex;
         flex-wrap: wrap;
@@ -25,6 +27,112 @@ const style = /*css*/ `
         box-shadow: dt('inputtext.shadow');
     }
 
+    .p-inputtags-popup {
+        position: relative;
+        background: var(--p-overlay-select-background);
+        color: var(--p-overlay-select-color);
+        border: 1px solid var(--p-overlay-select-border-color);
+        border-radius: var(--p-overlay-select-border-radius);
+        box-shadow: var(--p-overlay-select-shadow);
+        width: var(--positioner-anchor-width, max-content);
+        transform-origin: var(--transform-origin);
+        will-change: transform, opacity;
+    }
+
+
+    .p-inputtags-list {
+        list-style-type: none;
+        margin: 0;
+        padding: var(--p-list-padding, 0.25rem 0.25rem);
+        outline: 0 none;
+        display: flex;
+        flex-direction: column;
+        gap: var(--p-list-gap, 2px);
+        overflow: auto;
+    }
+
+
+   .p-inputtags-option {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+        padding: var(--p-list-option-padding);
+        border: 0 none;
+        border-radius: var(--p-list-option-border-radius);
+        color: var(--p-list-option-color);
+        transition:
+            background var(--p-form-field-transition-duration),
+            color var(--p-form-field-transition-duration),
+            border-color var(--p-form-field-transition-duration),
+            box-shadow var(--p-form-field-transition-duration),
+            outline-color var(--p-form-field-transition-duration);
+    }
+
+    .p-inputtags-option:not(.p-inputtags-option-selected):not(.p-disabled).p-focus {
+        background: var(--p-list-option-focus-background);
+        color: var(--p-list-option-focus-color);
+    }
+
+    .p-inputtags-option:not(.p-inputtags-option-selected):not(.p-disabled):hover {
+        background: var(--p-list-option-focus-background);
+        color: var(--p-list-option-focus-color);
+    }
+
+    .p-inputtags-option-selected {
+        background: var(--p-list-option-selected-background);
+        color: var(--p-list-option-selected-color);
+    }
+
+    .p-inputtags-option-selected.p-focus {
+        background: var(--p-list-option-selected-focus-background);
+        color: var(--p-list-option-selected-focus-color);
+    }
+
+    .p-inputtags-option-group {
+        margin: 0;
+        padding: var(--p-list-option-group-padding);
+        color: var(--p-list-option-group-color);
+        background: var(--p-list-option-group-background);
+        font-weight: var(--p-list-option-group-font-weight);
+    }
+
+    .p-inputtags-arrow {
+        position: absolute;
+        border: 1px solid var(--p-overlay-select-border-color);
+        background: var(--p-overlay-select-background);
+        width: 0.75rem;
+        height: 0.75rem;
+        border-bottom-left-radius: 3px;
+        clip-path: polygon(0 100%, 0 0, 100% 100%);
+
+        &[data-side='top'] {
+            left: var(--placer-arrow-x);
+            bottom: -0.375rem;
+            transform: translateX(-50%) rotate(-45deg);
+        }
+
+        &[data-side='bottom'] {
+            left: var(--placer-arrow-x);
+            top: -0.375rem;
+            transform: translateX(-50%) rotate(135deg);
+        }
+
+        &[data-side='left'] {
+            top: var(--placer-arrow-y);
+            right: -0.375rem;
+            transform: translateY(-50%) rotate(-135deg);
+        }
+
+        &[data-side='right'] {
+            top: var(--placer-arrow-y);
+            left: -0.375rem;
+            transform: translateY(-50%) rotate(45deg);
+        }
+    }
+
     .p-inputtags .p-inputtags-item {
         padding-inline: dt('inputtext.padding.y');
         padding-block: calc(dt('inputtext.padding.y') /2);
@@ -86,7 +194,7 @@ const style = /*css*/ `
 
 export const styles = createStyles<InputTagsRootInstance>({
     name: 'inputtags',
-    style,
+    style: _style,
     classes: {
         root: ({ props, context, attrs, state }) => [
             'p-inputtags p-component',
@@ -106,8 +214,19 @@ export const styles = createStyles<InputTagsRootInstance>({
         ],
         input: 'p-inputtags-input',
         panel: 'p-inputtags-panel',
+        positioner: 'p-inputtags-positioner',
+        popup: 'p-inputtags-popup',
         list: 'p-inputtags-list',
         options: 'p-inputtags-options',
-        option: 'p-inputtags-option'
+        option: ({ context }) => [
+            'p-inputtags-option',
+            {
+                'p-focus': context?.focused,
+                'p-disabled': context?.disabled,
+                'p-inputtags-option-selected': context?.selected
+            }
+        ],
+        optionGroup: 'p-inputtags-option-group',
+        arrow: 'p-inputtags-arrow'
     }
 });