@stenajs-webui/calendar 17.4.0 → 17.6.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# v17.6.0 (Fri Jul 01 2022)
+
+#### 🚀 Enhancement
+
+- Use Stena icons instead of Font Awesome icons [#471](https://github.com/StenaIT/stenajs-webui/pull/471) (david.zetterdahl@stenaline.com [@LordDz](https://github.com/LordDz) [@lindskogen](https://github.com/lindskogen))
+
+#### Authors: 3
+
+- David ([@LordDz](https://github.com/LordDz))
+- David Zetterdahl (david.zetterdahl@stenaline.com)
+- Johan Lindskogen ([@lindskogen](https://github.com/lindskogen))
+
+---
+
 # v17.0.0 (Fri Jun 17 2022)
 
 #### 💥 Breaking Change

package/dist/index.es.js

@@ -1,25 +1,18 @@
 import * as React from 'react';
 import { useMemo, useCallback, useState, useEffect, useRef } from 'react';
-import { FlatButton, PrimaryButton, Icon, stenaArrowRight } from '@stenajs-webui/elements';
+import { FlatButton, stenaAngleLeft, stenaAngleRight, PrimaryButton, stenaCalendar, Icon, stenaClock, stenaAngleDown, stenaArrowRight } from '@stenajs-webui/elements';
 import { Box, Text, Clickable, Row, Space, Spacing, Indent, Column, SeparatorLine, parseIntElseUndefined, useBoolean, useDelayedFalse } from '@stenajs-webui/core';
 import { isAfter, eachDayOfInterval, isSameDay, endOfMonth, startOfMonth, min, addDays, max, subDays, format, getISOWeek, getDate, startOfISOWeek, addWeeks, getMonth, getYear, getISODay, addHours, isBefore, parse, addMonths, addYears, subMonths, subYears, isValid } from 'date-fns';
 import { last, chunk, range, debounce } from 'lodash';
 import styled from '@emotion/styled';
-import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
-import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight';
 import { faAngleDoubleLeft } from '@fortawesome/free-solid-svg-icons/faAngleDoubleLeft';
 import { faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons/faAngleDoubleRight';
 import { faCaretLeft } from '@fortawesome/free-solid-svg-icons/faCaretLeft';
 import { faCaretRight } from '@fortawesome/free-solid-svg-icons/faCaretRight';
-import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons/faCalendarAlt';
 import { TextInput, TextInputBox } from '@stenajs-webui/forms';
 import { useTippyInstance, Popover } from '@stenajs-webui/tooltip';
-import { faCalendarAlt as faCalendarAlt$1 } from '@fortawesome/free-solid-svg-icons/faCalendarAlt';
 import { cssColor } from '@stenajs-webui/theme';
 import { faLongArrowAltRight } from '@fortawesome/free-solid-svg-icons/faLongArrowAltRight';
-import { faClock } from '@fortawesome/free-solid-svg-icons/faClock';
-import { faClock as faClock$1 } from '@fortawesome/free-regular-svg-icons/faClock';
-import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -610,9 +603,9 @@ var WithMonthSwitcherBelow = function (_a) {
             React.createElement(Row, null,
                 React.createElement(FlatButton, { onClick: prevYear, leftIcon: faAngleDoubleLeft }),
                 React.createElement(Space, null),
-                React.createElement(FlatButton, { onClick: prevMonth, leftIcon: faAngleLeft }),
+                React.createElement(FlatButton, { onClick: prevMonth, leftIcon: stenaAngleLeft }),
                 React.createElement(Indent, { num: 2 }),
-                React.createElement(FlatButton, { onClick: nextMonth, leftIcon: faAngleRight }),
+                React.createElement(FlatButton, { onClick: nextMonth, leftIcon: stenaAngleRight }),
                 React.createElement(Space, null),
                 React.createElement(FlatButton, { onClick: nextYear, leftIcon: faAngleDoubleRight }))),
         React.createElement(Space, null)));
@@ -667,9 +660,9 @@ var PresetPicker = function (_a) {
     var currentPage = (_b = pages[pageIndex]) !== null && _b !== void 0 ? _b : pages[0];
     return (React.createElement(Column, null,
         React.createElement(Row, { justifyContent: "space-between", alignItems: "center", width: "200px" },
-            React.createElement(FlatButton, { size: "small", leftIcon: faAngleLeft, disabled: pageIndex === 0, onClick: function () { return setPageIndex(pageIndex - 1); } }),
+            React.createElement(FlatButton, { size: "small", leftIcon: stenaAngleLeft, disabled: pageIndex === 0, onClick: function () { return setPageIndex(pageIndex - 1); } }),
             React.createElement(Text, null, currentPage.label),
-            React.createElement(FlatButton, { size: "small", leftIcon: faAngleRight, disabled: pageIndex === pages.length - 1, onClick: function () { return setPageIndex(pageIndex + 1); } })),
+            React.createElement(FlatButton, { size: "small", leftIcon: stenaAngleRight, disabled: pageIndex === pages.length - 1, onClick: function () { return setPageIndex(pageIndex + 1); } })),
         React.createElement(Space, null),
         React.createElement(Column, { alignItems: "center" }, currentPage.presets.map(function (preset) { return (React.createElement(React.Fragment, { key: preset.label },
             React.createElement(PrimaryButton, { label: preset.label, onClick: function () { return onClickPreset(preset); } }),
@@ -779,8 +772,8 @@ function CalendarWithMonthSwitcher(_a) {
                 React.createElement(CalendarWithMonthYearPickers, __assign({}, calendarProps, { theme: theme, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, onSelectPreset: onSelectPreset, headerLeftContent: React.createElement(Row, { alignItems: "center" },
                         !hideYearPagination && (React.createElement(FlatButton, { size: "small", onClick: prevYear, leftIcon: faAngleDoubleLeft })),
                         React.createElement(Space, null),
-                        React.createElement(FlatButton, { size: "small", onClick: prevMonth, leftIcon: faAngleLeft })), headerRightContent: React.createElement(Row, { alignItems: "center" },
-                        React.createElement(FlatButton, { size: "small", onClick: nextMonth, leftIcon: faAngleRight }),
+                        React.createElement(FlatButton, { size: "small", onClick: prevMonth, leftIcon: stenaAngleLeft })), headerRightContent: React.createElement(Row, { alignItems: "center" },
+                        React.createElement(FlatButton, { size: "small", onClick: nextMonth, leftIcon: stenaAngleRight }),
                         React.createElement(Space, null),
                         !hideYearPagination && (React.createElement(FlatButton, { size: "small", onClick: nextYear, leftIcon: faAngleDoubleRight }))) }))));
         }
@@ -1159,7 +1152,7 @@ var DateInput = function (_a) {
     return (React.createElement(Box, { width: width },
         React.createElement(Popover, { arrow: false, lazy: true, visible: showingCalendar, onClickOutside: hideCalendar, placement: defaultPopoverPlacement, zIndex: zIndex, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", tippyRef: tippyRef, disabled: disabled, content: React.createElement(SingleDateCalendar, __assign({}, calendarProps, { onChange: onSelectDate, value: value, theme: calendarTheme, onChangePanel: onChangePanel, minDate: minDate, maxDate: maxDate })) },
             React.createElement(TextInput, { type: "date", contentRight: React.createElement(Row, { alignItems: "center" },
-                    React.createElement(FlatButton, { size: "small", disabled: disabled, leftIcon: faCalendarAlt, onClick: showCalendar })), onFocus: showCalendar, onClickRight: showCalendar, value: value ? format(value, displayFormat) : "", placeholder: placeholder, size: 9, disabled: disabled, autoFocus: openOnMount, variant: variant, min: minDate, max: maxDate }))));
+                    React.createElement(FlatButton, { size: "small", disabled: disabled, leftIcon: stenaCalendar, onClick: showCalendar })), onFocus: showCalendar, onClickRight: showCalendar, value: value ? format(value, displayFormat) : "", placeholder: placeholder, size: 9, disabled: disabled, autoFocus: openOnMount, variant: variant, min: minDate, max: maxDate }))));
 };
 
 var useDateRangeInput = function (value, onValueChange) {
@@ -1240,11 +1233,11 @@ var DateRangeInput = function (_a) {
     }, [value]);
     return (React.createElement(Popover, { arrow: false, lazy: true, disabled: disabled, visible: showingCalendar, zIndex: zIndex, placement: defaultPopoverPlacement, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", onClickOutside: hideCalendar, content: React.createElement(CalendarWithMonthSwitcher, __assign({}, calendarProps, { dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, statePerMonth: statePerMonth, theme: calendarTheme, onClickDay: onClickDay, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, minDate: minDate, maxDate: maxDate })) },
         React.createElement(Row, { alignItems: "center" },
-            React.createElement(TextInput, { iconLeft: faCalendarAlt$1, onFocus: showCalendarStartDate, value: (value === null || value === void 0 ? void 0 : value.startDate) ? format(value.startDate, displayFormat) : "", placeholder: placeholderStartDate, width: width, disabled: disabled, inputRef: startDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }),
+            React.createElement(TextInput, { iconLeft: stenaCalendar, onFocus: showCalendarStartDate, value: (value === null || value === void 0 ? void 0 : value.startDate) ? format(value.startDate, displayFormat) : "", placeholder: placeholderStartDate, width: width, disabled: disabled, inputRef: startDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }),
             React.createElement(Space, null),
             React.createElement(Icon, { icon: faLongArrowAltRight, color: cssColor("--lhds-color-ui-500"), size: 14 }),
             React.createElement(Space, null),
-            React.createElement(TextInput, { iconLeft: faCalendarAlt$1, onFocus: showCalendarEndDate, value: (value === null || value === void 0 ? void 0 : value.endDate) ? format(value.endDate, displayFormat) : "", placeholder: placeholderEndDate, width: width, disabled: disabled, inputRef: endDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }))));
+            React.createElement(TextInput, { iconLeft: stenaCalendar, onFocus: showCalendarEndDate, value: (value === null || value === void 0 ? void 0 : value.endDate) ? format(value.endDate, displayFormat) : "", placeholder: placeholderEndDate, width: width, disabled: disabled, inputRef: endDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }))));
 };
 
 var DateTextInput = function (_a) {
@@ -1279,7 +1272,7 @@ var DateTextInput = function (_a) {
                     ? parse(value, dateFormat, new Date())
                     : undefined, minDate: minDate, maxDate: maxDate, theme: calendarTheme })) },
             React.createElement(TextInput, __assign({}, props, { variant: invalid ? "error" : variant, disableContentPaddingRight: true, contentRight: !hideCalenderIcon ? (React.createElement(Row, { alignItems: "center", indent: 0.5 },
-                    React.createElement(FlatButton, { size: "small", disabled: props.disabled, leftIcon: faCalendarAlt$1, onClick: toggleCalendar }))) : undefined, onValueChange: onValueChangeHandler, placeholder: placeholder, value: value || "", min: minDate, max: maxDate, size: 10 })))));
+                    React.createElement(FlatButton, { size: "small", disabled: props.disabled, leftIcon: stenaCalendar, onClick: toggleCalendar }))) : undefined, onValueChange: onValueChangeHandler, placeholder: placeholder, value: value || "", min: minDate, max: maxDate, size: 10 })))));
 };
 
 var formatHours = function (hours) {
@@ -1413,7 +1406,7 @@ var TimeTextInput = function (_a) {
             onValueChange(time);
         }
     }, [onValueChange, setValid]);
