@digital-ai/dot-components 1.6.0 → 1.6.1

package/CHANGE_LOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [1.6.1](https://github.com/digital-ai/dot-components/tree/1.6.1) (01/10/2022)
+
+[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.6.0...1.6.1)
+
+**Features:**
+
+- S-78917: Character limit for breadcrumb items [\#921](https://github.com/digital-ai/dot-components/pull/921) ([monapatel91](https://github.com/monapatel91))
+
+**Fixed bugs:**
+
+- `1.6.0` - Sidebar links broken, import was moved [\#925](https://github.com/digital-ai/dot-components/issues/925)
+- `Autocomplete` doesn't have `dot-input` class [\#923](https://github.com/digital-ai/dot-components/issues/923)
+- D-19415: `1.6.0` - Sidebar links broken, import was moved [\#926](https://github.com/digital-ai/dot-components/pull/926) ([dmiletic85](https://github.com/dmiletic85))
+- D-19390: `Autocomplete` doesn't have `dot-input` class [\#924](https://github.com/digital-ai/dot-components/pull/924) ([dmiletic85](https://github.com/dmiletic85))
+
 ## [1.6.0](https://github.com/digital-ai/dot-components/tree/1.6.0) (01/03/2022)
 
 [Full Changelog](https://github.com/digital-ai/dot-components/compare/1.5.4...1.6.0)
@@ -7,6 +22,7 @@
 **Features:**
 
 - S-77210: Component - Drawer [\#893](https://github.com/digital-ai/dot-components/pull/893) ([monapatel91](https://github.com/monapatel91))
+- S-80855: Display tooltip on last breadcrumb item \(on hover\) when it is clipped with ellipsis [\#883](https://github.com/digital-ai/dot-components/pull/883) ([dmiletic85](https://github.com/dmiletic85))
 
 **Fixed bugs:**
 
@@ -39,7 +55,6 @@
 - `Breadcrumbs` Display tooltip on last item \(on hover\) when it is clipped with ellipsis [\#878](https://github.com/digital-ai/dot-components/issues/878)
 - S-80939: `Menu`: Add option to customize item's height [\#902](https://github.com/digital-ai/dot-components/pull/902) ([dmiletic85](https://github.com/dmiletic85))
 - S-80871: `Sidebar` Changes on back arrow [\#896](https://github.com/digital-ai/dot-components/pull/896) ([dmiletic85](https://github.com/dmiletic85))
-- S-80855: Display tooltip on last breadcrumb item \(on hover\) when it is clipped with ellipsis [\#883](https://github.com/digital-ai/dot-components/pull/883) ([dmiletic85](https://github.com/dmiletic85))
 
 **Fixed bugs:**
 
@@ -446,7 +461,6 @@
 **Merged pull requests:**
 
 - New patch release [\#677](https://github.com/digital-ai/dot-components/pull/677) ([CWSites](https://github.com/CWSites))
-- S-78572: Make entire sidebar backitem clickable [\#670](https://github.com/digital-ai/dot-components/pull/670) ([selsemore](https://github.com/selsemore))
 
 ## [1.0.9](https://github.com/digital-ai/dot-components/tree/1.0.9) (09/02/2021)
 
@@ -469,6 +483,7 @@
 **Merged pull requests:**
 
 - Release `1.0.8` [\#673](https://github.com/digital-ai/dot-components/pull/673) ([CWSites](https://github.com/CWSites))
+- S-78572: Make entire sidebar backitem clickable [\#670](https://github.com/digital-ai/dot-components/pull/670) ([selsemore](https://github.com/selsemore))
 - improving table component by fixing issues reported on github [\#668](https://github.com/digital-ai/dot-components/pull/668) ([monapatel91](https://github.com/monapatel91))
 - S-78516 extra files being formatted [\#665](https://github.com/digital-ai/dot-components/pull/665) ([TheKeithStewart](https://github.com/TheKeithStewart))
 - S-78464: add main branch name [\#664](https://github.com/digital-ai/dot-components/pull/664) ([CWSites](https://github.com/CWSites))

package/dot-components.esm.js

@@ -1868,9 +1868,7 @@ var DotListItem = function DotListItem(_ref3) {
   }, []);
 
   var toggleOpen = function toggleOpen(event) {
-    event.stopPropagation();
-    event.preventDefault();
-    setAnchorEl(event.currentTarget);
+    return setAnchorEl(event.currentTarget);
   };
 
   var handleClick = function handleClick(event) {
@@ -2813,6 +2811,11 @@ var DotAutoComplete = function DotAutoComplete(_ref) {
     open: isOpened,
     options: sortOptions(),
     renderInput: function renderInput(params) {
+      // InputBaseComponentProps is used here because that is the base
+      // type of 'inputProps' of 'StyledTextField' component. TS treats
+      // 'inputProps' as 'object' type and will complain when accessing
+      // className without casting to proper type
+      var inputProps = params.inputProps;
       return (
         /*#__PURE__*/
         // We are not using DotInputText here because the {...params} spread
@@ -2832,6 +2835,9 @@ var DotAutoComplete = function DotAutoComplete(_ref) {
           error: error,
           helperText: helperText,
           id: inputId,
+          inputProps: Object.assign(Object.assign({}, inputProps), {
+            className: useStylesWithRootClass(inputProps.className, 'dot-input')
+          }),
           inputRef: textFieldRef,
           label: label,
           name: label,
@@ -3016,10 +3022,17 @@ var mapBreadcrumbItems = function mapBreadcrumbItems(items, refs, _ref2) {
       lastItemRef = refs.lastItemRef;
   return items === null || items === void 0 ? void 0 : items.map(function (item, index) {
     var ariaLabel = item.ariaLabel,
+        characterLimit = item.characterLimit,
         href = item.href,
         onClick = item.onClick,
         text = item.text,
-        underline = item.underline; // Check if last element
+        underline = item.underline;
+    var truncatedText = '';
+
+    if (text.length > characterLimit) {
+      truncatedText = text.slice(0, characterLimit) + '...';
+    } // Check if last element
+
 
     if (index === items.length - 1) {
       // Add tooltip if item is not fully visible
@@ -3033,6 +3046,8 @@ var mapBreadcrumbItems = function mapBreadcrumbItems(items, refs, _ref2) {
       return /*#__PURE__*/React__default.createElement("div", {
         key: index,
         ref: isFirstItemAfterCollapse ? firstItemRef : undefined
+      }, /*#__PURE__*/React__default.createElement(DotTooltip, {
+        title: truncatedText && text
       }, /*#__PURE__*/React__default.createElement(DotLink, {
         ariaLabel: ariaLabel,
         className: "breadcrumb",
@@ -3041,7 +3056,7 @@ var mapBreadcrumbItems = function mapBreadcrumbItems(items, refs, _ref2) {
         onClick: onClick,
         tabIndex: 0,
         underline: underline
-      }, text));
+      }, truncatedText ? truncatedText : text)));
     }
   });
 };

package/dot-components.umd.js

@@ -1958,9 +1958,7 @@
       }, []);
 
       var toggleOpen = function toggleOpen(event) {
-        event.stopPropagation();
-        event.preventDefault();
-        setAnchorEl(event.currentTarget);
+        return setAnchorEl(event.currentTarget);
       };
 
       var handleClick = function handleClick(event) {
@@ -2905,6 +2903,11 @@
         open: isOpened,
         options: sortOptions(),
         renderInput: function renderInput(params) {
+          // InputBaseComponentProps is used here because that is the base
+          // type of 'inputProps' of 'StyledTextField' component. TS treats
+          // 'inputProps' as 'object' type and will complain when accessing
+          // className without casting to proper type
+          var inputProps = params.inputProps;
           return (
             /*#__PURE__*/
             // We are not using DotInputText here because the {...params} spread
@@ -2924,6 +2927,9 @@
               error: error,
               helperText: helperText,
               id: inputId,
+              inputProps: __assign(__assign({}, inputProps), {
+                className: useStylesWithRootClass(inputProps.className, 'dot-input')
+              }),
               inputRef: textFieldRef,
               label: label,
               name: label,
@@ -3108,10 +3114,17 @@
           lastItemRef = refs.lastItemRef;
       return items === null || items === void 0 ? void 0 : items.map(function (item, index) {
         var ariaLabel = item.ariaLabel,
+            characterLimit = item.characterLimit,
             href = item.href,
             onClick = item.onClick,
             text = item.text,
-            underline = item.underline; // Check if last element
+            underline = item.underline;
+        var truncatedText = '';
+
+        if (text.length > characterLimit) {
+          truncatedText = text.slice(0, characterLimit) + '...';
+        } // Check if last element
+
 
         if (index === items.length - 1) {
           // Add tooltip if item is not fully visible
@@ -3125,6 +3138,8 @@
           return /*#__PURE__*/React__default["default"].createElement("div", {
             key: index,
             ref: isFirstItemAfterCollapse ? firstItemRef : undefined
+          }, /*#__PURE__*/React__default["default"].createElement(DotTooltip, {
+            title: truncatedText && text
           }, /*#__PURE__*/React__default["default"].createElement(DotLink, {
             ariaLabel: ariaLabel,
             className: "breadcrumb",
@@ -3133,7 +3148,7 @@
             onClick: onClick,
             tabIndex: 0,
             underline: underline
-          }, text));
+          }, truncatedText ? truncatedText : text)));
         }
       });
     };

package/lib/components/breadcrumbs/Breadcrumbs.d.ts

@@ -4,6 +4,8 @@ import { LinkUnderline } from '../link/Link';
 export declare type BreadcrumbItem = {
     /** Defines a string value that labels the current element **/
     ariaLabel?: string;
+    /** If the number of characters is exceeded then an ellipsis should be used to truncate the text  */
+    characterLimit?: number;
     /** link the breadcrumb goes to */
     href?: string;
     onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;

package/lib/components/breadcrumbs/Breadcrumbs.data.d.ts

@@ -1,4 +1,5 @@
 import { BreadcrumbItem } from '../breadcrumbs/Breadcrumbs';
 export declare const defaultStorybookItems: BreadcrumbItem[];
+export declare const characterLimitBreadcrumbItems: BreadcrumbItem[];
 export declare const mockBreadcrumbItems: BreadcrumbItem[];
 export declare const mockLongBreadcrumbItems: BreadcrumbItem[];

package/lib/components/list/List.stories.data.d.ts

@@ -1,3 +1,3 @@
-import { ListItemProps } from './ListItem';
+import { ListItemProps } from './utils/models';
 export declare const mockHref = "/?path=/story/components-list--default";
 export declare const mockListItems: Array<ListItemProps>;

package/lib/components/sidebar/Sidebar.stories.data.d.ts

@@ -0,0 +1,83 @@
+import { MouseEvent } from 'react';
+import { ListItemProps } from '../list/utils/models';
+export declare const getNavigationItems: (isSelected: (key: number) => boolean, handleClick: (key: number) => void) => ({
+    startIconId: string;
+    onClick: import("@storybook/addon-actions").HandlerFunction;
+    items: ({
+        text: string;
+        divider: boolean;
+        onClick?: undefined;
+        selected?: undefined;
+        child?: undefined;
+    } | {
+        onClick: (_event: MouseEvent) => void;
+        selected: boolean;
+        text: string;
+        divider?: undefined;
+        child?: undefined;
+    } | {
+        child: JSX.Element;
+        text?: undefined;
+        divider?: undefined;
+        onClick?: undefined;
+        selected?: undefined;
+    })[];
+    text: string;
+    endIconId?: undefined;
+    selected?: undefined;
+    divider?: undefined;
+} | {
+    items: ({
+        text: string;
+        divider: boolean;
+        startIconId?: undefined;
+        onClick?: undefined;
+        selected?: undefined;
+    } | {
+        startIconId: string;
+        onClick: (_event: MouseEvent) => void;
+        selected: boolean;
+        text: string;
+        divider?: undefined;
+    })[];
+    text: string;
+    startIconId?: undefined;
+    onClick?: undefined;
+    endIconId?: undefined;
+    selected?: undefined;
+    divider?: undefined;
+} | {
+    endIconId: string;
+    startIconId: string;
+    onClick: (_event: MouseEvent) => void;
+    selected: boolean;
+    text: string;
+    items?: undefined;
+    divider?: undefined;
+} | {
+    text: string;
+    divider: boolean;
+    startIconId?: undefined;
+    onClick?: undefined;
+    items?: undefined;
+    endIconId?: undefined;
+    selected?: undefined;
+} | {
+    startIconId: string;
+    onClick: (_event: MouseEvent) => void;
+    selected: boolean;
+    text: string;
+    items?: undefined;
+    endIconId?: undefined;
+    divider?: undefined;
+} | {
+    divider: boolean;
+    startIconId?: undefined;
+    onClick?: undefined;
+    items?: undefined;
+    text?: undefined;
+    endIconId?: undefined;
+    selected?: undefined;
+})[];
+export declare const routerNavigationItems: Array<ListItemProps>;
+export declare const SidebarStoryRoutes: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [
@@ -32,6 +32,7 @@
     "styled-components": "^5.2.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0",
+    "react-router-dom": "^5.2.0"
   }
 }