@ni/nimble-components 29.7.7 → 29.7.9

package/dist/esm/patterns/dropdown/styles.js

@@ -9,6 +9,7 @@ import { focusVisible } from '../../utilities/style/focus';
 import { themeBehavior } from '../../utilities/style/theme';
 import { DropdownAppearance } from './types';
 import { userSelectNone } from '../../utilities/style/user-select';
+// prettier-ignore
 export const styles = css `
     ${display('inline-flex')}
 
@@ -120,18 +121,23 @@ export const styles = css `
         flex-direction: column;
         overflow-y: auto;
         width: 100%;
+        --ni-private-listbox-visible-option-count: 10.5;
+        --ni-private-listbox-anchor-element-gap: ${smallPadding};
         --ni-private-listbox-padding: ${smallPadding};
         --ni-private-listbox-filter-height: 0px;
         --ni-private-listbox-loading-indicator-height: 0px;
         max-height: min(
             calc(
-                ${smallPadding} + 2 * ${borderWidth} + ${controlHeight} * 10.5 +
-                    var(--ni-private-listbox-filter-height) +
-                    var(--ni-private-listbox-loading-indicator-height)
+                var(--ni-private-listbox-anchor-element-gap) + 
+                2 * ${borderWidth} + 
+                var(--ni-private-listbox-padding) +
+                ${controlHeight} * var(--ni-private-listbox-visible-option-count) +
+                var(--ni-private-listbox-filter-height) +
+                var(--ni-private-listbox-loading-indicator-height)
             ),
             calc(
-                var(--ni-private-listbox-available-viewport-height) -
-                    ${smallPadding}
+                var(--ni-private-listbox-available-viewport-height) - 
+                var(--ni-private-listbox-anchor-element-gap)
             )
         );
         box-shadow: ${elevation2BoxShadow};

