ehscan-react-components 0.1.27 → 0.1.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/TextAreaDropDown.js +4 -2
  2. package/dist/style/input-dropdown.css +1 -2
  3. package/package.json +1 -1
package/dist/TextAreaDropDown.js CHANGED
@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
11
11
  import { useRef, useState, useId, useEffect } from "react";
12
12
  import { DropDown } from "./DropDown";
13
13
  import './style/input-dropdown.css';
14
- export const TextAreaDropDown = ({ id, tabIndex, label, value, editable = true, required = false, dropdownValue, onChange, placeholder, maxLength = 500, addClass, }) => {
14
+ export const TextAreaDropDown = ({ id, tabIndex, label, value, editable = true, required = false, dropdownValue, onChange, placeholder = 'select or create new entry', maxLength = 500, addClass, }) => {
15
15
  const childRef = useRef(null);
16
16
  const textareaRef = useRef(null);
17
17
  const searchInput = useRef(null);
@@ -27,6 +27,7 @@ export const TextAreaDropDown = ({ id, tabIndex, label, value, editable = true,
27
27
  useEffect(() => {
28
28
  if (!width)
29
29
  return;
30
+ console.log('handleResize in TextAreaDropDown vai width');
30
31
  setOpenDropDown(false);
31
32
  }, [width]);
32
33
  useEffect(() => {
@@ -36,6 +37,7 @@ export const TextAreaDropDown = ({ id, tabIndex, label, value, editable = true,
36
37
  var _a;
37
38
  const newWidth = (_a = textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
38
39
  if (newWidth !== width) {
40
+ console.log('handleResize in TextAreaDropDown');
39
41
  setWidth(newWidth);
40
42
  }
41
43
  };
@@ -132,6 +134,6 @@ export const TextAreaDropDown = ({ id, tabIndex, label, value, editable = true,
132
134
  }, [searchTerm]);
133
135
  if (!tags)
134
136
  return null;
135
- return (_jsxs("div", { className: `ext-textarea-wrapper-dropdown ${addClass}`, ref: textareaRef, children: [label && (_jsxs("div", { className: "ext-textarea-label", children: [_jsxs("label", { className: "ext-textarea-label-title", htmlFor: textareaId, children: [label, " ", required && _jsx("span", { className: "required", children: "*" })] }), _jsxs("div", { className: "ext-textarea-label-btns", children: [editable && charCount > 0 && (_jsxs("div", { className: "form-container-count", children: [charCount, " / ", maxLength] })), editable && charCount > 0 && (_jsx("div", { className: "ext-textarea-svg-close", "aria-label": `Clear ${label !== null && label !== void 0 ? label : "text area"}` }))] })] })), _jsx("div", { className: `ext-textarea-box-dropdown${openDropDown ? ' open' : ''}`, onClick: () => setOpenDropDown(true), children: _jsxs("div", { className: "ext-textarea-dropdown-inner", children: [tags.map((item, index) => (_jsxs("div", { className: "textarea-tag loop", children: [_jsx("div", { children: item }), _jsx("div", { className: "textarea-tag-erase", onClick: () => removeTag(tags[index]), children: _jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("line", { x1: "8", y1: "8", x2: "16", y2: "16", stroke: "#333", strokeWidth: "1", strokeLinecap: "round" }), _jsx("line", { x1: "16", y1: "8", x2: "8", y2: "16", stroke: "#333", strokeWidth: "1", strokeLinecap: "round" })] }) })] }, index))), _jsx("div", { className: "search-x-wrapper", children: _jsxs("div", { className: "search-x", children: [_jsx("div", { className: "search-x-input", children: _jsx("input", { type: "text", ref: searchInput, onFocus: () => setOpenDropDown(true), placeholder: "select or create new entry", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onKeyDown: handleKeyDown }) }), _jsx("div", { className: `search-x-btn${newBtn ? ' show' : ''}`, onClick: () => createItem(), children: newBtn && 'create new one' })] }) })] }) }), _jsx(DropDown, { ref: childRef, openDropDown: openDropDown, display: filterItems, addItem: addItem, maxDropDownEntries: maxDropDownEntries, searchTerm: searchTerm })] }));
137
+ return (_jsxs("div", { className: `ext-textarea-wrapper-dropdown ${addClass}`, ref: textareaRef, children: [label && (_jsxs("div", { className: "ext-textarea-label", children: [_jsxs("label", { className: "ext-textarea-label-title", htmlFor: textareaId, children: [label, " ", required && _jsx("span", { className: "required", children: "*" })] }), _jsxs("div", { className: "ext-textarea-label-btns", children: [editable && charCount > 0 && (_jsxs("div", { className: "form-container-count", children: [charCount, " / ", maxLength] })), editable && charCount > 0 && (_jsx("div", { className: "ext-textarea-svg-close", "aria-label": `Clear ${label !== null && label !== void 0 ? label : "text area"}` }))] })] })), _jsx("div", { className: `ext-textarea-box-dropdown${openDropDown ? ' open' : ''}`, onClick: () => setOpenDropDown(true), children: _jsxs("div", { className: "ext-textarea-dropdown-inner", children: [tags.map((item, index) => (_jsxs("div", { className: "textarea-tag loop", children: [_jsx("div", { children: item }), _jsx("div", { className: "textarea-tag-erase", onClick: () => removeTag(tags[index]), children: _jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("line", { x1: "8", y1: "8", x2: "16", y2: "16", stroke: "#333", strokeWidth: "1", strokeLinecap: "round" }), _jsx("line", { x1: "16", y1: "8", x2: "8", y2: "16", stroke: "#333", strokeWidth: "1", strokeLinecap: "round" })] }) })] }, index))), _jsx("div", { className: "search-x-wrapper", children: _jsxs("div", { className: "search-x", children: [_jsx("div", { className: "search-x-input", children: _jsx("input", { type: "text", tabIndex: tabIndex, ref: searchInput, onFocus: () => setOpenDropDown(true), placeholder: placeholder, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onKeyDown: handleKeyDown }) }), _jsx("div", { className: `search-x-btn${newBtn ? ' show' : ''}`, onClick: () => createItem(), children: newBtn && 'create new one' })] }) })] }) }), _jsx(DropDown, { ref: childRef, openDropDown: openDropDown, display: filterItems, addItem: addItem, maxDropDownEntries: maxDropDownEntries, searchTerm: searchTerm })] }));
136
138
  };
137
139
  export default TextAreaDropDown;
package/dist/style/input-dropdown.css CHANGED
@@ -102,7 +102,6 @@ input:-webkit-autofill:active {
102
102
  border-radius: var(--ext-textarea-box-border-radius, 10px);
103
103
  display: flex;
104
104
  position: relative;
105
- --ext-dropdown-border-radius: 20px;
106
105
  }
107
106
 
108
107
  .ext-textarea-box-dropdown.open {
@@ -255,7 +254,7 @@ input:-webkit-autofill:active {
255
254
  position: fixed;
256
255
  background-color: white;
257
256
  border: 1px solid #ccc;
258
- border-radius: var(--ext-dropdown-border-radius);
257
+ border-radius: var(--ext-dropdown-border-radius, 20px);
259
258
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
260
259
  transition: opacity 0.3s ease, max-height 0.2s ease;
261
260
  opacity: 1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ehscan-react-components",
3
- "version": "0.1.27",
3
+ "version": "0.1.28",
4
4
  "description": "components",
5
5
  "main": "dist/Components.js",
6
6
  "types": "dist/Components.d.ts",