@pega/cosmos-react-core 3.0.0-dev.28.0 → 3.0.0-dev.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (112) hide show
  1. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts.map +1 -1
  2. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js +23 -22
  3. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js.map +1 -1
  4. package/lib/components/Currency/CurrencyInput.types.d.ts +1 -1
  5. package/lib/components/Currency/CurrencyInput.types.d.ts.map +1 -1
  6. package/lib/components/Currency/CurrencyInput.types.js.map +1 -1
  7. package/lib/components/DateTime/DateTime.types.d.ts +13 -9
  8. package/lib/components/DateTime/DateTime.types.d.ts.map +1 -1
  9. package/lib/components/DateTime/DateTime.types.js.map +1 -1
  10. package/lib/components/DateTime/Input/DateInput.d.ts +6 -2
  11. package/lib/components/DateTime/Input/DateInput.d.ts.map +1 -1
  12. package/lib/components/DateTime/Input/DateInput.js +11 -10
  13. package/lib/components/DateTime/Input/DateInput.js.map +1 -1
  14. package/lib/components/DateTime/Input/DateRangeInput.d.ts +16 -29
  15. package/lib/components/DateTime/Input/DateRangeInput.d.ts.map +1 -1
  16. package/lib/components/DateTime/Input/DateRangeInput.js +95 -82
  17. package/lib/components/DateTime/Input/DateRangeInput.js.map +1 -1
  18. package/lib/components/DateTime/Input/DateTimeInput.d.ts.map +1 -1
  19. package/lib/components/DateTime/Input/DateTimeInput.js +3 -2
  20. package/lib/components/DateTime/Input/DateTimeInput.js.map +1 -1
  21. package/lib/components/DateTime/Input/TimeInput.d.ts.map +1 -1
  22. package/lib/components/DateTime/Input/TimeInput.js +3 -2
  23. package/lib/components/DateTime/Input/TimeInput.js.map +1 -1
  24. package/lib/components/DateTime/Input/TimeRangeInput.d.ts +46 -0
  25. package/lib/components/DateTime/Input/TimeRangeInput.d.ts.map +1 -0
  26. package/lib/components/DateTime/Input/TimeRangeInput.js +74 -0
  27. package/lib/components/DateTime/Input/TimeRangeInput.js.map +1 -0
  28. package/lib/components/DateTime/Input/WeekInput.js +2 -2
  29. package/lib/components/DateTime/Input/WeekInput.js.map +1 -1
  30. package/lib/components/DateTime/Picker/Calendar.js +1 -1
  31. package/lib/components/DateTime/Picker/Calendar.js.map +1 -1
  32. package/lib/components/DateTime/Picker/TimePicker.d.ts +1 -1
  33. package/lib/components/DateTime/Picker/TimePicker.d.ts.map +1 -1
  34. package/lib/components/DateTime/Picker/TimePicker.js.map +1 -1
  35. package/lib/components/DateTime/index.d.ts +2 -0
  36. package/lib/components/DateTime/index.d.ts.map +1 -1
  37. package/lib/components/DateTime/index.js +1 -0
  38. package/lib/components/DateTime/index.js.map +1 -1
  39. package/lib/components/FieldValueList/FieldValueList.js +1 -1
  40. package/lib/components/FieldValueList/FieldValueList.js.map +1 -1
  41. package/lib/components/Flex/Flex.d.ts +10 -9
  42. package/lib/components/Flex/Flex.d.ts.map +1 -1
  43. package/lib/components/Flex/Flex.js.map +1 -1
  44. package/lib/components/Grid/Grid.d.ts +1 -1
  45. package/lib/components/Grid/Grid.d.ts.map +1 -1
  46. package/lib/components/Grid/Grid.types.d.ts +10 -8
  47. package/lib/components/Grid/Grid.types.d.ts.map +1 -1
  48. package/lib/components/Grid/Grid.types.js.map +1 -1
  49. package/lib/components/Icon/iconNames.d.ts +1 -1
  50. package/lib/components/Icon/iconNames.d.ts.map +1 -1
  51. package/lib/components/Icon/iconNames.js.map +1 -1
  52. package/lib/components/Icon/index.d.ts +1 -1
  53. package/lib/components/Icon/index.d.ts.map +1 -1
  54. package/lib/components/Icon/index.js.map +1 -1
  55. package/lib/components/Input/Input.styles.d.ts +1 -0
  56. package/lib/components/Input/Input.styles.d.ts.map +1 -1
  57. package/lib/components/Input/Input.styles.js +31 -0
  58. package/lib/components/Input/Input.styles.js.map +1 -1
  59. package/lib/components/Link/Link.d.ts +4 -1
  60. package/lib/components/Link/Link.d.ts.map +1 -1
  61. package/lib/components/Link/Link.js +37 -9
  62. package/lib/components/Link/Link.js.map +1 -1
  63. package/lib/components/Location/LocationView.d.ts.map +1 -1
  64. package/lib/components/Location/LocationView.js +2 -2
  65. package/lib/components/Location/LocationView.js.map +1 -1
  66. package/lib/components/Number/NumberInput.d.ts +1 -1
  67. package/lib/components/Number/NumberInput.d.ts.map +1 -1
  68. package/lib/components/Number/NumberInput.js +4 -4
  69. package/lib/components/Number/NumberInput.js.map +1 -1
  70. package/lib/components/Number/NumberInput.styles.d.ts.map +1 -1
  71. package/lib/components/Number/NumberInput.styles.js +2 -0
  72. package/lib/components/Number/NumberInput.styles.js.map +1 -1
  73. package/lib/components/Number/NumberInput.types.d.ts +54 -20
  74. package/lib/components/Number/NumberInput.types.d.ts.map +1 -1
  75. package/lib/components/Number/NumberInput.types.js.map +1 -1
  76. package/lib/components/Number/NumberRangeInput.d.ts +6 -0
  77. package/lib/components/Number/NumberRangeInput.d.ts.map +1 -0
  78. package/lib/components/Number/NumberRangeInput.js +30 -0
  79. package/lib/components/Number/NumberRangeInput.js.map +1 -0
  80. package/lib/components/Number/index.d.ts +3 -2
  81. package/lib/components/Number/index.d.ts.map +1 -1
  82. package/lib/components/Number/index.js +1 -0
  83. package/lib/components/Number/index.js.map +1 -1
  84. package/lib/components/RadioCheckGroup/RadioCheckGroup.d.ts +1 -0
  85. package/lib/components/RadioCheckGroup/RadioCheckGroup.d.ts.map +1 -1
  86. package/lib/components/RadioCheckGroup/RadioCheckGroup.js +1 -1
  87. package/lib/components/RadioCheckGroup/RadioCheckGroup.js.map +1 -1
  88. package/lib/components/RadioCheckGroup/index.d.ts +1 -1
  89. package/lib/components/RadioCheckGroup/index.d.ts.map +1 -1
  90. package/lib/components/RadioCheckGroup/index.js +1 -1
  91. package/lib/components/RadioCheckGroup/index.js.map +1 -1
  92. package/lib/components/Slider/Slider.styles.d.ts +1 -1
  93. package/lib/components/SummaryItem/SummaryItem.d.ts +2 -2
  94. package/lib/hooks/useI18n.d.ts +13 -1
  95. package/lib/hooks/useI18n.d.ts.map +1 -1
  96. package/lib/i18n/default.d.ts +13 -1
  97. package/lib/i18n/default.d.ts.map +1 -1
  98. package/lib/i18n/default.js +15 -1
  99. package/lib/i18n/default.js.map +1 -1
  100. package/lib/i18n/i18n.d.ts +13 -1
  101. package/lib/i18n/i18n.d.ts.map +1 -1
  102. package/lib/styles/utils.d.ts +1 -1
  103. package/lib/styles/utils.d.ts.map +1 -1
  104. package/lib/styles/utils.js.map +1 -1
  105. package/lib/types/types.d.ts +3 -0
  106. package/lib/types/types.d.ts.map +1 -1
  107. package/lib/types/types.js.map +1 -1
  108. package/package.json +1 -1
  109. package/lib/components/DateTime/types.d.ts +0 -9
  110. package/lib/components/DateTime/types.d.ts.map +0 -1
  111. package/lib/components/DateTime/types.js +0 -2
  112. package/lib/components/DateTime/types.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"Input.styles.js","sourceRoot":"","sources":["../../../src/components/Input/Input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE;IACnE,OAAO,GAAG,CAAA;;cAEE,UAAU,CAAC,KAAK,CAAC,MAAM;kBACnB,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;iBAC9B,UAAU,CAAC,KAAK,CAAC,OAAO;;;;;;oBAMrB,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,eAAe,WAAW,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\n\nconst StyledInput = styled.input(({ theme: { base, components } }) => {\n return css`\n width: 100%;\n height: ${components.input.height};\n min-height: ${base['hit-area']['mouse-min']};\n padding: 0 ${components.input.padding};\n appearance: none;\n -webkit-appearance: none;\n text-align: inherit;\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n `;\n});\n\nStyledInput.defaultProps = defaultThemeProp;\n\nexport default StyledInput;\n"]}
1
+ {"version":3,"file":"Input.styles.js","sourceRoot":"","sources":["../../../src/components/Input/Input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAA;;;IAG/C,iBAAiB;;;;;QAKb,iBAAiB;;;;;;;;;MASnB,iBAAiB;;;;;;;;;;;CAWtB,CAAC;AAEF,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE;IACnE,OAAO,GAAG,CAAA;;cAEE,UAAU,CAAC,KAAK,CAAC,MAAM;kBACnB,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;iBAC9B,UAAU,CAAC,KAAK,CAAC,OAAO;;;;;;oBAMrB,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,eAAe,WAAW,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledFormControl } from '../FormControl';\n\nexport const StyledRangeInputContainer = styled.div`\n gap: 1rem;\n\n ${StyledFormControl} {\n position: relative;\n }\n\n > :first-child {\n > ${StyledFormControl}:after {\n content: '-';\n position: absolute;\n width: 1rem;\n inset-inline-end: -1rem;\n text-align: center;\n }\n }\n\n > ${StyledFormControl}:first-child:after {\n content: '-';\n position: absolute;\n width: 1rem;\n inset-inline-end: -1rem;\n text-align: center;\n }\n\n > * {\n flex-grow: 1;\n }\n`;\n\nStyledRangeInputContainer.defaultProps = defaultThemeProp;\n\nconst StyledInput = styled.input(({ theme: { base, components } }) => {\n return css`\n width: 100%;\n height: ${components.input.height};\n min-height: ${base['hit-area']['mouse-min']};\n padding: 0 ${components.input.padding};\n appearance: none;\n -webkit-appearance: none;\n text-align: inherit;\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n `;\n});\n\nStyledInput.defaultProps = defaultThemeProp;\n\nexport default StyledInput;\n"]}
@@ -27,8 +27,11 @@ export interface LinkProps extends BaseProps {
27
27
  /** Ref for the wrapping element. */
28
28
  ref?: Ref<HTMLAnchorElement>;
29
29
  }
