npm - @pega/cosmos-react-core - Versions diffs - 10.0.0-build.4.2 → 10.0.0-build.4.21 - Mend

@pega/cosmos-react-core 10.0.0-build.4.2 → 10.0.0-build.4.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (253) hide show

package/lib/components/ComboBox/ComboBox.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB;;2JA+B/B,CAAC;AAIH,eAAO,MAAM,iBAAiB,~~6NAoD5B~~,CAAC;AAIH,eAAO,MAAM,cAAc;;;;mBAkBzB,CAAC"}
1	+ {"version":3,"file":"ComboBox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB;;2JA+B/B,CAAC;AAIH,eAAO,MAAM,iBAAiB,6NA4D5B,CAAC;AAIH,eAAO,MAAM,cAAc;;;;mBAkBzB,CAAC"}

package/lib/components/ComboBox/ComboBox.styles.js CHANGED Viewed

@@ -40,8 +40,16 @@ export const StyledDropdownButton = styled(Button)(({ theme }) => {
 StyledDropdownButton.defaultProps = defaultThemeProp;
 export const StyledSelectInput = styled.div(({ theme: { base, components } }) => {
     return css `
+    height: ${components.input.height};
+    max-height: ${components.input.height};
+    /* Clip overflowing content, but leave room for a focus ring. */
+    overflow: clip;
+    overflow-clip-margin: 0.3rem;
     @media (pointer: coarse) {
-      min-height: ${base['hit-area']['finger-min']};
+      height: ${base['hit-area']['finger-min']};
+      max-height: ${base['hit-area']['finger-min']};
     }
     /*

package/lib/components/ComboBox/ComboBox.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.styles.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/D,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACrD,MAAM,uBAAuB,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC,CAAC;IAElF,OAAO,GAAG,CAAA;;;;;;oCAMwB,gBAAgB,MAAM,uBAAuB;;kCAE/C,gBAAgB,MAAM,uBAAuB;;;;;;;iCAO9C,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;eAElE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;0BACrC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;8BAE5C,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;;;;GAMzF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE;IAC9E,OAAO,GAAG,CAAA~~;;oBAEQ~~,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;;;;;cAQpC,cAAc,KAAK,cAAc;;UAErC,UAAU,CAAC,KAAK,CAAC,MAAM,UAAU,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;;;MAI/E,kBAAkB;oBACJ,UAAU,CAAC,KAAK,CAAC,MAAM;qBACtB,UAAU,CAAC,KAAK,CAAC,MAAM;;;;sBAItB,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;oBACtD,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;;;;;;qBAUjD,UAAU,CAAC,KAAK,CAAC,MAAM,UAAU,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;eACjF,UAAU,CAAC,cAAc,CAAC,CAAC,kBAAkB,CAAC;;wBAErC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;GAcjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,GAAG,EAAE;IAC3D,OAAO,GAAG,CAAA;;;;;;;MAON,aAAa;;;;QAIX,UAAU;QACV,qBAAqB;;;;GAI1B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Button from '../Button';\nimport { StyledFormControl } from '../FormControl';\nimport { StyledPopover } from '../Popover';\nimport { StyledMenu, StyledMenuListWrapper } from '../Menu/Menu.styles';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledProgressRing } from '../Progress';\n\nexport const StyledDropdownButton = styled(Button)(({ theme }) => {\n const baseBorderRadius = theme.base['border-radius'];\n const formControlBorderRadius = theme.components['form-control']['border-radius'];\n\n return css`\n align-self: stretch;\n height: auto;\n margin-block: -0.0625rem;\n margin-inline-end: -0.0625rem;\n border-start-start-radius: 0;\n border-start-end-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});\n border-end-start-radius: 0;\n border-end-end-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});\n\n &::after {\n content: '';\n pointer-events: none;\n position: absolute;\n z-index: 1;\n inset-inline-start: calc(${theme.components['form-control']['border-width']} * -1);\n inset-block: 0;\n width: ${theme.components['form-control']['border-width']};\n background-color: ${theme.components['form-control']['border-color']};\n transform: scaleY(0.5);\n transition: transform ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n }\n\n &:hover::after {\n transform: scaleY(1);\n }\n `;\n});\n\nStyledDropdownButton.defaultProps = defaultThemeProp;\n\nexport const StyledSelectInput = styled.div(({ theme: { base, components } }) => {\n return css`\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n\n /\n FIXME\n :not selectors needed to prevent greedy div selector affecting Progress styles.\n Best if div could be more targeted to specific classes.\n /\n div:not(${StyledBackdrop}, ${StyledBackdrop} div) {\n min-height: calc(\n ${components.input.height} - 2 * ${components['form-control']['border-width']}\n );\n }\n\n ${StyledProgressRing} svg {\n width: calc(${components.input.height} - 0.5rem);\n height: calc(${components.input.height} - 0.5rem);\n }\n\n &:focus-within {\n border-color: ${components['form-control'][':focus']['border-color']};\n box-shadow: ${components['form-control'][':focus']['box-shadow']};\n }\n\n &:hover:not([readonly]):not([disabled]):focus-within {\n border-color: transparent;\n }\n\n input {\n min-width: 0;\n width: 100%;\n height: calc(${components.input.height} - 2 * ${components['form-control']['border-width']});\n color: ${components['form-control']['foreground-color']};\n text-overflow: ellipsis;\n padding-inline: ${base.spacing};\n }\n\n input,\n input:focus {\n border: none;\n outline: none;\n flex-grow: 1;\n background-color: transparent;\n\n &:read-only {\n cursor: default;\n }\n }\n `;\n});\n\nStyledSelectInput.defaultProps = defaultThemeProp;\n\nexport const StyledComboBox = styled(StyledFormControl)(() => {\n return css`\n border: 0;\n\n &:focus {\n z-index: 1;\n }\n\n ${StyledPopover} {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n\n ${StyledMenu},\n ${StyledMenuListWrapper} {\n max-height: inherit;\n }\n }\n `;\n});\n\nStyledComboBox.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"ComboBox.styles.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/D,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACrD,MAAM,uBAAuB,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC,CAAC;IAElF,OAAO,GAAG,CAAA;;;;;;oCAMwB,gBAAgB,MAAM,uBAAuB;;kCAE/C,gBAAgB,MAAM,uBAAuB;;;;;;;iCAO9C,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;eAElE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;0BACrC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;8BAE5C,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;;;;GAMzF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE;IAC9E,OAAO,GAAG,CAAA;cACE,UAAU,CAAC,KAAK,CAAC,MAAM;kBACnB,UAAU,CAAC,KAAK,CAAC,MAAM;;;;;;;gBAOzB,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;oBAC1B,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;;;;;cAQpC,cAAc,KAAK,cAAc;;UAErC,UAAU,CAAC,KAAK,CAAC,MAAM,UAAU,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;;;MAI/E,kBAAkB;oBACJ,UAAU,CAAC,KAAK,CAAC,MAAM;qBACtB,UAAU,CAAC,KAAK,CAAC,MAAM;;;;sBAItB,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;oBACtD,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;;;;;;qBAUjD,UAAU,CAAC,KAAK,CAAC,MAAM,UAAU,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;eACjF,UAAU,CAAC,cAAc,CAAC,CAAC,kBAAkB,CAAC;;wBAErC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;GAcjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,GAAG,EAAE;IAC3D,OAAO,GAAG,CAAA;;;;;;;MAON,aAAa;;;;QAIX,UAAU;QACV,qBAAqB;;;;GAI1B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Button from '../Button';\nimport { StyledFormControl } from '../FormControl';\nimport { StyledPopover } from '../Popover';\nimport { StyledMenu, StyledMenuListWrapper } from '../Menu/Menu.styles';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledProgressRing } from '../Progress';\n\nexport const StyledDropdownButton = styled(Button)(({ theme }) => {\n const baseBorderRadius = theme.base['border-radius'];\n const formControlBorderRadius = theme.components['form-control']['border-radius'];\n\n return css`\n align-self: stretch;\n height: auto;\n margin-block: -0.0625rem;\n margin-inline-end: -0.0625rem;\n border-start-start-radius: 0;\n border-start-end-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});\n border-end-start-radius: 0;\n border-end-end-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});\n\n &::after {\n content: '';\n pointer-events: none;\n position: absolute;\n z-index: 1;\n inset-inline-start: calc(${theme.components['form-control']['border-width']} * -1);\n inset-block: 0;\n width: ${theme.components['form-control']['border-width']};\n background-color: ${theme.components['form-control']['border-color']};\n transform: scaleY(0.5);\n transition: transform ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n }\n\n &:hover::after {\n transform: scaleY(1);\n }\n `;\n});\n\nStyledDropdownButton.defaultProps = defaultThemeProp;\n\nexport const StyledSelectInput = styled.div(({ theme: { base, components } }) => {\n return css`\n height: ${components.input.height};\n max-height: ${components.input.height};\n\n /* Clip overflowing content, but leave room for a focus ring. /\n overflow: clip;\n overflow-clip-margin: 0.3rem;\n\n @media (pointer: coarse) {\n height: ${base['hit-area']['finger-min']};\n max-height: ${base['hit-area']['finger-min']};\n }\n\n /\n FIXME\n :not selectors needed to prevent greedy div selector affecting Progress styles.\n Best if div could be more targeted to specific classes.\n /\n div:not(${StyledBackdrop}, ${StyledBackdrop} div) {\n min-height: calc(\n ${components.input.height} - 2 ${components['form-control']['border-width']}\n );\n }\n\n ${StyledProgressRing} svg {\n width: calc(${components.input.height} - 0.5rem);\n height: calc(${components.input.height} - 0.5rem);\n }\n\n &:focus-within {\n border-color: ${components['form-control'][':focus']['border-color']};\n box-shadow: ${components['form-control'][':focus']['box-shadow']};\n }\n\n &:hover:not([readonly]):not([disabled]):focus-within {\n border-color: transparent;\n }\n\n input {\n min-width: 0;\n width: 100%;\n height: calc(${components.input.height} - 2 * ${components['form-control']['border-width']});\n color: ${components['form-control']['foreground-color']};\n text-overflow: ellipsis;\n padding-inline: ${base.spacing};\n }\n\n input,\n input:focus {\n border: none;\n outline: none;\n flex-grow: 1;\n background-color: transparent;\n\n &:read-only {\n cursor: default;\n }\n }\n `;\n});\n\nStyledSelectInput.defaultProps = defaultThemeProp;\n\nexport const StyledComboBox = styled(StyledFormControl)(() => {\n return css`\n border: 0;\n\n &:focus {\n z-index: 1;\n }\n\n ${StyledPopover} {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n\n ${StyledMenu},\n ${StyledMenuListWrapper} {\n max-height: inherit;\n }\n }\n `;\n});\n\nStyledComboBox.defaultProps = defaultThemeProp;\n"]}

package/lib/components/ComboBox/ComboBoxInput.d.ts CHANGED Viewed

@@ -15,8 +15,6 @@ interface ComboBoxInputProps extends BaseProps {
     onSelectedFocus?: MultiSelectInputProps['onSelectedFocus'];
     /** Callback on selected item pseudo blur */
     onSelectedBlur?: MultiSelectInputProps['onSelectedBlur'];
