@ebay/ui-core-react 7.0.0 → 7.1.0-alpha.2

package/use-tooltip-Bibsm2rU.mjs

@@ -0,0 +1,158 @@
+import l, { Children as E, cloneElement as x, useState as T } from "react";
+import f from "classnames";
+import { w as g, E as h } from "./icon-B_a65KUD.mjs";
+import { f as i, e as d } from "./utils-BipBqkOS.mjs";
+const u = ({ children: t, className: o, forwardedRef: s, ...a }) => (E.only(t), x(t, {
+  ref: s,
+  ...a,
+  className: f(o, t.props.className)
+})), N = ({ className: t, type: o, isExpanded: s, children: a, forwardedRef: e, ...p }) => {
+  var m;
+  const c = i(a, u), n = d(a, u)[0];
+  if (!c)
+    throw new Error("Tooltip: Please use a TooltipHost that defines the host of the tooltip");
+  const r = x(c, {
+    className: `${o}__host`,
+    "aria-expanded": s,
+    "aria-describedby": (m = n == null ? void 0 : n.props) == null ? void 0 : m.id,
+    ...c.props
+  });
+  return l.createElement(
+    "span",
+    { ...p, ref: e, className: f(t, o, {
+      [`${o}--expanded`]: s
+    }) },
+    r,
+    n
+  );
+}, S = g(N), $ = "bottom", C = {
+  tooltip: "tooltip",
+  tourtip: "region",
+  infotip: ""
+}, X = {
+  left: {
+    transform: "translateX(16px) translateY(-50%) scale3d(1,1,1)",
+    left: "100%",
+    right: "auto",
+    top: "-6px",
+    bottom: "auto"
+  },
+  "left-top": {
+    transform: "translateX(16px) scale3d(1,1,1)",
+    left: "100%",
+    right: "auto",
+    top: "-100%",
+    bottom: "auto"
+  },
+  "left-bottom": {
+    transform: "translateX(16px) scale3d(1,1,1)",
+    left: "100%",
+    right: "auto",
+    top: "auto",
+    bottom: "-10px"
+  },
+  right: {
+    transform: "translateX(-16px) translateY(-50%) scale3d(1,1,1)",
+    left: "auto",
+    right: "100%",
+    top: "-6px",
+    bottom: "auto"
+  },
+  "right-top": {
+    transform: "translateX(-16px) scale3d(1,1,1)",
+    left: "auto",
+    right: "100%",
+    top: "-100%",
+    bottom: "auto"
+  },
+  "right-bottom": {
+    transform: "translateX(-16px) scale3d(1,1,1)",
+    left: "auto",
+    right: "100%",
+    top: "auto",
+    bottom: "-50%"
+  },
+  top: {
+    transform: "translateX(-50%) scale3d(1,1,1)",
+    left: "50%",
+    right: "auto",
+    top: "calc(100% + 2px)",
+    bottom: "auto"
+  },
+  "top-left": {
+    transform: "scale3d(1,1,1)",
+    left: "-10px",
+    right: "auto",
+    top: "calc(100% + 2px)",
+    bottom: "auto"
+  },
+  "top-right": {
+    transform: "scale3d(1,1,1)",
+    left: "auto",
+    right: "-10px",
+    top: "calc(100% + 2px)",
+    bottom: "auto"
+  },
+  "bottom-right": {
+    transform: "scale3d(1,1,1)",
+    left: "auto",
+    right: "-10px",
+    top: "auto",
+    bottom: "calc(100% + 12px)"
+  },
+  "bottom-left": {
+    transform: "scale3d(1,1,1)",
+    left: "-10px",
+    right: "auto",
+    top: "auto",
+    bottom: "calc(100% + 12px)"
+  },
+  bottom: {
+    transform: "translateX(-50%) scale3d(1,1,1)",
+    left: "50%",
+    right: "auto",
+    top: "auto",
+    bottom: "calc(100% + 12px)"
+  }
+}, I = () => null, b = ({ children: t, className: o, type: s = "tourtip" }) => l.createElement("div", { className: f(`${s}__footer`, o) }, t), Y = ({ id: t, style: o, pointer: s = $, children: a, type: e = "tooltip", showCloseButton: p, a11yCloseText: c, onClose: n }) => {
+  const r = i(a, I), m = i(a, b), _ = d(a, b);
+  return l.createElement(
+    "span",
+    { className: `${e}__overlay`, id: t, role: C[e] || null, style: { ...X[s], ...o } },
+    l.createElement("span", { className: `${e}__pointer ${e}__pointer--${s}` }),
+    l.createElement(
+      "span",
+      { className: `${e}__mask` },
+      l.createElement(
+        "span",
+        { className: `${e}__cell` },
+        l.createElement("span", { className: `${e}__content` }, _),
+        p ? l.createElement(
+          "button",
+          { ...r == null ? void 0 : r.props, className: `icon-btn icon-btn--transparent ${e}__close`, type: "button", "aria-label": c, onClick: n },
+          l.createElement(h, { name: "close16" })
+        ) : null,
+        m
+      )
+    )
+  );
+}, H = ({ onExpand: t, onCollapse: o, initialExpanded: s = !1, hostRef: a }) => {
+  const [e, p] = T(s);
+  return {
+    isExpanded: e,
+    expandTooltip: () => {
+      p(!0), t && t();
+    },
+    collapseTooltip: () => {
+      var r;
+      p(!1), o && o(), (r = a == null ? void 0 : a.current) == null || r.focus();
+    }
+  };
+};
+export {
+  S as T,
+  u as a,
+  Y as b,
+  b as c,
+  H as u
+};

