@dxc-technology/halstack-react 0.0.0-5a4d834 → 0.0.0-5a7a613

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 (8) hide show
  1. package/bar-chart/BarChart.js +13 -8
  2. package/container/Container.stories.tsx +3 -2
  3. package/date-input/DateInput.js +114 -31
  4. package/date-input/DateInput.stories.tsx +13 -8
  5. package/date-input/DatePicker.js +4 -4
  6. package/main.d.ts +2 -1
  7. package/main.js +7 -0
  8. package/package.json +1 -1
package/bar-chart/BarChart.js CHANGED
@@ -13,7 +13,12 @@ var _components = require("@cloudscape-design/components");
13
13
  var _theming = require("@cloudscape-design/components/theming");
14
14
  var _theme = _interopRequireDefault(require("./theme"));
15
15
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
16
- var _main = require("../main");
16
+ var _Spinner = _interopRequireDefault(require("../spinner/Spinner"));
17
+ var _Inset = _interopRequireDefault(require("../inset/Inset"));
18
+ var _Select = _interopRequireDefault(require("../select/Select"));
19
+ var _Button = _interopRequireDefault(require("../button/Button"));
20
+ var _Heading = _interopRequireDefault(require("../heading/Heading"));
21
+ var _Grid = _interopRequireDefault(require("../grid/Grid"));
17
22
  var _Icon = _interopRequireDefault(require("../icon/Icon"));
18
23
  var _coreTokens = _interopRequireDefault(require("../common/coreTokens"));
19
24
  var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
@@ -35,7 +40,7 @@ var StatusMessage = /*#__PURE__*/(0, _react.memo)(function (_ref) {
35
40
  var InsetWrapper = function InsetWrapper(_ref2) {
36
41
  var condition = _ref2.condition,
37
42
  children = _ref2.children;
38
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, condition ? /*#__PURE__*/_react["default"].createElement(_main.DxcInset, {
43
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, condition ? /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
39
44
  top: "0.5rem"
40
45
  }, children) : children);
41
46
  };
@@ -78,24 +83,24 @@ var DxcBarChart = function DxcBarChart(_ref3) {
78
83
  return value.includes(series.title);
79
84
  }));
80
85
  }, [series]);
81
- return loading ? /*#__PURE__*/_react["default"].createElement(LoadingContainer, null, /*#__PURE__*/_react["default"].createElement(_main.DxcSpinner, {
86
+ return loading ? /*#__PURE__*/_react["default"].createElement(LoadingContainer, null, /*#__PURE__*/_react["default"].createElement(_Spinner["default"], {
82
87
  mode: "small"
83
88
  }), translatedLabels.barChart.loadingDataMessage) : error ? /*#__PURE__*/_react["default"].createElement(ErrorStatus, null, /*#__PURE__*/_react["default"].createElement(Label, null, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
84
89
  icon: "cancel"
85
- }), error), onRetry && /*#__PURE__*/_react["default"].createElement(_main.DxcButton, {
90
+ }), error), onRetry && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
86
91
  label: translatedLabels.barChart.retryButtonLabel,
87
92
  mode: "secondary",
88
93
  onClick: function onClick() {
89
94
  onRetry();
90
95
  }
91
- })) : /*#__PURE__*/_react["default"].createElement(_main.DxcGrid, {
96
+ })) : /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
92
97
  gap: "1rem"
