bromcom-ui 3.0.0-alpha.3 → 3.0.0-alpha.5

package/dist/collection/components/molecules/upload/file-upload.style.js

@@ -0,0 +1,201 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from 'tailwind-variants';
+const zoneDefaultSurface = 'tw-border-dashed tw-border-color tw-bg-color-default';
+const zoneHoverSurface = '!tw-border-solid !tw-border-color-primaryInfo';
+const zoneDragSurface = '!tw-border-solid !tw-border-color-primaryInfo !tw-bg-primary-50';
+export const uploadClasses = tv({
+  slots: {
+    container: 'bcm-ui-element tw-flex tw-flex-col tw-w-full',
+    label: 'tw-text-3 tw-font-medium tw-text-color-label tw-leading-5',
+    triggerWrap: 'tw-flex tw-flex-col tw-w-full',
+    zone: [
+      'tw-relative tw-rounded tw-border tw-transition-all tw-duration-200 tw-ease-in-out',
+      'tw-select-none tw-flex tw-items-center tw-justify-center',
+      zoneDefaultSurface,
+    ],
+    iconContainer: 'tw-flex tw-shrink-0 tw-items-center tw-justify-center',
+    iconSizeClass: 'tw-block tw-text-color-default',
+    zoneTextWrapper: 'tw-flex tw-flex-col tw-flex-1 tw-min-w-0',
+    zoneTextMain: 'tw-text-3 tw-font-medium tw-text-color-caption tw-leading-tight',
+    zoneLink: 'tw-text-color-primary tw-font-medium hover:tw-underline tw-cursor-pointer',
+    zoneTextSub: 'tw-text-2 tw-text-color-caption tw-leading-4',
+    list: 'tw-flex tw-flex-col tw-gap-2',
+    fileRow: [
+      'tw-flex tw-flex-col tw-rounded tw-min-w-0',
+      'tw-bg-color-default tw-px-4 tw-py-2',
+    ],
+    fileRowHeader: 'tw-flex tw-items-center tw-gap-2 tw-w-full tw-min-w-0',
+    fileIcon: 'tw-shrink-0 tw-text-color-primary',
+    fileTitle: 'tw-font-medium tw-leading-5 tw-text-color-default tw-truncate tw-flex-1 tw-min-w-0',
+    progressWrapper: 'tw-flex tw-items-center tw-gap-2 tw-w-full',
+    progressTrack: 'tw-flex-1 tw-h-2 tw-bg-color-default-hover tw-rounded-full tw-overflow-hidden',
+    progressBar: 'tw-h-full tw-bg-primary-600 tw-rounded-full tw-transition-all tw-duration-300 tw-ease-out',
+    percent: 'tw-text-3 tw-font-medium tw-leading-5 tw-text-color-default tw-min-w-[3ch] tw-text-right tw-shrink-0',
+    actions: 'tw-flex tw-items-center tw-shrink-0',
+    iconBtn: [
+      'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-cursor-pointer',
+      'tw-appearance-none tw-border-none tw-bg-transparent tw-p-0',
+      'tw-text-color-default hover:tw-text-color-primary',
+    ],
+    errorArea: [
+      'tw-flex tw-items-center tw-gap-3 tw-py-1.5 tw-px-3 tw-rounded',
+      'tw-bg-red-50 tw-text-color-error tw-text-3 tw-font-medium tw-leading-none',
+    ],
+    errorIcon: 'tw-flex tw-items-center tw-justify-center tw-shrink-0',
+    errorClose: 'tw-ml-auto tw-cursor-pointer hover:tw-opacity-80',
+    captionWrap: '[&_.bcm-caption-area]:!tw-mt-0',
+  },
+  variants: {
+    size: {
+      medium: {
+        container: 'tw-gap-1',
+        zone: 'tw-gap-2 tw-px-4 tw-py-4',
+        zoneTextWrapper: 'tw-gap-1',
+        fileRow: 'tw-gap-1 tw-px-4 tw-py-2',
+        fileRowHeader: 'tw-gap-2',
+        fileIcon: 'tw-text-4',
+        fileTitle: 'tw-text-3',
+        iconBtn: 'tw-text-4',
+        progressWrapper: 'tw-gap-2',
+        progressTrack: 'tw-h-2',
+      },
+      small: {
+        container: 'tw-gap-0.5',
+        zone: 'tw-gap-2 tw-px-3 tw-py-3',
+        zoneTextWrapper: 'tw-gap-0.5',
+        fileRow: 'tw-gap-0.5 tw-px-3 tw-py-1',
+        fileRowHeader: 'tw-gap-1',
+        fileTitle: 'tw-text-2',
+        fileIcon: 'tw-text-3',
+        percent: 'tw-text-2',
+        iconBtn: 'tw-text-3',
+        progressWrapper: 'tw-gap-1',
+        progressTrack: 'tw-h-1.5',
+        list: 'tw-gap-1.5',
+      },
+    },
+    position: {
+      vertical: {
+        zone: 'tw-flex-col tw-text-center',
+        zoneTextWrapper: 'tw-items-center',
+        zoneTextSub: 'tw-text-center',
+      },
+      horizontal: {
+        zone: 'tw-flex-row tw-text-left',
+        zoneTextWrapper: 'tw-items-start',
+      },
+      button: {
+        container: 'tw-gap-1',
+      },
+    },
+    disabled: {
+      true: '',
+      false: '',
+    },
+    zoneHovered: {
+      true: '',
+      false: '',
+    },
+    dragActive: {
+      true: '',
+      false: '',
+    },
+    zoneError: {
+      true: '',
+      false: '',
+    },
+    fullWidth: {
+      true: {
+        container: 'tw-max-w-full',
+      },
+      false: {
+        container: 'tw-max-w-64',
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      position: ['vertical', 'horizontal'],
+      size: 'medium',
+      class: {
+        iconContainer: 'tw-h-10',
+        iconSizeClass: 'tw-text-[40px] tw-leading-none',
+      },
+    },
+    {
+      position: 'vertical',
+      size: 'small',
+      class: {
+        iconContainer: 'tw-size-8',
+        iconSizeClass: 'tw-text-[32px] tw-leading-none',
+      },
+    },
+    {
+      position: 'horizontal',
+      size: 'small',
+      class: {
+        iconContainer: 'tw-h-8 tw-max-h-8 tw-max-w-9',
+        iconSizeClass: '!tw-text-[28px] !tw-leading-none',
+      },
+    },
+    {
+      position: ['vertical', 'horizontal'],
+      disabled: false,
+      class: {
+        zone: 'tw-cursor-pointer',
+      },
+    },
+    {
+      position: ['vertical', 'horizontal'],
+      disabled: false,
+      zoneError: false,
+      zoneHovered: true,
+      dragActive: false,
+      class: {
+        zone: zoneHoverSurface,
+      },
+    },
+    {
+      position: ['vertical', 'horizontal'],
+      disabled: false,
+      zoneError: false,
+      dragActive: true,
+      class: {
+        zone: zoneDragSurface,
+      },
+    },
+    {
+      position: ['vertical', 'horizontal'],
+      zoneError: true,
+      disabled: false,
+      class: {
+        zone: '!tw-border-solid tw-border-color-error !tw-bg-red-50',
+      },
+    },
+    {
+      disabled: true,
+      class: {
+        zone: [
+          'tw-cursor-not-allowed',
+          'tw-border-dashed tw-border-color-disabled tw-bg-color-disabled',
+        ],
+        zoneTextMain: 'tw-text-color-disabled',
+        zoneTextSub: 'tw-text-color-disabled',
+        zoneLink: 'tw-text-color-disabled tw-cursor-not-allowed tw-no-underline hover:tw-no-underline',
+        iconSizeClass: '!tw-text-color-disabled',
+      },
+    },
+  ],
+  defaultVariants: {
+    size: 'medium',
+    position: 'vertical',
+    disabled: false,
+    zoneHovered: false,
+    dragActive: false,
+    zoneError: false,
+    fullWidth: false,
+  },
+});

package/dist/collection/components/organism/form/form.js

@@ -39,6 +39,7 @@ export class BcmForm {
         CHECKBOX: 'checkbox',
         RADIO_GROUP: 'radio-group',
         CHECKBOX_GROUP: 'checkbox-group',
+        FILE_UPLOAD: 'file-upload',
         RANGE: 'range',
         // sadece value fırlatıyor
         FORM: 'form',

package/dist/collection/components/organism/form-2/bcm-form-components.js

@@ -23,6 +23,7 @@ export const BcmFormComponents = [
   'BCM-CHIP-GROUP',
   'BCM-INPUT-DROPDOWN',
   'BCM-NUMBER-INPUT',
+  'BCM-FILE-UPLOAD',
   //... to be added to v3
 ];
 export const BcmFormGroupComponents = [

package/dist/collection/components/organism/list/list-focus-manager.js

@@ -0,0 +1,344 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+export class ListFocusManager {
+  constructor() {
+    this.focusableSelector = [
+      "a[href]",
+      "area[href]",
+      "button:not([disabled])",
+      "input:not([disabled]):not([type='hidden'])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      "[contenteditable='true']",
+      "[tabindex]:not([tabindex='-1'])",
+    ].join(",");
+  }
+  getFocusableElements(container) {
+    return Array.from(container.querySelectorAll(this.focusableSelector)).filter(item => this.isVisible(item));
+  }
+  getFirstFocusableElement(container) {
+    if (!container)
+      return null;
+    if (this.canReceiveProgrammaticFocus(container))
+      return container;
+    return this.getFocusableElements(container)[0] || null;
+  }
+  getListItems(listElement) {
+    if (!listElement)
+      return [];
+    return Array.from(listElement.querySelectorAll(".bcm-list__item")).filter(item => this.canReceiveProgrammaticFocus(item));
+  }
+  getItemById(listElement, itemId) {
+    return this.getListItems(listElement).find(item => item.id === itemId) || null;
+  }
+  getCurrentListItem(listElement, activeElement) {
+    if (!listElement)
+      return null;
+    const activeItem = activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest(".bcm-list__item");
+    if (activeItem && this.isInsideElement(listElement, activeItem) && this.canReceiveProgrammaticFocus(activeItem)) {
+      return activeItem;
+    }
+    const focusedItem = listElement.querySelector(".bcm-list__item.focused");
+    return this.canReceiveProgrammaticFocus(focusedItem) ? focusedItem : null;
+  }
+  getPreferredListFocusElement(listElement, direction = "first") {
+    var _a;
+    if (!listElement)
+      return null;
+    const focusedItem = listElement.querySelector(".bcm-list__item.focused");
+    if (focusedItem && this.canReceiveProgrammaticFocus(focusedItem))
+      return focusedItem;
+    const selectedItem = (_a = listElement.querySelector(".bcm-list__item .selected")) === null || _a === void 0 ? void 0 : _a.closest(".bcm-list__item");
+    if (selectedItem && this.canReceiveProgrammaticFocus(selectedItem))
+      return selectedItem;
+    const listItems = this.getListItems(listElement);
+    if (listItems.length > 0) {
+      return direction === "last" ? listItems[listItems.length - 1] : listItems[0];
+    }
+    const focusableElements = this.getFocusableElements(listElement);
+    return direction === "last" ? focusableElements[focusableElements.length - 1] || null : focusableElements[0] || null;
+  }
+  isElementNaturallyFocusable(element) {
+    const nodeName = element.tagName;
+    if (nodeName === "A")
+      return element.hasAttribute("href");
+    return ["BUTTON", "INPUT", "SELECT", "TEXTAREA"].includes(nodeName);
+  }
+  isEditableElement(element) {
+    if (!element)
+      return false;
+    const nodeName = element.tagName;
+    return nodeName === "INPUT" || nodeName === "TEXTAREA" || nodeName === "SELECT" || element.isContentEditable;
+  }
+  isVisible(element) {
+    if (!element.isConnected)
+      return false;
+    const style = window.getComputedStyle(element);
+    return style.display !== "none" && style.visibility !== "hidden";
+  }
+  isInsideElement(parent, child) {
+    return !!(parent && child && (parent === child || parent.contains(child)));
+  }
+  canReceiveProgrammaticFocus(element) {
+    if (!element || !this.isVisible(element))
+      return false;
+    const tabIndexAttr = element.getAttribute("tabindex");
+    if (tabIndexAttr != null) {
+      return Number(tabIndexAttr) >= 0;
+    }
+    return this.isElementNaturallyFocusable(element);
+  }
+  getInteractionContext(params) {
+    const { hostElement, targetElement, listElement, openTriggerElement } = params;
+    const activeElement = document.activeElement;
+    const isFocusInsideTarget = this.isInsideElement(targetElement, activeElement);
+    const isFocusInsideOpenTrigger = this.isInsideElement(openTriggerElement || null, activeElement);
+    const isFocusInsideHost = this.isInsideElement(hostElement, activeElement);
+    const isFocusInsideList = this.isInsideElement(listElement, activeElement);
+    const isTriggerFocused = isFocusInsideHost || isFocusInsideTarget || isFocusInsideOpenTrigger;
+    return {
+      activeElement,
+      isFocusInsideHost,
+      isFocusInsideList,
+      isFocusInsideOpenTrigger,
+      isFocusInsideTarget,
+      isTriggerFocused,
+    };
+  }
+  isInsideSearch(activeElement) {
+    return !!(activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest(".bcm-list__container-search"));
+  }
+  focusElement(element) {
+    var _a;
+    if (!element || !this.canReceiveProgrammaticFocus(element))
+      return false;
+    element.focus();
+    (_a = element.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(element, { block: "nearest" });
+    return this.isInsideElement(element, document.activeElement);
+  }
+  focusListElement(listElement, preferItem = false, direction = "first") {
+    const focusTarget = preferItem ? this.getPreferredListFocusElement(listElement, direction) : this.getFirstFocusableElement(listElement);
+    return this.focusElement(focusTarget);
+  }
+  focusListItemByOffset(listElement, activeElement, offset) {
+    const items = this.getListItems(listElement);
+    if (items.length === 0)
+      return false;
+    const currentItem = this.getCurrentListItem(listElement, activeElement);
+    const currentIndex = currentItem ? items.indexOf(currentItem) : -1;
+    const nextIndex = currentIndex === -1 ? (offset > 0 ? 0 : items.length - 1) : (currentIndex + offset + items.length) % items.length;
+    return this.focusElement(items[nextIndex]);
+  }
+  focusListItemWhenReady(listElement, itemId, remainingAttempts = 6) {
+    if (this.focusElement(this.getItemById(listElement, itemId)))
+      return true;
+    if (remainingAttempts <= 0)
+      return false;
+    requestAnimationFrame(() => {
+      this.focusListItemWhenReady(listElement, itemId, remainingAttempts - 1);
+    });
+    return true;
+  }
+  focusListElementWhenReady(listElement, preferItem = false, direction = "first", remainingAttempts = 6) {
+    if (this.focusListElement(listElement, preferItem, direction))
+      return true;
+    if (remainingAttempts <= 0)
+      return false;
+    requestAnimationFrame(() => {
+      this.focusListElementWhenReady(listElement, preferItem, direction, remainingAttempts - 1);
+    });
+    return true;
+  }
+  getParentListItem(item) {
+    if (!item)
+      return null;
+    const parentId = item.getAttribute("data-parent-id");
+    if (!parentId)
+      return null;
+    return this.getItemById(item.closest(".bcm-list__container"), parentId);
+  }
+  getFirstChildListItem(item) {
+    return (item === null || item === void 0 ? void 0 : item.querySelector(":scope > .bcm-list__item-childs > .bcm-list__item")) || null;
+  }
+  hasTreeChildren(item) {
+    return (item === null || item === void 0 ? void 0 : item.getAttribute("data-has-children")) === "true";
+  }
+  isTreeItemOpen(item) {
+    return (item === null || item === void 0 ? void 0 : item.getAttribute("data-open")) === "true";
+  }
+  isInsideAnyElement(elements, child) {
+    return elements.some(element => this.isInsideElement(element || null, child));
+  }
+  focusAdjacentOutside(params) {
+    const { hostElement, targetElement, listElement, openTriggerElement, direction } = params;
+    const relatedElements = [hostElement, targetElement, listElement, openTriggerElement];
+    const focusableElements = this.getFocusableElements(document.body).filter(item => !this.isInsideAnyElement(relatedElements, item));
+    const documentFocusableElements = this.getFocusableElements(document.body);
+    const relatedIndexes = documentFocusableElements
+      .map((item, index) => (this.isInsideAnyElement(relatedElements, item) ? index : -1))
+      .filter(index => index >= 0);
+    if (relatedIndexes.length === 0 || focusableElements.length === 0)
+      return false;
+    const anchorIndex = direction === "next" ? Math.max(...relatedIndexes) : Math.min(...relatedIndexes);
+    const focusTarget = direction === "next"
+      ? documentFocusableElements.slice(anchorIndex + 1).find(item => focusableElements.includes(item))
+      : documentFocusableElements
+        .slice(0, anchorIndex)
+        .reverse()
+        .find(item => focusableElements.includes(item));
+    return this.focusElement(focusTarget || null);
+  }
+  restoreTriggerFocus(params) {
+    const { hostElement, targetElement, autocompleteInput, openTriggerElement, preferOpenTrigger } = params;
+    const primaryTarget = preferOpenTrigger ? openTriggerElement : autocompleteInput || targetElement;
+    const secondaryTarget = preferOpenTrigger ? autocompleteInput || targetElement : openTriggerElement;
+    const focusTarget = this.getFirstFocusableElement(primaryTarget || null) || this.getFirstFocusableElement(secondaryTarget || null) || this.getFirstFocusableElement(hostElement);
+    focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.focus();
+  }
+  handleKeyDown(params) {
+    const { disabled, isOpen, isOverlayType } = params;
+    if (disabled || !isOverlayType)
+      return false;
+    return isOpen ? this.handleOpenOverlayKeyDown(params) : this.handleClosedOverlayKeyDown(params);
+  }
+  handleClosedOverlayKeyDown(params) {
+    const { event, hostElement, targetElement, listElement, openList, openTriggerElement } = params;
+    const keyCode = event.keyCode || event.which;
+    const isSpaceKey = event.key === " " || event.key === "Spacebar" || keyCode === 32;
+    const isArrowDownKey = event.key === "ArrowDown" || keyCode === 40;
+    const isArrowUpKey = event.key === "ArrowUp" || keyCode === 38;
+    const context = this.getInteractionContext({ hostElement, targetElement, listElement, openTriggerElement });
+    if (!context.isTriggerFocused)
+      return false;
+    if (this.isEditableElement(context.activeElement) && !isArrowDownKey && !isArrowUpKey)
+      return false;
+    if (!isSpaceKey && !isArrowDownKey && !isArrowUpKey)
+      return false;
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+    openList();
+    if (isArrowDownKey || isArrowUpKey) {
+      this.focusListElementWhenReady(listElement, true, isArrowUpKey ? "last" : "first");
+    }
+    return true;
+  }
+  handleOpenOverlayKeyDown(params) {
+    const { event, hostElement, targetElement, listElement, closeList, selectFocusedItem, openGroup, treeview, checkboxes, autocompleteInput, openTriggerElement } = params;
+    const keyCode = event.keyCode || event.which;
+    const isSpaceKey = event.key === " " || event.key === "Spacebar" || keyCode === 32;
+    const isEnterKey = event.key === "Enter" || keyCode === 13;
+    const isEscapeKey = event.key === "Escape" || keyCode === 27;
+    const isTabKey = event.key === "Tab" || keyCode === 9;
+    const isArrowDownKey = event.key === "ArrowDown" || keyCode === 40;
+    const isArrowUpKey = event.key === "ArrowUp" || keyCode === 38;
+    const isArrowRightKey = event.key === "ArrowRight" || keyCode === 39;
+    const isArrowLeftKey = event.key === "ArrowLeft" || keyCode === 37;
+    const context = this.getInteractionContext({ hostElement, targetElement, listElement, openTriggerElement });
+    const currentItem = this.getCurrentListItem(listElement, context.activeElement);
+    const isInsideSearch = this.isInsideSearch(context.activeElement);
+    if (isEscapeKey && (context.isTriggerFocused || context.isFocusInsideList || context.isFocusInsideHost)) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      closeList();
+      this.restoreTriggerFocus({ hostElement, targetElement, autocompleteInput, openTriggerElement, preferOpenTrigger: true });
+      return true;
+    }
+    if (isSpaceKey && checkboxes && currentItem && !isInsideSearch) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      selectFocusedItem(currentItem.id);
+      return true;
+    }
+    if (isSpaceKey && currentItem && !checkboxes && !isInsideSearch) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      return true;
+    }
+    if (isSpaceKey && context.isTriggerFocused && !this.isEditableElement(context.activeElement)) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      closeList();
+      this.restoreTriggerFocus({ hostElement, targetElement, autocompleteInput, openTriggerElement, preferOpenTrigger: true });
+      return true;
+    }
+    if ((isArrowDownKey || isArrowUpKey) && listElement && (context.isFocusInsideList || context.isTriggerFocused)) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      if (context.isFocusInsideList && !isInsideSearch) {
+        return this.focusListItemByOffset(listElement, context.activeElement, isArrowUpKey ? -1 : 1);
+      }
+      return this.focusListElementWhenReady(listElement, true, isArrowUpKey ? "last" : "first");
+    }
+    if (treeview && (isArrowRightKey || isArrowLeftKey) && currentItem && !isInsideSearch) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      if (isArrowRightKey) {
+        if (this.hasTreeChildren(currentItem) && !this.isTreeItemOpen(currentItem)) {
+          openGroup(currentItem.id);
+          return this.focusListItemWhenReady(listElement, currentItem.id);
+        }
+        return this.focusElement(this.getFirstChildListItem(currentItem));
+      }
+      if (this.hasTreeChildren(currentItem) && this.isTreeItemOpen(currentItem)) {
+        openGroup(currentItem.id);
+        return this.focusListItemWhenReady(listElement, currentItem.id);
+      }
+      return this.focusElement(this.getParentListItem(currentItem));
+    }
+    if (isEnterKey && context.isFocusInsideOpenTrigger && !this.isEditableElement(context.activeElement) && listElement) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      return this.focusListElementWhenReady(listElement, true, "first");
+    }
+    if (isEnterKey && listElement && context.isFocusInsideList && !isInsideSearch) {
+      const focusedItem = currentItem || listElement.querySelector(".bcm-list__item.focused");
+      if (focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.id) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        selectFocusedItem(focusedItem.id);
+        return true;
+      }
+    }
+    if (!isTabKey || !listElement)
+      return false;
+    const focusableElements = this.getFocusableElements(listElement);
+    const firstFocusableElement = focusableElements[0];
+    const lastFocusableElement = focusableElements[focusableElements.length - 1];
+    if (!event.shiftKey && context.isTriggerFocused) {
+      event.preventDefault();
+      return this.focusListElementWhenReady(listElement);
+    }
+    if (event.shiftKey && context.isFocusInsideList && firstFocusableElement && context.activeElement === firstFocusableElement) {
+      event.preventDefault();
+      closeList();
+      this.restoreTriggerFocus({ hostElement, targetElement, autocompleteInput, openTriggerElement, preferOpenTrigger: true });
+      return true;
+    }
+    if (!event.shiftKey && context.isFocusInsideList && lastFocusableElement && context.activeElement === lastFocusableElement) {
+      event.preventDefault();
+      closeList();
+      requestAnimationFrame(() => {
+        this.focusAdjacentOutside({ hostElement, targetElement, listElement, openTriggerElement, direction: "next" });
+      });
+      return true;
+    }
+    if (context.isFocusInsideList && focusableElements.length === 0) {
+      event.preventDefault();
+      closeList();
+      this.restoreTriggerFocus({ hostElement, targetElement, autocompleteInput, openTriggerElement, preferOpenTrigger: true });
+      return true;
+    }
+    return false;
+  }
+}

