@lifesg/react-design-system 4.0.0-alpha.5 → 4.0.0-alpha.7

package/phone-number-input/phone-number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone-number-input.js","sources":["../../src/phone-number-input/phone-number-input.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { InputGroup } from \"../input-group/input-group\";\nimport type { AddonProps, LabelAddon, ListAddon } from \"../input-group/types\";\nimport { useNextInputState } from \"../util\";\nimport { PhoneNumberInputHelper } from \"./phone-number-input-helper\";\nimport type { CountryValue, PhoneNumberInputProps } from \"./types\";\n\nexport const PhoneNumberInput = ({\n    id,\n    onChange,\n    value,\n    allowClear,\n    onClear,\n    onBlur,\n    error,\n    fixedCountry = false,\n    optionPlaceholder = \"Select\",\n    optionSearchPlaceholder,\n    enableSearch,\n    onHideOptions,\n    onShowOptions,\n    placeholder,\n    autoComplete,\n    noBorder = false,\n    getAriaLabel,\n    ...otherProps\n}: PhoneNumberInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [options] = useState<CountryValue[]>(\n        PhoneNumberInputHelper.getCountries()\n    );\n\n    const [selectedCountry, setSelectedCountry] = useState<\n        CountryValue | undefined\n    >(undefined);\n    const [inputValue, setInputValue] = useState<string>(\"\");\n\n    const nodeRef = useRef<HTMLInputElement>(null);\n\n    const getNextInputState = useNextInputState({\n        ref: nodeRef,\n        formatter: (value) =>\n            PhoneNumberInputHelper.formatNumber(\n                value.replace(/[^0-9]/g, \"\"),\n                selectedCountry\n            ),\n    });\n\n    const resolvedAriaLabel =\n        getAriaLabel?.(selectedCountry) ?? \"Enter phone number\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const selectedOption = options.filter(\n            (country) =>\n                country.countryCode === normaliseCountryCode(value?.countryCode)\n        )[0];\n\n        setSelectedCountry(selectedOption);\n        setInputValue(\n            PhoneNumberInputHelper.formatNumber(value?.number, selectedOption)\n        );\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClear = () => {\n        if (onClear) {\n            onClear();\n        } else {\n            setInputValue(\"\");\n        }\n    };\n\n    const handleInputChange = () => {\n        const nextState = getNextInputState();\n        if (!nextState) return;\n\n        const { nextValue, updateCaretPosition } = nextState;\n\n        updateCaretPosition();\n        performLocalChangeHandler(nextValue, selectedCountry);\n        if (onChange) {\n            performOnChangeHandler(nextValue, selectedCountry);\n        }\n    };\n\n    const handleSelectOption = (country: CountryValue) => {\n        performLocalChangeHandler(inputValue, country);\n        if (onChange) {\n            performOnChangeHandler(inputValue, country);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const performOnChangeHandler = (\n        inputValue: string,\n        selectedCountry: CountryValue | undefined\n    ) => {\n        const formatedInputValue = PhoneNumberInputHelper.formatNumber(\n            inputValue,\n            selectedCountry\n        );\n        onChange?.({\n            number: formatedInputValue.replace(/[\\s()]+/g, \"\"), // strip formatted spaces\n            countryCode:\n                selectedCountry && addPlusPrefix(selectedCountry.countryCode),\n        });\n    };\n\n    const performLocalChangeHandler = (\n        inputValue: string,\n        selectedCountry: CountryValue | undefined\n    ) => {\n        setInputValue(\n            PhoneNumberInputHelper.formatNumber(inputValue, selectedCountry)\n        );\n\n        setSelectedCountry(selectedCountry);\n    };\n\n    const getAddonProps = (): AddonProps<CountryValue, string> => {\n        if (fixedCountry) {\n            return {\n                type: \"label\",\n                attributes: {\n                    value: addPlusPrefix(selectedCountry?.countryCode),\n                } as LabelAddon,\n            };\n        } else {\n            return {\n                type: \"list\",\n                attributes: {\n                    \"aria-label\": \"Country code\",\n                    placeholder: optionPlaceholder,\n                    options,\n                    selectedOption: selectedCountry,\n                    enableSearch: enableSearch,\n                    searchPlaceholder: optionSearchPlaceholder,\n                    valueExtractor: (option) => `+${option.countryCode}`,\n                    listExtractor: (option) => ({\n                        title: option.name,\n                        secondaryLabel: addPlusPrefix(option.countryCode),\n                    }),\n                    onSelectOption: handleSelectOption,\n                    onHideOptions: onHideOptions,\n                    onShowOptions: onShowOptions,\n                } as ListAddon<CountryValue, string>,\n            };\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <InputGroup\n            id={id}\n            ref={nodeRef}\n            value={inputValue}\n            onChange={handleInputChange}\n            allowClear={allowClear && !!inputValue}\n            onClear={handleClear}\n            onBlur={onBlur}\n            error={error}\n            placeholder={placeholder}\n            addon={getAddonProps()}\n            inputMode=\"numeric\"\n            autoComplete={autoComplete}\n            noBorder={noBorder}\n            aria-label={resolvedAriaLabel}\n            {...otherProps}\n        />\n    );\n};\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\n/**\n * This strips the + off the specified country code if it\n * is present.\n */\nconst normaliseCountryCode = (countryCode: string | undefined): string => {\n    return countryCode ? countryCode.replace(\"+\", \"\") : \"\";\n};\n\nconst addPlusPrefix = (countryCode?: string): string => {\n    if (!countryCode) return \"\";\n    return countryCode.includes(\"+\") ? countryCode : `+${countryCode}`;\n};\n"],"names":["PhoneNumberInput","_a","id","onChange","value","allowClear","onClear","onBlur","error","fixedCountry","optionPlaceholder","optionSearchPlaceholder","enableSearch","onHideOptions","onShowOptions","placeholder","autoComplete","noBorder","getAriaLabel","otherProps","__rest","options","useState","PhoneNumberInputHelper","getCountries","selectedCountry","setSelectedCountry","undefined","inputValue","setInputValue","nodeRef","useRef","getNextInputState","useNextInputState","ref","formatter","formatNumber","replace","resolvedAriaLabel","_b","useEffect","selectedOption","filter","country","countryCode","normaliseCountryCode","number","handleSelectOption","performLocalChangeHandler","performOnChangeHandler","formatedInputValue","addPlusPrefix","_jsx","InputGroup","Object","assign","nextState","nextValue","updateCaretPosition","addon","type","attributes","searchPlaceholder","valueExtractor","option","listExtractor","title","name","secondaryLabel","onSelectOption","inputMode","includes"],"mappings":"+gBAQO,MAAMA,EAAoBC,WAAAC,GAC7BA,EAAEC,SACFA,EAAQC,MACRA,EAAKC,WACLA,EAAUC,QACVA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,aACLA,GAAe,EAAKC,kBACpBA,EAAoB,SAAQC,wBAC5BA,EAAuBC,aACvBA,EAAYC,cACZA,EAAaC,cACbA,EAAaC,YACbA,EAAWC,aACXA,EAAYC,SACZA,GAAW,EAAKC,aAChBA,GAAYjB,EACTkB,EAAUC,EAAAnB,EAlBgB,sOAuB7B,MAAOoB,GAAWC,EACdC,EAAuBC,iBAGpBC,EAAiBC,GAAsBJ,OAE5CK,IACKC,EAAYC,GAAiBP,EAAiB,IAE/CQ,EAAUC,EAAyB,MAEnCC,EAAoBC,EAAkB,CACxCC,IAAKJ,EACLK,UAAY/B,GACRmB,EAAuBa,aACnBhC,EAAMiC,QAAQ,UAAW,IACzBZ,KAINa,EAC6B,QAA/BC,EAAArB,aAAY,EAAZA,EAAeO,UAAgB,IAAAc,EAAAA,EAAI,qBAKvCC,GAAU,KACN,MAAMC,EAAiBpB,EAAQqB,QAC1BC,GACGA,EAAQC,cAAgBC,EAAqBzC,aAAK,EAALA,EAAOwC,eAC1D,GAEFlB,EAAmBe,GACnBZ,EACIN,EAAuBa,aAAahC,aAAK,EAALA,EAAO0C,OAAQL,GACtD,GACF,CAACrC,IAKJ,MAqBM2C,EAAsBJ,IACxBK,EAA0BpB,EAAYe,GAClCxC,GACA8C,EAAuBrB,EAAYe,EACvC,EAMEM,EAAyB,CAC3BrB,EACAH,KAEA,MAAMyB,EAAqB3B,EAAuBa,aAC9CR,EACAH,GAEJtB,SAAAA,EAAW,CACP2C,OAAQI,EAAmBb,QAAQ,WAAY,IAC/CO,YACInB,GAAmB0B,EAAc1B,EAAgBmB,cACvD,EAGAI,EAA4B,CAC9BpB,EACAH,KAEAI,EACIN,EAAuBa,aAAaR,EAAYH,IAGpDC,EAAmBD,EAAgB,EAqCvC,OACI2B,EAACC,EAAUC,OAAAC,OAAA,CACPrD,GAAIA,EACJgC,IAAKJ,EACL1B,MAAOwB,EACPzB,SAxFkB,KACtB,MAAMqD,EAAYxB,IAClB,IAAKwB,EAAW,OAEhB,MAAMC,UAAEA,EAASC,oBAAEA,GAAwBF,EAE3CE,IACAV,EAA0BS,EAAWhC,GACjCtB,GACA8C,EAAuBQ,EAAWhC,EACtC,EA+EIpB,WAAYA,KAAgBuB,EAC5BtB,QAlGY,KACZA,EACAA,IAEAuB,EAAc,GAClB,EA8FItB,OAAQA,EACRC,MAAOA,EACPO,YAAaA,EACb4C,MA5CAlD,EACO,CACHmD,KAAM,QACNC,WAAY,CACRzD,MAAO+C,EAAc1B,aAAe,EAAfA,EAAiBmB,eAIvC,CACHgB,KAAM,OACNC,WAAY,CACR,aAAc,eACd9C,YAAaL,EACbW,UACAoB,eAAgBhB,EAChBb,aAAcA,EACdkD,kBAAmBnD,EACnBoD,eAAiBC,GAAW,IAAIA,EAAOpB,cACvCqB,cAAgBD,IAAM,CAClBE,MAAOF,EAAOG,KACdC,eAAgBjB,EAAca,EAAOpB,eAEzCyB,eAAgBtB,EAChBlC,cAAeA,EACfC,cAAeA,IAqBvBwD,UAAU,UACVtD,aAAcA,EACdC,SAAUA,EAAQ,aACNqB,GACRnB,GACN,EAWJ0B,EAAwBD,GACnBA,EAAcA,EAAYP,QAAQ,IAAK,IAAM,GAGlDc,EAAiBP,GACdA,EACEA,EAAY2B,SAAS,KAAO3B,EAAc,IAAIA,IAD5B"}
+{"version":3,"file":"phone-number-input.js","sources":["../../src/phone-number-input/phone-number-input.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { InputGroup } from \"../input-group/input-group\";\nimport type { AddonProps, LabelAddon, ListAddon } from \"../input-group/types\";\nimport { useNextInputState } from \"../util\";\nimport { PhoneNumberInputHelper } from \"./phone-number-input-helper\";\nimport type { CountryValue, PhoneNumberInputProps } from \"./types\";\n\n// @catalog\n/**\n * A phone number field composed of a country code selector and a number input.\n *\n * Use `PhoneNumberInput` when collecting an internationalised phone number.\n * The country code can be selected from a searchable dropdown or locked to a\n * fixed value via `fixedCountry`.\n */\nexport const PhoneNumberInput = ({\n    id,\n    onChange,\n    value,\n    allowClear,\n    onClear,\n    onBlur,\n    error,\n    fixedCountry = false,\n    optionPlaceholder = \"Select\",\n    optionSearchPlaceholder,\n    enableSearch,\n    onHideOptions,\n    onShowOptions,\n    placeholder,\n    autoComplete,\n    noBorder = false,\n    getAriaLabel,\n    ...otherProps\n}: PhoneNumberInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [options] = useState<CountryValue[]>(\n        PhoneNumberInputHelper.getCountries()\n    );\n\n    const [selectedCountry, setSelectedCountry] = useState<\n        CountryValue | undefined\n    >(undefined);\n    const [inputValue, setInputValue] = useState<string>(\"\");\n\n    const nodeRef = useRef<HTMLInputElement>(null);\n\n    const getNextInputState = useNextInputState({\n        ref: nodeRef,\n        formatter: (value) =>\n            PhoneNumberInputHelper.formatNumber(\n                value.replace(/[^0-9]/g, \"\"),\n                selectedCountry\n            ),\n    });\n\n    const resolvedAriaLabel =\n        getAriaLabel?.(selectedCountry) ?? \"Enter phone number\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const selectedOption = options.filter(\n            (country) =>\n                country.countryCode === normaliseCountryCode(value?.countryCode)\n        )[0];\n\n        setSelectedCountry(selectedOption);\n        setInputValue(\n            PhoneNumberInputHelper.formatNumber(value?.number, selectedOption)\n        );\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClear = () => {\n        if (onClear) {\n            onClear();\n        } else {\n            setInputValue(\"\");\n        }\n    };\n\n    const handleInputChange = () => {\n        const nextState = getNextInputState();\n        if (!nextState) return;\n\n        const { nextValue, updateCaretPosition } = nextState;\n\n        updateCaretPosition();\n        performLocalChangeHandler(nextValue, selectedCountry);\n        if (onChange) {\n            performOnChangeHandler(nextValue, selectedCountry);\n        }\n    };\n\n    const handleSelectOption = (country: CountryValue) => {\n        performLocalChangeHandler(inputValue, country);\n        if (onChange) {\n            performOnChangeHandler(inputValue, country);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const performOnChangeHandler = (\n        inputValue: string,\n        selectedCountry: CountryValue | undefined\n    ) => {\n        const formatedInputValue = PhoneNumberInputHelper.formatNumber(\n            inputValue,\n            selectedCountry\n        );\n        onChange?.({\n            number: formatedInputValue.replace(/[\\s()]+/g, \"\"), // strip formatted spaces\n            countryCode:\n                selectedCountry && addPlusPrefix(selectedCountry.countryCode),\n        });\n    };\n\n    const performLocalChangeHandler = (\n        inputValue: string,\n        selectedCountry: CountryValue | undefined\n    ) => {\n        setInputValue(\n            PhoneNumberInputHelper.formatNumber(inputValue, selectedCountry)\n        );\n\n        setSelectedCountry(selectedCountry);\n    };\n\n    const getAddonProps = (): AddonProps<CountryValue, string> => {\n        if (fixedCountry) {\n            return {\n                type: \"label\",\n                attributes: {\n                    value: addPlusPrefix(selectedCountry?.countryCode),\n                } as LabelAddon,\n            };\n        } else {\n            return {\n                type: \"list\",\n                attributes: {\n                    \"aria-label\": \"Country code\",\n                    placeholder: optionPlaceholder,\n                    options,\n                    selectedOption: selectedCountry,\n                    enableSearch: enableSearch,\n                    searchPlaceholder: optionSearchPlaceholder,\n                    valueExtractor: (option) => `+${option.countryCode}`,\n                    listExtractor: (option) => ({\n                        title: option.name,\n                        secondaryLabel: addPlusPrefix(option.countryCode),\n                    }),\n                    onSelectOption: handleSelectOption,\n                    onHideOptions: onHideOptions,\n                    onShowOptions: onShowOptions,\n                } as ListAddon<CountryValue, string>,\n            };\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <InputGroup\n            id={id}\n            ref={nodeRef}\n            value={inputValue}\n            onChange={handleInputChange}\n            allowClear={allowClear && !!inputValue}\n            onClear={handleClear}\n            onBlur={onBlur}\n            error={error}\n            placeholder={placeholder}\n            addon={getAddonProps()}\n            inputMode=\"numeric\"\n            autoComplete={autoComplete}\n            noBorder={noBorder}\n            aria-label={resolvedAriaLabel}\n            {...otherProps}\n        />\n    );\n};\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\n/**\n * This strips the + off the specified country code if it\n * is present.\n */\nconst normaliseCountryCode = (countryCode: string | undefined): string => {\n    return countryCode ? countryCode.replace(\"+\", \"\") : \"\";\n};\n\nconst addPlusPrefix = (countryCode?: string): string => {\n    if (!countryCode) return \"\";\n    return countryCode.includes(\"+\") ? countryCode : `+${countryCode}`;\n};\n"],"names":["PhoneNumberInput","_a","id","onChange","value","allowClear","onClear","onBlur","error","fixedCountry","optionPlaceholder","optionSearchPlaceholder","enableSearch","onHideOptions","onShowOptions","placeholder","autoComplete","noBorder","getAriaLabel","otherProps","__rest","options","useState","PhoneNumberInputHelper","getCountries","selectedCountry","setSelectedCountry","undefined","inputValue","setInputValue","nodeRef","useRef","getNextInputState","useNextInputState","ref","formatter","formatNumber","replace","resolvedAriaLabel","_b","useEffect","selectedOption","filter","country","countryCode","normaliseCountryCode","number","handleSelectOption","performLocalChangeHandler","performOnChangeHandler","formatedInputValue","addPlusPrefix","_jsx","InputGroup","Object","assign","nextState","nextValue","updateCaretPosition","addon","type","attributes","searchPlaceholder","valueExtractor","option","listExtractor","title","name","secondaryLabel","onSelectOption","inputMode","includes"],"mappings":"+gBAgBO,MAAMA,EAAoBC,WAAAC,GAC7BA,EAAEC,SACFA,EAAQC,MACRA,EAAKC,WACLA,EAAUC,QACVA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,aACLA,GAAe,EAAKC,kBACpBA,EAAoB,SAAQC,wBAC5BA,EAAuBC,aACvBA,EAAYC,cACZA,EAAaC,cACbA,EAAaC,YACbA,EAAWC,aACXA,EAAYC,SACZA,GAAW,EAAKC,aAChBA,GAAYjB,EACTkB,EAAUC,EAAAnB,EAlBgB,sOAuB7B,MAAOoB,GAAWC,EACdC,EAAuBC,iBAGpBC,EAAiBC,GAAsBJ,OAE5CK,IACKC,EAAYC,GAAiBP,EAAiB,IAE/CQ,EAAUC,EAAyB,MAEnCC,EAAoBC,EAAkB,CACxCC,IAAKJ,EACLK,UAAY/B,GACRmB,EAAuBa,aACnBhC,EAAMiC,QAAQ,UAAW,IACzBZ,KAINa,EAC6B,QAA/BC,EAAArB,aAAY,EAAZA,EAAeO,UAAgB,IAAAc,EAAAA,EAAI,qBAKvCC,GAAU,KACN,MAAMC,EAAiBpB,EAAQqB,QAC1BC,GACGA,EAAQC,cAAgBC,EAAqBzC,aAAK,EAALA,EAAOwC,eAC1D,GAEFlB,EAAmBe,GACnBZ,EACIN,EAAuBa,aAAahC,aAAK,EAALA,EAAO0C,OAAQL,GACtD,GACF,CAACrC,IAKJ,MAqBM2C,EAAsBJ,IACxBK,EAA0BpB,EAAYe,GAClCxC,GACA8C,EAAuBrB,EAAYe,EACvC,EAMEM,EAAyB,CAC3BrB,EACAH,KAEA,MAAMyB,EAAqB3B,EAAuBa,aAC9CR,EACAH,GAEJtB,SAAAA,EAAW,CACP2C,OAAQI,EAAmBb,QAAQ,WAAY,IAC/CO,YACInB,GAAmB0B,EAAc1B,EAAgBmB,cACvD,EAGAI,EAA4B,CAC9BpB,EACAH,KAEAI,EACIN,EAAuBa,aAAaR,EAAYH,IAGpDC,EAAmBD,EAAgB,EAqCvC,OACI2B,EAACC,EAAUC,OAAAC,OAAA,CACPrD,GAAIA,EACJgC,IAAKJ,EACL1B,MAAOwB,EACPzB,SAxFkB,KACtB,MAAMqD,EAAYxB,IAClB,IAAKwB,EAAW,OAEhB,MAAMC,UAAEA,EAASC,oBAAEA,GAAwBF,EAE3CE,IACAV,EAA0BS,EAAWhC,GACjCtB,GACA8C,EAAuBQ,EAAWhC,EACtC,EA+EIpB,WAAYA,KAAgBuB,EAC5BtB,QAlGY,KACZA,EACAA,IAEAuB,EAAc,GAClB,EA8FItB,OAAQA,EACRC,MAAOA,EACPO,YAAaA,EACb4C,MA5CAlD,EACO,CACHmD,KAAM,QACNC,WAAY,CACRzD,MAAO+C,EAAc1B,aAAe,EAAfA,EAAiBmB,eAIvC,CACHgB,KAAM,OACNC,WAAY,CACR,aAAc,eACd9C,YAAaL,EACbW,UACAoB,eAAgBhB,EAChBb,aAAcA,EACdkD,kBAAmBnD,EACnBoD,eAAiBC,GAAW,IAAIA,EAAOpB,cACvCqB,cAAgBD,IAAM,CAClBE,MAAOF,EAAOG,KACdC,eAAgBjB,EAAca,EAAOpB,eAEzCyB,eAAgBtB,EAChBlC,cAAeA,EACfC,cAAeA,IAqBvBwD,UAAU,UACVtD,aAAcA,EACdC,SAAUA,EAAQ,aACNqB,GACRnB,GACN,EAWJ0B,EAAwBD,GACnBA,EAAcA,EAAYP,QAAQ,IAAK,IAAM,GAGlDc,EAAiBP,GACdA,EACEA,EAAY2B,SAAS,KAAO3B,EAAc,IAAIA,IAD5B"}