-    /** Pause evaluation of selected item descendants */
-    pauseDescendantEvaluation?: MultiSelectInputProps['pauseDescendantEvaluation'];
 }
 declare const ComboBoxInput: FunctionComponent<ComboBoxInputProps & ForwardProps>;
 export default ComboBoxInput;

package/lib/components/ComboBox/ComboBoxInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBoxInput.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBoxInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIxD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AACvF,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,UAAU,kBAAmB,SAAQ,SAAS;IAC5C,IAAI,CAAC,EAAE,cAAc,GAAG,eAAe,CAAC;IACxC,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,6CAA6C;IAC7C,eAAe,CAAC,EAAE,qBAAqB,CAAC,iBAAiB,CAAC,CAAC;IAC3D,4CAA4C;IAC5C,cAAc,CAAC,EAAE,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;~~IACzD,oDAAoD~~;~~IACpD,yBAAyB,CAAC,EAAE,qBAAqB,CAAC,2BAA2B,CAAC,CAAC;CAChF;~~AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,~~CAmCvE~~,CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"ComboBoxInput.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBoxInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIxD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AACvF,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,UAAU,kBAAmB,SAAQ,SAAS;IAC5C,IAAI,CAAC,EAAE,cAAc,GAAG,eAAe,CAAC;IACxC,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,6CAA6C;IAC7C,eAAe,CAAC,EAAE,qBAAqB,CAAC,iBAAiB,CAAC,CAAC;IAC3D,4CAA4C;IAC5C,cAAc,CAAC,EAAE,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;CAC1D;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAiCvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/ComboBox/ComboBoxInput.js CHANGED Viewed

@@ -3,8 +3,8 @@ import { forwardRef } from 'react';
 import SingleSelectInput from './SingleSelectInput/SingleSelectInput';
 import MultiSelectInput from './MultiSelectInput/MultiSelectInput';
 const ComboBoxInput = forwardRef(function ComboBoxInput(props, ref) {
-    const { value, mode, selected, visual, onRemove, onSelectedFocus, onSelectedBlur, pauseDescendantEvaluation, ...restProps } = props;
-    return mode === 'multi-select' ? (_jsx(MultiSelectInput, { selected: selected, value: value, ref: ref, onRemove: onRemove, onSelectedBlur: onSelectedBlur, onSelectedFocus: onSelectedFocus, pauseDescendantEvaluation: pauseDescendantEvaluation, ...restProps })) : (_jsx(SingleSelectInput, { ref: ref, selected: selected, value: value, visual: visual, ...restProps }));
+    const { value, mode, selected, visual, onRemove, onSelectedFocus, onSelectedBlur, ...restProps } = props;
+    return mode === 'multi-select' ? (_jsx(MultiSelectInput, { selected: selected, value: value, ref: ref, onRemove: onRemove, onSelectedBlur: onSelectedBlur, onSelectedFocus: onSelectedFocus, ...restProps })) : (_jsx(SingleSelectInput, { ref: ref, selected: selected, value: value, visual: visual, ...restProps }));
 });
 export default ComboBoxInput;
 //# sourceMappingURL=ComboBoxInput.js.map

