@carbon/web-components 2.0.0-beta.0 → 2.0.0-beta.2

package/scss/components/skeleton-text/skeleton-text.scss

@@ -11,4 +11,8 @@
 :host(#{$prefix}-skeleton-text) {
   display: block;
   width: 100%;
+
+  .#{$prefix}--skeleton__text {
+    margin-top: 0;
+  }
 }

package/scss/components/slider/slider.scss

@@ -35,5 +35,13 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-slider-input) {
-  outline: none;
+  input {
+    box-sizing: border-box;
+  }
+
+  &[readonly] {
+    input {
+      background-color: transparent;
+    }
+  }
 }

package/scss/components/text-input/text-input.scss

@@ -0,0 +1,38 @@
+//
+// Copyright IBM Corp. 2019, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/components/text-input/index';
+
+:host(#{$prefix}-text-input) {
+  // the base text-input class has a 100% so we need to propagate it up to the host element
+  width: 100%;
+  outline: none;
+
+  &[show-password-visibility-toggle] {
+    .#{$prefix}--text-input {
+      padding-right: $spacing-08;
+    }
+
+    &[size='sm'] .#{$prefix}--text-input__invalid-icon {
+      right: $spacing-07;
+    }
+
+    &[size='md'] .#{$prefix}--text-input__invalid-icon,
+    .#{$prefix}--text-input__invalid-icon {
+      right: $spacing-08;
+    }
+
+    &[size='lg'] .#{$prefix}--text-input__invalid-icon {
+      right: $spacing-09;
+    }
+  }
+}

package/scss/components/textarea/textarea.scss

@@ -11,4 +11,11 @@ $css--plex: true !default;
 
 :host(#{$prefix}-textarea) {
   outline: none;
+
+  &[cols='0'],
+  &:not([cols]),
+  textarea[cols='0'],
+  textarea:not([cols]) {
+    width: 100%;
+  }
 }

package/scss/components/tile/tile.scss

@@ -28,6 +28,10 @@ $css--plex: true !default;
   @extend .#{$prefix}--tile-group;
 
   background: transparent;