package/phone-number-input/types.d.ts

@@ -1,47 +1,107 @@
 import type React from "react";
+/**
+ * Represents a selectable country entry in the phone number country code dropdown.
+ */
 export interface CountryValue {
+    /** The country name. */
     name: string;
+    /** The country region. */
     regions: string[];
+    /**
+     * ISO 3166-1 alpha-2 country code.
+     */
     iso2: string;
+    /**
+     * Calling code for the country, without the leading `+`.
+     */
     countryCode: string;
+    /**
+     * Phone number format mask applied to the phone number field.
+     */
     format: string;
 }
+/**
+ * Value shape for `PhoneNumberInput`, representing the selected country code
+ * and the phone number separately.
+ */
 export interface PhoneNumberInputValue {
     /**
-     * You may choose to specify with or without the +. The return value
-     * will always contain the +
+     * Country calling code. May be supplied with or without a leading `+`;
      */
     countryCode?: string | undefined;
+    /**
+     * The phone number number, without the country code prefix.
+     */
     number?: string | undefined;
 }
+/**
+ * Props for the `PhoneNumberInput` component.
+ */
 export interface PhoneNumberInputProps extends React.AriaAttributes {
-    /** The value of the input */
+    /**
+     * Controlled value containing the selected country code and phone number.
+     */
     value?: PhoneNumberInputValue | undefined;
+    /**
+     * Renders the input in an error state when `true`.
+     */
     error?: boolean | undefined;
-    /** Specifies if the clear button should be present in the input */
+    /**
+     * Shows a clear button inside the input when `true` and the field has a value.
+     */
     allowClear?: boolean | undefined;
     "data-testid"?: string | undefined;
     className?: string | undefined;
+    /**
+     * Removes the visible border from the input group when `true`.
+     *
+     * @default false
+     */
     noBorder?: boolean | undefined;
     /**
-     * Specifies if the country code is a fixed value and the user
-     * cannot select another option
+     * When `true`, the country code is displayed as a static label and the
+     * user cannot change it. When `false`, a searchable dropdown is rendered.
+     *
+     * @default false
      */
     fixedCountry?: boolean | undefined;
+    /**
+     * Called whenever the country or phone number changes.
+     *
+     * @param value Updated phone number value including the leading `+`.
+     */
     onChange?: ((value: PhoneNumberInputValue) => void) | undefined;
-    /** Called when the clear button in the input field is clicked */
+    /**
+     * Called when the clear button is activated.
+     */
     onClear?: () => void | undefined;
-    /** Called when a defocus happens */
+    /**
+     * Called when the input loses focus.
+     */
     onBlur?: (() => void) | undefined;
-    /** The placeholder value for the dropdown selector */
+    /**
+     * Placeholder text shown in the country code dropdown when no country is
+     * selected.
+     *
+     * @default "Select"
+     */
     optionPlaceholder?: string | undefined;
-    /** The placeholder value for the dropdown search */
+    /**
+     * Placeholder text shown inside the search field of the country code
+     * dropdown. Only relevant when `enableSearch` is `true`.
+     */
     optionSearchPlaceholder?: string | undefined;
-    /** Specifies if search is enabled in the dropdown */
+    /**
+     * Enables a search field inside the country code dropdown.
+     */
     enableSearch?: boolean | undefined;
-    /** Called when the dropdown is dismissed */
+    /**
+     * Called when the country code dropdown closes.
+     */
     onHideOptions?: (() => void) | undefined;
-    /** Called when the dropdown is visible */
+    /**
+     * Called when the country code dropdown opens.
+     */
     onShowOptions?: (() => void) | undefined;
     disabled?: boolean | undefined;
     name?: string | undefined;
@@ -50,5 +110,10 @@ export interface PhoneNumberInputProps extends React.AriaAttributes {
     readOnly?: boolean | undefined;
     id?: string | undefined;
     autoComplete?: string | undefined;
+    /**
+     * Returns the accessible label for the phone number input.
+     *
+     * @param country Currently selected country, or `undefined`.
+     */
     getAriaLabel?: ((country?: CountryValue) => string) | undefined;
 }

package/pill/pill.d.ts

@@ -1,2 +1,8 @@
 import type { PillProps } from "./types";
+/**
+ * A compact label used to display status, category, or metadata.
+ *
+ * Use `Pill` to surface short, read-only information — such as a tag or status
+ * badge — inline with other content.
+ */
 export declare const Pill: ({ type, colorType, children, icon, className, ...otherProps }: PillProps) => JSX.Element;

package/pill/pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"pill.js","sources":["../../src/pill/pill.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport * as styles from \"./pill.styles\";\nimport type { PillColorType, PillProps, PillType } from \"./types\";\n\nconst WRAPPER_CLASS: Record<PillType, Record<PillColorType, string>> = {\n    solid: {\n        black: styles.wrapperSolidBlack,\n        grey: styles.wrapperSolidGrey,\n        green: styles.wrapperSolidGreen,\n        yellow: styles.wrapperSolidYellow,\n        red: styles.wrapperSolidRed,\n        blue: styles.wrapperSolidBlue,\n        primary: styles.wrapperSolidPrimary,\n    },\n    outline: {\n        black: styles.wrapperOutlineBlack,\n        grey: styles.wrapperOutlineGrey,\n        green: styles.wrapperOutlineGreen,\n        yellow: styles.wrapperOutlineYellow,\n        red: styles.wrapperOutlineRed,\n        blue: styles.wrapperOutlineBlue,\n        primary: styles.wrapperOutlinePrimary,\n    },\n};\n\nexport const Pill = ({\n    type,\n    colorType = \"black\",\n    children,\n    icon,\n    className,\n    ...otherProps\n}: PillProps): JSX.Element => {\n    return (\n        <div\n            {...otherProps}\n            className={clsx(\n                styles.wrapperBase,\n                type === \"solid\" && styles.wrapperSolid,\n                WRAPPER_CLASS[type][colorType],\n                className\n            )}\n        >\n            {icon && React.cloneElement(icon, { \"aria-hidden\": true })}\n            <div className={styles.label}>{children}</div>\n        </div>\n    );\n};\n"],"names":["WRAPPER_CLASS","solid","black","styles.wrapperSolidBlack","grey","styles.wrapperSolidGrey","green","styles.wrapperSolidGreen","yellow","styles.wrapperSolidYellow","red","styles.wrapperSolidRed","blue","styles.wrapperSolidBlue","primary","styles.wrapperSolidPrimary","outline","styles.wrapperOutlineBlack","styles.wrapperOutlineGrey","styles.wrapperOutlineGreen","styles.wrapperOutlineYellow","styles.wrapperOutlineRed","styles.wrapperOutlineBlue","styles.wrapperOutlinePrimary","Pill","_a","type","colorType","children","icon","className","otherProps","__rest","_jsxs","Object","assign","clsx","styles.wrapperBase","styles.wrapperSolid","React","cloneElement","_jsx","styles.label"],"mappings":"oiBAMA,MAAMA,EAAiE,CACnEC,MAAO,CACHC,MAAOC,EACPC,KAAMC,EACNC,MAAOC,EACPC,OAAQC,EACRC,IAAKC,EACLC,KAAMC,EACNC,QAASC,GAEbC,QAAS,CACLd,MAAOe,EACPb,KAAMc,EACNZ,MAAOa,EACPX,OAAQY,EACRV,IAAKW,EACLT,KAAMU,EACNR,QAASS,IAIJC,EAAQC,IAAA,IAAAC,KACjBA,EAAIC,UACJA,EAAY,QAAOC,SACnBA,EAAQC,KACRA,EAAIC,UACJA,GAASL,EACNM,EAAUC,EAAAP,EANI,oDAQjB,OACIQ,EAAA,MAAAC,OAAAC,OAAA,GACQJ,EAAU,CACdD,UAAWM,EACPC,EACS,UAATX,GAAoBY,EACpBtC,EAAc0B,GAAMC,GACpBG,GACHF,SAAA,CAEAC,GAAQU,EAAMC,aAAaX,EAAM,CAAE,eAAe,IACnDY,EAAA,MAAA,CAAKX,UAAWY,EAAYd,SAAGA,OAC7B"}
+{"version":3,"file":"pill.js","sources":["../../src/pill/pill.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport * as styles from \"./pill.styles\";\nimport type { PillColorType, PillProps, PillType } from \"./types\";\n\nconst WRAPPER_CLASS: Record<PillType, Record<PillColorType, string>> = {\n    solid: {\n        black: styles.wrapperSolidBlack,\n        grey: styles.wrapperSolidGrey,\n        green: styles.wrapperSolidGreen,\n        yellow: styles.wrapperSolidYellow,\n        red: styles.wrapperSolidRed,\n        blue: styles.wrapperSolidBlue,\n        primary: styles.wrapperSolidPrimary,\n    },\n    outline: {\n        black: styles.wrapperOutlineBlack,\n        grey: styles.wrapperOutlineGrey,\n        green: styles.wrapperOutlineGreen,\n        yellow: styles.wrapperOutlineYellow,\n        red: styles.wrapperOutlineRed,\n        blue: styles.wrapperOutlineBlue,\n        primary: styles.wrapperOutlinePrimary,\n    },\n};\n\n// @catalog\n/**\n * A compact label used to display status, category, or metadata.\n *\n * Use `Pill` to surface short, read-only information — such as a tag or status\n * badge — inline with other content.\n */\nexport const Pill = ({\n    type,\n    colorType = \"black\",\n    children,\n    icon,\n    className,\n    ...otherProps\n}: PillProps): JSX.Element => {\n    return (\n        <div\n            {...otherProps}\n            className={clsx(\n                styles.wrapperBase,\n                type === \"solid\" && styles.wrapperSolid,\n                WRAPPER_CLASS[type][colorType],\n                className\n            )}\n        >\n            {icon && React.cloneElement(icon, { \"aria-hidden\": true })}\n            <div className={styles.label}>{children}</div>\n        </div>\n    );\n};\n"],"names":["WRAPPER_CLASS","solid","black","styles.wrapperSolidBlack","grey","styles.wrapperSolidGrey","green","styles.wrapperSolidGreen","yellow","styles.wrapperSolidYellow","red","styles.wrapperSolidRed","blue","styles.wrapperSolidBlue","primary","styles.wrapperSolidPrimary","outline","styles.wrapperOutlineBlack","styles.wrapperOutlineGrey","styles.wrapperOutlineGreen","styles.wrapperOutlineYellow","styles.wrapperOutlineRed","styles.wrapperOutlineBlue","styles.wrapperOutlinePrimary","Pill","_a","type","colorType","children","icon","className","otherProps","__rest","_jsxs","Object","assign","clsx","styles.wrapperBase","styles.wrapperSolid","React","cloneElement","_jsx","styles.label"],"mappings":"oiBAMA,MAAMA,EAAiE,CACnEC,MAAO,CACHC,MAAOC,EACPC,KAAMC,EACNC,MAAOC,EACPC,OAAQC,EACRC,IAAKC,EACLC,KAAMC,EACNC,QAASC,GAEbC,QAAS,CACLd,MAAOe,EACPb,KAAMc,EACNZ,MAAOa,EACPX,OAAQY,EACRV,IAAKW,EACLT,KAAMU,EACNR,QAASS,IAWJC,EAAQC,IAAA,IAAAC,KACjBA,EAAIC,UACJA,EAAY,QAAOC,SACnBA,EAAQC,KACRA,EAAIC,UACJA,GAASL,EACNM,EAAUC,EAAAP,EANI,oDAQjB,OACIQ,EAAA,MAAAC,OAAAC,OAAA,GACQJ,EAAU,CACdD,UAAWM,EACPC,EACS,UAATX,GAAoBY,EACpBtC,EAAc0B,GAAMC,GACpBG,GACHF,SAAA,CAEAC,GAAQU,EAAMC,aAAaX,EAAM,CAAE,eAAe,IACnDY,EAAA,MAAA,CAAKX,UAAWY,EAAYd,SAAGA,OAC7B"}