package/utils-BipBqkOS.mjs

@@ -0,0 +1,21 @@
+import { Children as o } from "react";
+import "./array.polyfill.flat-Bj5UhY_-.mjs";
+function f(e = [], t) {
+  return o.toArray(e).find(({ type: n }) => n === t) || null;
+}
+function m(e = [], t) {
+  return o.toArray(e).filter(({ type: n }) => n !== t);
+}
+function c(e = [], t) {
+  const r = o.toArray(e), n = [t].flat();
+  return r.filter(({ type: l }) => n.includes(l));
+}
+function u(e = [], t) {
+  return o.toArray(e).filter(t);
+}
+export {
+  u as a,
+  c as b,
+  m as e,
+  f
+};

package/utils-C9NL3q0j.js

@@ -0,0 +1 @@
+"use strict";const l=require("react");require("./array.polyfill.flat-5BAolFdk.js");function o(e=[],n){return l.Children.toArray(e).find(({type:t})=>t===n)||null}function s(e=[],n){return l.Children.toArray(e).filter(({type:t})=>t!==n)}function c(e=[],n){const r=l.Children.toArray(e),t=[n].flat();return r.filter(({type:i})=>t.includes(i))}function f(e=[],n){return l.Children.toArray(e).filter(n)}exports.excludeComponent=s;exports.filterBy=f;exports.filterByType=c;exports.findComponent=o;

package/common/component-utils/array.polyfill.flat.js

@@ -1,32 +0,0 @@
-"use strict";
-/**
- * adapted from:
- * https://github.com/behnammodi/polyfill/blob/master/array.polyfill.js
- * Array.prototype.flat()
- * version 0.0.0
- * Feature            Chrome  Firefox Internet Explorer   Opera    Safari    Edge
- * Basic support      69      62      (No)                  56    12      (No)
- * -------------------------------------------------------------------------------
- */
-if (!Array.prototype.flat) {
-    // eslint-disable-next-line no-extend-native
-    Object.defineProperty(Array.prototype, 'flat', {
-        configurable: true,
-        writable: true,
-        value: function (d) {
-            const depthArg = typeof d === 'undefined' ? 1 : Number(d) || 0;
-            const result = [];
-            const forEach = result.forEach;
-            const flatDeep = (arr, depth) => forEach.call(arr, val => {
-                if (depth > 0 && Array.isArray(val)) {
-                    flatDeep(val, depth - 1);
-                }
-                else {
-                    result.push(val);
-                }
-            });
-            flatDeep(this, depthArg);
-            return result;
-        }
-    });
-}