package/lib/components/ComboBox/ComboBoxInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBoxInput.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBoxInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnC,OAAO,iBAAiB,MAAM,uCAAuC,CAAC;AACtE,OAAO,gBAAgB,MAAM,qCAAqC,CAAC;~~AAoBnE~~,MAAM,aAAa,GAAyD,UAAU,CACpF,SAAS,aAAa,CAAC,KAA0C,EAAE,GAA0B;IAC3F,MAAM,EACJ,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,eAAe,EACf,cAAc,EACd,~~yBAAyB,EACzB,~~GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,OAAO,IAAI,KAAK,cAAc,CAAC,CAAC,CAAC,CAC/B,KAAC,gBAAgB,IACf,QAAQ,EAAE,QAAsB,EAChC,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,~~EAChC~~,~~yBAAyB,EAAE,yBAAyB,KAChD,~~SAAS,GACb,CACH,CAAC,CAAC,CAAC,CACF,KAAC,iBAAiB,IAChB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAoB,EAC9B,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,KACV,SAAS,GACb,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, Ref, PropsWithoutRef } from 'react';\n\nimport type { BaseProps, ForwardProps } from '../../types';\nimport type { MenuItemProps } from '../Menu/Menu.types';\n\nimport SingleSelectInput from './SingleSelectInput/SingleSelectInput';\nimport MultiSelectInput from './MultiSelectInput/MultiSelectInput';\nimport type { MultiSelectInputProps } from './MultiSelectInput/MultiSelectInput.types';\nimport type ComboBoxProps from './ComboBox.types';\nimport type { Selected } from './ComboBox.types';\n\ninterface ComboBoxInputProps extends BaseProps {\n mode?: 'multi-select' \| 'single-select';\n selected?: Selected \| Selected[];\n loading?: boolean;\n value?: ComboBoxProps['value'];\n visual?: ComboBoxProps['visual'];\n onRemove?: (id: MenuItemProps['id'], index: number) => void;\n /** Callback on selected item pseudo focus /\n onSelectedFocus?: MultiSelectInputProps['onSelectedFocus'];\n /* Callback on selected item pseudo blur /\n onSelectedBlur?: MultiSelectInputProps['onSelectedBlur'];\n ~~/* Pause evaluation of selected item descendants */\n pauseDescendantEvaluation?: MultiSelectInputProps['pauseDescendantEvaluation'];\n~~}\n\nconst ComboBoxInput: FunctionComponent<ComboBoxInputProps & ForwardProps> = forwardRef(\n function ComboBoxInput(props: PropsWithoutRef<ComboBoxInputProps>, ref: Ref<HTMLInputElement>) {\n const {\n value,\n mode,\n selected,\n visual,\n onRemove,\n onSelectedFocus,\n onSelectedBlur,\n ~~pauseDescendantEvaluation,\n~~ ...restProps\n } = props;\n\n return mode === 'multi-select' ? (\n <MultiSelectInput\n selected={selected as Selected[]}\n value={value}\n ref={ref}\n onRemove={onRemove}\n onSelectedBlur={onSelectedBlur}\n onSelectedFocus={onSelectedFocus}\n ~~pauseDescendantEvaluation=~~{~~pauseDescendantEvaluation}\n {~~...restProps}\n />\n ) : (\n <SingleSelectInput\n ref={ref}\n selected={selected as Selected}\n value={value}\n visual={visual}\n {...restProps}\n />\n );\n }\n);\n\nexport default ComboBoxInput;\n"]}
1	+ {"version":3,"file":"ComboBoxInput.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBoxInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnC,OAAO,iBAAiB,MAAM,uCAAuC,CAAC;AACtE,OAAO,gBAAgB,MAAM,qCAAqC,CAAC;AAkBnE,MAAM,aAAa,GAAyD,UAAU,CACpF,SAAS,aAAa,CAAC,KAA0C,EAAE,GAA0B;IAC3F,MAAM,EACJ,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,eAAe,EACf,cAAc,EACd,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,OAAO,IAAI,KAAK,cAAc,CAAC,CAAC,CAAC,CAC/B,KAAC,gBAAgB,IACf,QAAQ,EAAE,QAAsB,EAChC,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,KAC5B,SAAS,GACb,CACH,CAAC,CAAC,CAAC,CACF,KAAC,iBAAiB,IAChB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAoB,EAC9B,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,KACV,SAAS,GACb,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, Ref, PropsWithoutRef } from 'react';\n\nimport type { BaseProps, ForwardProps } from '../../types';\nimport type { MenuItemProps } from '../Menu/Menu.types';\n\nimport SingleSelectInput from './SingleSelectInput/SingleSelectInput';\nimport MultiSelectInput from './MultiSelectInput/MultiSelectInput';\nimport type { MultiSelectInputProps } from './MultiSelectInput/MultiSelectInput.types';\nimport type ComboBoxProps from './ComboBox.types';\nimport type { Selected } from './ComboBox.types';\n\ninterface ComboBoxInputProps extends BaseProps {\n mode?: 'multi-select' \| 'single-select';\n selected?: Selected \| Selected[];\n loading?: boolean;\n value?: ComboBoxProps['value'];\n visual?: ComboBoxProps['visual'];\n onRemove?: (id: MenuItemProps['id'], index: number) => void;\n /** Callback on selected item pseudo focus /\n onSelectedFocus?: MultiSelectInputProps['onSelectedFocus'];\n /* Callback on selected item pseudo blur */\n onSelectedBlur?: MultiSelectInputProps['onSelectedBlur'];\n}\n\nconst ComboBoxInput: FunctionComponent<ComboBoxInputProps & ForwardProps> = forwardRef(\n function ComboBoxInput(props: PropsWithoutRef<ComboBoxInputProps>, ref: Ref<HTMLInputElement>) {\n const {\n value,\n mode,\n selected,\n visual,\n onRemove,\n onSelectedFocus,\n onSelectedBlur,\n ...restProps\n } = props;\n\n return mode === 'multi-select' ? (\n <MultiSelectInput\n selected={selected as Selected[]}\n value={value}\n ref={ref}\n onRemove={onRemove}\n onSelectedBlur={onSelectedBlur}\n onSelectedFocus={onSelectedFocus}\n {...restProps}\n />\n ) : (\n <SingleSelectInput\n ref={ref}\n selected={selected as Selected}\n value={value}\n visual={visual}\n {...restProps}\n />\n );\n }\n);\n\nexport default ComboBoxInput;\n"]}

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts CHANGED Viewed

@@ -1,9 +1,7 @@
-import type { FunctionComponent } from 'react';
-import type { ForwardProps } from '../../../types';
+import type { WithAttributes } from '../../../types';
+import StyledMultiSelectInput from './MultiSelectInput.styles';
 import type { MultiSelectInputProps } from './MultiSelectInput.types';
-export declare const StyledMultiSelectInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
-declare const MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps>;
+export { StyledMultiSelectInput };
+declare const MultiSelectInput: import("react").ForwardRefExoticComponent<Omit<WithAttributes<"input", MultiSelectInputProps>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export default MultiSelectInput;
 //# sourceMappingURL=MultiSelectInput.d.ts.map

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,KAAK,EAAE,~~iBAAiB~~,~~EAAmD~~,MAAM,~~OAAO~~,CAAC;~~AAIhG~~,OAAO,~~KAAK~~,~~EAAE,YAAY,EAAE,~~MAAM,~~gBAAgB~~,CAAC;~~AAiBnD~~,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,~~eAAO~~,~~MAAM~~,sBAAsB~~;;mBAYlC~~,CAAC;~~AAQF~~,QAAA,MAAM,gBAAgB,~~EAAE~~,~~iBAAiB,~~CAAC~~,qBAAqB,GAAG,YAAY,CA0U7E,CAAC~~;~~AAEF~~,eAAe,gBAAgB,CAAC"}
1	+ {"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAgBrD,OAAO,sBAA8C,MAAM,2BAA2B,CAAC;AACvF,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,OAAO,EAAE,sBAAsB,EAAE,CAAC;AAKlC,QAAA,MAAM,gBAAgB,0JA2NpB,CAAC;AAEH,eAAe,gBAAgB,CAAC"}

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js CHANGED Viewed

@@ -1,202 +1,115 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useCallback, useMemo, useState, useEffect } from 'react';
-import styled from 'styled-components';
+import { forwardRef, useRef, useCallback, useMemo, useEffect, useState } from 'react';
 import Progress from '../../Progress';
-import { defaultThemeProp } from '../../../theme';
 import Selectable from '../../Badges/Selection';
 import { StyledFormControl } from '../../FormControl';
 import Flex from '../../Flex';
-import { useConsolidatedRef, useActiveDescendant, useDirection, useI18n, useUID } from '../../../hooks';
-import { cap, isInstance, getActiveElement } from '../../../utils';
+import { useArrows, useConsolidatedRef, useDirection, useFocusWithin, useI18n, useUID } from '../../../hooks';
+import { isInstance, getActiveElement } from '../../../utils';
 import VisuallyHiddenText from '../../VisuallyHiddenText';