package/pill/types.d.ts

@@ -1,8 +1,27 @@
 import type React from "react";
+/**
+ * Visual style variant for `Pill`.
+ *
+ * - `"solid"` renders a filled background.
+ * - `"outline"` renders a border-only style.
+ */
 export type PillType = "outline" | "solid";
+/** Color theme for `Pill`. */
 export type PillColorType = "black" | "grey" | "green" | "yellow" | "red" | "blue" | "primary";
+/**
+ * Props for the `Pill` component.
+ */
 export interface PillProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Visual style variant for the pill. */
     type: PillType;
+    /**
+     * Color theme applied to the pill.
+     *
+     * @default "black"
+     */
     colorType?: PillColorType | undefined;
+    /**
+     * Icon rendered before the label text.
+     */
     icon?: JSX.Element | undefined;
 }

package/popover/popover-inline/index.d.ts

@@ -1 +1,2 @@
 export * from "./popover-inline";
+export * from "./types";

package/popover/popover-inline/popover-inline.d.ts

@@ -1,2 +1,7 @@
-import type { PopoverInlineProps } from "../types";
+import type { PopoverInlineProps } from "./types";
+/**
+ * An inline text or icon element that opens a popover on interaction.
+ *
+ * Use `PopoverInline` to embed a labelled trigger directly within a body of content.
+ */
 export declare const PopoverInline: ({ ariaLabel, content, icon, underlineStyle, underlineHoverStyle, ...otherProps }: PopoverInlineProps) => import("react/jsx-runtime").JSX.Element;