package/common/component-utils/forwardRef.js

@@ -1,37 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.withForwardRef = void 0;
-const react_1 = __importStar(require("react"));
-const getDisplayName = (Component) => Component.displayName || Component.name || 'Component';
-// Typescript will automatically find the return type crom forwardRef() function
-// Disabling eslint for this use case
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const withForwardRef = (Component) => {
-    const ForwardRef = (0, react_1.forwardRef)((props, ref) => react_1.default.createElement(Component, Object.assign({}, props, { forwardedRef: ref })));
-    ForwardRef.displayName = getDisplayName(Component);
-    return ForwardRef;
-};
-exports.withForwardRef = withForwardRef;

package/common/component-utils/index.js

@@ -1,18 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./forwardRef"), exports);
-__exportStar(require("./utils"), exports);

package/common/component-utils/usePrevious.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrevious = void 0;
-const react_1 = require("react");
-function usePrevious(value) {
-    const ref = (0, react_1.useRef)();
-    (0, react_1.useEffect)(() => {
-        ref.current = value;
-    }, [value]);
-    return ref.current;
-}
-exports.usePrevious = usePrevious;

package/common/component-utils/utils.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.filterBy = exports.filterByType = exports.excludeComponent = exports.findComponent = void 0;
-const react_1 = require("react");
-require("./array.polyfill.flat"); // for Mobile Safari 11
-function findComponent(nodes = [], componentType) {
-    const elements = react_1.Children.toArray(nodes);
-    return elements.find(({ type }) => type === componentType) || null;
-}
-exports.findComponent = findComponent;
-function excludeComponent(nodes = [], componentType) {
-    const elements = react_1.Children.toArray(nodes);
-    return elements.filter(({ type }) => type !== componentType);
-}
-exports.excludeComponent = excludeComponent;
-function filterByType(nodes = [], componentType) {
-    const elements = react_1.Children.toArray(nodes);
-    const types = [componentType].flat();
-    return elements.filter(({ type }) => types.includes(type));
-}
-exports.filterByType = filterByType;
-function filterBy(nodes = [], predicate) {
-    const elements = react_1.Children.toArray(nodes);
-    return elements.filter(predicate);
-}
-exports.filterBy = filterBy;

package/common/debounce.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.debounce = void 0;
-function debounce(fn, ms) {
-    let timer;
-    return (...args) => {
-        clearTimeout(timer);
-        timer = setTimeout(() => fn(...args), ms);
-    };
-}
-exports.debounce = debounce;

package/common/event-utils/index.js