-import { StyledSelectInput } from '../ComboBox.styles';
-export const StyledMultiSelectInput = styled(StyledSelectInput) `
-  cursor: text;
-  ul {
-    list-style: none;
-    display: contents;
-  }
-  input {
-    width: 8ch;
-    height: 1.125rem;
-  }
-`;
-StyledMultiSelectInput.defaultProps = defaultThemeProp;
-const StyledInputWrapper = styled(Flex) `
-  position: relative;
-`;
+import StyledMultiSelectInput, { StyledSelectionRow } from './MultiSelectInput.styles';
+export { StyledMultiSelectInput };
+const scrollIntoViewOptions = { block: 'nearest', inline: 'nearest' };
+const selectionFocusSelector = '[data-selection-focus]';
 const MultiSelectInput = forwardRef(function MultiSelectInput(props, ref) {
-    const { selected = [], loading, value, onRemove, onChange, onKeyDown, suggestion, actions, readOnly, disabled, status, placeholder, autoFocus, pauseDescendantEvaluation, onSelectedFocus, onSelectedBlur, 'aria-controls': ariaControls, required, ...restProps } = props;
+    const { selected = [], loading, value, onRemove, onChange, onKeyDown, suggestion, actions, readOnly, disabled, status, placeholder, autoFocus, onSelectedFocus, onSelectedBlur, 'aria-controls': ariaControls, required, ...restProps } = props;
     const t = useI18n();
+    const { start } = useDirection();
     const id = useUID();
     const inputRef = useConsolidatedRef(ref);
     const listRef = useRef(null);
-    const [focusDescendant, setFocusDescendant] = useState(null);
-    const [activeItemId, setActiveItemId] = useState(null);
-    const { start, end } = useDirection();
-    const uadConfig = useMemo(() => ({
-        focusEl: inputRef.current,
-        scope: listRef.current,
-        selector: ':scope > li',
-        orientation: 'horizontal',
-        focusReturnEl: focusDescendant,
-        clearFocusReturn: () => {
-            setFocusDescendant(null);
-        },
-        pauseDescendantEvaluation,
-        preventInitialScroll: true,
-        onClick: (el) => {
-            el.click();
+    const isSelectionFocusedRef = useRef(false);
+    const [lastFocusedId, setLastFocusedId] = useState();
+    const selectionDescriptionId = `${id}-selectionDescription`;
+    // Pin the newest selection to the divider
+    const revealNewestSelection = useCallback(() => {
+        const el = listRef.current;
+        if (el && !isSelectionFocusedRef.current)
+            el.scrollLeft = el.scrollWidth;
+    }, []);
+    // On blur, re-pin the newest selection
+    const onSelectionFocusChange = useCallback((isFocused) => {
+        isSelectionFocusedRef.current = isFocused;
+        if (isFocused)
+            onSelectedFocus?.();
+        else {
+            onSelectedBlur?.();
+            revealNewestSelection();
         }
-    }), [pauseDescendantEvaluation, selected, focusDescendant]);
-    const { activeDescendant } = useActiveDescendant(uadConfig, [selected]);
-    const handleSelectedRemoval = useCallback((selectionId, idx) => {
-        if (!pauseDescendantEvaluation) {
-            if (idx === selected.length - 1) {
-                // If removing last selected item
-                if (selected.length > 1) {
-                    // If other selected items, focus previous
-                    setFocusDescendant(listRef.current?.querySelectorAll(uadConfig.selector)[idx - 1] ||
-                        null);
-                }
-                else {
-                    // Blur selected if final only item removed
-                    onSelectedBlur?.();
-                }
-            }
-            else if (selected.length > 1) {
-                // If not last item removed and other selected items, focus next
-                setFocusDescendant(listRef.current?.querySelectorAll(uadConfig.selector)[idx + 1] ||
-                    null);
-            }
-        }
-        onRemove?.(selectionId, idx);
-        inputRef.current?.focus();
-    }, [selected, onRemove, onSelectedBlur, uadConfig]);
+    }, [onSelectedFocus, onSelectedBlur, revealNewestSelection]);
+    const isSelectionFocused = useFocusWithin([listRef], onSelectionFocusChange);
+    useArrows(listRef, { selector: selectionFocusSelector, dir: 'left-right', cycle: false, updateTabIndex: false }, [selected.length]);
+    // Re-pin the newest selection on selection change (add/remove) and on resize.
     useEffect(() => {
-        // Maintain active item & prev. val only as it changes.
-        if (activeDescendant?.id && activeDescendant.id !== activeItemId) {
-            setActiveItemId(activeDescendant.id);
-        }
-    }, [activeDescendant]);
-    const onListArrowKeyDown = useCallback((e) => {
-        // Tab (forward) from within the list: move focus to the input
-        if (e.key === 'Tab' && !e.shiftKey) {
-            e.preventDefault();
-            inputRef.current?.focus();
+        const el = listRef.current;
+        if (!el)
             return;
-        }
-        // Shift+Tab from within the list: exit the combobox entirely
-        if (e.key === 'Tab' && e.shiftKey) {
-            const focusables = Array.from(listRef.current?.querySelectorAll('a, button') ?? []);
-            const elementsToRestore = inputRef.current
-                ? [...focusables, inputRef.current]
-                : focusables;
-            const previousTabIndexes = elementsToRestore.map(el => ({
-                el,
-                tabindex: el.getAttribute('tabindex')
-            }));
-            elementsToRestore.forEach(el => el.setAttribute('tabindex', '-1'));
-            requestAnimationFrame(() => {
-                previousTabIndexes.forEach(({ el, tabindex }) => {
-                    if (tabindex === null) {
-                        el.removeAttribute('tabindex');
-                    }
-                    else {
-                        el.setAttribute('tabindex', tabindex);
-                    }
-                });
-            });
-            return;
-        }
-        if (e.key !== `Arrow${cap(start)}` && e.key !== `Arrow${cap(end)}`)
-            return;
-        const items = Array.from(listRef.current?.querySelectorAll(uadConfig.selector) ?? []);
-        const currentIndex = items.findIndex(item => item === getActiveElement() || item.contains(getActiveElement()));
-        if (currentIndex === -1)
+        revealNewestSelection();
+        const observer = new ResizeObserver(revealNewestSelection);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [selected.length, revealNewestSelection]);
+    // Keep a focused selection visible
+    useEffect(() => {
+        const el = listRef.current;
+        if (!el)
             return;
-        e.preventDefault();
-        e.stopPropagation();
-        if (e.key === `Arrow${cap(start)}` && currentIndex > 0) {
-            const prev = items[currentIndex - 1];
-            const prevLink = prev.querySelector('a');
-            const focusTarget = isInstance(prevLink, HTMLElement) ? prevLink : prev;
-            focusTarget.focus();
-        }
-        else if (e.key === `Arrow${cap(end)}`) {
-            if (currentIndex < items.length - 1) {
-                const next = items[currentIndex + 1];
-                const nextLink = next.querySelector('a');
-                const focusTarget = isInstance(nextLink, HTMLElement) ? nextLink : next;
-                focusTarget.focus();
-            }
-            else {
-                inputRef.current?.focus();
-            }
-        }
-    }, [start, end, uadConfig.selector]);
-    const onInputKeyDown = useCallback((e) => {
-        // Shift+Tab: Focus the last selected item's link
-        if (e.key === 'Tab' && e.shiftKey && selected.length) {
-            const items = Array.from(listRef.current?.querySelectorAll(uadConfig.selector) ?? []);
-            const lastItem = items[items.length - 1];
-            const link = lastItem?.querySelector('a');
-            if (isInstance(link, HTMLElement)) {
-                e.preventDefault();
-                e.stopPropagation();
-                link.focus();
+        const handleFocusIn = (e) => {
+            const target = e.target;
+            if (!isInstance(target, HTMLElement))
                 return;
+            const selection = target.closest('[data-selection]');
+            if (!selection)
+                return;
+            setLastFocusedId(selection.dataset.selection);
+            selection.scrollIntoView(scrollIntoViewOptions);
+        };
+        el.addEventListener('focusin', handleFocusIn);
+        return () => el.removeEventListener('focusin', handleFocusIn);
+    }, [selected.length]);
+    // The selection that owns tab stop: the last focused one if still present, else the newest
+    const tabStopId = useMemo(() => {
+        if (!Array.isArray(selected))
+            return undefined;
+        const ids = selected.map(item => item.id.toString());
+        return lastFocusedId && ids.includes(lastFocusedId) ? lastFocusedId : ids[ids.length - 1];
+    }, [lastFocusedId, selected]);
+    useEffect(() => {
+        listRef.current?.querySelectorAll('[data-selection]').forEach(selection => {
+            const link = selection.querySelector('a[href]');
+            const target = link ?? selection;
+            const isTabStop = !isSelectionFocused && selection.dataset.selection === tabStopId;
+            if (link) {
+                selection.removeAttribute('data-selection-focus');
+                selection.removeAttribute('tabindex');
+                const existingTokens = link.getAttribute('aria-describedby')?.split(/\s+/) ?? [];
+                if (!existingTokens.includes(selectionDescriptionId)) {
+                    link.setAttribute('aria-describedby', [...existingTokens, selectionDescriptionId].join(' '));
+                }
             }
+            target.setAttribute('data-selection-focus', '');
+            target.tabIndex = isTabStop ? 0 : -1;
+        });
+    }, [selected, isSelectionFocused, tabStopId, selectionDescriptionId]);
+    const handleSelectedRemoval = useCallback((selectionId, idx) => {
+        const activeEl = getActiveElement();
+        const isInSelectionList = listRef.current?.contains(activeEl) ?? false;
+        if (isInSelectionList) {
+            // Move focus to an adjacent selection before unmount
+            const targetIdx = idx > 0 ? idx - 1 : 1;
+            const child = listRef.current?.children[targetIdx];
+            const focusTarget = isInstance(child, HTMLElement)
+                ? child.querySelector('a[href]') ?? child
+                : undefined;
+            if (focusTarget)
+                focusTarget.focus();
+            else
+                inputRef.current?.focus();
         }
-        if (selected.length &&
-            inputRef.current?.selectionStart === 0 &&
-            inputRef.current?.selectionEnd === 0) {
-            const lastIndex = selected.length - 1;
-            if (pauseDescendantEvaluation && e.key === `Arrow${cap(start)}`) {
-                setFocusDescendant(listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex] ||
-                    null);
-                onSelectedFocus?.();
-            }
-            const lastSelectableId = listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex]
-                ?.id;
-            const onLastItem = activeItemId === lastSelectableId;
-            if (!pauseDescendantEvaluation &&
-                ((onLastItem && e.key === `Arrow${cap(end)}`) || e.key === 'ArrowDown')) {
-                onSelectedBlur?.();
-            }
-            if (['Backspace', 'Delete'].includes(e.key) && !(readOnly || disabled)) {
-                handleSelectedRemoval(selected[lastIndex].id, lastIndex);
-            }
-        }
-        onKeyDown?.(e);
-    }, [
-        pauseDescendantEvaluation,
-        activeItemId,
-        onKeyDown,
-        handleSelectedRemoval,
-        selected,
-        readOnly,
-        disabled,
-        start,
-        uadConfig.selector,
-        onSelectedFocus,
-        onSelectedBlur
-    ]);
-    const ariaDescribedBy = useMemo(() => {
-        return onChange
-            ? `${id}-inputDescription  ${id}-searchDescription`
-            : `${id}-inputDescription`;
-    }, [id]);
-    const ariaControlsValue = useMemo(() => {
-        if (!pauseDescendantEvaluation) {
-            return selected.length > 0 ? id : undefined;
-        }
-        return ariaControls;
-    }, [pauseDescendantEvaluation, selected.length]);
-    return (_jsxs(Flex, { as: StyledMultiSelectInput, forwardedAs: StyledFormControl, hasSuggestion: status === 'pending' && !!suggestion, container: { alignItems: 'center', justify: 'between' }, readOnly: readOnly, disabled: disabled, status: status, children: [_jsxs(StyledInputWrapper, { container: { alignContent: 'center', wrap: 'wrap', rowGap: 0.5, colGap: 0.25, pad: 0.25 }, item: { grow: 1 }, onClick: (e) => {
-                    // Ignore clicks on selection items
+        onRemove?.(selectionId, idx);
+    }, [onRemove]);
+    return (_jsxs(Flex, { as: StyledMultiSelectInput, forwardedAs: StyledFormControl, hasSuggestion: status === 'pending' && !!suggestion, container: { alignItems: 'center', justify: 'between' }, readOnly: readOnly, disabled: disabled, status: status, children: [_jsxs(Flex, { as: StyledSelectionRow, container: { alignItems: 'center', colGap: 0.25, pad: [0, 0.25, 0, 0] }, item: { grow: 1 }, onClick: (e) => {
+                    // Ignore clicks on selection items.
                     if (isInstance(e.target, HTMLElement) &&
                         !isInstance(e.target, HTMLInputElement) &&
                         !e.currentTarget.contains(e.target.closest('li'))) {
@@ -206,15 +119,9 @@ const MultiSelectInput = forwardRef(function MultiSelectInput(props, ref) {
                     }
                 }, children: [loading && (_jsx(Progress, { placement: 'local', "aria-label": t('combobox_loading_selected_items'), liveConfig: {
                             contextualLabel: t('combobox_loading_selected_items')
-                        } })), selected.length > 0 && (_jsx("ul", { ref: listRef, id: id, "aria-label": t('selected_items'), onKeyDown: onListArrowKeyDown, children: selected.map((element, idx) => {
-                            return (_jsx(Selectable, { as: 'li', id: element.id.toString(), status: status, contextualLabel: element.text, onRemove: !readOnly && !disabled
-                                    ? () => {
-                                        handleSelectedRemoval(element.id, idx);
-                                    }
-                                    : undefined, tabIndex: -1, "aria-label": `${t('remove')} ${element.text}`, "aria-describedby": ariaDescribedBy, children: element.primary ?? element.text }, element.id));
-                        }) })), _jsx(Flex, { item: { grow: 1 }, as: 'input', size: 1, ref: inputRef, value: value,
+                        } })), selected.length > 0 && (_jsx("ul", { ref: listRef, id: id, "aria-label": t('selected_items'), tabIndex: -1, children: selected.map((element, idx) => (_jsx(Selectable, { as: 'li', "data-selection": element.id.toString(), status: status, contextualLabel: element.text, onRemove: !readOnly && !disabled ? () => handleSelectedRemoval(element.id, idx) : undefined, "aria-label": `${t('remove')} ${element.text}`, "aria-describedby": selectionDescriptionId, children: element.primary ?? element.text }, element.id))) })), !readOnly && (_jsx(Flex, { item: { grow: 1 }, as: 'input', size: 1, ref: inputRef, value: value,
                         // no-op avoids react uncontrolled warning
-                        onChange: onChange || (() => { }), onKeyDown: onInputKeyDown, readOnly: readOnly || !onChange, disabled: disabled, placeholder: selected?.length ? undefined : placeholder, autoComplete: '_off', autoFocus: autoFocus, "aria-controls": ariaControlsValue, "aria-required": !!required, ...restProps })] }), actions, _jsx(VisuallyHiddenText, { id: `${id}-inputDescription`, children: `${t('combobox_open_close')} ` }), _jsx(VisuallyHiddenText, { id: `${id}-searchDescription`, children: t('combobox_search_instructions') })] }));
+                        onChange: onChange || (() => { }), onKeyDown: onKeyDown, readOnly: !onChange, disabled: disabled, placeholder: selected.length ? undefined : placeholder, autoComplete: '_off', autoFocus: autoFocus, "aria-controls": ariaControls ?? (selected.length > 0 ? id : undefined), "aria-required": !!required, ...restProps }))] }), actions, _jsx(VisuallyHiddenText, { id: selectionDescriptionId, children: `${t('multiselect_instructions', [start])}${!readOnly ? ` ${t('multiselect_tab_to_input')}` : ''}` })] }));
 });
 export default MultiSelectInput;
 //# sourceMappingURL=MultiSelectInput.js.map