package/popover/popover-inline/popover-inline.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover-inline.js","sources":["../../../src/popover/popover-inline/popover-inline.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { PopoverTrigger } from \"../popover-trigger\";\nimport type { PopoverInlineProps } from \"../types\";\nimport * as styles from \"./popover-inline.styles\";\n\nexport const PopoverInline = ({\n    ariaLabel,\n    content,\n    icon,\n    underlineStyle = \"default\",\n    underlineHoverStyle = \"default\",\n    ...otherProps\n}: PopoverInlineProps) => {\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const hasContent = !!content;\n\n    return (\n        <PopoverTrigger {...otherProps}>\n            <span\n                aria-label={ariaLabel ?? (hasContent ? undefined : \"More info\")}\n                role=\"button\"\n                aria-haspopup=\"dialog\"\n                tabIndex={0}\n                className={styles.popoverInlineText}\n                data-underline-style={underlineStyle}\n                data-underline-hover-style={underlineHoverStyle}\n            >\n                {content}\n                {icon && (\n                    <span\n                        className={clsx(\n                            hasContent && styles.popoverInlineIconWithContent\n                        )}\n                    >\n                        {icon}\n                    </span>\n                )}\n            </span>\n        </PopoverTrigger>\n    );\n};\n"],"names":["PopoverInline","_a","ariaLabel","content","icon","underlineStyle","underlineHoverStyle","otherProps","__rest","hasContent","_jsx","PopoverTrigger","Object","assign","children","_jsxs","undefined","role","tabIndex","className","styles.popoverInlineText","clsx","styles.popoverInlineIconWithContent"],"mappings":"gRAMO,MAAMA,EAAiBC,IAAA,IAAAC,UAC1BA,EAASC,QACTA,EAAOC,KACPA,EAAIC,eACJA,EAAiB,UAASC,oBAC1BA,EAAsB,WAASL,EAC5BM,EAAUC,EAAAP,EANa,uEAW1B,MAAMQ,IAAeN,EAErB,OACIO,EAACC,EAAcC,OAAAC,OAAA,CAAA,EAAKN,EAAU,CAAAO,SAC1BC,EAAA,OAAA,CAAA,aACgBb,QAAAA,EAAcO,OAAaO,EAAY,YACnDC,KAAK,SAAQ,gBACC,SACdC,SAAU,EACVC,UAAWC,yBACWf,EAAc,6BACRC,EAAmBQ,SAAA,CAE9CX,EACAC,GACGM,EAAA,OAAA,CACIS,UAAWE,EACPZ,GAAca,GACjBR,SAEAV,SAIA"}
+{"version":3,"file":"popover-inline.js","sources":["../../../src/popover/popover-inline/popover-inline.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { PopoverTrigger } from \"../popover-trigger\";\nimport * as styles from \"./popover-inline.styles\";\nimport type { PopoverInlineProps } from \"./types\";\n\n/**\n * An inline text or icon element that opens a popover on interaction.\n *\n * Use `PopoverInline` to embed a labelled trigger directly within a body of content.\n */\nexport const PopoverInline = ({\n    ariaLabel,\n    content,\n    icon,\n    underlineStyle = \"default\",\n    underlineHoverStyle = \"default\",\n    ...otherProps\n}: PopoverInlineProps) => {\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const hasContent = !!content;\n\n    return (\n        <PopoverTrigger {...otherProps}>\n            <span\n                aria-label={ariaLabel ?? (hasContent ? undefined : \"More info\")}\n                role=\"button\"\n                aria-haspopup=\"dialog\"\n                tabIndex={0}\n                className={styles.popoverInlineText}\n                data-underline-style={underlineStyle}\n                data-underline-hover-style={underlineHoverStyle}\n            >\n                {content}\n                {icon && (\n                    <span\n                        className={clsx(\n                            hasContent && styles.popoverInlineIconWithContent\n                        )}\n                    >\n                        {icon}\n                    </span>\n                )}\n            </span>\n        </PopoverTrigger>\n    );\n};\n"],"names":["PopoverInline","_a","ariaLabel","content","icon","underlineStyle","underlineHoverStyle","otherProps","__rest","hasContent","_jsx","PopoverTrigger","Object","assign","children","_jsxs","undefined","role","tabIndex","className","styles.popoverInlineText","clsx","styles.popoverInlineIconWithContent"],"mappings":"gRAWO,MAAMA,EAAiBC,IAAA,IAAAC,UAC1BA,EAASC,QACTA,EAAOC,KACPA,EAAIC,eACJA,EAAiB,UAASC,oBAC1BA,EAAsB,WAASL,EAC5BM,EAAUC,EAAAP,EANa,uEAW1B,MAAMQ,IAAeN,EAErB,OACIO,EAACC,EAAcC,OAAAC,OAAA,CAAA,EAAKN,EAAU,CAAAO,SAC1BC,EAAA,OAAA,CAAA,aACgBb,QAAAA,EAAcO,OAAaO,EAAY,YACnDC,KAAK,SAAQ,gBACC,SACdC,SAAU,EACVC,UAAWC,yBACWf,EAAc,6BACRC,EAAmBQ,SAAA,CAE9CX,EACAC,GACGM,EAAA,OAAA,CACIS,UAAWE,EACPZ,GAAca,GACjBR,SAEAV,SAIA"}

package/popover/popover-inline/types.d.ts

@@ -0,0 +1,36 @@
+import type { PopoverTriggerProps } from "../types";
+/**
+ * Underline decoration applied to the `PopoverInline` trigger span.
+ */
+export type PopoverInlineStyle = "default" | "underline" | "underline-dashed";
+/**
+ * Props for the `PopoverInline` component.
+ */
+export interface PopoverInlineProps extends Omit<PopoverTriggerProps, "children"> {
+    /**
+     * Accessible label for the trigger button.
+     *
+     * @default "More info" when `content` is not provided
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Label text or element displayed inside the trigger span.
+     */
+    content?: React.ReactNode | undefined;
+    /**
+     * Icon element rendered after `content` inside the trigger span.
+     */
+    icon?: JSX.Element | undefined;
+    /**
+     * Underline style applied to the trigger span in its default state.
+     *
+     * @default "default"
+     */
+    underlineStyle?: PopoverInlineStyle | undefined;
+    /**
+     * Underline style applied to the trigger span on hover.
+     *
+     * @default "default"
+     */
+    underlineHoverStyle?: PopoverInlineStyle | undefined;
+}

package/popover/popover-trigger.d.ts

@@ -1,2 +1,8 @@
 import type { PopoverTriggerProps } from "./types";
+/**
+ * Wraps an element to make it a popover trigger.
+ *
+ * Use `PopoverTrigger` when you need to attach a popover to any arbitrary
+ * child element.
+ */
 export declare const PopoverTrigger: ({ children, popoverContent, trigger: _trigger, position, zIndex, rootNode, customOffset, delay, onPopoverAppear, onPopoverDismiss, popoverAriaLabel, enableFlip, enableResize, overflow, triggerOnFocus, isModal, className, ...otherProps }: PopoverTriggerProps) => import("react/jsx-runtime").JSX.Element;

