triafly-ui-kit 1.0.114 → 1.0.116
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.
- package/dist/assets/src/components/Ui/Checkbox/Checkbox.css +1 -1
- package/dist/assets/src/components/Ui/DropdownInput/DropdownInput.css +1 -1
- package/dist/assets/src/components/Ui/DropdownMenu/DropdownMenu.css +1 -1
- package/dist/assets/src/components/Ui/DropdownSearchInput/DropdownSearchInput.css +1 -1
- package/dist/assets/src/components/Ui/SearchInput/SearchInput.css +1 -1
- package/dist/assets/src/components/Ui/TextInput/TextInput.css +1 -1
- package/dist/assets/src/components/Ui/TextareaInput/TextareaInput.css +1 -1
- package/dist/assets/src/components/Ui/Tooltip/Tooltip.css +1 -1
- package/dist/components/Ui/DropdownInput/DropdownInput.js +39 -37
- package/dist/components/Ui/DropdownMenu/DropdownMenu.js +12 -11
- package/dist/components/Ui/DropdownMenu/DropdownMenu.stories.js +27 -5
- package/dist/components/Ui/DropdownSearchInput/DropdownSearchInput.stories.js +23 -13
- package/dist/components/Ui/DropdownSearchInput/DropdownSuggestions.js +61 -54
- package/dist/components/Ui/DropdownSearchInput/useDropdownSearchInput.js +4 -1
- package/dist/components/Ui/DropdownSearchInput/useMultipleSelect.js +24 -20
- package/dist/components/Ui/TextInput/TextInput.js +49 -47
- package/dist/components/Ui/TextInput/TextInput.stories.js +19 -18
- package/dist/main.d.ts +3 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.checkbox-container{display:flex;flex-direction:column;align-items:flex-start;width:fit-content;position:relative}.checkbox-container:not(:last-child){margin:0 0 8px}.checkbox-container.has-frame{box-shadow:0 0 0 1px var(--color-border-primary-default);border-radius:8px;height:44px;justify-content:center;padding:0 8px}.checkbox-container .checkbox input[type=checkbox]{position:absolute;opacity:0;cursor:pointer}.checkbox-container .checkbox{display:inline-flex;align-items:center;line-height:16.8px;cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox-container .checkbox.disabled{opacity:50%;cursor:default}.checkbox-container .checkbox .checkmark{display:flex;justify-content:center;align-items:center;width:20px;height:20px;border:1px solid var(--color-border-primary-default);border-radius:4px;margin:0 8px 0 0;transition:all .1s ease}.checkbox-container .checkbox input[type=checkbox]:checked+.checkmark{background-color:var(--color-bg-brand-default);border-color:var(--color-bg-brand-default)}.checkbox-container .checkbox input[type=checkbox]:checked+.checkmark:after{content:"";display:block;width:100%;height:100%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M11.8192 1.05614C12.1853 1.42227 12.1853 2.01586 11.8191 2.38197L5.25665 8.94417C4.89054 9.31026 4.29698 9.31027 3.93087 8.94418L0.649617 5.66323C0.283484 5.29713 0.283458 4.70354 0.649558 4.3374C1.01566 3.97127 1.60925 3.97124 1.97538 4.33734L4.59374 6.95546L10.4934 1.05611C10.8595 0.690002 11.4531 0.690016 11.8192 1.05614Z' fill='white'/></svg>");background-repeat:no-repeat;background-position:center}.checkbox-container .checkbox.indeterminate .checkmark{background-color:var(--color-bg-brand-default);border-color:var(--color-bg-brand-default)}.checkbox-container .checkbox.indeterminate .checkmark:after{content:"";display:block;background-color:var(--base-light);width:10px;height:2.5px;border-radius:1px}
|
|
1
|
+
.checkbox-container{display:flex;flex-direction:column;align-items:flex-start;width:fit-content;position:relative}.checkbox-container:not(:last-child){margin:0 0 8px}.checkbox-container.has-frame{box-shadow:0 0 0 1px var(--color-border-primary-default);border-radius:8px;height:44px;justify-content:center;padding:0 8px}.checkbox-container .checkbox input[type=checkbox]{position:absolute;top:0;left:0;margin:0;opacity:0;cursor:pointer;width:100%;height:100%}.checkbox-container .checkbox{display:inline-flex;align-items:center;line-height:16.8px;cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox-container .checkbox.disabled{opacity:50%;cursor:default}.checkbox-container .checkbox .checkmark{display:flex;justify-content:center;align-items:center;width:20px;height:20px;border:1px solid var(--color-border-primary-default);border-radius:4px;margin:0 8px 0 0;transition:all .1s ease}.checkbox-container .checkbox input[type=checkbox]:checked+.checkmark{background-color:var(--color-bg-brand-default);border-color:var(--color-bg-brand-default)}.checkbox-container .checkbox input[type=checkbox]:checked+.checkmark:after{content:"";display:block;width:100%;height:100%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M11.8192 1.05614C12.1853 1.42227 12.1853 2.01586 11.8191 2.38197L5.25665 8.94417C4.89054 9.31026 4.29698 9.31027 3.93087 8.94418L0.649617 5.66323C0.283484 5.29713 0.283458 4.70354 0.649558 4.3374C1.01566 3.97127 1.60925 3.97124 1.97538 4.33734L4.59374 6.95546L10.4934 1.05611C10.8595 0.690002 11.4531 0.690016 11.8192 1.05614Z' fill='white'/></svg>");background-repeat:no-repeat;background-position:center}.checkbox-container .checkbox.indeterminate .checkmark{background-color:var(--color-bg-brand-default);border-color:var(--color-bg-brand-default)}.checkbox-container .checkbox.indeterminate .checkmark:after{content:"";display:block;background-color:var(--base-light);width:10px;height:2.5px;border-radius:1px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.dropdown-input{display:flex;flex-direction:column;min-width:200px}.dropdown-input.inline{flex-direction:row;justify-content:space-between;width:100%}.dropdown-input.inline>div{flex-grow:1}.dropdown-input.inline label{padding:15px 0 0;margin:0 16px 0 0}.dropdown-input.sm .input-box{height:36px}.dropdown-input__native{display:none}.dropdown-input label{margin:0 0 8px}.dropdown-input .input-box{position:relative;border:1px solid var(--color-border-primary-default);border-radius:8px;padding:10px 8px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;outline:none;height:44px;background-color:var(--color-bg-neutral-basic-default)}.dropdown-input .input-box.opened{box-shadow:inset 0 0 0 1px var(--color-border-primary-default)}.dropdown-input .input-box.disabled{background-color:var(--color-bg-
|
|
1
|
+
.dropdown-input{display:flex;flex-direction:column;min-width:200px}.dropdown-input.inline{flex-direction:row;justify-content:space-between;width:100%}.dropdown-input.inline>div{flex-grow:1}.dropdown-input.inline label{padding:15px 0 0;margin:0 16px 0 0}.dropdown-input.sm .input-box{height:36px}.dropdown-input__native{display:none}.dropdown-input label{margin:0 0 8px}.dropdown-input .input-box{position:relative;border:1px solid var(--color-border-primary-default);border-radius:8px;padding:10px 8px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;outline:none;height:44px;background-color:var(--color-bg-neutral-basic-default)}.dropdown-input .input-box.opened{box-shadow:0 0 0 1px var(--color-border-primary-default),inset 0 0 0 1px var(--color-border-primary-default)}.dropdown-input .input-box.disabled{background-color:var(--color-bg-neutral-light-default);pointer-events:none}.dropdown-input .input-box.invalid{border-color:var(--color-border-error-default)}.dropdown-input .input-box.invalid:focus,.dropdown-input .input-box.invalid:active,.dropdown-input .input-box.invalid.opened{box-shadow:0 0 0 1px var(--color-border-error-default),inset 0 0 0 1px var(--color-border-error-default)}.dropdown-input .input-box.invalid>span{color:var(--color-border-error-default)}.dropdown-input .input-box.invalid svg *{fill:var(--color-border-error-default)}.dropdown-input .input-box.success{border-color:var(--color-border-success-default)}.dropdown-input .input-box.success:focus,.dropdown-input .input-box.success:active,.dropdown-input .input-box.success.opened{box-shadow:0 0 0 1px var(--color-border-success-default),inset 0 0 0 1px var(--color-border-success-default)}.dropdown-input .input-box.success>span{color:var(--color-border-success-default)}.dropdown-input .input-box.success svg *{fill:var(--color-border-success-default)}.dropdown-input .input-box .placeholder,.dropdown-input .input-box .input-value,.dropdown-input .input-box .options li{color:var(--color-text-primary-default)}.dropdown-input .input-box .caret *{fill:var(--color-icon-secondary-default)}.dropdown-input .helper-text{font-size:12px;color:var(--color-text-secondary-default);margin:8px 0 0;display:flex;align-items:center}.dropdown-input .helper-text.error{color:var(--color-border-error-default)}.dropdown-input .helper-text.error .icon{margin:0 4px 0 0}.dropdown-input .helper-text.error .icon>*{fill:var(--color-border-error-default)}.dropdown-portal{background-color:var(--color-bg-neutral-basic-default);border-radius:8px;border:1px solid var(--color-border-primary-default);box-shadow:0 2px 8px #00000026;overflow-y:auto}.dropdown-portal .options{list-style:none;padding:0;margin:0}.dropdown-portal .options li{padding:8px 12px;min-height:36px;cursor:pointer;display:flex;align-items:center}.dropdown-portal .options li:hover{background-color:var(--color-bg-neutral-lightest-default)}.dropdown-portal .options li.selected,.dropdown-portal .options li.selected:hover{background-color:var(--color-bg-brand_lightest-default)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.dropdowm-menu{position:relative;width:20px;height:20px}.dropdowm-menu.open{z-index:5}.dropdowm-menu.open .menu-list{display:flex}.dropdowm-menu.open .fader{display:block}.dropdowm-menu .menu-trigger{width:20px;height:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.dropdowm-menu .menu-trigger .dots{position:relative}.dropdowm-menu .menu-trigger .dots,.dropdowm-menu .menu-trigger .dots:before,.dropdowm-menu .menu-trigger .dots:after{display:block;width:3px;height:3px;border-radius:50%;background-color:var(--color-icon-brand-default)}.dropdowm-menu .menu-trigger .dots:before,.dropdowm-menu .menu-trigger .dots:after{content:"";position:absolute}.dropdowm-menu .menu-trigger .dots:before{top:5px}.dropdowm-menu .menu-trigger .dots:after{bottom:5px}.dropdowm-menu .fader{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--color-fader)}.dropdowm-menu .menu-list{box-sizing:border-box;display:none;position:fixed;bottom:0;border-radius:16px 16px 0 0;width:100%;height:auto;left:0;flex-direction:column;padding:8px;margin:0;background-color:var(--color-bg-neutral-basic-default);box-shadow:0 0 10px -2px var(--
|
|
1
|
+
.dropdowm-menu{position:relative;width:20px;height:20px}.dropdowm-menu.open{z-index:5}.dropdowm-menu.open .menu-list{display:flex}.dropdowm-menu.open .fader{display:block}.dropdowm-menu .menu-trigger{width:20px;height:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.dropdowm-menu .menu-trigger .dots{position:relative}.dropdowm-menu .menu-trigger .dots,.dropdowm-menu .menu-trigger .dots:before,.dropdowm-menu .menu-trigger .dots:after{display:block;width:3px;height:3px;border-radius:50%;background-color:var(--color-icon-brand-default)}.dropdowm-menu .menu-trigger .dots:before,.dropdowm-menu .menu-trigger .dots:after{content:"";position:absolute}.dropdowm-menu .menu-trigger .dots:before{top:5px}.dropdowm-menu .menu-trigger .dots:after{bottom:5px}.dropdowm-menu .fader{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--color-fader)}.dropdowm-menu .menu-list{box-sizing:border-box;display:none;position:fixed;bottom:0;border-radius:16px 16px 0 0;width:100%;height:auto;left:0;flex-direction:column;padding:8px;margin:0;background-color:var(--color-bg-neutral-basic-default);box-shadow:0 0 10px -2px var(--effect-shadow-XL, rgba(18, 18, 18, .15))}.dropdowm-menu .menu-list:before{content:"";display:block;width:24px;height:2px;margin:0 auto 20px;background-color:var(--color-border-primary-default)}.dropdowm-menu .menu-list .menu-item{min-height:44px;padding:0 8px;display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.dropdowm-menu .menu-list .menu-item.danger *{color:var(--color-text-error-default)!important;fill:var(--color-text-error-default)}.dropdowm-menu .menu-list .menu-item svg{width:20px;flex-shrink:0;margin:0 8px 0 0}.dropdowm-menu .menu-list .menu-item svg *{color:var(--color-text-primary-default)}.dropdowm-menu .menu-list .menu-item .label{white-space:nowrap;color:var(--color-text-primary-default)}@media screen and (min-width: 834px){.dropdowm-menu.open .fader{display:none}.dropdowm-menu .menu-list{position:absolute;border-radius:8px;box-shadow:0 0 10px -2px var(--effect-shadow-XL);border:none;left:unset;right:unset;top:unset;bottom:unset;height:unset;width:auto}.dropdowm-menu .menu-list.outlined{box-shadow:0 0 0 1px var(--color-border-primary-default)}.dropdowm-menu .menu-list:before{display:none}.dropdowm-menu .menu-list[data-x-fit=right]{right:0}.dropdowm-menu .menu-list[data-x-fit=center]{transform:translate(calc(-50% + 10px))}.dropdowm-menu .menu-list[data-x-fit=left]{left:0}.dropdowm-menu .menu-list[data-y-fit=top]{bottom:100%;margin:0 0 5px}.dropdowm-menu .menu-list[data-y-fit=bottom]{top:100%;margin:5px 0 0}.dropdowm-menu .menu-list .menu-item{min-height:36px;border-radius:6px}.dropdowm-menu .menu-list .menu-item:hover{background-color:var(--color-bg-neutral-lightest-default)}.dropdowm-menu .menu-list .menu-item:active{background-color:var(--color-bg-brand_lightest-default)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.dropdown-search-input-container{position:relative;width:100%;display:flex;flex-direction:column;gap:8px;min-width:200px}.dropdown-search-input{display:flex;justify-content:space-between;align-items:center;padding:0 8px;background-color:var(--color-bg-neutral-basic-default);border:1px solid var(--color-border-primary-default);border-radius:8px;cursor:pointer;min-height:40px;flex-direction:row}.dropdown-search-input:hover{box-shadow:inset 0 0 0 1px var(--color-border-primary-default)}.dropdown-search-input:focus{outline:none;border-color:var(--color-text-brand-default)}.dropdown-search-input--expanded{box-shadow:inset 0 0 0 1px var(--color-border-primary-default)}.dropdown-search-input--disabled{background-color:var(--color-bg-
|
|
1
|
+
.dropdown-search-input-container{position:relative;width:100%;display:flex;flex-direction:column;gap:8px;min-width:200px}.dropdown-search-input{display:flex;justify-content:space-between;align-items:center;padding:0 8px;background-color:var(--color-bg-neutral-basic-default);border:1px solid var(--color-border-primary-default);border-radius:8px;cursor:pointer;min-height:40px;flex-direction:row}.dropdown-search-input:hover{box-shadow:0 0 0 1px var(--color-border-primary-default),inset 0 0 0 1px var(--color-border-primary-default)}.dropdown-search-input:focus{outline:none;border-color:var(--color-text-brand-default)}.dropdown-search-input--expanded{box-shadow:inset 0 0 0 1px var(--color-border-primary-default)}.dropdown-search-input--disabled{background-color:var(--color-bg-neutral-light-default);cursor:not-allowed;opacity:.5}.dropdown-search-input--error{border-color:var(--color-border-error-default)}.dropdown-search-input__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-search-input__indicators{display:flex;align-items:center;gap:8px}.dropdown-search-input__indicators *{fill:var(--color-icon-secondary-default)}.dropdown-search-input__indicators:hover *{fill:var(--color-icon-secondary-hover)}.dropdown-search-input__clear{background:none;border:none;font-size:18px;cursor:pointer;display:flex;align-items:center;color:var(--color-border-primary-default)}.dropdown-search-input__caret{color:var(--color-border-primary-default);width:16px;height:16px}.dropdown-search-input-suggestions-portal{border:1px solid var(--color-border-primary-default);border-radius:8px;box-shadow:0 0 10px -2px var(--effectseffect-shadow-XL);padding:8px;background-color:var(--color-bg-neutral-basic-default)}.dropdown-search-input-suggestions-portal .text-input.clearable input{padding-right:0!important}.dropdown-search-input-suggestions-portal__header{margin:0 0 8px}.dropdown-search-input-suggestions-portal__input-search{width:100%}.dropdown-search-input-suggestions-list{list-style:none;margin:0;padding:0;max-height:250px;overflow-y:auto}.dropdown-search-input-suggestions-list__item{padding:8px;cursor:pointer;border-radius:6px;display:flex;align-items:center}.dropdown-search-input-suggestions-list__item:hover{background-color:var(--color-bg-neutral-lightest-default)}.dropdown-search-input-suggestions-list__item:last-child{border-bottom:none}.dropdown-search-input-suggestions-list__item--selected,.dropdown-search-input-suggestions-list__item--selected:hover{font-weight:600;background-color:var(--color-bg-brand_lightest-default)}.dropdown-search-input-suggestions-list__empty{padding:16px;text-align:center;color:var(--color-text-secondary-default);font-style:italic;cursor:default}.dropdown-search-input-suggestions-list__empty:hover{background-color:transparent;cursor:default}.dropdown-search-input__error-message{color:var(--color-text-error-default);font-size:12px;margin-top:4px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.search-input{border:1px solid var(--color-border-primary-default);border-radius:22px;margin:0 12px 0 0}.search-input:focus-within{border:2px solid var(--color-border-primary-default);margin:0 11px 0 -1px}.search-input:focus-within .text-input .input-container input{margin:-1px}.search-input .text-input .input-container input{border:none}.search-input .text-input .input-container input:focus{outline:none}.search-input__label{margin:0 0 8px}.search-input .guess-box{padding:0 12px 12px}.search-input .guess-box ul{border-top:1px solid var(--color-border-primary-default);padding:12px 0 0}.search-input .guess-box ul li{min-height:36px;display:flex;align-items:center;padding:0 8px;cursor:pointer}.search-input .guess-box ul li:hover{background-color:var(--color-bg-innerisland-default)}.dropdown-input-test{position:relative}.dropdown-input-test .caret{display:none;fill:var(--color-icon-secondary-default);position:absolute;bottom:9px;right:10px}.dropdown-input-test .input-box{position:relative;cursor:pointer;display:flex;justify-content:space-between;align-items:center;outline:none;background-color:var(--color-bg-neutral-basic-default)}.dropdown-input-test .input-box.disabled{background-color:var(--color-bg-
|
|
1
|
+
.search-input{border:1px solid var(--color-border-primary-default);border-radius:22px;margin:0 12px 0 0}.search-input:focus-within{border:2px solid var(--color-border-primary-default);margin:0 11px 0 -1px}.search-input:focus-within .text-input .input-container input{margin:-1px}.search-input .text-input .input-container input{border:none}.search-input .text-input .input-container input:focus{outline:none}.search-input__label{margin:0 0 8px}.search-input .guess-box{padding:0 12px 12px}.search-input .guess-box ul{border-top:1px solid var(--color-border-primary-default);padding:12px 0 0}.search-input .guess-box ul li{min-height:36px;display:flex;align-items:center;padding:0 8px;cursor:pointer}.search-input .guess-box ul li:hover{background-color:var(--color-bg-innerisland-default)}.dropdown-input-test{position:relative}.dropdown-input-test .caret{display:none;fill:var(--color-icon-secondary-default);position:absolute;bottom:9px;right:10px}.dropdown-input-test .input-box{position:relative;cursor:pointer;display:flex;justify-content:space-between;align-items:center;outline:none;background-color:var(--color-bg-neutral-basic-default)}.dropdown-input-test .input-box.disabled{background-color:var(--color-bg-neutral-light-default);pointer-events:none}.dropdown-input-test .input-box.invalid{border-color:var(--color-border-error-default)}.dropdown-input-test .input-box.invalid>span{color:var(--color-border-error-default)}.dropdown-input-test .input-box.invalid svg *{fill:var(--color-border-error-default)}.dropdown-input-test .input-box .placeholder{color:var(--color-text-secondary-default)}.search-input-container{position:relative;display:inline-block;width:100%}.search-input-container .caret{display:none;position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;z-index:1;fill:var(--color-icon-secondary-default)}.suggestions-portal{background-color:var(--color-bg-neutral-basic-default);border-radius:8px;border:1px solid var(--color-border-primary-default);box-shadow:0 2px 8px #00000026;overflow-y:auto}.suggestions-portal .suggestions-list{list-style:none;padding:0;margin:0}.suggestions-portal .suggestions-list li{padding:8px 12px;min-height:36px;cursor:pointer;display:flex;align-items:center;overflow-wrap:anywhere}.suggestions-portal .suggestions-list li:hover{background-color:var(--color-bg-neutral-lightest-default)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.text-input{display:flex;flex-direction:column}.text-input.inline{flex-direction:row;justify-content:space-between}.text-input.inline>div{flex-grow:1}.text-input.inline label{padding:14px 0 0;margin:0 16px 0 0}.text-input label{margin:0 0 8px}.text-input .input-container{display:flex;position:relative;z-index:0}.text-input .input-container.has-icon input{padding:10px 8px 10px 36px}.text-input .input-container.has-icon
|
|
1
|
+
.text-input{display:flex;flex-direction:column}.text-input.inline{flex-direction:row;justify-content:space-between}.text-input.inline>div{flex-grow:1}.text-input.inline label{padding:14px 0 0;margin:0 16px 0 0}.text-input label{margin:0 0 8px}.text-input .input-container{display:flex;position:relative;z-index:0}.text-input .input-container.has-icon input{padding:10px 8px 10px 36px}.text-input .input-container.has-icon .icon{position:absolute;left:8px;top:calc(50% - 10px);z-index:2}.text-input .input-container.has-icon .icon *{fill:var(--color-icon-secondary-default)}.text-input .input-container input{border:1px solid var(--color-border-primary-default);border-radius:8px;height:44px;padding:10px 8px;outline:none;background-color:var(--color-bg-neutral-basic-default);z-index:1;flex-grow:1;color:var(--color-text-primary-default)}.text-input .input-container input[disabled]{background-color:var(--color-bg-neutral-light-default);pointer-events:none}.text-input .input-container input::placeholder{color:var(--color-text-secondary-default)}.text-input .input-container input:active,.text-input .input-container input:focus{box-shadow:0 0 0 1px var(--color-border-primary-default),inset 0 0 0 1px var(--color-border-primary-default)}.text-input .input-container input.has-icon{padding:10px 8px 10px 36px}.text-input.sm.rounded input{border-radius:18px}.text-input.sm .input-container input{height:36px}.text-input.rounded input{border-radius:22px}.text-input.invalid input,.text-input.invalid input:active,.text-input.invalid input:focus{border-color:var(--color-border-error-default);color:var(--color-border-error-default)}.text-input.invalid input:focus{box-shadow:0 0 0 1px var(--color-border-error-default),inset 0 0 0 1px var(--color-border-error-default)}.text-input.invalid .icon *{fill:var(--color-border-error-default)!important}.text-input.invalid .helper-text{color:var(--color-border-error-default)}.text-input.success input,.text-input.success input:active,.text-input.success input:focus{border-color:var(--color-border-success-default);color:var(--color-text-success-default)}.text-input.success input:focus{box-shadow:0 0 0 1px var(--color-border-success-default),inset 0 0 0 1px var(--color-border-success-default)}.text-input.success .icon *{fill:var(--color-border-success-default)!important}.text-input.success .helper-text{color:var(--color-text-success-default)}.text-input.clearable input{padding-right:36px!important}.text-input.clearable .clear-value{position:absolute;right:8px;top:calc(50% - 10px);cursor:pointer;z-index:1;height:20px}.text-input.clearable .clear-value *{fill:var(--color-icon-secondary-default)}.text-input .helper-text{font-size:12px;color:var(--color-text-secondary-default);margin:8px 0 0}.text-input .loader{position:absolute;right:8px;top:calc(50% - 10px)}.text-input .loader *{fill:var(--color-icon-secondary-default)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.textarea-input{display:flex;flex-direction:column;resize:none}.textarea-input.inline{flex-direction:row;justify-content:space-between}.textarea-input.inline>div{flex-grow:1}.textarea-input.inline label{padding:12px 0 0;margin:0 16px 0 0}.textarea-input label{margin:0 0 8px}.textarea-input .char-limit{text-align:right;margin-top:8px;font-size:12px;font-weight:400;color:var(--color-text-secondary-default)}.textarea-input .textarea-wrapper{position:relative}.textarea-input textarea{border:1px solid var(--color-border-primary-default);border-radius:8px;padding:10.5px 8px;color:var(--color-text-primary-default);max-width:100%;min-width:100%;min-height:64px;resize:both;background-color:var(--color-bg-neutral-basic-default);font-size:14px;font-weight:400}.textarea-input textarea[disabled]{background-color:var(--color-bg-
|
|
1
|
+
.textarea-input{display:flex;flex-direction:column;resize:none}.textarea-input.inline{flex-direction:row;justify-content:space-between}.textarea-input.inline>div{flex-grow:1}.textarea-input.inline label{padding:12px 0 0;margin:0 16px 0 0}.textarea-input label{margin:0 0 8px}.textarea-input .char-limit{text-align:right;margin-top:8px;font-size:12px;font-weight:400;color:var(--color-text-secondary-default)}.textarea-input .textarea-wrapper{position:relative}.textarea-input textarea{border:1px solid var(--color-border-primary-default);border-radius:8px;padding:10.5px 8px;color:var(--color-text-primary-default);max-width:100%;min-width:100%;min-height:64px;resize:both;background-color:var(--color-bg-neutral-basic-default);font-size:14px;font-weight:400}.textarea-input textarea[disabled]{background-color:var(--color-bg-neutral-light-default);pointer-events:none}.textarea-input textarea::placeholder{color:var(--color-text-secondary-default)}.textarea-input textarea:active,.textarea-input textarea:focus{outline:none;box-shadow:0 0 0 1px var(--color-border-primary-default),inset 0 0 0 1px var(--color-border-primary-default)}.textarea-input textarea.no-resize{resize:none}.textarea-input .helper-text{font-size:12px;color:var(--color-text-secondary-default);margin:8px 0 0}.textarea-input.invalid textarea{border-color:var(--color-border-error-default);color:var(--color-border-error-default)}.textarea-input.invalid textarea:focus,.textarea-input.invalid textarea:active{box-shadow:0 0 0 1px var(--color-border-error-default),inset 0 0 0 1px var(--color-border-error-default)}.textarea-input.invalid svg *{fill:var(--color-border-error-default)}.textarea-input.invalid .helper-text{color:var(--color-border-error-default)}.textarea-input.success textarea{border-color:var(--color-border-success-default);color:var(--color-border-success-default)}.textarea-input.success textarea:focus,.textarea-input.success textarea:active{box-shadow:0 0 0 1px var(--color-border-success-default),inset 0 0 0 1px var(--color-border-success-default)}.textarea-input.success svg *{fill:var(--color-border-success-default)}.textarea-input.success .helper-text{color:var(--color-border-success-default)}.textarea-input.clearable textarea{padding-right:36px!important}.textarea-input.clearable .clear-value{position:absolute;right:8px;top:8px;cursor:pointer;z-index:1;height:20px}.textarea-input.clearable .clear-value *{fill:var(--color-icon-secondary-default)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tooltip-wrapper{position:relative;display:inline-block;cursor:pointer}.tooltip-content{position:absolute;background-color:var(--color-bg-brand-default);color:var(--light-color-static);padding:12px 16px;border-radius:8px;z-index:9999;width:max-content;max-width:300px;white-space:normal;text-align:center}.tooltip-content:after{content:"";position:absolute;border-width:5px;border-style:solid}.tooltip-content.white{background-color:var(--color-bg-neutral-basic-default);color:var(--color-text-primary-default);box-shadow:0 0 10px -2px var(--
|
|
1
|
+
.tooltip-wrapper{position:relative;display:inline-block;cursor:pointer}.tooltip-content{position:absolute;background-color:var(--color-bg-brand-default);color:var(--light-color-static);padding:12px 16px;border-radius:8px;z-index:9999;width:max-content;max-width:300px;white-space:normal;text-align:center}.tooltip-content:after{content:"";position:absolute;border-width:5px;border-style:solid}.tooltip-content.white{background-color:var(--color-bg-neutral-basic-default);color:var(--color-text-primary-default);box-shadow:0 0 10px -2px var(--effect-shadow-XL)}.tooltip-content.white.tooltip-top:after{border-color:var(--color-bg-neutral-basic-default) transparent transparent transparent}.tooltip-content.white.tooltip-bottom:after{border-color:transparent transparent var(--color-bg-neutral-basic-default) transparent}.tooltip-content.white.tooltip-left:after{border-color:transparent transparent transparent var(--color-bg-neutral-basic-default)}.tooltip-content.white.tooltip-right:after{border-color:transparent var(--color-bg-neutral-basic-default) transparent transparent}.tooltip-top{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.tooltip-top:after{top:100%;left:50%;transform:translate(-50%);border-color:var(--color-bg-brand-default) transparent transparent transparent}.tooltip-bottom{top:calc(100% + 8px);left:50%;transform:translate(-50%)}.tooltip-bottom:after{bottom:100%;left:50%;transform:translate(-50%);border-color:transparent transparent var(--color-bg-brand-default) transparent}.tooltip-left{top:50%;right:calc(100% + 8px);transform:translateY(-50%)}.tooltip-left:after{top:50%;left:100%;transform:translateY(-50%);border-color:transparent transparent transparent var(--color-bg-brand-default)}.tooltip-right{top:50%;left:calc(100% + 8px);transform:translateY(-50%)}.tooltip-right:after{top:50%;right:100%;transform:translateY(-50%);border-color:transparent var(--color-bg-brand-default) transparent transparent}
|
|
@@ -1,24 +1,25 @@
|
|
|
1
1
|
import { jsxs as i, jsx as t } from "react/jsx-runtime";
|
|
2
2
|
import { useState as v, useRef as I, useEffect as g } from "react";
|
|
3
|
-
import { createPortal as
|
|
3
|
+
import { createPortal as D } from "react-dom";
|
|
4
4
|
import '../../../assets/src/components/Ui/DropdownInput/DropdownInput.css';/* empty css */
|
|
5
|
-
import { IconCaretUpDown as
|
|
6
|
-
import { getPortalContainer as
|
|
7
|
-
const P = "dropdown-input-global-portal",
|
|
5
|
+
import { IconCaretUpDown as H, IconWarningCircle as L } from "../Icons/Icons.js";
|
|
6
|
+
import { getPortalContainer as j, releasePortal as q } from "../../../shared/utils/fn/portals.js";
|
|
7
|
+
const P = "dropdown-input-global-portal", z = ({
|
|
8
8
|
label: b,
|
|
9
|
-
options:
|
|
9
|
+
options: u,
|
|
10
10
|
value: p,
|
|
11
11
|
onChange: x,
|
|
12
12
|
name: k = "DropdownInput",
|
|
13
|
-
placeholder:
|
|
13
|
+
placeholder: m,
|
|
14
14
|
labelInline: O = !1,
|
|
15
|
-
|
|
15
|
+
isSuccess: _ = !1,
|
|
16
|
+
errorMessage: a = !1,
|
|
16
17
|
isDisabled: f = !1,
|
|
17
|
-
className:
|
|
18
|
+
className: y = ""
|
|
18
19
|
}) => {
|
|
19
20
|
var R;
|
|
20
|
-
const [h, w] = v(!1), [
|
|
21
|
-
g(() => (c.current =
|
|
21
|
+
const [h, w] = v(!1), [s, N] = v(p || ""), [$, E] = v(!1), o = I(null), c = I(null);
|
|
22
|
+
g(() => (c.current = j(P), () => q(P)), []), g(() => {
|
|
22
23
|
const e = (n) => {
|
|
23
24
|
o.current && !o.current.contains(n.target) && c.current && !c.current.contains(n.target) && w(!1);
|
|
24
25
|
};
|
|
@@ -28,21 +29,21 @@ const P = "dropdown-input-global-portal", q = ({
|
|
|
28
29
|
}, []), g(() => {
|
|
29
30
|
N(p || "");
|
|
30
31
|
}, [p]);
|
|
31
|
-
const
|
|
32
|
+
const C = (e) => {
|
|
32
33
|
N(e), w(!1), x && x(e);
|
|
33
|
-
},
|
|
34
|
+
}, S = (e) => {
|
|
34
35
|
var n, l;
|
|
35
36
|
if (e.stopPropagation(), !f) {
|
|
36
37
|
if (!h) {
|
|
37
|
-
const r = (n = o.current) == null ? void 0 : n.querySelector(".input-box"),
|
|
38
|
-
if (
|
|
39
|
-
const
|
|
40
|
-
|
|
38
|
+
const r = (n = o.current) == null ? void 0 : n.querySelector(".input-box"), d = (r == null ? void 0 : r.getBoundingClientRect()) || ((l = o.current) == null ? void 0 : l.getBoundingClientRect());
|
|
39
|
+
if (d) {
|
|
40
|
+
const B = window.innerHeight - d.bottom;
|
|
41
|
+
E(B < 304);
|
|
41
42
|
}
|
|
42
43
|
}
|
|
43
44
|
w((r) => !r);
|
|
44
45
|
}
|
|
45
|
-
},
|
|
46
|
+
}, A = () => {
|
|
46
47
|
if (!h || !c.current || !o.current) return null;
|
|
47
48
|
const e = o.current.querySelector(".input-box"), n = (e == null ? void 0 : e.getBoundingClientRect()) || o.current.getBoundingClientRect(), l = {
|
|
48
49
|
position: "fixed",
|
|
@@ -54,14 +55,14 @@ const P = "dropdown-input-global-portal", q = ({
|
|
|
54
55
|
// Защита от сжатия
|
|
55
56
|
overflowY: "auto"
|
|
56
57
|
};
|
|
57
|
-
return
|
|
58
|
-
/* @__PURE__ */ t("div", { className: "dropdown-portal", style: l, children: /* @__PURE__ */ t("ul", { className: `options ${
|
|
58
|
+
return $ ? l.bottom = `${window.innerHeight - n.top}px` : l.top = `${n.bottom}px`, D(
|
|
59
|
+
/* @__PURE__ */ t("div", { className: "dropdown-portal", style: l, children: /* @__PURE__ */ t("ul", { className: `options ${$ ? "above" : ""}`, children: u.map((r) => /* @__PURE__ */ t(
|
|
59
60
|
"li",
|
|
60
61
|
{
|
|
61
|
-
onClick: (
|
|
62
|
-
|
|
62
|
+
onClick: (d) => {
|
|
63
|
+
d.stopPropagation(), C(r.value);
|
|
63
64
|
},
|
|
64
|
-
className:
|
|
65
|
+
className: s === r.value ? "selected" : "",
|
|
65
66
|
children: r.label
|
|
66
67
|
},
|
|
67
68
|
r.value
|
|
@@ -69,18 +70,18 @@ const P = "dropdown-input-global-portal", q = ({
|
|
|
69
70
|
c.current
|
|
70
71
|
);
|
|
71
72
|
};
|
|
72
|
-
return /* @__PURE__ */ i("div", { className: `dropdown-input ${
|
|
73
|
+
return /* @__PURE__ */ i("div", { className: `dropdown-input ${y} ${O ? "inline" : ""}`, ref: o, children: [
|
|
73
74
|
/* @__PURE__ */ i(
|
|
74
75
|
"select",
|
|
75
76
|
{
|
|
76
77
|
name: k,
|
|
77
|
-
value:
|
|
78
|
-
onChange: (e) =>
|
|
78
|
+
value: s,
|
|
79
|
+
onChange: (e) => C(e.target.value),
|
|
79
80
|
className: "dropdown-input__native",
|
|
80
81
|
disabled: f,
|
|
81
82
|
children: [
|
|
82
|
-
/* @__PURE__ */ t("option", { value: "", disabled: !0, children:
|
|
83
|
-
|
|
83
|
+
/* @__PURE__ */ t("option", { value: "", disabled: !0, children: m }),
|
|
84
|
+
u.map((e) => /* @__PURE__ */ t("option", { value: e.value, children: e.label }, e.value))
|
|
84
85
|
]
|
|
85
86
|
}
|
|
86
87
|
),
|
|
@@ -92,23 +93,24 @@ const P = "dropdown-input-global-portal", q = ({
|
|
|
92
93
|
className: `input-box
|
|
93
94
|
${h ? "opened" : ""}
|
|
94
95
|
${f ? "disabled" : ""}
|
|
95
|
-
${
|
|
96
|
-
|
|
96
|
+
${a ? "invalid" : ""}
|
|
97
|
+
${_ && !a && "success"}`,
|
|
98
|
+
onClick: S,
|
|
97
99
|
children: [
|
|
98
|
-
/* @__PURE__ */ t("span", { className: "input-value", children:
|
|
99
|
-
/* @__PURE__ */ t(
|
|
100
|
+
/* @__PURE__ */ t("span", { className: "input-value", children: s === "" ? /* @__PURE__ */ t("span", { className: "placeholder", children: m }) : ((R = u.find((e) => e.value === s)) == null ? void 0 : R.label) || /* @__PURE__ */ t("span", { className: "placeholder", children: m }) }),
|
|
101
|
+
/* @__PURE__ */ t(H, { className: "caret" })
|
|
100
102
|
]
|
|
101
103
|
}
|
|
102
104
|
),
|
|
103
|
-
|
|
104
|
-
/* @__PURE__ */ t(
|
|
105
|
-
|
|
105
|
+
a && /* @__PURE__ */ i("span", { className: "helper-text error", children: [
|
|
106
|
+
/* @__PURE__ */ t(L, { className: "icon", size: 12 }),
|
|
107
|
+
a
|
|
106
108
|
] }),
|
|
107
|
-
|
|
109
|
+
A()
|
|
108
110
|
] })
|
|
109
111
|
] });
|
|
110
112
|
};
|
|
111
|
-
|
|
113
|
+
z.displayName = "DropdownInput";
|
|
112
114
|
export {
|
|
113
|
-
|
|
115
|
+
z as DropdownInput
|
|
114
116
|
};
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import { jsxs as R, jsx as h } from "react/jsx-runtime";
|
|
2
2
|
import { useState as a, useRef as b, useLayoutEffect as C } from "react";
|
|
3
3
|
import '../../../assets/src/components/Ui/DropdownMenu/DropdownMenu.css';/* empty css */
|
|
4
|
-
const
|
|
4
|
+
const v = ({
|
|
5
5
|
content: m,
|
|
6
6
|
horizontalPosition: s = "right",
|
|
7
7
|
verticalPosition: c = "bottom",
|
|
8
|
-
iconTrigger: N
|
|
8
|
+
iconTrigger: N,
|
|
9
|
+
styleOutline: j = !0
|
|
9
10
|
}) => {
|
|
10
|
-
const [d, o] = a(!1), [
|
|
11
|
+
const [d, o] = a(!1), [H, n] = a(s), [k, l] = a(c), f = b(null), u = b(null);
|
|
11
12
|
C(() => {
|
|
12
13
|
if (d && f.current && u.current) {
|
|
13
14
|
const e = u.current.getBoundingClientRect(), t = f.current.getBoundingClientRect(), r = window.innerHeight, i = window.innerWidth;
|
|
@@ -29,7 +30,7 @@ const W = ({
|
|
|
29
30
|
document.removeEventListener("click", e);
|
|
30
31
|
};
|
|
31
32
|
}, [d]);
|
|
32
|
-
const
|
|
33
|
+
const x = () => {
|
|
33
34
|
var e, t;
|
|
34
35
|
if (!d) {
|
|
35
36
|
const r = (e = u.current) == null ? void 0 : e.getBoundingClientRect(), i = (t = f.current) == null ? void 0 : t.getBoundingClientRect();
|
|
@@ -47,24 +48,24 @@ const W = ({
|
|
|
47
48
|
}
|
|
48
49
|
}
|
|
49
50
|
o(!d);
|
|
50
|
-
},
|
|
51
|
+
}, B = (e) => {
|
|
51
52
|
e && e(), o(!1);
|
|
52
53
|
};
|
|
53
54
|
return /* @__PURE__ */ R("div", { className: `dropdowm-menu ${d ? "open" : ""}`, children: [
|
|
54
|
-
/* @__PURE__ */ h("div", { className: "menu-trigger", onClick:
|
|
55
|
+
/* @__PURE__ */ h("div", { className: "menu-trigger", onClick: x, ref: u, children: N || /* @__PURE__ */ h("div", { className: "dots" }) }),
|
|
55
56
|
/* @__PURE__ */ h("div", { className: "fader" }),
|
|
56
57
|
/* @__PURE__ */ h(
|
|
57
58
|
"ul",
|
|
58
59
|
{
|
|
59
|
-
className:
|
|
60
|
-
"data-x-fit":
|
|
61
|
-
"data-y-fit":
|
|
60
|
+
className: `menu-list ${j && "outlined"}`,
|
|
61
|
+
"data-x-fit": H,
|
|
62
|
+
"data-y-fit": k,
|
|
62
63
|
ref: f,
|
|
63
64
|
children: m == null ? void 0 : m.map(({ icon: e, isDanger: t, title: r, onClick: i }, g) => /* @__PURE__ */ R(
|
|
64
65
|
"li",
|
|
65
66
|
{
|
|
66
67
|
onClick: () => {
|
|
67
|
-
i &&
|
|
68
|
+
i && B(i);
|
|
68
69
|
},
|
|
69
70
|
className: `menu-item ${t ? "danger" : ""}`,
|
|
70
71
|
children: [
|
|
@@ -79,5 +80,5 @@ const W = ({
|
|
|
79
80
|
] });
|
|
80
81
|
};
|
|
81
82
|
export {
|
|
82
|
-
|
|
83
|
+
v as DropdownMenu
|
|
83
84
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { IconEye as
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { IconEye as o, IconRoleX as i, IconTrash as n } from "../Icons/Icons.js";
|
|
3
3
|
import { DropdownMenu as e } from "./DropdownMenu.js";
|
|
4
4
|
const l = {
|
|
5
5
|
title: "UIKit/DropdownMenu",
|
|
@@ -27,15 +27,15 @@ const l = {
|
|
|
27
27
|
args: {
|
|
28
28
|
content: [
|
|
29
29
|
{
|
|
30
|
-
icon: /* @__PURE__ */ o
|
|
30
|
+
icon: /* @__PURE__ */ t(o, {}),
|
|
31
31
|
title: "Просмотр"
|
|
32
32
|
},
|
|
33
33
|
{
|
|
34
|
-
icon: /* @__PURE__ */
|
|
34
|
+
icon: /* @__PURE__ */ t(i, {}),
|
|
35
35
|
title: "Назначить другую роль"
|
|
36
36
|
},
|
|
37
37
|
{
|
|
38
|
-
icon: /* @__PURE__ */
|
|
38
|
+
icon: /* @__PURE__ */ t(n, {}),
|
|
39
39
|
title: "Удалить",
|
|
40
40
|
isDanger: !0
|
|
41
41
|
}
|
|
@@ -43,8 +43,30 @@ const l = {
|
|
|
43
43
|
horizontalPosition: "left",
|
|
44
44
|
verticalPosition: "bottom"
|
|
45
45
|
}
|
|
46
|
+
}, p = {
|
|
47
|
+
args: {
|
|
48
|
+
content: [
|
|
49
|
+
{
|
|
50
|
+
icon: /* @__PURE__ */ t(o, {}),
|
|
51
|
+
title: "Просмотр профиля"
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
icon: /* @__PURE__ */ t(i, {}),
|
|
55
|
+
title: "Изменить права доступа"
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
icon: /* @__PURE__ */ t(n, {}),
|
|
59
|
+
title: "Удалить пользователя",
|
|
60
|
+
isDanger: !0
|
|
61
|
+
}
|
|
62
|
+
],
|
|
63
|
+
horizontalPosition: "right",
|
|
64
|
+
verticalPosition: "bottom",
|
|
65
|
+
styleOutline: !0
|
|
66
|
+
}
|
|
46
67
|
};
|
|
47
68
|
export {
|
|
48
69
|
a as Default,
|
|
70
|
+
p as Outlined,
|
|
49
71
|
l as default
|
|
50
72
|
};
|
|
@@ -78,7 +78,7 @@ const t = {
|
|
|
78
78
|
value: "2",
|
|
79
79
|
isClearable: !0
|
|
80
80
|
}
|
|
81
|
-
},
|
|
81
|
+
}, i = {
|
|
82
82
|
args: {
|
|
83
83
|
label: "Выберите опцию",
|
|
84
84
|
options: [
|
|
@@ -88,7 +88,7 @@ const t = {
|
|
|
88
88
|
],
|
|
89
89
|
isDisabled: !0
|
|
90
90
|
}
|
|
91
|
-
},
|
|
91
|
+
}, n = {
|
|
92
92
|
args: {
|
|
93
93
|
label: "Выберите опцию",
|
|
94
94
|
options: [
|
|
@@ -99,7 +99,7 @@ const t = {
|
|
|
99
99
|
errorMessage: "Пожалуйста, выберите опцию",
|
|
100
100
|
hasError: !0
|
|
101
101
|
}
|
|
102
|
-
},
|
|
102
|
+
}, b = {
|
|
103
103
|
args: {
|
|
104
104
|
label: "Большой список",
|
|
105
105
|
options: Array.from({ length: 50 }, (a, e) => ({
|
|
@@ -109,27 +109,37 @@ const t = {
|
|
|
109
109
|
placeholder: "Начните вводить для поиска...",
|
|
110
110
|
isClearable: !0
|
|
111
111
|
}
|
|
112
|
-
},
|
|
112
|
+
}, c = {
|
|
113
113
|
args: {
|
|
114
|
-
label: "Выберите несколько
|
|
114
|
+
label: "Выберите несколько показателей",
|
|
115
115
|
isMultiple: !0,
|
|
116
116
|
options: [
|
|
117
|
-
{ value: "a", label: "
|
|
117
|
+
{ value: "a", label: "A" },
|
|
118
118
|
{ value: "b", label: "Показатель B" },
|
|
119
|
-
{ value: "c", label: "
|
|
120
|
-
{ value: "d", label: "
|
|
119
|
+
{ value: "c", label: "Средний показатель C" },
|
|
120
|
+
{ value: "d", label: "Очень длинное название показателя D, которое не помещается в строку" },
|
|
121
|
+
{ value: "e", label: "E (короткий)" },
|
|
122
|
+
{ value: "f", label: "Показатель F — дополнительный вариант" },
|
|
123
|
+
{ value: "g", label: "G123" },
|
|
124
|
+
{ value: "h", label: "H — тест длинного текста для UX проверки" },
|
|
125
|
+
{ value: "i", label: "Показатель №9 — с цифрами и символами" },
|
|
126
|
+
{ value: "j", label: "J / альтернатива для теста фильтрации" },
|
|
127
|
+
{
|
|
128
|
+
value: "k",
|
|
129
|
+
label: "K — очень длинное и сложное название для проверки переполнения контейнера"
|
|
130
|
+
}
|
|
121
131
|
],
|
|
122
132
|
placeholder: "Можно выбрать несколько опций",
|
|
123
133
|
isClearable: !0,
|
|
124
|
-
value: ["
|
|
134
|
+
value: ["b", "d", "i"]
|
|
125
135
|
}
|
|
126
136
|
};
|
|
127
137
|
export {
|
|
128
138
|
r as Default,
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
139
|
+
i as Disabled,
|
|
140
|
+
b as LargeOptionsList,
|
|
141
|
+
c as MultipleSelect,
|
|
142
|
+
n as WithErrorMessage,
|
|
133
143
|
s as WithSelectedValue,
|
|
134
144
|
t as default
|
|
135
145
|
};
|
|
@@ -1,73 +1,80 @@
|
|
|
1
|
-
import { jsxs as d, jsx as
|
|
2
|
-
import { createPortal as
|
|
3
|
-
import { TextInput as
|
|
4
|
-
import { Checkbox as
|
|
1
|
+
import { jsxs as d, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { createPortal as N } from "react-dom";
|
|
3
|
+
import { TextInput as k } from "../TextInput/TextInput.js";
|
|
4
|
+
import { Checkbox as u } from "../Checkbox/Checkbox.js";
|
|
5
5
|
import '../../../assets/src/components/Ui/DropdownSearchInput/DropdownSearchInput.css';/* empty css */
|
|
6
|
-
const
|
|
7
|
-
isMultiple:
|
|
8
|
-
positionAbove:
|
|
9
|
-
inputRef:
|
|
10
|
-
portalRef:
|
|
11
|
-
searchInputRef:
|
|
6
|
+
const D = ({
|
|
7
|
+
isMultiple: s,
|
|
8
|
+
positionAbove: h,
|
|
9
|
+
inputRef: i,
|
|
10
|
+
portalRef: a,
|
|
11
|
+
searchInputRef: p,
|
|
12
12
|
inputValue: m,
|
|
13
|
-
suggestions:
|
|
14
|
-
selectedOption:
|
|
15
|
-
selectedValues:
|
|
16
|
-
parentState:
|
|
17
|
-
handleSearchChange:
|
|
18
|
-
handleKeyDown:
|
|
19
|
-
handleSuggestionClick:
|
|
13
|
+
suggestions: t,
|
|
14
|
+
selectedOption: o,
|
|
15
|
+
selectedValues: g,
|
|
16
|
+
parentState: l,
|
|
17
|
+
handleSearchChange: w,
|
|
18
|
+
handleKeyDown: _,
|
|
19
|
+
handleSuggestionClick: C,
|
|
20
20
|
handleParentChange: x
|
|
21
21
|
}) => {
|
|
22
|
-
if (!
|
|
23
|
-
const
|
|
22
|
+
if (!i.current || !a.current) return null;
|
|
23
|
+
const n = i.current.getBoundingClientRect(), b = {
|
|
24
24
|
position: "fixed",
|
|
25
|
-
width:
|
|
26
|
-
left:
|
|
27
|
-
maxHeight: "304px",
|
|
25
|
+
width: n.width,
|
|
26
|
+
left: n.left,
|
|
28
27
|
zIndex: 9999,
|
|
29
|
-
|
|
30
|
-
...u ? { bottom: `${window.innerHeight - s.top}px` } : { top: `${s.bottom}px` }
|
|
28
|
+
...h ? { bottom: `${window.innerHeight - n.top}px` } : { top: `${n.bottom}px` }
|
|
31
29
|
};
|
|
32
|
-
return
|
|
33
|
-
/* @__PURE__ */ d("div", { className: "dropdown-search-input-suggestions-portal", style:
|
|
34
|
-
/* @__PURE__ */
|
|
35
|
-
|
|
30
|
+
return N(
|
|
31
|
+
/* @__PURE__ */ d("div", { className: "dropdown-search-input-suggestions-portal", style: b, children: [
|
|
32
|
+
/* @__PURE__ */ r("div", { className: "dropdown-search-input-suggestions-portal__header", children: /* @__PURE__ */ r(
|
|
33
|
+
k,
|
|
36
34
|
{
|
|
37
|
-
ref:
|
|
35
|
+
ref: p,
|
|
38
36
|
placeholder: "Поиск...",
|
|
39
37
|
value: m,
|
|
40
|
-
onChange:
|
|
41
|
-
onKeyDown:
|
|
38
|
+
onChange: w,
|
|
39
|
+
onKeyDown: _,
|
|
42
40
|
className: "dropdown-search-input-suggestions-portal__input-search sm",
|
|
43
41
|
isClearable: !0
|
|
44
42
|
}
|
|
45
43
|
) }),
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
"li",
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
44
|
+
/* @__PURE__ */ d("ul", { className: "dropdown-search-input-suggestions-list", children: [
|
|
45
|
+
s && t.length > 0 && /* @__PURE__ */ r("li", { className: "dropdown-search-input-suggestions-list__item", onClick: x, children: /* @__PURE__ */ r(
|
|
46
|
+
u,
|
|
47
|
+
{
|
|
48
|
+
label: "Выбрать все",
|
|
49
|
+
isChecked: l === !0,
|
|
50
|
+
isIndeterminate: l === "indeterminate",
|
|
51
|
+
onChange: (e) => e.stopPropagation()
|
|
52
|
+
}
|
|
53
|
+
) }),
|
|
54
|
+
t.length === 0 ? /* @__PURE__ */ r("li", { className: "dropdown-search-input-suggestions-list__empty", children: "Нет результатов" }) : t.map((e, f) => {
|
|
55
|
+
const c = s ? g.includes(e.value) : (o == null ? void 0 : o.value) === e.value;
|
|
56
|
+
return /* @__PURE__ */ r(
|
|
57
|
+
"li",
|
|
58
|
+
{
|
|
59
|
+
onClick: () => C(e),
|
|
60
|
+
className: `dropdown-search-input-suggestions-list__item ${c ? "dropdown-search-input-suggestions-list__item--selected" : ""}`,
|
|
61
|
+
children: s ? /* @__PURE__ */ r(
|
|
62
|
+
u,
|
|
63
|
+
{
|
|
64
|
+
label: e.label,
|
|
65
|
+
isChecked: c,
|
|
66
|
+
onChange: (v) => v.stopPropagation()
|
|
67
|
+
}
|
|
68
|
+
) : /* @__PURE__ */ r("span", { children: e.label })
|
|
69
|
+
},
|
|
70
|
+
`${e.value}-${f}`
|
|
71
|
+
);
|
|
72
|
+
})
|
|
73
|
+
] })
|
|
67
74
|
] }),
|
|
68
|
-
|
|
75
|
+
a.current
|
|
69
76
|
);
|
|
70
77
|
};
|
|
71
78
|
export {
|
|
72
|
-
|
|
79
|
+
D as DropdownSuggestions
|
|
73
80
|
};
|
|
@@ -53,7 +53,10 @@ const R = "dropdown-search-input-global-portal", N = ({
|
|
|
53
53
|
}, x = (e) => {
|
|
54
54
|
e.key === "Escape" && c(!1), e.key === "Enter" && !n && d.length > 0 && v(d[0]);
|
|
55
55
|
}, v = (e) => {
|
|
56
|
-
if (n)
|
|
56
|
+
if (n) {
|
|
57
|
+
D(e);
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
57
60
|
m(e), s == null || s(e.value), c(!1);
|
|
58
61
|
}, H = () => {
|
|
59
62
|
n ? K() : m(null), s == null || s(n ? [] : ""), c(!1);
|
|
@@ -1,45 +1,49 @@
|
|
|
1
|
-
import { useState as M, useMemo as
|
|
2
|
-
const
|
|
3
|
-
options:
|
|
4
|
-
value:
|
|
1
|
+
import { useState as M, useEffect as b, useMemo as y } from "react";
|
|
2
|
+
const O = ({
|
|
3
|
+
options: c,
|
|
4
|
+
value: r,
|
|
5
5
|
onChange: t,
|
|
6
6
|
placeholder: f
|
|
7
7
|
}) => {
|
|
8
8
|
const [e, s] = M(
|
|
9
|
-
Array.isArray(
|
|
10
|
-
)
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
Array.isArray(r) ? r : r ? [r] : []
|
|
10
|
+
);
|
|
11
|
+
b(() => {
|
|
12
|
+
Array.isArray(r) ? s(r) : s(typeof r == "string" && r ? [r] : []);
|
|
13
|
+
}, [r]);
|
|
14
|
+
const i = y(() => e.length === 0 ? !1 : e.length === c.length ? !0 : "indeterminate", [e, c]), m = (l) => {
|
|
15
|
+
s((u) => {
|
|
16
|
+
const d = u.includes(l.value) ? u.filter((V) => V !== l.value) : [...u, l.value];
|
|
13
17
|
return t == null || t(d), d;
|
|
14
18
|
});
|
|
15
|
-
},
|
|
19
|
+
}, A = () => {
|
|
16
20
|
if (i === !0)
|
|
17
21
|
s([]), t == null || t([]);
|
|
18
22
|
else {
|
|
19
|
-
const
|
|
20
|
-
s(
|
|
23
|
+
const l = c.map((u) => u.value);
|
|
24
|
+
s(l), t == null || t(l);
|
|
21
25
|
}
|
|
22
|
-
},
|
|
26
|
+
}, S = y(() => {
|
|
23
27
|
if (e.length === 0) return f;
|
|
24
|
-
if (e.length ===
|
|
28
|
+
if (e.length === c.length) return "Все";
|
|
25
29
|
if (e.length === 1) {
|
|
26
|
-
const
|
|
27
|
-
return (
|
|
30
|
+
const l = c.find((u) => u.value === e[0]);
|
|
31
|
+
return (l == null ? void 0 : l.label) ?? f;
|
|
28
32
|
}
|
|
29
33
|
return `${e.length} выбрано`;
|
|
30
|
-
}, [e,
|
|
34
|
+
}, [e, c, f]);
|
|
31
35
|
return {
|
|
32
36
|
selectedValues: e,
|
|
33
37
|
setSelectedValues: s,
|
|
34
38
|
parentState: i,
|
|
35
|
-
toggleOption:
|
|
36
|
-
handleParentChange:
|
|
37
|
-
displayValue:
|
|
39
|
+
toggleOption: m,
|
|
40
|
+
handleParentChange: A,
|
|
41
|
+
displayValue: S,
|
|
38
42
|
clear: () => {
|
|
39
43
|
s([]), t == null || t([]);
|
|
40
44
|
}
|
|
41
45
|
};
|
|
42
46
|
};
|
|
43
47
|
export {
|
|
44
|
-
|
|
48
|
+
O as useMultipleSelect
|
|
45
49
|
};
|
|
@@ -1,58 +1,60 @@
|
|
|
1
|
-
import { jsxs as t, jsx as e, Fragment as
|
|
2
|
-
import { forwardRef as
|
|
1
|
+
import { jsxs as t, jsx as e, Fragment as A } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as F, useState as R } from "react";
|
|
3
3
|
import '../../../assets/src/components/Ui/TextInput/TextInput.css';/* empty css */
|
|
4
|
-
import { IconX as
|
|
5
|
-
import { Loader as
|
|
6
|
-
const
|
|
4
|
+
import { IconX as T, IconCheck as X, IconSearch as q, IconLock as B, IconAt as D } from "../Icons/Icons.js";
|
|
5
|
+
import { Loader as G } from "../Loader/Loader.js";
|
|
6
|
+
const H = F(
|
|
7
7
|
({
|
|
8
8
|
label: n,
|
|
9
9
|
placeholder: h = "",
|
|
10
10
|
value: l,
|
|
11
11
|
// Значение из пропсов
|
|
12
|
-
type:
|
|
13
|
-
name:
|
|
14
|
-
id:
|
|
15
|
-
labelInline:
|
|
16
|
-
isDisabled:
|
|
12
|
+
type: v = "text",
|
|
13
|
+
name: I = "TextInput",
|
|
14
|
+
id: x,
|
|
15
|
+
labelInline: N = !1,
|
|
16
|
+
isDisabled: p = !1,
|
|
17
17
|
iconType: c,
|
|
18
18
|
errorMessage: i = !1,
|
|
19
|
-
hasError:
|
|
19
|
+
hasError: r = !1,
|
|
20
|
+
isSuccess: $ = !1,
|
|
20
21
|
onChange: a,
|
|
21
22
|
// Обработчик из пропсов
|
|
22
|
-
className:
|
|
23
|
-
isClearable:
|
|
24
|
-
isLoading:
|
|
25
|
-
onFocus:
|
|
26
|
-
onKeyDown:
|
|
27
|
-
onBlur:
|
|
28
|
-
},
|
|
29
|
-
const [
|
|
30
|
-
const
|
|
31
|
-
s || d(
|
|
32
|
-
}, S = () => {
|
|
33
|
-
s && a ? a({ target: { value: "" } }) : d("");
|
|
23
|
+
className: k,
|
|
24
|
+
isClearable: o,
|
|
25
|
+
isLoading: u,
|
|
26
|
+
onFocus: z,
|
|
27
|
+
onKeyDown: w,
|
|
28
|
+
onBlur: C
|
|
29
|
+
}, j) => {
|
|
30
|
+
const [L, d] = R(""), s = l !== void 0, m = s ? l : L, S = (f) => {
|
|
31
|
+
const g = f.target.value;
|
|
32
|
+
s || d(g), a && a(f);
|
|
34
33
|
}, V = () => {
|
|
34
|
+
s && a ? a({ target: { value: "" } }) : d("");
|
|
35
|
+
}, b = () => {
|
|
35
36
|
switch (c) {
|
|
36
37
|
case "email":
|
|
37
|
-
return /* @__PURE__ */ e(
|
|
38
|
+
return /* @__PURE__ */ e(D, { className: "icon", size: 20 });
|
|
38
39
|
case "password":
|
|
39
|
-
return /* @__PURE__ */ e(
|
|
40
|
+
return /* @__PURE__ */ e(B, { className: "icon", size: 20 });
|
|
40
41
|
case "search":
|
|
41
|
-
return /* @__PURE__ */ e(
|
|
42
|
+
return /* @__PURE__ */ e(q, { className: "icon", size: 20 });
|
|
42
43
|
case "checkmark":
|
|
43
|
-
return /* @__PURE__ */ e(
|
|
44
|
+
return /* @__PURE__ */ e(X, { className: "icon", size: 20 });
|
|
44
45
|
default:
|
|
45
|
-
return /* @__PURE__ */ e(
|
|
46
|
+
return /* @__PURE__ */ e(A, {});
|
|
46
47
|
}
|
|
47
48
|
};
|
|
48
49
|
return /* @__PURE__ */ t(
|
|
49
50
|
"div",
|
|
50
51
|
{
|
|
51
52
|
className: `text-input
|
|
52
|
-
${
|
|
53
|
-
${
|
|
54
|
-
${
|
|
55
|
-
${r && "
|
|
53
|
+
${k}
|
|
54
|
+
${N && "inline"}
|
|
55
|
+
${r && "invalid"}
|
|
56
|
+
${$ && !r && "success"}
|
|
57
|
+
${o && "clearable"}`,
|
|
56
58
|
children: [
|
|
57
59
|
n && /* @__PURE__ */ e("label", { children: n }),
|
|
58
60
|
/* @__PURE__ */ t("div", { children: [
|
|
@@ -60,22 +62,22 @@ const E = A(
|
|
|
60
62
|
/* @__PURE__ */ e(
|
|
61
63
|
"input",
|
|
62
64
|
{
|
|
63
|
-
onBlur:
|
|
64
|
-
type:
|
|
65
|
-
value:
|
|
66
|
-
onChange:
|
|
65
|
+
onBlur: C,
|
|
66
|
+
type: v,
|
|
67
|
+
value: m,
|
|
68
|
+
onChange: S,
|
|
67
69
|
placeholder: h,
|
|
68
|
-
name:
|
|
69
|
-
id:
|
|
70
|
-
disabled:
|
|
71
|
-
ref:
|
|
72
|
-
onFocus:
|
|
73
|
-
onKeyDown:
|
|
70
|
+
name: I,
|
|
71
|
+
id: x,
|
|
72
|
+
disabled: p,
|
|
73
|
+
ref: j,
|
|
74
|
+
onFocus: z,
|
|
75
|
+
onKeyDown: w
|
|
74
76
|
}
|
|
75
77
|
),
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
78
|
+
b(),
|
|
79
|
+
o && m && !u && /* @__PURE__ */ e("div", { className: "clear-value", onClick: V, children: /* @__PURE__ */ e(T, { size: 20 }) }),
|
|
80
|
+
u && /* @__PURE__ */ e(G, {})
|
|
79
81
|
] }),
|
|
80
82
|
i && /* @__PURE__ */ e("span", { className: "helper-text", children: i })
|
|
81
83
|
] })
|
|
@@ -84,7 +86,7 @@ const E = A(
|
|
|
84
86
|
);
|
|
85
87
|
}
|
|
86
88
|
);
|
|
87
|
-
|
|
89
|
+
H.displayName = "TextInput";
|
|
88
90
|
export {
|
|
89
|
-
|
|
91
|
+
H as TextInput
|
|
90
92
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as a, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { useState as
|
|
2
|
+
import { useState as o } from "react";
|
|
3
3
|
import { TextInput as l } from "./TextInput.js";
|
|
4
4
|
const y = {
|
|
5
5
|
title: "UIKit/TextInput",
|
|
@@ -69,13 +69,13 @@ const y = {
|
|
|
69
69
|
label: "Текстовое поле (sm)",
|
|
70
70
|
className: "sm"
|
|
71
71
|
}
|
|
72
|
-
},
|
|
72
|
+
}, S = {
|
|
73
73
|
args: {
|
|
74
74
|
placeholder: "Маленькое и круглое...",
|
|
75
75
|
label: "Поле (sm + rounded)",
|
|
76
76
|
className: "sm rounded"
|
|
77
77
|
}
|
|
78
|
-
},
|
|
78
|
+
}, D = {
|
|
79
79
|
render: () => /* @__PURE__ */ a("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "24px" }, children: [
|
|
80
80
|
/* @__PURE__ */ a("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
|
|
81
81
|
/* @__PURE__ */ e("h3", { children: "Обычный размер (44px)" }),
|
|
@@ -90,6 +90,7 @@ const y = {
|
|
|
90
90
|
value: "Неверное значение"
|
|
91
91
|
}
|
|
92
92
|
),
|
|
93
|
+
/* @__PURE__ */ e(l, { label: "Успешное", isSuccess: !0, value: "Верное значение" }),
|
|
93
94
|
/* @__PURE__ */ e(l, { label: "С очисткой", isClearable: !0, value: "Можно очистить" }),
|
|
94
95
|
/* @__PURE__ */ e(l, { label: "Загрузка", isLoading: !0 }),
|
|
95
96
|
/* @__PURE__ */ e(l, { label: "Закругленное", className: "rounded", placeholder: "rounded" })
|
|
@@ -134,7 +135,7 @@ const y = {
|
|
|
134
135
|
] })
|
|
135
136
|
}, w = {
|
|
136
137
|
render: function() {
|
|
137
|
-
const [i, p] =
|
|
138
|
+
const [i, p] = o(""), [r, m] = o(!1), [n, u] = o(!1), [t, c] = o(!1), d = [r ? "sm" : "", n ? "rounded" : ""].filter(Boolean).join(" ") || void 0;
|
|
138
139
|
return /* @__PURE__ */ a("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [
|
|
139
140
|
/* @__PURE__ */ e(
|
|
140
141
|
l,
|
|
@@ -142,12 +143,12 @@ const y = {
|
|
|
142
143
|
label: "Интерактивная демонстрация",
|
|
143
144
|
placeholder: "Попробуйте ввести текст",
|
|
144
145
|
value: i,
|
|
145
|
-
onChange: (
|
|
146
|
-
p(
|
|
146
|
+
onChange: (s) => {
|
|
147
|
+
p(s.target.value), c(s.target.value.length > 0 && s.target.value.length < 3);
|
|
147
148
|
},
|
|
148
149
|
className: d,
|
|
149
|
-
hasError:
|
|
150
|
-
errorMessage:
|
|
150
|
+
hasError: t,
|
|
151
|
+
errorMessage: t ? "Слишком короткое значение" : "",
|
|
151
152
|
isClearable: !0,
|
|
152
153
|
iconType: "search"
|
|
153
154
|
}
|
|
@@ -158,8 +159,8 @@ const y = {
|
|
|
158
159
|
"input",
|
|
159
160
|
{
|
|
160
161
|
type: "checkbox",
|
|
161
|
-
checked:
|
|
162
|
-
onChange: (
|
|
162
|
+
checked: r,
|
|
163
|
+
onChange: (s) => m(s.target.checked)
|
|
163
164
|
}
|
|
164
165
|
),
|
|
165
166
|
"Маленький размер (sm)"
|
|
@@ -170,7 +171,7 @@ const y = {
|
|
|
170
171
|
{
|
|
171
172
|
type: "checkbox",
|
|
172
173
|
checked: n,
|
|
173
|
-
onChange: (
|
|
174
|
+
onChange: (s) => u(s.target.checked)
|
|
174
175
|
}
|
|
175
176
|
),
|
|
176
177
|
"Закругленные углы"
|
|
@@ -180,8 +181,8 @@ const y = {
|
|
|
180
181
|
"input",
|
|
181
182
|
{
|
|
182
183
|
type: "checkbox",
|
|
183
|
-
checked:
|
|
184
|
-
onChange: (
|
|
184
|
+
checked: t,
|
|
185
|
+
onChange: (s) => c(s.target.checked)
|
|
185
186
|
}
|
|
186
187
|
),
|
|
187
188
|
"Показать ошибку"
|
|
@@ -196,15 +197,15 @@ const y = {
|
|
|
196
197
|
] }),
|
|
197
198
|
/* @__PURE__ */ a("li", { children: [
|
|
198
199
|
"Высота: ",
|
|
199
|
-
/* @__PURE__ */ e("strong", { children:
|
|
200
|
+
/* @__PURE__ */ e("strong", { children: r ? "36px" : "44px" })
|
|
200
201
|
] }),
|
|
201
202
|
n && /* @__PURE__ */ a("li", { children: [
|
|
202
203
|
"Радиус: ",
|
|
203
|
-
/* @__PURE__ */ e("strong", { children:
|
|
204
|
+
/* @__PURE__ */ e("strong", { children: r ? "18px" : "22px" })
|
|
204
205
|
] }),
|
|
205
206
|
/* @__PURE__ */ a("li", { children: [
|
|
206
207
|
"Состояние: ",
|
|
207
|
-
|
|
208
|
+
t ? "❌ Ошибка" : "✅ Нормальное"
|
|
208
209
|
] })
|
|
209
210
|
] })
|
|
210
211
|
] })
|
|
@@ -212,14 +213,14 @@ const y = {
|
|
|
212
213
|
}
|
|
213
214
|
};
|
|
214
215
|
export {
|
|
215
|
-
|
|
216
|
+
D as AllStates,
|
|
216
217
|
C as Clearable,
|
|
217
218
|
f as Default,
|
|
218
219
|
k as Disabled,
|
|
219
220
|
w as InteractiveDemo,
|
|
220
221
|
I as Loading,
|
|
221
222
|
E as SizeComparison,
|
|
222
|
-
|
|
223
|
+
S as SmallRounded,
|
|
223
224
|
T as SmallSize,
|
|
224
225
|
N as WithError,
|
|
225
226
|
v as WithIcon,
|
package/dist/main.d.ts
CHANGED
|
@@ -187,6 +187,7 @@ declare type DropdownInputProps = {
|
|
|
187
187
|
name?: string;
|
|
188
188
|
placeholder?: string;
|
|
189
189
|
labelInline?: boolean;
|
|
190
|
+
isSuccess?: boolean;
|
|
190
191
|
errorMessage?: string;
|
|
191
192
|
isDisabled?: boolean;
|
|
192
193
|
className?: string;
|
|
@@ -199,6 +200,7 @@ declare type DropdownMenuProps = {
|
|
|
199
200
|
horizontalPosition?: "left" | "center" | "right";
|
|
200
201
|
verticalPosition?: "top" | "bottom";
|
|
201
202
|
iconTrigger?: default_2.ReactNode | string;
|
|
203
|
+
styleOutline?: boolean;
|
|
202
204
|
};
|
|
203
205
|
|
|
204
206
|
export declare const DropdownSearchInput: React.FC<DropdownSearchInputProps>;
|
|
@@ -1343,6 +1345,7 @@ declare type TextInputProps = {
|
|
|
1343
1345
|
iconType?: "checkmark" | "search" | "password" | "email";
|
|
1344
1346
|
errorMessage?: string;
|
|
1345
1347
|
hasError?: boolean;
|
|
1348
|
+
isSuccess?: boolean;
|
|
1346
1349
|
onChange?: (event: default_2.ChangeEvent<HTMLInputElement>) => void;
|
|
1347
1350
|
isClearable?: boolean;
|
|
1348
1351
|
isLoading?: boolean;
|