package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useCallback, useMemo, useState, useEffect } from 'react';\nimport type { FunctionComponent, Ref, PropsWithoutRef, KeyboardEvent, MouseEvent } from 'react';\nimport styled from 'styled-components';\n\nimport Progress from '../../Progress';\nimport type { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport Selectable from '../../Badges/Selection';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport {\n useConsolidatedRef,\n useActiveDescendant,\n useDirection,\n useI18n,\n useUID\n} from '../../../hooks';\nimport { cap, isInstance, getActiveElement } from '../../../utils';\nimport VisuallyHiddenText from '../../VisuallyHiddenText';\nimport { StyledSelectInput } from '../ComboBox.styles';\nimport type { Selected } from '../ComboBox.types';\n\nimport type { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport const StyledMultiSelectInput = styled(StyledSelectInput)`\n cursor: text;\n\n ul {\n list-style: none;\n display: contents;\n }\n\n input {\n width: 8ch;\n height: 1.125rem;\n }\n`;\n\nStyledMultiSelectInput.defaultProps = defaultThemeProp;\n\nconst StyledInputWrapper = styled(Flex)`\n position: relative;\n`;\n\nconst MultiSelectInput: FunctionComponent<MultiSelectInputProps & ForwardProps> = forwardRef(\n function MultiSelectInput(\n props: PropsWithoutRef<MultiSelectInputProps>,\n ref: Ref<HTMLInputElement>\n ) {\n const {\n selected = [],\n loading,\n value,\n onRemove,\n onChange,\n onKeyDown,\n suggestion,\n actions,\n readOnly,\n disabled,\n status,\n placeholder,\n autoFocus,\n pauseDescendantEvaluation,\n onSelectedFocus,\n onSelectedBlur,\n 'aria-controls': ariaControls,\n required,\n ...restProps\n } = props;\n const t = useI18n();\n const id = useUID();\n\n const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n const listRef = useRef<HTMLUListElement>(null);\n const [focusDescendant, setFocusDescendant] = useState<HTMLElement \| null>(null);\n const [activeItemId, setActiveItemId] = useState<string \| null>(null);\n const { start, end } = useDirection();\n\n const uadConfig = useMemo(\n () => ({\n focusEl: inputRef.current,\n scope: listRef.current,\n selector: ':scope > li',\n orientation: 'horizontal' as const,\n focusReturnEl: focusDescendant,\n clearFocusReturn: () => {\n setFocusDescendant(null);\n },\n pauseDescendantEvaluation,\n preventInitialScroll: true,\n onClick: (el: HTMLElement) => {\n el.click();\n }\n }),\n [pauseDescendantEvaluation, selected, focusDescendant]\n );\n\n const { activeDescendant } = useActiveDescendant(uadConfig, [selected]);\n\n const handleSelectedRemoval = useCallback(\n (selectionId: Selected['id'], idx: number) => {\n if (!pauseDescendantEvaluation) {\n if (idx === selected.length - 1) {\n // If removing last selected item\n if (selected.length > 1) {\n // If other selected items, focus previous\n setFocusDescendant(\n (listRef.current?.querySelectorAll(uadConfig.selector)[idx - 1] as HTMLElement) \|\|\n null\n );\n } else {\n // Blur selected if final only item removed\n onSelectedBlur?.();\n }\n } else if (selected.length > 1) {\n // If not last item removed and other selected items, focus next\n setFocusDescendant(\n (listRef.current?.querySelectorAll(uadConfig.selector)[idx + 1] as HTMLElement) \|\|\n null\n );\n }\n }\n onRemove?.(selectionId, idx);\n inputRef.current?.focus();\n },\n [selected, onRemove, onSelectedBlur, uadConfig]\n );\n\n useEffect(() => {\n // Maintain active item & prev. val only as it changes.\n if (activeDescendant?.id && activeDescendant.id !== activeItemId) {\n setActiveItemId(activeDescendant.id);\n }\n }, [activeDescendant]);\n\n const onListArrowKeyDown = useCallback(\n (e: KeyboardEvent<HTMLUListElement>) => {\n // Tab (forward) from within the list: move focus to the input\n if (e.key === 'Tab' && !e.shiftKey) {\n e.preventDefault();\n inputRef.current?.focus();\n return;\n }\n\n // Shift+Tab from within the list: exit the combobox entirely\n if (e.key === 'Tab' && e.shiftKey) {\n const focusables = Array.from(listRef.current?.querySelectorAll('a, button') ?? []);\n const elementsToRestore = inputRef.current\n ? [...focusables, inputRef.current]\n : focusables;\n const previousTabIndexes = elementsToRestore.map(el => ({\n el,\n tabindex: el.getAttribute('tabindex')\n }));\n elementsToRestore.forEach(el => el.setAttribute('tabindex', '-1'));\n requestAnimationFrame(() => {\n previousTabIndexes.forEach(({ el, tabindex }) => {\n if (tabindex === null) {\n el.removeAttribute('tabindex');\n } else {\n el.setAttribute('tabindex', tabindex);\n }\n });\n });\n return;\n }\n\n if (e.key !== `Arrow${cap(start)}` && e.key !== `Arrow${cap(end)}`) return;\n\n const items = Array.from(\n listRef.current?.querySelectorAll<HTMLLIElement>(uadConfig.selector) ?? []\n );\n const currentIndex = items.findIndex(\n item => item === getActiveElement() \|\| item.contains(getActiveElement())\n );\n if (currentIndex === -1) return;\n\n e.preventDefault();\n e.stopPropagation();\n\n if (e.key === `Arrow${cap(start)}` && currentIndex > 0) {\n const prev = items[currentIndex - 1];\n const prevLink = prev.querySelector('a');\n const focusTarget = isInstance(prevLink, HTMLElement) ? prevLink : prev;\n focusTarget.focus();\n } else if (e.key === `Arrow${cap(end)}`) {\n if (currentIndex < items.length - 1) {\n const next = items[currentIndex + 1];\n const nextLink = next.querySelector('a');\n const focusTarget = isInstance(nextLink, HTMLElement) ? nextLink : next;\n focusTarget.focus();\n } else {\n inputRef.current?.focus();\n }\n }\n },\n [start, end, uadConfig.selector]\n );\n\n const onInputKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n // Shift+Tab: Focus the last selected item's link\n if (e.key === 'Tab' && e.shiftKey && selected.length) {\n const items = Array.from(\n listRef.current?.querySelectorAll<HTMLLIElement>(uadConfig.selector) ?? []\n );\n const lastItem = items[items.length - 1];\n const link = lastItem?.querySelector('a');\n\n if (isInstance(link, HTMLElement)) {\n e.preventDefault();\n e.stopPropagation();\n link.focus();\n return;\n }\n }\n\n if (\n selected.length &&\n inputRef.current?.selectionStart === 0 &&\n inputRef.current?.selectionEnd === 0\n ) {\n const lastIndex = selected.length - 1;\n if (pauseDescendantEvaluation && e.key === `Arrow${cap(start)}`) {\n setFocusDescendant(\n (listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex] as HTMLElement) \|\|\n null\n );\n onSelectedFocus?.();\n }\n\n const lastSelectableId = listRef.current?.querySelectorAll(uadConfig.selector)[lastIndex]\n ?.id;\n const onLastItem = activeItemId === lastSelectableId;\n\n if (\n !pauseDescendantEvaluation &&\n ((onLastItem && e.key === `Arrow${cap(end)}`) \|\| e.key === 'ArrowDown')\n ) {\n onSelectedBlur?.();\n }\n\n if (['Backspace', 'Delete'].includes(e.key) && !(readOnly \|\| disabled)) {\n handleSelectedRemoval(selected[lastIndex].id, lastIndex);\n }\n }\n onKeyDown?.(e);\n },\n [\n pauseDescendantEvaluation,\n activeItemId,\n onKeyDown,\n handleSelectedRemoval,\n selected,\n readOnly,\n disabled,\n start,\n uadConfig.selector,\n onSelectedFocus,\n onSelectedBlur\n ]\n );\n\n const ariaDescribedBy = useMemo(() => {\n return onChange\n ? `${id}-inputDescription ${id}-searchDescription`\n : `${id}-inputDescription`;\n }, [id]);\n\n const ariaControlsValue = useMemo(() => {\n if (!pauseDescendantEvaluation) {\n return selected.length > 0 ? id : undefined;\n }\n return ariaControls;\n }, [pauseDescendantEvaluation, selected.length]);\n\n return (\n <Flex\n as={StyledMultiSelectInput}\n forwardedAs={StyledFormControl}\n hasSuggestion={status === 'pending' && !!suggestion}\n container={{ alignItems: 'center', justify: 'between' }}\n readOnly={readOnly}\n disabled={disabled}\n status={status}\n >\n <StyledInputWrapper\n container={{ alignContent: 'center', wrap: 'wrap', rowGap: 0.5, colGap: 0.25, pad: 0.25 }}\n item={{ grow: 1 }}\n onClick={(e: MouseEvent<HTMLDivElement>) => {\n // Ignore clicks on selection items\n if (\n isInstance(e.target, HTMLElement) &&\n !isInstance(e.target, HTMLInputElement) &&\n !e.currentTarget.contains(e.target.closest('li'))\n ) {\n e.stopPropagation();\n inputRef.current?.focus();\n inputRef.current?.click();\n }\n }}\n >\n {loading && (\n <Progress\n placement='local'\n aria-label={t('combobox_loading_selected_items')}\n liveConfig={{\n contextualLabel: t('combobox_loading_selected_items')\n }}\n />\n )}\n {selected.length > 0 && (\n // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n <ul\n ref={listRef}\n id={id}\n aria-label={t('selected_items')}\n onKeyDown={onListArrowKeyDown}\n >\n {selected.map((element, idx) => {\n return (\n <Selectable\n as='li'\n key={element.id}\n id={element.id.toString()}\n status={status}\n contextualLabel={element.text}\n onRemove={\n !readOnly && !disabled\n ? () => {\n handleSelectedRemoval(element.id, idx);\n }\n : undefined\n }\n tabIndex={-1}\n aria-label={`${t('remove')} ${element.text}`}\n aria-describedby={ariaDescribedBy}\n >\n {element.primary ?? element.text}\n </Selectable>\n );\n })}\n </ul>\n )}\n <Flex\n item={{ grow: 1 }}\n as='input'\n size={1}\n ref={inputRef}\n value={value}\n // no-op avoids react uncontrolled warning\n onChange={onChange \|\| (() => {})}\n onKeyDown={onInputKeyDown}\n readOnly={readOnly \|\| !onChange}\n disabled={disabled}\n placeholder={selected?.length ? undefined : placeholder}\n autoComplete='_off'\n autoFocus={autoFocus}\n aria-controls={ariaControlsValue}\n aria-required={!!required}\n {...restProps}\n />\n </StyledInputWrapper>\n {actions}\n <VisuallyHiddenText id={`${id}-inputDescription`}>\n {`${t('combobox_open_close')} `}\n </VisuallyHiddenText>\n <VisuallyHiddenText id={`${id}-searchDescription`}>\n {t('combobox_search_instructions')}\n </VisuallyHiddenText>\n </Flex>\n );\n }\n);\n\nexport default MultiSelectInput;\n"]}
1	+ {"version":3,"file":"MultiSelectInput.js","sourceRoot":"","sources":["../../../../src/components/ComboBox/MultiSelectInput/MultiSelectInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtF,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAEtC,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,EACL,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,cAAc,EACd,OAAO,EACP,MAAM,EACP,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,kBAAkB,MAAM,0BAA0B,CAAC;AAG1D,OAAO,sBAAsB,EAAE,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAGvF,OAAO,EAAE,sBAAsB,EAAE,CAAC;AAElC,MAAM,qBAAqB,GAA0B,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;AAC7F,MAAM,sBAAsB,GAAG,wBAAwB,CAAC;AAExD,MAAM,gBAAgB,GAAG,UAAU,CAGjC,SAAS,gBAAgB,CAAC,KAAK,EAAE,GAAG;IACpC,MAAM,EACJ,QAAQ,GAAG,EAAE,EACb,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACV,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,WAAW,EACX,SAAS,EACT,eAAe,EACf,cAAc,EACd,eAAe,EAAE,YAAY,EAC7B,QAAQ,EACR,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IAEpB,MAAM,QAAQ,GAAG,kBAAkB,CAAmB,GAAG,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC/C,MAAM,qBAAqB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAU,CAAC;IAC7D,MAAM,sBAAsB,GAAG,GAAG,EAAE,uBAAuB,CAAC;IAE5D,0CAA0C;IAC1C,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7C,MAAM,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;QAC3B,IAAI,EAAE,IAAI,CAAC,qBAAqB,CAAC,OAAO;YAAE,EAAE,CAAC,UAAU,GAAG,EAAE,CAAC,WAAW,CAAC;IAC3E,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,uCAAuC;IACvC,MAAM,sBAAsB,GAAG,WAAW,CACxC,CAAC,SAAkB,EAAE,EAAE;QACrB,qBAAqB,CAAC,OAAO,GAAG,SAAS,CAAC;QAC1C,IAAI,SAAS;YAAE,eAAe,EAAE,EAAE,CAAC;aAC9B,CAAC;YACJ,cAAc,EAAE,EAAE,CAAC;YACnB,qBAAqB,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC,EACD,CAAC,eAAe,EAAE,cAAc,EAAE,qBAAqB,CAAC,CACzD,CAAC;IACF,MAAM,kBAAkB,GAAG,cAAc,CAAC,CAAC,OAAO,CAAC,EAAE,sBAAsB,CAAC,CAAC;IAE7E,SAAS,CACP,OAAO,EACP,EAAE,QAAQ,EAAE,sBAAsB,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,EAC5F,CAAC,QAAQ,CAAC,MAAM,CAAC,CAClB,CAAC;IAEF,8EAA8E;IAC9E,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;QAC3B,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,qBAAqB,EAAE,CAAC;QACxB,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,qBAAqB,CAAC,CAAC;QAC3D,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QACrB,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAE7C,mCAAmC;IACnC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;QAC3B,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,MAAM,aAAa,GAAG,CAAC,CAAa,EAAE,EAAE;YACtC,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC;YACxB,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,WAAW,CAAC;gBAAE,OAAO;YAC7C,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAc,kBAAkB,CAAC,CAAC;YAClE,IAAI,CAAC,SAAS;gBAAE,OAAO;YACvB,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;YAC9C,SAAS,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC;QAClD,CAAC,CAAC;QACF,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAC9C,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IAChE,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;IAEtB,2FAA2F;IAC3F,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC;YAAE,OAAO,SAAS,CAAC;QAC/C,MAAM,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC;QACrD,OAAO,aAAa,IAAI,GAAG,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAC5F,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE9B,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,OAAO,EAAE,gBAAgB,CAAc,kBAAkB,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;YACrF,MAAM,IAAI,GAAG,SAAS,CAAC,aAAa,CAAc,SAAS,CAAC,CAAC;YAC7D,MAAM,MAAM,GAAG,IAAI,IAAI,SAAS,CAAC;YACjC,MAAM,SAAS,GAAG,CAAC,kBAAkB,IAAI,SAAS,CAAC,OAAO,CAAC,SAAS,KAAK,SAAS,CAAC;YACnF,IAAI,IAAI,EAAE,CAAC;gBACT,SAAS,CAAC,eAAe,CAAC,sBAAsB,CAAC,CAAC;gBAClD,SAAS,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;gBACtC,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;gBACjF,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,CAAC;oBACrD,IAAI,CAAC,YAAY,CACf,kBAAkB,EAClB,CAAC,GAAG,cAAc,EAAE,sBAAsB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CACtD,CAAC;gBACJ,CAAC;YACH,CAAC;YACD,MAAM,CAAC,YAAY,CAAC,sBAAsB,EAAE,EAAE,CAAC,CAAC;YAChD,MAAM,CAAC,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACvC,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,EAAE,SAAS,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAEtE,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,WAA2B,EAAE,GAAW,EAAE,EAAE;QAC3C,MAAM,QAAQ,GAAG,gBAAgB,EAAE,CAAC;QACpC,MAAM,iBAAiB,GAAG,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC;QAEvE,IAAI,iBAAiB,EAAE,CAAC;YACtB,qDAAqD;YACrD,MAAM,SAAS,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACxC,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;YACnD,MAAM,WAAW,GAAG,UAAU,CAAC,KAAK,EAAE,WAAW,CAAC;gBAChD,CAAC,CAAC,KAAK,CAAC,aAAa,CAAc,SAAS,CAAC,IAAI,KAAK;gBACtD,CAAC,CAAC,SAAS,CAAC;YACd,IAAI,WAAW;gBAAE,WAAW,CAAC,KAAK,EAAE,CAAC;;gBAChC,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QACjC,CAAC;QAED,QAAQ,EAAE,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;IAC/B,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,sBAAsB,EAC1B,WAAW,EAAE,iBAAiB,EAC9B,aAAa,EAAE,MAAM,KAAK,SAAS,IAAI,CAAC,CAAC,UAAU,EACnD,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EACvD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,aAEd,MAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EACtB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,EACvE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,OAAO,EAAE,CAAC,CAA6B,EAAE,EAAE;oBACzC,oCAAoC;oBACpC,IACE,UAAU,CAAC,CAAC,CAAC,MAAM,EAAE,WAAW,CAAC;wBACjC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,EAAE,gBAAgB,CAAC;wBACvC,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,EACjD,CAAC;wBACD,CAAC,CAAC,eAAe,EAAE,CAAC;wBACpB,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;wBAC1B,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;oBAC5B,CAAC;gBACH,CAAC,aAEA,OAAO,IAAI,CACV,KAAC,QAAQ,IACP,SAAS,EAAC,OAAO,gBACL,CAAC,CAAC,iCAAiC,CAAC,EAChD,UAAU,EAAE;4BACV,eAAe,EAAE,CAAC,CAAC,iCAAiC,CAAC;yBACtD,GACD,CACH,EACA,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CACtB,aAAI,GAAG,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,gBAAc,CAAC,CAAC,gBAAgB,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,YACpE,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE,CAAC,CAC9B,KAAC,UAAU,IACT,EAAE,EAAC,IAAI,oBAES,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,EACrC,MAAM,EAAE,MAAM,EACd,eAAe,EAAE,OAAO,CAAC,IAAI,EAC7B,QAAQ,EACN,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,gBAEvE,GAAG,CAAC,CAAC,QAAQ,CAAC,IAAI,OAAO,CAAC,IAAI,EAAE,sBAC1B,sBAAsB,YAEvC,OAAO,CAAC,OAAO,IAAI,OAAO,CAAC,IAAI,IAV3B,OAAO,CAAC,EAAE,CAWJ,CACd,CAAC,GACC,CACN,EACA,CAAC,QAAQ,IAAI,CACZ,KAAC,IAAI,IACH,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAC,OAAO,EACV,IAAI,EAAE,CAAC,EACP,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK;wBACZ,0CAA0C;wBAC1C,QAAQ,EAAE,QAAQ,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,EAChC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,CAAC,QAAQ,EACnB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,EACtD,YAAY,EAAC,MAAM,EACnB,SAAS,EAAE,SAAS,mBACL,YAAY,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,mBACtD,CAAC,CAAC,QAAQ,KACrB,SAAS,GACb,CACH,IACI,EACN,OAAO,EAER,KAAC,kBAAkB,IAAC,EAAE,EAAE,sBAAsB,YAC3C,GAAG,CAAC,CAAC,0BAA0B,EAAE,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,0BAA0B,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,GAChF,IAChB,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,gBAAgB,CAAC","sourcesContent":["import { forwardRef, useRef, useCallback, useMemo, useEffect, useState } from 'react';\nimport type { MouseEvent } from 'react';\n\nimport Progress from '../../Progress';\nimport type { WithAttributes } from '../../../types';\nimport Selectable from '../../Badges/Selection';\nimport { StyledFormControl } from '../../FormControl';\nimport Flex from '../../Flex';\nimport {\n useArrows,\n useConsolidatedRef,\n useDirection,\n useFocusWithin,\n useI18n,\n useUID\n} from '../../../hooks';\nimport { isInstance, getActiveElement } from '../../../utils';\nimport VisuallyHiddenText from '../../VisuallyHiddenText';\nimport type { Selected } from '../ComboBox.types';\n\nimport StyledMultiSelectInput, { StyledSelectionRow } from './MultiSelectInput.styles';\nimport type { MultiSelectInputProps } from './MultiSelectInput.types';\n\nexport { StyledMultiSelectInput };\n\nconst scrollIntoViewOptions: ScrollIntoViewOptions = { block: 'nearest', inline: 'nearest' };\nconst selectionFocusSelector = '[data-selection-focus]';\n\nconst MultiSelectInput = forwardRef<\n HTMLInputElement,\n WithAttributes<'input', MultiSelectInputProps>\n>(function MultiSelectInput(props, ref) {\n const {\n selected = [],\n loading,\n value,\n onRemove,\n onChange,\n onKeyDown,\n suggestion,\n actions,\n readOnly,\n disabled,\n status,\n placeholder,\n autoFocus,\n onSelectedFocus,\n onSelectedBlur,\n 'aria-controls': ariaControls,\n required,\n ...restProps\n } = props;\n const t = useI18n();\n const { start } = useDirection();\n const id = useUID();\n\n const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n const listRef = useRef<HTMLUListElement>(null);\n const isSelectionFocusedRef = useRef(false);\n const [lastFocusedId, setLastFocusedId] = useState<string>();\n const selectionDescriptionId = `${id}-selectionDescription`;\n\n // Pin the newest selection to the divider\n const revealNewestSelection = useCallback(() => {\n const el = listRef.current;\n if (el && !isSelectionFocusedRef.current) el.scrollLeft = el.scrollWidth;\n }, []);\n\n // On blur, re-pin the newest selection\n const onSelectionFocusChange = useCallback(\n (isFocused: boolean) => {\n isSelectionFocusedRef.current = isFocused;\n if (isFocused) onSelectedFocus?.();\n else {\n onSelectedBlur?.();\n revealNewestSelection();\n }\n },\n [onSelectedFocus, onSelectedBlur, revealNewestSelection]\n );\n const isSelectionFocused = useFocusWithin([listRef], onSelectionFocusChange);\n\n useArrows(\n listRef,\n { selector: selectionFocusSelector, dir: 'left-right', cycle: false, updateTabIndex: false },\n [selected.length]\n );\n\n // Re-pin the newest selection on selection change (add/remove) and on resize.\n useEffect(() => {\n const el = listRef.current;\n if (!el) return;\n revealNewestSelection();\n const observer = new ResizeObserver(revealNewestSelection);\n observer.observe(el);\n return () => observer.disconnect();\n }, [selected.length, revealNewestSelection]);\n\n // Keep a focused selection visible\n useEffect(() => {\n const el = listRef.current;\n if (!el) return;\n const handleFocusIn = (e: FocusEvent) => {\n const target = e.target;\n if (!isInstance(target, HTMLElement)) return;\n const selection = target.closest<HTMLElement>('[data-selection]');\n if (!selection) return;\n setLastFocusedId(selection.dataset.selection);\n selection.scrollIntoView(scrollIntoViewOptions);\n };\n el.addEventListener('focusin', handleFocusIn);\n return () => el.removeEventListener('focusin', handleFocusIn);\n }, [selected.length]);\n\n // The selection that owns tab stop: the last focused one if still present, else the newest\n const tabStopId = useMemo(() => {\n if (!Array.isArray(selected)) return undefined;\n const ids = selected.map(item => item.id.toString());\n return lastFocusedId && ids.includes(lastFocusedId) ? lastFocusedId : ids[ids.length - 1];\n }, [lastFocusedId, selected]);\n\n useEffect(() => {\n listRef.current?.querySelectorAll<HTMLElement>('[data-selection]').forEach(selection => {\n const link = selection.querySelector<HTMLElement>('a[href]');\n const target = link ?? selection;\n const isTabStop = !isSelectionFocused && selection.dataset.selection === tabStopId;\n if (link) {\n selection.removeAttribute('data-selection-focus');\n selection.removeAttribute('tabindex');\n const existingTokens = link.getAttribute('aria-describedby')?.split(/\\s+/) ?? [];\n if (!existingTokens.includes(selectionDescriptionId)) {\n link.setAttribute(\n 'aria-describedby',\n [...existingTokens, selectionDescriptionId].join(' ')\n );\n }\n }\n target.setAttribute('data-selection-focus', '');\n target.tabIndex = isTabStop ? 0 : -1;\n });\n }, [selected, isSelectionFocused, tabStopId, selectionDescriptionId]);\n\n const handleSelectedRemoval = useCallback(\n (selectionId: Selected['id'], idx: number) => {\n const activeEl = getActiveElement();\n const isInSelectionList = listRef.current?.contains(activeEl) ?? false;\n\n if (isInSelectionList) {\n // Move focus to an adjacent selection before unmount\n const targetIdx = idx > 0 ? idx - 1 : 1;\n const child = listRef.current?.children[targetIdx];\n const focusTarget = isInstance(child, HTMLElement)\n ? child.querySelector<HTMLElement>('a[href]') ?? child\n : undefined;\n if (focusTarget) focusTarget.focus();\n else inputRef.current?.focus();\n }\n\n onRemove?.(selectionId, idx);\n },\n [onRemove]\n );\n\n return (\n <Flex\n as={StyledMultiSelectInput}\n forwardedAs={StyledFormControl}\n hasSuggestion={status === 'pending' && !!suggestion}\n container={{ alignItems: 'center', justify: 'between' }}\n readOnly={readOnly}\n disabled={disabled}\n status={status}\n >\n <Flex\n as={StyledSelectionRow}\n container={{ alignItems: 'center', colGap: 0.25, pad: [0, 0.25, 0, 0] }}\n item={{ grow: 1 }}\n onClick={(e: MouseEvent<HTMLDivElement>) => {\n // Ignore clicks on selection items.\n if (\n isInstance(e.target, HTMLElement) &&\n !isInstance(e.target, HTMLInputElement) &&\n !e.currentTarget.contains(e.target.closest('li'))\n ) {\n e.stopPropagation();\n inputRef.current?.focus();\n inputRef.current?.click();\n }\n }}\n >\n {loading && (\n <Progress\n placement='local'\n aria-label={t('combobox_loading_selected_items')}\n liveConfig={{\n contextualLabel: t('combobox_loading_selected_items')\n }}\n />\n )}\n {selected.length > 0 && (\n <ul ref={listRef} id={id} aria-label={t('selected_items')} tabIndex={-1}>\n {selected.map((element, idx) => (\n <Selectable\n as='li'\n key={element.id}\n data-selection={element.id.toString()}\n status={status}\n contextualLabel={element.text}\n onRemove={\n !readOnly && !disabled ? () => handleSelectedRemoval(element.id, idx) : undefined\n }\n aria-label={`${t('remove')} ${element.text}`}\n aria-describedby={selectionDescriptionId}\n >\n {element.primary ?? element.text}\n </Selectable>\n ))}\n </ul>\n )}\n {!readOnly && (\n <Flex\n item={{ grow: 1 }}\n as='input'\n size={1}\n ref={inputRef}\n value={value}\n // no-op avoids react uncontrolled warning\n onChange={onChange \|\| (() => {})}\n onKeyDown={onKeyDown}\n readOnly={!onChange}\n disabled={disabled}\n placeholder={selected.length ? undefined : placeholder}\n autoComplete='_off'\n autoFocus={autoFocus}\n aria-controls={ariaControls ?? (selected.length > 0 ? id : undefined)}\n aria-required={!!required}\n {...restProps}\n />\n )}\n </Flex>\n {actions}\n\n <VisuallyHiddenText id={selectionDescriptionId}>\n {`${t('multiselect_instructions', [start])}${!readOnly ? ` ${t('multiselect_tab_to_input')}` : ''}`}\n </VisuallyHiddenText>\n </Flex>\n );\n});\n\nexport default MultiSelectInput;\n"]}