package/popover/popover-trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover-trigger.js","sources":["../../src/popover/popover-trigger.tsx"],"sourcesContent":["import {\n    autoUpdate,\n    flip,\n    FloatingFocusManager,\n    FloatingPortal,\n    limitShift,\n    offset,\n    shift,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useRef, useState } from \"react\";\n\nimport { useFloatingChild } from \"../overlay/use-floating-context\";\nimport { useInheritedThemeScope, useMaxWidthMediaQuery } from \"../theme\";\nimport { useId } from \"../util\";\nimport { Popover } from \"./popover\";\nimport * as styles from \"./popover-trigger.styles\";\nimport type { PopoverTriggerProps, PopoverTriggerType } from \"./types\";\n\nexport const PopoverTrigger = ({\n    children,\n    popoverContent,\n    trigger: _trigger = \"click\",\n    position = \"top\",\n    zIndex,\n    rootNode,\n    customOffset,\n    delay,\n    onPopoverAppear,\n    onPopoverDismiss,\n    popoverAriaLabel,\n    enableFlip = true,\n    enableResize = false,\n    overflow = \"auto\",\n    triggerOnFocus = false,\n    isModal = true,\n    className,\n    ...otherProps\n}: PopoverTriggerProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [visible, setVisible] = useState<boolean>(false);\n    const nodeRef = useRef<HTMLElement | null>(null);\n    const popoverRef = useRef<HTMLElement | null>(null);\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const [availableHeight, setAvailableHeight] = useState(0);\n    const internalId = useId();\n    const popoverContainerId = `${internalId}-popover`;\n\n    const { refs, floatingStyles, context } = useFloating({\n        open: visible,\n        placement: position,\n        whileElementsMounted: autoUpdate,\n        middleware: [\n            offset(customOffset ?? 16),\n            enableFlip && flip(),\n            shift({\n                limiter: limitShift(),\n            }),\n            enableResize &&\n                size({\n                    apply({ availableHeight }) {\n                        setAvailableHeight(availableHeight);\n                    },\n                }),\n        ],\n        onOpenChange: (isOpen) => {\n            setVisible(isOpen);\n\n            // this callback is triggering twice on hover, the check here prevents extra calls\n            if (visible !== isOpen) {\n                handleVisibilityChange(isOpen);\n            }\n        },\n    });\n    const parentZIndex = useFloatingChild();\n    const { themeProps, themeStyle } = useInheritedThemeScope(visible);\n\n    const trigger: PopoverTriggerType = isMobile ? \"click\" : _trigger;\n    const isTooltip = trigger === \"hover\";\n\n    const click = useClick(context, {\n        // allow trigger by Space/Enter, but disable mouse click in hover mode\n        ignoreMouse: isTooltip,\n    });\n\n    const dismiss = useDismiss(context);\n\n    const hover = useHover(context, {\n        enabled: isTooltip,\n        // short window to enter the floating element without it closing\n        delay: {\n            open: delay?.open ?? 0,\n            close: delay?.close ?? 500,\n        },\n    });\n\n    const focus = useFocus(context, {\n        enabled: triggerOnFocus,\n    });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        dismiss,\n        hover,\n        focus,\n    ]);\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const isFocusInside = (node: Node | null) => {\n        if (!node) return false;\n\n        if (\n            node instanceof HTMLElement &&\n            node.hasAttribute(\"data-floating-ui-focus-guard\")\n        ) {\n            return true;\n        }\n\n        const refEl = nodeRef.current;\n        const floatingEl = popoverRef.current?.parentElement;\n\n        return (\n            (!!refEl && refEl.contains(node)) ||\n            (!!floatingEl && floatingEl.contains(node))\n        );\n    };\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handlePopoverMobileClose = () => {\n        setVisible(false);\n        handleVisibilityChange(false);\n    };\n\n    const handleVisibilityChange = (nextVisible: boolean) => {\n        if (nextVisible && onPopoverAppear) onPopoverAppear();\n        if (!nextVisible && onPopoverDismiss) onPopoverDismiss();\n    };\n\n    const handleBlur = (e: React.FocusEvent<HTMLElement>) => {\n        // On mobile, ModalV2 handles its own dismiss via onMobileClose\n        if (isModal || (isMobile && typeof popoverContent !== \"function\"))\n            return;\n\n        const next =\n            (e.relatedTarget as Node | null) ??\n            (document.activeElement as Node | null);\n\n        if (next && isFocusInside(next)) return;\n\n        setVisible(false);\n        handleVisibilityChange(false);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderPopover = () => {\n        if (typeof popoverContent === \"function\") {\n            return popoverContent(\n                enableResize ? { maxHeight: availableHeight, overflow } : {}\n            );\n        }\n\n        return (\n            <Popover\n                visible\n                onMobileClose={handlePopoverMobileClose}\n                maxHeight={enableResize ? availableHeight : undefined}\n                overflow={enableResize ? overflow : undefined}\n                ariaLabel={popoverAriaLabel}\n                id={popoverContainerId}\n            >\n                {popoverContent}\n            </Popover>\n        );\n    };\n\n    return (\n        <>\n            <div\n                ref={(node) => {\n                    nodeRef.current = node;\n                    refs.setReference(node);\n                }}\n                {...getReferenceProps({\n                    onClick: (event) => {\n                        // prevent popover interaction from triggering click events on parents\n                        event.stopPropagation();\n                        event.preventDefault();\n                    },\n                })}\n                {...otherProps}\n                className={clsx(styles.triggerContainer, className)}\n            >\n                {children}\n            </div>\n            {visible && (\n                <FloatingPortal root={rootNode}>\n                    <FloatingFocusManager\n                        context={context}\n                        {...(!isModal && {\n                            initialFocus: -1,\n                            returnFocus: false,\n                            modal: false,\n                        })}\n                    >\n                        <div\n                            ref={(node) => {\n                                popoverRef.current = node;\n                                refs.setFloating(node);\n                            }}\n                            {...themeProps}\n                            onBlur={handleBlur}\n                            style={{\n                                ...themeStyle,\n                                ...floatingStyles,\n                                outline: \"none\",\n                                zIndex: zIndex ?? parentZIndex,\n                            }}\n                            {...getFloatingProps()}\n                        >\n                            {renderPopover()}\n                        </div>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </>\n    );\n};\n"],"names":["PopoverTrigger","_a","children","popoverContent","trigger","_trigger","position","zIndex","rootNode","customOffset","delay","onPopoverAppear","onPopoverDismiss","popoverAriaLabel","enableFlip","enableResize","overflow","triggerOnFocus","isModal","className","otherProps","__rest","visible","setVisible","useState","nodeRef","useRef","popoverRef","isMobile","useMaxWidthMediaQuery","availableHeight","setAvailableHeight","popoverContainerId","useId","refs","floatingStyles","context","useFloating","open","placement","whileElementsMounted","autoUpdate","middleware","offset","flip","shift","limiter","limitShift","size","apply","onOpenChange","isOpen","handleVisibilityChange","parentZIndex","useFloatingChild","themeProps","themeStyle","useInheritedThemeScope","isTooltip","click","useClick","ignoreMouse","dismiss","useDismiss","hover","useHover","enabled","_b","close","_c","focus","useFocus","getReferenceProps","getFloatingProps","useInteractions","handlePopoverMobileClose","nextVisible","_jsxs","_jsx","Object","assign","ref","node","current","setReference","onClick","event","stopPropagation","preventDefault","clsx","styles.triggerContainer","FloatingPortal","root","FloatingFocusManager","initialFocus","returnFocus","modal","setFloating","onBlur","e","next","relatedTarget","document","activeElement","HTMLElement","hasAttribute","refEl","floatingEl","parentElement","contains","isFocusInside","style","outline","maxHeight","Popover","onMobileClose","undefined","ariaLabel","id"],"mappings":"kmCA2BO,MAAMA,EAAkBC,aAAAC,SAC3BA,EAAQC,eACRA,EACAC,QAASC,EAAW,QAAOC,SAC3BA,EAAW,MAAKC,OAChBA,EAAMC,SACNA,EAAQC,aACRA,EAAYC,MACZA,EAAKC,gBACLA,EAAeC,iBACfA,EAAgBC,iBAChBA,EAAgBC,WAChBA,GAAa,EAAIC,aACjBA,GAAe,EAAKC,SACpBA,EAAW,OAAMC,eACjBA,GAAiB,EAAKC,QACtBA,GAAU,EAAIC,UACdA,GAASlB,EACNmB,EAAUC,EAAApB,EAlBc,CAAA,WAAA,iBAAA,UAAA,WAAA,SAAA,WAAA,eAAA,QAAA,kBAAA,mBAAA,mBAAA,aAAA,eAAA,WAAA,iBAAA,UAAA,cAuB3B,MAAOqB,EAASC,GAAcC,GAAkB,GAC1CC,EAAUC,EAA2B,MACrCC,EAAaD,EAA2B,MACxCE,EAAWC,EAAsB,OAChCC,EAAiBC,IAAsBP,EAAS,GAEjDQ,GAAqB,GADRC,eAGbC,KAAEA,GAAIC,eAAEA,GAAcC,QAAEA,IAAYC,EAAY,CAClDC,KAAMhB,EACNiB,UAAWjC,EACXkC,qBAAsBC,EACtBC,WAAY,CACRC,EAAOlC,QAAAA,EAAgB,IACvBK,GAAc8B,IACdC,EAAM,CACFC,QAASC,MAEbhC,GACIiC,EAAK,CACD,KAAAC,EAAMnB,gBAAEA,IACJC,GAAmBD,EACvB,KAGZoB,aAAeC,IACX5B,EAAW4B,GAGP7B,IAAY6B,GACZC,GAAuBD,EAC3B,IAGFE,GAAeC,KACfC,WAAEA,GAAUC,WAAEA,IAAeC,EAAuBnC,GAGpDoC,GAAwB,WADM9B,EAAW,QAAUvB,GAGnDsD,GAAQC,EAASxB,GAAS,CAE5ByB,YAAaH,KAGXI,GAAUC,EAAW3B,IAErB4B,GAAQC,EAAS7B,GAAS,CAC5B8B,QAASR,GAEThD,MAAO,CACH4B,KAAiB,QAAX6B,EAAAzD,eAAAA,EAAO4B,YAAI,IAAA6B,EAAAA,EAAI,EACrBC,MAAmB,QAAZC,EAAA3D,eAAAA,EAAO0D,aAAK,IAAAC,EAAAA,EAAI,OAIzBC,GAAQC,EAASnC,GAAS,CAC5B8B,QAASjD,KAGPuD,kBAAEA,GAAiBC,iBAAEA,IAAqBC,EAAgB,CAC5Df,GACAG,GACAE,GACAM,KA4BEK,GAA2B,KAC7BpD,GAAW,GACX6B,IAAuB,EAAM,EAG3BA,GAA0BwB,IACxBA,GAAejE,GAAiBA,KAC/BiE,GAAehE,GAAkBA,GAAkB,EA0C5D,OACIiE,eACIC,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAMC,IACFzD,EAAQ0D,QAAUD,EAClBhD,GAAKkD,aAAaF,EAAK,GAEvBV,GAAkB,CAClBa,QAAUC,IAENA,EAAMC,kBACND,EAAME,gBAAgB,IAG1BpE,EAAU,CACdD,UAAWsE,EAAKC,EAAyBvE,GAAUjB,SAElDA,KAEJoB,GACGwD,EAACa,EAAc,CAACC,KAAMpF,EAAQN,SAC1B4E,EAACe,EAAoBd,OAAAC,OAAA,CACjB5C,QAASA,KACHlB,GAAW,CACb4E,cAAc,EACdC,aAAa,EACbC,OAAO,aAGXlB,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAMC,IACFvD,EAAWwD,QAAUD,EACrBhD,GAAK+D,YAAYf,EAAK,GAEtB3B,GAAU,CACd2C,OA1EJC,UAEhB,GAAIjF,GAAYU,GAAsC,mBAAnBzB,EAC/B,OAEJ,MAAMiG,EAC8B,QAAhCnG,EAACkG,EAAEE,qBAA6B,IAAApG,EAAAA,EAC/BqG,SAASC,cAEVH,GAzCc,CAAClB,UACnB,IAAKA,EAAM,OAAO,EAElB,GACIA,aAAgBsB,aAChBtB,EAAKuB,aAAa,gCAElB,OAAO,EAGX,MAAMC,EAAQjF,EAAQ0D,QAChBwB,EAA+B,QAAlB1G,EAAA0B,EAAWwD,eAAO,IAAAlF,OAAA,EAAAA,EAAE2G,cAEvC,QACOF,GAASA,EAAMG,SAAS3B,MACxByB,GAAcA,EAAWE,SAAS3B,EAAM,EA0BnC4B,CAAcV,KAE1B7E,GAAW,GACX6B,IAAuB,GAAM,EA+DT2D,MAAKhC,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACExB,IACArB,IAAc,CACjB6E,QAAS,OACTzG,OAAQA,QAAAA,EAAU8C,MAElBoB,KAAkB,CAAAvE,SA9DZ,mBAAnBC,EACAA,EACHY,EAAe,CAAEkG,UAAWnF,EAAiBd,YAAa,IAK9D8D,EAACoC,EAAO,CACJ5F,SAAO,EACP6F,cAAexC,GACfsC,UAAWlG,EAAee,OAAkBsF,EAC5CpG,SAAUD,EAAeC,OAAWoG,EACpCC,UAAWxG,EACXyG,GAAItF,GAAkB9B,SAErBC,cAsDN"}
+{"version":3,"file":"popover-trigger.js","sources":["../../src/popover/popover-trigger.tsx"],"sourcesContent":["import {\n    autoUpdate,\n    flip,\n    FloatingFocusManager,\n    FloatingPortal,\n    limitShift,\n    offset,\n    shift,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useRef, useState } from \"react\";\n\nimport { useFloatingChild } from \"../overlay/use-floating-context\";\nimport { useInheritedThemeScope, useMaxWidthMediaQuery } from \"../theme\";\nimport { useId } from \"../util\";\nimport { Popover } from \"./popover\";\nimport * as styles from \"./popover-trigger.styles\";\nimport type { PopoverTriggerProps, PopoverTriggerType } from \"./types\";\n\n/**\n * Wraps an element to make it a popover trigger.\n *\n * Use `PopoverTrigger` when you need to attach a popover to any arbitrary\n * child element.\n */\nexport const PopoverTrigger = ({\n    children,\n    popoverContent,\n    trigger: _trigger = \"click\",\n    position = \"top\",\n    zIndex,\n    rootNode,\n    customOffset,\n    delay,\n    onPopoverAppear,\n    onPopoverDismiss,\n    popoverAriaLabel,\n    enableFlip = true,\n    enableResize = false,\n    overflow = \"auto\",\n    triggerOnFocus = false,\n    isModal = true,\n    className,\n    ...otherProps\n}: PopoverTriggerProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [visible, setVisible] = useState<boolean>(false);\n    const nodeRef = useRef<HTMLElement | null>(null);\n    const popoverRef = useRef<HTMLElement | null>(null);\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const [availableHeight, setAvailableHeight] = useState(0);\n    const internalId = useId();\n    const popoverContainerId = `${internalId}-popover`;\n\n    const { refs, floatingStyles, context } = useFloating({\n        open: visible,\n        placement: position,\n        whileElementsMounted: autoUpdate,\n        middleware: [\n            offset(customOffset ?? 16),\n            enableFlip && flip(),\n            shift({\n                limiter: limitShift(),\n            }),\n            enableResize &&\n                size({\n                    apply({ availableHeight }) {\n                        setAvailableHeight(availableHeight);\n                    },\n                }),\n        ],\n        onOpenChange: (isOpen) => {\n            setVisible(isOpen);\n\n            // this callback is triggering twice on hover, the check here prevents extra calls\n            if (visible !== isOpen) {\n                handleVisibilityChange(isOpen);\n            }\n        },\n    });\n    const parentZIndex = useFloatingChild();\n    const { themeProps, themeStyle } = useInheritedThemeScope(visible);\n\n    const trigger: PopoverTriggerType = isMobile ? \"click\" : _trigger;\n    const isTooltip = trigger === \"hover\";\n\n    const click = useClick(context, {\n        // allow trigger by Space/Enter, but disable mouse click in hover mode\n        ignoreMouse: isTooltip,\n    });\n\n    const dismiss = useDismiss(context);\n\n    const hover = useHover(context, {\n        enabled: isTooltip,\n        // short window to enter the floating element without it closing\n        delay: {\n            open: delay?.open ?? 0,\n            close: delay?.close ?? 500,\n        },\n    });\n\n    const focus = useFocus(context, {\n        enabled: triggerOnFocus,\n    });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        dismiss,\n        hover,\n        focus,\n    ]);\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const isFocusInside = (node: Node | null) => {\n        if (!node) return false;\n\n        if (\n            node instanceof HTMLElement &&\n            node.hasAttribute(\"data-floating-ui-focus-guard\")\n        ) {\n            return true;\n        }\n\n        const refEl = nodeRef.current;\n        const floatingEl = popoverRef.current?.parentElement;\n\n        return (\n            (!!refEl && refEl.contains(node)) ||\n            (!!floatingEl && floatingEl.contains(node))\n        );\n    };\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handlePopoverMobileClose = () => {\n        setVisible(false);\n        handleVisibilityChange(false);\n    };\n\n    const handleVisibilityChange = (nextVisible: boolean) => {\n        if (nextVisible && onPopoverAppear) onPopoverAppear();\n        if (!nextVisible && onPopoverDismiss) onPopoverDismiss();\n    };\n\n    const handleBlur = (e: React.FocusEvent<HTMLElement>) => {\n        // On mobile, ModalV2 handles its own dismiss via onMobileClose\n        if (isModal || (isMobile && typeof popoverContent !== \"function\"))\n            return;\n\n        const next =\n            (e.relatedTarget as Node | null) ??\n            (document.activeElement as Node | null);\n\n        if (next && isFocusInside(next)) return;\n\n        setVisible(false);\n        handleVisibilityChange(false);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderPopover = () => {\n        if (typeof popoverContent === \"function\") {\n            return popoverContent(\n                enableResize ? { maxHeight: availableHeight, overflow } : {}\n            );\n        }\n\n        return (\n            <Popover\n                visible\n                onMobileClose={handlePopoverMobileClose}\n                maxHeight={enableResize ? availableHeight : undefined}\n                overflow={enableResize ? overflow : undefined}\n                ariaLabel={popoverAriaLabel}\n                id={popoverContainerId}\n            >\n                {popoverContent}\n            </Popover>\n        );\n    };\n\n    return (\n        <>\n            <div\n                ref={(node) => {\n                    nodeRef.current = node;\n                    refs.setReference(node);\n                }}\n                {...getReferenceProps({\n                    onClick: (event) => {\n                        // prevent popover interaction from triggering click events on parents\n                        event.stopPropagation();\n                        event.preventDefault();\n                    },\n                })}\n                {...otherProps}\n                className={clsx(styles.triggerContainer, className)}\n            >\n                {children}\n            </div>\n            {visible && (\n                <FloatingPortal root={rootNode}>\n                    <FloatingFocusManager\n                        context={context}\n                        {...(!isModal && {\n                            initialFocus: -1,\n                            returnFocus: false,\n                            modal: false,\n                        })}\n                    >\n                        <div\n                            ref={(node) => {\n                                popoverRef.current = node;\n                                refs.setFloating(node);\n                            }}\n                            {...themeProps}\n                            onBlur={handleBlur}\n                            style={{\n                                ...themeStyle,\n                                ...floatingStyles,\n                                outline: \"none\",\n                                zIndex: zIndex ?? parentZIndex,\n                            }}\n                            {...getFloatingProps()}\n                        >\n                            {renderPopover()}\n                        </div>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </>\n    );\n};\n"],"names":["PopoverTrigger","_a","children","popoverContent","trigger","_trigger","position","zIndex","rootNode","customOffset","delay","onPopoverAppear","onPopoverDismiss","popoverAriaLabel","enableFlip","enableResize","overflow","triggerOnFocus","isModal","className","otherProps","__rest","visible","setVisible","useState","nodeRef","useRef","popoverRef","isMobile","useMaxWidthMediaQuery","availableHeight","setAvailableHeight","popoverContainerId","useId","refs","floatingStyles","context","useFloating","open","placement","whileElementsMounted","autoUpdate","middleware","offset","flip","shift","limiter","limitShift","size","apply","onOpenChange","isOpen","handleVisibilityChange","parentZIndex","useFloatingChild","themeProps","themeStyle","useInheritedThemeScope","isTooltip","click","useClick","ignoreMouse","dismiss","useDismiss","hover","useHover","enabled","_b","close","_c","focus","useFocus","getReferenceProps","getFloatingProps","useInteractions","handlePopoverMobileClose","nextVisible","_jsxs","_jsx","Object","assign","ref","node","current","setReference","onClick","event","stopPropagation","preventDefault","clsx","styles.triggerContainer","FloatingPortal","root","FloatingFocusManager","initialFocus","returnFocus","modal","setFloating","onBlur","e","next","relatedTarget","document","activeElement","HTMLElement","hasAttribute","refEl","floatingEl","parentElement","contains","isFocusInside","style","outline","maxHeight","Popover","onMobileClose","undefined","ariaLabel","id"],"mappings":"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"}