-    return (React.createElement(TextInput, __assign({}, props, { type: "time", variant: !valid ? "error" : variant, iconLeft: useIcon ? faClock : undefined, value: value, placeholder: showPlaceholder ? timeFormat : undefined, onChange: onChangeHandler, onBlur: onBlur, width: width })));
+    return (React.createElement(TextInput, __assign({}, props, { type: "time", variant: !valid ? "error" : variant, iconLeft: useIcon ? stenaClock : undefined, value: value, placeholder: showPlaceholder ? timeFormat : undefined, onChange: onChangeHandler, onBlur: onBlur, width: width })));
 };
 
 var DualTextInput = function (_a) {
@@ -1457,12 +1450,12 @@ var DualTextInput = function (_a) {
     return (React.createElement(Box, null,
         React.createElement(TextInputBox, { disableContentPaddingRight: true, disabled: disabled, variant: variant, contentRight: React.createElement(Row, { alignItems: "center" },
                 React.createElement(Indent, { num: 0.5 },
-                    React.createElement(FlatButton, { leftIcon: faCalendarAlt, onClick: onClickCalendar, disabled: disabled, size: "small" })),
+                    React.createElement(FlatButton, { leftIcon: stenaCalendar, onClick: onClickCalendar, disabled: disabled, size: "small" })),
                 showPresets ? (React.createElement(React.Fragment, null,
                     React.createElement(Row, { height: "22px" },
                         React.createElement(SeparatorLine, { vertical: true })),
                     React.createElement(Indent, { num: 0.5 },
-                        React.createElement(FlatButton, { leftIcon: faAngleDown, onClick: onClickArrowDown, disabled: disabled, size: "small" })))) : null) },
+                        React.createElement(FlatButton, { leftIcon: stenaAngleDown, onClick: onClickArrowDown, disabled: disabled, size: "small" })))) : null) },
             React.createElement(Box, { width: widthLeft },
                 React.createElement(TextInput, { onEsc: onEsc, onEnter: onEnter, onClick: onClickLeft, disabled: disabled, hideBorder: true, placeholder: placeholderLeft, value: valueLeft, onValueChange: onValueChangeLeft, onChange: onChangeLeft, onBlur: blurLeftHandler, onFocus: focusLeftHandler, inputRef: inputRefLeft, variant: variantLeft, type: typeLeft, autoFocus: autoFocusLeft, min: minLeft, max: maxLeft })),
             React.createElement(Row, { indent: 0.5, alignItems: "center", justifyContent: "center" },
@@ -1805,7 +1798,7 @@ var DateTimeInput = function (_a) {
                 React.createElement(Space, null),
                 React.createElement(Row, { justifyContent: "flex-end" },
                     React.createElement(PrimaryButton, { label: "Done", onClick: hideTimePicker })))) : null)) },