93
- }, chartTitle && /*#__PURE__*/_react["default"].createElement(_main.DxcGrid.Item, {
98
+ }, chartTitle && /*#__PURE__*/_react["default"].createElement(_Grid["default"].Item, {
94
99
  placeSelf: "center"
95
- }, /*#__PURE__*/_react["default"].createElement(_main.DxcHeading, {
100
+ }, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
96
101
  text: chartTitle,
97
102
  level: 2
98
- })), showFilter && /*#__PURE__*/_react["default"].createElement(_main.DxcSelect, {
103
+ })), showFilter && /*#__PURE__*/_react["default"].createElement(_Select["default"], {
99
104
  label: translatedLabels.barChart.filterLabel,
100
105
  multiple: true,
101
106
  onChange: function onChange(_ref4) {
package/container/Container.stories.tsx CHANGED
@@ -42,8 +42,9 @@ export const Chromatic = () => (
42
42
  <ExampleContainer>
43
43
  <DxcContainer
44
44
  background={{
45
- image: "url(https://www.laecuaciondigital.com/wp-content/uploads/2023/10/DXC-Technology.png)",
46
- position: "50%",
45
+ image:
46
+ "url(https://dxc.com/content/dam/dxc/projects/dxc-com/common/images/landscape-1050x650/logos/we_are_dxc-1050x650.jpg)",
47
+ size: "500px 500px",
47
48
  }}
48
49
  width="500px"
49
50
  height="500px"
package/date-input/DateInput.js CHANGED
@@ -1,11 +1,12 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
4
+ var _typeof3 = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports["default"] = void 0;
9
+ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
9
10
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
10
11
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
12
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -14,16 +15,19 @@ var _dayjs = _interopRequireDefault(require("dayjs"));
14
15
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
15
16
  var _useTheme = _interopRequireDefault(require("../useTheme"));
16
17
  var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
17
- var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
18
18
  var _DatePicker = _interopRequireDefault(require("./DatePicker"));
19
19
  var Popover = _interopRequireWildcard(require("@radix-ui/react-popover"));
20
20
  var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
21
- var _templateObject, _templateObject2;
21
+ var _utils = require("../common/utils");
22
+ var _variables = require("../common/variables");
23
+ var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
24
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
22
25
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
23
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
26
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
24
27
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
25
28
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
26
29
  _dayjs["default"].extend(_customParseFormat["default"]);
30
+ var SIDEOFFSET = 4;
27
31
  var getValueForPicker = function getValueForPicker(value, format) {
28
32
  return (0, _dayjs["default"])(value, format.toUpperCase(), true);
29
33
  };
@@ -38,14 +42,12 @@ var getDate = function getDate(value, format, lastValidYear, setLastValidYear) {
38
42
  setLastValidYear(1900 + +newDate.format("YY"));
39
43
  newDate = newDate.set("year", 1900 + +newDate.format("YY"));
40
44
  }
41
- } else {
42
- newDate = newDate.set("year", (lastValidYear <= 1999 ? 1900 : 2000) + +newDate.format("YY"));
43
- }
45
+ } else newDate = newDate.set("year", (lastValidYear <= 1999 ? 1900 : 2000) + +newDate.format("YY"));
44
46
  return newDate;
45
47
  }
46
48
  };
47
49
  var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
48
- var _ref2;
50
+ var _ref2, _dateRef$current;
49
51
  var label = _ref.label,
50
52
  name = _ref.name,
51
53
  _ref$defaultValue = _ref.defaultValue,
@@ -84,24 +86,14 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
84
86
  _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
85
87
  lastValidYear = _useState8[0],
86
88
  setLastValidYear = _useState8[1];
89
+ var _useState9 = (0, _react.useState)(SIDEOFFSET),
90
+ _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
91
+ sideOffset = _useState10[0],
92
+ setSideOffset = _useState10[1];
87
93
  var colorsTheme = (0, _useTheme["default"])();
88
94
  var translatedLabels = (0, _useTranslatedLabels["default"])();
89
95
  var dateRef = (0, _react.useRef)(null);
90
- (0, _react.useEffect)(function () {
91
- if (value || value === "") setDayjsDate(getDate(value, format, lastValidYear, setLastValidYear));
92
- }, [value, format, lastValidYear]);
93
- (0, _react.useEffect)(function () {
94
- if (!disabled) {
95
- var actionButtonRef = dateRef === null || dateRef === void 0 ? void 0 : dateRef.current.querySelector("[title='Select date']");
96
- actionButtonRef === null || actionButtonRef === void 0 ? void 0 : actionButtonRef.setAttribute("aria-haspopup", true);
97
- actionButtonRef === null || actionButtonRef === void 0 ? void 0 : actionButtonRef.setAttribute("role", "combobox");
98
- actionButtonRef === null || actionButtonRef === void 0 ? void 0 : actionButtonRef.setAttribute("aria-expanded", isOpen);
99
- actionButtonRef === null || actionButtonRef === void 0 ? void 0 : actionButtonRef.setAttribute("aria-controls", calendarId);
100
- if (isOpen) {
101
- actionButtonRef === null || actionButtonRef === void 0 ? void 0 : actionButtonRef.setAttribute("aria-describedby", calendarId);
102
- }
103
- }
104
- }, [isOpen, disabled, calendarId]);
96
+ var popoverContentRef = (0, _react.useRef)(null);
105
97
  var handleCalendarOnClick = function handleCalendarOnClick(newDate) {
106
98
  var newValue = newDate.format(format.toUpperCase());
107
99
  if (!value) {
@@ -157,8 +149,22 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
157
149
  date: date.toDate()
158
150
  })) : onBlur === null || onBlur === void 0 ? void 0 : onBlur(callbackParams);
