@digital-ai/dot-components 2.6.1 → 2.7.0

package/CHANGE_LOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [2.7.0](https://www.npmjs.com/package/@digital-ai/dot-components) (04/14/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.6.1...2.7.0)
+
+**Features:**
+
+- S-91919: `DotDatePicker`, `DotTimePicker`: expose `onBlur` prop [\#1443](https://github.com/digital-ai/dot-components/pull/1443) ([dmiletic85](https://github.com/dmiletic85))
+- S-91870 `DotButton`: expose `tabIndex` prop [\#1439](https://github.com/digital-ai/dot-components/pull/1439) ([dmiletic85](https://github.com/dmiletic85))
+
+**Fixed bugs:**
+
+- D-24793:  `DotTimePicker` - set clock instead of calendar icon [\#1444](https://github.com/digital-ai/dot-components/pull/1444) ([dmiletic85](https://github.com/dmiletic85))
+
 ## [2.6.1](https://www.npmjs.com/package/@digital-ai/dot-components) (04/06/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.6.0...2.6.1)
@@ -292,10 +305,6 @@
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.21.4...2.0.0-rc.3)
 
-**Features:**
-
-- S-87620 Adjust height for inputs and for medium sized buttons [\#1263](https://github.com/digital-ai/dot-components/pull/1263) ([nikolinadapic](https://github.com/nikolinadapic))
-
 **Fixed bugs:**
 
 - D-22512: Design differences between 2.0 and 1.x [\#1285](https://github.com/digital-ai/dot-components/pull/1285) ([CWSites](https://github.com/CWSites))
@@ -325,6 +334,7 @@
 **Features:**
 
 - S-87726 Align input content with helper text [\#1265](https://github.com/digital-ai/dot-components/pull/1265) ([nikolinadapic](https://github.com/nikolinadapic))
+- S-87620 Adjust height for inputs and for medium sized buttons [\#1263](https://github.com/digital-ai/dot-components/pull/1263) ([nikolinadapic](https://github.com/nikolinadapic))
 - S-87616 Adjust left margin for helper text [\#1262](https://github.com/digital-ai/dot-components/pull/1262) ([nikolinadapic](https://github.com/nikolinadapic))
 - S-87599: `DotAutocomplete`  Add optional `persistentLabel` prop [\#1258](https://github.com/digital-ai/dot-components/pull/1258) ([dmiletic85](https://github.com/dmiletic85))
 
@@ -354,6 +364,7 @@
 
 **Fixed bugs:**
 
+- S-86692: component cleanup [\#1238](https://github.com/digital-ai/dot-components/pull/1238) ([CWSites](https://github.com/CWSites))
 - S-84151: fix e2e tests for Release 2.0 [\#1146](https://github.com/digital-ai/dot-components/pull/1146) ([CWSites](https://github.com/CWSites))
 
 **Misc:**
@@ -384,7 +395,6 @@
 
 **Fixed bugs:**
 
-- S-86692: component cleanup [\#1238](https://github.com/digital-ai/dot-components/pull/1238) ([CWSites](https://github.com/CWSites))
 - D-20931: `DotAccordion` - display top border correctly when expanded [\#1232](https://github.com/digital-ai/dot-components/pull/1232) ([CWSites](https://github.com/CWSites))
 - D-22087: `DotRadioGroup` / `DotCheckboxGroup` helper texts do not follow the same styles as other helper texts [\#1225](https://github.com/digital-ai/dot-components/pull/1225) ([dmiletic85](https://github.com/dmiletic85))
 
@@ -895,7 +905,6 @@
 - S-79571: DotInput - expose onKeyDown [\#846](https://github.com/digital-ai/dot-components/pull/846) ([monapatel91](https://github.com/monapatel91))
 - S-79357: evaluate codebase and remove old references to core Tooltip [\#844](https://github.com/digital-ai/dot-components/pull/844) ([CWSites](https://github.com/CWSites))
 - S-80621: file upload  [\#840](https://github.com/digital-ai/dot-components/pull/840) ([CWSites](https://github.com/CWSites))
-- S-80473: Expose onFocus and onBlur callbacks for DotInputText and DotInputSelect components [\#832](https://github.com/digital-ai/dot-components/pull/832) ([selsemore](https://github.com/selsemore))
 - S-76922: file upload [\#820](https://github.com/digital-ai/dot-components/pull/820) ([CWSites](https://github.com/CWSites))
 
 **Fixed bugs:**
@@ -914,6 +923,7 @@
 
 **Features:**
 
+- S-80473: Expose onFocus and onBlur callbacks for DotInputText and DotInputSelect components [\#832](https://github.com/digital-ai/dot-components/pull/832) ([selsemore](https://github.com/selsemore))
 - S-80268: `DotDynamicForm` improvements [\#821](https://github.com/digital-ai/dot-components/pull/821) ([dmiletic85](https://github.com/dmiletic85))
 
 **Fixed bugs:**
@@ -1090,6 +1100,7 @@
 
 - MINOR release [\#695](https://github.com/digital-ai/dot-components/pull/695) ([CWSites](https://github.com/CWSites))
 - pass value to tab [\#694](https://github.com/digital-ai/dot-components/pull/694) ([kmmarsh](https://github.com/kmmarsh))
+- S-78831: update AppToolbar component for Agility [\#691](https://github.com/digital-ai/dot-components/pull/691) ([CWSites](https://github.com/CWSites))
 
 ## [1.0.12](https://www.npmjs.com/package/@digital-ai/dot-components) (09/23/2021)
 
@@ -1108,7 +1119,6 @@
 
 **Misc:**
 
-- S-78831: update AppToolbar component for Agility [\#691](https://github.com/digital-ai/dot-components/pull/691) ([CWSites](https://github.com/CWSites))
 - Next Release [\#689](https://github.com/digital-ai/dot-components/pull/689) ([CWSites](https://github.com/CWSites))
 
 ## [1.0.11](https://www.npmjs.com/package/@digital-ai/dot-components) (09/16/2021)

package/index.esm.js

@@ -1730,6 +1730,7 @@ const DotButton = /*#__PURE__*/forwardRef(({
   onClick,
   size: _size = 'medium',
   startIcon,
+  tabIndex,
   tooltip,
   type: _type = 'primary'
 }, ref) => {
@@ -1773,6 +1774,7 @@ const DotButton = /*#__PURE__*/forwardRef(({
       ref: ref,
       size: _size,
       startIcon: startIcon,
+      tabIndex: tabIndex,
       type: _isSubmit ? 'submit' : 'button',
       variant: variant
     }, {
@@ -9492,6 +9494,7 @@ const DotDatePicker = ({
   label,
   locale,
   onAccept,
+  onBlur,
   onChange,
   onClose,
   onError,
@@ -9587,7 +9590,8 @@ const DotDatePicker = ({
             focused: _readOnly ? false : undefined,
             inputProps: {
               className: 'dot-input',
-              'data-testid': 'dot-date-picker-input'
+              'data-testid': 'dot-date-picker-input',
+              onBlur
             },
             fullWidth: _fullWidth,
             name: inputName
@@ -9701,6 +9705,8 @@ const DotTimePicker = ({
   inputId,
   inputName,
   label,
+  onAccept,
+  onBlur,
   onChange,
   onClose,
   onOpen,
@@ -9780,6 +9786,7 @@ const DotTimePicker = ({
     onChange === null || onChange === void 0 ? void 0 : onChange(pickerTime.format(timeFormat), {
       validationError: null
     });
+    onAccept === null || onAccept === void 0 ? void 0 : onAccept(pickerTime.format(timeFormat));
   };
   const scrollToSelectedTime = () => {
     if (!(hoursRef === null || hoursRef === void 0 ? void 0 : hoursRef.current) || !(minutesRef === null || minutesRef === void 0 ? void 0 : minutesRef.current)) return;
@@ -9835,7 +9842,7 @@ const DotTimePicker = ({
                   iconId: "error-solid"
                 }, void 0), !_disableOpenPicker && !_readOnly && !disabled && jsx(DotIconButton, {
                   "data-testid": dataTestId && `${dataTestId}-open-btn`,
-                  iconId: "calendar",
+                  iconId: "pending-clock",
                   onClick: _event => handleTimePickerButtonClick(),
                   size: "small"
                 }, void 0)]
@@ -9843,7 +9850,8 @@ const DotTimePicker = ({
             },
             inputProps: {
               className: 'dot-input',
-              'data-testid': dataTestId && `${dataTestId}-input`
+              'data-testid': dataTestId && `${dataTestId}-input`,
+              onBlur
             },
             fullWidth: _fullWidth,
             name: inputName

package/index.umd.js

@@ -1957,6 +1957,7 @@
         _g = _a.size,
         size = _g === void 0 ? 'medium' : _g,
         startIcon = _a.startIcon,
+        tabIndex = _a.tabIndex,
         tooltip = _a.tooltip,
         _h = _a.type,
         type = _h === void 0 ? 'primary' : _h;
@@ -2002,6 +2003,7 @@
           ref: ref,
           size: size,
           startIcon: startIcon,
+          tabIndex: tabIndex,
           type: isSubmit ? 'submit' : 'button',
           variant: variant
         }, {
@@ -10323,6 +10325,7 @@
         label = _a.label,
         locale = _a.locale,
         onAccept = _a.onAccept,
+        onBlur = _a.onBlur,
         onChange = _a.onChange,
         onClose = _a.onClose,
         onError = _a.onError,
@@ -10423,7 +10426,8 @@
                 focused: readOnly ? false : undefined,
                 inputProps: {
                   className: 'dot-input',
-                  'data-testid': 'dot-date-picker-input'
+                  'data-testid': 'dot-date-picker-input',
+                  onBlur: onBlur
                 },
                 fullWidth: fullWidth,
                 name: inputName
@@ -10554,6 +10558,8 @@
         inputId = _a.inputId,
         inputName = _a.inputName,
         label = _a.label,
+        onAccept = _a.onAccept,
+        onBlur = _a.onBlur,
         onChange = _a.onChange,
         onClose = _a.onClose,
         onOpen = _a.onOpen,
@@ -10640,6 +10646,7 @@
         onChange === null || onChange === void 0 ? void 0 : onChange(pickerTime.format(timeFormat), {
           validationError: null
         });
+        onAccept === null || onAccept === void 0 ? void 0 : onAccept(pickerTime.format(timeFormat));
       };
       var scrollToSelectedTime = function scrollToSelectedTime() {
         if (!(hoursRef === null || hoursRef === void 0 ? void 0 : hoursRef.current) || !(minutesRef === null || minutesRef === void 0 ? void 0 : minutesRef.current)) return;
@@ -10695,7 +10702,7 @@
                       iconId: "error-solid"
                     }, void 0), !disableOpenPicker && !readOnly && !disabled && jsxRuntime.jsx(DotIconButton, {
                       "data-testid": dataTestId && dataTestId + "-open-btn",
-                      iconId: "calendar",
+                      iconId: "pending-clock",
                       onClick: function (_event) {
                         return handleTimePickerButtonClick();
                       },
@@ -10705,7 +10712,8 @@
                 },
                 inputProps: {
                   className: 'dot-input',
-                  'data-testid': dataTestId && dataTestId + "-input"
+                  'data-testid': dataTestId && dataTestId + "-input",
+                  onBlur: onBlur
                 },
                 fullWidth: fullWidth,
                 name: inputName

package/lib/components/button/Button.d.ts

@@ -7,6 +7,8 @@ export interface ButtonProps extends BaseButtonProps {
     endIcon?: ReactNode;
     /** Icon placed before the children. */
     startIcon?: ReactNode;
+    /** Tab order for the button. */
+    tabIndex?: number;
 }
 /** This component wraps the Button component from @material-ui. */
 export declare const DotButton: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib/components/button/Button.stories.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { ComponentMeta } from '@storybook/react';
+import { ComponentMeta, Story } from '@storybook/react';
 import { ButtonProps } from './Button';
-declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>>;
+import React from 'react';
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>>;
 export default _default;
 export declare const Default: any;
 export declare const WithStartIcon: any;
@@ -9,3 +9,4 @@ export declare const WithEndIcon: any;
 export declare const WithDestructiveType: any;
 export declare const WithOutlinedType: any;
 export declare const WithTextType: any;
+export declare const WithTabbableLinkAsChildren: Story<ButtonProps>;

package/lib/components/button/Button.stories.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const buttonWithLinkClassName = "dot-button-with-link";
+export declare const StyledButtonWithLink: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/date-picker/DatePicker.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { FocusEvent, ReactNode } from 'react';
 import { PickersDayProps } from '@mui/x-date-pickers';
 import { FieldChangeHandlerContext } from '@mui/x-date-pickers/internals';
 import { CommonProps } from '../CommonProps';
@@ -39,6 +39,8 @@ export interface DatePickerProps extends CommonProps {
     locale?: DatePickerLocale;
     /** Callback fired when the value is accepted. */
     onAccept?: (value: string) => void;
+    /** A function that should be executed when the input loses focus */
+    onBlur?: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement, Element>) => void;
     /** Callback fired when the value changes. */
     onChange?: (value: string, context: FieldChangeHandlerContext<string>) => void;
     /** Callback fired when the popup requests to be closed. Use in controlled mode (see `open`). */
@@ -65,4 +67,4 @@ export interface DatePickerProps extends CommonProps {
     /** The selected value. Used when the component is controlled. */
     value?: string;
 }
-export declare const DotDatePicker: ({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, disableOpenPicker, disablePast, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, format, fullWidth, helperText, inputId, inputName, label, locale, onAccept, onChange, onClose, onError, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => JSX.Element;
+export declare const DotDatePicker: ({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, disableOpenPicker, disablePast, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, format, fullWidth, helperText, inputId, inputName, label, locale, onAccept, onBlur, onChange, onClose, onError, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => JSX.Element;

package/lib/components/date-picker/DatePicker.stories.d.ts

@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { DatePickerProps } from './';
-declare const _default: ComponentMeta<({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, disableOpenPicker, disablePast, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, format, fullWidth, helperText, inputId, inputName, label, locale, onAccept, onChange, onClose, onError, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, autoFocus, className, closeOnSelect, "data-testid": dataTestId, disableOpenPicker, disablePast, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, format, fullWidth, helperText, inputId, inputName, label, locale, onAccept, onBlur, onChange, onClose, onError, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => JSX.Element>;
 export default _default;
 export declare const Default: DatePickerProps;
 export declare const WithHelperText: any;
@@ -18,3 +18,4 @@ export declare const WithFullWidth: any;
 export declare const WithoutClearButton: any;
 export declare const WithControlledMode: Story<DatePickerProps>;
 export declare const WithLocaleConfiguration: Story<DatePickerProps>;
+export declare const WithChangeOnBlur: Story<DatePickerProps>;

package/lib/components/date-picker/DatePicker.stories.styles.d.ts

@@ -1,4 +1,6 @@
 export declare const datePickerWithControlledModeClassName = "dot-date-picker-with-controlled-mode";
 export declare const datePickerWithLocaleClassName = "dot-date-picker-with-locale";
+export declare const datePickerWithBlurClassName = "dot-date-picker-with-blur";
 export declare const StyledDatePickerWithControlledMode: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledDatePickerWithChangeOnBlur: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledDatePickerWithLocale: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/time-picker/TimePicker.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { FocusEvent, ReactNode } from 'react';
 import { FieldChangeHandlerContext } from '@mui/x-date-pickers/internals';
 import { CommonProps } from '../CommonProps';
 export interface TimePickerProps extends CommonProps {
@@ -25,6 +25,10 @@ export interface TimePickerProps extends CommonProps {
     inputName?: string;
     /** The label content. */
     label?: string;
+    /** Callback fired when the value is changed from the popper. */
+    onAccept?: (value: string) => void;
+    /** A function that should be executed when the input loses focus */
+    onBlur?: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement, Element>) => void;
     /** Callback fired when the value changes. */
     onChange?: (value: string, context: FieldChangeHandlerContext<string>) => void;
     /** Callback fired when the popup requests to be closed. Use in controlled mode (see `open`). */
@@ -45,4 +49,4 @@ export interface TimePickerProps extends CommonProps {
 export declare const DEFAULT_PICKER_TIME_FORMAT = "hh:mm";
 export declare const DEFAULT_TIME_FORMAT = "hh:mm A";
 export declare const DEFAULT_TIME = "01:00";
-export declare const DotTimePicker: ({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, disableOpenPicker, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onChange, onClose, onOpen, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element;
+export declare const DotTimePicker: ({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, disableOpenPicker, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onAccept, onBlur, onChange, onClose, onOpen, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element;

package/lib/components/time-picker/TimePicker.stories.d.ts

@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { TimePickerProps } from './';
-declare const _default: ComponentMeta<({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, disableOpenPicker, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onChange, onClose, onOpen, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ampm, ariaLabel, autoFocus, className, "data-testid": dataTestId, disableOpenPicker, disabled, error, format, fullWidth, helperText, hideActionButtons, inputId, inputName, label, onAccept, onBlur, onChange, onClose, onOpen, open, persistentLabel, readOnly, required, value, }: TimePickerProps) => JSX.Element>;
 export default _default;
 export declare const Default: TimePickerProps;
 export declare const WithAutoFocus: any;
@@ -18,3 +18,4 @@ export declare const WithOpenedTimePopper: any;
 export declare const WithControlledMode: Story<TimePickerProps>;
 export declare const WithHourFormatPicker: Story<TimePickerProps>;
 export declare const WithOutsideTimeSetter: Story<TimePickerProps>;
+export declare const WithChangeOnBlur: Story<TimePickerProps>;

package/lib/components/time-picker/TimePicker.stories.styles.d.ts

@@ -1,6 +1,8 @@
 export declare const timePickerWithControlledModeClassName = "dot-time-picker-with-controlled-mode";
 export declare const timePickerWithHourFormatPickerClassName = "dot-time-picker-with-hour-format-picker";
 export declare const timePickerWithOutsideTimeSetterClassName = "dot-time-picker-with-outside-time-setter";
+export declare const timePickerWithBlurClassName = "dot-time-picker-with-blur";
 export declare const StyledTimePickerWithControlledMode: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTimePickerWithHourFormatPicker: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTimePickerWithOutsideTimeSetter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTimePickerWithChangeOnBlur: import("styled-components").StyledComponent<"div", any, {}, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [