@laerdal/life-react-components 2.0.1-dev.21 → 2.0.1-dev.23
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/dist/Button/Iconbutton.cjs +6 -4
- package/dist/Button/Iconbutton.cjs.map +1 -1
- package/dist/Button/Iconbutton.d.ts +1 -0
- package/dist/Button/Iconbutton.js +6 -4
- package/dist/Button/Iconbutton.js.map +1 -1
- package/dist/ChipsInput/ChipInput.cjs +11 -8
- package/dist/ChipsInput/ChipInput.cjs.map +1 -1
- package/dist/ChipsInput/ChipInput.js +12 -9
- package/dist/ChipsInput/ChipInput.js.map +1 -1
- package/dist/ChipsInput/ChipInputField.cjs +1 -0
- package/dist/ChipsInput/ChipInputField.cjs.map +1 -1
- package/dist/ChipsInput/ChipInputField.js +1 -0
- package/dist/ChipsInput/ChipInputField.js.map +1 -1
- package/package.json +1 -1
|
@@ -14,7 +14,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
14
14
|
var _styles = require("../styles");
|
|
15
15
|
var _common = require("../common");
|
|
16
16
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
|
-
var _excluded = ["id", "variant", "shape", "action", "hideOnLowWidth", "isInMobileMenu", "children", "useTransparentBackground", "shouldNotInteract", "disabled", "iconColor", "unsetIconSize", "tabIndex", "flatEdge", "borderRadius", "focusBackgroundColor", "type", "hidden", "invertFocus"];
|
|
17
|
+
var _excluded = ["id", "variant", "shape", "action", "hideOnLowWidth", "isInMobileMenu", "children", "useTransparentBackground", "shouldNotInteract", "disabled", "iconColor", "unsetIconSize", "tabIndex", "flatEdge", "borderRadius", "focusBackgroundColor", "type", "hidden", "invertFocus", "focusOnClick"];
|
|
18
18
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
19
19
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
20
20
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
@@ -87,6 +87,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
|
87
87
|
type = _ref.type,
|
|
88
88
|
hidden = _ref.hidden,
|
|
89
89
|
invertFocus = _ref.invertFocus,
|
|
90
|
+
focusOnClick = _ref.focusOnClick,
|
|
90
91
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
91
92
|
// Let's render button
|
|
92
93
|
switch (variant) {
|
|
@@ -109,7 +110,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
|
109
110
|
unsetIconSize: unsetIconSize,
|
|
110
111
|
tabIndex: tabIndex,
|
|
111
112
|
borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
|
|
112
|
-
onMouseDown: _common.defaultOnMouseDownHandler,
|
|
113
|
+
onMouseDown: !focusOnClick ? _common.defaultOnMouseDownHandler : undefined,
|
|
113
114
|
hidden: hidden,
|
|
114
115
|
invertFocus: invertFocus,
|
|
115
116
|
focusBackgroundColor: focusBackgroundColor
|
|
@@ -138,7 +139,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
|
138
139
|
unsetIconSize: unsetIconSize,
|
|
139
140
|
tabIndex: tabIndex,
|
|
140
141
|
borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
|
|
141
|
-
onMouseDown: _common.defaultOnMouseDownHandler,
|
|
142
|
+
onMouseDown: !focusOnClick ? _common.defaultOnMouseDownHandler : undefined,
|
|
142
143
|
hidden: hidden,
|
|
143
144
|
invertFocus: invertFocus,
|
|
144
145
|
focusBackgroundColor: focusBackgroundColor
|
|
@@ -162,7 +163,8 @@ IconButton.propTypes = {
|
|
|
162
163
|
borderRadius: _propTypes.default.number,
|
|
163
164
|
focusBackgroundColor: _propTypes.default.string,
|
|
164
165
|
children: _propTypes.default.node,
|
|
165
|
-
invertFocus: _propTypes.default.bool
|
|
166
|
+
invertFocus: _propTypes.default.bool,
|
|
167
|
+
focusOnClick: _propTypes.default.bool
|
|
166
168
|
};
|
|
167
169
|
var _default = IconButton;
|
|
168
170
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Iconbutton.cjs","names":["getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","styled","div","StyledIconButton","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","rest","event","stopPropagation","defaultOnMouseDownHandler"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n hideOnLowWidth: boolean;\n inMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n shape?: string;\n flatEdge?: string;\n focusBackgroundColor?: string;\n invertFocus?: boolean;\n shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n const radius = getBorderRadius(props);\n switch (props.flatEdge) {\n case 'left':\n return `0px ${radius} ${radius} 0px`;\n\n case 'right':\n return `${radius} 0px 0px ${radius}`;\n\n case 'none':\n default:\n return `${radius}`;\n }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n border-width: 0;\n cursor: pointer;\n height: 48px;\n width: 48px;\n background: transparent;\n position: relative;\n\n display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n ${BREAKPOINTS.MEDIUM} {\n display: block;\n }\n\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n ${IconButtonContent} {\n height: 36px;\n width: 36px;\n border-radius: ${getBorderRadiusStyle};\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n padding: 0;\n }\n }\n &:only-child {\n margin: 0;\n }\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.white};\n path {\n fill: ${(props) => props.iconColor || COLORS.white};\n }\n }\n }\n &:hover:not(:disabled),\n &.hover-state {\n ${IconButtonContent} {\n background-color: ${COLORS.primary_700};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.white};\n }\n }\n &:active:not(:disabled),\n &.active-state {\n ${IconButtonContent} {\n background: ${COLORS.primary_800};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.white};\n }\n }\n &:disabled {\n ${IconButtonContent} {\n background-color: ${COLORS.neutral_200};\n }\n svg {\n path {\n fill: ${COLORS.white};\n }\n fill: ${COLORS.white};\n }\n }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n path {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n }\n }\n }\n\n pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n &:hover:not(:disabled) {\n ${IconButtonContent} {\n background-color: ${COLORS.primary_20};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.primary_700};\n }\n }\n &:active:not(:disabled),\n &.active-state {\n ${IconButtonContent} {\n background: ${COLORS.primary_100};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n }\n svg {\n path {\n fill: ${COLORS.neutral_300};\n }\n fill: ${COLORS.neutral_300};\n }\n }\n`;\n\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onMouseDown'> {\n variant?: 'primary' | 'secondary';\n shape?: 'square' | 'circular';\n action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n hideOnLowWidth?: boolean;\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n isInMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n shouldNotInteract?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n focusBackgroundColor?: string;\n children?: React.ReactNode;\n invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n (\n {\n id,\n variant,\n shape,\n action,\n hideOnLowWidth,\n isInMobileMenu,\n children,\n useTransparentBackground,\n shouldNotInteract,\n disabled,\n iconColor,\n unsetIconSize,\n tabIndex,\n flatEdge,\n borderRadius,\n focusBackgroundColor,\n type,\n hidden,\n invertFocus,\n ...rest\n }: IconButtonProps,\n ref,\n ) => {\n // Let's render button\n switch (variant) {\n case 'secondary':\n return (\n <StyledSecondaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n action(event);\n }}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n shouldNotInteract={shouldNotInteract}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n hidden={hidden}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}\n {...rest}>\n <IconButtonContent>{children}</IconButtonContent>\n </StyledSecondaryIconButton>\n );\n case 'primary':\n default:\n return (\n <StyledPrimaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n flatEdge={flatEdge}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n action(event);\n }}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n hidden={hidden}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}\n {...rest}>\n <IconButtonContent>{children}</IconButtonContent>\n </StyledPrimaryIconButton>\n );\n }\n },\n);\n\nexport default IconButton;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Iconbutton.cjs","names":["getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","styled","div","StyledIconButton","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","focusOnClick","rest","event","stopPropagation","defaultOnMouseDownHandler","undefined"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n hideOnLowWidth: boolean;\n inMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n shape?: string;\n flatEdge?: string;\n focusBackgroundColor?: string;\n invertFocus?: boolean;\n shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n const radius = getBorderRadius(props);\n switch (props.flatEdge) {\n case 'left':\n return `0px ${radius} ${radius} 0px`;\n\n case 'right':\n return `${radius} 0px 0px ${radius}`;\n\n case 'none':\n default:\n return `${radius}`;\n }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n border-width: 0;\n cursor: pointer;\n height: 48px;\n width: 48px;\n background: transparent;\n position: relative;\n\n display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n ${BREAKPOINTS.MEDIUM} {\n display: block;\n }\n\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n ${IconButtonContent} {\n height: 36px;\n width: 36px;\n border-radius: ${getBorderRadiusStyle};\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n padding: 0;\n }\n }\n &:only-child {\n margin: 0;\n }\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.white};\n path {\n fill: ${(props) => props.iconColor || COLORS.white};\n }\n }\n }\n &:hover:not(:disabled),\n &.hover-state {\n ${IconButtonContent} {\n background-color: ${COLORS.primary_700};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.white};\n }\n }\n &:active:not(:disabled),\n &.active-state {\n ${IconButtonContent} {\n background: ${COLORS.primary_800};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.white};\n }\n }\n &:disabled {\n ${IconButtonContent} {\n background-color: ${COLORS.neutral_200};\n }\n svg {\n path {\n fill: ${COLORS.white};\n }\n fill: ${COLORS.white};\n }\n }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n path {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n }\n }\n }\n\n pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n &:hover:not(:disabled) {\n ${IconButtonContent} {\n background-color: ${COLORS.primary_20};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.primary_700};\n }\n }\n &:active:not(:disabled),\n &.active-state {\n ${IconButtonContent} {\n background: ${COLORS.primary_100};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n }\n svg {\n path {\n fill: ${COLORS.neutral_300};\n }\n fill: ${COLORS.neutral_300};\n }\n }\n`;\n\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onMouseDown'> {\n variant?: 'primary' | 'secondary';\n shape?: 'square' | 'circular';\n action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n hideOnLowWidth?: boolean;\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n isInMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n shouldNotInteract?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n focusBackgroundColor?: string;\n children?: React.ReactNode;\n invertFocus?: boolean;\n focusOnClick?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n (\n {\n id,\n variant,\n shape,\n action,\n hideOnLowWidth,\n isInMobileMenu,\n children,\n useTransparentBackground,\n shouldNotInteract,\n disabled,\n iconColor,\n unsetIconSize,\n tabIndex,\n flatEdge,\n borderRadius,\n focusBackgroundColor,\n type,\n hidden,\n invertFocus,\n focusOnClick,\n ...rest\n }: IconButtonProps,\n ref,\n ) => {\n // Let's render button\n switch (variant) {\n case 'secondary':\n return (\n <StyledSecondaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n action(event);\n }}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n shouldNotInteract={shouldNotInteract}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\n hidden={hidden}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}\n {...rest}>\n <IconButtonContent>{children}</IconButtonContent>\n </StyledSecondaryIconButton>\n );\n case 'primary':\n default:\n return (\n <StyledPrimaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n flatEdge={flatEdge}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n action(event);\n }}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\n hidden={hidden}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}\n {...rest}>\n <IconButtonContent>{children}</IconButtonContent>\n </StyledPrimaryIconButton>\n );\n }\n },\n);\n\nexport default IconButton;\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AAEA;AACA;AAAsD;AAAA;AAAA;AAAA;AAAA;AAgBtD,IAAMA,eAAe,GAAG,SAAlBA,eAAe,CAAIC,KAAsB;EAAA,OAAMA,KAAK,CAACC,YAAY,aAAMD,KAAK,CAACC,YAAY,UAAO,KAAK;AAAA,CAAC;AAE5G,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoB,CAAIF,KAAsB,EAAK;EACvD,IAAMG,MAAM,GAAGJ,eAAe,CAACC,KAAK,CAAC;EACrC,QAAQA,KAAK,CAACI,QAAQ;IACpB,KAAK,MAAM;MACT,qBAAcD,MAAM,cAAIA,MAAM;IAEhC,KAAK,OAAO;MACV,iBAAUA,MAAM,sBAAYA,MAAM;IAEpC,KAAK,MAAM;IACX;MACE,iBAAUA,MAAM;EAAG;AAEzB,CAAC;AAEM,IAAME,iBAAiB,GAAGC,yBAAM,CAACC,GAAG,mFAAE;AAAC;AAEvC,IAAMC,gBAAgB,GAAGF,yBAAM,CAACG,MAAM,koBAQhC,UAACT,KAAK;EAAA,OAAMA,KAAK,CAACU,cAAc,GAAG,MAAM,GAAG,OAAO;AAAA,CAAC,EAC7DC,mBAAW,CAACC,MAAM,EAIH,UAACZ,KAAK;EAAA,OAAMA,KAAK,CAACC,YAAY,aAAMD,KAAK,CAACC,YAAY,UAAO,KAAK;AAAA,CAAC,EAClFI,iBAAiB,EAGAH,oBAAoB,EAKzB,UAACF,KAAK;EAAA,OAAMA,KAAK,CAACa,aAAa,GAAG,OAAO,GAAG,MAAM;AAAA,CAAC,EACpD,UAACb,KAAK;EAAA,OAAMA,KAAK,CAACa,aAAa,GAAG,OAAO,GAAG,MAAM;AAAA,CAAC,EAY5D,UAACb,KAAK;EAAA,OAAMA,KAAK,CAACc,WAAW,GAAGC,2BAAmB,GAAGC,mBAAW;AAAA,CAAC,CAEvE;AAAC;AAEK,IAAMC,uBAAuB,GAAG,IAAAX,yBAAM,EAACE,gBAAgB,CAAC,irBAC3DH,iBAAiB,EACG,UAACL,KAAK;EAAA,OAAMA,KAAK,CAACkB,wBAAwB,GAAG,aAAa,GAAGC,cAAM,CAACC,WAAW;AAAA,CAAC,EAG1F,UAACpB,KAAK;EAAA,OAAKA,KAAK,CAACqB,SAAS,IAAIF,cAAM,CAACG,KAAK;AAAA,GAExC,UAACtB,KAAK;EAAA,OAAKA,KAAK,CAACqB,SAAS,IAAIF,cAAM,CAACG,KAAK;AAAA,GAMpDjB,iBAAiB,EACGc,cAAM,CAACI,WAAW,EAEtClB,iBAAiB,EACjBA,iBAAiB,EACTc,cAAM,CAACG,KAAK,EAKpBjB,iBAAiB,EACHc,cAAM,CAACK,WAAW,EAEhCnB,iBAAiB,EACjBA,iBAAiB,EACTc,cAAM,CAACG,KAAK,EAIpBjB,iBAAiB,EACGc,cAAM,CAACM,WAAW,EAI5BN,cAAM,CAACG,KAAK,EAEdH,cAAM,CAACG,KAAK,CAGzB;AAAC;AAEK,IAAMI,yBAAyB,GAAG,IAAApB,yBAAM,EAACE,gBAAgB,CAAC,8rBAC7DH,iBAAiB,EACG,UAACL,KAAK;EAAA,OAAMA,KAAK,CAACkB,wBAAwB,GAAG,aAAa,GAAGC,cAAM,CAACG,KAAK;AAAA,CAAC,EAGpF,UAACtB,KAAK;EAAA,OAAKA,KAAK,CAACqB,SAAS,IAAIF,cAAM,CAACQ,WAAW;AAAA,GAE9C,UAAC3B,KAAK;EAAA,OAAKA,KAAK,CAACqB,SAAS,IAAIF,cAAM,CAACQ,WAAW;AAAA,GAK5C,UAAC3B,KAAK;EAAA,OAAMA,KAAK,CAAC4B,iBAAiB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC,EAGpEvB,iBAAiB,EACGc,cAAM,CAACU,UAAU,EAErCxB,iBAAiB,EACjBA,iBAAiB,EACTc,cAAM,CAACI,WAAW,EAK1BlB,iBAAiB,EACHc,cAAM,CAACW,WAAW,EAEhCzB,iBAAiB,EACjBA,iBAAiB,EACTc,cAAM,CAACK,WAAW,EAK1BnB,iBAAiB,EACG,UAACL,KAAK;EAAA,OAAMA,KAAK,CAACkB,wBAAwB,GAAG,aAAa,GAAGC,cAAM,CAACG,KAAK;AAAA,CAAC,EAIpFH,cAAM,CAACY,WAAW,EAEpBZ,cAAM,CAACY,WAAW,CAG/B;AAAC;AAoBF,IAAMC,UAAU,gBAAGC,cAAK,CAACC,UAAU,CACjC,gBAwBEC,GAAG,EACA;EAAA,IAvBDC,EAAE,QAAFA,EAAE;IACFC,OAAO,QAAPA,OAAO;IACPC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACN7B,cAAc,QAAdA,cAAc;IACd8B,cAAc,QAAdA,cAAc;IACdC,QAAQ,QAARA,QAAQ;IACRvB,wBAAwB,QAAxBA,wBAAwB;IACxBU,iBAAiB,QAAjBA,iBAAiB;IACjBc,QAAQ,QAARA,QAAQ;IACRrB,SAAS,QAATA,SAAS;IACTR,aAAa,QAAbA,aAAa;IACb8B,QAAQ,QAARA,QAAQ;IACRvC,QAAQ,QAARA,QAAQ;IACRH,YAAY,QAAZA,YAAY;IACZ2C,oBAAoB,QAApBA,oBAAoB;IACpBC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNhC,WAAW,QAAXA,WAAW;IACXiC,YAAY,QAAZA,YAAY;IACTC,IAAI;EAIT;EACA,QAAQX,OAAO;IACb,KAAK,WAAW;MACd,oBACE,qBAAC,yBAAyB;QACxB,EAAE,EAAED,EAAG;QACP,IAAI,EAAES,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAI,QAAS;QACvB,eAAaT,EAAG;QAChB,GAAG,EAAED,GAAI;QACT,OAAO,EAAE,iBAACc,KAA0C,EAAK;UACvDA,KAAK,CAACC,eAAe,EAAE;UACvBX,MAAM,CAACU,KAAK,CAAC;QACf,CAAE;QACF,QAAQ,EAAEP,QAAS;QACnB,cAAc,EAAEhC,cAAc,IAAI,KAAM;QACxC,YAAY,EAAE8B,cAAe;QAC7B,wBAAwB,EAAEtB,wBAAyB;QACnD,iBAAiB,EAAEU,iBAAkB;QACrC,SAAS,EAAEP,SAAU;QACrB,aAAa,EAAER,aAAc;QAC7B,QAAQ,EAAE8B,QAAS;QACnB,YAAY,EAAE1C,YAAY,IAAIqC,KAAK,KAAK,UAAU,GAAG,EAAE,GAAG,CAAE;QAC5D,WAAW,EAAE,CAACS,YAAY,GAAGI,iCAAyB,GAAGC,SAAU;QACnE,MAAM,EAAEN,MAAO;QACf,WAAW,EAAEhC,WAAY;QACzB,oBAAoB,EAAE8B;MAAqB,GACvCI,IAAI;QAAA,uBACR,qBAAC,iBAAiB;UAAA,UAAEP;QAAQ;MAAqB,GACvB;IAEhC,KAAK,SAAS;IACd;MACE,oBACE,qBAAC,uBAAuB;QACtB,EAAE,EAAEL,EAAG;QACP,IAAI,EAAES,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAI,QAAS;QACvB,eAAaT,EAAG;QAChB,QAAQ,EAAEhC,QAAS;QACnB,GAAG,EAAE+B,GAAI;QACT,OAAO,EAAE,iBAACc,KAA0C,EAAK;UACvDA,KAAK,CAACC,eAAe,EAAE;UACvBX,MAAM,CAACU,KAAK,CAAC;QACf,CAAE;QACF,QAAQ,EAAEP,QAAS;QACnB,cAAc,EAAEhC,cAAc,IAAI,KAAM;QACxC,YAAY,EAAE8B,cAAe;QAC7B,wBAAwB,EAAEtB,wBAAyB;QACnD,SAAS,EAAEG,SAAU;QACrB,aAAa,EAAER,aAAc;QAC7B,QAAQ,EAAE8B,QAAS;QACnB,YAAY,EAAE1C,YAAY,IAAIqC,KAAK,KAAK,UAAU,GAAG,EAAE,GAAG,CAAE;QAC5D,WAAW,EAAE,CAACS,YAAY,GAAGI,iCAAyB,GAAGC,SAAU;QACnE,MAAM,EAAEN,MAAO;QACf,WAAW,EAAEhC,WAAY;QACzB,oBAAoB,EAAE8B;MAAqB,GACvCI,IAAI;QAAA,uBACR,qBAAC,iBAAiB;UAAA,UAAEP;QAAQ;MAAqB,GACzB;EAC1B;AAER,CAAC,CACF;AAAC;EAzGAJ,OAAO,4BAAG,SAAS,EAAG,WAAW;EACjCC,KAAK,4BAAG,QAAQ,EAAG,UAAU;EAC7BC,MAAM;EACN7B,cAAc;EAEd8B,cAAc;EACdtB,wBAAwB;EACxBU,iBAAiB;EACjBP,SAAS;EACTR,aAAa;EACbZ,YAAY;EACZ2C,oBAAoB;EACpBH,QAAQ;EACR3B,WAAW;EACXiC,YAAY;AAAA;AAAA,eA6FCf,UAAU;AAAA"}
|
|
@@ -31,6 +31,7 @@ export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLBut
|
|
|
31
31
|
focusBackgroundColor?: string;
|
|
32
32
|
children?: React.ReactNode;
|
|
33
33
|
invertFocus?: boolean;
|
|
34
|
+
focusOnClick?: boolean;
|
|
34
35
|
}
|
|
35
36
|
declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
36
37
|
export default IconButton;
|
|
@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
3
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
4
4
|
import _pt from "prop-types";
|
|
5
|
-
var _excluded = ["id", "variant", "shape", "action", "hideOnLowWidth", "isInMobileMenu", "children", "useTransparentBackground", "shouldNotInteract", "disabled", "iconColor", "unsetIconSize", "tabIndex", "flatEdge", "borderRadius", "focusBackgroundColor", "type", "hidden", "invertFocus"];
|
|
5
|
+
var _excluded = ["id", "variant", "shape", "action", "hideOnLowWidth", "isInMobileMenu", "children", "useTransparentBackground", "shouldNotInteract", "disabled", "iconColor", "unsetIconSize", "tabIndex", "flatEdge", "borderRadius", "focusBackgroundColor", "type", "hidden", "invertFocus", "focusOnClick"];
|
|
6
6
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
7
7
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
8
8
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
@@ -76,6 +76,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
76
76
|
type = _ref.type,
|
|
77
77
|
hidden = _ref.hidden,
|
|
78
78
|
invertFocus = _ref.invertFocus,
|
|
79
|
+
focusOnClick = _ref.focusOnClick,
|
|
79
80
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
80
81
|
// Let's render button
|
|
81
82
|
switch (variant) {
|
|
@@ -98,7 +99,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
98
99
|
unsetIconSize: unsetIconSize,
|
|
99
100
|
tabIndex: tabIndex,
|
|
100
101
|
borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
|
|
101
|
-
onMouseDown: defaultOnMouseDownHandler,
|
|
102
|
+
onMouseDown: !focusOnClick ? defaultOnMouseDownHandler : undefined,
|
|
102
103
|
hidden: hidden,
|
|
103
104
|
invertFocus: invertFocus,
|
|
104
105
|
focusBackgroundColor: focusBackgroundColor
|
|
@@ -127,7 +128,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
127
128
|
unsetIconSize: unsetIconSize,
|
|
128
129
|
tabIndex: tabIndex,
|
|
129
130
|
borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
|
|
130
|
-
onMouseDown: defaultOnMouseDownHandler,
|
|
131
|
+
onMouseDown: !focusOnClick ? defaultOnMouseDownHandler : undefined,
|
|
131
132
|
hidden: hidden,
|
|
132
133
|
invertFocus: invertFocus,
|
|
133
134
|
focusBackgroundColor: focusBackgroundColor
|
|
@@ -151,7 +152,8 @@ IconButton.propTypes = {
|
|
|
151
152
|
borderRadius: _pt.number,
|
|
152
153
|
focusBackgroundColor: _pt.string,
|
|
153
154
|
children: _pt.node,
|
|
154
|
-
invertFocus: _pt.bool
|
|
155
|
+
invertFocus: _pt.bool,
|
|
156
|
+
focusOnClick: _pt.bool
|
|
155
157
|
};
|
|
156
158
|
export default IconButton;
|
|
157
159
|
//# sourceMappingURL=Iconbutton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Iconbutton.js","names":["React","styled","BREAKPOINTS","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","div","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","invertFocus","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","rest","event","stopPropagation"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n hideOnLowWidth: boolean;\n inMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n shape?: string;\n flatEdge?: string;\n focusBackgroundColor?: string;\n invertFocus?: boolean;\n shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n const radius = getBorderRadius(props);\n switch (props.flatEdge) {\n case 'left':\n return `0px ${radius} ${radius} 0px`;\n\n case 'right':\n return `${radius} 0px 0px ${radius}`;\n\n case 'none':\n default:\n return `${radius}`;\n }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n border-width: 0;\n cursor: pointer;\n height: 48px;\n width: 48px;\n background: transparent;\n position: relative;\n\n display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n ${BREAKPOINTS.MEDIUM} {\n display: block;\n }\n\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n ${IconButtonContent} {\n height: 36px;\n width: 36px;\n border-radius: ${getBorderRadiusStyle};\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n padding: 0;\n }\n }\n &:only-child {\n margin: 0;\n }\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.white};\n path {\n fill: ${(props) => props.iconColor || COLORS.white};\n }\n }\n }\n &:hover:not(:disabled),\n &.hover-state {\n ${IconButtonContent} {\n background-color: ${COLORS.primary_700};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.white};\n }\n }\n &:active:not(:disabled),\n &.active-state {\n ${IconButtonContent} {\n background: ${COLORS.primary_800};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.white};\n }\n }\n &:disabled {\n ${IconButtonContent} {\n background-color: ${COLORS.neutral_200};\n }\n svg {\n path {\n fill: ${COLORS.white};\n }\n fill: ${COLORS.white};\n }\n }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n path {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n }\n }\n }\n\n pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n &:hover:not(:disabled) {\n ${IconButtonContent} {\n background-color: ${COLORS.primary_20};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.primary_700};\n }\n }\n &:active:not(:disabled),\n &.active-state {\n ${IconButtonContent} {\n background: ${COLORS.primary_100};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n }\n svg {\n path {\n fill: ${COLORS.neutral_300};\n }\n fill: ${COLORS.neutral_300};\n }\n }\n`;\n\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onMouseDown'> {\n variant?: 'primary' | 'secondary';\n shape?: 'square' | 'circular';\n action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n hideOnLowWidth?: boolean;\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n isInMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n shouldNotInteract?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n focusBackgroundColor?: string;\n children?: React.ReactNode;\n invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n (\n {\n id,\n variant,\n shape,\n action,\n hideOnLowWidth,\n isInMobileMenu,\n children,\n useTransparentBackground,\n shouldNotInteract,\n disabled,\n iconColor,\n unsetIconSize,\n tabIndex,\n flatEdge,\n borderRadius,\n focusBackgroundColor,\n type,\n hidden,\n invertFocus,\n ...rest\n }: IconButtonProps,\n ref,\n ) => {\n // Let's render button\n switch (variant) {\n case 'secondary':\n return (\n <StyledSecondaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n action(event);\n }}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n shouldNotInteract={shouldNotInteract}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n hidden={hidden}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}\n {...rest}>\n <IconButtonContent>{children}</IconButtonContent>\n </StyledSecondaryIconButton>\n );\n case 'primary':\n default:\n return (\n <StyledPrimaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n flatEdge={flatEdge}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n action(event);\n }}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n hidden={hidden}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}\n {...rest}>\n <IconButtonContent>{children}</IconButtonContent>\n </StyledPrimaryIconButton>\n );\n }\n },\n);\n\nexport default IconButton;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Iconbutton.js","names":["React","styled","BREAKPOINTS","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","div","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","invertFocus","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","focusOnClick","rest","event","stopPropagation","undefined"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n hideOnLowWidth: boolean;\n inMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n shape?: string;\n flatEdge?: string;\n focusBackgroundColor?: string;\n invertFocus?: boolean;\n shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n const radius = getBorderRadius(props);\n switch (props.flatEdge) {\n case 'left':\n return `0px ${radius} ${radius} 0px`;\n\n case 'right':\n return `${radius} 0px 0px ${radius}`;\n\n case 'none':\n default:\n return `${radius}`;\n }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n border-width: 0;\n cursor: pointer;\n height: 48px;\n width: 48px;\n background: transparent;\n position: relative;\n\n display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n ${BREAKPOINTS.MEDIUM} {\n display: block;\n }\n\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n ${IconButtonContent} {\n height: 36px;\n width: 36px;\n border-radius: ${getBorderRadiusStyle};\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n padding: 0;\n }\n }\n &:only-child {\n margin: 0;\n }\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.white};\n path {\n fill: ${(props) => props.iconColor || COLORS.white};\n }\n }\n }\n &:hover:not(:disabled),\n &.hover-state {\n ${IconButtonContent} {\n background-color: ${COLORS.primary_700};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.white};\n }\n }\n &:active:not(:disabled),\n &.active-state {\n ${IconButtonContent} {\n background: ${COLORS.primary_800};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.white};\n }\n }\n &:disabled {\n ${IconButtonContent} {\n background-color: ${COLORS.neutral_200};\n }\n svg {\n path {\n fill: ${COLORS.white};\n }\n fill: ${COLORS.white};\n }\n }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n path {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n }\n }\n }\n\n pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n &:hover:not(:disabled) {\n ${IconButtonContent} {\n background-color: ${COLORS.primary_20};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.primary_700};\n }\n }\n &:active:not(:disabled),\n &.active-state {\n ${IconButtonContent} {\n background: ${COLORS.primary_100};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n }\n svg {\n path {\n fill: ${COLORS.neutral_300};\n }\n fill: ${COLORS.neutral_300};\n }\n }\n`;\n\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onMouseDown'> {\n variant?: 'primary' | 'secondary';\n shape?: 'square' | 'circular';\n action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n hideOnLowWidth?: boolean;\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n isInMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n shouldNotInteract?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n focusBackgroundColor?: string;\n children?: React.ReactNode;\n invertFocus?: boolean;\n focusOnClick?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n (\n {\n id,\n variant,\n shape,\n action,\n hideOnLowWidth,\n isInMobileMenu,\n children,\n useTransparentBackground,\n shouldNotInteract,\n disabled,\n iconColor,\n unsetIconSize,\n tabIndex,\n flatEdge,\n borderRadius,\n focusBackgroundColor,\n type,\n hidden,\n invertFocus,\n focusOnClick,\n ...rest\n }: IconButtonProps,\n ref,\n ) => {\n // Let's render button\n switch (variant) {\n case 'secondary':\n return (\n <StyledSecondaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n action(event);\n }}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n shouldNotInteract={shouldNotInteract}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\n hidden={hidden}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}\n {...rest}>\n <IconButtonContent>{children}</IconButtonContent>\n </StyledSecondaryIconButton>\n );\n case 'primary':\n default:\n return (\n <StyledPrimaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n flatEdge={flatEdge}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n action(event);\n }}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\n hidden={hidden}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}\n {...rest}>\n <IconButtonContent>{children}</IconButtonContent>\n </StyledPrimaryIconButton>\n );\n }\n },\n);\n\nexport default IconButton;\n"],"mappings":"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"}
|
|
@@ -70,10 +70,13 @@ var ChipInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
70
70
|
};
|
|
71
71
|
}));
|
|
72
72
|
}, [chips, variants, icon, size]);
|
|
73
|
-
var
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
73
|
+
var handleInputBlur = function handleInputBlur(event) {
|
|
74
|
+
var _event$target, _event$target$closest;
|
|
75
|
+
if (autoSave && value && !((_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$closest = _event$target.closest("".concat(_ChipInputField.ChipInputContainer))) !== null && _event$target$closest !== void 0 && _event$target$closest.contains(event.relatedTarget))) {
|
|
76
|
+
setChips([].concat((0, _toConsumableArray2.default)(chips), [value]));
|
|
77
|
+
onValueChange([].concat((0, _toConsumableArray2.default)(chips), [value]));
|
|
78
|
+
setValue('');
|
|
79
|
+
}
|
|
77
80
|
};
|
|
78
81
|
|
|
79
82
|
/**
|
|
@@ -83,7 +86,9 @@ var ChipInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
83
86
|
var handleInputKeyDown = function handleInputKeyDown(event) {
|
|
84
87
|
if ((event.key === 'Enter' || event.key === ' ') && value) {
|
|
85
88
|
event.preventDefault();
|
|
86
|
-
|
|
89
|
+
setChips([].concat((0, _toConsumableArray2.default)(chips), [value]));
|
|
90
|
+
onValueChange([].concat((0, _toConsumableArray2.default)(chips), [value]));
|
|
91
|
+
setValue('');
|
|
87
92
|
}
|
|
88
93
|
};
|
|
89
94
|
|
|
@@ -119,9 +124,7 @@ var ChipInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
119
124
|
validationMessage: validationMessage,
|
|
120
125
|
multiLine: multiLine,
|
|
121
126
|
size: size,
|
|
122
|
-
onBlur:
|
|
123
|
-
return autoSave && value && addCurrentChip();
|
|
124
|
-
}
|
|
127
|
+
onBlur: handleInputBlur
|
|
125
128
|
}, rest));
|
|
126
129
|
});
|
|
127
130
|
var _default = ChipInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChipInput.cjs","names":["ChipInput","React","forwardRef","ref","values","inputId","variants","icon","placeholder","disabled","altPlaceholder","validationMessage","onValueChange","multiLine","size","Size","Medium","autoSave","rest","useState","chips","setChips","value","setValue","chipItems","setChipItems","useEffect","map","chip","index","label","variant","
|
|
1
|
+
{"version":3,"file":"ChipInput.cjs","names":["ChipInput","React","forwardRef","ref","values","inputId","variants","icon","placeholder","disabled","altPlaceholder","validationMessage","onValueChange","multiLine","size","Size","Medium","autoSave","rest","useState","chips","setChips","value","setValue","chipItems","setChipItems","useEffect","map","chip","index","label","variant","handleInputBlur","event","target","closest","ChipInputContainer","contains","relatedTarget","handleInputKeyDown","key","preventDefault","onRemoveChip","newChips","splice","item"],"sources":["../../src/ChipsInput/ChipInput.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {Size} from '../types';\nimport {ChipInputContainer, ChipInputField} from './ChipInputField';\nimport {ChipInputProps, ChipItem} from './ChipInputTypes';\n\n\nconst ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(({\n values,\n inputId,\n variants,\n icon,\n placeholder,\n disabled,\n altPlaceholder,\n validationMessage,\n onValueChange,\n multiLine = true,\n size = Size.Medium,\n autoSave = false,\n ...rest\n }: ChipInputProps, ref) => {\n\n const [chips, setChips] = React.useState<string[]>([]);\n const [value, setValue] = React.useState<string>('');\n const [chipItems, setChipItems] = React.useState<ChipItem[]>([]);\n\n /**\n * Sets initial values for the chips.\n */\n React.useEffect(() => {\n // Let's add initial chip values\n setChips(values);\n }, [values]);\n\n /**\n * Set chip items for chip input field\n * */\n React.useEffect(() => {\n setChipItems(chips.map((chip, index) => ({\n label: chip,\n icon: icon,\n disabled: false,\n variant: variants && variants[index],\n })));\n }, [chips, variants, icon, size]);\n\n\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (autoSave && value && !event.target?.closest(`${ChipInputContainer}`)?.contains(event.relatedTarget as Node)) {\n setChips([...chips, value]);\n onValueChange([...chips, value]);\n\n setValue('');\n }\n };\n\n /**\n * Adds a chip to the chip list.\n * @param event - Event handler from the key down event.\n */\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n if ((event.key === 'Enter' || event.key === ' ') && value) {\n event.preventDefault();\n\n setChips([...chips, value]);\n onValueChange([...chips, value]);\n\n setValue('');\n }\n };\n\n /**\n * Removes a specific chip from the chip list.\n * @param index - Index of the chip that needs to be removed.\n */\n const onRemoveChip = (index: number): void => {\n const newChips = [...chips];\n newChips.splice(index, 1);\n\n setChips(newChips);\n onValueChange(newChips);\n };\n\n /**\n * Return Chip Input component.\n */\n return (\n <ChipInputField inputId={inputId}\n ref={ref}\n items={chipItems}\n onRemoveItem={(item, index) => onRemoveChip(index)}\n inputValue={value}\n onInputValueChange={value => setValue(value)}\n onInputKeyDown={handleInputKeyDown}\n placeholder={placeholder}\n altPlaceholder={altPlaceholder}\n disabled={disabled}\n validationMessage={validationMessage}\n multiLine={multiLine}\n size={size}\n onBlur={handleInputBlur}\n {...rest}\n />\n );\n});\n\nexport default ChipInput;\n"],"mappings":"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"}
|
|
@@ -14,7 +14,7 @@ import * as React from 'react';
|
|
|
14
14
|
* Import custom components.
|
|
15
15
|
*/
|
|
16
16
|
import { Size } from '../types';
|
|
17
|
-
import { ChipInputField } from './ChipInputField';
|
|
17
|
+
import { ChipInputContainer, ChipInputField } from './ChipInputField';
|
|
18
18
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
19
19
|
var ChipInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
20
20
|
var values = _ref.values,
|
|
@@ -67,10 +67,13 @@ var ChipInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
67
67
|
};
|
|
68
68
|
}));
|
|
69
69
|
}, [chips, variants, icon, size]);
|
|
70
|
-
var
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
70
|
+
var handleInputBlur = function handleInputBlur(event) {
|
|
71
|
+
var _event$target, _event$target$closest;
|
|
72
|
+
if (autoSave && value && !((_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$closest = _event$target.closest("".concat(ChipInputContainer))) !== null && _event$target$closest !== void 0 && _event$target$closest.contains(event.relatedTarget))) {
|
|
73
|
+
setChips([].concat(_toConsumableArray(chips), [value]));
|
|
74
|
+
onValueChange([].concat(_toConsumableArray(chips), [value]));
|
|
75
|
+
setValue('');
|
|
76
|
+
}
|
|
74
77
|
};
|
|
75
78
|
|
|
76
79
|
/**
|
|
@@ -80,7 +83,9 @@ var ChipInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
80
83
|
var handleInputKeyDown = function handleInputKeyDown(event) {
|
|
81
84
|
if ((event.key === 'Enter' || event.key === ' ') && value) {
|
|
82
85
|
event.preventDefault();
|
|
83
|
-
|
|
86
|
+
setChips([].concat(_toConsumableArray(chips), [value]));
|
|
87
|
+
onValueChange([].concat(_toConsumableArray(chips), [value]));
|
|
88
|
+
setValue('');
|
|
84
89
|
}
|
|
85
90
|
};
|
|
86
91
|
|
|
@@ -116,9 +121,7 @@ var ChipInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
116
121
|
validationMessage: validationMessage,
|
|
117
122
|
multiLine: multiLine,
|
|
118
123
|
size: size,
|
|
119
|
-
onBlur:
|
|
120
|
-
return autoSave && value && addCurrentChip();
|
|
121
|
-
}
|
|
124
|
+
onBlur: handleInputBlur
|
|
122
125
|
}, rest));
|
|
123
126
|
});
|
|
124
127
|
export default ChipInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChipInput.js","names":["React","Size","ChipInputField","ChipInput","forwardRef","ref","values","inputId","variants","icon","placeholder","disabled","altPlaceholder","validationMessage","onValueChange","multiLine","size","Medium","autoSave","rest","useState","chips","setChips","value","setValue","chipItems","setChipItems","useEffect","map","chip","index","label","variant","
|
|
1
|
+
{"version":3,"file":"ChipInput.js","names":["React","Size","ChipInputContainer","ChipInputField","ChipInput","forwardRef","ref","values","inputId","variants","icon","placeholder","disabled","altPlaceholder","validationMessage","onValueChange","multiLine","size","Medium","autoSave","rest","useState","chips","setChips","value","setValue","chipItems","setChipItems","useEffect","map","chip","index","label","variant","handleInputBlur","event","target","closest","contains","relatedTarget","handleInputKeyDown","key","preventDefault","onRemoveChip","newChips","splice","item"],"sources":["../../src/ChipsInput/ChipInput.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {Size} from '../types';\nimport {ChipInputContainer, ChipInputField} from './ChipInputField';\nimport {ChipInputProps, ChipItem} from './ChipInputTypes';\n\n\nconst ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(({\n values,\n inputId,\n variants,\n icon,\n placeholder,\n disabled,\n altPlaceholder,\n validationMessage,\n onValueChange,\n multiLine = true,\n size = Size.Medium,\n autoSave = false,\n ...rest\n }: ChipInputProps, ref) => {\n\n const [chips, setChips] = React.useState<string[]>([]);\n const [value, setValue] = React.useState<string>('');\n const [chipItems, setChipItems] = React.useState<ChipItem[]>([]);\n\n /**\n * Sets initial values for the chips.\n */\n React.useEffect(() => {\n // Let's add initial chip values\n setChips(values);\n }, [values]);\n\n /**\n * Set chip items for chip input field\n * */\n React.useEffect(() => {\n setChipItems(chips.map((chip, index) => ({\n label: chip,\n icon: icon,\n disabled: false,\n variant: variants && variants[index],\n })));\n }, [chips, variants, icon, size]);\n\n\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (autoSave && value && !event.target?.closest(`${ChipInputContainer}`)?.contains(event.relatedTarget as Node)) {\n setChips([...chips, value]);\n onValueChange([...chips, value]);\n\n setValue('');\n }\n };\n\n /**\n * Adds a chip to the chip list.\n * @param event - Event handler from the key down event.\n */\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n if ((event.key === 'Enter' || event.key === ' ') && value) {\n event.preventDefault();\n\n setChips([...chips, value]);\n onValueChange([...chips, value]);\n\n setValue('');\n }\n };\n\n /**\n * Removes a specific chip from the chip list.\n * @param index - Index of the chip that needs to be removed.\n */\n const onRemoveChip = (index: number): void => {\n const newChips = [...chips];\n newChips.splice(index, 1);\n\n setChips(newChips);\n onValueChange(newChips);\n };\n\n /**\n * Return Chip Input component.\n */\n return (\n <ChipInputField inputId={inputId}\n ref={ref}\n items={chipItems}\n onRemoveItem={(item, index) => onRemoveChip(index)}\n inputValue={value}\n onInputValueChange={value => setValue(value)}\n onInputKeyDown={handleInputKeyDown}\n placeholder={placeholder}\n altPlaceholder={altPlaceholder}\n disabled={disabled}\n validationMessage={validationMessage}\n multiLine={multiLine}\n size={size}\n onBlur={handleInputBlur}\n {...rest}\n />\n );\n});\n\nexport default ChipInput;\n"],"mappings":"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"}
|
|
@@ -165,6 +165,7 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
|
165
165
|
style: {
|
|
166
166
|
marginLeft: '-8px'
|
|
167
167
|
},
|
|
168
|
+
focusOnClick: true,
|
|
168
169
|
variant: 'secondary',
|
|
169
170
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Clear, {})
|
|
170
171
|
}), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Loading, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChipInputField.cjs","names":["Wrapper","styled","div","Loading","ChipInputBoundItems","ChipInputContentContainer","scrollBarStyling","Size","Small","ChipInputEl","input","ComponentMStyling","ComponentTextStyle","Regular","COLORS","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","ComponentSStyling","focusStyles","primary_700","primary_800","critical_500","neutral_100","neutral_300","ChipInputField","React","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","onBlur","rest","containerRef","useRef","inputRef","useFocusVisibleRef","useImperativeHandle","current","useEffect","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","States","Default","label","stopPropagation","marginLeft","critical_400"],"sources":["../../src/ChipsInput/ChipInputField.tsx"],"sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size, States} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles,\n scrollBarStyling\n} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n position: relative;\n`;\n\nconst Loading = styled.div`\n height: 20px;\n width: 20px;\n`;\n\nexport const ChipInputBoundItems = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n flex: 1;\n min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n width: 100%;\n background: transparent;\n display: flex;\n flex-direction: row;\n align-items: center;\n column-gap: 8px;\n margin-right: 6px;\n padding-right: 10px;\n padding-left: 16px;\n flex-wrap: nowrap;\n overflow-x: scroll;\n min-height: 48px;\n\n ${scrollBarStyling(Size.Small)}\n ::-webkit-scrollbar:horizontal {\n display: none;\n }\n\n .action-right:focus,\n button:focus {\n outline-offset: -4px !important;\n }\n`;\n\nexport const ChipInputEl = styled.input`\n border: none;\n outline: none;\n\n height: 40px;\n min-width: 40px;\n display: inline-flex;\n flex: 1;\n background: transparent;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n color: ${COLORS.black} !important;\n\n &::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n`;\n\nexport const ChipInputContainer = styled.div`\n width: 100%;\n height: auto;\n border-radius: 4px;\n margin: 4px 0px;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n background-color: ${COLORS.white};\n box-sizing: border-box;\n cursor: text;\n outline: none;\n display: flex;\n align-items: center;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n &.small {\n padding: 0;\n min-height: 48px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.medium {\n padding: 4px 0;\n min-height: 56px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.multiline.medium {\n ${ChipInputContentContainer} {\n max-height: calc(48px * 3);\n flex-wrap: wrap;\n overflow-y: auto;\n overflow-x: unset;\n }\n }\n\n &.focus-visible-within,\n :focus {\n ${focusStyles}\n }\n\n &:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n &:focus-within {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n &.invalid,\n &.invalid:hover,\n &.invalid:focus {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n &.disabled {\n ${ChipInputContentContainer} {\n pointer-events: none;\n }\n\n cursor: not-allowed;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n outline: none;\n color: ${COLORS.neutral_300} !important;\n }\n`;\n\nexport interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\n inputId: string;\n items: ChipItem[];\n disabled?: boolean;\n placeholder?: string;\n altPlaceholder?: string;\n multiLine?: boolean;\n size?: Size.Large | Size.Medium | Size.Small;\n loading?: boolean;\n required?: boolean;\n\n validationMessage?: string;\n\n onRemoveItem: (item: ChipItem, index: number) => void;\n inputValue: string;\n onInputValueChange: (value: string) => void;\n onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(\n (\n {\n inputId,\n items,\n disabled = false,\n placeholder,\n altPlaceholder,\n multiLine = true,\n size = Size.Medium,\n validationMessage,\n loading,\n onRemoveItem,\n onInputValueChange,\n onInputKeyDown,\n onActivationChange,\n inputValue,\n required,\n onBlur,\n ...rest\n },\n ref,\n ) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const inputRef = useFocusVisibleRef([containerRef]);\n \n React.useImperativeHandle(ref, () => inputRef.current, [inputRef])\n\n /**\n * Scroll container to last item on change\n * */\n React.useEffect(() => {\n if (inputRef.current && document.activeElement === inputRef.current) {\n inputRef.current.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }\n }, [containerRef, inputRef, items]);\n\n /**\n * Remove last cheap on backspace\n * */\n const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n onRemoveItem(items[items.length - 1], items.length - 1);\n } else {\n onInputKeyDown(e);\n }\n };\n\n const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n onRemoveItem(item, index);\n inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n };\n\n const handleInputClear = (e: any) => {\n onInputValueChange('');\n inputRef.current?.focus({focusVisible: e?.detail !== 1} as any);\n };\n\n const handleContainerKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n const currentIndex = Array.from(items).indexOf(e.target as any);\n const direction = e.key === 'ArrowLeft' ? -1 : 1;\n const item = items[currentIndex + direction];\n item?.focus({focusVisible: true} as any);\n\n onActivationChange && onActivationChange(false);\n };\n\n const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n return (\n <Wrapper onBlur={onBlur}>\n <ChipInputContainer\n data-testid=\"chip-input-container\"\n ref={containerRef}\n onKeyDown={handleContainerKeyDown}\n onClick={() => !disabled && inputRef.current?.focus()}\n className={cls}>\n <ChipInputContentContainer>\n {items?.map((chip: ChipItem, index: number) => (\n <InputChip\n key={`chip_${index}`}\n icon={chip?.icon}\n size={size}\n disabled={chip.disabled || disabled}\n variant={chip.variant || States.Default}\n text={chip.label}\n onRemove={(e) => handleItemRemove(e, chip, index)}\n />\n ))}\n <ChipInputBoundItems>\n <ChipInputEl\n ref={inputRef}\n type=\"text\"\n id={inputId}\n required={required}\n tabIndex={disabled ? -1 : 0}\n value={inputValue}\n onChange={(e) => onInputValueChange(e.target.value)}\n onKeyDown={handleInputKeyDown}\n placeholder={items?.length === 0 ? placeholder : altPlaceholder || ''}\n onClick={(e) => {\n e.stopPropagation();\n onActivationChange && onActivationChange(true);\n }}\n {...rest}\n />\n {inputValue && !disabled && (\n <IconButton\n id=\"clear-btn\"\n action={handleInputClear}\n ref={(ref) => {\n ref?.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }}\n useTransparentBackground={true}\n shape={'circular'}\n style={{marginLeft: '-8px'}}\n variant={'secondary'}>\n <SystemIcons.Clear/>\n </IconButton>\n )}\n\n {loading && (\n <Loading className={size}>\n <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n </Loading>\n )}\n </ChipInputBoundItems>\n </ChipInputContentContainer>\n </ChipInputContainer>\n {validationMessage && (\n <ErrorMessage>\n <TechnicalWarning color={COLORS.critical_400}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </Wrapper>\n );\n },\n);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ChipInputField.cjs","names":["Wrapper","styled","div","Loading","ChipInputBoundItems","ChipInputContentContainer","scrollBarStyling","Size","Small","ChipInputEl","input","ComponentMStyling","ComponentTextStyle","Regular","COLORS","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","ComponentSStyling","focusStyles","primary_700","primary_800","critical_500","neutral_100","neutral_300","ChipInputField","React","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","onBlur","rest","containerRef","useRef","inputRef","useFocusVisibleRef","useImperativeHandle","current","useEffect","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","States","Default","label","stopPropagation","marginLeft","critical_400"],"sources":["../../src/ChipsInput/ChipInputField.tsx"],"sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size, States} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles,\n scrollBarStyling\n} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n position: relative;\n`;\n\nconst Loading = styled.div`\n height: 20px;\n width: 20px;\n`;\n\nexport const ChipInputBoundItems = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n flex: 1;\n min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n width: 100%;\n background: transparent;\n display: flex;\n flex-direction: row;\n align-items: center;\n column-gap: 8px;\n margin-right: 6px;\n padding-right: 10px;\n padding-left: 16px;\n flex-wrap: nowrap;\n overflow-x: scroll;\n min-height: 48px;\n\n ${scrollBarStyling(Size.Small)}\n ::-webkit-scrollbar:horizontal {\n display: none;\n }\n\n .action-right:focus,\n button:focus {\n outline-offset: -4px !important;\n }\n`;\n\nexport const ChipInputEl = styled.input`\n border: none;\n outline: none;\n\n height: 40px;\n min-width: 40px;\n display: inline-flex;\n flex: 1;\n background: transparent;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n color: ${COLORS.black} !important;\n\n &::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n`;\n\nexport const ChipInputContainer = styled.div`\n width: 100%;\n height: auto;\n border-radius: 4px;\n margin: 4px 0px;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n background-color: ${COLORS.white};\n box-sizing: border-box;\n cursor: text;\n outline: none;\n display: flex;\n align-items: center;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n &.small {\n padding: 0;\n min-height: 48px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.medium {\n padding: 4px 0;\n min-height: 56px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.multiline.medium {\n ${ChipInputContentContainer} {\n max-height: calc(48px * 3);\n flex-wrap: wrap;\n overflow-y: auto;\n overflow-x: unset;\n }\n }\n\n &.focus-visible-within,\n :focus {\n ${focusStyles}\n }\n\n &:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n &:focus-within {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n &.invalid,\n &.invalid:hover,\n &.invalid:focus {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n &.disabled {\n ${ChipInputContentContainer} {\n pointer-events: none;\n }\n\n cursor: not-allowed;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n outline: none;\n color: ${COLORS.neutral_300} !important;\n }\n`;\n\nexport interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\n inputId: string;\n items: ChipItem[];\n disabled?: boolean;\n placeholder?: string;\n altPlaceholder?: string;\n multiLine?: boolean;\n size?: Size.Large | Size.Medium | Size.Small;\n loading?: boolean;\n required?: boolean;\n\n validationMessage?: string;\n\n onRemoveItem: (item: ChipItem, index: number) => void;\n inputValue: string;\n onInputValueChange: (value: string) => void;\n onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(\n (\n {\n inputId,\n items,\n disabled = false,\n placeholder,\n altPlaceholder,\n multiLine = true,\n size = Size.Medium,\n validationMessage,\n loading,\n onRemoveItem,\n onInputValueChange,\n onInputKeyDown,\n onActivationChange,\n inputValue,\n required,\n onBlur,\n ...rest\n },\n ref,\n ) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const inputRef = useFocusVisibleRef([containerRef]);\n \n React.useImperativeHandle(ref, () => inputRef.current, [inputRef])\n\n /**\n * Scroll container to last item on change\n * */\n React.useEffect(() => {\n if (inputRef.current && document.activeElement === inputRef.current) {\n inputRef.current.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }\n }, [containerRef, inputRef, items]);\n\n /**\n * Remove last cheap on backspace\n * */\n const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n onRemoveItem(items[items.length - 1], items.length - 1);\n } else {\n onInputKeyDown(e);\n }\n };\n\n const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n onRemoveItem(item, index);\n inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n };\n\n const handleInputClear = (e: any) => {\n onInputValueChange('');\n inputRef.current?.focus({focusVisible: e?.detail !== 1} as any);\n };\n\n const handleContainerKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n const currentIndex = Array.from(items).indexOf(e.target as any);\n const direction = e.key === 'ArrowLeft' ? -1 : 1;\n const item = items[currentIndex + direction];\n item?.focus({focusVisible: true} as any);\n\n onActivationChange && onActivationChange(false);\n };\n\n const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n return (\n <Wrapper onBlur={onBlur}>\n <ChipInputContainer\n data-testid=\"chip-input-container\"\n ref={containerRef}\n onKeyDown={handleContainerKeyDown}\n onClick={() => !disabled && inputRef.current?.focus()}\n className={cls}>\n <ChipInputContentContainer>\n {items?.map((chip: ChipItem, index: number) => (\n <InputChip\n key={`chip_${index}`}\n icon={chip?.icon}\n size={size}\n disabled={chip.disabled || disabled}\n variant={chip.variant || States.Default}\n text={chip.label}\n onRemove={(e) => handleItemRemove(e, chip, index)}\n />\n ))}\n <ChipInputBoundItems>\n <ChipInputEl\n ref={inputRef}\n type=\"text\"\n id={inputId}\n required={required}\n tabIndex={disabled ? -1 : 0}\n value={inputValue}\n onChange={(e) => onInputValueChange(e.target.value)}\n onKeyDown={handleInputKeyDown}\n placeholder={items?.length === 0 ? placeholder : altPlaceholder || ''}\n onClick={(e) => {\n e.stopPropagation();\n onActivationChange && onActivationChange(true);\n }}\n {...rest}\n />\n {inputValue && !disabled && (\n <IconButton\n id=\"clear-btn\"\n action={handleInputClear}\n ref={(ref) => {\n ref?.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }}\n useTransparentBackground={true}\n shape={'circular'}\n style={{marginLeft: '-8px'}}\n focusOnClick={true}\n variant={'secondary'}>\n <SystemIcons.Clear/>\n </IconButton>\n )}\n\n {loading && (\n <Loading className={size}>\n <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n </Loading>\n )}\n </ChipInputBoundItems>\n </ChipInputContentContainer>\n </ChipInputContainer>\n {validationMessage && (\n <ErrorMessage>\n <TechnicalWarning color={COLORS.critical_400}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </Wrapper>\n );\n },\n);\n"],"mappings":"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"}
|
|
@@ -155,6 +155,7 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
155
155
|
style: {
|
|
156
156
|
marginLeft: '-8px'
|
|
157
157
|
},
|
|
158
|
+
focusOnClick: true,
|
|
158
159
|
variant: 'secondary',
|
|
159
160
|
children: /*#__PURE__*/_jsx(SystemIcons.Clear, {})
|
|
160
161
|
}), loading && /*#__PURE__*/_jsx(Loading, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChipInputField.js","names":["React","Size","States","InputChip","ErrorMessage","TechnicalWarning","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","scrollBarStyling","styled","LoadingIndicator","useFocusVisibleRef","IconButton","SystemIcons","Wrapper","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Small","ChipInputEl","input","Regular","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","primary_700","primary_800","critical_500","neutral_100","neutral_300","ChipInputField","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","onBlur","rest","containerRef","useRef","inputRef","useImperativeHandle","current","useEffect","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","Default","label","stopPropagation","marginLeft","critical_400"],"sources":["../../src/ChipsInput/ChipInputField.tsx"],"sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size, States} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles,\n scrollBarStyling\n} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n position: relative;\n`;\n\nconst Loading = styled.div`\n height: 20px;\n width: 20px;\n`;\n\nexport const ChipInputBoundItems = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n flex: 1;\n min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n width: 100%;\n background: transparent;\n display: flex;\n flex-direction: row;\n align-items: center;\n column-gap: 8px;\n margin-right: 6px;\n padding-right: 10px;\n padding-left: 16px;\n flex-wrap: nowrap;\n overflow-x: scroll;\n min-height: 48px;\n\n ${scrollBarStyling(Size.Small)}\n ::-webkit-scrollbar:horizontal {\n display: none;\n }\n\n .action-right:focus,\n button:focus {\n outline-offset: -4px !important;\n }\n`;\n\nexport const ChipInputEl = styled.input`\n border: none;\n outline: none;\n\n height: 40px;\n min-width: 40px;\n display: inline-flex;\n flex: 1;\n background: transparent;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n color: ${COLORS.black} !important;\n\n &::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n`;\n\nexport const ChipInputContainer = styled.div`\n width: 100%;\n height: auto;\n border-radius: 4px;\n margin: 4px 0px;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n background-color: ${COLORS.white};\n box-sizing: border-box;\n cursor: text;\n outline: none;\n display: flex;\n align-items: center;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n &.small {\n padding: 0;\n min-height: 48px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.medium {\n padding: 4px 0;\n min-height: 56px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.multiline.medium {\n ${ChipInputContentContainer} {\n max-height: calc(48px * 3);\n flex-wrap: wrap;\n overflow-y: auto;\n overflow-x: unset;\n }\n }\n\n &.focus-visible-within,\n :focus {\n ${focusStyles}\n }\n\n &:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n &:focus-within {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n &.invalid,\n &.invalid:hover,\n &.invalid:focus {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n &.disabled {\n ${ChipInputContentContainer} {\n pointer-events: none;\n }\n\n cursor: not-allowed;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n outline: none;\n color: ${COLORS.neutral_300} !important;\n }\n`;\n\nexport interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\n inputId: string;\n items: ChipItem[];\n disabled?: boolean;\n placeholder?: string;\n altPlaceholder?: string;\n multiLine?: boolean;\n size?: Size.Large | Size.Medium | Size.Small;\n loading?: boolean;\n required?: boolean;\n\n validationMessage?: string;\n\n onRemoveItem: (item: ChipItem, index: number) => void;\n inputValue: string;\n onInputValueChange: (value: string) => void;\n onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(\n (\n {\n inputId,\n items,\n disabled = false,\n placeholder,\n altPlaceholder,\n multiLine = true,\n size = Size.Medium,\n validationMessage,\n loading,\n onRemoveItem,\n onInputValueChange,\n onInputKeyDown,\n onActivationChange,\n inputValue,\n required,\n onBlur,\n ...rest\n },\n ref,\n ) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const inputRef = useFocusVisibleRef([containerRef]);\n \n React.useImperativeHandle(ref, () => inputRef.current, [inputRef])\n\n /**\n * Scroll container to last item on change\n * */\n React.useEffect(() => {\n if (inputRef.current && document.activeElement === inputRef.current) {\n inputRef.current.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }\n }, [containerRef, inputRef, items]);\n\n /**\n * Remove last cheap on backspace\n * */\n const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n onRemoveItem(items[items.length - 1], items.length - 1);\n } else {\n onInputKeyDown(e);\n }\n };\n\n const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n onRemoveItem(item, index);\n inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n };\n\n const handleInputClear = (e: any) => {\n onInputValueChange('');\n inputRef.current?.focus({focusVisible: e?.detail !== 1} as any);\n };\n\n const handleContainerKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n const currentIndex = Array.from(items).indexOf(e.target as any);\n const direction = e.key === 'ArrowLeft' ? -1 : 1;\n const item = items[currentIndex + direction];\n item?.focus({focusVisible: true} as any);\n\n onActivationChange && onActivationChange(false);\n };\n\n const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n return (\n <Wrapper onBlur={onBlur}>\n <ChipInputContainer\n data-testid=\"chip-input-container\"\n ref={containerRef}\n onKeyDown={handleContainerKeyDown}\n onClick={() => !disabled && inputRef.current?.focus()}\n className={cls}>\n <ChipInputContentContainer>\n {items?.map((chip: ChipItem, index: number) => (\n <InputChip\n key={`chip_${index}`}\n icon={chip?.icon}\n size={size}\n disabled={chip.disabled || disabled}\n variant={chip.variant || States.Default}\n text={chip.label}\n onRemove={(e) => handleItemRemove(e, chip, index)}\n />\n ))}\n <ChipInputBoundItems>\n <ChipInputEl\n ref={inputRef}\n type=\"text\"\n id={inputId}\n required={required}\n tabIndex={disabled ? -1 : 0}\n value={inputValue}\n onChange={(e) => onInputValueChange(e.target.value)}\n onKeyDown={handleInputKeyDown}\n placeholder={items?.length === 0 ? placeholder : altPlaceholder || ''}\n onClick={(e) => {\n e.stopPropagation();\n onActivationChange && onActivationChange(true);\n }}\n {...rest}\n />\n {inputValue && !disabled && (\n <IconButton\n id=\"clear-btn\"\n action={handleInputClear}\n ref={(ref) => {\n ref?.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }}\n useTransparentBackground={true}\n shape={'circular'}\n style={{marginLeft: '-8px'}}\n variant={'secondary'}>\n <SystemIcons.Clear/>\n </IconButton>\n )}\n\n {loading && (\n <Loading className={size}>\n <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n </Loading>\n )}\n </ChipInputBoundItems>\n </ChipInputContentContainer>\n </ChipInputContainer>\n {validationMessage && (\n <ErrorMessage>\n <TechnicalWarning color={COLORS.critical_400}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </Wrapper>\n );\n },\n);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ChipInputField.js","names":["React","Size","States","InputChip","ErrorMessage","TechnicalWarning","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","scrollBarStyling","styled","LoadingIndicator","useFocusVisibleRef","IconButton","SystemIcons","Wrapper","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Small","ChipInputEl","input","Regular","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","primary_700","primary_800","critical_500","neutral_100","neutral_300","ChipInputField","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","onBlur","rest","containerRef","useRef","inputRef","useImperativeHandle","current","useEffect","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","Default","label","stopPropagation","marginLeft","critical_400"],"sources":["../../src/ChipsInput/ChipInputField.tsx"],"sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size, States} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n focusStyles,\n scrollBarStyling\n} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n position: relative;\n`;\n\nconst Loading = styled.div`\n height: 20px;\n width: 20px;\n`;\n\nexport const ChipInputBoundItems = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n flex: 1;\n min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n width: 100%;\n background: transparent;\n display: flex;\n flex-direction: row;\n align-items: center;\n column-gap: 8px;\n margin-right: 6px;\n padding-right: 10px;\n padding-left: 16px;\n flex-wrap: nowrap;\n overflow-x: scroll;\n min-height: 48px;\n\n ${scrollBarStyling(Size.Small)}\n ::-webkit-scrollbar:horizontal {\n display: none;\n }\n\n .action-right:focus,\n button:focus {\n outline-offset: -4px !important;\n }\n`;\n\nexport const ChipInputEl = styled.input`\n border: none;\n outline: none;\n\n height: 40px;\n min-width: 40px;\n display: inline-flex;\n flex: 1;\n background: transparent;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n color: ${COLORS.black} !important;\n\n &::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n`;\n\nexport const ChipInputContainer = styled.div`\n width: 100%;\n height: auto;\n border-radius: 4px;\n margin: 4px 0px;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n background-color: ${COLORS.white};\n box-sizing: border-box;\n cursor: text;\n outline: none;\n display: flex;\n align-items: center;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n &.small {\n padding: 0;\n min-height: 48px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.medium {\n padding: 4px 0;\n min-height: 56px;\n\n ${ChipInputEl}::placeholder {\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.multiline.medium {\n ${ChipInputContentContainer} {\n max-height: calc(48px * 3);\n flex-wrap: wrap;\n overflow-y: auto;\n overflow-x: unset;\n }\n }\n\n &.focus-visible-within,\n :focus {\n ${focusStyles}\n }\n\n &:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n &:focus-within {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n &.invalid,\n &.invalid:hover,\n &.invalid:focus {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n &.disabled {\n ${ChipInputContentContainer} {\n pointer-events: none;\n }\n\n cursor: not-allowed;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n outline: none;\n color: ${COLORS.neutral_300} !important;\n }\n`;\n\nexport interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\n inputId: string;\n items: ChipItem[];\n disabled?: boolean;\n placeholder?: string;\n altPlaceholder?: string;\n multiLine?: boolean;\n size?: Size.Large | Size.Medium | Size.Small;\n loading?: boolean;\n required?: boolean;\n\n validationMessage?: string;\n\n onRemoveItem: (item: ChipItem, index: number) => void;\n inputValue: string;\n onInputValueChange: (value: string) => void;\n onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(\n (\n {\n inputId,\n items,\n disabled = false,\n placeholder,\n altPlaceholder,\n multiLine = true,\n size = Size.Medium,\n validationMessage,\n loading,\n onRemoveItem,\n onInputValueChange,\n onInputKeyDown,\n onActivationChange,\n inputValue,\n required,\n onBlur,\n ...rest\n },\n ref,\n ) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const inputRef = useFocusVisibleRef([containerRef]);\n \n React.useImperativeHandle(ref, () => inputRef.current, [inputRef])\n\n /**\n * Scroll container to last item on change\n * */\n React.useEffect(() => {\n if (inputRef.current && document.activeElement === inputRef.current) {\n inputRef.current.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }\n }, [containerRef, inputRef, items]);\n\n /**\n * Remove last cheap on backspace\n * */\n const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n onRemoveItem(items[items.length - 1], items.length - 1);\n } else {\n onInputKeyDown(e);\n }\n };\n\n const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n onRemoveItem(item, index);\n inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n };\n\n const handleInputClear = (e: any) => {\n onInputValueChange('');\n inputRef.current?.focus({focusVisible: e?.detail !== 1} as any);\n };\n\n const handleContainerKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n const currentIndex = Array.from(items).indexOf(e.target as any);\n const direction = e.key === 'ArrowLeft' ? -1 : 1;\n const item = items[currentIndex + direction];\n item?.focus({focusVisible: true} as any);\n\n onActivationChange && onActivationChange(false);\n };\n\n const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n return (\n <Wrapper onBlur={onBlur}>\n <ChipInputContainer\n data-testid=\"chip-input-container\"\n ref={containerRef}\n onKeyDown={handleContainerKeyDown}\n onClick={() => !disabled && inputRef.current?.focus()}\n className={cls}>\n <ChipInputContentContainer>\n {items?.map((chip: ChipItem, index: number) => (\n <InputChip\n key={`chip_${index}`}\n icon={chip?.icon}\n size={size}\n disabled={chip.disabled || disabled}\n variant={chip.variant || States.Default}\n text={chip.label}\n onRemove={(e) => handleItemRemove(e, chip, index)}\n />\n ))}\n <ChipInputBoundItems>\n <ChipInputEl\n ref={inputRef}\n type=\"text\"\n id={inputId}\n required={required}\n tabIndex={disabled ? -1 : 0}\n value={inputValue}\n onChange={(e) => onInputValueChange(e.target.value)}\n onKeyDown={handleInputKeyDown}\n placeholder={items?.length === 0 ? placeholder : altPlaceholder || ''}\n onClick={(e) => {\n e.stopPropagation();\n onActivationChange && onActivationChange(true);\n }}\n {...rest}\n />\n {inputValue && !disabled && (\n <IconButton\n id=\"clear-btn\"\n action={handleInputClear}\n ref={(ref) => {\n ref?.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }}\n useTransparentBackground={true}\n shape={'circular'}\n style={{marginLeft: '-8px'}}\n focusOnClick={true}\n variant={'secondary'}>\n <SystemIcons.Clear/>\n </IconButton>\n )}\n\n {loading && (\n <Loading className={size}>\n <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n </Loading>\n )}\n </ChipInputBoundItems>\n </ChipInputContentContainer>\n </ChipInputContainer>\n {validationMessage && (\n <ErrorMessage>\n <TechnicalWarning color={COLORS.critical_400}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </Wrapper>\n );\n },\n);\n"],"mappings":"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"}
|