159
151
  };
152
+ var adjustSideOffset = (0, _react.useCallback)(function () {
153
+ if (error != null) {
154
+ setTimeout(function () {
155
+ if (popoverContentRef.current && dateRef.current) {
156
+ var _dateRef$current$quer, _dateRef$current$quer2;
157
+ var popoverRect = popoverContentRef.current.getBoundingClientRect();
158
+ var triggerRect = (_dateRef$current$quer = dateRef.current.querySelector('[id^="input"]')) === null || _dateRef$current$quer === void 0 ? void 0 : _dateRef$current$quer.getBoundingClientRect();
159
+ var errorMessageHeight = (_dateRef$current$quer2 = dateRef.current.querySelector('[id^="error-input"]')) === null || _dateRef$current$quer2 === void 0 ? void 0 : _dateRef$current$quer2.getBoundingClientRect().height;
160
+ setSideOffset(popoverRect.top > triggerRect.bottom ? -errorMessageHeight : SIDEOFFSET);
161
+ }
162
+ }, 0);
163
+ }
164
+ }, [error]);
160
165
  var openCalendar = function openCalendar() {
161
166
  setIsOpen(!isOpen);
167
+ adjustSideOffset();
162
168
  };
163
169
  var closeCalendar = function closeCalendar() {
164
170
  setIsOpen(false);
@@ -174,22 +180,48 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
174
180
  var handleDatePickerOnBlur = function handleDatePickerOnBlur(event) {
175
181
  if (!(event !== null && event !== void 0 && event.currentTarget.contains(event.relatedTarget))) closeCalendar();
176
182
  };
183
+ (0, _react.useEffect)(function () {
184
+ window.addEventListener("scroll", adjustSideOffset);
185
+ return function () {
186
+ window.removeEventListener("scroll", adjustSideOffset);
187
+ };
188
+ }, [adjustSideOffset]);
189
+ (0, _react.useEffect)(function () {
190
+ if (value || value === "") setDayjsDate(getDate(value, format, lastValidYear, setLastValidYear));
191
+ }, [value, format, lastValidYear]);
192
+ (0, _react.useEffect)(function () {
193
+ if (!disabled) {
194
+ var actionButtonRef = dateRef === null || dateRef === void 0 ? void 0 : dateRef.current.querySelector("[title='Select date']");
195
+ actionButtonRef === null || actionButtonRef === void 0 ? void 0 : actionButtonRef.setAttribute("aria-haspopup", true);
196
+ actionButtonRef === null || actionButtonRef === void 0 ? void 0 : actionButtonRef.setAttribute("role", "combobox");
197
+ actionButtonRef === null || actionButtonRef === void 0 ? void 0 : actionButtonRef.setAttribute("aria-expanded", isOpen);
198
+ actionButtonRef === null || actionButtonRef === void 0 ? void 0 : actionButtonRef.setAttribute("aria-controls", calendarId);
199
+ if (isOpen) {
200
+ actionButtonRef === null || actionButtonRef === void 0 ? void 0 : actionButtonRef.setAttribute("aria-describedby", calendarId);
201
+ }
202
+ }
203
+ }, [isOpen, disabled, calendarId]);
177
204
  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
178
205
  theme: colorsTheme
179
206
  }, /*#__PURE__*/_react["default"].createElement(DateInputContainer, {
207
+ margin: margin,
180
208
  size: size,
181
209
  ref: ref
182
- }, /*#__PURE__*/_react["default"].createElement(Popover.Root, {
210
+ }, label && /*#__PURE__*/_react["default"].createElement(Label, {
211
+ htmlFor: (_dateRef$current = dateRef.current) === null || _dateRef$current === void 0 ? void 0 : _dateRef$current.getElementsByTagName("input")[0].id,
212
+ disabled: disabled,
213
+ hasHelperText: helperText ? true : false
214
+ }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, translatedLabels.formFields.optionalLabel)), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
215
+ disabled: disabled
216
+ }, helperText), /*#__PURE__*/_react["default"].createElement(Popover.Root, {
183
217
  open: isOpen
184
218
  }, /*#__PURE__*/_react["default"].createElement(Popover.Trigger, {
185
219
  asChild: true,
186
220
  "aria-controls": undefined
187
221
  }, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
188
- label: label,
189
222
  name: name,
190
223
  defaultValue: defaultValue,
191
224
  value: value !== null && value !== void 0 ? value : innerValue,
192
- helperText: helperText,
193
225
  placeholder: placeholder ? format.toUpperCase() : null,
194
226
  action: {
195
227
  onClick: openCalendar,
@@ -204,25 +236,76 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
204
236
  onBlur: handleOnBlur,
205
237
  error: error,
206
238
  autocomplete: autocomplete,
207
- margin: margin,
208
239
  size: size,
209
240
  tabIndex: tabIndex,
210
241
  ref: dateRef
211
242
  })), /*#__PURE__*/_react["default"].createElement(Popover.Portal, null, /*#__PURE__*/_react["default"].createElement(StyledPopoverContent, {
212
- sideOffset: error ? -18 : 2,
243
+ sideOffset: sideOffset,
213
244
  align: "end",
214
245
  "aria-modal": true,
215
246
  onBlur: handleDatePickerOnBlur,
216
247
  onKeyDown: handleDatePickerEscKeydown,
217
- avoidCollisions: false
248
+ ref: popoverContentRef
218
249
  }, /*#__PURE__*/_react["default"].createElement(_DatePicker["default"], {
219
250
  id: calendarId,
220
251
  onDateSelect: handleCalendarOnClick,
221
252
  date: dayjsDate
222
253
  }))))));