+
+  fieldset {
+    border: none;
+  }
 }
 
 :host(#{$prefix}-clickable-tile) {

package/scss/components/tooltip/tooltip.scss

@@ -7,142 +7,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-$css--plex: true !default;
-// `@include reset` with `variable-exists(css--reset) == false or $css--reset == false` breaks the dotted underline
-// TODO: Determine how to deal with `$css--reset` across components
-// $css--reset: true !default;
-// Caret's original size was 13.75px square
-$caret-size: 6.875px;
-$caret-horizontal-position: calc(#{$caret-size * (-1)} + 1px);
-
 @use '@carbon/styles/scss/config' as *;
-@use '@carbon/styles/scss/type' as *;
-@use '@carbon/styles/scss/utilities';
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/components/tooltip/index' as *;
-@use '@carbon/styles/scss/components/popover/index' as *;
-@use '@carbon/styles/scss/utilities/button-reset';
-
-// https://github.com/carbon-design-system/carbon/issues/11408
-// @include tooltip;
-
-:host(#{$prefix}-tooltip) {
-  @extend .#{$prefix}--tooltip__trigger;
-
-  .sb-tooltip-trigger {
-    @include button-reset.reset();
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 2rem;
-    height: 2rem;
-    border: 1px solid $border-subtle;
-  }
-
-  .sb-tooltip-trigger svg {
-    fill: $background-inverse;
-  }
-}
-
-:host(#{$prefix}-tooltip-body) {
-  @extend .#{$prefix}--tooltip;
-
-  ::slotted(#{$prefix}-tooltip-footer) {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 1rem;
-  }
-
-  ::slotted(p) {
-    @include type-style('body-short-01');
-
-    text-align: left;
-  }
-}
-
-:host(#{$prefix}-tooltip-body[direction='top']) {
-  margin-bottom: $spacing-03;
-
-  .#{$prefix}--tooltip__caret {
-    top: auto;
-    bottom: rem(-6px);
-    transform: rotate(180deg);
-  }
-}
-
-:host(#{$prefix}-tooltip-body[direction='right']) {
-  margin-left: $spacing-03;
-
-  .#{$prefix}--tooltip__caret {
-    right: auto;
-    left: $caret-horizontal-position;
-    // Adjust for change in Y position as caret rotates
-    transform: rotate(270deg) translate(25%, -50%);
-  }
-}
-
-:host(#{$prefix}-tooltip-body[direction='bottom']) {
-  margin-top: $spacing-03;
-}
-
-:host(#{$prefix}-tooltip-body[direction='left']) {
-  margin-right: $spacing-03;
-
-  .#{$prefix}--tooltip__caret {
-    right: $caret-horizontal-position;
-    left: auto;
-    // Adjust for change in Y position as caret rotates
-    transform: rotate(90deg) translate(-25%, -50%);
-  }
-}
-
-:host(#{$prefix}-tooltip-body[direction='top']),
-:host(#{$prefix}-tooltip-body[direction='bottom']) {
-  &[alignment='start'] {
-    .#{$prefix}--tooltip__caret {
-      margin-left: rem(17px);
-    }
-  }
-
-  &[alignment='end'] {
-    .#{$prefix}--tooltip__caret {
-      margin-right: rem(17px);
-    }
-  }
-}
-
-:host(#{$prefix}-tooltip-body[direction='left']),
-:host(#{$prefix}-tooltip-body[direction='right']) {
-  .#{$prefix}--tooltip__caret {
-    top: 50%;
-  }
-
-  &[alignment='start'] {
-    .#{$prefix}--tooltip__caret {
-      top: calc(#{$caret-size} + rem(17px));
-    }
-  }
-
-  &[alignment='end'] {
-    .#{$prefix}--tooltip__caret {
-      top: auto;
-      bottom: rem(17px);
-    }
-  }
-}
-
-:host(#{$prefix}-tooltip-body[open]) {
-  // TODO: audit
-  @extend .#{$prefix}--tooltip--shown !optional;
-}
-
-:host(#{$prefix}-tooltip-icon) {
-  outline: none;
+@use '../popover/popover';
+@use '@carbon/styles/scss/components/tooltip';
 
-  .#{$prefix}--tooltip__trigger:focus ::slotted(svg) {
-    outline: 1px solid $focus;
+:host(#{prefix}-tooltip-content) {
+  ::slotted(.#{$prefix}-tooltip-content) {
+    @extend .#{$prefix}--tooltip-content;
   }
 }

package/es/components/file-uploader/drop-container.d.ts

@@ -1,385 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import { LitElement } from 'lit';
-export { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME } from '../../globals/shared-enums';
-declare const BXFileDropContainer_base: {
-    new (...args: any[]): {
-        _handles: Set<import("../../globals/internal/handle").default>;
-        connectedCallback(): void;
-        disconnectedCallback(): void;
-        accessKey: string;
-        readonly accessKeyLabel: string;
-        autocapitalize: string;
-        dir: string;
-        draggable: boolean;
-        hidden: boolean;
-        inert: boolean;
-        innerText: string;
-        lang: string;
-        readonly offsetHeight: number;
-        readonly offsetLeft: number;
-        readonly offsetParent: Element | null;
-        readonly offsetTop: number;
-        readonly offsetWidth: number;
-        outerText: string;
-        spellcheck: boolean;
-        title: string;
-        translate: boolean;
-        attachInternals(): ElementInternals;
-        click(): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
-        removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
-        readonly attributes: NamedNodeMap;
-        readonly classList: DOMTokenList;
-        className: string;
-        readonly clientHeight: number;
-        readonly clientLeft: number;
-        readonly clientTop: number;
-        readonly clientWidth: number;
-        id: string;
-        readonly localName: string;
-        readonly namespaceURI: string | null;
-        onfullscreenchange: ((this: Element, ev: Event) => any) | null;
-        onfullscreenerror: ((this: Element, ev: Event) => any) | null;
-        outerHTML: string;
-        readonly ownerDocument: Document;
-        readonly part: DOMTokenList;
-        readonly prefix: string | null;
-        readonly scrollHeight: number;
-        scrollLeft: number;
-        scrollTop: number;
-        readonly scrollWidth: number;
-        readonly shadowRoot: ShadowRoot | null;
-        slot: string;
-        readonly tagName: string;
-        attachShadow(init: ShadowRootInit): ShadowRoot;
-        closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
-        closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
-        closest<E extends Element = Element>(selectors: string): E | null;
-        getAttribute(qualifiedName: string): string | null;
-        getAttributeNS(namespace: string | null, localName: string): string | null;
-        getAttributeNames(): string[];
-        getAttributeNode(qualifiedName: string): Attr | null;
-        getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
-        getBoundingClientRect(): DOMRect;
-        getClientRects(): DOMRectList;
-        getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
-        getElementsByTagName<K_4 extends keyof HTMLElementTagNameMap>(qualifiedName: K_4): HTMLCollectionOf<HTMLElementTagNameMap[K_4]>;
-        getElementsByTagName<K_5 extends keyof SVGElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<SVGElementTagNameMap[K_5]>;
-        getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
-        getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
-        getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
-        getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
-        hasAttribute(qualifiedName: string): boolean;
-        hasAttributeNS(namespace: string | null, localName: string): boolean;
-        hasAttributes(): boolean;
-        hasPointerCapture(pointerId: number): boolean;
-        insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
-        insertAdjacentHTML(position: InsertPosition, text: string): void;
-        insertAdjacentText(where: InsertPosition, data: string): void;
-        matches(selectors: string): boolean;
-        releasePointerCapture(pointerId: number): void;
-        removeAttribute(qualifiedName: string): void;
-        removeAttributeNS(namespace: string | null, localName: string): void;
-        removeAttributeNode(attr: Attr): Attr;
-        requestFullscreen(options?: FullscreenOptions | undefined): Promise<void>;
-        requestPointerLock(): void;
-        scroll(options?: ScrollToOptions | undefined): void;
-        scroll(x: number, y: number): void;
-        scrollBy(options?: ScrollToOptions | undefined): void;
-        scrollBy(x: number, y: number): void;
-        scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
-        scrollTo(options?: ScrollToOptions | undefined): void;
-        scrollTo(x: number, y: number): void;
-        setAttribute(qualifiedName: string, value: string): void;
-        setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
-        setAttributeNode(attr: Attr): Attr | null;
-        setAttributeNodeNS(attr: Attr): Attr | null;
-        setPointerCapture(pointerId: number): void;
-        toggleAttribute(qualifiedName: string, force?: boolean | undefined): boolean;
-        webkitMatchesSelector(selectors: string): boolean;
-        readonly baseURI: string;
-        readonly childNodes: NodeListOf<ChildNode>;
-        readonly firstChild: ChildNode | null;
-        readonly isConnected: boolean;
-        readonly lastChild: ChildNode | null;
-        readonly nextSibling: ChildNode | null;
-        readonly nodeName: string;
-        readonly nodeType: number;
-        nodeValue: string | null;
-        readonly parentElement: HTMLElement | null;
-        readonly parentNode: ParentNode | null;
-        readonly previousSibling: ChildNode | null;
-        textContent: string | null;
-        appendChild<T extends Node>(node: T): T;
-        cloneNode(deep?: boolean | undefined): Node;
-        compareDocumentPosition(other: Node): number;
-        contains(other: Node | null): boolean;
-        getRootNode(options?: GetRootNodeOptions | undefined): Node;
-        hasChildNodes(): boolean;
-        insertBefore<T_1 extends Node>(node: T_1, child: Node | null): T_1;
-        isDefaultNamespace(namespace: string | null): boolean;
-        isEqualNode(otherNode: Node | null): boolean;
-        isSameNode(otherNode: Node | null): boolean;
-        lookupNamespaceURI(prefix: string | null): string | null;
-        lookupPrefix(namespace: string | null): string | null;
-        normalize(): void;
-        removeChild<T_2 extends Node>(child: T_2): T_2;
-        replaceChild<T_3 extends Node>(node: Node, child: T_3): T_3;
-        readonly ATTRIBUTE_NODE: number;
-        readonly CDATA_SECTION_NODE: number;
-        readonly COMMENT_NODE: number;
-        readonly DOCUMENT_FRAGMENT_NODE: number;
-        readonly DOCUMENT_NODE: number;
-        readonly DOCUMENT_POSITION_CONTAINED_BY: number;
-        readonly DOCUMENT_POSITION_CONTAINS: number;
-        readonly DOCUMENT_POSITION_DISCONNECTED: number;
-        readonly DOCUMENT_POSITION_FOLLOWING: number;
-        readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;
-        readonly DOCUMENT_POSITION_PRECEDING: number;
-        readonly DOCUMENT_TYPE_NODE: number;
-        readonly ELEMENT_NODE: number;
-        readonly ENTITY_NODE: number;
-        readonly ENTITY_REFERENCE_NODE: number;
-        readonly NOTATION_NODE: number;
-        readonly PROCESSING_INSTRUCTION_NODE: number;
-        readonly TEXT_NODE: number;
-        dispatchEvent(event: Event): boolean;
-        ariaAtomic: string | null;
-        ariaAutoComplete: string | null;
-        ariaBusy: string | null;
-        ariaChecked: string | null;
-        ariaColCount: string | null;
-        ariaColIndex: string | null;
-        ariaColSpan: string | null;
-        ariaCurrent: string | null;
-        ariaDisabled: string | null;
-        ariaExpanded: string | null;
-        ariaHasPopup: string | null;
-        ariaHidden: string | null;
-        ariaKeyShortcuts: string | null;
-        ariaLabel: string | null;
-        ariaLevel: string | null;
-        ariaLive: string | null;
-        ariaModal: string | null;
-        ariaMultiLine: string | null;
-        ariaMultiSelectable: string | null;
-        ariaOrientation: string | null;
-        ariaPlaceholder: string | null;
-        ariaPosInSet: string | null;
-        ariaPressed: string | null;
-        ariaReadOnly: string | null;
-        ariaRequired: string | null;
-        ariaRoleDescription: string | null;
-        ariaRowCount: string | null;
-        ariaRowIndex: string | null;
-        ariaRowSpan: string | null;
-        ariaSelected: string | null;
-        ariaSetSize: string | null;
-        ariaSort: string | null;
-        ariaValueMax: string | null;
-        ariaValueMin: string | null;
-        ariaValueNow: string | null;
-        ariaValueText: string | null;
-        animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
-        getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
-        after(...nodes: (string | Node)[]): void;
-        before(...nodes: (string | Node)[]): void;
-        remove(): void;
-        replaceWith(...nodes: (string | Node)[]): void;
-        innerHTML: string;
-        readonly nextElementSibling: Element | null;
-        readonly previousElementSibling: Element | null;
-        readonly childElementCount: number;
-        readonly children: HTMLCollection;
-        readonly firstElementChild: Element | null;
-        readonly lastElementChild: Element | null;
-        append(...nodes: (string | Node)[]): void;
-        prepend(...nodes: (string | Node)[]): void;
-        querySelector<K_6 extends keyof HTMLElementTagNameMap>(selectors: K_6): HTMLElementTagNameMap[K_6] | null;
-        querySelector<K_7 extends keyof SVGElementTagNameMap>(selectors: K_7): SVGElementTagNameMap[K_7] | null;
-        querySelector<E_1 extends Element = Element>(selectors: string): E_1 | null;
-        querySelectorAll<K_8 extends keyof HTMLElementTagNameMap>(selectors: K_8): NodeListOf<HTMLElementTagNameMap[K_8]>;
-        querySelectorAll<K_9 extends keyof SVGElementTagNameMap>(selectors: K_9): NodeListOf<SVGElementTagNameMap[K_9]>;
-        querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
-        replaceChildren(...nodes: (string | Node)[]): void;
-        readonly assignedSlot: HTMLSlotElement | null;
-        oncopy: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
-        oncut: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
-        onpaste: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
-        readonly style: CSSStyleDeclaration;
-        contentEditable: string;
-        enterKeyHint: string;
-        inputMode: string;
-        readonly isContentEditable: boolean;
-        onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
-        onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
-        onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
-        onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
-        onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
-        onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
-        oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-        ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-        ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-        ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-        ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-        ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-        ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
-        ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onended: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onerror: OnErrorEventHandler;
-        onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
-        onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
-        ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
-        onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
-        onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
-        onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
-        onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
-        onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any) | null;
-        onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
-        onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
-        onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
-        onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
-        ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
-        ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
-        ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
-        ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
-        ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
-        ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
-        ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
-        onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
-        autofocus: boolean;
-        readonly dataset: DOMStringMap;
-        nonce?: string | undefined;
-        tabIndex: number;
-        blur(): void;
-        focus(options?: FocusOptions | undefined): void;
-    };
-    _hostListeners: {
-        [listenerName: string]: {
-            [type: string]: {
-                options?: boolean | AddEventListenerOptions | undefined;
-            };
-        };
-    };
-} & typeof LitElement;
-/**
- * File drop container.
- *
- * @element cds-file-drop-container
- * @fires cds-file-drop-container-changed The custom event fired when there is a user gesture to select files to upload.
- */
-declare class BXFileDropContainer extends BXFileDropContainer_base {
-    /**
-     * `true` to show the active state of this UI.
-     */
-    private _active;
-    /**
-     * Handles user gesture to select files to upload.
-     *
-     * @param event The event.
-     */
-    private _handleChange;
-    /**
-     * Handles `dragover`, `dragleave` and `drop` events.
-     *
-     * @param event The event.
-     */
-    private _handleDrag;
-    /**
-     * @param event The event.
-     * @returns The list of files user chose to upload.
-     */
-    private _getFiles;
-    /**
-     * The file types the file input should accept, separated by space.
-     */
-    accept: string;
-    /**
-     * `true` if this drop container should be disabled.
-     */
-    disabled: boolean;
-    /**
-     * `true` if this drop container should accept more than one files at once.
-     * Note that even with `false` set here, user _can_ select multiple files one by one.
-     */
-    multiple: boolean;
-    /**
-     * The shadow DOM slot to put this drop container in.
-     */
-    slot: string;
-    render(): import("lit-html").TemplateResult<1>;
-    /**
-     * The name of the custom event fired when there is a user gesture to select files to upload.
-     */
-    static get eventChange(): string;
-    /**
-     * A selector that will return the file `<input>`.
-     */
-    static get selectorInput(): string;
-    static styles: any;
-}
-export default BXFileDropContainer;
-
-//# sourceMappingURL=drop-container.d.ts.map