@@ -1,123 +0,0 @@
-"use strict";
-/*
-* Based on https://github.com/eBay/ebayui-core/edit/master/src/common/event-utils/index.js
-*/
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.wrapEvent = exports.handleResize = exports.removeEventListener = exports.addEventListener = exports.preventDefaultIfHijax = exports.handleTextInput = exports.handleLeftRightArrowsKeydown = exports.handleUpDownArrowsKeydown = exports.handleEscapeKeydown = exports.isActionKey = exports.handleActionKeydown = exports.handleEnterKeydown = void 0;
-/**
- * Generic keydown handler used by more specific cases
- * @param {Array} keyList: List of acceptable keys
- * @param {KeyboardEvent} e
- * @param {Function} callback
- */
-function handleKeydown(keyList, e, callback = () => { }) {
-    if (keyList.includes(e.key)) {
-        callback();
-    }
-}
-// inverse of found keys
-function handleNotKeydown(keyList, e, callback = () => { }) {
-    if (!keyList.includes(e.key)) {
-        callback();
-    }
-}
-function handleEnterKeydown(e, callback) {
-    if (e.key === 'Enter') {
-        callback();
-    }
-}
-exports.handleEnterKeydown = handleEnterKeydown;
-function handleActionKeydown(e, callback) {
-    if (isActionKey(e.key)) {
-        callback();
-    }
-}
-exports.handleActionKeydown = handleActionKeydown;
-function isActionKey(key) {
-    return [' ', 'Enter'].includes(key);
-}
-exports.isActionKey = isActionKey;
-function handleEscapeKeydown(e, callback) {
-    handleKeydown(['Esc', 'Escape'], e, callback);
-}
-exports.handleEscapeKeydown = handleEscapeKeydown;
-function handleUpDownArrowsKeydown(e, callback) {
-    handleKeydown(['Up', 'ArrowUp', 'Down', 'ArrowDown'], e, callback);
-}
-exports.handleUpDownArrowsKeydown = handleUpDownArrowsKeydown;
-function handleLeftRightArrowsKeydown(e, callback) {
-    handleKeydown(['Left', 'ArrowLeft', 'Right', 'ArrowRight'], e, callback);
-}
-exports.handleLeftRightArrowsKeydown = handleLeftRightArrowsKeydown;
-// only fire for character input, not modifier/meta keys (enter, escape, backspace, tab, etc.)
-function handleTextInput(e, callback) {
-    const keyList = [
-        // Edge
-        'Esc',
-        'Left',
-        'Up',
-        'Right',
-        'Down',
-        // Browsers
-        'Tab',
-        'Enter',
-        'Shift',
-        'Control',
-        'Alt',
-        'CapsLock',
-        'Escape',
-        'ArrowLeft',
-        'ArrowUp',
-        'ArrowRight',
-        'ArrowDown',
-        'Meta'
-    ];
-    handleNotKeydown(keyList, e, callback);
-}
-exports.handleTextInput = handleTextInput;
-function preventDefaultIfHijax(e, hijax) {
-    if (hijax) {
-        e.preventDefault();
-    }
-}
-exports.preventDefaultIfHijax = preventDefaultIfHijax;
-const handlers = [];
-function addEventListener(_, handler) {
-    if (handlers.length === 0) {
-        window.addEventListener('resize', handleResize);
-    }
-    handlers.push(handler);
-}
-exports.addEventListener = addEventListener;
-function removeEventListener(_, handler) {
-    if (handlers.length === 1) {
-        window.removeEventListener('resize', handleResize);
-    }
-    handlers.splice(handlers.indexOf(handler), 1);
-}
-exports.removeEventListener = removeEventListener;
-function handleResize(e) {
-    window.removeEventListener('resize', handleResize);
-    const callback = () => {
-        if (handlers.length) {
-            handlers.forEach(handler => handler(e));
-            window.addEventListener('resize', handleResize);
-        }
-    };
-    if (window.requestAnimationFrame) {
-        window.requestAnimationFrame(callback);
-    }
-    else {
-        window.setTimeout(callback, 16);
-    }
-}
-exports.handleResize = handleResize;
-function wrapEvent(parentEventHandler = () => { }, localEventHandler) {
-    return (e) => {
-        parentEventHandler(e);
-        if (!e.defaultPrevented) {
-            return localEventHandler(e);
-        }
-    };
-}
-exports.wrapEvent = wrapEvent;

package/common/event-utils/types.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-/*
-    type ClipboardEventHandler<T = Element> = EventHandler<ClipboardEvent<T>>;
-    type CompositionEventHandler<T = Element> = EventHandler<CompositionEvent<T>>;
-    type DragEventHandler<T = Element> = EventHandler<DragEvent<T>>;
-    type FormEventHandler<T = Element> = EventHandler<FormEvent<T>>;
-    type TouchEventHandler<T = Element> = EventHandler<TouchEvent<T>>;
-    type PointerEventHandler<T = Element> = EventHandler<PointerEvent<T>>;
-    type UIEventHandler<T = Element> = EventHandler<UIEvent<T>>;
-    type WheelEventHandler<T = Element> = EventHandler<WheelEvent<T>>;
-    type AnimationEventHandler<T = Element> = EventHandler<AnimationEvent<T>>;
-    type TransitionEventHandler<T = Element> = EventHandler<TransitionEvent<T>>;
-*/

