@pega/cosmos-react-core 10.0.0-build.2.1 → 10.0.0-build.2.11
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.
- package/lib/components/Button/Button.d.ts.map +1 -1
- package/lib/components/Button/Button.js +14 -5
- package/lib/components/Button/Button.js.map +1 -1
- package/lib/components/ComboBox/ComboBox.d.ts.map +1 -1
- package/lib/components/ComboBox/ComboBox.js +1 -1
- package/lib/components/ComboBox/ComboBox.js.map +1 -1
- package/lib/components/ComboBox/ComboBox.styles.d.ts.map +1 -1
- package/lib/components/ComboBox/ComboBox.styles.js +14 -2
- package/lib/components/ComboBox/ComboBox.styles.js.map +1 -1
- package/lib/components/ComboBox/ComboBox.types.d.ts +2 -0
- package/lib/components/ComboBox/ComboBox.types.d.ts.map +1 -1
- package/lib/components/ComboBox/ComboBox.types.js.map +1 -1
- package/lib/components/ComboBox/ComboBoxInput.d.ts +1 -0
- package/lib/components/ComboBox/ComboBoxInput.d.ts.map +1 -1
- package/lib/components/ComboBox/ComboBoxInput.js.map +1 -1
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts.map +1 -1
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js +9 -3
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js.map +1 -1
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types.d.ts +2 -0
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types.d.ts.map +1 -1
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.types.js.map +1 -1
- package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.d.ts.map +1 -1
- package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.js +28 -9
- package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.js.map +1 -1
- package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.types.d.ts +2 -0
- package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.types.d.ts.map +1 -1
- package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.types.js.map +1 -1
- package/lib/components/DateTime/Input/DateTime.styles.d.ts.map +1 -1
- package/lib/components/DateTime/Input/DateTime.styles.js +1 -2
- package/lib/components/DateTime/Input/DateTime.styles.js.map +1 -1
- package/lib/components/DateTime/Input/MonthInput.d.ts.map +1 -1
- package/lib/components/DateTime/Input/MonthInput.js +2 -1
- package/lib/components/DateTime/Input/MonthInput.js.map +1 -1
- package/lib/components/DateTime/Input/QuarterInput.d.ts.map +1 -1
- package/lib/components/DateTime/Input/QuarterInput.js +2 -2
- package/lib/components/DateTime/Input/QuarterInput.js.map +1 -1
- package/lib/components/DateTime/Picker/DatePicker.styles.d.ts.map +1 -1
- package/lib/components/DateTime/Picker/DatePicker.styles.js +5 -0
- package/lib/components/DateTime/Picker/DatePicker.styles.js.map +1 -1
- package/lib/components/FieldGroup/FieldGroup.d.ts.map +1 -1
- package/lib/components/FieldGroup/FieldGroup.js +0 -15
- package/lib/components/FieldGroup/FieldGroup.js.map +1 -1
- package/lib/components/FormControl/FormControl.d.ts.map +1 -1
- package/lib/components/FormControl/FormControl.js +1 -10
- package/lib/components/FormControl/FormControl.js.map +1 -1
- package/lib/components/Number/NumberDisplay.d.ts +5 -0
- package/lib/components/Number/NumberDisplay.d.ts.map +1 -1
- package/lib/components/Number/NumberDisplay.js +3 -2
- package/lib/components/Number/NumberDisplay.js.map +1 -1
- package/lib/components/Number/utils.d.ts +3 -1
- package/lib/components/Number/utils.d.ts.map +1 -1
- package/lib/components/Number/utils.js +10 -8
- package/lib/components/Number/utils.js.map +1 -1
- package/lib/components/Preview/Preview.types.d.ts +1 -0
- package/lib/components/Preview/Preview.types.d.ts.map +1 -1
- package/lib/components/Preview/Preview.types.js.map +1 -1
- package/lib/components/QRCode/QRCode.d.ts +6 -1
- package/lib/components/QRCode/QRCode.d.ts.map +1 -1
- package/lib/components/QRCode/QRCode.js +15 -9
- package/lib/components/QRCode/QRCode.js.map +1 -1
- package/lib/components/QRCode/index.d.ts +1 -1
- package/lib/components/QRCode/index.d.ts.map +1 -1
- package/lib/components/QRCode/index.js.map +1 -1
- package/lib/components/Text/Text.d.ts.map +1 -1
- package/lib/components/Text/Text.js +2 -0
- package/lib/components/Text/Text.js.map +1 -1
- package/lib/hooks/useI18n.d.ts +15 -0
- package/lib/hooks/useI18n.d.ts.map +1 -1
- package/lib/i18n/default.d.ts +15 -0
- package/lib/i18n/default.d.ts.map +1 -1
- package/lib/i18n/default.js +16 -0
- package/lib/i18n/default.js.map +1 -1
- package/lib/i18n/i18n.d.ts +15 -0
- package/lib/i18n/i18n.d.ts.map +1 -1
- package/lib/theme/index.d.ts +1 -0
- package/lib/theme/index.d.ts.map +1 -1
- package/lib/theme/index.js +1 -0
- package/lib/theme/index.js.map +1 -1
- package/lib/theme/theme.d.ts +150 -0
- package/lib/theme/theme.d.ts.map +1 -1
- package/lib/theme/themeDefinition.json +89 -2
- package/lib/theme/themeOverrides.schema.json +75 -0
- package/lib/theme/themes/aurigaTheme.json +140 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EAET,GAAG,EAGJ,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EACV,SAAS,EAET,+BAA+B,EAC/B,iBAAiB,EACjB,MAAM,EACP,MAAM,aAAa,CAAC;AAkBrB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,MAAM;IACpD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACrC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC7C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CAClD;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAC9C,WAAW,EACX,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CACrD,CAAC;AAgFF,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EAET,GAAG,EAGJ,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EACV,SAAS,EAET,+BAA+B,EAC/B,iBAAiB,EACjB,MAAM,EACP,MAAM,aAAa,CAAC;AAkBrB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,MAAM;IACpD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACrC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC7C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CAClD;AAED,KAAK,uBAAuB,GAAG,iBAAiB,CAC9C,WAAW,EACX,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CACrD,CAAC;AAgFF,eAAO,MAAM,YAAY,wQA+OxB,CAAC;AAIF,eAAO,MAAM,gBAAgB,iUA+D3B,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,+BAA+B,CAAC,WAAW,CA2GvD,CAAC;AAEH,eAAe,MAAM,CAAC"}
|
|
@@ -73,7 +73,7 @@ const getOutlinedButtonStyles = (color, backgroundColor) => {
|
|
|
73
73
|
};
|
|
74
74
|
};
|
|
75
75
|
export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ variant, icon, loading, compact, theme }) => {
|
|
76
|
-
const { base: { spacing, 'border-radius': baseBorderRadius, palette: { 'primary-background': backgroundColor }, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger, 'compact-min': hitAreaCompact }, animation: { speed } }, components: { button: { color, 'foreground-color': foregroundColor, 'secondary-color': secondaryColor, 'secondary-fill-style': fillStyle, padding, 'border-radius': borderRadius, 'border-width': borderWidth, touch: { padding: touchPadding } } } } = theme;
|
|
76
|
+
const { base: { spacing, 'border-radius': baseBorderRadius, palette: { 'primary-background': backgroundColor }, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger, 'compact-min': hitAreaCompact }, animation: { speed } }, components: { button: { color, height, 'foreground-color': foregroundColor, 'secondary-color': secondaryColor, 'secondary-fill-style': fillStyle, padding, 'border-radius': borderRadius, 'border-width': borderWidth, touch: { padding: touchPadding } } } } = theme;
|
|
77
77
|
// Base
|
|
78
78
|
const base = baseStyles(theme);
|
|
79
79
|
// Non-text base
|
|
@@ -102,17 +102,26 @@ export const StyledButton = styled.button.withConfig(omitProps('loading'))(({ va
|
|
|
102
102
|
> svg {
|
|
103
103
|
display: block;
|
|
104
104
|
}
|
|
105
|
-
`}
|
|
105
|
+
`}
|
|
106
|
+
|
|
107
|
+
${!icon &&
|
|
108
|
+
!compact &&
|
|
109
|
+
css `
|
|
110
|
+
min-height: ${height};
|
|
111
|
+
`}
|
|
112
|
+
|
|
113
|
+
${compact &&
|
|
106
114
|
css `
|
|
107
115
|
min-height: ${hitAreaCompact};
|
|
108
116
|
min-width: ${hitAreaCompact};
|
|
109
|
-
`}
|
|
110
|
-
|
|
117
|
+
`}
|
|
118
|
+
|
|
119
|
+
@media (pointer: coarse) {
|
|
111
120
|
border-radius: calc(${baseBorderRadius} * ${borderRadius});
|
|
112
121
|
|
|
113
122
|
${!compact &&
|
|
114
123
|
css `
|
|
115
|
-
min-height: ${hitAreaFinger};
|
|
124
|
+
min-height: ${icon ? `${hitAreaFinger}` : `max(${hitAreaFinger}, ${height})`};
|
|
116
125
|
min-width: ${hitAreaFinger};
|
|
117
126
|
`}
|
|
118
127
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useEffect, forwardRef } from 'react';\nimport type {\n ReactNode,\n PropsWithoutRef,\n Ref,\n MouseEventHandler,\n MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { meetsContrastGuidelines, mix } from 'polished';\n\nimport type {\n BaseProps,\n ForwardProps,\n ForwardRefForwardPropsComponent,\n PropsWithDefaults,\n AsProp\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { isPositionWithinRect, tryCatch, createClassName } from '../../utils';\nimport {\n getActiveColors,\n getHoverColors,\n isSolidColor,\n omitProps,\n readableColor,\n readableHue\n} from '../../styles';\nimport { useElement, useConsolidatedRef } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledIcon } from '../Icon';\nimport { StyledPopover } from '../Popover';\n\nexport interface ButtonProps extends BaseProps, AsProp {\n /** Text or content for the Button. */\n children: ReactNode;\n /**\n * Determines if the Button will be disabled.\n * @default false\n */\n disabled?: boolean;\n /** A location to navigate to. Passing an href will render an anchor styled as a Button. */\n href?: string;\n /**\n * Controls the styling of the Button.\n * @default 'secondary'\n */\n variant?: 'primary' | 'secondary' | 'simple' | 'link' | 'text';\n /**\n * Controls the behavior of a Button within a Form.\n * @default 'button'\n */\n type?: 'button' | 'reset' | 'submit';\n /**\n * Set the Icon prop to `true` if you're using just an Icon in your Button. Make sure to pass an Icon as children if `true`.\n * @default false\n */\n icon?: boolean;\n /**\n * Used for a smaller sized button.\n * @default false\n */\n compact?: boolean;\n /** The label text will be used inside a Tooltip. */\n label?: string;\n /** The aria label text will be inserted as the aria-label on the Button. */\n 'aria-label'?: string;\n /**\n * Applies visual disabled styles without disabling the button element itself.\n * @default false\n */\n 'aria-disabled'?: boolean | 'true' | 'false';\n /**\n * Optionally renders an indeterminate progress indicator in a button.\n * @default false\n */\n loading?: boolean;\n /** Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\ntype ButtonPropsWithDefaults = PropsWithDefaults<\n ButtonProps,\n 'variant' | 'type' | 'disabled' | 'icon' | 'loading'\n>;\n\nconst baseStyles = (theme: DefaultTheme) => {\n const {\n base: {\n spacing,\n animation: {\n speed,\n timing: { ease }\n },\n 'disabled-opacity': disabledOpacity\n },\n components: {\n button: { 'focus-shadow': focusShadow }\n }\n } = theme;\n\n return css`\n text-decoration: none;\n transition-property: background-color, color, border-color, box-shadow, translate;\n transition-duration: calc(0.5 * ${speed});\n transition-timing-function: ${ease};\n cursor: pointer;\n\n @media (forced-colors: none) {\n outline: none;\n }\n\n & + & {\n margin-inline-start: ${spacing};\n }\n\n /* Not able to combine with selector above. Stylis bug? */\n\n & + ${StyledPopover} + & {\n margin-inline-start: ${spacing};\n }\n\n &:disabled,\n &[disabled] {\n opacity: ${disabledOpacity};\n cursor: not-allowed;\n pointer-events: none;\n }\n\n &[aria-disabled='true'] {\n opacity: ${disabledOpacity};\n }\n\n &:not([disabled], [aria-disabled='true']):focus-visible,\n &:enabled:not([aria-disabled='true']):focus-visible {\n box-shadow: ${focusShadow};\n }\n `;\n};\n\n/* If the background color is not provided, the color will be used for the hover and active styles */\nconst getFilledButtonStyles = (color: string, backgroundColor?: string) => ({\n contrastColor: backgroundColor ? color : tryCatch(() => readableColor(color)),\n hoverColors: getHoverColors(backgroundColor || color),\n activeColors: getActiveColors(backgroundColor || color)\n});\n\nconst getOutlinedButtonStyles = (color: string, backgroundColor: string) => {\n // If the background color is not solid, use the readable color for the text\n const fallbackBackground = isSolidColor(backgroundColor) ? backgroundColor : readableColor(color);\n const backgroundUsable = tryCatch(() => meetsContrastGuidelines(color, fallbackBackground).AA);\n const usableColor = backgroundUsable ? color : readableHue(color, backgroundColor);\n const hoverBackgroundColor = tryCatch(() => mix(0.9, backgroundColor, color));\n const activeBackgroundColor = tryCatch(() => mix(0.8, backgroundColor, usableColor));\n\n return {\n textColor: backgroundUsable ? color : readableColor(color),\n hoverBg: hoverBackgroundColor,\n hoverFg: readableHue(color, hoverBackgroundColor ?? 'transparent'),\n activeBg: tryCatch(() => mix(0.8, backgroundColor, usableColor)),\n activeFg: readableHue(usableColor, activeBackgroundColor ?? 'transparent')\n };\n};\n\nexport const StyledButton = styled.button.withConfig(omitProps('loading'))<ButtonPropsWithDefaults>(\n ({ variant, icon, loading, compact, theme }) => {\n const {\n base: {\n spacing,\n 'border-radius': baseBorderRadius,\n palette: { 'primary-background': backgroundColor },\n 'hit-area': {\n 'mouse-min': hitAreaMouse,\n 'finger-min': hitAreaFinger,\n 'compact-min': hitAreaCompact\n },\n animation: { speed }\n },\n components: {\n button: {\n color,\n 'foreground-color': foregroundColor,\n 'secondary-color': secondaryColor,\n 'secondary-fill-style': fillStyle,\n padding,\n 'border-radius': borderRadius,\n 'border-width': borderWidth,\n touch: { padding: touchPadding }\n }\n }\n } = theme;\n\n // Base\n const base = baseStyles(theme);\n\n // Non-text base\n const nonTextual = css`\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: ${hitAreaMouse};\n min-width: ${hitAreaMouse};\n border: ${borderWidth} solid transparent;\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n -webkit-user-select: none;\n user-select: none;\n white-space: nowrap;\n\n ${!icon &&\n css`\n padding: ${padding};\n `}\n\n ${icon &&\n css`\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n > svg {\n display: block;\n }\n `} ${compact &&\n css`\n min-height: ${hitAreaCompact};\n min-width: ${hitAreaCompact};\n `} @media (\n pointer: coarse) {\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n ${!compact &&\n css`\n min-height: ${hitAreaFinger};\n min-width: ${hitAreaFinger};\n `}\n\n ${!icon &&\n css`\n padding: ${touchPadding};\n `}\n }\n\n &:active {\n translate: 0 0.0625rem;\n }\n `;\n\n // Primary and Secondary-filled\n /* For primary button, use the foreground color as the text color. If foreground is 'auto', then calculate based on background\n For secondary button, always use the secondary color */\n const { contrastColor, hoverColors, activeColors } =\n variant !== 'primary' || foregroundColor === 'auto'\n ? getFilledButtonStyles(variant === 'primary' ? color : secondaryColor)\n : getFilledButtonStyles(foregroundColor, color);\n\n const solidButtonStyles = css`\n --button-background-color: ${variant === 'primary' ? color : secondaryColor};\n color: ${contrastColor};\n background-color: ${variant === 'primary' ? color : secondaryColor};\n\n @media (hover: hover) {\n &:hover {\n background-color: ${hoverColors.background};\n text-decoration: none;\n }\n }\n\n &:active {\n background-color: ${activeColors.background};\n color: ${activeColors.foreground};\n text-decoration: none;\n }\n `;\n\n // Secondary-outline\n const secondaryOutlineButtonStyles = getOutlinedButtonStyles(secondaryColor, backgroundColor);\n const secondary = css`\n --button-background-color: ${backgroundColor};\n color: ${secondaryOutlineButtonStyles.textColor};\n background-color: ${backgroundColor};\n border-color: ${secondaryColor};\n\n @media (hover: hover) {\n &:hover {\n background-color: ${secondaryOutlineButtonStyles.hoverBg};\n text-decoration: none;\n }\n }\n\n &:active {\n color: ${secondaryOutlineButtonStyles.activeFg};\n background-color: ${secondaryOutlineButtonStyles.activeBg};\n border-color: ${secondaryOutlineButtonStyles.activeFg};\n text-decoration: none;\n }\n `;\n\n // Simple\n const simpleButtonStyles = getOutlinedButtonStyles(\n fillStyle === 'outline' ? secondaryColor : color,\n backgroundColor\n );\n const simple = css`\n --button-background-color: ${icon ? 'transparent' : backgroundColor};\n color: ${icon ? 'currentColor' : simpleButtonStyles.textColor};\n background-color: ${icon ? 'transparent' : backgroundColor};\n\n @media (hover: hover) {\n &:hover {\n ${icon &&\n css`\n &::before {\n content: '';\n position: absolute;\n top: calc(${borderWidth} * -1);\n bottom: calc(${borderWidth} * -1);\n left: calc(${borderWidth} * -1);\n right: calc(${borderWidth} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.1;\n }\n `}\n\n ${!icon &&\n css`\n background-color: ${simpleButtonStyles.hoverBg};\n color: ${simpleButtonStyles.hoverFg};\n border-color: ${simpleButtonStyles.hoverFg};\n text-decoration: none;\n `}\n }\n\n &:active {\n ${icon &&\n css`\n &::before {\n content: '';\n position: absolute;\n top: calc(${borderWidth} * -1);\n bottom: calc(${borderWidth} * -1);\n left: calc(${borderWidth} * -1);\n right: calc(${borderWidth} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.2;\n }\n `}\n\n ${!icon &&\n css`\n background-color: ${simpleButtonStyles.activeBg};\n color: ${simpleButtonStyles.activeFg};\n border-color: ${simpleButtonStyles.activeFg};\n text-decoration: none;\n `}\n }\n }\n `;\n\n return css`\n ${base}\n ${nonTextual}\n ${(variant === 'primary' || (variant === 'secondary' && fillStyle === 'fill')) &&\n solidButtonStyles}\n ${variant === 'secondary' && fillStyle === 'outline' && secondary}\n ${variant === 'simple' && simple}\n ${variant === 'primary' &&\n css`\n font-weight: ${theme.base['font-weight']['semi-bold']};\n `}\n\n ${loading &&\n css`\n ${StyledBackdrop} {\n background-color: var(--button-background-color);\n border-radius: inherit;\n }\n\n ${StyledProgressRing} {\n width: 1em;\n height: 1em;\n\n ${!icon &&\n css`\n margin-inline-end: calc(${spacing} / 2);\n `}\n circle:nth-child(2) {\n animation-duration: calc(${speed} * 2);\n }\n }\n `}\n `;\n }\n);\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport const StyledButtonLink = styled.a.withConfig(omitProps('loading'))<\n Pick<ButtonPropsWithDefaults, 'variant' | 'href'> &\n // Needed for omitProps\n Pick<ButtonProps, 'loading'>\n>(({ theme, variant, href }) => {\n const {\n base: {\n palette: { 'foreground-color': textVariantColor }\n },\n components: {\n button: { color: primaryColor, 'secondary-fill-style': fillStyle },\n link: { color: linkColor }\n }\n } = theme;\n\n let linkVariantColor = linkColor;\n if (!href && fillStyle === 'solid') {\n linkVariantColor = primaryColor;\n }\n const { background: activeLinkColor } = getActiveColors(linkVariantColor);\n const { background: activeTextColor } = getActiveColors(textVariantColor);\n\n const base = baseStyles(theme);\n\n const textual = css`\n background-color: transparent;\n display: inline;\n text-align: start;\n border: none;\n\n @media (hover: hover) {\n &:hover {\n text-decoration: underline;\n }\n }\n\n > ${StyledIcon} {\n vertical-align: bottom;\n }\n `;\n\n const link = css`\n color: ${linkVariantColor};\n\n &:active {\n color: ${activeLinkColor};\n }\n `;\n\n const text = css`\n color: ${textVariantColor};\n\n &:active {\n color: ${activeTextColor};\n }\n `;\n\n return css`\n ${base}\n ${textual}\n ${variant === 'link' && link}\n ${variant === 'text' && text}\n `;\n});\n\nStyledButtonLink.defaultProps = defaultThemeProp;\n\nconst Button: ForwardRefForwardPropsComponent<ButtonProps> = forwardRef(function Button(\n {\n variant = 'secondary',\n type = 'button',\n disabled = false,\n icon = false,\n compact = false,\n href,\n as,\n forwardedAs,\n label,\n 'aria-label': ariaLabel,\n 'aria-disabled': ariaDisabled,\n loading = false,\n children,\n className,\n ...restProps\n }: PropsWithoutRef<ButtonProps> & ForwardProps,\n ref: ButtonProps['ref']\n) {\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement | HTMLAnchorElement>();\n const mouseDownEvent = useRef<ReactMouseEvent>();\n const mouseDownPosition = useRef<DOMRect>();\n const mouseDownTimestamp = useRef<number>();\n const buttonRef = useConsolidatedRef(ref, setButtonEl);\n const isTextual = ['link', 'text'].includes(variant);\n const showProgress = loading && !isTextual;\n const StyledComp: React.ElementType = isTextual ? StyledButtonLink : StyledButton;\n\n const handleClickWithElementShift = (e: MouseEvent) => {\n if (\n buttonRef.current &&\n mouseDownPosition.current &&\n mouseDownTimestamp.current &&\n isPositionWithinRect({ x: e.clientX, y: e.clientY }, mouseDownPosition.current) &&\n Date.now() - mouseDownTimestamp.current < 500\n ) {\n // Only click if the button is still the topmost element at its own position.\n // If something has rendered over the button between mousedown and mouseup,\n // elementFromPoint will return that — not the button — and we should not trigger a click.\n const { x, y, width, height } = buttonRef.current.getBoundingClientRect();\n const elementAtPoint = document.elementFromPoint(x + width / 2, y + height / 2);\n if (buttonRef.current.contains(elementAtPoint) || elementAtPoint === buttonRef.current) {\n buttonRef.current.click();\n }\n }\n };\n\n useEffect(() => {\n document.addEventListener('mouseup', handleClickWithElementShift);\n\n return () => {\n document.removeEventListener('mouseup', handleClickWithElementShift);\n mouseDownEvent.current = undefined;\n mouseDownPosition.current = undefined;\n mouseDownTimestamp.current = undefined;\n };\n }, []);\n\n return (\n <>\n <StyledComp\n {...restProps}\n ref={buttonRef}\n as={as || (href ? 'a' : 'button')}\n forwardedAs={forwardedAs || (href ? 'a' : 'button')}\n className={createClassName('button', className, { variant, icon, compact, loading })}\n variant={variant}\n icon={icon}\n compact={compact}\n type={href ? undefined : type}\n href={href}\n disabled={disabled && !href}\n aria-disabled={ariaDisabled}\n loading={showProgress}\n aria-label={ariaLabel || label}\n onMouseDown={(e: ReactMouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n e.persist();\n mouseDownEvent.current = e;\n mouseDownPosition.current = e.currentTarget.getBoundingClientRect();\n mouseDownTimestamp.current = Date.now();\n }}\n onMouseUp={(e: ReactMouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n mouseDownEvent.current = undefined;\n mouseDownPosition.current = undefined;\n mouseDownTimestamp.current = undefined;\n\n if (shouldFocus && buttonRef.current !== document.activeElement) {\n buttonRef.current?.focus();\n }\n\n return (restProps.onMouseUp as MouseEventHandler | undefined)?.(e);\n }}\n >\n {showProgress && <Progress variant='ring' placement='inline' />}\n {!icon || !showProgress ? children : null}\n </StyledComp>\n\n {buttonEl && label && (\n <Tooltip target={buttonEl} showDelay='none' hideDelay='none' describeTarget={false}>\n {label}\n </Tooltip>\n )}\n </>\n );\n});\n\nexport default Button;\n"]}
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useEffect, forwardRef } from 'react';\nimport type {\n ReactNode,\n PropsWithoutRef,\n Ref,\n MouseEventHandler,\n MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { meetsContrastGuidelines, mix } from 'polished';\n\nimport type {\n BaseProps,\n ForwardProps,\n ForwardRefForwardPropsComponent,\n PropsWithDefaults,\n AsProp\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { isPositionWithinRect, tryCatch, createClassName } from '../../utils';\nimport {\n getActiveColors,\n getHoverColors,\n isSolidColor,\n omitProps,\n readableColor,\n readableHue\n} from '../../styles';\nimport { useElement, useConsolidatedRef } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledIcon } from '../Icon';\nimport { StyledPopover } from '../Popover';\n\nexport interface ButtonProps extends BaseProps, AsProp {\n /** Text or content for the Button. */\n children: ReactNode;\n /**\n * Determines if the Button will be disabled.\n * @default false\n */\n disabled?: boolean;\n /** A location to navigate to. Passing an href will render an anchor styled as a Button. */\n href?: string;\n /**\n * Controls the styling of the Button.\n * @default 'secondary'\n */\n variant?: 'primary' | 'secondary' | 'simple' | 'link' | 'text';\n /**\n * Controls the behavior of a Button within a Form.\n * @default 'button'\n */\n type?: 'button' | 'reset' | 'submit';\n /**\n * Set the Icon prop to `true` if you're using just an Icon in your Button. Make sure to pass an Icon as children if `true`.\n * @default false\n */\n icon?: boolean;\n /**\n * Used for a smaller sized button.\n * @default false\n */\n compact?: boolean;\n /** The label text will be used inside a Tooltip. */\n label?: string;\n /** The aria label text will be inserted as the aria-label on the Button. */\n 'aria-label'?: string;\n /**\n * Applies visual disabled styles without disabling the button element itself.\n * @default false\n */\n 'aria-disabled'?: boolean | 'true' | 'false';\n /**\n * Optionally renders an indeterminate progress indicator in a button.\n * @default false\n */\n loading?: boolean;\n /** Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\ntype ButtonPropsWithDefaults = PropsWithDefaults<\n ButtonProps,\n 'variant' | 'type' | 'disabled' | 'icon' | 'loading'\n>;\n\nconst baseStyles = (theme: DefaultTheme) => {\n const {\n base: {\n spacing,\n animation: {\n speed,\n timing: { ease }\n },\n 'disabled-opacity': disabledOpacity\n },\n components: {\n button: { 'focus-shadow': focusShadow }\n }\n } = theme;\n\n return css`\n text-decoration: none;\n transition-property: background-color, color, border-color, box-shadow, translate;\n transition-duration: calc(0.5 * ${speed});\n transition-timing-function: ${ease};\n cursor: pointer;\n\n @media (forced-colors: none) {\n outline: none;\n }\n\n & + & {\n margin-inline-start: ${spacing};\n }\n\n /* Not able to combine with selector above. Stylis bug? */\n\n & + ${StyledPopover} + & {\n margin-inline-start: ${spacing};\n }\n\n &:disabled,\n &[disabled] {\n opacity: ${disabledOpacity};\n cursor: not-allowed;\n pointer-events: none;\n }\n\n &[aria-disabled='true'] {\n opacity: ${disabledOpacity};\n }\n\n &:not([disabled], [aria-disabled='true']):focus-visible,\n &:enabled:not([aria-disabled='true']):focus-visible {\n box-shadow: ${focusShadow};\n }\n `;\n};\n\n/* If the background color is not provided, the color will be used for the hover and active styles */\nconst getFilledButtonStyles = (color: string, backgroundColor?: string) => ({\n contrastColor: backgroundColor ? color : tryCatch(() => readableColor(color)),\n hoverColors: getHoverColors(backgroundColor || color),\n activeColors: getActiveColors(backgroundColor || color)\n});\n\nconst getOutlinedButtonStyles = (color: string, backgroundColor: string) => {\n // If the background color is not solid, use the readable color for the text\n const fallbackBackground = isSolidColor(backgroundColor) ? backgroundColor : readableColor(color);\n const backgroundUsable = tryCatch(() => meetsContrastGuidelines(color, fallbackBackground).AA);\n const usableColor = backgroundUsable ? color : readableHue(color, backgroundColor);\n const hoverBackgroundColor = tryCatch(() => mix(0.9, backgroundColor, color));\n const activeBackgroundColor = tryCatch(() => mix(0.8, backgroundColor, usableColor));\n\n return {\n textColor: backgroundUsable ? color : readableColor(color),\n hoverBg: hoverBackgroundColor,\n hoverFg: readableHue(color, hoverBackgroundColor ?? 'transparent'),\n activeBg: tryCatch(() => mix(0.8, backgroundColor, usableColor)),\n activeFg: readableHue(usableColor, activeBackgroundColor ?? 'transparent')\n };\n};\n\nexport const StyledButton = styled.button.withConfig(omitProps('loading'))<ButtonPropsWithDefaults>(\n ({ variant, icon, loading, compact, theme }) => {\n const {\n base: {\n spacing,\n 'border-radius': baseBorderRadius,\n palette: { 'primary-background': backgroundColor },\n 'hit-area': {\n 'mouse-min': hitAreaMouse,\n 'finger-min': hitAreaFinger,\n 'compact-min': hitAreaCompact\n },\n animation: { speed }\n },\n components: {\n button: {\n color,\n height,\n 'foreground-color': foregroundColor,\n 'secondary-color': secondaryColor,\n 'secondary-fill-style': fillStyle,\n padding,\n 'border-radius': borderRadius,\n 'border-width': borderWidth,\n touch: { padding: touchPadding }\n }\n }\n } = theme;\n\n // Base\n const base = baseStyles(theme);\n\n // Non-text base\n const nonTextual = css`\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: ${hitAreaMouse};\n min-width: ${hitAreaMouse};\n border: ${borderWidth} solid transparent;\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n -webkit-user-select: none;\n user-select: none;\n white-space: nowrap;\n\n ${!icon &&\n css`\n padding: ${padding};\n `}\n\n ${icon &&\n css`\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n > svg {\n display: block;\n }\n `}\n\n ${!icon &&\n !compact &&\n css`\n min-height: ${height};\n `}\n\n ${compact &&\n css`\n min-height: ${hitAreaCompact};\n min-width: ${hitAreaCompact};\n `}\n\n @media (pointer: coarse) {\n border-radius: calc(${baseBorderRadius} * ${borderRadius});\n\n ${!compact &&\n css`\n min-height: ${icon ? `${hitAreaFinger}` : `max(${hitAreaFinger}, ${height})`};\n min-width: ${hitAreaFinger};\n `}\n\n ${!icon &&\n css`\n padding: ${touchPadding};\n `}\n }\n\n &:active {\n translate: 0 0.0625rem;\n }\n `;\n\n // Primary and Secondary-filled\n /* For primary button, use the foreground color as the text color. If foreground is 'auto', then calculate based on background\n For secondary button, always use the secondary color */\n const { contrastColor, hoverColors, activeColors } =\n variant !== 'primary' || foregroundColor === 'auto'\n ? getFilledButtonStyles(variant === 'primary' ? color : secondaryColor)\n : getFilledButtonStyles(foregroundColor, color);\n\n const solidButtonStyles = css`\n --button-background-color: ${variant === 'primary' ? color : secondaryColor};\n color: ${contrastColor};\n background-color: ${variant === 'primary' ? color : secondaryColor};\n\n @media (hover: hover) {\n &:hover {\n background-color: ${hoverColors.background};\n text-decoration: none;\n }\n }\n\n &:active {\n background-color: ${activeColors.background};\n color: ${activeColors.foreground};\n text-decoration: none;\n }\n `;\n\n // Secondary-outline\n const secondaryOutlineButtonStyles = getOutlinedButtonStyles(secondaryColor, backgroundColor);\n const secondary = css`\n --button-background-color: ${backgroundColor};\n color: ${secondaryOutlineButtonStyles.textColor};\n background-color: ${backgroundColor};\n border-color: ${secondaryColor};\n\n @media (hover: hover) {\n &:hover {\n background-color: ${secondaryOutlineButtonStyles.hoverBg};\n text-decoration: none;\n }\n }\n\n &:active {\n color: ${secondaryOutlineButtonStyles.activeFg};\n background-color: ${secondaryOutlineButtonStyles.activeBg};\n border-color: ${secondaryOutlineButtonStyles.activeFg};\n text-decoration: none;\n }\n `;\n\n // Simple\n const simpleButtonStyles = getOutlinedButtonStyles(\n fillStyle === 'outline' ? secondaryColor : color,\n backgroundColor\n );\n const simple = css`\n --button-background-color: ${icon ? 'transparent' : backgroundColor};\n color: ${icon ? 'currentColor' : simpleButtonStyles.textColor};\n background-color: ${icon ? 'transparent' : backgroundColor};\n\n @media (hover: hover) {\n &:hover {\n ${icon &&\n css`\n &::before {\n content: '';\n position: absolute;\n top: calc(${borderWidth} * -1);\n bottom: calc(${borderWidth} * -1);\n left: calc(${borderWidth} * -1);\n right: calc(${borderWidth} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.1;\n }\n `}\n\n ${!icon &&\n css`\n background-color: ${simpleButtonStyles.hoverBg};\n color: ${simpleButtonStyles.hoverFg};\n border-color: ${simpleButtonStyles.hoverFg};\n text-decoration: none;\n `}\n }\n\n &:active {\n ${icon &&\n css`\n &::before {\n content: '';\n position: absolute;\n top: calc(${borderWidth} * -1);\n bottom: calc(${borderWidth} * -1);\n left: calc(${borderWidth} * -1);\n right: calc(${borderWidth} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.2;\n }\n `}\n\n ${!icon &&\n css`\n background-color: ${simpleButtonStyles.activeBg};\n color: ${simpleButtonStyles.activeFg};\n border-color: ${simpleButtonStyles.activeFg};\n text-decoration: none;\n `}\n }\n }\n `;\n\n return css`\n ${base}\n ${nonTextual}\n ${(variant === 'primary' || (variant === 'secondary' && fillStyle === 'fill')) &&\n solidButtonStyles}\n ${variant === 'secondary' && fillStyle === 'outline' && secondary}\n ${variant === 'simple' && simple}\n ${variant === 'primary' &&\n css`\n font-weight: ${theme.base['font-weight']['semi-bold']};\n `}\n\n ${loading &&\n css`\n ${StyledBackdrop} {\n background-color: var(--button-background-color);\n border-radius: inherit;\n }\n\n ${StyledProgressRing} {\n width: 1em;\n height: 1em;\n\n ${!icon &&\n css`\n margin-inline-end: calc(${spacing} / 2);\n `}\n circle:nth-child(2) {\n animation-duration: calc(${speed} * 2);\n }\n }\n `}\n `;\n }\n);\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport const StyledButtonLink = styled.a.withConfig(omitProps('loading'))<\n Pick<ButtonPropsWithDefaults, 'variant' | 'href'> &\n // Needed for omitProps\n Pick<ButtonProps, 'loading'>\n>(({ theme, variant, href }) => {\n const {\n base: {\n palette: { 'foreground-color': textVariantColor }\n },\n components: {\n button: { color: primaryColor, 'secondary-fill-style': fillStyle },\n link: { color: linkColor }\n }\n } = theme;\n\n let linkVariantColor = linkColor;\n if (!href && fillStyle === 'solid') {\n linkVariantColor = primaryColor;\n }\n const { background: activeLinkColor } = getActiveColors(linkVariantColor);\n const { background: activeTextColor } = getActiveColors(textVariantColor);\n\n const base = baseStyles(theme);\n\n const textual = css`\n background-color: transparent;\n display: inline;\n text-align: start;\n border: none;\n\n @media (hover: hover) {\n &:hover {\n text-decoration: underline;\n }\n }\n\n > ${StyledIcon} {\n vertical-align: bottom;\n }\n `;\n\n const link = css`\n color: ${linkVariantColor};\n\n &:active {\n color: ${activeLinkColor};\n }\n `;\n\n const text = css`\n color: ${textVariantColor};\n\n &:active {\n color: ${activeTextColor};\n }\n `;\n\n return css`\n ${base}\n ${textual}\n ${variant === 'link' && link}\n ${variant === 'text' && text}\n `;\n});\n\nStyledButtonLink.defaultProps = defaultThemeProp;\n\nconst Button: ForwardRefForwardPropsComponent<ButtonProps> = forwardRef(function Button(\n {\n variant = 'secondary',\n type = 'button',\n disabled = false,\n icon = false,\n compact = false,\n href,\n as,\n forwardedAs,\n label,\n 'aria-label': ariaLabel,\n 'aria-disabled': ariaDisabled,\n loading = false,\n children,\n className,\n ...restProps\n }: PropsWithoutRef<ButtonProps> & ForwardProps,\n ref: ButtonProps['ref']\n) {\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement | HTMLAnchorElement>();\n const mouseDownEvent = useRef<ReactMouseEvent>();\n const mouseDownPosition = useRef<DOMRect>();\n const mouseDownTimestamp = useRef<number>();\n const buttonRef = useConsolidatedRef(ref, setButtonEl);\n const isTextual = ['link', 'text'].includes(variant);\n const showProgress = loading && !isTextual;\n const StyledComp: React.ElementType = isTextual ? StyledButtonLink : StyledButton;\n\n const handleClickWithElementShift = (e: MouseEvent) => {\n if (\n buttonRef.current &&\n mouseDownPosition.current &&\n mouseDownTimestamp.current &&\n isPositionWithinRect({ x: e.clientX, y: e.clientY }, mouseDownPosition.current) &&\n Date.now() - mouseDownTimestamp.current < 500\n ) {\n // Only click if the button is still the topmost element at its own position.\n // If something has rendered over the button between mousedown and mouseup,\n // elementFromPoint will return that — not the button — and we should not trigger a click.\n const { x, y, width, height } = buttonRef.current.getBoundingClientRect();\n const elementAtPoint = document.elementFromPoint(x + width / 2, y + height / 2);\n if (buttonRef.current.contains(elementAtPoint) || elementAtPoint === buttonRef.current) {\n buttonRef.current.click();\n }\n }\n };\n\n useEffect(() => {\n document.addEventListener('mouseup', handleClickWithElementShift);\n\n return () => {\n document.removeEventListener('mouseup', handleClickWithElementShift);\n mouseDownEvent.current = undefined;\n mouseDownPosition.current = undefined;\n mouseDownTimestamp.current = undefined;\n };\n }, []);\n\n return (\n <>\n <StyledComp\n {...restProps}\n ref={buttonRef}\n as={as || (href ? 'a' : 'button')}\n forwardedAs={forwardedAs || (href ? 'a' : 'button')}\n className={createClassName('button', className, { variant, icon, compact, loading })}\n variant={variant}\n icon={icon}\n compact={compact}\n type={href ? undefined : type}\n href={href}\n disabled={disabled && !href}\n aria-disabled={ariaDisabled}\n loading={showProgress}\n aria-label={ariaLabel || label}\n onMouseDown={(e: ReactMouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n (restProps.onMouseDown as MouseEventHandler | undefined)?.(e);\n e.persist();\n mouseDownEvent.current = e;\n mouseDownPosition.current = e.currentTarget.getBoundingClientRect();\n mouseDownTimestamp.current = Date.now();\n }}\n onMouseUp={(e: ReactMouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n const shouldFocus = mouseDownEvent.current && !mouseDownEvent.current.defaultPrevented;\n mouseDownEvent.current = undefined;\n mouseDownPosition.current = undefined;\n mouseDownTimestamp.current = undefined;\n\n if (shouldFocus && buttonRef.current !== document.activeElement) {\n buttonRef.current?.focus();\n }\n\n return (restProps.onMouseUp as MouseEventHandler | undefined)?.(e);\n }}\n >\n {showProgress && <Progress variant='ring' placement='inline' />}\n {!icon || !showProgress ? children : null}\n </StyledComp>\n\n {buttonEl && label && (\n <Tooltip target={buttonEl} showDelay='none' hideDelay='none' describeTarget={false}>\n {label}\n </Tooltip>\n )}\n </>\n );\n});\n\nexport default Button;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;;;;AAQlD,
|
|
1
|
+
{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;;;;AAQlD,wBAuXE"}
|
|
@@ -155,7 +155,7 @@ export default withTestIds(forwardRef(function ComboBox(props, ref) {
|
|
|
155
155
|
// Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.
|
|
156
156
|
// The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.
|
|
157
157
|
const inputActions = (_jsxs(_Fragment, { children: [dropdownButton, actions] }));
|
|
158
|
-
const Comp = (_jsxs(StyledComboBox, { ref: containerRef, as: StyledFormControl, id: `${id}-combobox`, "data-testid": label ? undefined : testIds.root, children: [_jsx(ComboBoxInput, { "data-testid": testIds.control, ref: inputRef, role: 'combobox', "aria-autocomplete": 'list', "aria-expanded": !readOnly && !disabled && open, "aria-controls": open && menu !== undefined && !pauseMenuDescendantEvaluation ? listId : undefined, "aria-haspopup": 'listbox', "aria-describedby": ariaDescribedBy, className: createClassName('combo-box', className, { mode }), selected: selected?.items, spellCheck: false, id: id, readOnly: readOnly, disabled: disabled, onChange: onChange, value: value, mode: mode, status: status, onResolveSuggestion: onResolveSuggestion, actions: inputActions, visual: visual, onRemove: selected?.onRemove, onClick: onInputClick, onKeyDown: onInputKeyDown, required: required, pauseDescendantEvaluation: pauseSelectedDescendantEvaluation, onSelectedFocus: () => {
|
|
158
|
+
const Comp = (_jsxs(StyledComboBox, { ref: containerRef, as: StyledFormControl, id: `${id}-combobox`, "data-testid": label ? undefined : testIds.root, children: [_jsx(ComboBoxInput, { "data-testid": testIds.control, ref: inputRef, role: 'combobox', "aria-autocomplete": 'list', "aria-expanded": !readOnly && !disabled && open, "aria-controls": open && menu !== undefined && !pauseMenuDescendantEvaluation ? listId : undefined, "aria-haspopup": 'listbox', "aria-describedby": ariaDescribedBy, className: createClassName('combo-box', className, { mode }), selected: selected?.items, loading: selected?.loading, spellCheck: false, id: id, readOnly: readOnly, disabled: disabled, onChange: onChange, value: value, mode: mode, status: status, onResolveSuggestion: onResolveSuggestion, actions: inputActions, visual: visual, onRemove: selected?.onRemove, onClick: onInputClick, onKeyDown: onInputKeyDown, required: required, pauseDescendantEvaluation: pauseSelectedDescendantEvaluation, onSelectedFocus: () => {
|
|
159
159
|
toggleSelectedDescendantsActive(true);
|
|
160
160
|
}, onSelectedBlur: () => {
|
|
161
161
|
toggleSelectedDescendantsActive(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport type {\n KeyboardEvent as ReactKeyboardEvent,\n PropsWithoutRef,\n MutableRefObject,\n MouseEvent\n} from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport * as caretUpIcon from '../Icon/icons/caret-up.icon';\nimport type { RefElement } from '../../types';\nimport {\n useConsolidatedRef,\n useFocusWithin,\n useI18n,\n useUID,\n useElement,\n useDirection,\n useTestIds,\n useEscape\n} from '../../hooks';\nimport Popover from '../Popover';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport Menu from '../Menu';\nimport type { MenuProps } from '../Menu';\nimport { navigatorIsAvailable, withTestIds, getFocusables, createClassName } from '../../utils';\nimport menuHelpers from '../Menu/helpers';\nimport { fitToContent } from '../Popover/modifiers';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport ComboBoxInput from './ComboBoxInput';\nimport type ComboBoxProps from './ComboBox.types';\nimport { StyledComboBox, StyledDropdownButton } from './ComboBox.styles';\nimport { getComboBoxTestIds } from './ComboxBox.test-ids';\n\nregisterIcon(caretDownIcon, caretUpIcon);\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\nexport default withTestIds(\n forwardRef<RefElement<ComboBoxProps>, PropsWithoutRef<ComboBoxProps>>(\n function ComboBox(props, ref) {\n const uid = useUID();\n const {\n testId,\n additionalInfo,\n value,\n required,\n id = uid,\n label,\n labelHidden,\n info,\n status,\n readOnly,\n disabled,\n mode = 'single-select',\n selected,\n onChange,\n actions,\n onFocus,\n onBlur,\n onResolveSuggestion,\n onDropdownButtonClick: onDropdownButtonClickProp,\n onMenuOpen,\n onClick,\n onKeyDown,\n menu,\n visual,\n className,\n handle,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getComboBoxTestIds);\n const bodyRef = useRef<Element>(document.body);\n\n const [pauseMenuDescendantEvaluation, setPauseMenuDescendantEvaluation] = useState(true);\n const [pauseSelectedDescendantEvaluation, setPauseSelectedDescendantEvaluation] =\n useState(false);\n const t = useI18n();\n const listId = `${id}-list`;\n const inputRef = useRef<HTMLInputElement>(null);\n const popoverRef = useRef<HTMLDivElement>(null);\n const [open, setOpen] = useState(false);\n const menuRef: MenuProps['ref'] = useRef(null);\n const menuComponentId = `${id}-listbox`;\n const { start } = useDirection();\n\n // Force a re-render to make sure useFocusWithin has valid elements to set listeners on.\n const [, setContainerEl] = useElement();\n const containerRef = useConsolidatedRef<HTMLDivElement>(ref, setContainerEl);\n\n const toggleMenuDescendantsActive = useCallback((bool: boolean) => {\n setPauseMenuDescendantEvaluation(!bool);\n setPauseSelectedDescendantEvaluation(bool);\n }, []);\n\n const toggleSelectedDescendantsActive = useCallback((bool: boolean) => {\n setPauseSelectedDescendantEvaluation(!bool);\n setPauseMenuDescendantEvaluation(bool);\n }, []);\n\n const focus = useFocusWithin([containerRef, popoverRef], focused => {\n if (!focused) {\n setOpen(false);\n toggleMenuDescendantsActive(false);\n onBlur?.(selected?.items);\n } else {\n onFocus?.(selected?.items);\n if (isMobile) {\n setTimeout(() => {\n containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }, 150); // delay it to let keyboard expand first\n }\n }\n });\n\n const handleEscape = useCallback(\n (e: KeyboardEvent) => {\n e.preventDefault();\n if (open) {\n e.stopPropagation();\n setOpen(false);\n toggleMenuDescendantsActive(false);\n }\n },\n [open]\n );\n\n useEscape(handleEscape, containerRef, [handleEscape]);\n\n useImperativeHandle(handle, () => ({\n focusInput: () => {\n inputRef.current?.focus();\n }\n }));\n\n const onInputKeyDown = useCallback(\n (e: ReactKeyboardEvent<HTMLInputElement>) => {\n if (!menu || readOnly) return;\n if (onKeyDown?.(e) === false) {\n return;\n }\n\n switch (e.key) {\n case 'ArrowUp':\n if (e.altKey) {\n e.preventDefault();\n if (open) {\n setOpen(false);\n toggleMenuDescendantsActive(false);\n }\n }\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (!open) {\n setOpen(true);\n toggleMenuDescendantsActive(true);\n }\n break;\n case 'Tab': {\n const forward = !e.shiftKey;\n\n if (forward) {\n const popoverFocusables = getFocusables(popoverRef);\n\n if (popoverFocusables.length) {\n e.preventDefault();\n popoverFocusables[0].focus();\n break;\n }\n }\n\n setOpen(false);\n toggleMenuDescendantsActive(false);\n\n break;\n }\n default:\n }\n },\n [open, readOnly, menu, value, onKeyDown]\n );\n\n const onDropdownButtonClick = useCallback(() => {\n onDropdownButtonClickProp?.(!open);\n setOpen(!open);\n }, [open, onDropdownButtonClickProp]);\n\n const dropdownButton = useMemo(() => {\n return (menu?.items || onDropdownButtonClickProp || !onChange) && !readOnly ? (\n <StyledDropdownButton\n aria-label={t(\n open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'\n )}\n icon\n variant='simple'\n onClick={onDropdownButtonClick}\n onMouseDown={(e: MouseEvent) => {\n e.preventDefault();\n inputRef.current?.focus();\n }}\n disabled={disabled}\n tabIndex='-1'\n >\n <Icon name={open ? 'caret-up' : 'caret-down'} />\n </StyledDropdownButton>\n ) : null;\n }, [onDropdownButtonClick, onChange, readOnly, open, disabled]);\n\n const ariaDescribedBy = useMemo(() => {\n let idString = `${id}-inputDescription`;\n\n if (info) {\n idString = idString.concat(` ${id}-info`);\n }\n if (onChange) {\n idString = idString.concat(` ${id}-searchDescription`);\n }\n if (mode === 'multi-select') {\n idString = idString.concat(` ${id}-multiselectDescription`);\n }\n\n return idString;\n }, [info, id, mode, onChange]);\n\n const onInputClick = useCallback(\n (e: MouseEvent<HTMLInputElement>) => {\n if (readOnly) return;\n setOpen(true);\n toggleMenuDescendantsActive(true);\n onClick?.(e);\n },\n [readOnly, onClick]\n );\n\n useEffect(() => {\n if (focus && menu && value && value.length > 0) {\n setOpen(true);\n toggleMenuDescendantsActive(true);\n }\n }, [menu, value, focus]);\n\n useEffect(() => {\n if (open) onMenuOpen?.();\n }, [open]);\n\n // Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.\n // The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.\n const inputActions = (\n <>\n {dropdownButton}\n {actions}\n </>\n );\n\n const Comp = (\n <StyledComboBox\n ref={containerRef}\n as={StyledFormControl}\n id={`${id}-combobox`}\n data-testid={label ? undefined : testIds.root}\n >\n <ComboBoxInput\n data-testid={testIds.control}\n ref={inputRef}\n role='combobox'\n aria-autocomplete='list'\n aria-expanded={!readOnly && !disabled && open}\n aria-controls={\n open && menu !== undefined && !pauseMenuDescendantEvaluation ? listId : undefined\n }\n aria-haspopup='listbox'\n aria-describedby={ariaDescribedBy}\n className={createClassName('combo-box', className, { mode })}\n selected={selected?.items}\n spellCheck={false}\n id={id}\n readOnly={readOnly}\n disabled={disabled}\n onChange={onChange}\n value={value}\n mode={mode}\n status={status}\n onResolveSuggestion={onResolveSuggestion}\n actions={inputActions}\n visual={visual}\n onRemove={selected?.onRemove}\n onClick={onInputClick}\n onKeyDown={onInputKeyDown}\n required={required}\n pauseDescendantEvaluation={pauseSelectedDescendantEvaluation}\n onSelectedFocus={() => {\n toggleSelectedDescendantsActive(true);\n }}\n onSelectedBlur={() => {\n toggleSelectedDescendantsActive(false);\n }}\n {...restProps}\n />\n\n <Popover\n hideOnTargetHidden\n ref={popoverRef}\n show={open && menu !== undefined}\n target={containerRef.current}\n placement='bottom-start'\n modifiers={[fitToContent]}\n // FIXME: Removed absolute strategy for mobile to avoid overflow issues.\n strategy='fixed'\n onMouseDown={(e: MouseEvent) => e.preventDefault()}\n onKeyDown={(e: KeyboardEvent) => {\n if (!inputRef.current) return;\n\n if (e.key === 'Tab') {\n const popoverFocusables = getFocusables(popoverRef);\n const currentIndex = popoverFocusables.indexOf(e.target as HTMLElement);\n const forward = !e.shiftKey;\n const isLast = currentIndex === popoverFocusables.length - 1;\n\n if (forward && isLast) {\n e.preventDefault();\n const allFocusable = getFocusables(bodyRef as MutableRefObject<HTMLElement>);\n const nextIndex = allFocusable.indexOf(inputRef.current) + 1;\n\n allFocusable[nextIndex]?.focus();\n setOpen(false);\n toggleMenuDescendantsActive(false);\n } else if (!forward && currentIndex === 0) {\n e.preventDefault();\n inputRef.current.focus();\n }\n }\n if (e.key === 'Escape') {\n handleEscape(e);\n inputRef.current.focus();\n }\n }}\n >\n {menu && (\n <Menu\n ref={menuRef}\n listId={listId}\n id={menuComponentId}\n role='listbox'\n mode={mode}\n {...menu}\n items={menu.items}\n focusControlEl={inputRef.current || undefined}\n onItemClick={(itemId, e) => {\n if (mode === 'single-select') {\n setOpen(false);\n toggleMenuDescendantsActive(true);\n }\n menu.onItemClick?.(itemId, e);\n\n const clickedItem = menuHelpers.getItem(menu.items, itemId);\n\n if (clickedItem?.primary && !clickedItem?.selected) {\n selected?.onNew?.(clickedItem?.primary);\n }\n }}\n aria-label={t('menu_option_list')}\n pauseDescendantEvaluation={pauseMenuDescendantEvaluation}\n arrowNavigationUnsupported\n cycle={false}\n />\n )}\n </Popover>\n </StyledComboBox>\n );\n\n return (\n <>\n {label ? (\n <FormField\n testId={testIds}\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n readOnly={readOnly}\n status={status}\n required={required}\n disabled={disabled}\n onResolveSuggestion={onResolveSuggestion}\n additionalInfo={additionalInfo}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n )}\n <VisuallyHiddenText id={`${id}-inputDescription`} aria-hidden>\n {`${t('combobox_open_close')} `}\n </VisuallyHiddenText>\n <VisuallyHiddenText id={`${id}-searchDescription`} aria-hidden>\n {t('combobox_search_instructions')}\n </VisuallyHiddenText>\n <VisuallyHiddenText id={`${id}-multiselectDescription`} aria-hidden>\n {t(\n Array.isArray(selected?.items) && selected.items.some(item => item.primary)\n ? 'multiselect_instructions_with_links'\n : 'multiselect_instructions',\n [start]\n )}\n </VisuallyHiddenText>\n </>\n );\n }\n ),\n getComboBoxTestIds\n);\n"]}
|
|
1
|
+
{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport type {\n KeyboardEvent as ReactKeyboardEvent,\n PropsWithoutRef,\n MutableRefObject,\n MouseEvent\n} from 'react';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport * as caretUpIcon from '../Icon/icons/caret-up.icon';\nimport type { RefElement } from '../../types';\nimport {\n useConsolidatedRef,\n useFocusWithin,\n useI18n,\n useUID,\n useElement,\n useDirection,\n useTestIds,\n useEscape\n} from '../../hooks';\nimport Popover from '../Popover';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport Menu from '../Menu';\nimport type { MenuProps } from '../Menu';\nimport { navigatorIsAvailable, withTestIds, getFocusables, createClassName } from '../../utils';\nimport menuHelpers from '../Menu/helpers';\nimport { fitToContent } from '../Popover/modifiers';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport ComboBoxInput from './ComboBoxInput';\nimport type ComboBoxProps from './ComboBox.types';\nimport { StyledComboBox, StyledDropdownButton } from './ComboBox.styles';\nimport { getComboBoxTestIds } from './ComboxBox.test-ids';\n\nregisterIcon(caretDownIcon, caretUpIcon);\n\nconst isMobile = navigatorIsAvailable && navigator.userAgent.includes('Mobile');\n\nexport default withTestIds(\n forwardRef<RefElement<ComboBoxProps>, PropsWithoutRef<ComboBoxProps>>(\n function ComboBox(props, ref) {\n const uid = useUID();\n const {\n testId,\n additionalInfo,\n value,\n required,\n id = uid,\n label,\n labelHidden,\n info,\n status,\n readOnly,\n disabled,\n mode = 'single-select',\n selected,\n onChange,\n actions,\n onFocus,\n onBlur,\n onResolveSuggestion,\n onDropdownButtonClick: onDropdownButtonClickProp,\n onMenuOpen,\n onClick,\n onKeyDown,\n menu,\n visual,\n className,\n handle,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getComboBoxTestIds);\n const bodyRef = useRef<Element>(document.body);\n\n const [pauseMenuDescendantEvaluation, setPauseMenuDescendantEvaluation] = useState(true);\n const [pauseSelectedDescendantEvaluation, setPauseSelectedDescendantEvaluation] =\n useState(false);\n const t = useI18n();\n const listId = `${id}-list`;\n const inputRef = useRef<HTMLInputElement>(null);\n const popoverRef = useRef<HTMLDivElement>(null);\n const [open, setOpen] = useState(false);\n const menuRef: MenuProps['ref'] = useRef(null);\n const menuComponentId = `${id}-listbox`;\n const { start } = useDirection();\n\n // Force a re-render to make sure useFocusWithin has valid elements to set listeners on.\n const [, setContainerEl] = useElement();\n const containerRef = useConsolidatedRef<HTMLDivElement>(ref, setContainerEl);\n\n const toggleMenuDescendantsActive = useCallback((bool: boolean) => {\n setPauseMenuDescendantEvaluation(!bool);\n setPauseSelectedDescendantEvaluation(bool);\n }, []);\n\n const toggleSelectedDescendantsActive = useCallback((bool: boolean) => {\n setPauseSelectedDescendantEvaluation(!bool);\n setPauseMenuDescendantEvaluation(bool);\n }, []);\n\n const focus = useFocusWithin([containerRef, popoverRef], focused => {\n if (!focused) {\n setOpen(false);\n toggleMenuDescendantsActive(false);\n onBlur?.(selected?.items);\n } else {\n onFocus?.(selected?.items);\n if (isMobile) {\n setTimeout(() => {\n containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }, 150); // delay it to let keyboard expand first\n }\n }\n });\n\n const handleEscape = useCallback(\n (e: KeyboardEvent) => {\n e.preventDefault();\n if (open) {\n e.stopPropagation();\n setOpen(false);\n toggleMenuDescendantsActive(false);\n }\n },\n [open]\n );\n\n useEscape(handleEscape, containerRef, [handleEscape]);\n\n useImperativeHandle(handle, () => ({\n focusInput: () => {\n inputRef.current?.focus();\n }\n }));\n\n const onInputKeyDown = useCallback(\n (e: ReactKeyboardEvent<HTMLInputElement>) => {\n if (!menu || readOnly) return;\n if (onKeyDown?.(e) === false) {\n return;\n }\n\n switch (e.key) {\n case 'ArrowUp':\n if (e.altKey) {\n e.preventDefault();\n if (open) {\n setOpen(false);\n toggleMenuDescendantsActive(false);\n }\n }\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (!open) {\n setOpen(true);\n toggleMenuDescendantsActive(true);\n }\n break;\n case 'Tab': {\n const forward = !e.shiftKey;\n\n if (forward) {\n const popoverFocusables = getFocusables(popoverRef);\n\n if (popoverFocusables.length) {\n e.preventDefault();\n popoverFocusables[0].focus();\n break;\n }\n }\n\n setOpen(false);\n toggleMenuDescendantsActive(false);\n\n break;\n }\n default:\n }\n },\n [open, readOnly, menu, value, onKeyDown]\n );\n\n const onDropdownButtonClick = useCallback(() => {\n onDropdownButtonClickProp?.(!open);\n setOpen(!open);\n }, [open, onDropdownButtonClickProp]);\n\n const dropdownButton = useMemo(() => {\n return (menu?.items || onDropdownButtonClickProp || !onChange) && !readOnly ? (\n <StyledDropdownButton\n aria-label={t(\n open ? 'combobox_close_list_button_a11y' : 'combobox_open_list_button_a11y'\n )}\n icon\n variant='simple'\n onClick={onDropdownButtonClick}\n onMouseDown={(e: MouseEvent) => {\n e.preventDefault();\n inputRef.current?.focus();\n }}\n disabled={disabled}\n tabIndex='-1'\n >\n <Icon name={open ? 'caret-up' : 'caret-down'} />\n </StyledDropdownButton>\n ) : null;\n }, [onDropdownButtonClick, onChange, readOnly, open, disabled]);\n\n const ariaDescribedBy = useMemo(() => {\n let idString = `${id}-inputDescription`;\n\n if (info) {\n idString = idString.concat(` ${id}-info`);\n }\n if (onChange) {\n idString = idString.concat(` ${id}-searchDescription`);\n }\n if (mode === 'multi-select') {\n idString = idString.concat(` ${id}-multiselectDescription`);\n }\n\n return idString;\n }, [info, id, mode, onChange]);\n\n const onInputClick = useCallback(\n (e: MouseEvent<HTMLInputElement>) => {\n if (readOnly) return;\n setOpen(true);\n toggleMenuDescendantsActive(true);\n onClick?.(e);\n },\n [readOnly, onClick]\n );\n\n useEffect(() => {\n if (focus && menu && value && value.length > 0) {\n setOpen(true);\n toggleMenuDescendantsActive(true);\n }\n }, [menu, value, focus]);\n\n useEffect(() => {\n if (open) onMenuOpen?.();\n }, [open]);\n\n // Workaround for the following error from jsx-ast-utils, fixed in version 3.5.0.\n // The prop value with an expression type of JSXFragment could not be resolved. Please file issue to get this fixed immediately.\n const inputActions = (\n <>\n {dropdownButton}\n {actions}\n </>\n );\n\n const Comp = (\n <StyledComboBox\n ref={containerRef}\n as={StyledFormControl}\n id={`${id}-combobox`}\n data-testid={label ? undefined : testIds.root}\n >\n <ComboBoxInput\n data-testid={testIds.control}\n ref={inputRef}\n role='combobox'\n aria-autocomplete='list'\n aria-expanded={!readOnly && !disabled && open}\n aria-controls={\n open && menu !== undefined && !pauseMenuDescendantEvaluation ? listId : undefined\n }\n aria-haspopup='listbox'\n aria-describedby={ariaDescribedBy}\n className={createClassName('combo-box', className, { mode })}\n selected={selected?.items}\n loading={selected?.loading}\n spellCheck={false}\n id={id}\n readOnly={readOnly}\n disabled={disabled}\n onChange={onChange}\n value={value}\n mode={mode}\n status={status}\n onResolveSuggestion={onResolveSuggestion}\n actions={inputActions}\n visual={visual}\n onRemove={selected?.onRemove}\n onClick={onInputClick}\n onKeyDown={onInputKeyDown}\n required={required}\n pauseDescendantEvaluation={pauseSelectedDescendantEvaluation}\n onSelectedFocus={() => {\n toggleSelectedDescendantsActive(true);\n }}\n onSelectedBlur={() => {\n toggleSelectedDescendantsActive(false);\n }}\n {...restProps}\n />\n\n <Popover\n hideOnTargetHidden\n ref={popoverRef}\n show={open && menu !== undefined}\n target={containerRef.current}\n placement='bottom-start'\n modifiers={[fitToContent]}\n // FIXME: Removed absolute strategy for mobile to avoid overflow issues.\n strategy='fixed'\n onMouseDown={(e: MouseEvent) => e.preventDefault()}\n onKeyDown={(e: KeyboardEvent) => {\n if (!inputRef.current) return;\n\n if (e.key === 'Tab') {\n const popoverFocusables = getFocusables(popoverRef);\n const currentIndex = popoverFocusables.indexOf(e.target as HTMLElement);\n const forward = !e.shiftKey;\n const isLast = currentIndex === popoverFocusables.length - 1;\n\n if (forward && isLast) {\n e.preventDefault();\n const allFocusable = getFocusables(bodyRef as MutableRefObject<HTMLElement>);\n const nextIndex = allFocusable.indexOf(inputRef.current) + 1;\n\n allFocusable[nextIndex]?.focus();\n setOpen(false);\n toggleMenuDescendantsActive(false);\n } else if (!forward && currentIndex === 0) {\n e.preventDefault();\n inputRef.current.focus();\n }\n }\n if (e.key === 'Escape') {\n handleEscape(e);\n inputRef.current.focus();\n }\n }}\n >\n {menu && (\n <Menu\n ref={menuRef}\n listId={listId}\n id={menuComponentId}\n role='listbox'\n mode={mode}\n {...menu}\n items={menu.items}\n focusControlEl={inputRef.current || undefined}\n onItemClick={(itemId, e) => {\n if (mode === 'single-select') {\n setOpen(false);\n toggleMenuDescendantsActive(true);\n }\n menu.onItemClick?.(itemId, e);\n\n const clickedItem = menuHelpers.getItem(menu.items, itemId);\n\n if (clickedItem?.primary && !clickedItem?.selected) {\n selected?.onNew?.(clickedItem?.primary);\n }\n }}\n aria-label={t('menu_option_list')}\n pauseDescendantEvaluation={pauseMenuDescendantEvaluation}\n arrowNavigationUnsupported\n cycle={false}\n />\n )}\n </Popover>\n </StyledComboBox>\n );\n\n return (\n <>\n {label ? (\n <FormField\n testId={testIds}\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n readOnly={readOnly}\n status={status}\n required={required}\n disabled={disabled}\n onResolveSuggestion={onResolveSuggestion}\n additionalInfo={additionalInfo}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n )}\n <VisuallyHiddenText id={`${id}-inputDescription`} aria-hidden>\n {`${t('combobox_open_close')} `}\n </VisuallyHiddenText>\n <VisuallyHiddenText id={`${id}-searchDescription`} aria-hidden>\n {t('combobox_search_instructions')}\n </VisuallyHiddenText>\n <VisuallyHiddenText id={`${id}-multiselectDescription`} aria-hidden>\n {t(\n Array.isArray(selected?.items) && selected.items.some(item => item.primary)\n ? 'multiselect_instructions_with_links'\n : 'multiselect_instructions',\n [start]\n )}\n </VisuallyHiddenText>\n </>\n );\n }\n ),\n getComboBoxTestIds\n);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"
|
|
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"}
|
|
@@ -4,6 +4,8 @@ import Button from '../Button';
|
|
|
4
4
|
import { StyledFormControl } from '../FormControl';
|
|
5
5
|
import { StyledPopover } from '../Popover';
|
|
6
6
|
import { StyledMenu, StyledMenuListWrapper } from '../Menu/Menu.styles';
|
|
7
|
+
import { StyledBackdrop } from '../Backdrop';
|
|
8
|
+
import { StyledProgressRing } from '../Progress';
|
|
7
9
|
export const StyledDropdownButton = styled(Button)(({ theme }) => {
|
|
8
10
|
const baseBorderRadius = theme.base['border-radius'];
|
|
9
11
|
const formControlBorderRadius = theme.components['form-control']['border-radius'];
|
|
@@ -42,12 +44,22 @@ export const StyledSelectInput = styled.div(({ theme: { base, components } }) =>
|
|
|
42
44
|
min-height: ${base['hit-area']['finger-min']};
|
|
43
45
|
}
|
|
44
46
|
|
|
45
|
-
|
|
47
|
+
/*
|
|
48
|
+
FIXME
|
|
49
|
+
:not selectors needed to prevent greedy div selector affecting Progress styles.
|
|
50
|
+
Best if div could be more targeted to specific classes.
|
|
51
|
+
*/
|
|
52
|
+
div:not(${StyledBackdrop}, ${StyledBackdrop} div) {
|
|
46
53
|
min-height: calc(
|
|
47
54
|
${components.input.height} - 2 * ${components['form-control']['border-width']}
|
|
48
55
|
);
|
|
49
56
|
}
|
|
50
57
|
|
|
58
|
+
${StyledProgressRing} svg {
|
|
59
|
+
width: calc(${components.input.height} - 0.5rem);
|
|
60
|
+
height: calc(${components.input.height} - 0.5rem);
|
|
61
|
+
}
|
|
62
|
+
|
|
51
63
|
&:focus-within {
|
|
52
64
|
border-color: ${components['form-control'][':focus']['border-color']};
|
|
53
65
|
box-shadow: ${components['form-control'][':focus']['box-shadow']};
|
|
@@ -63,7 +75,7 @@ export const StyledSelectInput = styled.div(({ theme: { base, components } }) =>
|
|
|
63
75
|
height: calc(${components.input.height} - 2 * ${components['form-control']['border-width']});
|
|
64
76
|
color: ${components['form-control']['foreground-color']};
|
|
65
77
|
text-overflow: ellipsis;
|
|
66
|
-
|
|
78
|
+
padding-inline: ${base.spacing};
|
|
67
79
|
}
|
|
68
80
|
|
|
69
81
|
input,
|
|
@@ -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;
|
|
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"]}
|
|
@@ -29,6 +29,8 @@ type ComboBoxProps = WithAttributes<'input', TestIdProp & NoChildrenProp & {
|
|
|
29
29
|
items?: Selected | Selected[];
|
|
30
30
|
onRemove?: (id: MenuItemProps['id'], index: number) => void;
|
|
31
31
|
onNew?: (text: string) => void;
|
|
32
|
+
/** Show a Progress indicator. */
|
|
33
|
+
loading?: boolean;
|
|
32
34
|
};
|
|
33
35
|
/** Value of the combobox filtering input. */
|
|
34
36
|
value?: FormControlProps['value'];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.types.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,IAAI,kBAAkB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjF,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC9E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEnE,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,KAAK,aAAa,GAAG,cAAc,CACjC,OAAO,EACP,UAAU,GACR,cAAc,GAAG;IACf,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC;IACxC,sFAAsF;IACtF,QAAQ,CAAC,EAAE;QACT,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,CAAC;QAC9B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAC5D,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"ComboBox.types.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,IAAI,kBAAkB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjF,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC9E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEnE,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,KAAK,aAAa,GAAG,cAAc,CACjC,OAAO,EACP,UAAU,GACR,cAAc,GAAG;IACf,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC;IACxC,sFAAsF;IACtF,QAAQ,CAAC,EAAE;QACT,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,CAAC;QAC9B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAC5D,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;QAC/B,iCAAiC;QACjC,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC;IACF,6CAA6C;IAC7C,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,0DAA0D;IAC1D,OAAO,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,KAAK,IAAI,CAAC;IACrD;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,EAAE,KAAK,IAAI,CAAC;IACpD,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAC9D;;;;;;;OAOG;IACH,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,kBAAkB,KAAK,OAAO,GAAG,IAAI,CAAC;IACtD,wDAAwD;IACxD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yCAAyC;IACzC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mDAAmD;IACnD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,0CAA0C;IAC1C,MAAM,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;IAClC,gCAAgC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B,CACJ,CAAC;AAGF,YAAY,EAAE,aAAa,IAAI,OAAO,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.types.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode, KeyboardEvent as ReactKeyboardEvent, Ref } from 'react';\n\nimport type { NoChildrenProp, TestIdProp, WithAttributes } from '../../types';\nimport type { FormControlProps } from '../FormControl';\nimport type { MenuItemProps, MenuProps } from '../Menu/Menu.types';\n\nexport interface Selected {\n id: string;\n text: string;\n primary?: ReactNode;\n}\n\nexport interface ComboBoxHandleValue {\n focusInput: () => void;\n}\n\ntype ComboBoxProps = WithAttributes<\n 'input',\n TestIdProp &\n NoChildrenProp & {\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Visually hides the label region. */\n labelHidden?: FormControlProps['labelHidden'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n info?: FormControlProps['info'];\n /**\n * Whether it is single selection or multi selection combobox.\n * @default 'single-select'\n */\n mode?: 'single-select' | 'multi-select';\n /** Currently selected option, single for single-select, an array for multi-select. */\n selected?: {\n items?: Selected | Selected[];\n onRemove?: (id: MenuItemProps['id'], index: number) => void;\n onNew?: (text: string) => void;\n };\n /** Value of the combobox filtering input. */\n value?: FormControlProps['value'];\n /** Callback fired when the ComboBox input gains focus. */\n onFocus?: (selected?: Selected | Selected[]) => void;\n /**\n * Callback fired when the ComboBox looses focus within its containing element.\n * This is not specific to the input element.\n * Note, behavior will be enhanced in an upcoming release and the input will be the only focusable element.\n */\n onBlur?: (selected?: Selected | Selected[]) => void;\n /** Callback fired when AI suggestion is accepted/rejected */\n onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\n /**\n * Fired when the user clicks on the dropdown icon to initiate opening the menu.\n * If you want to offer default menu items without an input value, pass this function.\n * This function can be an appropriate time to fetch menu item data.\n * Remember to set the loading prop to true when fetching data for an empty list.\n *\n * @param open value defining whether the click opens or closes the menu\n */\n onDropdownButtonClick?: (open: boolean) => void;\n /** Fired when menu opens. */\n onMenuOpen?: () => void;\n /** Fired before running default component onKeyDown handler.\n * Returning `false` from this function prevents default onKeyDown handling.\n */\n onKeyDown?: (e: ReactKeyboardEvent) => boolean | void;\n /** Action Buttons that will render within the input. */\n actions?: ReactNode;\n /** Menu related props. @see MenuProps */\n menu?: MenuProps;\n /** A visual which represents the selected item. */\n visual?: ReactNode;\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n /** Imperative handle for the component */\n handle?: Ref<ComboBoxHandleValue>;\n /** Reference to the element. */\n ref?: Ref<HTMLDivElement>;\n }\n>;\n\n// eslint-disable-next-line no-restricted-exports\nexport type { ComboBoxProps as default };\n"]}
|
|
1
|
+
{"version":3,"file":"ComboBox.types.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode, KeyboardEvent as ReactKeyboardEvent, Ref } from 'react';\n\nimport type { NoChildrenProp, TestIdProp, WithAttributes } from '../../types';\nimport type { FormControlProps } from '../FormControl';\nimport type { MenuItemProps, MenuProps } from '../Menu/Menu.types';\n\nexport interface Selected {\n id: string;\n text: string;\n primary?: ReactNode;\n}\n\nexport interface ComboBoxHandleValue {\n focusInput: () => void;\n}\n\ntype ComboBoxProps = WithAttributes<\n 'input',\n TestIdProp &\n NoChildrenProp & {\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Visually hides the label region. */\n labelHidden?: FormControlProps['labelHidden'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n info?: FormControlProps['info'];\n /**\n * Whether it is single selection or multi selection combobox.\n * @default 'single-select'\n */\n mode?: 'single-select' | 'multi-select';\n /** Currently selected option, single for single-select, an array for multi-select. */\n selected?: {\n items?: Selected | Selected[];\n onRemove?: (id: MenuItemProps['id'], index: number) => void;\n onNew?: (text: string) => void;\n /** Show a Progress indicator. */\n loading?: boolean;\n };\n /** Value of the combobox filtering input. */\n value?: FormControlProps['value'];\n /** Callback fired when the ComboBox input gains focus. */\n onFocus?: (selected?: Selected | Selected[]) => void;\n /**\n * Callback fired when the ComboBox looses focus within its containing element.\n * This is not specific to the input element.\n * Note, behavior will be enhanced in an upcoming release and the input will be the only focusable element.\n */\n onBlur?: (selected?: Selected | Selected[]) => void;\n /** Callback fired when AI suggestion is accepted/rejected */\n onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\n /**\n * Fired when the user clicks on the dropdown icon to initiate opening the menu.\n * If you want to offer default menu items without an input value, pass this function.\n * This function can be an appropriate time to fetch menu item data.\n * Remember to set the loading prop to true when fetching data for an empty list.\n *\n * @param open value defining whether the click opens or closes the menu\n */\n onDropdownButtonClick?: (open: boolean) => void;\n /** Fired when menu opens. */\n onMenuOpen?: () => void;\n /** Fired before running default component onKeyDown handler.\n * Returning `false` from this function prevents default onKeyDown handling.\n */\n onKeyDown?: (e: ReactKeyboardEvent) => boolean | void;\n /** Action Buttons that will render within the input. */\n actions?: ReactNode;\n /** Menu related props. @see MenuProps */\n menu?: MenuProps;\n /** A visual which represents the selected item. */\n visual?: ReactNode;\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n /** Imperative handle for the component */\n handle?: Ref<ComboBoxHandleValue>;\n /** Reference to the element. */\n ref?: Ref<HTMLDivElement>;\n }\n>;\n\n// eslint-disable-next-line no-restricted-exports\nexport type { ComboBoxProps as default };\n"]}
|
|
@@ -7,6 +7,7 @@ import type { Selected } from './ComboBox.types';
|
|
|
7
7
|
interface ComboBoxInputProps extends BaseProps {
|
|
8
8
|
mode?: 'multi-select' | 'single-select';
|
|
9
9
|
selected?: Selected | Selected[];
|
|
10
|
+
loading?: boolean;
|
|
10
11
|
value?: ComboBoxProps['value'];
|
|
11
12
|
visual?: ComboBoxProps['visual'];
|
|
12
13
|
onRemove?: (id: MenuItemProps['id'], index: number) => void;
|
|
@@ -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,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;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 +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;
|
|
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 +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;
|
|
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,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useRef, useCallback, useMemo, useState, useEffect } from 'react';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
|
+
import Progress from '../../Progress';
|
|
4
5
|
import { defaultThemeProp } from '../../../theme';
|
|
5
6
|
import Selectable from '../../Badges/Selection';
|
|
6
7
|
import { StyledFormControl } from '../../FormControl';
|
|
@@ -23,8 +24,11 @@ export const StyledMultiSelectInput = styled(StyledSelectInput) `
|
|
|
23
24
|
}
|
|
24
25
|
`;
|
|
25
26
|
StyledMultiSelectInput.defaultProps = defaultThemeProp;
|
|
27
|
+
const StyledInputWrapper = styled(Flex) `
|
|
28
|
+
position: relative;
|
|
29
|
+
`;
|
|
26
30
|
const MultiSelectInput = forwardRef(function MultiSelectInput(props, ref) {
|
|
27
|
-
const { selected = [], value, onRemove, onChange, onKeyDown, onResolveSuggestion, actions, readOnly, disabled, status, placeholder, autoFocus, pauseDescendantEvaluation, onSelectedFocus, onSelectedBlur, 'aria-controls': ariaControls, required, ...restProps } = props;
|
|
31
|
+
const { selected = [], loading, value, onRemove, onChange, onKeyDown, onResolveSuggestion, actions, readOnly, disabled, status, placeholder, autoFocus, pauseDescendantEvaluation, onSelectedFocus, onSelectedBlur, 'aria-controls': ariaControls, required, ...restProps } = props;
|
|
28
32
|
const t = useI18n();
|
|
29
33
|
const id = useUID();
|
|
30
34
|
const inputRef = useConsolidatedRef(ref);
|
|
@@ -191,7 +195,7 @@ const MultiSelectInput = forwardRef(function MultiSelectInput(props, ref) {
|
|
|
191
195
|
}
|
|
192
196
|
return ariaControls;
|
|
193
197
|
}, [pauseDescendantEvaluation, selected.length]);
|
|
194
|
-
return (_jsxs(Flex, { as: StyledMultiSelectInput, forwardedAs: StyledFormControl, hasSuggestion: status === 'pending' && !!onResolveSuggestion, container: { alignItems: 'center', justify: 'between' }, readOnly: readOnly, disabled: disabled, status: status, children: [_jsxs(
|
|
198
|
+
return (_jsxs(Flex, { as: StyledMultiSelectInput, forwardedAs: StyledFormControl, hasSuggestion: status === 'pending' && !!onResolveSuggestion, 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) => {
|
|
195
199
|
// Ignore clicks on selection items
|
|
196
200
|
if (isInstance(e.target, HTMLElement) &&
|
|
197
201
|
!isInstance(e.target, HTMLInputElement) &&
|
|
@@ -200,7 +204,9 @@ const MultiSelectInput = forwardRef(function MultiSelectInput(props, ref) {
|
|
|
200
204
|
inputRef.current?.focus();
|
|
201
205
|
inputRef.current?.click();
|
|
202
206
|
}
|
|
203
|
-
}, children: [
|
|
207
|
+
}, children: [loading && (_jsx(Progress, { placement: 'local', "aria-label": t('combobox_loading_selected_items'), liveConfig: {
|
|
208
|
+
contextualLabel: t('combobox_loading_selected_items')
|
|
209
|
+
} })), selected.length > 0 && (
|
|
204
210
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
|
|
205
211
|
_jsx("ul", { ref: listRef, id: id, "aria-label": t('selected_items'), onKeyDown: onListArrowKeyDown, children: selected.map((element, idx) => {
|
|
206
212
|
return (_jsx(Selectable, { as: 'li', id: element.id.toString(), status: status, contextualLabel: element.text, onRemove: !readOnly && !disabled
|