package/es/components/file-uploader/drop-container.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"sources":["components/file-uploader/drop-container.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAQvC,OAAO,EAAE,yBAAyB,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAU5F;;;;;GAKG;AACH,cACM,mBAAoB,SAAQ,wBAA6B;IAC7D;;OAEG;IACH,OAAO,CAAC,OAAO,CAAS;IAExB;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAoBrB;;;;OAIG;IAKH,OAAO,CAAC,WAAW;IAiBnB;;;OAGG;IACH,OAAO,CAAC,SAAS;IA0BjB;;OAEG;IAEH,MAAM,SAAM;IAEZ;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,SAAoB;IAExB,MAAM;IAkCN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED;;OAEG;IACH,MAAM,KAAK,aAAa,WAEvB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,mBAAmB,CAAC","file":"drop-container.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport styles from './file-uploader.scss';\n\nexport { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME } from '../../globals/shared-enums';\n\n/**\n * The value to set to `event.dataTransfer.dropEffect`, keyed by the event nane.\n */\nconst dropEffects = {\n  dragover: 'copy',\n  dragleave: 'move',\n};\n\n/**\n * File drop container.\n *\n * @element cds-file-drop-container\n * @fires cds-file-drop-container-changed The custom event fired when there is a user gesture to select files to upload.\n */\n@customElement(`${prefix}-file-drop-container`)\nclass BXFileDropContainer extends HostListenerMixin(LitElement) {\n  /**\n   * `true` to show the active state of this UI.\n   */\n  private _active = false;\n\n  /**\n   * Handles user gesture to select files to upload.\n   *\n   * @param event The event.\n   */\n  private _handleChange(event: Event | DragEvent) {\n    const addedFiles = this._getFiles(event);\n    const { eventChange, selectorInput } = this\n      .constructor as typeof BXFileDropContainer;\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          addedFiles,\n        },\n      })\n    );\n\n    const fileInput = this?.shadowRoot?.querySelector(selectorInput);\n    if (fileInput) {\n      (fileInput as HTMLInputElement).value = ''; // carbon-web-components#904\n    }\n  }\n\n  /**\n   * Handles `dragover`, `dragleave` and `drop` events.\n   *\n   * @param event The event.\n   */\n  @HostListener('dragover')\n  @HostListener('dragleave')\n  @HostListener('drop')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleDrag(event: DragEvent) {\n    event.preventDefault(); // Prevents page navigation upon dropping\n    if (this.disabled) {\n      return;\n    }\n    const { dataTransfer, type } = event;\n    const dropEffect = dropEffects[type];\n    if (dataTransfer && dropEffect) {\n      dataTransfer.dropEffect = dropEffect;\n    }\n    this._active = type === 'dragover';\n    if (type === 'drop') {\n      this._handleChange(event);\n    }\n    this.requestUpdate();\n  }\n\n  /**\n   * @param event The event.\n   * @returns The list of files user chose to upload.\n   */\n  private _getFiles(event: Event | DragEvent) {\n    const { files } =\n      (event.type === 'drop'\n        ? (event as DragEvent).dataTransfer\n        : (event.target as HTMLInputElement)) ?? {};\n    const { accept } = this;\n    if (!accept || !/^(change|drop)$/.test(event.type)) {\n      return Array.from(files ?? []);\n    }\n    const acceptedTypes = new Set(accept.split(' '));\n    return Array.prototype.filter.call(\n      files,\n      ({ name, type: mimeType = '' }) => {\n        const fileExtensionRegExp = /\\.[^.]+$/;\n        const hasFileExtension = fileExtensionRegExp.test(name);\n        const [fileExtension] = !hasFileExtension\n          ? [undefined]\n          : fileExtensionRegExp.exec(name) ?? [];\n        return (\n          acceptedTypes.has(mimeType) ||\n          (fileExtension && acceptedTypes.has(fileExtension))\n        );\n      }\n    ) as File[];\n  }\n\n  /**\n   * The file types the file input should accept, separated by space.\n   */\n  @property()\n  accept = '';\n\n  /**\n   * `true` if this drop container should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * `true` if this drop container should accept more than one files at once.\n   * Note that even with `false` set here, user _can_ select multiple files one by one.\n   */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /**\n   * The shadow DOM slot to put this drop container in.\n   */\n  @property({ reflect: true })\n  slot = 'drop-container';\n\n  render() {\n    const {\n      accept,\n      disabled,\n      multiple,\n      _active: active,\n      _handleChange: handleChange,\n    } = this;\n    const labelClasses = classMap({\n      [`${prefix}--file-browse-btn`]: true,\n      [`${prefix}--file-browse-btn--disabled`]: disabled,\n    });\n    const dropareaClasses = classMap({\n      [`${prefix}--file__drop-container`]: true,\n      [`${prefix}--file__drop-container--drag-over`]: active,\n    });\n    return html`\n      <label class=\"${labelClasses}\" for=\"file\" tabindex=\"0\">\n        <div class=\"${dropareaClasses}\" role=\"button\">\n          <slot></slot>\n          <input\n            id=\"file\"\n            type=\"file\"\n            class=\"${prefix}--file-input\"\n            tabindex=\"-1\"\n            accept=\"${ifNonEmpty(accept)}\"\n            ?disabled=\"${disabled}\"\n            ?multiple=\"${multiple}\"\n            @change=\"${handleChange}\" />\n        </div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired when there is a user gesture to select files to upload.\n   */\n  static get eventChange() {\n    return `${prefix}-file-drop-container-changed`;\n  }\n\n  /**\n   * A selector that will return the file `<input>`.\n   */\n  static get selectorInput() {\n    return `.${prefix}--file-input`;\n  }\n\n  static styles = styles;\n}\n\nexport default BXFileDropContainer;\n"]}