package/common/event-utils/use-key-press.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-const useKeyPress = () => {
-    const [arrowUpPressed, setArrowUpPressed] = (0, react_1.useState)(false);
-    const [arrowDownPressed, setArrowDownPressed] = (0, react_1.useState)(false);
-    const upHandler = ({ key }) => {
-        const fn = {
-            ArrowUp: setArrowUpPressed,
-            ArrowDown: setArrowDownPressed
-        }[key];
-        if (fn)
-            fn(false);
-    };
-    const downHandler = ({ key }) => {
-        const fn = {
-            ArrowUp: setArrowUpPressed,
-            ArrowDown: setArrowDownPressed
-        }[key];
-        if (fn)
-            fn(true);
-    };
-    (0, react_1.useEffect)(() => {
-        window.addEventListener('keydown', downHandler);
-        window.addEventListener('keyup', upHandler);
-        return () => {
-            window.removeEventListener('keydown', downHandler);
-            window.removeEventListener('keyup', upHandler);
-        };
-    }, []);
-    return [arrowUpPressed, arrowDownPressed];
-};
-exports.default = useKeyPress;

package/common/event-utils/use-roving-index.js

@@ -1,35 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-const use_key_press_1 = __importDefault(require("./use-key-press"));
-const useRovingIndex = (children, FocusableType, defaultValue) => {
-    const [rovingIndex, setRovingIndex] = (0, react_1.useState)(defaultValue);
-    const [arrowUpPressed, arrowDownPressed] = (0, use_key_press_1.default)();
-    const rovingIndexArray = react_1.Children
-        .toArray(children)
-        .reduce((focusables, child, i) => child.type === FocusableType ? [...focusables, i] : focusables, []);
-    const currentIndex = rovingIndexArray.indexOf(rovingIndex);
-    const previousOrCurrent = () => {
-        if (currentIndex === -1)
-            return rovingIndex;
-        const previousRovingIndex = rovingIndexArray[currentIndex - 1];
-        return previousRovingIndex === undefined ? rovingIndex : previousRovingIndex;
-    };
-    const nextOrCurrent = () => {
-        if (currentIndex === -1)
-            return rovingIndex;
-        const nextRovingIndex = rovingIndexArray[currentIndex + 1];
-        return nextRovingIndex === undefined ? rovingIndex : nextRovingIndex;
-    };
-    (0, react_1.useEffect)(() => {
-        if (arrowUpPressed)
-            setRovingIndex(previousOrCurrent());
-        if (arrowDownPressed)
-            setRovingIndex(nextOrCurrent());
-    }, [arrowUpPressed, arrowDownPressed]);
-    return [rovingIndex, setRovingIndex];
-};
-exports.default = useRovingIndex;

package/common/floating-label-utils/hooks.js

