@homecode/ui 5.21.0 → 5.21.1

package/dist/esm/src/components/Select/Select.styl.js

@@ -1,5 +1,5 @@
-var css_248z = ".Select_root__mjOjv{max-height:200px;max-width:100%;position:relative}.Select_root__mjOjv.Select_disabled__AlOQi{opacity:.4;pointer-events:none}.Select_additionalLabel__K0--Z{flex-grow:1;overflow:hidden;text-align:left;text-overflow:ellipsis}.Select_trigger__OH48f{position:relative;z-index:1}.Select_triggerArrow__1LEop{flex-shrink:0;margin-left:.3em;margin-right:.7em;opacity:.3;transition:.2s ease-out;transition-property:opacity,transform}.Select_root__mjOjv:hover .Select_triggerArrow__1LEop{opacity:1}.Select_triggerArrow__1LEop.Select_isOpen__WlMUH{transform:rotateX(-180deg)}.Select_disabled__AlOQi .Select_triggerArrow__1LEop{color:var(--text3-color)}.Select_variant-clear__3Htb5 .Select_triggerButton__lErtt{background-color:transparent}.Select_triggerButton__lErtt{justify-content:space-between;text-align:left;width:100%}.Select_triggerButton__lErtt.Select_hasTriggerArrow__vPLad{padding-right:0}.Select_triggerButton__lErtt.Select_hasTriggerArrow__vPLad>span{max-width:calc(100% - 22px)}.Select_triggerButton__lErtt.Select_isError__WJJLq{box-shadow:inset 0 0 0 2px var(--danger-color)}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh{line-height:1.2em;opacity:0;overflow:hidden;text-overflow:ellipsis}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh.Select_hasSelected__zQhBV{opacity:1}.Select_presetPanel__Yu94r{box-shadow:inset 0 -1px 0 var(--decent-color-alpha-100);display:flex;padding:5px}.Select_presetButton__BAl0q{flex-grow:1;justify-content:center}.Select_presetButton__BAl0q+.Select_presetButton__BAl0q{margin-left:8px}.Select_options__3C0-v{max-height:200px;overflow-y:auto}.keyboard .Select_options__3C0-v{pointer-events:none}.Select_option__iJkfJ{align-items:center;cursor:pointer;display:flex;overflow:hidden;padding-bottom:0!important;padding-top:0!important;position:relative;text-align:left;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;width:100%}.Select_isTree__SiTaD .Select_option__iJkfJ{min-height:36px}.Select_size-xs__2lZQY .Select_option__iJkfJ{border-radius:6px;font-size:14px;height:22px;padding:0 8px}.Select_size-s__qBK9t .Select_option__iJkfJ{border-radius:6px;font-size:16px;height:26px;padding:0 12px}.Select_size-m__jp7n- .Select_option__iJkfJ{border-radius:9px;font-size:18px;height:34px;padding:0 16px}.Select_size-l__b4EEy .Select_option__iJkfJ{border-radius:12px;font-size:22px;height:42px;padding:0 20px}.Select_size-xl__0OerX .Select_option__iJkfJ{border-radius:15px;font-size:26px;height:50px;padding:0 24px}.Select_isTree__SiTaD .Select_option__iJkfJ{padding-left:30px}.Select_option__iJkfJ.Select_isGroup__aP1lY{color:var(--accent-color);font-weight:500;pointer-events:none}.Select_isExpanded__rG8R1>.Select_option__iJkfJ{display:flex}.Select_option__iJkfJ>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select_option__iJkfJ:before{content:\"\";display:inline-block}.Select_option__iJkfJ.Select_level-0__vu03A:before{content:none}.Select_option__iJkfJ.Select_level-1__ozH2U:before{min-width:24px;width:24px}.Select_option__iJkfJ.Select_level-2__XDqeh:before{min-width:48px;width:48px}.Select_option__iJkfJ.Select_level-3__Bc9XS:before{min-width:72px;width:72px}.Select_option__iJkfJ.Select_level-4__KfQcQ:before{min-width:96px;width:96px}.Select_option__iJkfJ.Select_level-5__DGSDM:before{min-width:120px;width:120px}.Select_option__iJkfJ.Select_level-6__p688A:before{min-width:144px;width:144px}.Select_option__iJkfJ.Select_isIndeterminate__dy-xV,.Select_option__iJkfJ.Select_isSelected__n3ZeN{background-color:var(--active-color-alpha-500)}.keyboard .Select_option__iJkfJ.Select_isFocused__oZSgY,.pointer .Select_option__iJkfJ:hover{box-shadow:inset 100vw 0 0 0 var(--accent-color-alpha-200)}.Select_expandButton__UTwlR{background-color:transparent!important;display:flex;height:100%;justify-content:flex-end;overflow:visible;padding:0;position:relative;width:30px}.Select_expandButton__UTwlR:before{content:\"\";display:block;height:calc(100% + 20px);position:absolute;right:0;top:-10;width:100px}.Select_size-xs__2lZQY .Select_expandButton__UTwlR{margin-left:-34px}.Select_size-s__qBK9t .Select_expandButton__UTwlR{margin-left:-37px}.Select_size-m__jp7n- .Select_expandButton__UTwlR{margin-left:-40px}.Select_size-l__b4EEy .Select_expandButton__UTwlR{margin-left:-46px}.Select_size-xl__0OerX .Select_expandButton__UTwlR{margin-left:-52px}.Select_expandIcon__gWAIB{backface-visibility:hidden;transition:transform .1s ease-out}.Select_isExpanded__rG8R1 .Select_expandIcon__gWAIB{transform:rotate(90deg) translateZ(0)}.Select_expandButton__UTwlR:hover .Select_expandIcon__gWAIB{color:var(--primary-color)}.Select_chip__FRK2y{margin-left:-.4em}.Select_chipsContainer__JruCi{overflow-y:auto;padding:4px 0}.Select_size-xs__2lZQY .Select_chipsContainer__JruCi{max-height:90px}.Select_size-s__qBK9t .Select_chipsContainer__JruCi{max-height:108px}.Select_size-m__jp7n- .Select_chipsContainer__JruCi{max-height:180px}.Select_size-l__b4EEy .Select_chipsContainer__JruCi{max-height:220px}.Select_size-xl__0OerX .Select_chipsContainer__JruCi{max-height:260px}.Select_chipContainerInner__cYHSk{display:flex;flex-wrap:wrap;gap:4px}.Select_chip__FRK2y{margin:0}@keyframes Select_fadeIn__QpAwZ{0%{opacity:0}10%{opacity:0}to{opacity:1}}";
-var S = {"root":"Select_root__mjOjv","disabled":"Select_disabled__AlOQi","additionalLabel":"Select_additionalLabel__K0--Z","trigger":"Select_trigger__OH48f","triggerArrow":"Select_triggerArrow__1LEop","isOpen":"Select_isOpen__WlMUH","variant-clear":"Select_variant-clear__3Htb5","triggerButton":"Select_triggerButton__lErtt","hasTriggerArrow":"Select_hasTriggerArrow__vPLad","isError":"Select_isError__WJJLq","triggerButtonLabel":"Select_triggerButtonLabel__XXLzh","hasSelected":"Select_hasSelected__zQhBV","presetPanel":"Select_presetPanel__Yu94r","presetButton":"Select_presetButton__BAl0q","options":"Select_options__3C0-v","option":"Select_option__iJkfJ","isTree":"Select_isTree__SiTaD","size-xs":"Select_size-xs__2lZQY","size-s":"Select_size-s__qBK9t","size-m":"Select_size-m__jp7n-","size-l":"Select_size-l__b4EEy","size-xl":"Select_size-xl__0OerX","isGroup":"Select_isGroup__aP1lY","isExpanded":"Select_isExpanded__rG8R1","level-0":"Select_level-0__vu03A","level-1":"Select_level-1__ozH2U","level-2":"Select_level-2__XDqeh","level-3":"Select_level-3__Bc9XS","level-4":"Select_level-4__KfQcQ","level-5":"Select_level-5__DGSDM","level-6":"Select_level-6__p688A","isSelected":"Select_isSelected__n3ZeN","isIndeterminate":"Select_isIndeterminate__dy-xV","isFocused":"Select_isFocused__oZSgY","expandButton":"Select_expandButton__UTwlR","expandIcon":"Select_expandIcon__gWAIB","chip":"Select_chip__FRK2y","chipsContainer":"Select_chipsContainer__JruCi","chipContainerInner":"Select_chipContainerInner__cYHSk","fadeIn":"Select_fadeIn__QpAwZ"};
+var css_248z = ".Select_root__mjOjv{max-height:200px;max-width:100%;position:relative}.Select_root__mjOjv.Select_disabled__AlOQi{opacity:.4;pointer-events:none}.Select_additionalLabel__K0--Z{flex-grow:1;overflow:hidden;text-align:left;text-overflow:ellipsis}.Select_trigger__OH48f{position:relative;z-index:1}.Select_triggerArrow__1LEop{flex-shrink:0;margin-left:.3em;margin-right:.7em;opacity:.3;transition:.2s ease-out;transition-property:opacity,transform}.Select_root__mjOjv:hover .Select_triggerArrow__1LEop{opacity:1}.Select_triggerArrow__1LEop.Select_isOpen__WlMUH{transform:rotateX(-180deg)}.Select_disabled__AlOQi .Select_triggerArrow__1LEop{color:var(--text3-color)}.Select_variant-clear__3Htb5 .Select_triggerButton__lErtt{background-color:transparent}.Select_triggerButton__lErtt{justify-content:space-between;text-align:left;width:100%}.Select_triggerButton__lErtt.Select_hasTriggerArrow__vPLad{padding-right:0}.Select_triggerButton__lErtt.Select_hasTriggerArrow__vPLad>span{max-width:calc(100% - 22px)}.Select_triggerButton__lErtt.Select_isError__WJJLq{box-shadow:inset 0 0 0 2px var(--danger-color)}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh{line-height:1.2em;opacity:0;overflow:hidden;text-overflow:ellipsis}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh.Select_hasSelected__zQhBV{opacity:1}.Select_presetPanel__Yu94r{box-shadow:inset 0 -1px 0 var(--decent-color-alpha-100);display:flex;padding:5px}.Select_presetButton__BAl0q{flex-grow:1;justify-content:center}.Select_presetButton__BAl0q+.Select_presetButton__BAl0q{margin-left:8px}.Select_options__3C0-v{max-height:200px;overflow-y:auto}.keyboard .Select_options__3C0-v{pointer-events:none}.Select_option__iJkfJ{align-items:center;cursor:pointer;display:flex;overflow:hidden;padding-bottom:0!important;padding-top:0!important;position:relative;text-align:left;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;width:100%}.Select_isTree__SiTaD .Select_option__iJkfJ{min-height:36px}.Select_size-xs__2lZQY .Select_option__iJkfJ{border-radius:6px;font-size:14px;height:22px;padding:0 8px}.Select_size-s__qBK9t .Select_option__iJkfJ{border-radius:6px;font-size:16px;height:26px;padding:0 12px}.Select_size-m__jp7n- .Select_option__iJkfJ{border-radius:9px;font-size:18px;height:34px;padding:0 16px}.Select_size-l__b4EEy .Select_option__iJkfJ{border-radius:12px;font-size:22px;height:42px;padding:0 20px}.Select_size-xl__0OerX .Select_option__iJkfJ{border-radius:15px;font-size:26px;height:50px;padding:0 24px}.Select_isTree__SiTaD .Select_option__iJkfJ{padding-left:30px}.Select_option__iJkfJ.Select_isGroup__aP1lY{color:var(--accent-color);font-weight:500;pointer-events:none}.Select_isExpanded__rG8R1>.Select_option__iJkfJ{display:flex}.Select_option__iJkfJ>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select_option__iJkfJ:before{content:\"\";display:inline-block}.Select_option__iJkfJ.Select_level-0__vu03A:before{content:none}.Select_option__iJkfJ.Select_level-1__ozH2U:before{min-width:24px;width:24px}.Select_option__iJkfJ.Select_level-2__XDqeh:before{min-width:48px;width:48px}.Select_option__iJkfJ.Select_level-3__Bc9XS:before{min-width:72px;width:72px}.Select_option__iJkfJ.Select_level-4__KfQcQ:before{min-width:96px;width:96px}.Select_option__iJkfJ.Select_level-5__DGSDM:before{min-width:120px;width:120px}.Select_option__iJkfJ.Select_level-6__p688A:before{min-width:144px;width:144px}.Select_option__iJkfJ.Select_isIndeterminate__dy-xV,.Select_option__iJkfJ.Select_isSelected__n3ZeN{background-color:var(--active-color-alpha-500)}.keyboard .Select_option__iJkfJ.Select_isFocused__oZSgY,.pointer .Select_option__iJkfJ:hover{box-shadow:inset 100vw 0 0 0 var(--accent-color-alpha-200)}.Select_expandButton__UTwlR{background-color:transparent!important;display:flex;height:100%;justify-content:flex-end;overflow:visible;padding:0;position:relative;width:30px}.Select_expandButton__UTwlR:before{content:\"\";display:block;height:calc(100% + 20px);position:absolute;right:0;top:-10;width:100px}.Select_size-xs__2lZQY .Select_expandButton__UTwlR{margin-left:-34px}.Select_size-s__qBK9t .Select_expandButton__UTwlR{margin-left:-37px}.Select_size-m__jp7n- .Select_expandButton__UTwlR{margin-left:-40px}.Select_size-l__b4EEy .Select_expandButton__UTwlR{margin-left:-46px}.Select_size-xl__0OerX .Select_expandButton__UTwlR{margin-left:-52px}.Select_expandIcon__gWAIB{backface-visibility:hidden;transition:transform .1s ease-out}.Select_isExpanded__rG8R1 .Select_expandIcon__gWAIB{transform:rotate(90deg) translateZ(0)}.Select_expandButton__UTwlR:hover .Select_expandIcon__gWAIB{color:var(--primary-color)}.Select_chip__FRK2y{margin-left:-.4em}.Select_chipsContainer__JruCi{overflow-y:auto;padding:4px 0}.Select_size-xs__2lZQY .Select_chipsContainer__JruCi{max-height:90px}.Select_size-s__qBK9t .Select_chipsContainer__JruCi{max-height:108px}.Select_size-m__jp7n- .Select_chipsContainer__JruCi{max-height:180px}.Select_size-l__b4EEy .Select_chipsContainer__JruCi{max-height:220px}.Select_size-xl__0OerX .Select_chipsContainer__JruCi{max-height:260px}.Select_chipContainerInner__cYHSk{display:flex;flex-wrap:wrap;gap:4px}.Select_chip__FRK2y{margin:0}.Select_inline__nJFrE{background-color:var(--decent-color);box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50);box-shadow:inset 0 0 0 2px none;display:flex;flex-direction:column;gap:var(--p-1);max-height:none;overflow:hidden;padding:var(--p-1)}.Select_inline__nJFrE.Select_blur__qqWoS{backdrop-filter:blur(50px);background-color:var(--decent-color-alpha-500)}.Select_inline__nJFrE.Select_isError__WJJLq{box-shadow:inset 0 0 0 2px var(--danger-color)}.Select_inline__nJFrE.Select_size-xs__2lZQY{border-radius:8.4px}.Select_inline__nJFrE.Select_size-xs__2lZQY.Select_round__Iv2dd{border-radius:12px}.Select_inline__nJFrE.Select_size-s__qBK9t{border-radius:8.4px}.Select_inline__nJFrE.Select_size-s__qBK9t.Select_round__Iv2dd{border-radius:16px}.Select_inline__nJFrE.Select_size-m__jp7n-{border-radius:12.6px}.Select_inline__nJFrE.Select_size-m__jp7n-.Select_round__Iv2dd{border-radius:20px}.Select_inline__nJFrE.Select_size-l__b4EEy{border-radius:16.8px}.Select_inline__nJFrE.Select_size-l__b4EEy.Select_round__Iv2dd{border-radius:24px}.Select_inline__nJFrE.Select_size-xl__0OerX{border-radius:21px}.Select_inline__nJFrE.Select_size-xl__0OerX.Select_round__Iv2dd{border-radius:28px}.Select_inlineSearch__ZDBbK{flex:none;position:relative;z-index:1}.Select_inline__nJFrE.Select_size-xs__2lZQY .Select_option__iJkfJ{padding-left:calc(8px - var(--p-1))!important;padding-right:calc(8px - var(--p-1))!important}.Select_inline__nJFrE.Select_size-s__qBK9t .Select_option__iJkfJ{padding-left:calc(12px - var(--p-1))!important;padding-right:calc(12px - var(--p-1))!important}.Select_inline__nJFrE.Select_size-m__jp7n- .Select_option__iJkfJ{padding-left:calc(16px - var(--p-1))!important;padding-right:calc(16px - var(--p-1))!important}.Select_inline__nJFrE.Select_size-l__b4EEy .Select_option__iJkfJ{padding-left:calc(20px - var(--p-1))!important;padding-right:calc(20px - var(--p-1))!important}.Select_inline__nJFrE.Select_size-xl__0OerX .Select_option__iJkfJ{padding-left:calc(24px - var(--p-1))!important;padding-right:calc(24px - var(--p-1))!important}.Select_inlineChips__no6i2{flex:none}.Select_inlineList__61-N3{flex:1 1 auto;min-height:0}.Select_inlineOptions__-WNbz{max-height:320px}.keyboard .Select_inlineOptions__-WNbz{pointer-events:auto}.Select_options__3C0-v{--select-inset:0px}.Select_options__3C0-v.Select_inlineOptions__-WNbz{--select-inset:var(--p-1)}.Select_options__3C0-v.Select_size-xs__2lZQY{--select-row-radius:6px;--select-box-radius:8.4px}.Select_options__3C0-v.Select_size-xs__2lZQY.Select_round__Iv2dd{--select-box-radius:12px}.Select_options__3C0-v.Select_size-s__qBK9t{--select-row-radius:6px;--select-box-radius:8.4px}.Select_options__3C0-v.Select_size-s__qBK9t.Select_round__Iv2dd{--select-box-radius:16px}.Select_options__3C0-v.Select_size-m__jp7n-{--select-row-radius:9px;--select-box-radius:12.6px}.Select_options__3C0-v.Select_size-m__jp7n-.Select_round__Iv2dd{--select-box-radius:20px}.Select_options__3C0-v.Select_size-l__b4EEy{--select-row-radius:12px;--select-box-radius:16.8px}.Select_options__3C0-v.Select_size-l__b4EEy.Select_round__Iv2dd{--select-box-radius:24px}.Select_options__3C0-v.Select_size-xl__0OerX{--select-row-radius:15px;--select-box-radius:21px}.Select_options__3C0-v.Select_size-xl__0OerX.Select_round__Iv2dd{--select-box-radius:28px}.Select_options__3C0-v.Select_round__Iv2dd.Select_flushTop__h7nnL .Select_option__iJkfJ:first-child{border-top-left-radius:max(var(--select-row-radius),calc(var(--select-box-radius) - var(--select-inset)));border-top-right-radius:max(var(--select-row-radius),calc(var(--select-box-radius) - var(--select-inset)))}.Select_options__3C0-v.Select_round__Iv2dd .Select_option__iJkfJ:last-child{border-bottom-left-radius:max(var(--select-row-radius),calc(var(--select-box-radius) - var(--select-inset)));border-bottom-right-radius:max(var(--select-row-radius),calc(var(--select-box-radius) - var(--select-inset)))}@keyframes Select_fadeIn__QpAwZ{0%{opacity:0}10%{opacity:0}to{opacity:1}}";
+var S = {"root":"Select_root__mjOjv","disabled":"Select_disabled__AlOQi","additionalLabel":"Select_additionalLabel__K0--Z","trigger":"Select_trigger__OH48f","triggerArrow":"Select_triggerArrow__1LEop","isOpen":"Select_isOpen__WlMUH","variant-clear":"Select_variant-clear__3Htb5","triggerButton":"Select_triggerButton__lErtt","hasTriggerArrow":"Select_hasTriggerArrow__vPLad","isError":"Select_isError__WJJLq","triggerButtonLabel":"Select_triggerButtonLabel__XXLzh","hasSelected":"Select_hasSelected__zQhBV","presetPanel":"Select_presetPanel__Yu94r","presetButton":"Select_presetButton__BAl0q","options":"Select_options__3C0-v","option":"Select_option__iJkfJ","isTree":"Select_isTree__SiTaD","size-xs":"Select_size-xs__2lZQY","size-s":"Select_size-s__qBK9t","size-m":"Select_size-m__jp7n-","size-l":"Select_size-l__b4EEy","size-xl":"Select_size-xl__0OerX","isGroup":"Select_isGroup__aP1lY","isExpanded":"Select_isExpanded__rG8R1","level-0":"Select_level-0__vu03A","level-1":"Select_level-1__ozH2U","level-2":"Select_level-2__XDqeh","level-3":"Select_level-3__Bc9XS","level-4":"Select_level-4__KfQcQ","level-5":"Select_level-5__DGSDM","level-6":"Select_level-6__p688A","isSelected":"Select_isSelected__n3ZeN","isIndeterminate":"Select_isIndeterminate__dy-xV","isFocused":"Select_isFocused__oZSgY","expandButton":"Select_expandButton__UTwlR","expandIcon":"Select_expandIcon__gWAIB","chip":"Select_chip__FRK2y","chipsContainer":"Select_chipsContainer__JruCi","chipContainerInner":"Select_chipContainerInner__cYHSk","inline":"Select_inline__nJFrE","blur":"Select_blur__qqWoS","round":"Select_round__Iv2dd","inlineSearch":"Select_inlineSearch__ZDBbK","inlineChips":"Select_inlineChips__no6i2","inlineList":"Select_inlineList__61-N3","inlineOptions":"Select_inlineOptions__-WNbz","flushTop":"Select_flushTop__h7nnL","fadeIn":"Select_fadeIn__QpAwZ"};
             if (typeof document !== 'undefined') {
               var __uilibHead = document.head || document.getElementsByTagName('head')[0];
               if (__uilibHead) {

package/dist/esm/src/components/Select/Select2.js

@@ -23,7 +23,7 @@ import S from './Select.styl.js';
 const BLUR_CLOSE_DELAY = 60;
 const POINTER_PRESS_TTL = 100;
 function Select2(props) {
-    const { className, value, onChange, onChipClick, onSearchChange, disableTriggerArrow, inputProps, popupProps, scrollProps, size = 'm', round, optionsClassName, optionClassName, selectedChipClassName, additionalOptions = [], options = [], variant, isSearchable, label, additionalLabel, error, blur, disabled, trigger, required, hideRequiredStar, presets = [], selectAllButton, clearButton, showSelectedCount, disableLabel, selectedChipRemoveTooltip, selectedChipIds, onOpen, onClose, onFocus, onBlur, } = props;
+    const { className, value, onChange, onChipClick, onSearchChange, disableTriggerArrow, inputProps, popupProps, scrollProps, size = 'm', round, optionsClassName, optionClassName, selectedChipClassName, additionalOptions = [], options = [], variant, isSearchable, label, additionalLabel, error, blur, disabled, trigger, required, hideRequiredStar, presets = [], selectAllButton, clearButton, showSelectedCount, disableLabel, selectedChipRemoveTooltip, selectedChipIds, onOpen, onClose, onFocus, onBlur, inline, } = props;
     const isMultiple$1 = isMultiple(value);
     const closeOnSelect = props.closeOnSelect ?? !isMultiple$1;
     const instanceId = useRef(generateUID());
@@ -36,6 +36,8 @@ function Select2(props) {
     const [labelClipPath, setLabelClipPath] = useState('');
     const [isSearching, setIsSearching] = useState(false);
     const [innerSearchVal, setInnerSearchVal] = useState('');
+    /** Inline: keyboard navigation works while focus is inside the list. */
+    const [inlineFocused, setInlineFocused] = useState(false);
     const searchVal = props.searchValue ?? innerSearchVal;
     const searchQuery = isSearching ? searchVal : '';
     const { selectedIds, setSelectedIds } = useSelectedIds(value);
@@ -88,9 +90,14 @@ function Select2(props) {
             applySelection(ids, ids);
         }
         else {
+            // An inline list always shows a pick: pressing the picked row keeps it.
+            if (inline && isSelected(id))
+                return;
             const nextValue = isSelected(id) ? null : id;
             applySelection(nextValue === null ? [] : [id], nextValue);
         }
+        if (inline)
+            return;
         resetSearch();
         if (closeOnSelect)
             close();
@@ -102,7 +109,7 @@ function Select2(props) {
     const dropSelected = () => applySelection([], isMultiple$1 ? [] : null);
     const applyPreset = (ids) => applySelection(ids, isMultiple$1 ? ids : (ids[0] ?? null));
     const { focusedId, setFocusedId } = useKeyboardNav({
-        isOpen,
+        isOpen: inline ? inlineFocused : isOpen,
         navigableOptions,
         selectedIds,
         onSelect: onItemToggle,
@@ -133,7 +140,8 @@ function Select2(props) {
         setIsSearching(true);
         setInnerSearchVal(val);
         onSearchChange?.(val);
-        openIfEnabled();
+        if (!inline)
+            openIfEnabled();
     };
     const handleFocus = e => {
         window.clearTimeout(blurTimer.current);
@@ -188,7 +196,7 @@ function Select2(props) {
     });
     useEvent({
         event: 'click',
-        isActive: isOpen,
+        isActive: isOpen && !inline,
         callback: e => {
             // The click concluding a press that started inside must not count as an
             // outside click: the portalled popup can mount under the cursor, which
@@ -200,9 +208,25 @@ function Select2(props) {
         },
     });
     useEffect(() => {
-        if (!isOpen)
+        if (!isOpen && !inline)
             resetSearch();
     }, [isOpen]);
+    // Inline: on mount the selected option is scrolled into the middle of the list.
+    useEffect(() => {
+        if (!inline)
+            return;
+        const frame = requestAnimationFrame(() => {
+            const list = scrollInnerRef.current;
+            const selected = list?.querySelector(`.${S.isSelected}`);
+            if (!list || !selected)
+                return;
+            const listRect = list.getBoundingClientRect();
+            const rect = selected.getBoundingClientRect();
+            const offset = rect.top - listRect.top + list.scrollTop;
+            list.scrollTop = Math.max(0, offset - (list.clientHeight - rect.height) / 2);
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [inline]);
     useEffect(() => {
         if (props.searchValue === undefined)
             return;
@@ -302,8 +326,25 @@ function Select2(props) {
             optionProps.ref = onFocusedElemRef;
         return (jsx("div", { ...optionProps, children: renderLabel(item) }, id));
     };
-    const optionsList = (jsxs("div", { ref: contentRef, "data-select-id": instanceId.current, children: [renderPresets(), createElement(Scroll, { y: true, ...scrollProps, offset: { y: { before: 10, after: 10 } }, className: cn(S.options, S[`size-${size}`], optionsClassName, scrollProps?.className), onInnerRef: onScrollInnerRef, key: "items-scroll" }, visibleOptions.map(item => renderOption(item)))] }));
+    const hasPresetPanel = presets.length > 0 || Boolean(selectAllButton) || Boolean(clearButton);
+    const optionsList = (jsxs("div", { ref: contentRef, "data-select-id": instanceId.current, children: [renderPresets(), createElement(Scroll, { y: true, ...scrollProps, offset: { y: { before: 10, after: 10 } }, className: cn(S.options, S[`size-${size}`], round && S.round, 
+                // The first row touches the box top unless the preset buttons are above it.
+                !hasPresetPanel && S.flushTop, optionsClassName, scrollProps?.className), onInnerRef: onScrollInnerRef, key: "items-scroll" }, visibleOptions.map(item => renderOption(item)))] }));
     const classes = cn(S.root, className, S[`size-${size}`], variant === 'clear' && S['variant-clear']);
+    if (inline) {
+        const onInlineBlur = e => {
+            onBlur?.(e);
+            if (!e.currentTarget.contains(e.relatedTarget))
+                setInlineFocused(false);
+        };
+        return (jsxs(Fragment, { children: [jsxs("div", { className: cn(classes, S.inline, round && S.round, blur && S.blur, disabled && S.disabled, isErrorVisible && S.isError), "data-select-id": instanceId.current, tabIndex: isSearchable ? -1 : 0, onFocus: e => {
+                        setInlineFocused(true);
+                        handleFocus(e);
+                    }, onBlur: onInlineBlur, children: [isSearchable && (jsx("div", { className: S.inlineSearch, children: jsx(Input, { size: size, round: round, variant: "clean", ...inputProps, value: searchVal, onChange: handleSearchChange, 
+                                // A floating label would be cut by the box: it is the placeholder here.
+                                placeholder: inputProps?.placeholder ??
+                                    (hideFieldLabel ? undefined : getFieldLabel(label)) }) })), hasChips && (jsx("div", { className: cn(S.chipContainerInner, S.inlineChips), children: renderSelectedChips() })), renderPresets(), jsx("div", { ref: contentRef, className: S.inlineList, children: jsx(Scroll, { y: true, ...scrollProps, offset: { y: { before: 6, after: 6 } }, className: cn(S.options, S.inlineOptions, S[`size-${size}`], round && S.round, !isSearchable && !hasChips && !hasPresetPanel && S.flushTop, optionsClassName, scrollProps?.className), onInnerRef: onScrollInnerRef, children: visibleOptions.map(item => renderOption(item)) }) })] }), isErrorVisible && (jsx(AssistiveText, { variant: "danger", size: size, children: error }))] }));
+    }
     return (jsxs(Fragment, { children: [jsx(Popup, { className: classes, direction: "bottom", size: size, focusControl: true, blur: blur, round: round, disabled: disabled, ...popupProps, isOpen: isOpen, onOpen: openIfEnabled, onClose: close, trigger: renderTrigger(), triggerProps: {
                     'data-select-id': instanceId.current,
                     onFocus: handleFocus,

package/dist/esm/types/src/components/Select/Select.types.d.ts

@@ -36,6 +36,7 @@ export type Props = FormControl<Value> & InheritedInputProps & {
     className?: string;
     isOpen?: boolean;
     closeOnSelect?: boolean;
+    inline?: boolean;
     optionsClassName?: string;
     optionClassName?: string;
     selectedChipClassName?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "5.21.0",
+  "version": "5.21.1",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",