package/dist/esm/patterns/dropdown/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,mBAAmB,EACtB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEnE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;iBAGX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;UAGrB,cAAc;qBACH,YAAY;;;mDAGkB,WAAW;;;;;;;;uBAQvC,WAAW;;;;yBAIT,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;+BAKO,SAAS;;;;;;4BAMZ,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;;;;;;;YAU1B,YAAY;;;;;+BAKO,SAAS;;;;;;;;;;;;;;;;;iCAiBP,qBAAqB;;mBAEnC,WAAW;;;;+BAIC,gBAAgB;;;;;iBAK9B,qBAAqB;6BACT,qBAAqB;;;;;;+BAMnB,SAAS;;;;;;;;wCAQA,YAAY;;;;;kBAKlC,YAAY,UAAU,WAAW,MAAM,aAAa;;;;;;sBAMhD,YAAY;;;sBAGZ,mBAAmB;kBACvB,WAAW,UAAU,gBAAgB;4BAC3B,0BAA0B;;;;8CAIR,aAAa;;;;yDAIF,aAAa;;;;;;;;;;;;;;;;;;;;0BAoB5C,YAAY;;;;uBAIf,YAAY;;;;;;;;;;;wBAWX,aAAa;;;;iBAIpB,qBAAqB;;;;;uBAKf,YAAY;;;;;;;;iBAQlB,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;;;;CAWpC,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,SAAS,EAC5B,GAAG,CAAA;;uCAE4B,WAAW;;;;;qCAKb,qBAAqB;;SAEjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;uCAIvB,WAAW;;;;;yCAKT,qBAAqB;;SAErD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../utilities/style/display';\nimport {\n    applicationBackgroundColor,\n    bodyFont,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    borderHoverColor,\n    borderWidth,\n    controlHeight,\n    iconSize,\n    menuMinWidth,\n    popupBorderColor,\n    smallDelay,\n    smallPadding,\n    borderRgbPartialColor,\n    mediumPadding,\n    failColor,\n    elevation2BoxShadow\n} from '../../theme-provider/design-tokens';\nimport { Theme } from '../../theme-provider/types';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { hexToRgbaCssColor } from '../../utilities/style/colors';\nimport { focusVisible } from '../../utilities/style/focus';\nimport { themeBehavior } from '../../utilities/style/theme';\nimport { DropdownAppearance } from './types';\nimport { userSelectNone } from '../../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        color: ${bodyFontColor};\n        font: ${bodyFont};\n        height: ${controlHeight};\n        position: relative;\n        justify-content: center;\n        ${userSelectNone}\n        min-width: ${menuMinWidth};\n        outline: none;\n        vertical-align: top;\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n        --ni-private-focus-indicator-width: 1px;\n        --ni-private-indicator-lines-gap: 1px;\n    }\n\n    :host::before {\n        content: '';\n        position: absolute;\n        bottom: calc(${borderWidth} + var(--ni-private-indicator-lines-gap));\n        width: 0px;\n        height: 0px;\n        justify-self: center;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-focus-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::before {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(${focusVisible})::before {\n        width: calc(100% - 8px);\n    }\n\n    :host([error-visible]):before {\n        border-bottom-color: ${failColor};\n    }\n\n    :host::after {\n        content: '';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        justify-self: center;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(:hover)::after,\n    :host(${focusVisible})::after {\n        width: 100%;\n    }\n\n    :host([error-visible]):after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([disabled]:hover)::after {\n        width: 0px;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .control {\n        align-items: center;\n        cursor: pointer;\n        display: flex;\n        min-height: 100%;\n        width: 100%;\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        background-color: transparent;\n        padding: ${borderWidth};\n    }\n\n    :host([open]:not(:hover)) .control {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([disabled]) .control {\n        cursor: default;\n        color: ${bodyDisabledFontColor};\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .control,\n    :host([error-visible][open]) .control,\n    :host([error-visible][disabled]) .control {\n        border-bottom-color: ${failColor};\n    }\n\n    .listbox {\n        display: inline-flex;\n        flex-direction: column;\n        overflow-y: auto;\n        width: 100%;\n        --ni-private-listbox-padding: ${smallPadding};\n        --ni-private-listbox-filter-height: 0px;\n        --ni-private-listbox-loading-indicator-height: 0px;\n        max-height: min(\n            calc(\n                ${smallPadding} + 2 * ${borderWidth} + ${controlHeight} * 10.5 +\n                    var(--ni-private-listbox-filter-height) +\n                    var(--ni-private-listbox-loading-indicator-height)\n            ),\n            calc(\n                var(--ni-private-listbox-available-viewport-height) -\n                    ${smallPadding}\n            )\n        );\n        box-shadow: ${elevation2BoxShadow};\n        border: ${borderWidth} solid ${popupBorderColor};\n        background-color: ${applicationBackgroundColor};\n    }\n\n    .listbox:has(.filter-field) {\n        --ni-private-listbox-filter-height: ${controlHeight};\n    }\n\n    .listbox:has(.loading-container) {\n        --ni-private-listbox-loading-indicator-height: ${controlHeight};\n    }\n\n    .listbox slot {\n        display: block;\n        background: transparent;\n        padding: var(--ni-private-listbox-padding);\n    }\n\n    :host([open][position='above']) .listbox {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n\n    :host([open][position='below']) .listbox {\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n    }\n\n    :host([open][position='above']) .anchored-region {\n        padding-bottom: ${smallPadding};\n    }\n\n    :host([open][position='below']) .anchored-region {\n        padding-top: ${smallPadding};\n    }\n\n    .selected-value {\n        flex: auto;\n        font-family: inherit;\n        text-align: start;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        padding: 0px;\n        padding-left: ${mediumPadding};\n    }\n\n    .selected-value[disabled]::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .indicator {\n        flex: none;\n        margin-left: ${smallPadding};\n        padding-right: 8px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n\n    .indicator slot[name='indicator'] svg {\n        width: ${iconSize};\n        height: ${iconSize};\n        fill: ${bodyFontColor};\n    }\n\n    :host([disabled]) .indicator slot[name='indicator'] svg {\n        fill: ${bodyDisabledFontColor};\n    }\n\n    [part='end'] {\n        margin-inline-start: auto;\n    }\n\n    ::slotted([role='option']),\n    ::slotted(option) {\n        flex: none;\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        DropdownAppearance.underline,\n        css`\n            .control {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .control {\n                border-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.outline,\n        css`\n            .control {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.block,\n        css`\n            .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .control:focus-within {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            .listbox slot {\n                background: ${hexToRgbaCssColor(White, 0.15)};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,mBAAmB,EACtB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEnE,kBAAkB;AAClB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;iBAGX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;UAGrB,cAAc;qBACH,YAAY;;;mDAGkB,WAAW;;;;;;;;uBAQvC,WAAW;;;;yBAIT,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;+BAKO,SAAS;;;;;;4BAMZ,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;;;;;;;YAU1B,YAAY;;;;;+BAKO,SAAS;;;;;;;;;;;;;;;;;iCAiBP,qBAAqB;;mBAEnC,WAAW;;;;+BAIC,gBAAgB;;;;;iBAK9B,qBAAqB;6BACT,qBAAqB;;;;;;+BAMnB,SAAS;;;;;;;;;mDASW,YAAY;wCACvB,YAAY;;;;;;sBAM9B,WAAW;;kBAEf,aAAa;;;;;;;;;sBAST,mBAAmB;kBACvB,WAAW,UAAU,gBAAgB;4BAC3B,0BAA0B;;;;8CAIR,aAAa;;;;yDAIF,aAAa;;;;;;;;;;;;;;;;;;;;0BAoB5C,YAAY;;;;uBAIf,YAAY;;;;;;;;;;;wBAWX,aAAa;;;;iBAIpB,qBAAqB;;;;;uBAKf,YAAY;;;;;;;;iBAQlB,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;;;;CAWpC,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,SAAS,EAC5B,GAAG,CAAA;;uCAE4B,WAAW;;;;;qCAKb,qBAAqB;;SAEjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;uCAIvB,WAAW;;;;;yCAKT,qBAAqB;;SAErD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../utilities/style/display';\nimport {\n    applicationBackgroundColor,\n    bodyFont,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    borderHoverColor,\n    borderWidth,\n    controlHeight,\n    iconSize,\n    menuMinWidth,\n    popupBorderColor,\n    smallDelay,\n    smallPadding,\n    borderRgbPartialColor,\n    mediumPadding,\n    failColor,\n    elevation2BoxShadow\n} from '../../theme-provider/design-tokens';\nimport { Theme } from '../../theme-provider/types';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { hexToRgbaCssColor } from '../../utilities/style/colors';\nimport { focusVisible } from '../../utilities/style/focus';\nimport { themeBehavior } from '../../utilities/style/theme';\nimport { DropdownAppearance } from './types';\nimport { userSelectNone } from '../../utilities/style/user-select';\n\n// prettier-ignore\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        color: ${bodyFontColor};\n        font: ${bodyFont};\n        height: ${controlHeight};\n        position: relative;\n        justify-content: center;\n        ${userSelectNone}\n        min-width: ${menuMinWidth};\n        outline: none;\n        vertical-align: top;\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n        --ni-private-focus-indicator-width: 1px;\n        --ni-private-indicator-lines-gap: 1px;\n    }\n\n    :host::before {\n        content: '';\n        position: absolute;\n        bottom: calc(${borderWidth} + var(--ni-private-indicator-lines-gap));\n        width: 0px;\n        height: 0px;\n        justify-self: center;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-focus-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::before {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(${focusVisible})::before {\n        width: calc(100% - 8px);\n    }\n\n    :host([error-visible]):before {\n        border-bottom-color: ${failColor};\n    }\n\n    :host::after {\n        content: '';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        justify-self: center;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(:hover)::after,\n    :host(${focusVisible})::after {\n        width: 100%;\n    }\n\n    :host([error-visible]):after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([disabled]:hover)::after {\n        width: 0px;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .control {\n        align-items: center;\n        cursor: pointer;\n        display: flex;\n        min-height: 100%;\n        width: 100%;\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        background-color: transparent;\n        padding: ${borderWidth};\n    }\n\n    :host([open]:not(:hover)) .control {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([disabled]) .control {\n        cursor: default;\n        color: ${bodyDisabledFontColor};\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .control,\n    :host([error-visible][open]) .control,\n    :host([error-visible][disabled]) .control {\n        border-bottom-color: ${failColor};\n    }\n\n    .listbox {\n        display: inline-flex;\n        flex-direction: column;\n        overflow-y: auto;\n        width: 100%;\n        --ni-private-listbox-visible-option-count: 10.5;\n        --ni-private-listbox-anchor-element-gap: ${smallPadding};\n        --ni-private-listbox-padding: ${smallPadding};\n        --ni-private-listbox-filter-height: 0px;\n        --ni-private-listbox-loading-indicator-height: 0px;\n        max-height: min(\n            calc(\n                var(--ni-private-listbox-anchor-element-gap) + \n                2 * ${borderWidth} + \n                var(--ni-private-listbox-padding) +\n                ${controlHeight} * var(--ni-private-listbox-visible-option-count) +\n                var(--ni-private-listbox-filter-height) +\n                var(--ni-private-listbox-loading-indicator-height)\n            ),\n            calc(\n                var(--ni-private-listbox-available-viewport-height) - \n                var(--ni-private-listbox-anchor-element-gap)\n            )\n        );\n        box-shadow: ${elevation2BoxShadow};\n        border: ${borderWidth} solid ${popupBorderColor};\n        background-color: ${applicationBackgroundColor};\n    }\n\n    .listbox:has(.filter-field) {\n        --ni-private-listbox-filter-height: ${controlHeight};\n    }\n\n    .listbox:has(.loading-container) {\n        --ni-private-listbox-loading-indicator-height: ${controlHeight};\n    }\n\n    .listbox slot {\n        display: block;\n        background: transparent;\n        padding: var(--ni-private-listbox-padding);\n    }\n\n    :host([open][position='above']) .listbox {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n\n    :host([open][position='below']) .listbox {\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n    }\n\n    :host([open][position='above']) .anchored-region {\n        padding-bottom: ${smallPadding};\n    }\n\n    :host([open][position='below']) .anchored-region {\n        padding-top: ${smallPadding};\n    }\n\n    .selected-value {\n        flex: auto;\n        font-family: inherit;\n        text-align: start;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        padding: 0px;\n        padding-left: ${mediumPadding};\n    }\n\n    .selected-value[disabled]::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .indicator {\n        flex: none;\n        margin-left: ${smallPadding};\n        padding-right: 8px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n\n    .indicator slot[name='indicator'] svg {\n        width: ${iconSize};\n        height: ${iconSize};\n        fill: ${bodyFontColor};\n    }\n\n    :host([disabled]) .indicator slot[name='indicator'] svg {\n        fill: ${bodyDisabledFontColor};\n    }\n\n    [part='end'] {\n        margin-inline-start: auto;\n    }\n\n    ::slotted([role='option']),\n    ::slotted(option) {\n        flex: none;\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        DropdownAppearance.underline,\n        css`\n            .control {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .control {\n                border-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.outline,\n        css`\n            .control {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.block,\n        css`\n            .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .control:focus-within {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            .listbox slot {\n                background: ${hexToRgbaCssColor(White, 0.15)};\n            }\n        `\n    )\n);\n"]}

package/dist/esm/rich-text/mention-listbox/index.d.ts

@@ -18,6 +18,12 @@ export declare class RichTextMentionListbox extends FoundationListbox {
      * @internal
      */
     region?: AnchoredRegion;
+    /**
+     * The space available in the viewport for the listbox when opened.
+     *
+     * @internal
+     */
+    availableViewportHeight: number;
     /**
      * @internal
      */
@@ -29,6 +35,12 @@ export declare class RichTextMentionListbox extends FoundationListbox {
      * @internal
      */
     filteredOptions: ListboxOption[];
+    /**
+     * Reference to the internal listbox element.
+     *
+     * @internal
+     */
+    listbox: HTMLDivElement;
     private anchorElement?;
     private regionNotifier?;
     private readonly anchorElementIntersectionObserver;
@@ -110,7 +122,6 @@ export declare class RichTextMentionListbox extends FoundationListbox {
      * Overrides: `Listbox.focusAndScrollOptionIntoView`
      */
     protected focusAndScrollOptionIntoView(): void;
-    private emitMentionSelected;
     private setOpen;
 }
 export declare const richTextMentionListboxTag = "nimble-rich-text-mention-listbox";

package/dist/esm/rich-text/mention-listbox/index.js

@@ -11,6 +11,12 @@ import { diacriticInsensitiveStringNormalizer } from '../../utilities/models/str
 export class RichTextMentionListbox extends FoundationListbox {
     constructor() {
         super(...arguments);
+        /**
+         * The space available in the viewport for the listbox when opened.
+         *
+         * @internal
+         */
+        this.availableViewportHeight = 0;
         /**
          * @internal
          */
@@ -55,6 +61,8 @@ export class RichTextMentionListbox extends FoundationListbox {
      * @public
      */
     show(options) {
+        const listboxTop = options.anchorNode.getBoundingClientRect().bottom;
+        this.availableViewportHeight = Math.trunc(window.innerHeight - listboxTop);
         this.filter = options.filter;
         this.anchorElement = options.anchorNode;
         this.setOpen(true);
@@ -80,7 +88,8 @@ export class RichTextMentionListbox extends FoundationListbox {
                     href: this.firstSelectedOption.value,
                     displayName: this.firstSelectedOption.text
                 };
-                this.emitMentionSelected(mentionDetail);
+                this.$emit('mention-selected', mentionDetail);
+                this.setOpen(false);
                 return true;
             }
             case keyEscape: {
@@ -147,7 +156,8 @@ export class RichTextMentionListbox extends FoundationListbox {
             href: capturedListOption.value,
             displayName: capturedListOption.text
         };
-        this.emitMentionSelected(mentionDetail);
+        this.$emit('mention-selected', mentionDetail);
+        this.setOpen(false);
         return true;
     }
     /**
@@ -205,10 +215,6 @@ export class RichTextMentionListbox extends FoundationListbox {
             });
         }
     }
-    emitMentionSelected(mentionDetail) {
-        this.$emit('mention-selected', mentionDetail);
-        this.setOpen(false);
-    }
     setOpen(value) {
         this.open = value;
     }
@@ -219,6 +225,9 @@ __decorate([
 __decorate([
     observable
 ], RichTextMentionListbox.prototype, "region", void 0);
+__decorate([
+    observable
+], RichTextMentionListbox.prototype, "availableViewportHeight", void 0);
 __decorate([
     observable
 ], RichTextMentionListbox.prototype, "anchorElement", void 0);

package/dist/esm/rich-text/mention-listbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/rich-text/mention-listbox/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { Notifier, Observable, observable } from '@microsoft/fast-element';\nimport {\n    DesignSystem,\n    ListboxElement as FoundationListbox,\n    ListboxOption\n} from '@microsoft/fast-foundation';\nimport { keyEnter, keyEscape, keyTab } from '@microsoft/fast-web-utilities';\nimport type { MentionDetail } from '../editor/types';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { AnchoredRegion } from '../../anchored-region';\nimport { diacriticInsensitiveStringNormalizer } from '../../utilities/models/string-normalizers';\nimport type { ListOption } from '../../list-option';\nimport type { MentionListboxShowOptions } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-rich-text-mention-listbox': RichTextMentionListbox;\n    }\n}\n\n/**\n * A rich text mention listbox which acts as a popup for \"@mention\" support in editor\n */\nexport class RichTextMentionListbox extends FoundationListbox {\n    /**\n     * @internal\n     */\n    @observable\n    public open?: boolean;\n\n    /**\n     * @internal\n     */\n    @observable\n    public region?: AnchoredRegion;\n\n    /**\n     * @internal\n     */\n    public filter = '';\n\n    /**\n     * The collection of currently filtered options.\n     * The approach is defined based on the `Combobox.filteredOptions` implementation.\n     *\n     * @internal\n     */\n    public filteredOptions: ListboxOption[] = [];\n\n    @observable\n    private anchorElement?: HTMLElement;\n\n    private regionNotifier?: Notifier;\n\n    private readonly anchorElementIntersectionObserver: IntersectionObserver = new IntersectionObserver(\n        entries => {\n            if (!entries[0]?.isIntersecting) {\n                this.setOpen(false);\n            }\n        },\n        { threshold: 1.0, root: document }\n    );\n\n    /**\n     * @public\n     */\n    public close(): void {\n        this.setOpen(false);\n    }\n\n    /**\n     * The list of options.\n     *\n     * @public\n     * @remarks\n     * Overrides `Listbox.options`.\n     */\n    public override get options(): ListboxOption[] {\n        Observable.track(this, 'options');\n        return this.filteredOptions?.length ? this.filteredOptions : [];\n    }\n\n    public override set options(value: ListboxOption[]) {\n        this._options = value;\n        Observable.notify(this, 'options');\n    }\n\n    /**\n     * Triggers when the mention plugin is activated upon pressing the `key`\n     *\n     * @public\n     */\n    public show(options: MentionListboxShowOptions): void {\n        this.filter = options.filter;\n        this.anchorElement = options.anchorNode;\n        this.setOpen(true);\n        this.filterOptions();\n    }\n\n    /**\n     * Handle keydown actions for listbox navigation and selection.\n     *\n     * @param e - the keyboard event\n     * @public\n     */\n    public override keydownHandler(event: KeyboardEvent): boolean {\n        if (!this.open) {\n            return false;\n        }\n        switch (event.key) {\n            case keyTab:\n            case keyEnter: {\n                if (!this.hasSelectableOptions) {\n                    return false;\n                }\n                const mentionDetail: MentionDetail = {\n                    href: this.firstSelectedOption.value,\n                    displayName: this.firstSelectedOption.text\n                };\n                this.emitMentionSelected(mentionDetail);\n                return true;\n            }\n            case keyEscape: {\n                this.setOpen(false);\n                return false;\n            }\n            default: {\n                super.keydownHandler(event);\n                return false;\n            }\n        }\n    }\n\n    /**\n     * Filter available options by filter value.\n     * The method is defined based on the `Combobox.filterOptions` and `Combobox.inputHandler` implementation.\n     *\n     * @internal\n     */\n    public filterOptions(): void {\n        if (!this.filter) {\n            this.filteredOptions = this._options;\n        } else {\n            const normalizedFilter = diacriticInsensitiveStringNormalizer(\n                this.filter\n            );\n            this.filteredOptions = this._options.filter(o => diacriticInsensitiveStringNormalizer(o.text).includes(\n                normalizedFilter\n            ));\n        }\n\n        this._options.forEach(o => {\n            o.hidden = !this.filteredOptions.includes(o);\n        });\n\n        if (this.filteredOptions.length) {\n            this.selectedOptions = [this.filteredOptions[0]!];\n            this.selectedIndex = this.options.indexOf(this.firstSelectedOption);\n        } else {\n            this.selectedOptions = [];\n            this.selectedIndex = -1;\n        }\n    }\n\n    /**\n     * Synchronize the form-associated proxy and update the value property of the element.\n     *\n     * @param prev - the previous collection of slotted option elements\n     * @param next - the next collection of slotted option elements\n     *\n     * @internal\n     */\n    public override slottedOptionsChanged(\n        prev: Element[] | undefined,\n        next: Element[]\n    ): void {\n        super.slottedOptionsChanged(prev, next);\n        this.filterOptions();\n    }\n\n    /**\n     * Triggers the `suggestionProps` command to notify the tiptap editor to select the option.\n     * The method is defined based on the `Listbox.clickHandler` implementation.\n     *\n     * @internal\n     */\n    public override clickHandler(e: MouseEvent): boolean {\n        const capturedElement = (e.target as HTMLElement).closest(\n            'option,[role=option]'\n        );\n\n        const capturedListOption = capturedElement as ListOption | null;\n\n        if (!capturedListOption || capturedListOption.disabled) {\n            return false;\n        }\n        const mentionDetail: MentionDetail = {\n            href: capturedListOption.value,\n            displayName: capturedListOption.text\n        };\n        this.emitMentionSelected(mentionDetail);\n        return true;\n    }\n\n    /**\n     * Observes the anchor element using intersection observer.\n     * Once the anchor element intersects, the anchor region will be closed.\n     *\n     * @internal\n     */\n    public anchorElementChanged(prev: HTMLElement, next: HTMLElement): void {\n        if (prev) {\n            this.anchorElementIntersectionObserver.unobserve(prev);\n        }\n        if (this.region && this.anchorElement) {\n            this.region.anchorElement = this.anchorElement;\n            this.region.update();\n            this.anchorElementIntersectionObserver.observe(next);\n        }\n    }\n\n    /**\n     * Observes the anchor region.\n     *\n     * @internal\n     */\n    public regionChanged(): void {\n        if (this.regionNotifier) {\n            this.regionNotifier.unsubscribe(this);\n        }\n        this.regionNotifier = Observable.getNotifier(this.region);\n        this.regionNotifier.subscribe(this);\n    }\n\n    /**\n     * Handles the events of the anchored region.\n     * Repositions the listbox scroll bar when the `initialLayoutComplete` event is triggered.\n     * Other events will be passed to the base class.\n     *\n     * @internal\n     */\n    public override handleChange(source: unknown, args: string): void {\n        super.handleChange(source, args);\n        if (args === 'initialLayoutComplete') {\n            this.focusAndScrollOptionIntoView();\n        }\n    }\n\n    /**\n     * Focus the control and scroll the first selected option into view.\n     *\n     * @internal\n     * @remarks\n     * Overrides: `Listbox.focusAndScrollOptionIntoView`\n     */\n    protected override focusAndScrollOptionIntoView(): void {\n        if (this.open && this.firstSelectedOption) {\n            requestAnimationFrame(() => {\n                this.firstSelectedOption?.scrollIntoView({ block: 'nearest' });\n            });\n        }\n    }\n\n    private emitMentionSelected(mentionDetail: MentionDetail): void {\n        this.$emit('mention-selected', mentionDetail);\n        this.setOpen(false);\n    }\n\n    private setOpen(value: boolean): void {\n        this.open = value;\n    }\n}\n\nconst nimbleRichTextMentionListbox = RichTextMentionListbox.compose({\n    baseName: 'rich-text-mention-listbox',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleRichTextMentionListbox());\nexport const richTextMentionListboxTag = 'nimble-rich-text-mention-listbox';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/rich-text/mention-listbox/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { Notifier, Observable, observable } from '@microsoft/fast-element';\nimport {\n    DesignSystem,\n    ListboxElement as FoundationListbox,\n    ListboxOption\n} from '@microsoft/fast-foundation';\nimport { keyEnter, keyEscape, keyTab } from '@microsoft/fast-web-utilities';\nimport type { MentionDetail } from '../editor/types';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { AnchoredRegion } from '../../anchored-region';\nimport { diacriticInsensitiveStringNormalizer } from '../../utilities/models/string-normalizers';\nimport type { ListOption } from '../../list-option';\nimport type { MentionListboxShowOptions } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-rich-text-mention-listbox': RichTextMentionListbox;\n    }\n}\n\n/**\n * A rich text mention listbox which acts as a popup for \"@mention\" support in editor\n */\nexport class RichTextMentionListbox extends FoundationListbox {\n    /**\n     * @internal\n     */\n    @observable\n    public open?: boolean;\n\n    /**\n     * @internal\n     */\n    @observable\n    public region?: AnchoredRegion;\n\n    /**\n     * The space available in the viewport for the listbox when opened.\n     *\n     * @internal\n     */\n    @observable\n    public availableViewportHeight = 0;\n\n    /**\n     * @internal\n     */\n    public filter = '';\n\n    /**\n     * The collection of currently filtered options.\n     * The approach is defined based on the `Combobox.filteredOptions` implementation.\n     *\n     * @internal\n     */\n    public filteredOptions: ListboxOption[] = [];\n\n    /**\n     * Reference to the internal listbox element.\n     *\n     * @internal\n     */\n    public listbox!: HTMLDivElement;\n\n    @observable\n    private anchorElement?: HTMLElement;\n\n    private regionNotifier?: Notifier;\n\n    private readonly anchorElementIntersectionObserver: IntersectionObserver = new IntersectionObserver(\n        entries => {\n            if (!entries[0]?.isIntersecting) {\n                this.setOpen(false);\n            }\n        },\n        { threshold: 1.0, root: document }\n    );\n\n    /**\n     * @public\n     */\n    public close(): void {\n        this.setOpen(false);\n    }\n\n    /**\n     * The list of options.\n     *\n     * @public\n     * @remarks\n     * Overrides `Listbox.options`.\n     */\n    public override get options(): ListboxOption[] {\n        Observable.track(this, 'options');\n        return this.filteredOptions?.length ? this.filteredOptions : [];\n    }\n\n    public override set options(value: ListboxOption[]) {\n        this._options = value;\n        Observable.notify(this, 'options');\n    }\n\n    /**\n     * Triggers when the mention plugin is activated upon pressing the `key`\n     *\n     * @public\n     */\n    public show(options: MentionListboxShowOptions): void {\n        const listboxTop = options.anchorNode.getBoundingClientRect().bottom;\n        this.availableViewportHeight = Math.trunc(\n            window.innerHeight - listboxTop\n        );\n        this.filter = options.filter;\n        this.anchorElement = options.anchorNode;\n        this.setOpen(true);\n        this.filterOptions();\n    }\n\n    /**\n     * Handle keydown actions for listbox navigation and selection.\n     *\n     * @param e - the keyboard event\n     * @public\n     */\n    public override keydownHandler(event: KeyboardEvent): boolean {\n        if (!this.open) {\n            return false;\n        }\n        switch (event.key) {\n            case keyTab:\n            case keyEnter: {\n                if (!this.hasSelectableOptions) {\n                    return false;\n                }\n                const mentionDetail: MentionDetail = {\n                    href: this.firstSelectedOption.value,\n                    displayName: this.firstSelectedOption.text\n                };\n                this.$emit('mention-selected', mentionDetail);\n                this.setOpen(false);\n                return true;\n            }\n            case keyEscape: {\n                this.setOpen(false);\n                return false;\n            }\n            default: {\n                super.keydownHandler(event);\n                return false;\n            }\n        }\n    }\n\n    /**\n     * Filter available options by filter value.\n     * The method is defined based on the `Combobox.filterOptions` and `Combobox.inputHandler` implementation.\n     *\n     * @internal\n     */\n    public filterOptions(): void {\n        if (!this.filter) {\n            this.filteredOptions = this._options;\n        } else {\n            const normalizedFilter = diacriticInsensitiveStringNormalizer(\n                this.filter\n            );\n            this.filteredOptions = this._options.filter(o => diacriticInsensitiveStringNormalizer(o.text).includes(\n                normalizedFilter\n            ));\n        }\n\n        this._options.forEach(o => {\n            o.hidden = !this.filteredOptions.includes(o);\n        });\n\n        if (this.filteredOptions.length) {\n            this.selectedOptions = [this.filteredOptions[0]!];\n            this.selectedIndex = this.options.indexOf(this.firstSelectedOption);\n        } else {\n            this.selectedOptions = [];\n            this.selectedIndex = -1;\n        }\n    }\n\n    /**\n     * Synchronize the form-associated proxy and update the value property of the element.\n     *\n     * @param prev - the previous collection of slotted option elements\n     * @param next - the next collection of slotted option elements\n     *\n     * @internal\n     */\n    public override slottedOptionsChanged(\n        prev: Element[] | undefined,\n        next: Element[]\n    ): void {\n        super.slottedOptionsChanged(prev, next);\n        this.filterOptions();\n    }\n\n    /**\n     * Triggers the `suggestionProps` command to notify the tiptap editor to select the option.\n     * The method is defined based on the `Listbox.clickHandler` implementation.\n     *\n     * @internal\n     */\n    public override clickHandler(e: MouseEvent): boolean {\n        const capturedElement = (e.target as HTMLElement).closest(\n            'option,[role=option]'\n        );\n\n        const capturedListOption = capturedElement as ListOption | null;\n\n        if (!capturedListOption || capturedListOption.disabled) {\n            return false;\n        }\n        const mentionDetail: MentionDetail = {\n            href: capturedListOption.value,\n            displayName: capturedListOption.text\n        };\n        this.$emit('mention-selected', mentionDetail);\n        this.setOpen(false);\n        return true;\n    }\n\n    /**\n     * Observes the anchor element using intersection observer.\n     * Once the anchor element intersects, the anchor region will be closed.\n     *\n     * @internal\n     */\n    public anchorElementChanged(prev: HTMLElement, next: HTMLElement): void {\n        if (prev) {\n            this.anchorElementIntersectionObserver.unobserve(prev);\n        }\n        if (this.region && this.anchorElement) {\n            this.region.anchorElement = this.anchorElement;\n            this.region.update();\n            this.anchorElementIntersectionObserver.observe(next);\n        }\n    }\n\n    /**\n     * Observes the anchor region.\n     *\n     * @internal\n     */\n    public regionChanged(): void {\n        if (this.regionNotifier) {\n            this.regionNotifier.unsubscribe(this);\n        }\n        this.regionNotifier = Observable.getNotifier(this.region);\n        this.regionNotifier.subscribe(this);\n    }\n\n    /**\n     * Handles the events of the anchored region.\n     * Repositions the listbox scroll bar when the `initialLayoutComplete` event is triggered.\n     * Other events will be passed to the base class.\n     *\n     * @internal\n     */\n    public override handleChange(source: unknown, args: string): void {\n        super.handleChange(source, args);\n        if (args === 'initialLayoutComplete') {\n            this.focusAndScrollOptionIntoView();\n        }\n    }\n\n    /**\n     * Focus the control and scroll the first selected option into view.\n     *\n     * @internal\n     * @remarks\n     * Overrides: `Listbox.focusAndScrollOptionIntoView`\n     */\n    protected override focusAndScrollOptionIntoView(): void {\n        if (this.open && this.firstSelectedOption) {\n            requestAnimationFrame(() => {\n                this.firstSelectedOption?.scrollIntoView({ block: 'nearest' });\n            });\n        }\n    }\n\n    private setOpen(value: boolean): void {\n        this.open = value;\n    }\n}\n\nconst nimbleRichTextMentionListbox = RichTextMentionListbox.compose({\n    baseName: 'rich-text-mention-listbox',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleRichTextMentionListbox());\nexport const richTextMentionListboxTag = 'nimble-rich-text-mention-listbox';\n"]}

package/dist/esm/rich-text/mention-listbox/styles.js

@@ -1,7 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { styles as dropdownStyles } from '../../patterns/dropdown/styles';
 import { focusVisible } from '../../utilities/style/focus';
-import { controlHeight, menuMinWidth } from '../../theme-provider/design-tokens';
+import { menuMinWidth } from '../../theme-provider/design-tokens';
 export const styles = css `
     ${dropdownStyles}
 
@@ -15,8 +15,9 @@ export const styles = css `
     }
 
     .listbox {
+        --ni-private-listbox-visible-option-count: 5.5;
+        --ni-private-listbox-anchor-element-gap: 0px;
         min-width: ${menuMinWidth};
-        max-height: calc(5.5 * ${controlHeight});
     }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/esm/rich-text/mention-listbox/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/rich-text/mention-listbox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EACH,aAAa,EACb,YAAY,EACf,MAAM,oCAAoC,CAAC;AAE5C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;;;;;;;YAOR,YAAY;;;;;qBAKH,YAAY;iCACA,aAAa;;CAE7C,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { styles as dropdownStyles } from '../../patterns/dropdown/styles';\nimport { focusVisible } from '../../utilities/style/focus';\nimport {\n    controlHeight,\n    menuMinWidth\n} from '../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${dropdownStyles}\n\n    :host {\n        height: auto;\n    }\n\n    :host(:hover)::after,\n    :host(${focusVisible})::after {\n        width: auto;\n    }\n\n    .listbox {\n        min-width: ${menuMinWidth};\n        max-height: calc(5.5 * ${controlHeight});\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/rich-text/mention-listbox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAElE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;;;;;;;YAOR,YAAY;;;;;;;qBAOH,YAAY;;CAEhC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { styles as dropdownStyles } from '../../patterns/dropdown/styles';\nimport { focusVisible } from '../../utilities/style/focus';\nimport { menuMinWidth } from '../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${dropdownStyles}\n\n    :host {\n        height: auto;\n    }\n\n    :host(:hover)::after,\n    :host(${focusVisible})::after {\n        width: auto;\n    }\n\n    .listbox {\n        --ni-private-listbox-visible-option-count: 5.5;\n        --ni-private-listbox-anchor-element-gap: 0px;\n        min-width: ${menuMinWidth};\n    }\n`;\n"]}

package/dist/esm/rich-text/mention-listbox/template.js

@@ -21,6 +21,8 @@ export const template = html `
                 role="listbox"
                 @click="${(x, c) => x.clickHandler(c.event)}"
                 ?disabled="${x => x.disabled}"
+                style="--ni-private-listbox-available-viewport-height: ${x => x.availableViewportHeight}px;"
+                ${ref('listbox')}
             >
                 <slot name="option"
                     ${slotted({ filter: (n) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n), flatten: true, property: 'slottedOptions' })}

package/dist/esm/rich-text/mention-listbox/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/rich-text/mention-listbox/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAwB;;WAEzC,iBAAiB;cACd,GAAG,CAAC,QAAQ,CAAC;;;;;;;;;uBASJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI;;;;;0BAKT,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;6BAC5C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;;sBAGtB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC,CAAO,EAAE,EAAE,CAAC,CAAC,YAAY,WAAW,IAAI,OAAO,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC;;;;YAIjJ,iBAAiB;;CAE5B,CAAC","sourcesContent":["import { html, ref, slotted } from '@microsoft/fast-element';\nimport { Listbox } from '@microsoft/fast-foundation';\nimport type { RichTextMentionListbox } from '.';\nimport { anchoredRegionTag } from '../../anchored-region';\n\n// prettier-ignore\nexport const template = html<RichTextMentionListbox>`\n    <template>\n        <${anchoredRegionTag}\n            ${ref('region')}\n            class=\"anchored-region\"\n            fixed-placement\n            auto-update-mode=\"auto\"\n            vertical-default-position=\"bottom\"\n            vertical-positioning-mode=\"locktodefault\"\n            horizontal-default-position=\"center\"\n            horizontal-positioning-mode=\"locktodefault\"\n            horizontal-scaling=\"anchor\"\n            ?hidden=\"${x => !x.open}\">\n            <div\n                class=\"listbox\"\n                part=\"listbox\"\n                role=\"listbox\"\n                @click=\"${(x, c) => x.clickHandler(c.event as MouseEvent)}\"\n                ?disabled=\"${x => x.disabled}\"\n            >\n                <slot name=\"option\"\n                    ${slotted({ filter: (n: Node) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n), flatten: true, property: 'slottedOptions' })}\n                >\n                </slot>\n            </div>\n        </${anchoredRegionTag}>\n    </template>\n`;\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/rich-text/mention-listbox/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAwB;;WAEzC,iBAAiB;cACd,GAAG,CAAC,QAAQ,CAAC;;;;;;;;;uBASJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI;;;;;0BAKT,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;6BAC5C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yEAC6B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,uBAAuB;kBACrF,GAAG,CAAC,SAAS,CAAC;;;sBAGV,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC,CAAO,EAAE,EAAE,CAAC,CAAC,YAAY,WAAW,IAAI,OAAO,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC;;;;YAIjJ,iBAAiB;;CAE5B,CAAC","sourcesContent":["import { html, ref, slotted } from '@microsoft/fast-element';\nimport { Listbox } from '@microsoft/fast-foundation';\nimport type { RichTextMentionListbox } from '.';\nimport { anchoredRegionTag } from '../../anchored-region';\n\n// prettier-ignore\nexport const template = html<RichTextMentionListbox>`\n    <template>\n        <${anchoredRegionTag}\n            ${ref('region')}\n            class=\"anchored-region\"\n            fixed-placement\n            auto-update-mode=\"auto\"\n            vertical-default-position=\"bottom\"\n            vertical-positioning-mode=\"locktodefault\"\n            horizontal-default-position=\"center\"\n            horizontal-positioning-mode=\"locktodefault\"\n            horizontal-scaling=\"anchor\"\n            ?hidden=\"${x => !x.open}\">\n            <div\n                class=\"listbox\"\n                part=\"listbox\"\n                role=\"listbox\"\n                @click=\"${(x, c) => x.clickHandler(c.event as MouseEvent)}\"\n                ?disabled=\"${x => x.disabled}\"\n                style=\"--ni-private-listbox-available-viewport-height: ${x => x.availableViewportHeight}px;\"\n                ${ref('listbox')}\n            >\n                <slot name=\"option\"\n                    ${slotted({ filter: (n: Node) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n), flatten: true, property: 'slottedOptions' })}\n                >\n                </slot>\n            </div>\n        </${anchoredRegionTag}>\n    </template>\n`;\n"]}

package/dist/esm/select/index.js

@@ -101,7 +101,7 @@ export class Select extends FormAssociatedSelect {
             }
             newValue = this.firstSelectedOption?.value ?? newValue;
         }
-        if (prev !== newValue && !(this.open && this.selectedIndex < 0)) {
+        if (prev !== newValue) {
             this._value = newValue;
             super.valueChanged(prev, newValue);
             Observable.notify(this, 'value');
@@ -190,12 +190,12 @@ export class Select extends FormAssociatedSelect {
         }
         const previousSelectedIndex = this.selectedIndex;
         super.clickHandler(e);
-        this.open = this.collapsible && !this.open;
-        if (!this.open
+        if (this.open
             && this.selectedIndex !== previousSelectedIndex
             && optionClicked) {
             this.updateValue(true);
         }
+        this.open = this.collapsible && !this.open;
     }
     /**
      * Updates the value when an option's value changes.
@@ -378,6 +378,7 @@ export class Select extends FormAssociatedSelect {
             return true;
         }
         let currentActiveIndex = this.openActiveIndex ?? this.selectedIndex;
+        let commitValueThenClose = false;
         switch (key) {
             case keySpace: {
                 // when dropdown is open allow user to enter a space for filter text
@@ -404,8 +405,13 @@ export class Select extends FormAssociatedSelect {
                     || this.filteredOptions.every(o => o.disabled)) {
                     return false;
                 }
-                this.open = !this.open;
-                if (!this.open) {
+                if (this.open) {
+                    commitValueThenClose = true;
+                }
+                else {
+                    this.open = true;
+                }
+                if (commitValueThenClose) {
                     this.focus();
                 }
                 break;
@@ -431,11 +437,16 @@ export class Select extends FormAssociatedSelect {
                 break;
             }
         }
-        if (!this.open && this.selectedIndex !== currentActiveIndex) {
-            this.selectedIndex = currentActiveIndex;
+        if (!this.open || commitValueThenClose) {
+            if (this.selectedIndex !== currentActiveIndex) {
+                this.selectedIndex = currentActiveIndex;
+            }
+            if (initialSelectedIndex !== this.selectedIndex) {
+                this.updateValue(true);
+            }
         }
-        if (!this.open && initialSelectedIndex !== this.selectedIndex) {
-            this.updateValue(true);
+        if (commitValueThenClose) {
+            this.open = false;
         }
         return !(key === keyArrowDown || key === keyArrowUp);
     }