package/dist/collection/components/organism/list/list-key-control.js

@@ -92,13 +92,18 @@ export class ListKeyControl extends KeyControl {
       }
     }
   }
-  keyEnterControl() { }
-  keySpaceControl() {
+  keyEnterControl() {
+    const focused = this.getFocusedElement();
+    if (!(focused === null || focused === void 0 ? void 0 : focused.id))
+      return;
     if (this.isCheckBoxes) {
-      const { id } = this.getFocusedElement();
-      this.checkedItem(id);
+      this.checkedItem(focused.id);
+    }
+    else {
+      this.selectedItem(focused.id);
     }
   }
+  keySpaceControl() { }
   keyDown() {
     switch (this.getKeyCode()) {
       case Bcm.KeyCode.up:

package/dist/collection/components/organism/list/list.css

@@ -568,16 +568,13 @@
   left: 0;
   height: 0;
   width: 0;
-  transform: translateY(10%);
   z-index: 10800;
 }
 .bcm-list__container.bcm-list__type-linked-component.is-open, .bcm-list__container.bcm-list__type-select.is-open, .bcm-list__container.bcm-list__type-autocomplete.is-open {
-  transition: transform 50ms;
   display: flex;
 }
 .bcm-list__container.bcm-list__type-linked-component.is-open-animation, .bcm-list__container.bcm-list__type-select.is-open-animation, .bcm-list__container.bcm-list__type-autocomplete.is-open-animation {
   opacity: 1;
-  transform: translateY(0);
   visibility: visible;
 }
 .bcm-list__container.bcm-list__type-linked-component {
@@ -953,6 +950,14 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+@media (max-width: 768px), (pointer: coarse) {
+  .bcm-list__container-search .bcm-input__container, .bcm-list__autocomplete .bcm-input__container {
+    font-size: 16px;
+  }
+  .bcm-list__container-search .bcm-input-element, .bcm-list__autocomplete .bcm-input-element {
+    font-size: 16px;
+  }
+}
 
 .bcm-info-footer {
   text-align: right;