package/popover/popover.d.ts

@@ -1,2 +1,8 @@
 import type { PopoverProps } from "./types";
+/**
+ * The presentational overlay for a popover panel. Renders as a floating card
+ * on desktop and modal on mobile.
+ *
+ * Use with `PopoverTrigger`, which manages visibility state and positioning.
+ */
 export declare const Popover: ({ children, visible, onMobileClose, maxHeight, overflow, ariaLabel, id, className, "data-testid": testId, ...otherProps }: PopoverProps) => JSX.Element;

package/popover/popover.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as o,Fragment as r,jsx as i}from"react/jsx-runtime";import t from"clsx";import{useRef as l,useMemo as s}from"react";import{Card as m}from"../card/card.js";import{Markup as a}from"../markup/markup.js";import{ModalV2 as d}from"../modal-v2/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as n}from"../theme/utils/use-apply-styles.js";import{useMaxWidthMediaQuery as p}from"../theme/utils/use-media-query.js";import{Typography as c}from"../typography/index.js";import{tokens as h,popoverCard as f,popoverCardWithMaxHeight as v,popoverCardWithOverflow as u,popoverContainer as j}from"./popover.styles.js";const b=b=>{var{children:x,visible:y=!1,onMobileClose:C,maxHeight:g,overflow:k,ariaLabel:w="More information",id:M,className:N,"data-testid":H="popover"}=b,q=e(b,["children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id","className","data-testid"]);const B=p("sm"),L=l(null),O=s((()=>({[h.popoverCard.maxHeight]:void 0===g?null:`${g}px`,[h.popoverCard.overflowY]:null!=k?k:null})),[g,k]);n(L,O);const _=()=>{C&&C()},z=()=>"string"==typeof x?i(c.BodyMD,{children:x}):x;return o(r,{children:[y&&!B&&i("div",Object.assign({ref:L,tabIndex:0,"data-testid":H},q,{className:t(j,N),id:M,role:"dialog","aria-label":w,children:i(m,{className:t(f,void 0!==g&&v,k&&u),children:i(a,{baseTextSize:"body-md",children:z()})})})),B&&i(d,{show:y,onOverlayClick:_,onClose:_,id:M,role:"dialog","aria-label":w,children:o(d.Card,{children:[i(d.Content,{children:i(a,{children:z()})}),i(d.CloseButton,{})]})})]})};export{b as Popover};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as o,Fragment as r,jsx as t}from"react/jsx-runtime";import i from"clsx";import{useRef as l,useMemo as m}from"react";import{Card as s}from"../card/card.js";import{Markup as a}from"../markup/markup.js";import{ModalV2 as d}from"../modal-v2/modal-v2.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as n}from"../theme/utils/use-apply-styles.js";import{useMaxWidthMediaQuery as p}from"../theme/utils/use-media-query.js";import{Typography as c}from"../typography/index.js";import{tokens as h,popoverCard as v,popoverCardWithMaxHeight as f,popoverCardWithOverflow as u,popoverContainer as j}from"./popover.styles.js";const b=b=>{var{children:x,visible:y=!1,onMobileClose:C,maxHeight:g,overflow:k,ariaLabel:w="More information",id:M,className:N,"data-testid":H="popover"}=b,q=e(b,["children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id","className","data-testid"]);const B=p("sm"),L=l(null),O=m((()=>({[h.popoverCard.maxHeight]:void 0===g?null:`${g}px`,[h.popoverCard.overflowY]:null!=k?k:null})),[g,k]);n(L,O);const _=()=>{C&&C()},z=()=>"string"==typeof x?t(c.BodyMD,{children:x}):x;return o(r,{children:[y&&!B&&t("div",Object.assign({ref:L,tabIndex:0,"data-testid":H},q,{className:i(j,N),id:M,role:"dialog","aria-label":w,children:t(s,{className:i(v,void 0!==g&&f,k&&u),children:t(a,{baseTextSize:"body-md",children:z()})})})),B&&t(d,{show:y,onOverlayClick:_,onClose:_,id:M,role:"dialog","aria-label":w,children:o(d.Card,{children:[t(d.Content,{children:t(a,{children:z()})}),t(d.CloseButton,{})]})})]})};export{b as Popover};
 //# sourceMappingURL=popover.js.map