30
- export declare const StyledLinkPopover: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
30
+ export declare const StyledLinkPopover: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
31
+ preview: boolean;
32
+ }, never>;
31
33
  export declare const StyledLinkPopoverBtn: import("styled-components").StyledComponent<FunctionComponent<import("../Button/BareButton").BareButtonProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
34
+ export declare const StyledLinkPreviewPopoverBtn: import("styled-components").StyledComponent<FunctionComponent<import("../Button/BareButton").BareButtonProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
32
35
  export declare const StyledLink: import("styled-components").StyledComponent<FunctionComponent<ButtonProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
33
36
  declare const Link: FunctionComponent<LinkProps & ForwardProps>;
34
37
  export default Link;
@@ -1 +1 @@
1
- {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EACT,iBAAiB,EACjB,GAAG,EAMJ,MAAM,OAAO,CAAC;AAIf,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAkBtD,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,mFAAmF;IACnF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iFAAiF;IACjF,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1C,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,iBAAiB,yGAK7B,CAAC;AAIF,eAAO,MAAM,oBAAoB,oLA6D/B,CAAC;AAIH,eAAO,MAAM,UAAU,iJAAmB,CAAC;AAI3C,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA4FrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
1
+ {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EACT,iBAAiB,EACjB,GAAG,EAMJ,MAAM,OAAO,CAAC;AAIf,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAkBtD,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,mFAAmF;IACnF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iFAAiF;IACjF,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1C,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,iBAAiB;aAAyB,OAAO;SAQ7D,CAAC;AAIF,eAAO,MAAM,oBAAoB,oLAyC/B,CAAC;AAIH,eAAO,MAAM,2BAA2B,oLA+BtC,CAAC;AAIH,eAAO,MAAM,UAAU,iJAAmB,CAAC;AAI3C,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA4IrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
@@ -14,9 +14,12 @@ import { Keyboard } from '../Badges';
14
14
  import Text, { StyledText } from '../Text';
15
15
  import { StyledKeyboard } from '../Badges/Keyboard';
16
16
  import Flex from '../Flex';
17
- export const StyledLinkPopover = styled.div(({ theme }) => css `
17
+ export const StyledLinkPopover = styled.div(({ theme, preview }) => css `
18
18
  background-color: ${theme.components.tooltip['background-color']};
19
- padding: ${theme.base.spacing};
19
+ ${preview &&
20
+ css `
21
+ padding: ${theme.base.spacing};
22
+ `}
20
23
  `);
21
24
  StyledLinkPopover.defaultProps = defaultThemeProp;
22
25
  export const StyledLinkPopoverBtn = styled(BareButton)(({ theme }) => {
@@ -27,12 +30,12 @@ export const StyledLinkPopoverBtn = styled(BareButton)(({ theme }) => {
27
30
  display: inline-flex;
28
31
  align-items: center;
29
32
  z-index: 1;
33
+ padding: 0 ${theme.base.spacing};
30
34
  min-height: 1.5rem;
31
35
  line-height: 1;
32
36
  color: ${contrastColor};
33
37
  font-size: ${fontSize.xs};
34
38
  text-decoration: none;
35
- width: 100%;
36
39
 
37
40
  /* FIXME: Button selector specificity... */
38
41
  & + & {
@@ -51,15 +54,28 @@ export const StyledLinkPopoverBtn = styled(BareButton)(({ theme }) => {
51
54
 
52
55
  &:hover,
53
56
  &:active {
54
- ${StyledText} span {
55
- text-decoration: underline;
56
- }
57
+ text-decoration: underline;
57
58
  }
58
59
 
59
60
  &:focus {
60
61
  box-shadow: inset 0 0 0 0.0625rem ${theme.base.palette.light},
61
62
  0 0 0.125rem 0.0625rem ${theme.base.palette.interactive};
62
63
  }
64
+ `;
65
+ });
66
+ StyledLinkPopoverBtn.defaultProps = defaultThemeProp;
67
+ export const StyledLinkPreviewPopoverBtn = styled(StyledLinkPopoverBtn)(({ theme }) => {
68
+ return css `
69
+ width: 100%;
70
+ padding: unset;
71
+
72
+ &:hover,
73
+ &:active {
74
+ text-decoration: none;
75
+ ${StyledText} span {
76
+ text-decoration: underline;
77
+ }
78
+ }
63
79
 
64
80
  ${StyledText} {
65
81
  display: flex;
@@ -80,7 +96,7 @@ export const StyledLinkPopoverBtn = styled(BareButton)(({ theme }) => {
80
96
  }
81
97
  `;
82
98
  });
83
- StyledLinkPopoverBtn.defaultProps = defaultThemeProp;
99
+ StyledLinkPreviewPopoverBtn.defaultProps = defaultThemeProp;
84
100
  export const StyledLink = styled(Button) ``;
85
101
  StyledLink.defaultProps = defaultThemeProp;
86
102
  const Link = forwardRef(({ href, variant = 'link', previewable, onPreview, ...restProps }, ref) => {
@@ -89,21 +105,33 @@ const Link = forwardRef(({ href, variant = 'link', previewable, onPreview, ...re
89
105
  const uid = useUID();
90
106
  const linkRef = useConsolidatedRef(ref);
91
107
  const [popover, setPopover] = useState(false);
108
+ const [previewPopover, setPreviewPopover] = useState(false);
92
109
  const previewBtnRef = useRef(null);
93
110
  const isSmallOrAbove = useBreakpoint('sm');
94
111
  const t = useI18n();
95
112
  const { macintosh } = useOS();
96
113
  const openPopover = () => {
97
- if (isSmallOrAbove)
114
+ if (isSmallOrAbove && !previewPopover)
98
115
  setPopover(true);
99
116
  };
117
+ const openPreviewPopover = () => {
118
+ if (isSmallOrAbove && !popover)
119
+ setPreviewPopover(true);
120
+ };
100
121
  const closePopover = () => {
101
122
  setPopover(false);
102
123
  };
124
+ const closePreviewPopover = () => {
125
+ setPreviewPopover(false);
126
+ };
103
127
  const onEnterLink = () => {
104
128
  if (previewable)
105
129
  openPopover();
106
130
  };
131
+ const onFocusLink = () => {
132
+ if (previewable)
133
+ openPreviewPopover();
134
+ };
107
135
  const onPreviewClick = () => {
108
136
  previewTriggerRef.current = linkRef.current;
109
137
  onPreview?.({ href });
@@ -113,7 +141,7 @@ const Link = forwardRef(({ href, variant = 'link', previewable, onPreview, ...re
113
141
  onPreviewClick();
114
142
  }
115
143
  };
116
- return (_jsxs(_Fragment, { children: [_jsx(StyledLink, { href: href, variant: variant, ref: linkRef, ...restProps, onMouseEnter: onEnterLink, onMouseLeave: closePopover, onFocus: onEnterLink, onBlur: closePopover, onKeyUp: onKeyUp, "aria-describedby": previewable ? `${uid}-preview-instructions` : undefined }), !inModal && (_jsx(Popover, { show: popover, groupId: 'link_preview', showDelay: 'short', hideDelay: 'short', placement: 'bottom', target: linkRef.current, onMouseEnter: openPopover, onMouseLeave: closePopover, as: StyledLinkPopover, arrow: true, children: _jsx(StyledLinkPopoverBtn, { preview: true, type: 'button', ref: previewBtnRef, onClick: onPreviewClick, tabIndex: '-1', children: _jsxs(Text, { children: [_jsx("span", { children: t('preview') }), _jsxs(Flex, { container: { inline: true, justify: 'end' }, children: [_jsx(Keyboard, { keyName: 'Alt' }), _jsx(Keyboard, { keyName: 'P' })] })] }) }) })), previewable && (_jsx("span", { id: `${uid}-preview-instructions`, hidden: true, children: t('preview_link_instruction', [macintosh ? 'option' : 'alt']) }))] }));
144
+ return (_jsxs(_Fragment, { children: [_jsx(StyledLink, { href: href, variant: variant, ref: linkRef, ...restProps, onMouseEnter: onEnterLink, onMouseLeave: closePopover, onFocus: onFocusLink, onBlur: closePreviewPopover, onKeyUp: onKeyUp, "aria-describedby": previewable ? `${uid}-preview-instructions` : undefined }), !inModal && (_jsx(Popover, { show: previewPopover, groupId: 'link_preview', showDelay: 'short', hideDelay: 'short', placement: 'bottom', target: linkRef.current, onMouseEnter: openPopover, onMouseLeave: closePopover, as: StyledLinkPopover, arrow: true, preview: true, children: _jsx(StyledLinkPreviewPopoverBtn, { preview: true, type: 'button', ref: previewBtnRef, onClick: onPreviewClick, tabIndex: '-1', children: _jsxs(Text, { children: [_jsx("span", { children: t('preview') }), _jsxs(Flex, { container: { inline: true, justify: 'end' }, children: [_jsx(Keyboard, { keyName: 'Alt' }), _jsx(Keyboard, { keyName: 'P' })] })] }) }) })), _jsxs(Popover, { show: popover, groupId: 'link_preview', showDelay: 'short', hideDelay: 'short', placement: 'bottom', target: linkRef.current, onMouseEnter: openPopover, onMouseLeave: closePopover, as: StyledLinkPopover, arrow: true, children: [!inModal && (_jsx(StyledLinkPopoverBtn, { preview: true, type: 'button', ref: previewBtnRef, onClick: onPreviewClick, tabIndex: '-1', children: t('preview') })), _jsx(StyledLinkPopoverBtn, { forwardedAs: 'a', href: href, target: '_blank', rel: 'noreferrer', tabIndex: '-1', children: t('link_open_in_tab_text') })] }), previewable && (_jsx("span", { id: `${uid}-preview-instructions`, hidden: true, children: t('preview_link_instruction', [macintosh ? 'option' : 'alt']) }))] }));
117
145
  });
118
146
  export default Link;
119
147
  //# sourceMappingURL=Link.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n ReactNode,\n FunctionComponent,\n Ref,\n PropsWithoutRef,\n useState,\n useRef,\n KeyboardEvent,\n useContext\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport Button, { ButtonProps } from '../Button';\nimport Popover from '../Popover';\nimport BareButton from '../Button/BareButton';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport {\n useBreakpoint,\n useConsolidatedRef,\n useI18n,\n useUID,\n useModalContext,\n useOS\n} from '../../hooks';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport AppShellContext from '../AppShell/AppShellContext';\nimport { Keyboard } from '../Badges';\nimport Text, { StyledText } from '../Text';\nimport { StyledKeyboard } from '../Badges/Keyboard';\nimport Flex from '../Flex';\n\nexport interface LinkProps extends BaseProps {\n /** Text or content for the Link. */\n children: ReactNode;\n /** URL or DOM id to navigate to. */\n href: string;\n /**\n * Controls the styling of the Link.\n * @default \"link\"\n */\n variant?: ButtonProps['variant'];\n /**\n * Set the Icon prop to `true` if you're using just an Icon in your Link. Make sure to pass an Icon as children if `true`.\n * @default false\n */\n icon?: ButtonProps['icon'];\n /** Determines if the Link should render a popover when focused or hovered over. */\n previewable?: boolean;\n /** Callback function that is run when the preview popover is interacted with. */\n onPreview?: (e: { href: string }) => void;\n /** Specifies where to open the link href. */\n target?: string;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLAnchorElement>;\n}\n\nexport const StyledLinkPopover = styled.div(\n ({ theme }) => css`\n background-color: ${theme.components.tooltip['background-color']};\n padding: ${theme.base.spacing};\n `\n);\n\nStyledLinkPopover.defaultProps = defaultThemeProp;\n\nexport const StyledLinkPopoverBtn = styled(BareButton)(({ theme }) => {\n const contrastColor = tryCatch(() => readableColor(theme.base.palette.interactive));\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n position: relative;\n display: inline-flex;\n align-items: center;\n z-index: 1;\n min-height: 1.5rem;\n line-height: 1;\n color: ${contrastColor};\n font-size: ${fontSize.xs};\n text-decoration: none;\n width: 100%;\n\n /* FIXME: Button selector specificity... */\n & + & {\n margin: 0;\n }\n\n & + &::before {\n content: '';\n position: absolute;\n inset-inline-start: 0;\n inset-block: 0;\n width: 1px; /* stylelint-disable-line unit-allowed-list */\n background-color: ${contrastColor};\n opacity: ${theme.base.transparency['transparent-3']};\n }\n\n &:hover,\n &:active {\n ${StyledText} span {\n text-decoration: underline;\n }\n }\n\n &:focus {\n box-shadow: inset 0 0 0 0.0625rem ${theme.base.palette.light},\n 0 0 0.125rem 0.0625rem ${theme.base.palette.interactive};\n }\n\n ${StyledText} {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n }\n\n ${StyledKeyboard} {\n color: ${theme.base.palette.light};\n background-color: ${theme.base.colors.gray.dark};\n border-color: ${theme.base.colors.gray.medium};\n inset-block-start: unset;\n\n &:first-of-type {\n margin-inline: ${theme.base.spacing};\n }\n }\n `;\n});\n\nStyledLinkPopoverBtn.defaultProps = defaultThemeProp;\n\nexport const StyledLink = styled(Button)``;\n\nStyledLink.defaultProps = defaultThemeProp;\n\nconst Link: FunctionComponent<LinkProps & ForwardProps> = forwardRef(\n (\n { href, variant = 'link', previewable, onPreview, ...restProps }: PropsWithoutRef<LinkProps>,\n ref: LinkProps['ref']\n ) => {\n const { initialized: inModal } = useModalContext();\n const { previewTriggerRef } = useContext(AppShellContext);\n const uid = useUID();\n const linkRef = useConsolidatedRef(ref);\n const [popover, setPopover] = useState(false);\n const previewBtnRef = useRef<HTMLButtonElement>(null);\n const isSmallOrAbove = useBreakpoint('sm');\n const t = useI18n();\n const { macintosh } = useOS();\n\n const openPopover = () => {\n if (isSmallOrAbove) setPopover(true);\n };\n\n const closePopover = () => {\n setPopover(false);\n };\n\n const onEnterLink = () => {\n if (previewable) openPopover();\n };\n\n const onPreviewClick = () => {\n previewTriggerRef.current = linkRef.current;\n onPreview?.({ href });\n };\n\n const onKeyUp = (e: KeyboardEvent) => {\n if (e.getModifierState('Alt') && e.code === 'KeyP') {\n onPreviewClick();\n }\n };\n\n return (\n <>\n <StyledLink\n href={href}\n variant={variant}\n ref={linkRef as any}\n {...restProps}\n onMouseEnter={onEnterLink}\n onMouseLeave={closePopover}\n onFocus={onEnterLink}\n onBlur={closePopover}\n onKeyUp={onKeyUp}\n aria-describedby={previewable ? `${uid}-preview-instructions` : undefined}\n />\n\n {!inModal && (\n <Popover\n show={popover}\n groupId='link_preview'\n showDelay='short'\n hideDelay='short'\n placement='bottom'\n target={linkRef.current}\n onMouseEnter={openPopover}\n onMouseLeave={closePopover}\n as={StyledLinkPopover}\n arrow\n >\n <StyledLinkPopoverBtn\n preview\n type='button'\n ref={previewBtnRef}\n onClick={onPreviewClick}\n tabIndex='-1'\n >\n <Text>\n <span>{t('preview')}</span>\n <Flex container={{ inline: true, justify: 'end' }}>\n <Keyboard keyName='Alt' />\n <Keyboard keyName='P' />\n </Flex>\n </Text>\n </StyledLinkPopoverBtn>\n </Popover>\n )}\n\n {previewable && (\n <span id={`${uid}-preview-instructions`} hidden>\n {t('preview_link_instruction', [macintosh ? 'option' : 'alt'])}\n </span>\n )}\n </>\n );\n }\n);\n\nexport default Link;\n"]}
1
+ {"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n ReactNode,\n FunctionComponent,\n Ref,\n PropsWithoutRef,\n useState,\n useRef,\n KeyboardEvent,\n useContext\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport Button, { ButtonProps } from '../Button';\nimport Popover from '../Popover';\nimport BareButton from '../Button/BareButton';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport {\n useBreakpoint,\n useConsolidatedRef,\n useI18n,\n useUID,\n useModalContext,\n useOS\n} from '../../hooks';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport AppShellContext from '../AppShell/AppShellContext';\nimport { Keyboard } from '../Badges';\nimport Text, { StyledText } from '../Text';\nimport { StyledKeyboard } from '../Badges/Keyboard';\nimport Flex from '../Flex';\n\nexport interface LinkProps extends BaseProps {\n /** Text or content for the Link. */\n children: ReactNode;\n /** URL or DOM id to navigate to. */\n href: string;\n /**\n * Controls the styling of the Link.\n * @default \"link\"\n */\n variant?: ButtonProps['variant'];\n /**\n * Set the Icon prop to `true` if you're using just an Icon in your Link. Make sure to pass an Icon as children if `true`.\n * @default false\n */\n icon?: ButtonProps['icon'];\n /** Determines if the Link should render a popover when focused or hovered over. */\n previewable?: boolean;\n /** Callback function that is run when the preview popover is interacted with. */\n onPreview?: (e: { href: string }) => void;\n /** Specifies where to open the link href. */\n target?: string;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLAnchorElement>;\n}\n\nexport const StyledLinkPopover = styled.div<{ preview: boolean }>(\n ({ theme, preview }) => css`\n background-color: ${theme.components.tooltip['background-color']};\n ${preview &&\n css`\n padding: ${theme.base.spacing};\n `}\n `\n);\n\nStyledLinkPopover.defaultProps = defaultThemeProp;\n\nexport const StyledLinkPopoverBtn = styled(BareButton)(({ theme }) => {\n const contrastColor = tryCatch(() => readableColor(theme.base.palette.interactive));\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n position: relative;\n display: inline-flex;\n align-items: center;\n z-index: 1;\n padding: 0 ${theme.base.spacing};\n min-height: 1.5rem;\n line-height: 1;\n color: ${contrastColor};\n font-size: ${fontSize.xs};\n text-decoration: none;\n\n /* FIXME: Button selector specificity... */\n & + & {\n margin: 0;\n }\n\n & + &::before {\n content: '';\n position: absolute;\n inset-inline-start: 0;\n inset-block: 0;\n width: 1px; /* stylelint-disable-line unit-allowed-list */\n background-color: ${contrastColor};\n opacity: ${theme.base.transparency['transparent-3']};\n }\n\n &:hover,\n &:active {\n text-decoration: underline;\n }\n\n &:focus {\n box-shadow: inset 0 0 0 0.0625rem ${theme.base.palette.light},\n 0 0 0.125rem 0.0625rem ${theme.base.palette.interactive};\n }\n `;\n});\n\nStyledLinkPopoverBtn.defaultProps = defaultThemeProp;\n\nexport const StyledLinkPreviewPopoverBtn = styled(StyledLinkPopoverBtn)(({ theme }) => {\n return css`\n width: 100%;\n padding: unset;\n\n &:hover,\n &:active {\n text-decoration: none;\n ${StyledText} span {\n text-decoration: underline;\n }\n }\n\n ${StyledText} {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n }\n\n ${StyledKeyboard} {\n color: ${theme.base.palette.light};\n background-color: ${theme.base.colors.gray.dark};\n border-color: ${theme.base.colors.gray.medium};\n inset-block-start: unset;\n\n &:first-of-type {\n margin-inline: ${theme.base.spacing};\n }\n }\n `;\n});\n\nStyledLinkPreviewPopoverBtn.defaultProps = defaultThemeProp;\n\nexport const StyledLink = styled(Button)``;\n\nStyledLink.defaultProps = defaultThemeProp;\n\nconst Link: FunctionComponent<LinkProps & ForwardProps> = forwardRef(\n (\n { href, variant = 'link', previewable, onPreview, ...restProps }: PropsWithoutRef<LinkProps>,\n ref: LinkProps['ref']\n ) => {\n const { initialized: inModal } = useModalContext();\n const { previewTriggerRef } = useContext(AppShellContext);\n const uid = useUID();\n const linkRef = useConsolidatedRef(ref);\n const [popover, setPopover] = useState(false);\n const [previewPopover, setPreviewPopover] = useState(false);\n const previewBtnRef = useRef<HTMLButtonElement>(null);\n const isSmallOrAbove = useBreakpoint('sm');\n const t = useI18n();\n const { macintosh } = useOS();\n\n const openPopover = () => {\n if (isSmallOrAbove && !previewPopover) setPopover(true);\n };\n\n const openPreviewPopover = () => {\n if (isSmallOrAbove && !popover) setPreviewPopover(true);\n };\n\n const closePopover = () => {\n setPopover(false);\n };\n\n const closePreviewPopover = () => {\n setPreviewPopover(false);\n };\n\n const onEnterLink = () => {\n if (previewable) openPopover();\n };\n\n const onFocusLink = () => {\n if (previewable) openPreviewPopover();\n };\n\n const onPreviewClick = () => {\n previewTriggerRef.current = linkRef.current;\n onPreview?.({ href });\n };\n\n const onKeyUp = (e: KeyboardEvent) => {\n if (e.getModifierState('Alt') && e.code === 'KeyP') {\n onPreviewClick();\n }\n };\n\n return (\n <>\n <StyledLink\n href={href}\n variant={variant}\n ref={linkRef as any}\n {...restProps}\n onMouseEnter={onEnterLink}\n onMouseLeave={closePopover}\n onFocus={onFocusLink}\n onBlur={closePreviewPopover}\n onKeyUp={onKeyUp}\n aria-describedby={previewable ? `${uid}-preview-instructions` : undefined}\n />\n\n {!inModal && (\n <Popover\n show={previewPopover}\n groupId='link_preview'\n showDelay='short'\n hideDelay='short'\n placement='bottom'\n target={linkRef.current}\n onMouseEnter={openPopover}\n onMouseLeave={closePopover}\n as={StyledLinkPopover}\n arrow\n preview\n >\n <StyledLinkPreviewPopoverBtn\n preview\n type='button'\n ref={previewBtnRef}\n onClick={onPreviewClick}\n tabIndex='-1'\n >\n <Text>\n <span>{t('preview')}</span>\n <Flex container={{ inline: true, justify: 'end' }}>\n <Keyboard keyName='Alt' />\n <Keyboard keyName='P' />\n </Flex>\n </Text>\n </StyledLinkPreviewPopoverBtn>\n </Popover>\n )}\n\n <Popover\n show={popover}\n groupId='link_preview'\n showDelay='short'\n hideDelay='short'\n placement='bottom'\n target={linkRef.current}\n onMouseEnter={openPopover}\n onMouseLeave={closePopover}\n as={StyledLinkPopover}\n arrow\n >\n {!inModal && (\n <StyledLinkPopoverBtn\n preview\n type='button'\n ref={previewBtnRef}\n onClick={onPreviewClick}\n tabIndex='-1'\n >\n {t('preview')}\n </StyledLinkPopoverBtn>\n )}\n <StyledLinkPopoverBtn\n forwardedAs='a'\n href={href}\n target='_blank'\n rel='noreferrer'\n tabIndex='-1'\n >\n {t('link_open_in_tab_text')}\n </StyledLinkPopoverBtn>\n </Popover>\n\n {previewable && (\n <span id={`${uid}-preview-instructions`} hidden>\n {t('preview_link_instruction', [macintosh ? 'option' : 'alt'])}\n </span>\n )}\n </>\n );\n }\n);\n\nexport default Link;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"LocationView.d.ts","sourceRoot":"","sources":["../../../src/components/Location/LocationView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAgD,MAAM,OAAO,CAAC;AAGzE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAOxC,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEjC,OAAO,iBAAiB,MAAM,kBAAkB,CAAC;AAGjD,eAAO,MAAM,mBAAmB,yGAK/B,CAAC;AAIF,eAAO,MAAM,kBAAkB;;SAW7B,CAAC;AAkCH,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB,EAAE,SAAS;IACrE;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACvC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+IAA+I;IAC/I,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,KAAK,IAAI,CAAC;CACZ;AAQD,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAkHvC,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"LocationView.d.ts","sourceRoot":"","sources":["../../../src/components/Location/LocationView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAgD,MAAM,OAAO,CAAC;AAGzE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAMxC,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEjC,OAAO,iBAAiB,MAAM,kBAAkB,CAAC;AAGjD,eAAO,MAAM,mBAAmB,yGAK/B,CAAC;AAIF,eAAO,MAAM,kBAAkB;;SAW7B,CAAC;AAoCH,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB,EAAE,SAAS;IACrE;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACvC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+IAA+I;IAC/I,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,KAAK,IAAI,CAAC;CACZ;AAQD,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAiHvC,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -4,7 +4,6 @@ import styled, { css } from 'styled-components';
4
4
  import { defaultThemeProp } from '../../theme';
5
5
  import { hasProp } from '../../utils';
6
6
  import Progress from '../Progress';
7
- import Flex from '../Flex';
8
7
  import { Status } from '../Badges';
9
8
  import { loadMapsAPI, getCoords, toGoogleLatLng, getPlaceById, isLatLngObject } from './utils';
10
9
  import MapsContext from './MapsContext';
@@ -41,6 +40,7 @@ const StyledMap = styled.div(({ height, disabled, status, eMessage, theme: { bas
41
40
  `}
42
41
  `;
43
42
  });
43
+ StyledMap.defaultProps = defaultThemeProp;
44
44
  var LoadStatus;
45
45
  (function (LoadStatus) {
46
46
  LoadStatus["Init"] = "init";
@@ -130,7 +130,7 @@ const LocationView = (props) => {
130
130
  onError?.(error);
131
131
  });
132
132
  }, [location, status, zoomLevel, disabled, centerMapOnChange, onError]);
133
- return (_jsxs(StyledLocationView, { height: height, children: [_jsx(Flex, { as: StyledMap, ref: mapElemRef, height: height, disabled: disabled, status: status, eMessage: eMessage, ...restProps }), status === LoadStatus.Init && _jsx(Progress, { placement: 'local' }), status === LoadStatus.Error && eMessage && (_jsx(Status, { as: StyledLocationError, "aria-label": eMessage, variant: 'info', children: eMessage }))] }));
133
+ return (_jsxs(StyledLocationView, { height: height, children: [_jsx(StyledMap, { ref: mapElemRef, height: height, disabled: disabled, status: status, eMessage: eMessage, ...restProps }), status === LoadStatus.Init && _jsx(Progress, { placement: 'local' }), status === LoadStatus.Error && eMessage && (_jsx(Status, { as: StyledLocationError, "aria-label": eMessage, variant: 'info', children: eMessage }))] }));
134
134
  };
135
135
  export default LocationView;
136
136
  //# sourceMappingURL=LocationView.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"LocationView.js","sourceRoot":"","sources":["../../../src/components/Location/LocationView.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useContext, useRef, useState, useEffect, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { hasProp } from '../../utils';\nimport Progress from '../Progress';\nimport Flex from '../Flex';\nimport { Status } from '../Badges';\n\nimport { LatLng } from './types';\nimport { loadMapsAPI, getCoords, toGoogleLatLng, getPlaceById, isLatLngObject } from './utils';\nimport BaseLocationProps from './Location.types';\nimport MapsContext from './MapsContext';\n\nexport const StyledLocationError = styled.div`\n position: absolute;\n top: 40%;\n left: 50%;\n transform: translate(-50%, -50%);\n`;\n\nStyledLocationError.defaultProps = defaultThemeProp;\n\nexport const StyledLocationView = styled.div<{ height?: string }>(props => {\n const { height, theme } = props;\n\n return css`\n height: ${height};\n position: relative;\n flex: auto;\n border-radius: ${theme.base['border-radius']};\n mask-image: radial-gradient(white, black);\n -webkit-mask-image: radial-gradient(white, black);\n `;\n});\n\nStyledLocationView.defaultProps = defaultThemeProp;\n\nconst StyledMap = styled.div<{\n height?: string;\n status: string;\n disabled: boolean;\n eMessage: string;\n}>(\n ({\n height,\n disabled,\n status,\n eMessage,\n theme: {\n base: { 'disabled-opacity': disabledOpacity }\n }\n }) => {\n return css`\n height: ${height};\n ${disabled &&\n css`\n opacity: ${disabledOpacity};\n `}\n ${status === 'error' &&\n eMessage &&\n css`\n opacity: ${disabledOpacity};\n `}\n `;\n }\n);\n\nexport interface LocationViewProps extends BaseLocationProps, BaseProps {\n /**\n * Location string as either coordinates, name of a place, or 'current' for the current location.\n * @default 'current'\n */\n location?: LatLng | string | 'current';\n /**\n * Set to true to always center the map when the selected location changes. Toggling this from false to true will re-center map on the last pinned location.\n * @default false\n */\n centerMapOnChange?: boolean;\n /**\n * Height of the map container.\n * @default '25rem'\n */\n height?: string;\n /**\n * How much the map should zoom.\n * @default 13\n */\n zoomLevel?: number;\n /** Callback fired when user clicks on a location on the map. This function will be passed the coordinates of the location that was clicked. */\n onClick?: (coords: {\n latitude: number;\n longitude: number;\n name?: string;\n address?: string;\n }) => void;\n}\n\nenum LoadStatus {\n Init = 'init',\n Ready = 'ready',\n Error = 'error'\n}\n\nconst LocationView: FC<LocationViewProps> = (props: LocationViewProps) => {\n const {\n location = 'current',\n zoomLevel = 13,\n height = '25rem',\n centerMapOnChange = false,\n onClick,\n onError,\n disabled = false,\n ...restProps\n } = props;\n const { name, ...providerOpts } = useContext(MapsContext);\n const [status, setStatus] = useState<LoadStatus>(LoadStatus.Init);\n const [eMessage, setEMessage] = useState('');\n const mapElemRef = useRef<HTMLDivElement>();\n const map = useRef<google.maps.Map>();\n const marker = useRef<google.maps.Marker>();\n\n function initialize(): void {\n if (mapElemRef.current) {\n const position = toGoogleLatLng({ latitude: 0, longitude: 0 });\n map.current = new google.maps.Map(mapElemRef.current!, {\n center: position,\n zoom: 2,\n draggable: !disabled\n });\n marker.current = new google.maps.Marker({\n map: map.current,\n position\n });\n marker.current?.setVisible(false);\n if (onClick)\n map.current.addListener('click', (event: unknown) => {\n if (\n event &&\n typeof event === 'object' &&\n hasProp(event, 'placeId') &&\n typeof event.placeId === 'string'\n ) {\n getPlaceById(event.placeId).then(placeInfo => {\n if (hasProp(event, 'latLng') && isLatLngObject(event.latLng))\n onClick?.({\n ...placeInfo,\n latitude: event.latLng.lat(),\n longitude: event.latLng.lng()\n });\n });\n }\n });\n }\n }\n\n useEffect(() => {\n let unMounted = false;\n loadMapsAPI(name, providerOpts)\n .then(() => {\n if (!unMounted) {\n initialize();\n setStatus(LoadStatus.Ready);\n }\n })\n .catch((error: Error) => {\n setStatus(LoadStatus.Error);\n setEMessage(error.message);\n onError?.(error);\n });\n\n return () => {\n unMounted = true;\n if (map.current) google.maps.event.clearInstanceListeners(map.current);\n };\n }, []);\n\n useEffect(() => {\n getCoords(location!)\n .then(coords => {\n if (map.current) {\n map.current.setOptions({\n zoom: zoomLevel,\n draggable: !disabled\n });\n marker.current?.setPosition(toGoogleLatLng(coords));\n marker.current?.setVisible(true);\n if (centerMapOnChange) map.current.setCenter(toGoogleLatLng(coords));\n if (status !== LoadStatus.Ready) setStatus(LoadStatus.Ready);\n }\n })\n .catch((error: Error) => {\n if (status !== LoadStatus.Error) setStatus(LoadStatus.Error);\n marker.current?.setVisible(false);\n setEMessage(error.message);\n onError?.(error);\n });\n }, [location, status, zoomLevel, disabled, centerMapOnChange, onError]);\n\n return (\n <StyledLocationView height={height}>\n <Flex\n as={StyledMap}\n ref={mapElemRef as Ref<Element>}\n height={height}\n disabled={disabled}\n status={status}\n eMessage={eMessage}\n {...restProps}\n />\n {status === LoadStatus.Init && <Progress placement='local' />}\n {status === LoadStatus.Error && eMessage && (\n <Status as={StyledLocationError} aria-label={eMessage} variant='info'>\n {eMessage}\n </Status>\n )}\n </StyledLocationView>\n );\n};\n\nexport default LocationView;\n"]}
1
+ {"version":3,"file":"LocationView.js","sourceRoot":"","sources":["../../../src/components/Location/LocationView.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useContext, useRef, useState, useEffect, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { hasProp } from '../../utils';\nimport Progress from '../Progress';\nimport { Status } from '../Badges';\n\nimport { LatLng } from './types';\nimport { loadMapsAPI, getCoords, toGoogleLatLng, getPlaceById, isLatLngObject } from './utils';\nimport BaseLocationProps from './Location.types';\nimport MapsContext from './MapsContext';\n\nexport const StyledLocationError = styled.div`\n position: absolute;\n top: 40%;\n left: 50%;\n transform: translate(-50%, -50%);\n`;\n\nStyledLocationError.defaultProps = defaultThemeProp;\n\nexport const StyledLocationView = styled.div<{ height?: string }>(props => {\n const { height, theme } = props;\n\n return css`\n height: ${height};\n position: relative;\n flex: auto;\n border-radius: ${theme.base['border-radius']};\n mask-image: radial-gradient(white, black);\n -webkit-mask-image: radial-gradient(white, black);\n `;\n});\n\nStyledLocationView.defaultProps = defaultThemeProp;\n\nconst StyledMap = styled.div<{\n height?: string;\n status: string;\n disabled: boolean;\n eMessage: string;\n}>(\n ({\n height,\n disabled,\n status,\n eMessage,\n theme: {\n base: { 'disabled-opacity': disabledOpacity }\n }\n }) => {\n return css`\n height: ${height};\n ${disabled &&\n css`\n opacity: ${disabledOpacity};\n `}\n ${status === 'error' &&\n eMessage &&\n css`\n opacity: ${disabledOpacity};\n `}\n `;\n }\n);\n\nStyledMap.defaultProps = defaultThemeProp;\n\nexport interface LocationViewProps extends BaseLocationProps, BaseProps {\n /**\n * Location string as either coordinates, name of a place, or 'current' for the current location.\n * @default 'current'\n */\n location?: LatLng | string | 'current';\n /**\n * Set to true to always center the map when the selected location changes. Toggling this from false to true will re-center map on the last pinned location.\n * @default false\n */\n centerMapOnChange?: boolean;\n /**\n * Height of the map container.\n * @default '25rem'\n */\n height?: string;\n /**\n * How much the map should zoom.\n * @default 13\n */\n zoomLevel?: number;\n /** Callback fired when user clicks on a location on the map. This function will be passed the coordinates of the location that was clicked. */\n onClick?: (coords: {\n latitude: number;\n longitude: number;\n name?: string;\n address?: string;\n }) => void;\n}\n\nenum LoadStatus {\n Init = 'init',\n Ready = 'ready',\n Error = 'error'\n}\n\nconst LocationView: FC<LocationViewProps> = (props: LocationViewProps) => {\n const {\n location = 'current',\n zoomLevel = 13,\n height = '25rem',\n centerMapOnChange = false,\n onClick,\n onError,\n disabled = false,\n ...restProps\n } = props;\n const { name, ...providerOpts } = useContext(MapsContext);\n const [status, setStatus] = useState<LoadStatus>(LoadStatus.Init);\n const [eMessage, setEMessage] = useState('');\n const mapElemRef = useRef<HTMLDivElement>();\n const map = useRef<google.maps.Map>();\n const marker = useRef<google.maps.Marker>();\n\n function initialize(): void {\n if (mapElemRef.current) {\n const position = toGoogleLatLng({ latitude: 0, longitude: 0 });\n map.current = new google.maps.Map(mapElemRef.current, {\n center: position,\n zoom: 2,\n draggable: !disabled\n });\n marker.current = new google.maps.Marker({\n map: map.current,\n position\n });\n marker.current?.setVisible(false);\n if (onClick)\n map.current.addListener('click', (event: unknown) => {\n if (\n event &&\n typeof event === 'object' &&\n hasProp(event, 'placeId') &&\n typeof event.placeId === 'string'\n ) {\n getPlaceById(event.placeId).then(placeInfo => {\n if (hasProp(event, 'latLng') && isLatLngObject(event.latLng))\n onClick?.({\n ...placeInfo,\n latitude: event.latLng.lat(),\n longitude: event.latLng.lng()\n });\n });\n }\n });\n }\n }\n\n useEffect(() => {\n let unMounted = false;\n loadMapsAPI(name, providerOpts)\n .then(() => {\n if (!unMounted) {\n initialize();\n setStatus(LoadStatus.Ready);\n }\n })\n .catch((error: Error) => {\n setStatus(LoadStatus.Error);\n setEMessage(error.message);\n onError?.(error);\n });\n\n return () => {\n unMounted = true;\n if (map.current) google.maps.event.clearInstanceListeners(map.current);\n };\n }, []);\n\n useEffect(() => {\n getCoords(location!)\n .then(coords => {\n if (map.current) {\n map.current.setOptions({\n zoom: zoomLevel,\n draggable: !disabled\n });\n marker.current?.setPosition(toGoogleLatLng(coords));\n marker.current?.setVisible(true);\n if (centerMapOnChange) map.current.setCenter(toGoogleLatLng(coords));\n if (status !== LoadStatus.Ready) setStatus(LoadStatus.Ready);\n }\n })\n .catch((error: Error) => {\n if (status !== LoadStatus.Error) setStatus(LoadStatus.Error);\n marker.current?.setVisible(false);\n setEMessage(error.message);\n onError?.(error);\n });\n }, [location, status, zoomLevel, disabled, centerMapOnChange, onError]);\n\n return (\n <StyledLocationView height={height}>\n <StyledMap\n ref={mapElemRef as Ref<HTMLDivElement>}\n height={height}\n disabled={disabled}\n status={status}\n eMessage={eMessage}\n {...restProps}\n />\n {status === LoadStatus.Init && <Progress placement='local' />}\n {status === LoadStatus.Error && eMessage && (\n <Status as={StyledLocationError} aria-label={eMessage} variant='info'>\n {eMessage}\n </Status>\n )}\n </StyledLocationView>\n );\n};\n\nexport default LocationView;\n"]}
@@ -1,6 +1,6 @@
1
1
  import { FunctionComponent } from 'react';
2
2
  import { ForwardProps } from '../../types';
3
- import NumberInputProps from './NumberInput.types';
3
+ import { NumberInputProps } from './NumberInput.types';
4
4
  declare const NumberInput: FunctionComponent<NumberInputProps & ForwardProps>;
5
5
  export default NumberInput;
6
6
  //# sourceMappingURL=NumberInput.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAQf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAW3C,OAAO,gBAA+C,MAAM,qBAAqB,CAAC;AAWlF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA+MnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAQf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAW3C,OAAO,EAAE,gBAAgB,EAA6B,MAAM,qBAAqB,CAAC;AAWlF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA+NnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -6,15 +6,15 @@ import * as plusIcon from '../Icon/icons/plus.icon';
6
6
  import * as minusIcon from '../Icon/icons/minus.icon';
7
7
  import Flex from '../Flex';
8
8
  import FormField from '../FormField';
9
- import Input from '../Input';
10
9
  import { useConfiguration, useConsolidatedRef, useI18n, useInputFormatter, useUID } from '../../hooks';
10
+ import StyledInput from '../Input/Input.styles';
11
11
  import StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';
12
12
  import { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';
13
13
  import { getCleanedValue, getDecimalSign, getDecrementedValue, getFormattedValue, getIncrementedValue } from './utils';
14
14
  registerIcon(minusIcon, plusIcon);
15
15
  const NumberInput = forwardRef((props, ref) => {
16
16
  const uid = useUID();
17
- const { id = uid, status, label, labelHidden, info, required, disabled, readOnly, additionalInfo, value = '', onChange, onFocus, onBlur, onResolveSuggestion, unit, showDecimal = true, numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES, showGroupSeparators = true, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, variant, 'aria-label': ariaLabel, ...restProps } = props;
17
+ const { id = uid, status, label, labelHidden, info, required, disabled, readOnly, additionalInfo, value = '', onChange, onFocus, onBlur, onResolveSuggestion, unit, showDecimal = true, numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES, showGroupSeparators = true, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, variant, 'aria-label': ariaLabel, autoFocus, ...restProps } = props;
18
18
  const { locale } = useConfiguration();
19
19
  const inputRef = useConsolidatedRef(ref);
20
20
  const containerRef = useRef(null);
@@ -85,7 +85,7 @@ const NumberInput = forwardRef((props, ref) => {
85
85
  };
86
86
  const formattedValue = useInputFormatter(inputRef, value, formatValue, `\\p{N}${decimalSign}-`);
87
87
  const t = useI18n();
88
- const NumberInputComp = (_jsx(Input, { ...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }, inputMode: 'numeric', ref: inputRef, value: formattedValue, onKeyDown: onKeyDown, onFocus: onInputFocusEvent, onBlur: onInputFocusEvent, "aria-label": `${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`, maxLength: 16, as: StyledNumberInput, hasSuggestion: status === 'pending' && !!onResolveSuggestion, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled }));
88
+ const NumberInputComp = (_jsx(Flex, { as: StyledNumberInput, hasSuggestion: status === 'pending' && !!onResolveSuggestion, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, children: _jsx(StyledInput, { ...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }, inputMode: 'numeric', ref: inputRef, value: formattedValue, onKeyDown: onKeyDown, onFocus: onInputFocusEvent, onBlur: onInputFocusEvent, "aria-label": `${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`, maxLength: 16, autoFocus: autoFocus }) }));
89
89
  const onMinusClick = () => {
90
90
  onChange?.(getDecrementedValue(value, min, max, step));
91
91
  };
@@ -95,7 +95,7 @@ const NumberInput = forwardRef((props, ref) => {
95
95
  const StepperComp = (_jsxs(Flex, { as: StyledStepperInput, hasSuggestion: status === 'pending' && !!onResolveSuggestion, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, size: formattedValue?.length, children: [_jsx(Button, { variant: 'simple', icon: true, onClick: onMinusClick, "aria-label": t('number_decrement_value_by', [step]), readOnly: readOnly, disabled: disabled, tabIndex: -1, children: _jsx(Icon, { name: 'minus' }) }), _jsx(Flex, { container: { alignItems: 'center', wrap: 'nowrap', justify: 'center' }, item: { grow: 1 }, ref: containerRef, onClick: (e) => {
96
96
  if (e.target === containerRef.current)
97
97
  inputRef?.current?.focus();
98
- }, children: NumberInputComp }), _jsx(Button, { variant: 'simple', icon: true, onClick: onPlusClick, "aria-label": t('number_increment_value_by', [step]), readOnly: readOnly, disabled: disabled, tabIndex: -1, children: _jsx(Icon, { name: 'plus' }) })] }));
98
+ }, children: _jsx(StyledInput, { ...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }, inputMode: 'numeric', ref: inputRef, value: formattedValue, onKeyDown: onKeyDown, onFocus: onInputFocusEvent, onBlur: onInputFocusEvent, "aria-label": `${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`, maxLength: 16, autoFocus: autoFocus }) }), _jsx(Button, { variant: 'simple', icon: true, onClick: onPlusClick, "aria-label": t('number_increment_value_by', [step]), readOnly: readOnly, disabled: disabled, tabIndex: -1, children: _jsx(Icon, { name: 'plus' }) })] }));
99
99
  const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberInputComp;
100
100
  return label ? (_jsx(FormField, { ...{
101
101
  label,
@@ -1 +1 @@
1
- {"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeEvent,\n forwardRef,\n FunctionComponent,\n KeyboardEvent,\n PropsWithoutRef,\n useCallback,\n useMemo,\n useRef,\n FocusEvent\n} from 'react';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport Flex from '../Flex';\nimport FormField from '../FormField';\nimport { ForwardProps } from '../../types';\nimport Input from '../Input';\nimport {\n useConfiguration,\n useConsolidatedRef,\n useI18n,\n useInputFormatter,\n useUID\n} from '../../hooks';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport NumberInputProps, { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport {\n getCleanedValue,\n getDecimalSign,\n getDecrementedValue,\n getFormattedValue,\n getIncrementedValue\n} from './utils';\n\nregisterIcon(minusIcon, plusIcon);\n\nconst NumberInput: FunctionComponent<NumberInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<NumberInputProps>, ref: NumberInputProps['ref']) => {\n const uid = useUID();\n const {\n id = uid,\n status,\n label,\n labelHidden,\n info,\n required,\n disabled,\n readOnly,\n additionalInfo,\n value = '',\n onChange,\n onFocus,\n onBlur,\n onResolveSuggestion,\n unit,\n showDecimal = true,\n numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES,\n showGroupSeparators = true,\n min = Number.MIN_SAFE_INTEGER,\n max = Number.MAX_SAFE_INTEGER,\n step = 1,\n variant,\n 'aria-label': ariaLabel,\n ...restProps\n } = props;\n\n const { locale } = useConfiguration();\n const inputRef = useConsolidatedRef(ref);\n const containerRef = useRef<HTMLElement>(null);\n const maximumFractionDigits = showDecimal ? numberOfDecimalsProp : 0;\n const decimalSign = useMemo(() => getDecimalSign(locale), [locale]);\n\n const formatValue = useCallback(\n number => {\n return getFormattedValue(number, locale, unit, {\n useGrouping: showGroupSeparators,\n maximumFractionDigits\n });\n },\n [locale, unit, showGroupSeparators, maximumFractionDigits]\n );\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n const cleanedInputValue = getCleanedValue(inputValue, decimalSign, maximumFractionDigits);\n if (cleanedInputValue === value) return;\n onChange(cleanedInputValue);\n };\n\n const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (readOnly) return;\n const input = e.currentTarget;\n switch (e.key) {\n case 'ArrowUp':\n e.preventDefault();\n onChange(getIncrementedValue(value, min, max, step));\n break;\n case 'ArrowDown':\n e.preventDefault();\n onChange(getDecrementedValue(value, min, max, step));\n break;\n case decimalSign:\n if (input.value.includes(decimalSign)) {\n if (input.selectionStart && input.value.charAt(input.selectionStart) === decimalSign) {\n input.setSelectionRange(input.selectionStart + 1, input.selectionStart + 1);\n }\n e.preventDefault();\n } else if (\n input.selectionStart !== null &&\n !input.value.charAt(input.selectionStart - 1).match(/\\d/)\n ) {\n onChange(\n getCleanedValue(`${input.value}0${decimalSign}`, decimalSign, maximumFractionDigits)\n );\n e.preventDefault();\n }\n break;\n case '-':\n if (value.startsWith('-')) e.preventDefault();\n break;\n default:\n }\n };\n\n const onInputFocusEvent = (e: FocusEvent<HTMLInputElement>) => {\n let parsableValue = value;\n\n if (Number.isNaN(parseFloat(value))) {\n parsableValue = '';\n } else if (value?.endsWith('.')) {\n parsableValue = value.slice(0, -1);\n }\n\n if (e.type === 'focus') onFocus?.(parsableValue);\n else {\n if (parsableValue !== value) {\n onChange(parsableValue);\n }\n\n onBlur?.(parsableValue);\n }\n };\n\n const formattedValue = useInputFormatter(inputRef, value, formatValue, `\\\\p{N}${decimalSign}-`);\n\n const t = useI18n();\n\n const NumberInputComp = (\n <Input\n {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n inputMode='numeric'\n ref={inputRef}\n value={formattedValue}\n onKeyDown={onKeyDown}\n onFocus={onInputFocusEvent}\n onBlur={onInputFocusEvent}\n aria-label={`${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`}\n maxLength={16}\n as={StyledNumberInput}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n />\n );\n\n const onMinusClick = () => {\n onChange?.(getDecrementedValue(value, min, max, step));\n };\n\n const onPlusClick = () => {\n onChange?.(getIncrementedValue(value, min, max, step));\n };\n\n const StepperComp = (\n <Flex\n as={StyledStepperInput}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n size={formattedValue?.length}\n >\n <Button\n variant='simple'\n icon\n onClick={onMinusClick}\n aria-label={t('number_decrement_value_by', [step])}\n readOnly={readOnly}\n disabled={disabled}\n tabIndex={-1}\n >\n <Icon name='minus' />\n </Button>\n <Flex\n container={{ alignItems: 'center', wrap: 'nowrap', justify: 'center' }}\n item={{ grow: 1 }}\n ref={containerRef}\n onClick={(e: MouseEvent) => {\n if (e.target === containerRef.current) inputRef?.current?.focus();\n }}\n >\n {NumberInputComp}\n </Flex>\n <Button\n variant='simple'\n icon\n onClick={onPlusClick}\n aria-label={t('number_increment_value_by', [step])}\n readOnly={readOnly}\n disabled={disabled}\n tabIndex={-1}\n >\n <Icon name='plus' />\n </Button>\n </Flex>\n );\n\n const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberInputComp;\n\n return label ? (\n <FormField\n {...{\n label,\n labelHidden,\n id,\n info,\n status,\n required,\n readOnly,\n disabled,\n additionalInfo,\n onResolveSuggestion\n }}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default NumberInput;\n"]}
1
+ {"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAIV,WAAW,EACX,OAAO,EACP,MAAM,EAEP,MAAM,OAAO,CAAC;AAEf,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,OAAO,EACP,iBAAiB,EACjB,MAAM,EACP,MAAM,aAAa,CAAC;AACrB,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAEhD,OAAO,iBAAiB,EAAE,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC7E,OAAO,EAAoB,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EACL,eAAe,EACf,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAEjB,YAAY,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;AAElC,MAAM,WAAW,GAAuD,UAAU,CAChF,CAAC,KAAwC,EAAE,GAA4B,EAAE,EAAE;IACzE,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,EAAE,GAAG,GAAG,EACR,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,OAAO,EACP,MAAM,EACN,mBAAmB,EACnB,IAAI,EACJ,WAAW,GAAG,IAAI,EAClB,gBAAgB,EAAE,oBAAoB,GAAG,yBAAyB,EAClE,mBAAmB,GAAG,IAAI,EAC1B,GAAG,GAAG,MAAM,CAAC,gBAAgB,EAC7B,GAAG,GAAG,MAAM,CAAC,gBAAgB,EAC7B,IAAI,GAAG,CAAC,EACR,OAAO,EACP,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,MAAM,YAAY,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC/C,MAAM,qBAAqB,GAAG,WAAW,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC;IACrE,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEpE,MAAM,WAAW,GAAG,WAAW,CAC7B,MAAM,CAAC,EAAE;QACP,OAAO,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE;YAC7C,WAAW,EAAE,mBAAmB;YAChC,qBAAqB;SACtB,CAAC,CAAC;IACL,CAAC,EACD,CAAC,MAAM,EAAE,IAAI,EAAE,mBAAmB,EAAE,qBAAqB,CAAC,CAC3D,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAgC,EAAE,EAAE;QACzD,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAClC,MAAM,iBAAiB,GAAG,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,qBAAqB,CAAC,CAAC;QAC1F,IAAI,iBAAiB,KAAK,KAAK;YAAE,OAAO;QACxC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,CAAkC,EAAE,EAAE;QACvD,IAAI,QAAQ;YAAE,OAAO;QACrB,MAAM,KAAK,GAAG,CAAC,CAAC,aAAa,CAAC;QAC9B,QAAQ,CAAC,CAAC,GAAG,EAAE;YACb,KAAK,SAAS;gBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,QAAQ,CAAC,mBAAmB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;gBACrD,MAAM;YACR,KAAK,WAAW;gBACd,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,QAAQ,CAAC,mBAAmB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;gBACrD,MAAM;YACR,KAAK,WAAW;gBACd,IAAI,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;oBACrC,IAAI,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,WAAW,EAAE;wBACpF,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,GAAG,CAAC,EAAE,KAAK,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC;qBAC7E;oBACD,CAAC,CAAC,cAAc,EAAE,CAAC;iBACpB;qBAAM,IACL,KAAK,CAAC,cAAc,KAAK,IAAI;oBAC7B,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,EACzD;oBACA,QAAQ,CACN,eAAe,CAAC,GAAG,KAAK,CAAC,KAAK,IAAI,WAAW,EAAE,EAAE,WAAW,EAAE,qBAAqB,CAAC,CACrF,CAAC;oBACF,CAAC,CAAC,cAAc,EAAE,CAAC;iBACpB;gBACD,MAAM;YACR,KAAK,GAAG;gBACN,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;oBAAE,CAAC,CAAC,cAAc,EAAE,CAAC;gBAC9C,MAAM;YACR,QAAQ;SACT;IACH,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,CAA+B,EAAE,EAAE;QAC5D,IAAI,aAAa,GAAG,KAAK,CAAC;QAE1B,IAAI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE;YACnC,aAAa,GAAG,EAAE,CAAC;SACpB;aAAM,IAAI,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE;YAC/B,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;SACpC;QAED,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO;YAAE,OAAO,EAAE,CAAC,aAAa,CAAC,CAAC;aAC5C;YACH,IAAI,aAAa,KAAK,KAAK,EAAE;gBAC3B,QAAQ,CAAC,aAAa,CAAC,CAAC;aACzB;YAED,MAAM,EAAE,CAAC,aAAa,CAAC,CAAC;SACzB;IACH,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,iBAAiB,CAAC,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,WAAW,GAAG,CAAC,CAAC;IAEhG,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,eAAe,GAAG,CACtB,KAAC,IAAI,IACH,EAAE,EAAE,iBAAiB,EACrB,aAAa,EAAE,MAAM,KAAK,SAAS,IAAI,CAAC,CAAC,mBAAmB,EAC5D,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,EACnD,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,YAElB,KAAC,WAAW,OACN,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,EACvF,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,cAAc,EACrB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,iBAAiB,EAC1B,MAAM,EAAE,iBAAiB,gBACb,GAAG,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,EAC5E,SAAS,EAAE,EAAE,EACb,SAAS,EAAE,SAAS,GACpB,GACG,CACR,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,QAAQ,EAAE,CAAC,mBAAmB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;IACzD,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,QAAQ,EAAE,CAAC,mBAAmB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;IACzD,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAClB,MAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EACtB,aAAa,EAAE,MAAM,KAAK,SAAS,IAAI,CAAC,CAAC,mBAAmB,EAC5D,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,EACnD,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,cAAc,EAAE,MAAM,aAE5B,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,YAAY,gBACT,CAAC,CAAC,2BAA2B,EAAE,CAAC,IAAI,CAAC,CAAC,EAClD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,CAAC,YAEZ,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,EACT,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EACtE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,GAAG,EAAE,YAAY,EACjB,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;oBACzB,IAAI,CAAC,CAAC,MAAM,KAAK,YAAY,CAAC,OAAO;wBAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;gBACpE,CAAC,YAED,KAAC,WAAW,OACN,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,EACvF,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,cAAc,EACrB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,iBAAiB,EAC1B,MAAM,EAAE,iBAAiB,gBACb,GAAG,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,EAC5E,SAAS,EAAE,EAAE,EACb,SAAS,EAAE,SAAS,GACpB,GACG,EACP,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,WAAW,gBACR,CAAC,CAAC,2BAA2B,EAAE,CAAC,IAAI,CAAC,CAAC,EAClD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,CAAC,YAEZ,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACb,IACJ,CACR,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,KAAK,SAAS,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC;IAEhF,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,SAAS,OACJ;YACF,KAAK;YACL,WAAW;YACX,EAAE;YACF,IAAI;YACJ,MAAM;YACN,QAAQ;YACR,QAAQ;YACR,QAAQ;YACR,cAAc;YACd,mBAAmB;SACpB,YAEA,IAAI,GACK,CACb,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {\n ChangeEvent,\n forwardRef,\n FunctionComponent,\n KeyboardEvent,\n PropsWithoutRef,\n useCallback,\n useMemo,\n useRef,\n FocusEvent\n} from 'react';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport Flex from '../Flex';\nimport FormField from '../FormField';\nimport { ForwardProps } from '../../types';\nimport {\n useConfiguration,\n useConsolidatedRef,\n useI18n,\n useInputFormatter,\n useUID\n} from '../../hooks';\nimport StyledInput from '../Input/Input.styles';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport { NumberInputProps, NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport {\n getCleanedValue,\n getDecimalSign,\n getDecrementedValue,\n getFormattedValue,\n getIncrementedValue\n} from './utils';\n\nregisterIcon(minusIcon, plusIcon);\n\nconst NumberInput: FunctionComponent<NumberInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<NumberInputProps>, ref: NumberInputProps['ref']) => {\n const uid = useUID();\n const {\n id = uid,\n status,\n label,\n labelHidden,\n info,\n required,\n disabled,\n readOnly,\n additionalInfo,\n value = '',\n onChange,\n onFocus,\n onBlur,\n onResolveSuggestion,\n unit,\n showDecimal = true,\n numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES,\n showGroupSeparators = true,\n min = Number.MIN_SAFE_INTEGER,\n max = Number.MAX_SAFE_INTEGER,\n step = 1,\n variant,\n 'aria-label': ariaLabel,\n autoFocus,\n ...restProps\n } = props;\n\n const { locale } = useConfiguration();\n const inputRef = useConsolidatedRef(ref);\n const containerRef = useRef<HTMLElement>(null);\n const maximumFractionDigits = showDecimal ? numberOfDecimalsProp : 0;\n const decimalSign = useMemo(() => getDecimalSign(locale), [locale]);\n\n const formatValue = useCallback(\n number => {\n return getFormattedValue(number, locale, unit, {\n useGrouping: showGroupSeparators,\n maximumFractionDigits\n });\n },\n [locale, unit, showGroupSeparators, maximumFractionDigits]\n );\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n const cleanedInputValue = getCleanedValue(inputValue, decimalSign, maximumFractionDigits);\n if (cleanedInputValue === value) return;\n onChange(cleanedInputValue);\n };\n\n const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (readOnly) return;\n const input = e.currentTarget;\n switch (e.key) {\n case 'ArrowUp':\n e.preventDefault();\n onChange(getIncrementedValue(value, min, max, step));\n break;\n case 'ArrowDown':\n e.preventDefault();\n onChange(getDecrementedValue(value, min, max, step));\n break;\n case decimalSign:\n if (input.value.includes(decimalSign)) {\n if (input.selectionStart && input.value.charAt(input.selectionStart) === decimalSign) {\n input.setSelectionRange(input.selectionStart + 1, input.selectionStart + 1);\n }\n e.preventDefault();\n } else if (\n input.selectionStart !== null &&\n !input.value.charAt(input.selectionStart - 1).match(/\\d/)\n ) {\n onChange(\n getCleanedValue(`${input.value}0${decimalSign}`, decimalSign, maximumFractionDigits)\n );\n e.preventDefault();\n }\n break;\n case '-':\n if (value.startsWith('-')) e.preventDefault();\n break;\n default:\n }\n };\n\n const onInputFocusEvent = (e: FocusEvent<HTMLInputElement>) => {\n let parsableValue = value;\n\n if (Number.isNaN(parseFloat(value))) {\n parsableValue = '';\n } else if (value?.endsWith('.')) {\n parsableValue = value.slice(0, -1);\n }\n\n if (e.type === 'focus') onFocus?.(parsableValue);\n else {\n if (parsableValue !== value) {\n onChange(parsableValue);\n }\n\n onBlur?.(parsableValue);\n }\n };\n\n const formattedValue = useInputFormatter(inputRef, value, formatValue, `\\\\p{N}${decimalSign}-`);\n\n const t = useI18n();\n\n const NumberInputComp = (\n <Flex\n as={StyledNumberInput}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n >\n <StyledInput\n {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n inputMode='numeric'\n ref={inputRef}\n value={formattedValue}\n onKeyDown={onKeyDown}\n onFocus={onInputFocusEvent}\n onBlur={onInputFocusEvent}\n aria-label={`${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`}\n maxLength={16}\n autoFocus={autoFocus}\n />\n </Flex>\n );\n\n const onMinusClick = () => {\n onChange?.(getDecrementedValue(value, min, max, step));\n };\n\n const onPlusClick = () => {\n onChange?.(getIncrementedValue(value, min, max, step));\n };\n\n const StepperComp = (\n <Flex\n as={StyledStepperInput}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n size={formattedValue?.length}\n >\n <Button\n variant='simple'\n icon\n onClick={onMinusClick}\n aria-label={t('number_decrement_value_by', [step])}\n readOnly={readOnly}\n disabled={disabled}\n tabIndex={-1}\n >\n <Icon name='minus' />\n </Button>\n <Flex\n container={{ alignItems: 'center', wrap: 'nowrap', justify: 'center' }}\n item={{ grow: 1 }}\n ref={containerRef}\n onClick={(e: MouseEvent) => {\n if (e.target === containerRef.current) inputRef?.current?.focus();\n }}\n >\n <StyledInput\n {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n inputMode='numeric'\n ref={inputRef}\n value={formattedValue}\n onKeyDown={onKeyDown}\n onFocus={onInputFocusEvent}\n onBlur={onInputFocusEvent}\n aria-label={`${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`}\n maxLength={16}\n autoFocus={autoFocus}\n />\n </Flex>\n <Button\n variant='simple'\n icon\n onClick={onPlusClick}\n aria-label={t('number_increment_value_by', [step])}\n readOnly={readOnly}\n disabled={disabled}\n tabIndex={-1}\n >\n <Icon name='plus' />\n </Button>\n </Flex>\n );\n\n const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberInputComp;\n\n return label ? (\n <FormField\n {...{\n label,\n labelHidden,\n id,\n info,\n status,\n required,\n readOnly,\n disabled,\n additionalInfo,\n onResolveSuggestion\n }}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default NumberInput;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"NumberInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.styles.ts"],"names":[],"mappings":"AASA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,kBAAkB;;8BAmD7B,CAAC;AAIH,QAAA,MAAM,iBAAiB;;SA+BrB,CAAC;AAIH,eAAe,iBAAiB,CAAC"}
1
+ {"version":3,"file":"NumberInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.styles.ts"],"names":[],"mappings":"AASA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,kBAAkB;;8BAoD7B,CAAC;AAIH,QAAA,MAAM,iBAAiB;;SAgCrB,CAAC;AAIH,eAAe,iBAAiB,CAAC"}
@@ -20,6 +20,7 @@ export const StyledStepperInput = styled(StyledFormControl)(props => {
20
20
  ${StyledInput} {
21
21
  width: ${size}ch;
22
22
  min-width: 1ch;
23
+ outline: none;
23
24
  border: 0;
24
25
  padding: 0;
25
26
  background-color: ${palette['primary-background']};
@@ -53,6 +54,7 @@ const StyledNumberInput = styled(StyledFormControl)(props => {
53
54
  box-shadow: ${shadow};
54
55
  }
55
56
  ${StyledInput} {
57
+ outline: none;
56
58
  border: 0;
57
59
  padding: 0 calc(0.5 * ${spacing});
58
60
  background-color: ${palette['primary-background']};
@@ -1 +1 @@
1
- {"version":3,"file":"NumberInput.styles.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAMrC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAqB,KAAK,CAAC,EAAE;IACtF,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,OAAO,EAAE,EAC7D,UAAU,EAAE,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,EACjB,cAAc,EAAE,EACd,eAAe,EAAE,gBAAgB,EACjC,kBAAkB,EAAE,OAAO,EAC3B,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACrE,EACF,EACF,EACD,IAAI,EACL,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;sBAEU,gBAAgB;oBAClB,MAAM;;MAEpB,UAAU;;6BAEa,OAAO;2BACT,OAAO;;MAE5B,WAAW;eACF,IAAI;;;;0BAIO,OAAO,CAAC,oBAAoB,CAAC;;;;;MAKjD,UAAU;8BACc,OAAO;;;QAG7B,YAAY;4BACQ,gBAAgB,MAAM,gBAAgB;;;;iBAIjD,OAAO;;yBAEC,MAAM,UAAU,WAAW;qBAC/B,MAAM,UAAU,WAAW;;GAE7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,KAAK,CAAC,EAAE;IAC1D,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC1B,UAAU,EAAE,EACV,cAAc,EAAE,EACd,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACrE,EACF,EACF,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;4BACgB,OAAO;;sBAEb,gBAAgB;oBAClB,MAAM;;MAEpB,WAAW;;8BAEa,OAAO;0BACX,OAAO,CAAC,oBAAoB,CAAC;;;;;MAKjD,UAAU;8BACc,OAAO;;;GAGlC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,eAAe,iBAAiB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledFormControl } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport { StyledText } from '../Text/Text';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledButton } from '../Button';\nimport { StyledFlex } from '../Flex';\n\ninterface StyledStepperProps {\n size: number;\n}\n\nexport const StyledStepperInput = styled(StyledFormControl)<StyledStepperProps>(props => {\n const {\n theme: {\n base: { spacing, 'border-radius': baseBorderRadius, palette },\n components: {\n input: { height },\n 'form-control': {\n 'border-radius': formBorderRadius,\n 'foreground-color': fgColor,\n 'border-width': borderWidth,\n ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n }\n }\n },\n size\n } = props;\n return css`\n &:focus-within:not([disabled]) {\n border-color: ${focusBorderColor};\n box-shadow: ${shadow};\n }\n ${StyledFlex} {\n overflow: auto;\n margin-inline-start: ${spacing};\n margin-inline-end: ${spacing};\n }\n ${StyledInput} {\n width: ${size}ch;\n min-width: 1ch;\n border: 0;\n padding: 0;\n background-color: ${palette['primary-background']};\n &:focus:not([disabled]) {\n box-shadow: none;\n }\n }\n ${StyledText} {\n padding: 0 calc(0.5 * ${spacing});\n white-space: nowrap;\n }\n > ${StyledButton} {\n border-radius: calc(${baseBorderRadius} * ${formBorderRadius});\n margin-inline-start: auto;\n border: 0;\n &:enabled {\n color: ${fgColor};\n }\n min-height: calc(${height} - 2 * ${borderWidth});\n height: calc(${height} - 2 * ${borderWidth});\n }\n `;\n});\n\nStyledStepperInput.defaultProps = defaultThemeProp;\n\nconst StyledNumberInput = styled(StyledFormControl)(props => {\n const {\n theme: {\n base: { spacing, palette },\n components: {\n 'form-control': {\n ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n }\n }\n }\n } = props;\n\n return css`\n padding: 0 calc(0.5 * ${spacing});\n &:focus-within:not([disabled]) {\n border-color: ${focusBorderColor};\n box-shadow: ${shadow};\n }\n ${StyledInput} {\n border: 0;\n padding: 0 calc(0.5 * ${spacing});\n background-color: ${palette['primary-background']};\n &:focus:not([disabled]) {\n box-shadow: none;\n }\n }\n ${StyledText} {\n padding: 0 calc(0.5 * ${spacing});\n white-space: nowrap;\n }\n `;\n});\n\nStyledNumberInput.defaultProps = defaultThemeProp;\n\nexport default StyledNumberInput;\n"]}
1
+ {"version":3,"file":"NumberInput.styles.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAMrC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAqB,KAAK,CAAC,EAAE;IACtF,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,OAAO,EAAE,EAC7D,UAAU,EAAE,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,EACjB,cAAc,EAAE,EACd,eAAe,EAAE,gBAAgB,EACjC,kBAAkB,EAAE,OAAO,EAC3B,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACrE,EACF,EACF,EACD,IAAI,EACL,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;sBAEU,gBAAgB;oBAClB,MAAM;;MAEpB,UAAU;;6BAEa,OAAO;2BACT,OAAO;;MAE5B,WAAW;eACF,IAAI;;;;;0BAKO,OAAO,CAAC,oBAAoB,CAAC;;;;;MAKjD,UAAU;8BACc,OAAO;;;QAG7B,YAAY;4BACQ,gBAAgB,MAAM,gBAAgB;;;;iBAIjD,OAAO;;yBAEC,MAAM,UAAU,WAAW;qBAC/B,MAAM,UAAU,WAAW;;GAE7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,KAAK,CAAC,EAAE;IAC1D,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC1B,UAAU,EAAE,EACV,cAAc,EAAE,EACd,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACrE,EACF,EACF,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;4BACgB,OAAO;;sBAEb,gBAAgB;oBAClB,MAAM;;MAEpB,WAAW;;;8BAGa,OAAO;0BACX,OAAO,CAAC,oBAAoB,CAAC;;;;;MAKjD,UAAU;8BACc,OAAO;;;GAGlC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,eAAe,iBAAiB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledFormControl } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport { StyledText } from '../Text/Text';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledButton } from '../Button';\nimport { StyledFlex } from '../Flex';\n\ninterface StyledStepperProps {\n size: number;\n}\n\nexport const StyledStepperInput = styled(StyledFormControl)<StyledStepperProps>(props => {\n const {\n theme: {\n base: { spacing, 'border-radius': baseBorderRadius, palette },\n components: {\n input: { height },\n 'form-control': {\n 'border-radius': formBorderRadius,\n 'foreground-color': fgColor,\n 'border-width': borderWidth,\n ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n }\n }\n },\n size\n } = props;\n return css`\n &:focus-within:not([disabled]) {\n border-color: ${focusBorderColor};\n box-shadow: ${shadow};\n }\n ${StyledFlex} {\n overflow: auto;\n margin-inline-start: ${spacing};\n margin-inline-end: ${spacing};\n }\n ${StyledInput} {\n width: ${size}ch;\n min-width: 1ch;\n outline: none;\n border: 0;\n padding: 0;\n background-color: ${palette['primary-background']};\n &:focus:not([disabled]) {\n box-shadow: none;\n }\n }\n ${StyledText} {\n padding: 0 calc(0.5 * ${spacing});\n white-space: nowrap;\n }\n > ${StyledButton} {\n border-radius: calc(${baseBorderRadius} * ${formBorderRadius});\n margin-inline-start: auto;\n border: 0;\n &:enabled {\n color: ${fgColor};\n }\n min-height: calc(${height} - 2 * ${borderWidth});\n height: calc(${height} - 2 * ${borderWidth});\n }\n `;\n});\n\nStyledStepperInput.defaultProps = defaultThemeProp;\n\nconst StyledNumberInput = styled(StyledFormControl)(props => {\n const {\n theme: {\n base: { spacing, palette },\n components: {\n 'form-control': {\n ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n }\n }\n }\n } = props;\n\n return css`\n padding: 0 calc(0.5 * ${spacing});\n &:focus-within:not([disabled]) {\n border-color: ${focusBorderColor};\n box-shadow: ${shadow};\n }\n ${StyledInput} {\n outline: none;\n border: 0;\n padding: 0 calc(0.5 * ${spacing});\n background-color: ${palette['primary-background']};\n &:focus:not([disabled]) {\n box-shadow: none;\n }\n }\n ${StyledText} {\n padding: 0 calc(0.5 * ${spacing});\n white-space: nowrap;\n }\n `;\n});\n\nStyledNumberInput.defaultProps = defaultThemeProp;\n\nexport default StyledNumberInput;\n"]}
@@ -1,7 +1,7 @@
1
1
  import { Ref } from 'react';
2
2
  import { FormControlProps } from '../FormControl';
3
3
  import { BaseProps, NoChildrenProp } from '../../types';
4
- export default interface NumberInputProps extends BaseProps, NoChildrenProp {
4
+ export interface NumberProps extends BaseProps, NoChildrenProp {
5
5
  /**
6
6
  * Sets DOM id for the control and associates label element via 'for' attribute.
7
7
  * If an id is not pass, a random id will be generated for any render.
@@ -30,26 +30,13 @@ export default interface NumberInputProps extends BaseProps, NoChildrenProp {
30
30
  name?: FormControlProps['name'];
31
31
  /** Button when clicked will show additional information */
32
32
  additionalInfo?: FormControlProps['additionalInfo'];
33
- /**
34
- * CurrencyInput input value.
35
- * Requires an onChange handler to update value.
36
- */
37
- value?: string;
38
- /** Callback fired when input value changes. */
39
- onChange: (value: string) => void;
40
- /** Callback fired when the component gets focus. */
41
- onFocus?: (value: string) => void;
42
- /** Callback fired when the component loses focus. */
43
- onBlur?: (value: string) => void;
44
- /** Callback fired when AI suggestion is accepted/rejected */
45
- onResolveSuggestion?: FormControlProps['onResolveSuggestion'];
46
33
  /** Defines unit of the number, like 'kg', 'miles' or '%'. */
47
34
  unit?: string;
48
35
  /**
49
- *
50
- /** Determines whether decimal places should be shown. The value is rounded if true.
51
- * @default true
52
- */
36
+ *
37
+ /** Determines whether decimal places should be shown. The value is rounded if true.
38
+ * @default true
39
+ */
53
40
  showDecimal?: boolean;
54
41
  /** Determines the maximum number of decimal places. The value is rounded to the number of places.
55
42
  * @default variable NUMBER_MAX_DECIMAL_PLACES. Recommended minimum: 1.
@@ -79,10 +66,57 @@ export default interface NumberInputProps extends BaseProps, NoChildrenProp {
79
66
  * @default 'default'
80
67
  */
81
68
  variant?: 'default' | 'stepper';
82
- /** Ref for the wrapping element. */
83
- ref?: Ref<HTMLInputElement>;
84
69
  /** Optional manual override for generated aria label */
85
70
  'aria-label'?: string;
71
+ /** Automatically focuses the input on render. */
72
+ autoFocus?: boolean;
73
+ }
74
+ export interface NumberInputProps extends NumberProps {
75
+ /**
76
+ * CurrencyInput input value.
77
+ * Requires an onChange handler to update value.
78
+ */
79
+ value?: string;
80
+ /** Callback fired when input value changes. */
81
+ onChange: (value: string) => void;
82
+ /** Callback fired when the component gets focus. */
83
+ onFocus?: (value: string) => void;
84
+ /** Callback fired when the component loses focus. */
85
+ onBlur?: (value: string) => void;
86
+ /** Callback fired when AI suggestion is accepted/rejected */
87
+ onResolveSuggestion?: FormControlProps['onResolveSuggestion'];
88
+ /** Ref for the wrapping element. */
89
+ ref?: Ref<HTMLInputElement>;
90
+ }
91
+ export interface NumberRangeInputProps extends NumberProps {
92
+ /** Range as a tuple of start and end. */
93
+ value?: {
94
+ start?: string;
95
+ end?: string;
96
+ };
97
+ /** Callback for any modifications to the range */
98
+ onChange: (value: {
99
+ start: string;
100
+ end: string;
101
+ }) => void;
102
+ /** Callback fired when the component loses focus. */
103
+ onBlur?: (value: {
104
+ start: string;
105
+ end: string;
106
+ }) => void;
107
+ /** Callback fired when the component gets focus. */
108
+ onFocus?: (value: {
109
+ start: string;
110
+ end: string;
111
+ }) => void;
112
+ /** Pass a string or a fragment with an Icon and string for first part of NumberRangeInput. */
113
+ fromLabel?: FormControlProps['label'];
114
+ /** Pass a string or a fragment with an Icon and string for second part of NumberRangeInput. */
115
+ toLabel?: FormControlProps['label'];
116
+ /** Pass an object with "heading" and "content" properties to show AdditionalInfo for first part of NumberRangeInput. */
117
+ fromAdditionalInfo?: FormControlProps['additionalInfo'];
118
+ /** Pass an object with "heading" and "content" properties to show AdditionalInfo for second part of NumberRangeInput. */
119
+ toAdditionalInfo?: FormControlProps['additionalInfo'];
86
120
  }
87
121
  /** Maximum fraction digits is 20. */
88
122
  export declare const NUMBER_MAX_DECIMAL_PLACES = 20;
@@ -1 +1 @@
1
- {"version":3,"file":"NumberInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,CAAC,OAAO,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACzE;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,yFAAyF;IACzF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,2DAA2D;IAC3D,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qDAAqD;IACrD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAC9D,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,qCAAqC;AACrC,eAAO,MAAM,yBAAyB,KAAK,CAAC"}
1
+ {"version":3,"file":"NumberInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"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"}