@@ -1,133 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFloatingLabel = void 0;
-const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const classPrefix = 'floating-label__label';
-// input background in Skin 12, used for autofill detection
-const textboxElementBackgroundRGB = [
-    'rgb(245, 245, 245)',
-    'rgb(247, 247, 247)' // From skin version 12.6.0
-];
-// check for computed background color because of Chrome autofill bug
-// https://stackoverflow.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password/35783761#35783761
-const isAutofilled = (input) => input && !textboxElementBackgroundRGB.includes(getComputedStyle(input).backgroundColor);
-const hasValue = (input) => { var _a; return ((_a = input === null || input === void 0 ? void 0 : input.value) === null || _a === void 0 ? void 0 : _a.length) > 0; };
-const isSelect = (element) => (element === null || element === void 0 ? void 0 : element.tagName) === `SELECT`;
-const setPlaceholder = (element, value) => {
-    // For select elements we need to temporary remove the text of the first option
-    // when the element is not focused, so only the label is shown. We still need to
-    // maintain the width of the input so we manually change the "min-width"
-    // Inspired by the marko implementation: https://github.com/makeup/makeup-js/blob/master/packages/makeup-floating-label/src/index.js
-    if (isSelect(element) && !hasValue(element.querySelector(`option`))) {
-        element.style['min-width'] = '';
-        const beforeWidth = element.offsetWidth;
-        element.querySelector(`option`).text = value;
-        if (!value && beforeWidth > element.offsetWidth) {
-            element.style['min-width'] = `${beforeWidth}px`;
-        }
-    }
-};
-const getPlaceholder = (element) => {
-    if (isSelect(element)) {
-        return element.querySelector(`option`).text;
-    }
-    return element === null || element === void 0 ? void 0 : element.placeholder;
-};
-function useFloatingLabel({ ref, inputId, className, disabled, label, inputSize, inputValue, placeholder, invalid, opaqueLabel, type, onMount = () => { } }) {
-    const _internalInputRef = (0, react_1.useRef)(null);
-    const inputRef = () => ref || _internalInputRef;
-    const [isFloating, setFloating] = (0, react_1.useState)(Boolean(inputValue));
-    const [shouldAnimate, setAnimate] = (0, react_1.useState)(false);
-    const [isFocused, setFocused] = (0, react_1.useState)(false);
-    const selectFirstOptionText = (0, react_1.useRef)(``);
-    const onBlur = () => {
-        var _a;
-        setAnimate(true);
-        setFloating(hasValue((_a = inputRef()) === null || _a === void 0 ? void 0 : _a.current));
-        setFocused(false);
-        setPlaceholder(inputRef().current, ``);
-    };
-    const onFocus = () => {
-        var _a;
-        setAnimate(true);
-        setFloating(true);
-        setFocused(true);
-        setPlaceholder((_a = inputRef()) === null || _a === void 0 ? void 0 : _a.current, selectFirstOptionText.current);
-    };
-    (0, react_1.useEffect)(() => {
-        var _a, _b;
-        if (!label) {
-            return;
-        }
-        selectFirstOptionText.current = getPlaceholder((_a = inputRef()) === null || _a === void 0 ? void 0 : _a.current);
-        setPlaceholder((_b = inputRef()) === null || _b === void 0 ? void 0 : _b.current, ``);
-        onMount();
-    }, []);
-    (0, react_1.useEffect)(() => {
-        var _a, _b, _c;
-        if (!label) {
-            return;
-        }
-        setFloating(isFocused || hasValue((_a = inputRef()) === null || _a === void 0 ? void 0 : _a.current) || isAutofilled((_c = (_b = inputRef()) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.parentNode));
-    }, [isFocused, inputValue]);
-    const labelClassName = (0, classnames_1.default)(className, classPrefix, {
-        [`${classPrefix}--disabled`]: disabled,
-        [`${classPrefix}--animate`]: shouldAnimate,
-        [`${classPrefix}--inline`]: !isFloating && type !== 'date',
-        [`${classPrefix}--focus`]: isFocused,
-        [`${classPrefix}--invalid`]: invalid
-    });
-    const floatingLabelClassName = (0, classnames_1.default)(`floating-label`, {
-        'floating-label--large': inputSize === `large`,
-        'floating-label--opaque': opaqueLabel
-    });
-    const FragmentContainer = (0, react_1.useCallback)(({ children }) => react_1.default.createElement(react_1.default.Fragment, null, children), []);
-    const FloatingLabelContainer = (0, react_1.useCallback)(({ children }) => react_1.default.createElement("span", { className: floatingLabelClassName }, children), [floatingLabelClassName]);
-    if (!label) {
-        return {
-            label: null,
-            Container: FragmentContainer,
-            onBlur: () => { },
-            onFocus: () => { },
-            ref: inputRef(),
-            placeholder
-        };
-    }
-    const labelElement = react_1.default.createElement("label", { htmlFor: inputId, className: labelClassName }, label);
-    return {
-        label: labelElement,
-        Container: FloatingLabelContainer,
-        onBlur,
-        onFocus,
-        ref: inputRef(),
-        placeholder: !isFloating ? null : placeholder
-    };
-}
-exports.useFloatingLabel = useFloatingLabel;