package/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../src/popover/popover.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useMemo, useRef } from \"react\";\n\nimport { Card } from \"../card\";\nimport { Markup } from \"../markup\";\nimport { ModalV2 } from \"../modal-v2\";\nimport { useApplyStyle, useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./popover.styles\";\nimport type { PopoverProps } from \"./types\";\n\nexport const Popover = ({\n    children,\n    visible = false,\n    onMobileClose,\n    maxHeight,\n    overflow,\n    ariaLabel = \"More information\",\n    id,\n    className,\n    \"data-testid\": testId = \"popover\",\n    ...otherProps\n}: PopoverProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const popoverContainerRef = useRef<HTMLDivElement>(null);\n    const popoverCardStyle = useMemo(\n        () => ({\n            [styles.tokens.popoverCard.maxHeight]:\n                maxHeight === undefined ? null : `${maxHeight}px`,\n            [styles.tokens.popoverCard.overflowY]: overflow ?? null,\n        }),\n        [maxHeight, overflow]\n    );\n    useApplyStyle(popoverContainerRef, popoverCardStyle);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleMobileClose = () => {\n        if (onMobileClose) {\n            onMobileClose();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () =>\n        typeof children === \"string\" ? (\n            <Typography.BodyMD>{children}</Typography.BodyMD>\n        ) : (\n            children\n        );\n\n    return (\n        <>\n            {visible && !isMobile && (\n                <div\n                    ref={popoverContainerRef}\n                    tabIndex={0}\n                    data-testid={testId}\n                    {...otherProps}\n                    className={clsx(styles.popoverContainer, className)}\n                    id={id}\n                    role=\"dialog\"\n                    aria-label={ariaLabel}\n                >\n                    <Card\n                        className={clsx(\n                            styles.popoverCard,\n                            maxHeight !== undefined &&\n                                styles.popoverCardWithMaxHeight,\n                            overflow && styles.popoverCardWithOverflow\n                        )}\n                    >\n                        <Markup baseTextSize=\"body-md\">\n                            {renderContent()}\n                        </Markup>\n                    </Card>\n                </div>\n            )}\n            {isMobile && (\n                <ModalV2\n                    show={visible}\n                    onOverlayClick={handleMobileClose}\n                    onClose={handleMobileClose}\n                    id={id}\n                    role=\"dialog\"\n                    aria-label={ariaLabel}\n                >\n                    <ModalV2.Card>\n                        <ModalV2.Content>\n                            <Markup>{renderContent()}</Markup>\n                        </ModalV2.Content>\n                        <ModalV2.CloseButton />\n                    </ModalV2.Card>\n                </ModalV2>\n            )}\n        </>\n    );\n};\n"],"names":["Popover","_a","children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id","className","testId","otherProps","__rest","isMobile","useMaxWidthMediaQuery","popoverContainerRef","useRef","popoverCardStyle","useMemo","styles.tokens","popoverCard","undefined","overflowY","useApplyStyle","handleMobileClose","renderContent","_jsx","Typography","BodyMD","_jsxs","_Fragment","Object","assign","ref","tabIndex","clsx","styles.popoverContainer","role","Card","styles.popoverCard","styles.popoverCardWithMaxHeight","styles.popoverCardWithOverflow","Markup","baseTextSize","ModalV2","show","onOverlayClick","onClose","Content","CloseButton"],"mappings":"i2BAWO,MAAMA,EAAWC,IAAA,IAAAC,SACpBA,EAAQC,QACRA,GAAU,EAAKC,cACfA,EAAaC,UACbA,EAASC,SACTA,EAAQC,UACRA,EAAY,mBAAkBC,GAC9BA,EAAEC,UACFA,EACA,cAAeC,EAAS,WAAST,EAC9BU,EAAUC,EAAAX,EAVO,0GAepB,MAAMY,EAAWC,EAAsB,MACjCC,EAAsBC,EAAuB,MAC7CC,EAAmBC,GACrB,KAAA,CACI,CAACC,EAAcC,YAAYf,gBACTgB,IAAdhB,EAA0B,KAAO,GAAGA,MACxC,CAACc,EAAcC,YAAYE,WAAYhB,QAAAA,EAAY,QAEvD,CAACD,EAAWC,IAEhBiB,EAAcR,EAAqBE,GAKnC,MAAMO,EAAoB,KAClBpB,GACAA,GACJ,EAMEqB,EAAgB,IACE,iBAAbvB,EACHwB,EAACC,EAAWC,OAAM,CAAA1B,SAAEA,IAA6B,EAKzD,OACI2B,EAAAC,EAAA,CAAA5B,SAAA,CACKC,IAAYU,GACTa,EAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKlB,EACLmB,SAAU,EAAC,cACExB,GACTC,EAAU,CACdF,UAAW0B,EAAKC,EAAyB3B,GACzCD,GAAIA,EACJ6B,KAAK,SAAQ,aACD9B,EAASL,SAErBwB,EAACY,EAAI,CACD7B,UAAW0B,EACPI,OACclB,IAAdhB,GACImC,EACJlC,GAAYmC,GACfvC,SAEDwB,EAACgB,EAAM,CAACC,aAAa,mBAChBlB,WAKhBZ,GACGa,EAACkB,EAAO,CACJC,KAAM1C,EACN2C,eAAgBtB,EAChBuB,QAASvB,EACThB,GAAIA,EACJ6B,KAAK,SAAQ,aACD9B,EAASL,SAErB2B,EAACe,EAAQN,KAAI,CAAApC,SAAA,CACTwB,EAACkB,EAAQI,QAAO,CAAA9C,SACZwB,EAACgB,EAAM,CAAAxC,SAAEuB,QAEbC,EAACkB,EAAQK,YAAW,CAAA,UAIjC"}
+{"version":3,"file":"popover.js","sources":["../../src/popover/popover.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useMemo, useRef } from \"react\";\n\nimport { Card } from \"../card\";\nimport { Markup } from \"../markup\";\nimport { ModalV2 } from \"../modal-v2\";\nimport { useApplyStyle, useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./popover.styles\";\nimport type { PopoverProps } from \"./types\";\n\n// @catalog\n/**\n * The presentational overlay for a popover panel. Renders as a floating card\n * on desktop and modal on mobile.\n *\n * Use with `PopoverTrigger`, which manages visibility state and positioning.\n */\nexport const Popover = ({\n    children,\n    visible = false,\n    onMobileClose,\n    maxHeight,\n    overflow,\n    ariaLabel = \"More information\",\n    id,\n    className,\n    \"data-testid\": testId = \"popover\",\n    ...otherProps\n}: PopoverProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const popoverContainerRef = useRef<HTMLDivElement>(null);\n    const popoverCardStyle = useMemo(\n        () => ({\n            [styles.tokens.popoverCard.maxHeight]:\n                maxHeight === undefined ? null : `${maxHeight}px`,\n            [styles.tokens.popoverCard.overflowY]: overflow ?? null,\n        }),\n        [maxHeight, overflow]\n    );\n    useApplyStyle(popoverContainerRef, popoverCardStyle);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleMobileClose = () => {\n        if (onMobileClose) {\n            onMobileClose();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () =>\n        typeof children === \"string\" ? (\n            <Typography.BodyMD>{children}</Typography.BodyMD>\n        ) : (\n            children\n        );\n\n    return (\n        <>\n            {visible && !isMobile && (\n                <div\n                    ref={popoverContainerRef}\n                    tabIndex={0}\n                    data-testid={testId}\n                    {...otherProps}\n                    className={clsx(styles.popoverContainer, className)}\n                    id={id}\n                    role=\"dialog\"\n                    aria-label={ariaLabel}\n                >\n                    <Card\n                        className={clsx(\n                            styles.popoverCard,\n                            maxHeight !== undefined &&\n                                styles.popoverCardWithMaxHeight,\n                            overflow && styles.popoverCardWithOverflow\n                        )}\n                    >\n                        <Markup baseTextSize=\"body-md\">\n                            {renderContent()}\n                        </Markup>\n                    </Card>\n                </div>\n            )}\n            {isMobile && (\n                <ModalV2\n                    show={visible}\n                    onOverlayClick={handleMobileClose}\n                    onClose={handleMobileClose}\n                    id={id}\n                    role=\"dialog\"\n                    aria-label={ariaLabel}\n                >\n                    <ModalV2.Card>\n                        <ModalV2.Content>\n                            <Markup>{renderContent()}</Markup>\n                        </ModalV2.Content>\n                        <ModalV2.CloseButton />\n                    </ModalV2.Card>\n                </ModalV2>\n            )}\n        </>\n    );\n};\n"],"names":["Popover","_a","children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id","className","testId","otherProps","__rest","isMobile","useMaxWidthMediaQuery","popoverContainerRef","useRef","popoverCardStyle","useMemo","styles.tokens","popoverCard","undefined","overflowY","useApplyStyle","handleMobileClose","renderContent","_jsx","Typography","BodyMD","_jsxs","_Fragment","Object","assign","ref","tabIndex","clsx","styles.popoverContainer","role","Card","styles.popoverCard","styles.popoverCardWithMaxHeight","styles.popoverCardWithOverflow","Markup","baseTextSize","ModalV2","show","onOverlayClick","onClose","Content","CloseButton"],"mappings":"o2BAkBO,MAAMA,EAAWC,IAAA,IAAAC,SACpBA,EAAQC,QACRA,GAAU,EAAKC,cACfA,EAAaC,UACbA,EAASC,SACTA,EAAQC,UACRA,EAAY,mBAAkBC,GAC9BA,EAAEC,UACFA,EACA,cAAeC,EAAS,WAAST,EAC9BU,EAAUC,EAAAX,EAVO,0GAepB,MAAMY,EAAWC,EAAsB,MACjCC,EAAsBC,EAAuB,MAC7CC,EAAmBC,GACrB,KAAA,CACI,CAACC,EAAcC,YAAYf,gBACTgB,IAAdhB,EAA0B,KAAO,GAAGA,MACxC,CAACc,EAAcC,YAAYE,WAAYhB,QAAAA,EAAY,QAEvD,CAACD,EAAWC,IAEhBiB,EAAcR,EAAqBE,GAKnC,MAAMO,EAAoB,KAClBpB,GACAA,GACJ,EAMEqB,EAAgB,IACE,iBAAbvB,EACHwB,EAACC,EAAWC,OAAM,CAAA1B,SAAEA,IAA6B,EAKzD,OACI2B,EAAAC,EAAA,CAAA5B,SAAA,CACKC,IAAYU,GACTa,EAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKlB,EACLmB,SAAU,EAAC,cACExB,GACTC,EAAU,CACdF,UAAW0B,EAAKC,EAAyB3B,GACzCD,GAAIA,EACJ6B,KAAK,SAAQ,aACD9B,EAASL,SAErBwB,EAACY,EAAI,CACD7B,UAAW0B,EACPI,OACclB,IAAdhB,GACImC,EACJlC,GAAYmC,GACfvC,SAEDwB,EAACgB,EAAM,CAACC,aAAa,mBAChBlB,WAKhBZ,GACGa,EAACkB,EAAO,CACJC,KAAM1C,EACN2C,eAAgBtB,EAChBuB,QAASvB,EACThB,GAAIA,EACJ6B,KAAK,SAAQ,aACD9B,EAASL,SAErB2B,EAACe,EAAQN,KAAI,CAAApC,SAAA,CACTwB,EAACkB,EAAQI,QAAO,CAAA9C,SACZwB,EAACgB,EAAM,CAAAxC,SAAEuB,QAEbC,EAACkB,EAAQK,YAAW,CAAA,UAIjC"}