-            React.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, disabled: disabled, separatorIcon: faClock$1, typeLeft: "date", typeRight: "time", placeholderLeft: "yyyy-mm-dd", placeholderRight: "hh:mm", onChangeLeft: inputLeftChangeHandler, onChangeRight: inputRightChangeHandler, onClickArrowDown: onClickArrowButton, onClickCalendar: onClickCalendarButton, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onClickLeft: onFocusLeft, onClickRight: onFocusRight, inputRefLeft: dateInputRef, inputRefRight: timeInputRef, valueRight: timeValue !== null && timeValue !== void 0 ? timeValue : "", widthLeft: widthLeft, widthRight: widthRight, minLeft: minDate, maxLeft: maxDate, variant: variant }))));
+            React.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, disabled: disabled, separatorIcon: stenaClock, typeLeft: "date", typeRight: "time", placeholderLeft: "yyyy-mm-dd", placeholderRight: "hh:mm", onChangeLeft: inputLeftChangeHandler, onChangeRight: inputRightChangeHandler, onClickArrowDown: onClickArrowButton, onClickCalendar: onClickCalendarButton, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onClickLeft: onFocusLeft, onClickRight: onFocusRight, inputRefLeft: dateInputRef, inputRefRight: timeInputRef, valueRight: timeValue !== null && timeValue !== void 0 ? timeValue : "", widthLeft: widthLeft, widthRight: widthRight, minLeft: minDate, maxLeft: maxDate, variant: variant }))));
 };
 
 var useDateRangeEffects = function (startDate, endDate, setDateInFocus, startDateInputRef, endDateInputRef) {