@harjs/react-ui 1.1.10 → 1.1.11

package/dist/assets/css/components/form/select/options.css

@@ -1,4 +1,4 @@
-.ar-select-options {
+.har-select-options {
   visibility: hidden;
   opacity: 0;
   position: absolute;
@@ -13,108 +13,129 @@
     visibility 250ms,
     opacity 250ms,
     transform 250ms ease-in-out;
-}
-.ar-select-options.top {
-  box-shadow: 0 5px 15px -2.5px var(--black-10);
-}
-.ar-select-options.bottom {
-  box-shadow: 0 -5px 15px -2.5px var(--black-10);
-}
 
-.ar-select-options > .search-field {
-  padding: 0.5rem;
-  border-bottom: solid 1px var(--gray-200);
-}
+  &.top {
+    box-shadow: 0 5px 15px -2.5px var(--black-10);
+  }
 
-.ar-select-options > ul {
-  width: 100%;
-  max-height: calc(var(--input-height) * 5);
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-.ar-select-options > ul > li {
-  display: flex;
-  align-items: center;
-  gap: 0 0.5rem;
-  padding: 0 1rem;
-  height: var(--input-height);
-  cursor: pointer;
-}
-.ar-select-options > ul > li:hover {
-  background-color: var(--gray-200);
-}
-.ar-select-options > ul > li.selectedItem {
-  /* background-color: rgba(var(--success-rgb), 0.1); */
-}
-.ar-select-options > ul > li.navigate-with-arrow-keys {
-  background-color: var(--gray-100);
-}
+  &.bottom {
+    box-shadow: 0 -5px 15px -2.5px var(--black-10);
+  }
 
-.ar-select-options > .no-options-field,
-.ar-select-options > ul > li > .no-options-field {
-  width: 100%;
-  padding: 0.5rem 1rem;
-}
-.ar-select-options > ul > li > .no-options-field {
-  padding: 0 !important;
-}
-.ar-select-options > .no-options-field > .text,
-.ar-select-options > ul > li > .no-options-field > .text {
-  color: var(--gray-500);
-}
-.ar-select-options > .no-options-field > .add-item,
-.ar-select-options > ul > li > .no-options-field > .add-item {
-  display: flex;
-  align-items: center;
-  position: relative;
-  background-color: rgba(var(--primary-rgb), 0.05);
-  padding: 0.25rem 0.5rem;
-  border-radius: var(--radius-4);
-  border-left: solid 2px var(--primary);
-  color: var(--primary);
-  cursor: pointer;
-}
-.ar-select-options > .no-options-field > .add-item::before,
-.ar-select-options > ul > li > .no-options-field > .add-item::before {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  left: 0;
-  content: "";
-  border: solid 5px transparent;
-  border-left-color: var(--primary);
-}
-.ar-select-options > .no-options-field > .add-item > .plus,
-.ar-select-options > ul > li > .no-options-field > .add-item > .plus {
-  display: inline-block;
-  position: relative;
-  background-color: var(--primary);
-  min-width: 1rem;
-  height: 1rem;
-  margin-right: 0.25rem;
-  border-radius: var(--radius-full);
-  color: var(--white-100);
-  text-align: center;
-  line-height: 1rem;
-}
+  > .search-field {
+    padding: 0.5rem;
+    border-bottom: solid 1px var(--gray-200);
+  }
 
-/* .ar-select-options:is(.opened) {
-  visibility: visible;
-  opacity: 1;
-  transform: scaleY(1);
-}
-.ar-select-options:is(.closed) {
-  visibility: hidden;
-  opacity: 0;
-  transform: scaleY(0.8);
-  height: 0;
-}
+  > .no-options-field {
+    width: 100%;
+    padding: 0.5rem 1rem;
+
+    > .text {
+      color: var(--gray-500);
+    }
+
+    > .add-item {
+      display: flex;
+      align-items: center;
+      position: relative;
+      background-color: rgba(var(--primary-rgb), 0.05);
+      padding: 0.25rem 0.5rem;
+      border-radius: var(--radius-4);
+      border-left: solid 2px var(--primary);
+      color: var(--primary);
+      cursor: pointer;
+
+      &::before {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 0;
+        content: "";
+        border: solid 5px transparent;
+        border-left-color: var(--primary);
+      }
+
+      > .plus {
+        display: inline-block;
+        position: relative;
+        background-color: var(--primary);
+        min-width: 1rem;
+        height: 1rem;
+        margin-right: 0.25rem;
+        border-radius: var(--radius-full);
+        color: var(--white-100);
+        text-align: center;
+        line-height: 1rem;
+      }
+    }
+  }
+
+  > ul {
+    width: 100%;
+    max-height: calc(var(--input-height) * 5);
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    > li {
+      display: flex;
+      align-items: center;
+      gap: 0 0.5rem;
+      padding: 0 1rem;
+      height: var(--input-height);
+      cursor: pointer;
+
+      &:hover {
+        background-color: var(--gray-200);
+      }
+
+      &.navigate-with-arrow-keys {
+        background-color: var(--gray-100);
+      }
+
+      > .no-options-field {
+        width: 100%;
+        padding: 0;
+
+        > .text {
+          color: var(--gray-500);
+        }
+
+        > .add-item {
+          display: flex;
+          align-items: center;
+          position: relative;
+          background-color: rgba(var(--primary-rgb), 0.05);
+          padding: 0.25rem 0.5rem;
+          border-radius: var(--radius-4);
+          border-left: solid 2px var(--primary);
+          color: var(--primary);
+          cursor: pointer;
+
+          &::before {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            left: 0;
+            content: "";
+            border: solid 5px transparent;
+            border-left-color: var(--primary);
+          }
 
-.ar-select-options.top:is(.opened, .closed),
-.ar-select-options.top:is(.opened, .closed) {
-  transform-origin: top;
+          > .plus {
+            display: inline-block;
+            position: relative;
+            background-color: var(--primary);
+            min-width: 1rem;
+            height: 1rem;
+            margin-right: 0.25rem;
+            border-radius: var(--radius-full);
+            color: var(--white-100);
+            text-align: center;
+            line-height: 1rem;
+          }
+        }
+      }
+    }
+  }
 }
-.ar-select-options.bottom:is(.opened, .closed),
-.ar-select-options.bottom:is(.opened, .closed) {
-  transform-origin: bottom;
-} */

package/dist/assets/css/components/form/select/radius.css

@@ -0,0 +1,45 @@
+.har-select {
+  > .wrapper {
+    > .selections {
+      &.radius-0 {
+        border-radius: var(--radius-0);
+      }
+
+      &.radius-2 {
+        border-radius: var(--radius-2);
+      }
+
+      &.radius-4 {
+        border-radius: var(--radius-4);
+      }
+
+      &.radius-6 {
+        border-radius: var(--radius-6);
+      }
+
+      &.radius-8 {
+        border-radius: var(--radius-8);
+      }
+
+      &.radius-12 {
+        border-radius: var(--radius-12);
+      }
+
+      &.radius-16 {
+        border-radius: var(--radius-16);
+      }
+
+      &.radius-20 {
+        border-radius: var(--radius-20);
+      }
+
+      &.radius-40 {
+        border-radius: var(--radius-40);
+      }
+
+      &.radius-full {
+        border-radius: var(--radius-full);
+      }
+    }
+  }
+}

package/dist/assets/css/components/form/select/size.css

@@ -0,0 +1,35 @@
+.har-select {
+  > .wrapper {
+    > .selections {
+      &.size-xs {
+        min-height: 2rem !important;
+        font-size: 0.75rem;
+      }
+
+      &.size-sm {
+        min-height: 2.25rem !important;
+        font-size: 0.875rem;
+      }
+
+      &.size-md {
+        min-height: 2.5rem !important;
+        font-size: 0.875rem;
+      }
+
+      &.size-lg {
+        min-height: 2.75rem !important;
+        font-size: 1rem;
+      }
+
+      &.size-xl {
+        min-height: 3rem !important;
+        font-size: 1rem;
+      }
+
+      &.size-2xl {
+        min-height: 3.25rem !important;
+        font-size: 1.25rem;
+      }
+    }
+  }
+}

package/dist/assets/css/components/form/select/styles.css

@@ -1,11 +1,14 @@
+@import url("./color.css");
 @import url("./options.css");
+@import url("./radius.css");
+@import url("./size.css");
 
-.ar-select-wrapper {
+.har-select-wrapper {
   position: relative;
   width: 100%;
   user-select: none;
 
-  > .ar-select {
+  > .har-select {
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
@@ -77,11 +80,11 @@
       }
     }
 
-    > .ar-input-wrapper {
+    > .har-input-wrapper {
       white-space: nowrap;
       text-overflow: ellipsis;
 
-      > .ar-input {
+      > .har-input {
         white-space: nowrap;
         text-overflow: ellipsis;
 
@@ -148,7 +151,6 @@
         top: calc(var(--input-height) / 2);
         transform: translateY(-50%);
         right: 2rem;
-        background-color: var(--black-30);
         backdrop-filter: blur(5px);
         width: 1rem;
         height: 1rem;
@@ -169,7 +171,7 @@
 
         &::before {
           content: "x";
-          color: var(--white-100);
+          color: var(--red-500);
           font-size: 0.75rem;
         }
       }

package/dist/assets/css/components/form/select/templates/color.template.css

@@ -0,0 +1,62 @@
+&.__COLOR__ {
+  &.filled {
+    background-color: var(--__COLOR__-100);
+    border: var(--stroke-1) solid var(--__COLOR__-300);
+
+    &:focus {
+      border: var(--stroke-1) solid var(--__COLOR__-500);
+    }
+
+    &::placeholder {
+      color: var(--__COLOR__-400);
+    }
+  }
+
+  &.surface-borderless {
+    background-color: var(--__COLOR__-100);
+
+    &:focus {
+      background-color: transparent;
+      box-shadow: 0 0 0 2.5px var(--__COLOR__-200);
+    }
+
+    &::placeholder {
+      color: var(--__COLOR__-400);
+    }
+  }
+
+  &.outlined {
+    background-color: transparent;
+    border: var(--stroke-1) solid var(--__COLOR__-300);
+
+    &:focus {
+      box-shadow: 0 0 0 2.5px var(--__COLOR__-200);
+    }
+
+    &::placeholder {
+      color: var(--__COLOR__-400);
+    }
+  }
+
+  &.dashed {
+    background-color: transparent;
+    border: var(--stroke-1) dashed var(--__COLOR__-300);
+
+    &:focus {
+      box-shadow: 0 0 0 2.5px var(--__COLOR__-200);
+    }
+
+    &::placeholder {
+      color: var(--__COLOR__-400);
+    }
+  }
+
+  &.borderless {
+    background-color: transparent;
+    border: var(--stroke-1) solid transparent;
+
+    &::placeholder {
+      color: var(--__COLOR__-400);
+    }
+  }
+}

package/dist/assets/css/components/form/select/templates/radius.template.css

@@ -0,0 +1,3 @@
+&.radius-__RADIUS__ {
+  border-radius: var(--radius-__RADIUS__);
+}

package/dist/assets/css/components/form/select/templates/size.template.css

@@ -0,0 +1,4 @@
+&.__SIZE__ {
+  min-height: __SIZE_NUMBER__ !important;
+  font-size: __FONT_SIZE__;
+}

package/dist/components/form/checkbox/index.js

@@ -7,9 +7,7 @@ const Checkbox = forwardRef(({ label, variant, color = "blue", border = { radius
     const _checkbox = useRef(null);
     const _checkboxClassName = ["har-checkbox"];
     const _innerRef = useRef(null);
-    _checkboxClassName.push(...Utils.GetClassName(variant ?? "outlined", undefined, validation?.text ? "red" : (color ?? "blue"), border ?? { radius: "4" }, undefined, undefined, attributes.className));
-    if (size)
-        _checkboxClassName.push(size);
+    _checkboxClassName.push(...Utils.GetClassName(variant ?? "outlined", undefined, validation?.text ? "red" : (color ?? "blue"), border ?? { radius: "4" }, size, undefined, attributes.className));
     if (attributes.disabled)
         _checkboxClassName.push("disabled");
     // hooks

package/dist/components/form/input/index.js

@@ -100,7 +100,7 @@ const BaseInput = forwardRef(({ children, variant = "outlined", color = "gray",
             setLabelWidth(width);
         }
     }, [value, attributes.placeholder]);
-    return (React.createElement("div", { className: _wrapperClassName.map((c) => c).join(" ") },
+    return (React.createElement("div", { className: _wrapperClassName.map((c) => c).join(" "), ...(validation?.text ? { style: { marginBottom: "var(--space-20)" } } : {}) },
         renderAddon("before"),
         React.createElement("div", { className: "har-input" },
             renderIcon() && React.createElement("div", { className: "icon-element" }, renderIcon()),

package/dist/components/form/select/index.js

@@ -6,7 +6,9 @@ import Chip from "../../data-display/chip";
 import Checkbox from "../checkbox";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import ReactDOM from "react-dom";
-const Select = ({ variant = "outlined", status, color = "gray", border = { radius: "4" }, style, options, value, onChange, onSearch, onClick, onCreate, multiple, placeholder, validation, upperCase, disabled, readOnly, config = { clear: true, validation: { text: "visible" } }, }) => {
+import Button from "../button";
+const Select = ({ variant = "outlined", status, color = "gray", border = { radius: "4" }, size, style, options, value, onChange, onSearch, onClick, onCreate, multiple, placeholder, validation, upperCase, disabled, readOnly, config = { clear: true, validation: { text: "visible" } }, }) => {
+    const _mWrapperClassName = ["wrapper"];
     const _selectionClassName = ["selections"];
     // refs
     const _arSelect = useRef(null);
@@ -28,7 +30,7 @@ const Select = ({ variant = "outlined", status, color = "gray", border = { radiu
     // options referans kararlılığı için JSON key
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const optionsKey = useMemo(() => JSON.stringify(options), [options]);
-    _selectionClassName.push(...Utils.GetClassName(variant, undefined, validation?.text ? "red" : "gray", border, undefined, undefined, undefined));
+    _selectionClassName.push(...Utils.GetClassName(variant, undefined, validation?.text ? "red" : "gray", border, size, undefined, undefined));
     // methods
     const handleClickOutSide = (event) => {
         const target = event.target;
@@ -188,7 +190,6 @@ const Select = ({ variant = "outlined", status, color = "gray", border = { radiu
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [optionsOpen]);
-    // arama metni değiştiğinde filtrele
     useEffect(() => {
         if (searchText.length > 0 && onSearch) {
             onSearch(searchText);
@@ -227,9 +228,9 @@ const Select = ({ variant = "outlined", status, color = "gray", border = { radiu
         });
     }, [navigationIndex]);
     const handleBlur = () => setOptionsOpen(false);
-    return (React.createElement("div", { ref: _arSelect, className: "ar-select-wrapper" },
-        React.createElement("div", { ref: _multipleInput, className: "ar-select" },
-            multiple ? (React.createElement("div", { className: "wrapper" },
+    return (React.createElement("div", { ref: _arSelect, className: "har-select-wrapper" },
+        React.createElement("div", { ref: _multipleInput, className: "har-select" },
+            multiple ? (React.createElement("div", { className: _mWrapperClassName.map((c) => c).join(" ") },
                 React.createElement("div", { ...(value.length > 0
                         ? {
                             style: {
@@ -249,13 +250,13 @@ const Select = ({ variant = "outlined", status, color = "gray", border = { radiu
                         onClick && onClick();
                         setOptionsOpen((prev) => !prev);
                     } },
-                    React.createElement("div", { className: "items" }, value.map((_value, index) => (React.createElement(Chip, { key: index, variant: status?.selected?.variant || "filled", color: status?.selected?.color || status?.color, text: _value.text }))))),
+                    React.createElement("div", { className: "items" }, value.map((_value, index) => (React.createElement(Chip, { key: index, variant: status?.selected?.variant || "filled", color: status?.selected?.color || status?.color, text: _value.text, size: size }))))),
                 React.createElement("span", { ref: _placeholder, className: `placeholder ${value.length > 0 ? "visible" : "hidden"}`, onClick: () => {
                         onClick && onClick();
                         setOptionsOpen((prev) => !prev);
                     } },
                     validation ? "* " : "",
-                    placeholder))) : (React.createElement(Input, { ref: _singleInput, style: { ...style, paddingRight: config.clear === false ? "1.5rem" : "3.5rem" }, variant: variant, color: !Utils.IsNullOrEmpty(validation?.text) ? "red" : color, border: { radius: border.radius }, value: singleInputText, onClick: () => {
+                    placeholder))) : (React.createElement(Input, { ref: _singleInput, style: { ...style }, variant: variant, color: !Utils.IsNullOrEmpty(validation?.text) ? "red" : color, border: { radius: border.radius }, size: size, value: singleInputText, onClick: () => {
                     onClick && onClick();
                     setOptionsOpen((prev) => !prev);
                 }, onChange: (event) => {
@@ -270,25 +271,33 @@ const Select = ({ variant = "outlined", status, color = "gray", border = { radiu
                 }, placeholder: placeholder, validation: {
                     ...validation,
                     text: config.validation?.text === "visible" ? validation?.text : "",
-                }, disabled: disabled, readOnly: readOnly })),
-            React.createElement("div", { className: "buttons" },
-                config?.clear === true && (React.createElement("span", { className: `button-clear ${!disabled && (multiple ? value.length > 0 : value) ? "opened" : "closed"}`, onClick: (event) => {
-                        if (disabled)
-                            return;
-                        event.stopPropagation();
-                        handleCleanSelection();
-                    } })),
-                React.createElement("span", { className: `angel-down ${!disabled && optionsOpen ? "opened" : "closed"}`, onClick: (event) => {
-                        if (disabled)
-                            return;
-                        onClick && onClick();
-                        event.stopPropagation();
-                        setOptionsOpen((prev) => !prev);
-                    } })),
+                }, disabled: disabled, readOnly: readOnly },
+                config?.clear === true && (React.createElement(Input.AddonAfter, null,
+                    React.createElement(Button, { variant: "borderless", color: "red", border: border, size: size, shape: "square", icon: {
+                            element: (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "var(--red-500)", viewBox: "0 0 256 256" },
+                                React.createElement("path", { d: "M204.24,195.76a6,6,0,1,1-8.48,8.48L128,136.49,60.24,204.24a6,6,0,0,1-8.48-8.48L119.51,128,51.76,60.24a6,6,0,0,1,8.48-8.48L128,119.51l67.76-67.75a6,6,0,0,1,8.48,8.48L136.49,128Z" }))),
+                        }, onClick: (event) => {
+                            if (disabled)
+                                return;
+                            event.stopPropagation();
+                            handleCleanSelection();
+                        } }))),
+                React.createElement(Input.AddonAfter, null,
+                    React.createElement(Button, { variant: "borderless", color: color, border: border, size: size, shape: "square", icon: {
+                            element: optionsOpen ? (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "var(--black-100)", viewBox: "0 0 256 256" },
+                                React.createElement("path", { d: "M212.24,164.24a6,6,0,0,1-8.48,0L128,88.49,52.24,164.24a6,6,0,0,1-8.48-8.48l80-80a6,6,0,0,1,8.48,0l80,80A6,6,0,0,1,212.24,164.24Z" }))) : (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "var(--black-100)", viewBox: "0 0 256 256" },
+                                React.createElement("path", { d: "M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z" }))),
+                        }, onClick: (event) => {
+                            if (disabled)
+                                return;
+                            onClick && onClick();
+                            event.stopPropagation();
+                            setOptionsOpen((prev) => !prev);
+                        } })))),
             multiple && validation && config.validation?.text === "visible" && (React.createElement("span", { className: "har-validation-text" }, validation.text))),
         !disabled &&
             optionsOpen &&
-            ReactDOM.createPortal(React.createElement("div", { ref: _options, className: "ar-select-options" },
+            ReactDOM.createPortal(React.createElement("div", { ref: _options, className: "har-select-options" },
                 multiple && (React.createElement("div", { className: "search-field" },
                     React.createElement(Input, { ref: _searchField, variant: "outlined", placeholder: "Search...", value: searchText, onChange: (event) => setSearchText(event.target.value), onClick: (event) => event.stopPropagation() }))),
                 filteredOptions.length > 0 ? (React.createElement("ul", null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@harjs/react-ui",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "publishConfig": {
     "access": "public"
   },