package/popover/types.d.ts

@@ -1,59 +1,173 @@
 import type { RefObject } from "react";
+/**
+ * Props for the `Popover` component.
+ */
 export interface PopoverProps extends PopoverRenderProps {
+    /**
+     * Content displayed inside the popover. A plain string is automatically
+     * wrapped in a `Typography.BodyMD` element.
+     */
     children: string | JSX.Element;
+    /**
+     * Controls whether the popover is visible.
+     *
+     * @default false
+     */
     visible?: boolean | undefined;
     id?: string | undefined;
     className?: string | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * Called when the user dismisses the popover on a mobile viewport, either
+     * by tapping the overlay or the close button.
+     */
     onMobileClose?: (() => void) | undefined;
+    /**
+     * Accessible label for the `role="dialog"` element.
+     *
+     * @default "More information"
+     */
     ariaLabel?: string | undefined;
 }
+/**
+ * Style constraints that control the popover card's height and overflow.
+ */
 export interface PopoverRenderProps {
+    /**
+     * CSS `overflow` value applied to the popover card body.
+     */
     overflow?: PopoverOverflowType | undefined;
+    /**
+     * Maximum height of the popover card in pixels.
+     */
     maxHeight?: number | undefined;
 }
+/**
+ * Interaction that opens the popover.
+ *
+ * @remarks On mobile viewports `"hover"` is automatically promoted to `"click"`.
+ */
 export type PopoverTriggerType = "click" | "hover";
 type Position = "top" | "right" | "bottom" | "left";
 type Alignment = "start" | "end";
 type AlignedPosition = `${Position}-${Alignment}`;
+/**
+ * CSS `overflow` value applied to the popover card body.
+ */
 export type PopoverOverflowType = "visible" | "hidden" | "clip" | "scroll" | "auto";
+/**
+ * Preferred placement of the popover relative to its trigger element.
+ */
 export type PopoverPosition = Position | AlignedPosition;
+/**
+ * Props for the `PopoverTrigger` component.
+ */
 export interface PopoverTriggerProps {
+    /**
+     * The trigger element rendered inside a focusable wrapper div.
+     */
     children: React.ReactNode;
+    /**
+     * Content shown inside the popover panel. A string or JSX element is
+     * rendered inside the default `Popover`; a render function bypasses it
+     * for completely custom rendering.
+     */
     popoverContent: string | JSX.Element | ((renderProps: PopoverRenderProps) => React.ReactNode);
+    /**
+     * Interaction that opens the popover.
+     *
+     * @remarks On mobile, always `"click"`.
+     *
+     * @default "click"
+     */
     trigger?: PopoverTriggerType | undefined;
+    /**
+     * Preferred placement of the popover relative to the trigger.
+     *
+     * @default "top"
+     */
     position?: PopoverPosition | undefined;
     id?: string | undefined;
+    /**
+     * Overrides the stacking context z-index for the floating popover layer.
+     * Falls back to the inherited floating context z-index when omitted.
+     */
     zIndex?: number | undefined;
     className?: string | undefined;
     "data-testid"?: string | undefined;
     /**
-     * The root element that contains the popover element. Defaults to the document body.
+     * The root element that contains the popover element.
+     *
+     * @remarks Specify this if you need to change the parent of the
+     * popover in the HTML DOM.
+     * Possible use case: sharing a stacking context.
+     *
+     * Note: if a parent of the trigger has a higher `z-index` than the popover,
+     * the popover may be obscured.
      *
-     * If the parent that contains the trigger element has a higher z-index than the popover,
-     * the popover may not be visible. Specify the parent element here instead
+     * @default document.body
      */
     rootNode?: RefObject<HTMLElement> | undefined;
+    /**
+     * Distance in pixels between the trigger element and the popover panel.
+     *
+     * @default 16
+     */
     customOffset?: number | undefined;
+    /**
+     * Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.
+     */
     delay?: {
         open?: number | undefined;
         close?: number | undefined;
     } | undefined;
+    /**
+     * Allows the popover to flip to the opposite side when the preferred
+     * position has insufficient viewport space.
+     *
+     * @default true
+     */
     enableFlip?: boolean | undefined;
+    /**
+     * Resizes the popover to fit the remaining vertical space in the viewport.
+     *
+     * @default false
+     */
     enableResize?: boolean | undefined;
+    /**
+     * CSS `overflow` value forwarded to the popover card when `enableResize`
+     * is active.
+     *
+     * @default "auto"
+     */
     overflow?: PopoverOverflowType | undefined;
+    /**
+     * Accessible label for the popover dialog element.
+     *
+     * @default "More information"
+     */
     popoverAriaLabel?: string | undefined;
+    /**
+     * Also opens the popover when the trigger element receives focus.
+     *
+     * @default false
+     */
     triggerOnFocus?: boolean | undefined;
+    /**
+     * When `true`, focus is trapped inside the popover until dismissed.
+     * When `false`, the popover closes automatically once the user tabs
+     * away from both the trigger and the popover.
+     *
+     * @default true
+     */
     isModal?: boolean | undefined;
+    /**
+     * Called when the popover becomes visible.
+     */
     onPopoverAppear?: (() => void) | undefined;
+    /**
+     * Called when the popover is dismissed.
+     */
     onPopoverDismiss?: (() => void) | undefined;
 }
-export type PopoverInlineStyle = "default" | "underline" | "underline-dashed";
-export interface PopoverInlineProps extends Omit<PopoverTriggerProps, "children"> {
-    ariaLabel?: string | undefined;
-    content?: React.ReactNode | undefined;
-    icon?: JSX.Element | undefined;
-    underlineStyle?: PopoverInlineStyle | undefined;
-    underlineHoverStyle?: PopoverInlineStyle | undefined;
-}
 export {};