223
254
  });
224
- var StyledPopoverContent = (0, _styledComponents["default"])(Popover.Content)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n z-index: 2147483647;\n &:focus-visible {\n outline: none;\n }\n"])));
225
- var DateInputContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n"])), function (props) {
255
+ var sizes = {
256
+ small: "240px",
257
+ medium: "360px",
258
+ large: "480px",
259
+ fillParent: "100%"
260
+ };
261
+ var calculateWidth = function calculateWidth(margin, size) {
262
+ return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
263
+ };
264
+ var DateInputContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n display: flex;\n flex-direction: column;\n width: ", ";\n ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n font-family: ", ";\n"])), function (props) {
226
265
  return props.size == "fillParent" && "width: 100%;";
266
+ }, function (props) {
267
+ return calculateWidth(props.margin, props.size);
268
+ }, function (props) {
269
+ return props.size !== "fillParent" && "min-width:" + calculateWidth(props.margin, props.size);
270
+ }, function (props) {
271
+ return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
272
+ }, function (props) {
273
+ return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
274
+ }, function (props) {
275
+ return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
276
+ }, function (props) {
277
+ return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
278
+ }, function (props) {
279
+ return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
280
+ }, function (props) {
281
+ return props.theme.textInput.fontFamily;
282
+ });
283
+ var Label = _styledComponents["default"].label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n ", "\n"])), function (props) {
284
+ return props.disabled ? props.theme.textInput.disabledLabelFontColor : props.theme.textInput.labelFontColor;
285
+ }, function (props) {
286
+ return props.theme.textInput.labelFontSize;
287
+ }, function (props) {
288
+ return props.theme.textInput.labelFontStyle;
289
+ }, function (props) {
290
+ return props.theme.textInput.labelFontWeight;
291
+ }, function (props) {
292
+ return props.theme.textInput.labelLineHeight;
293
+ }, function (props) {
294
+ return !props.hasHelperText && "margin-bottom: 0.25rem";
295
+ });
296
+ var OptionalLabel = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n font-weight: ", ";\n"])), function (props) {
297
+ return props.theme.textInput.optionalLabelFontWeight;
298
+ });
299
+ var HelperText = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-bottom: 0.25rem;\n"])), function (props) {
300
+ return props.disabled ? props.theme.textInput.disabledHelperTextFontColor : props.theme.textInput.helperTextFontColor;
301
+ }, function (props) {
302
+ return props.theme.textInput.helperTextFontSize;
303
+ }, function (props) {
304
+ return props.theme.textInput.helperTextFontStyle;
305
+ }, function (props) {
306
+ return props.theme.textInput.helperTextFontWeight;
307
+ }, function (props) {
308
+ return props.theme.textInput.helperTextLineHeight;
227
309
  });
