@televet/kibble-ui 1.16.2-beta.86698tzha.0 → 1.16.2
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.
|
@@ -18,4 +18,4 @@ export interface DatePickerProps {
|
|
|
18
18
|
*
|
|
19
19
|
* More dateFormat info: https://github.com/date-fns/date-fns/blob/main/docs/unicodeTokens.md
|
|
20
20
|
*/
|
|
21
|
-
export declare const
|
|
21
|
+
export declare const DatePicker: ({ date, onDateChange, inputProps, placement, dateFormat, minYear, maxYear, }: DatePickerProps) => JSX.Element;
|
package/build/index.js
CHANGED
|
@@ -1561,7 +1561,7 @@ var IconMap = {
|
|
|
1561
1561
|
website: ForwardRef$1,
|
|
1562
1562
|
wrench: ForwardRef,
|
|
1563
1563
|
};
|
|
1564
|
-
var IconSizeMap = {
|
|
1564
|
+
var IconSizeMap$1 = {
|
|
1565
1565
|
xs: 14,
|
|
1566
1566
|
sm: 16,
|
|
1567
1567
|
md: 20,
|
|
@@ -1577,7 +1577,7 @@ var Icon = React.forwardRef(function (_a, ref) {
|
|
|
1577
1577
|
var colors = useTheme().colors;
|
|
1578
1578
|
var c = useAdaptiveColorMap(colors.icon, color);
|
|
1579
1579
|
var MappedIcon = IconMap[name];
|
|
1580
|
-
var d = IconSizeMap[size] + 'px';
|
|
1580
|
+
var d = IconSizeMap$1[size] + 'px';
|
|
1581
1581
|
return React__default["default"].createElement(MappedIcon, { ref: ref, width: d, height: d, color: c });
|
|
1582
1582
|
});
|
|
1583
1583
|
Icon.displayName = 'Icon';
|
|
@@ -12156,7 +12156,7 @@ var Day = function (_a) {
|
|
|
12156
12156
|
onDateSelect: onDateSelect,
|
|
12157
12157
|
onDateHover: onDateHover,
|
|
12158
12158
|
dayRef: dayRef,
|
|
12159
|
-
}),
|
|
12159
|
+
}), disabledDate = _c.disabledDate, onClick = _c.onClick, onKeyDown = _c.onKeyDown, onMouseEnter = _c.onMouseEnter, tabIndex = _c.tabIndex, isSelectedStartOrEnd = _c.isSelectedStartOrEnd;
|
|
12160
12160
|
if (!dayLabel) {
|
|
12161
12161
|
return React__default["default"].createElement(React__default["default"].Fragment, null);
|
|
12162
12162
|
}
|
|
@@ -12164,7 +12164,7 @@ var Day = function (_a) {
|
|
|
12164
12164
|
onClick();
|
|
12165
12165
|
onDaySelected();
|
|
12166
12166
|
};
|
|
12167
|
-
return (React__default["default"].createElement(Button, { onClick: onSelectDay, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, tabIndex: tabIndex, type: "button", ref: dayRef, variant: "ghostNeutral", size: "sm", fontWeight: fontWeights.normal, isActive:
|
|
12167
|
+
return (React__default["default"].createElement(Button, { onClick: onSelectDay, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, tabIndex: tabIndex, type: "button", ref: dayRef, variant: "ghostNeutral", size: "sm", fontWeight: fontWeights.normal, isActive: isSelectedStartOrEnd, isDisabled: disabledDate }, dayLabel));
|
|
12168
12168
|
};
|
|
12169
12169
|
|
|
12170
12170
|
var Month = function (_a) {
|
|
@@ -12175,10 +12175,6 @@ var Month = function (_a) {
|
|
|
12175
12175
|
month: month,
|
|
12176
12176
|
firstDayOfWeek: firstDayOfWeek,
|
|
12177
12177
|
}), days = _b.days, weekdayLabels = _b.weekdayLabels;
|
|
12178
|
-
React.useEffect(function () {
|
|
12179
|
-
var _a;
|
|
12180
|
-
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
|
|
12181
|
-
}, []);
|
|
12182
12178
|
return (React__default["default"].createElement(react.Box, { ref: ref },
|
|
12183
12179
|
React__default["default"].createElement(react.Grid, { templateColumns: "repeat(7, 1fr)", my: 2 }, weekdayLabels.map(function (weekdayLabel) { return (React__default["default"].createElement(react.GridItem, { key: weekdayLabel },
|
|
12184
12180
|
React__default["default"].createElement(react.Center, null,
|
|
@@ -12956,6 +12952,12 @@ var months = [
|
|
|
12956
12952
|
].map(function (month, index) {
|
|
12957
12953
|
return { label: month, value: String(index) };
|
|
12958
12954
|
});
|
|
12955
|
+
var IconSizeMap = {
|
|
12956
|
+
xs: 'xs',
|
|
12957
|
+
sm: 'sm',
|
|
12958
|
+
md: 'md',
|
|
12959
|
+
lg: 'lg',
|
|
12960
|
+
};
|
|
12959
12961
|
/**
|
|
12960
12962
|
* A simple date picker component.
|
|
12961
12963
|
*
|
|
@@ -12964,7 +12966,7 @@ var months = [
|
|
|
12964
12966
|
*
|
|
12965
12967
|
* More dateFormat info: https://github.com/date-fns/date-fns/blob/main/docs/unicodeTokens.md
|
|
12966
12968
|
*/
|
|
12967
|
-
var
|
|
12969
|
+
var DatePicker = function (_a) {
|
|
12968
12970
|
var date = _a.date, onDateChange = _a.onDateChange, inputProps = _a.inputProps, placement = _a.placement, _b = _a.dateFormat, dateFormat = _b === void 0 ? 'MM/dd/yyyy' : _b, _c = _a.minYear, minYear = _c === void 0 ? 1990 : _c, _d = _a.maxYear, maxYear = _d === void 0 ? 2040 : _d;
|
|
12969
12971
|
var _e = __read(React.useState(Ue(date, dateFormat, '')), 2), searchString = _e[0], setSearchString = _e[1];
|
|
12970
12972
|
var _f = __read(React.useState({
|
|
@@ -12982,6 +12984,9 @@ var BetaDatePicker = function (_a) {
|
|
|
12982
12984
|
};
|
|
12983
12985
|
});
|
|
12984
12986
|
var onDatesChange = function (data) {
|
|
12987
|
+
if (!data) {
|
|
12988
|
+
return;
|
|
12989
|
+
}
|
|
12985
12990
|
if (!data.focusedInput) {
|
|
12986
12991
|
setState(__assign(__assign({}, data), { focusedInput: Pe }));
|
|
12987
12992
|
}
|
|
@@ -12989,8 +12994,9 @@ var BetaDatePicker = function (_a) {
|
|
|
12989
12994
|
setState(data);
|
|
12990
12995
|
}
|
|
12991
12996
|
setSearchString(Ue(data.startDate, dateFormat, ''));
|
|
12992
|
-
if (onDateChange)
|
|
12993
|
-
onDateChange(
|
|
12997
|
+
if (onDateChange) {
|
|
12998
|
+
onDateChange(data.startDate);
|
|
12999
|
+
}
|
|
12994
13000
|
};
|
|
12995
13001
|
var onInputChange = function (e) {
|
|
12996
13002
|
var dateValue = e.target.value;
|
|
@@ -13041,20 +13047,22 @@ var BetaDatePicker = function (_a) {
|
|
|
13041
13047
|
goToDate(newDate);
|
|
13042
13048
|
};
|
|
13043
13049
|
var handleOpen = function () {
|
|
13044
|
-
if (!(inputProps === null || inputProps === void 0 ? void 0 : inputProps.isDisabled))
|
|
13050
|
+
if (!(inputProps === null || inputProps === void 0 ? void 0 : inputProps.isDisabled)) {
|
|
13045
13051
|
onOpen();
|
|
13052
|
+
}
|
|
13046
13053
|
};
|
|
13047
13054
|
var getMonthName = function (month) {
|
|
13048
13055
|
var date = new Date();
|
|
13049
13056
|
date.setMonth(month);
|
|
13050
13057
|
return format(date, 'LLLL');
|
|
13051
13058
|
};
|
|
13059
|
+
var iconSize = (inputProps === null || inputProps === void 0 ? void 0 : inputProps.size) ? IconSizeMap[inputProps.size] : 'md';
|
|
13052
13060
|
return (React__default["default"].createElement(DatePickerProvider, { focusedDate: focusedDate, isDateFocused: isDateFocused, isDateSelected: isDateSelected, isDateHovered: isDateHovered, isDateBlocked: isDateBlocked, isFirstOrLastSelectedDate: isFirstOrLastSelectedDate, onDateSelect: onDateSelect, onDateFocus: onDateFocus, onDateHover: onDateHover },
|
|
13053
13061
|
React__default["default"].createElement(react.Popover, { isOpen: isOpen, onClose: onClose, onOpen: handleOpen, initialFocusRef: inputRef, placement: placement },
|
|
13054
13062
|
React__default["default"].createElement(react.PopoverTrigger, null,
|
|
13055
13063
|
React__default["default"].createElement(react.Box, null,
|
|
13056
|
-
React__default["default"].createElement(WrappedTextInput, __assign({ rightElement: React__default["default"].createElement(react.
|
|
13057
|
-
React__default["default"].createElement(Icon, { name: "chevronDown", size:
|
|
13064
|
+
React__default["default"].createElement(WrappedTextInput, __assign({ rightElement: React__default["default"].createElement(react.Flex, { cursor: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.isDisabled) ? 'not-allowed' : 'pointer' },
|
|
13065
|
+
React__default["default"].createElement(Icon, { name: "chevronDown", size: iconSize })), value: searchString, onChange: onInputChange, inputRef: inputRef, onKeyDown: onKeyDown, cursor: !!(inputProps === null || inputProps === void 0 ? void 0 : inputProps.isReadOnly) ? 'pointer' : 'text' }, inputProps)))),
|
|
13058
13066
|
React__default["default"].createElement(react.PopoverContent, { ref: calendarRef, shadow: "md" },
|
|
13059
13067
|
React__default["default"].createElement(react.PopoverHeader, { justifyItems: "space-between" },
|
|
13060
13068
|
React__default["default"].createElement(react.HStack, { w: "100%", justify: "space-between" },
|
|
@@ -13169,6 +13177,11 @@ var Popover = function (_a) {
|
|
|
13169
13177
|
React__default["default"].createElement(Text, { size: "sm" }, children)), !!darkMode)));
|
|
13170
13178
|
};
|
|
13171
13179
|
|
|
13180
|
+
var popover_component = /*#__PURE__*/Object.freeze({
|
|
13181
|
+
__proto__: null,
|
|
13182
|
+
Popover: Popover
|
|
13183
|
+
});
|
|
13184
|
+
|
|
13172
13185
|
var PopoverConfig = {
|
|
13173
13186
|
xs: { width: 160 },
|
|
13174
13187
|
sm: { width: 200 },
|
|
@@ -16076,15 +16089,16 @@ exports.AlertIcon = AlertIcon;
|
|
|
16076
16089
|
exports.Avatar = Avatar;
|
|
16077
16090
|
exports.AvatarConfig = AvatarConfig;
|
|
16078
16091
|
exports.AvatarGroup = AvatarGroup;
|
|
16079
|
-
exports.BetaDatePicker = BetaDatePicker;
|
|
16080
16092
|
exports.BetaMenu = BetaMenu;
|
|
16081
16093
|
exports.BetaModal = modal_component;
|
|
16094
|
+
exports.BetaPopover = popover_component;
|
|
16082
16095
|
exports.Button = Button;
|
|
16083
16096
|
exports.ButtonSizeConfig = ButtonSizeConfig;
|
|
16084
16097
|
exports.ButtonVariantConfig = ButtonVariantConfig;
|
|
16085
16098
|
exports.Checkbox = Checkbox;
|
|
16086
16099
|
exports.CheckboxConfig = CheckboxConfig;
|
|
16087
16100
|
exports.CheckboxGroup = WrappedCheckboxGroup;
|
|
16101
|
+
exports.DatePicker = DatePicker;
|
|
16088
16102
|
exports.DatePickerContext = DatePickerContext;
|
|
16089
16103
|
exports.DrawerConfig = DrawerConfig;
|
|
16090
16104
|
exports.Heading = Heading;
|
|
@@ -16101,7 +16115,6 @@ exports.ModalFooter = ModalFooter;
|
|
|
16101
16115
|
exports.ModalFooterButtons = ModalFooterButtons;
|
|
16102
16116
|
exports.ModalHeader = ModalHeader;
|
|
16103
16117
|
exports.NotificationCounter = NotificationCounter;
|
|
16104
|
-
exports.Popover = Popover;
|
|
16105
16118
|
exports.PopoverBody = PopoverBody;
|
|
16106
16119
|
exports.PopoverCloseButton = PopoverCloseButton;
|
|
16107
16120
|
exports.PopoverConfig = PopoverConfig;
|