@digital-ai/dot-components 2.7.2 → 2.7.3

package/CHANGE_LOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.7.3](https://www.npmjs.com/package/@digital-ai/dot-components) (05/01/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.7.2...2.7.3)
+
+**Features:**
+
+- D-24626: Add startEditable attribute to InlineEdit [\#1466](https://github.com/digital-ai/dot-components/pull/1466) ([jmcnally](https://github.com/jmcnally))
+
+**Misc:**
+
+- Updates to deprecated github action `set-output` [\#1465](https://github.com/digital-ai/dot-components/pull/1465) ([CWSites](https://github.com/CWSites))
+- remove use of set-output [\#1464](https://github.com/digital-ai/dot-components/pull/1464) ([CWSites](https://github.com/CWSites))
+- S-91985: Improve form input labelling for accessibility [\#1463](https://github.com/digital-ai/dot-components/pull/1463) ([jmcnally](https://github.com/jmcnally))
+
 ## [2.7.2](https://www.npmjs.com/package/@digital-ai/dot-components) (04/24/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.7.1...2.7.2)
@@ -8,10 +22,6 @@
 
 - S-92086: `DotDatePicker` improvements [\#1461](https://github.com/digital-ai/dot-components/pull/1461) ([dmiletic85](https://github.com/dmiletic85))
 
-**Fixed bugs:**
-
-- Issue-1449: Update status pills to have generally lighter backgrounds [\#1456](https://github.com/digital-ai/dot-components/pull/1456) ([jmcnally](https://github.com/jmcnally))
-
 ## [2.7.1](https://www.npmjs.com/package/@digital-ai/dot-components) (04/20/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.7.0...2.7.1)
@@ -22,6 +32,7 @@
 
 **Fixed bugs:**
 
+- Issue-1449: Update status pills to have generally lighter backgrounds [\#1456](https://github.com/digital-ai/dot-components/pull/1456) ([jmcnally](https://github.com/jmcnally))
 - `DotTimePicker`, `DotDatePicker`: fix issues with controlled and uncontrolled states [\#1454](https://github.com/digital-ai/dot-components/pull/1454) ([dmiletic85](https://github.com/dmiletic85))
 - D-24807: `Demo app` - fix error when starting demo application [\#1451](https://github.com/digital-ai/dot-components/pull/1451) ([dmiletic85](https://github.com/dmiletic85))
 
@@ -481,6 +492,7 @@
 
 **Features:**
 
+- S-84117: As a customer admin, I want the IdP creation flow to be more intuitive, as I find the existing user flow a little overwhelming [\#1185](https://github.com/digital-ai/dot-components/pull/1185) ([ryangamble](https://github.com/ryangamble))
 - S-85256: `Map` component example in demo app [\#1184](https://github.com/digital-ai/dot-components/pull/1184) ([dmiletic85](https://github.com/dmiletic85))
 
 **Fixed bugs:**
@@ -499,7 +511,6 @@
 
 **Features:**
 
-- S-84117: As a customer admin, I want the IdP creation flow to be more intuitive, as I find the existing user flow a little overwhelming [\#1185](https://github.com/digital-ai/dot-components/pull/1185) ([ryangamble](https://github.com/ryangamble))
 - S-85283: `InlineEdit` component should provide a tooltip out the box [\#1181](https://github.com/digital-ai/dot-components/pull/1181) ([dmiletic85](https://github.com/dmiletic85))
 
 **Fixed bugs:**
@@ -575,7 +586,6 @@
 - D-20736: Fix text alignment for small DotAvatar [\#1116](https://github.com/digital-ai/dot-components/pull/1116) ([selsemore](https://github.com/selsemore))
 - D-20719:  `DotTable`: Checkbox column takes up to much space in a multi-select table [\#1112](https://github.com/digital-ai/dot-components/pull/1112) ([dmiletic85](https://github.com/dmiletic85))
 - D-20660: `DotNavigationRail`: Should be able to update the selected rail [\#1106](https://github.com/digital-ai/dot-components/pull/1106) ([dmiletic85](https://github.com/dmiletic85))
-- D-20511: remove extra period [\#1094](https://github.com/digital-ai/dot-components/pull/1094) ([CWSites](https://github.com/CWSites))
 
 ## [1.14.0](https://www.npmjs.com/package/@digital-ai/dot-components) (04/01/2022)
 
@@ -619,6 +629,7 @@
 
 **Fixed bugs:**
 
+- D-20511: remove extra period [\#1094](https://github.com/digital-ai/dot-components/pull/1094) ([CWSites](https://github.com/CWSites))
 - D-20463: Change the DotDrawer stories to make drawers not open initially [\#1086](https://github.com/digital-ai/dot-components/pull/1086) ([selsemore](https://github.com/selsemore))
 - D-20418: `DotTable`: Strange scrolling behavior with action menu [\#1082](https://github.com/digital-ai/dot-components/pull/1082) ([dmiletic85](https://github.com/dmiletic85))
 - D-20426: `DotConfirmation `: `title` and `message` prop are not applying correct font family [\#1081](https://github.com/digital-ai/dot-components/pull/1081) ([dmiletic85](https://github.com/dmiletic85))
@@ -706,6 +717,7 @@
 **Fixed bugs:**
 
 - D-20004: Fix multiSelect for tables that use onUpdateData callback [\#1005](https://github.com/digital-ai/dot-components/pull/1005) ([selsemore](https://github.com/selsemore))
+- D-19932: `Avatar` tooltip appears in wrong position [\#995](https://github.com/digital-ai/dot-components/pull/995) ([dmiletic85](https://github.com/dmiletic85))
 
 **Misc:**
 
@@ -726,7 +738,6 @@
 **Fixed bugs:**
 
 - D-19944: `Drawer` close icon doesn't have enough padding [\#996](https://github.com/digital-ai/dot-components/pull/996) ([dmiletic85](https://github.com/dmiletic85))
-- D-19932: `Avatar` tooltip appears in wrong position [\#995](https://github.com/digital-ai/dot-components/pull/995) ([dmiletic85](https://github.com/dmiletic85))
 - D-19816: `SplitButton`: `data-testid` is assigned to multiple elements [\#986](https://github.com/digital-ai/dot-components/pull/986) ([dmiletic85](https://github.com/dmiletic85))
 - D-19820: Failing `Table` unit tests on NX major upgrade branch [\#983](https://github.com/digital-ai/dot-components/pull/983) ([dmiletic85](https://github.com/dmiletic85))
 
@@ -1003,6 +1014,7 @@
 - S-80109: Expose built-in `leaveDelay`, `onClose`, `open` props on `DotTooltip` component [\#786](https://github.com/digital-ai/dot-components/pull/786) ([dmiletic85](https://github.com/dmiletic85))
 - S-76907: update ButtonToggle styles, update unit tests and add e2e tests [\#785](https://github.com/digital-ai/dot-components/pull/785) ([CWSites](https://github.com/CWSites))
 - S-80048: product wrapper demo [\#782](https://github.com/digital-ai/dot-components/pull/782) ([CWSites](https://github.com/CWSites))
+- Add submitButtonProps prop to DotJsonSchemaForm component [\#775](https://github.com/digital-ai/dot-components/pull/775) ([selsemore](https://github.com/selsemore))
 
 ## [1.3.2](https://www.npmjs.com/package/@digital-ai/dot-components) (11/05/2021)
 
@@ -1017,7 +1029,6 @@
 
 - Patch release [\#780](https://github.com/digital-ai/dot-components/pull/780) ([TheKeithStewart](https://github.com/TheKeithStewart))
 - S-79985: temporarily remove react-jsonschema-form from library [\#776](https://github.com/digital-ai/dot-components/pull/776) ([TheKeithStewart](https://github.com/TheKeithStewart))
-- Add submitButtonProps prop to DotJsonSchemaForm component [\#775](https://github.com/digital-ai/dot-components/pull/775) ([selsemore](https://github.com/selsemore))
 - S-76893: Webpack 4 - update peer dependencies [\#768](https://github.com/digital-ai/dot-components/pull/768) ([CWSites](https://github.com/CWSites))
 - S-79957: improve husky [\#765](https://github.com/digital-ai/dot-components/pull/765) ([CWSites](https://github.com/CWSites))
 

package/index.esm.js

@@ -4290,6 +4290,9 @@ const getChipsFromAutocomplete = ({
 };
 const checkIfDuplicateItem = (itemText, autocompleteOptions) => autocompleteOptions.some(autocompleteOption => autocompleteOption.title === itemText);
 
+function ariaLabelOrAlternates(ariaLabel, label, placeholder) {
+  return ariaLabel || label || placeholder;
+}
 const DEFAULT_ACTION_ITEM_TEXT = 'Add new item';
 const DotAutoComplete = ({
   ListboxComponent,
@@ -4582,11 +4585,17 @@ const DotAutoComplete = ({
             error: _error,
             focused: _readOnly ? false : undefined,
             helperText: helperText,
+            id: inputId,
             inputProps: Object.assign(Object.assign({}, inputProps), {
+              'aria-label': ariaLabelOrAlternates(ariaLabel, label, placeholder),
+              'data-testid': dataTestId && `${dataTestId}-input`,
               id: inputId,
               className: useStylesWithRootClass(inputProps.className, 'dot-input'),
               readOnly: _readOnly
             }),
+            InputLabelProps: {
+              htmlFor: inputId
+            },
             InputProps: Object.assign(Object.assign({}, params.InputProps), {
               endAdornment: !_readOnly ? renderEndAdornment(params.InputProps.endAdornment) : undefined
             }),
@@ -7054,6 +7063,7 @@ const DotInlineEdit = ({
   onEditStateChange,
   readOnly,
   selectTextOnEdit,
+  startEditable: _startEditable = false,
   tabIndex: _tabIndex = 0,
   tooltip,
   typography: _typography = 'body1',
@@ -7065,6 +7075,11 @@ const DotInlineEdit = ({
   const [inputValue, setInputValue] = useState(_value);
   const inputRef = useRef();
   const inlineEditRef = useRef();
+  useEffect(() => {
+    if (_startEditable && !readOnly) {
+      enterEditMode();
+    }
+  }, []);
   useEffect(() => {
     if (_value !== inputValue) {
       setInputValue(_value);
@@ -7077,10 +7092,13 @@ const DotInlineEdit = ({
       setShowTooltip(visible);
     }
   };
-  const handleInlineEditClick = () => {
-    if (editing) return;
+  const enterEditMode = () => {
     setOriginalValue(inputValue);
     setEditing(true);
+  };
+  const handleInlineEditClick = () => {
+    if (editing) return;
+    enterEditMode();
     if (onEditStateChange) {
       onEditStateChange(true);
     }
@@ -7185,7 +7203,7 @@ const DotInlineEdit = ({
         error: false,
         fullWidth: _fullWidth,
         inputProps: {
-          'data-testid': dataTestId,
+          'data-testid': `${dataTestId}-input`,
           className: 'dot-input',
           maxLength: charactersLimit === null || charactersLimit === void 0 ? void 0 : charactersLimit.maxLength
         },

package/index.umd.js

@@ -4723,6 +4723,9 @@
       });
     };
 
+    function ariaLabelOrAlternates(ariaLabel, label, placeholder) {
+      return ariaLabel || label || placeholder;
+    }
     var DEFAULT_ACTION_ITEM_TEXT = 'Add new item';
     var DotAutoComplete = function DotAutoComplete(_a) {
       var ListboxComponent = _a.ListboxComponent,
@@ -5041,11 +5044,17 @@
                 error: error,
                 focused: readOnly ? false : undefined,
                 helperText: helperText,
+                id: inputId,
                 inputProps: __assign(__assign({}, inputProps), {
+                  'aria-label': ariaLabelOrAlternates(ariaLabel, label, placeholder),
+                  'data-testid': dataTestId && dataTestId + "-input",
                   id: inputId,
                   className: useStylesWithRootClass(inputProps.className, 'dot-input'),
                   readOnly: readOnly
                 }),
+                InputLabelProps: {
+                  htmlFor: inputId
+                },
                 InputProps: __assign(__assign({}, params.InputProps), {
                   endAdornment: !readOnly ? renderEndAdornment(params.InputProps.endAdornment) : undefined
                 }),
@@ -7601,27 +7610,34 @@
         onEditStateChange = _a.onEditStateChange,
         readOnly = _a.readOnly,
         selectTextOnEdit = _a.selectTextOnEdit,
-        _c = _a.tabIndex,
-        tabIndex = _c === void 0 ? 0 : _c,
+        _c = _a.startEditable,
+        startEditable = _c === void 0 ? false : _c,
+        _d = _a.tabIndex,
+        tabIndex = _d === void 0 ? 0 : _d,
         tooltip = _a.tooltip,
-        _d = _a.typography,
-        typography = _d === void 0 ? 'body1' : _d,
-        _e = _a.value,
-        value = _e === void 0 ? '' : _e;
-      var _f = React.useState(false),
-        editing = _f[0],
-        setEditing = _f[1];
+        _e = _a.typography,
+        typography = _e === void 0 ? 'body1' : _e,
+        _f = _a.value,
+        value = _f === void 0 ? '' : _f;
       var _g = React.useState(false),
-        showTooltip = _g[0],
-        setShowTooltip = _g[1];
-      var _h = React.useState(''),
-        originalValue = _h[0],
-        setOriginalValue = _h[1];
-      var _j = React.useState(value),
-        inputValue = _j[0],
-        setInputValue = _j[1];
+        editing = _g[0],
+        setEditing = _g[1];
+      var _h = React.useState(false),
+        showTooltip = _h[0],
+        setShowTooltip = _h[1];
+      var _j = React.useState(''),
+        originalValue = _j[0],
+        setOriginalValue = _j[1];
+      var _k = React.useState(value),
+        inputValue = _k[0],
+        setInputValue = _k[1];
       var inputRef = React.useRef();
       var inlineEditRef = React.useRef();
+      React.useEffect(function () {
+        if (startEditable && !readOnly) {
+          enterEditMode();
+        }
+      }, []);
       React.useEffect(function () {
         if (value !== inputValue) {
           setInputValue(value);
@@ -7634,10 +7650,13 @@
           setShowTooltip(visible);
         }
       };
-      var handleInlineEditClick = function handleInlineEditClick() {
-        if (editing) return;
+      var enterEditMode = function enterEditMode() {
         setOriginalValue(inputValue);
         setEditing(true);
+      };
+      var handleInlineEditClick = function handleInlineEditClick() {
+        if (editing) return;
+        enterEditMode();
         if (onEditStateChange) {
           onEditStateChange(true);
         }
@@ -7787,7 +7806,7 @@
             error: false,
             fullWidth: fullWidth,
             inputProps: {
-              'data-testid': dataTestId,
+              'data-testid': dataTestId + "-input",
               className: 'dot-input',
               maxLength: charactersLimit === null || charactersLimit === void 0 ? void 0 : charactersLimit.maxLength
             },

package/lib/components/inline-edit/InlineEdit.d.ts

@@ -20,6 +20,8 @@ export interface InlineEditProps extends CommonProps {
     readOnly?: boolean;
     /** If true, when starting edit it will select all text in the input */
     selectTextOnEdit?: boolean;
+    /** If true and readOnly is false when component loads, start as editable */
+    startEditable?: boolean;
     /** tab order for the inline edit */
     tabIndex?: number;
     /** Tooltip text displayed on hover */
@@ -32,4 +34,4 @@ export interface InlineEditProps extends CommonProps {
 /**
  * @experimental This component is still in development
  */
-export declare const DotInlineEdit: ({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, selectTextOnEdit, tabIndex, tooltip, typography, value, }: InlineEditProps) => JSX.Element;
+export declare const DotInlineEdit: ({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, selectTextOnEdit, startEditable, tabIndex, tooltip, typography, value, }: InlineEditProps) => JSX.Element;

package/lib/components/inline-edit/InlineEdit.stories.d.ts

@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { InlineEditProps } from './InlineEdit';
-declare const _default: ComponentMeta<({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, selectTextOnEdit, tabIndex, tooltip, typography, value, }: InlineEditProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, selectTextOnEdit, startEditable, tabIndex, tooltip, typography, value, }: InlineEditProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story<InlineEditProps>;
 export declare const WithCharactersLimit: any;
@@ -10,6 +10,7 @@ export declare const WithoutActionButtons: any;
 export declare const WithTooltip: any;
 export declare const WithSaveError: Story<InlineEditProps>;
 export declare const WithCustomTypography: Story<InlineEditProps>;
+export declare const WithStartEditable: any;
 export declare const WithSingleBinding: any;
 export declare const WithMultipleBindings: Story<InlineEditProps>;
 export declare const WithSelectOnEdit: any;

package/package.json

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