310
+ var StyledPopoverContent = (0, _styledComponents["default"])(Popover.Content)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n z-index: 2147483647;\n &:focus-visible {\n outline: none;\n }\n"])));
228
311
  var _default = exports["default"] = DxcDateInput;
package/date-input/DateInput.stories.tsx CHANGED
@@ -12,6 +12,7 @@ import { ThemeProvider } from "styled-components";
12
12
  import { HalstackProvider } from "../HalstackContext";
13
13
  import preview from "../../.storybook/preview";
14
14
  import { disabledRules } from "../../test/accessibility/rules/specific/date-input/disabledRules";
15
+ import DxcContainer from "../container/Container";
15
16
 
16
17
  export default {
17
18
  title: "Date Input",
@@ -37,6 +38,12 @@ const opinionatedTheme = {
37
38
 
38
39
  const DateInputChromatic = () => (
39
40
  <>
41
+ <ExampleContainer>
42
+ <Title title="Year picker" theme="light" level={4} />
43
+ <DxcContainer height="500px">
44
+ <DxcDateInput label="Date input" defaultValue="06-04-1905" error="Error message" />
45
+ </DxcContainer>
46
+ </ExampleContainer>
40
47
  <ExampleContainer>
41
48
  <Title title="Complete date input" theme="light" level={4} />
42
49
  <DxcDateInput label="Date input" helperText="Help message" format="dd/mm/yy" placeholder optional />
@@ -105,17 +112,13 @@ const DateInputChromatic = () => (
105
112
  <Title title="FillParent size" theme="light" level={4} />
106
113
  <DxcDateInput label="FillParent" size="fillParent" />
107
114
  </ExampleContainer>
108
- <ExampleContainer expanded>
109
- <Title title="Year picker" theme="light" level={4} />
110
- <DxcDateInput label="Date input" defaultValue="06-04-1905" />
111
- </ExampleContainer>
112
115
  </>
113
116
  );
114
117
 
115
118
  export const Chromatic = DateInputChromatic.bind({});
116
119
  Chromatic.play = async ({ canvasElement }) => {
117
120
  const canvas = within(canvasElement);
118
- await userEvent.click(canvas.getAllByRole("combobox")[canvas.getAllByRole("combobox").length - 1]);
121
+ await userEvent.click(canvas.getAllByRole("combobox")[0]);
119
122
  await fireEvent.click(screen.getByText("April 1905"));
120
123
  };
121
124
 
@@ -147,10 +150,12 @@ const DateInputOpinionatedTheme = () => (
147
150
  <DxcDateInput label="Error date input" error="Error message." placeholder />
148
151
  </HalstackProvider>
149
152
  </ExampleContainer>
150
- <ExampleContainer expanded>
153
+ <ExampleContainer>
151
154
  <Title title="Date picker" theme="light" level={4} />
152
155
  <HalstackProvider theme={opinionatedTheme}>
153
- <DxcDateInput label="Date input" defaultValue="06-04-1905" />
156
+ <div style={{ display: "flex", height: "400px", alignItems: "flex-end" }}>
157
+ <DxcDateInput label="Date input" defaultValue="06-04-1905" error="Error message" />
158
+ </div>
154
159
  </HalstackProvider>
155
160
  </ExampleContainer>
156
161
  </>
@@ -159,7 +164,7 @@ const DateInputOpinionatedTheme = () => (
159
164
  export const DateInputOpinionated = DateInputOpinionatedTheme.bind({});
160
165
  DateInputOpinionated.play = async ({ canvasElement }) => {
161
166
  const canvas = within(canvasElement);
162
- await userEvent.click(canvas.getAllByRole("combobox")[canvas.getAllByRole("combobox").length - 1]);
167
+ await userEvent.click(canvas.getAllByRole("combobox")[3]);
163
168
  };
164
169
 
165
170
  const YearPickerOpinionatedTheme = () => (
package/date-input/DatePicker.js CHANGED
@@ -19,7 +19,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
19
19
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
20
20
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
21
21
  var today = (0, _dayjs["default"])();
22
- var DxcDatePicker = function DxcDatePicker(_ref) {
22
+ var DatePicker = function DatePicker(_ref) {
23
23
  var date = _ref.date,
24
24
  onDateSelect = _ref.onDateSelect,
25
25
  id = _ref.id;
@@ -44,7 +44,7 @@ var DxcDatePicker = function DxcDatePicker(_ref) {
44
44
  var handleMonthChange = function handleMonthChange(date) {
45
45
  setInnerDate(date);
46
46
  };
47
- return /*#__PURE__*/_react["default"].createElement(DatePicker, {
47
+ return /*#__PURE__*/_react["default"].createElement(DatePickerContainer, {
48
48
  id: id
49
49
  }, /*#__PURE__*/_react["default"].createElement(PickerHeader, null, /*#__PURE__*/_react["default"].createElement(HeaderButton, {
50
50
  "aria-label": translatedLabels.calendar.previousMonthTitle,
@@ -83,7 +83,7 @@ var DxcDatePicker = function DxcDatePicker(_ref) {
83
83
  today: today
84
84
  }));
85
85
  };
86
- var DatePicker = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n padding-top: 16px;\n background-color: ", ";\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n border: ", ";\n border-radius: 4px;\n width: fit-content;\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
86
+ var DatePickerContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n padding-top: 16px;\n background-color: ", ";\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n border: ", ";\n border-radius: 4px;\n width: fit-content;\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
87
87
  return props.theme.dateInput.pickerBackgroundColor;
88
88
  }, function (props) {
89
89
  return "".concat(props.theme.dateInput.pickerBorderWidth, " ").concat(props.theme.dateInput.pickerBorderStyle, "\n ").concat(props.theme.dateInput.pickerBorderColor);
@@ -118,4 +118,4 @@ var HeaderYearTriggerLabel = _styledComponents["default"].span(_templateObject5
118
118
  }, function (props) {
119
119
  return props.theme.dateInput.pickerHeaderFontSize;
120
120
  });
121
- var _default = exports["default"] = /*#__PURE__*/_react["default"].memo(DxcDatePicker);
121
+ var _default = exports["default"] = /*#__PURE__*/_react["default"].memo(DatePicker);
package/main.d.ts CHANGED
@@ -47,5 +47,6 @@ import DxcContextualMenu from "./contextual-menu/ContextualMenu";
47
47
  import DxcDivider from "./divider/Divider";
48
48
  import DxcBreadcrumbs from "./breadcrumbs/Breadcrumbs";
49
49
  import DxcBarChart from "./bar-chart/BarChart";
50
+ import DxcTooltip from "./tooltip/Tooltip";
50
51
  import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
51
- export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, DxcAccordionGroup, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, DxcGrid, DxcImage, DxcContainer, DxcBadge, DxcStatusLight, DxcContextualMenu, DxcDivider, DxcBreadcrumbs, DxcBarChart, };
52
+ export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, DxcAccordionGroup, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, DxcGrid, DxcImage, DxcContainer, DxcBadge, DxcStatusLight, DxcContextualMenu, DxcDivider, DxcBreadcrumbs, DxcBarChart, DxcTooltip, };
package/main.js CHANGED
@@ -287,6 +287,12 @@ Object.defineProperty(exports, "DxcToggleGroup", {
287
287
  return _ToggleGroup["default"];
288
288
  }
289
289
  });
290
+ Object.defineProperty(exports, "DxcTooltip", {
291
+ enumerable: true,
292
+ get: function get() {
293
+ return _Tooltip["default"];
294
+ }
295
+ });
290
296
  Object.defineProperty(exports, "DxcTypography", {
291
297
  enumerable: true,
292
298
  get: function get() {
@@ -366,6 +372,7 @@ var _ContextualMenu = _interopRequireDefault(require("./contextual-menu/Contextu
366
372
  var _Divider = _interopRequireDefault(require("./divider/Divider"));
367
373
  var _Breadcrumbs = _interopRequireDefault(require("./breadcrumbs/Breadcrumbs"));
368
374
  var _BarChart = _interopRequireDefault(require("./bar-chart/BarChart"));
375
+ var _Tooltip = _interopRequireDefault(require("./tooltip/Tooltip"));
369
376
  var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
370
377
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
371
378
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxc-technology/halstack-react",
3
- "version": "0.0.0-5a4d834",
3
+ "version": "0.0.0-5a7a613",
4
4
  "description": "DXC Halstack React components library",
5
5
  "repository": "dxc-technology/halstack-react",
6
6
  "homepage": "https://developer.dxc.com/halstack",