@workday/canvas-kit-preview-react 6.3.0 → 7.0.0-alpha.0-next.0

package/dist/commonjs/menu/lib/MenuItem.js

@@ -208,7 +208,7 @@ var MenuItem = /** @class */ (function (_super) {
         secondaryIconProps = setIconProps(secondaryIcon, isDisabled, isFocused);
         return (React.createElement(React.Fragment, null,
             hasDivider && React.createElement(Divider, null),
-            React.createElement(Item, __assign({ ref: this.ref, tabIndex: -1, id: id, role: role, onClick: this.handleClick, "aria-disabled": !!isDisabled, isDisabled: !!isDisabled, isFocused: !!isFocused }, elemProps),
+            React.createElement(Item, __assign({ ref: this.ref, tabIndex: -1, id: id, role: role, onClick: this.handleClick, "aria-disabled": isDisabled ? true : undefined, isDisabled: !!isDisabled, isFocused: !!isFocused }, elemProps),
                 icon && iconProps && React.createElement(StyledSystemIcon, __assign({}, iconProps)),
                 React.createElement(LabelContainer, null, children),
                 secondaryIcon && secondaryIconProps && (React.createElement(SecondaryStyledSystemIcon, __assign({}, secondaryIconProps))))));

package/dist/commonjs/side-panel/lib/SidePanel.d.ts

@@ -66,8 +66,30 @@ export declare const SidePanelContext: React.Context<{
 }>;
 declare const SidePanel: {
     ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, variant, touched, ...elemProps }: SidePanelProps): JSX.Element;
-    ToggleButton: ({ variant, icon, ...rest }: Pick<IconButtonProps, "value" | "children" | "theme" | "size" | "icon" | "shouldMirrorIcon" | "variant" | "onToggleChange" | "toggled"> & React.ButtonHTMLAttributes<HTMLButtonElement>) => JSX.Element;
+    ToggleButton: ({ variant, icon, tooltipTextExpand: expandLabel, tooltipTextCollapse: collapseLabel, ...rest }: IconButtonProps & {
+        /**
+         * The tooltip text to expand the side panel
+         * @default 'Expand'
+         */
+        tooltipTextExpand?: string | undefined;
+        /**
+         * The tooltip text to collapse the side panel
+         * @default 'Collapse'
+         */
+        tooltipTextCollapse?: string | undefined;
+    } & React.ButtonHTMLAttributes<HTMLButtonElement>) => JSX.Element;
+};
+export declare type ToggleButtonProps = IconButtonProps & {
+    /**
+     * The tooltip text to expand the side panel
+     * @default 'Expand'
+     */
+    tooltipTextExpand?: string;
+    /**
+     * The tooltip text to collapse the side panel
+     * @default 'Collapse'
+     */
+    tooltipTextCollapse?: string;
 };
-export declare type ToggleButtonProps = Omit<IconButtonProps, 'aria-label'>;
 export default SidePanel;
 //# sourceMappingURL=SidePanel.d.ts.map

package/dist/commonjs/side-panel/lib/SidePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAI7E,oBAAY,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD,oBAAY,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAsCD,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,QAAA,MAAM,SAAS;;;CAgGd,CAAC;AAEF,oBAAY,iBAAiB,GAAG,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;AA0CpE,eAAe,SAAS,CAAC"}
+{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAK7E,oBAAY,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD,oBAAY,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAsCD,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,QAAA,MAAM,SAAS;;;QAmGb;;;WAGG;;QAEH;;;WAGG;;;CAXJ,CAAC;AAEF,oBAAY,iBAAiB,GAAG,eAAe,GAAG;IAChD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AA+CF,eAAe,SAAS,CAAC"}

package/dist/commonjs/side-panel/lib/SidePanel.js

@@ -40,6 +40,7 @@ var core_1 = require("@emotion/core");
 var button_1 = require("@workday/canvas-kit-react/button");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+var tooltip_1 = require("@workday/canvas-kit-react/tooltip");
 var createKeyframes = function (from, to) {
     var normalized = {
         from: typeof from === 'number' ? from + 'px' : from,
@@ -125,7 +126,7 @@ var SidePanel = function (_a) {
  * A toggle button styled specifically for the side panel container.
  */
 var ToggleButton = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? 'plain' : _b, _c = _a.icon, icon = _c === void 0 ? canvas_system_icons_web_1.transformationImportIcon : _c, rest = __rest(_a, ["variant", "icon"]);
+    var _b = _a.variant, variant = _b === void 0 ? 'plain' : _b, _c = _a.icon, icon = _c === void 0 ? canvas_system_icons_web_1.transformationImportIcon : _c, _d = _a.tooltipTextExpand, expandLabel = _d === void 0 ? 'Expand' : _d, _e = _a.tooltipTextCollapse, collapseLabel = _e === void 0 ? 'Collapse' : _e, rest = __rest(_a, ["variant", "icon", "tooltipTextExpand", "tooltipTextCollapse"]);
     var context = React.useContext(exports.SidePanelContext);
     var useRTLOrigin = function () {
         var isRTL = common_1.useIsRTL();
@@ -148,8 +149,8 @@ var ToggleButton = function (_a) {
             ? "scaleX(" + (rtlOrigin === 'left' ? '1' : '-1') + ")"
             : "scaleX(" + (rtlOrigin === 'left' ? '-1' : '1') + ")",
     });
-    // @ts-ignore aria-label type error here. The user will decide to use aria-label or aria-labelledby
-    return core_1.jsx(button_1.IconButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, rest));
+    return (core_1.jsx(tooltip_1.Tooltip, { title: context.state === 'collapsed' ? expandLabel : collapseLabel, type: "muted" },
+        core_1.jsx(button_1.IconButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, rest))));
 };
 SidePanel.ToggleButton = ToggleButton;
 exports.default = SidePanel;

package/dist/es6/menu/lib/MenuItem.js

@@ -196,7 +196,7 @@ var MenuItem = /** @class */ (function (_super) {
         secondaryIconProps = setIconProps(secondaryIcon, isDisabled, isFocused);
         return (React.createElement(React.Fragment, null,
             hasDivider && React.createElement(Divider, null),
-            React.createElement(Item, __assign({ ref: this.ref, tabIndex: -1, id: id, role: role, onClick: this.handleClick, "aria-disabled": !!isDisabled, isDisabled: !!isDisabled, isFocused: !!isFocused }, elemProps),
+            React.createElement(Item, __assign({ ref: this.ref, tabIndex: -1, id: id, role: role, onClick: this.handleClick, "aria-disabled": isDisabled ? true : undefined, isDisabled: !!isDisabled, isFocused: !!isFocused }, elemProps),
                 icon && iconProps && React.createElement(StyledSystemIcon, __assign({}, iconProps)),
                 React.createElement(LabelContainer, null, children),
                 secondaryIcon && secondaryIconProps && (React.createElement(SecondaryStyledSystemIcon, __assign({}, secondaryIconProps))))));

package/dist/es6/side-panel/lib/SidePanel.d.ts

@@ -66,8 +66,30 @@ export declare const SidePanelContext: React.Context<{
 }>;
 declare const SidePanel: {
     ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, variant, touched, ...elemProps }: SidePanelProps): JSX.Element;
-    ToggleButton: ({ variant, icon, ...rest }: Pick<IconButtonProps, "size" | "icon" | "children" | "value" | "theme" | "shouldMirrorIcon" | "variant" | "onToggleChange" | "toggled"> & React.ButtonHTMLAttributes<HTMLButtonElement>) => JSX.Element;
+    ToggleButton: ({ variant, icon, tooltipTextExpand: expandLabel, tooltipTextCollapse: collapseLabel, ...rest }: IconButtonProps & {
+        /**
+         * The tooltip text to expand the side panel
+         * @default 'Expand'
+         */
+        tooltipTextExpand?: string | undefined;
+        /**
+         * The tooltip text to collapse the side panel
+         * @default 'Collapse'
+         */
+        tooltipTextCollapse?: string | undefined;
+    } & React.ButtonHTMLAttributes<HTMLButtonElement>) => JSX.Element;
+};
+export declare type ToggleButtonProps = IconButtonProps & {
+    /**
+     * The tooltip text to expand the side panel
+     * @default 'Expand'
+     */
+    tooltipTextExpand?: string;
+    /**
+     * The tooltip text to collapse the side panel
+     * @default 'Collapse'
+     */
+    tooltipTextCollapse?: string;
 };
-export declare type ToggleButtonProps = Omit<IconButtonProps, 'aria-label'>;
 export default SidePanel;
 //# sourceMappingURL=SidePanel.d.ts.map

package/dist/es6/side-panel/lib/SidePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAI7E,oBAAY,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD,oBAAY,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAsCD,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,QAAA,MAAM,SAAS;;;CAgGd,CAAC;AAEF,oBAAY,iBAAiB,GAAG,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;AA0CpE,eAAe,SAAS,CAAC"}
+{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAK7E,oBAAY,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD,oBAAY,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAsCD,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,QAAA,MAAM,SAAS;;;QAmGb;;;WAGG;;QAEH;;;WAGG;;;CAXJ,CAAC;AAEF,oBAAY,iBAAiB,GAAG,eAAe,GAAG;IAChD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AA+CF,eAAe,SAAS,CAAC"}

package/dist/es6/side-panel/lib/SidePanel.js

@@ -31,6 +31,7 @@ import { css, jsx, keyframes } from '@emotion/core';
 import { IconButton } from '@workday/canvas-kit-react/button';
 import { space, colors, depth } from '@workday/canvas-kit-react/tokens';
 import { transformationImportIcon } from '@workday/canvas-system-icons-web';
+import { Tooltip } from '@workday/canvas-kit-react/tooltip';
 var createKeyframes = function (from, to) {
     var normalized = {
         from: typeof from === 'number' ? from + 'px' : from,
@@ -116,7 +117,7 @@ var SidePanel = function (_a) {
  * A toggle button styled specifically for the side panel container.
  */
 var ToggleButton = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? 'plain' : _b, _c = _a.icon, icon = _c === void 0 ? transformationImportIcon : _c, rest = __rest(_a, ["variant", "icon"]);
+    var _b = _a.variant, variant = _b === void 0 ? 'plain' : _b, _c = _a.icon, icon = _c === void 0 ? transformationImportIcon : _c, _d = _a.tooltipTextExpand, expandLabel = _d === void 0 ? 'Expand' : _d, _e = _a.tooltipTextCollapse, collapseLabel = _e === void 0 ? 'Collapse' : _e, rest = __rest(_a, ["variant", "icon", "tooltipTextExpand", "tooltipTextCollapse"]);
     var context = React.useContext(SidePanelContext);
     var useRTLOrigin = function () {
         var isRTL = useIsRTL();
@@ -139,8 +140,8 @@ var ToggleButton = function (_a) {
             ? "scaleX(" + (rtlOrigin === 'left' ? '1' : '-1') + ")"
             : "scaleX(" + (rtlOrigin === 'left' ? '-1' : '1') + ")",
     });
-    // @ts-ignore aria-label type error here. The user will decide to use aria-label or aria-labelledby
-    return jsx(IconButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, rest));
+    return (jsx(Tooltip, { title: context.state === 'collapsed' ? expandLabel : collapseLabel, type: "muted" },
+        jsx(IconButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, rest))));
 };
 SidePanel.ToggleButton = ToggleButton;
 export default SidePanel;

package/menu/lib/MenuItem.tsx

@@ -274,7 +274,7 @@ class MenuItem extends React.Component<MenuItemProps> {
           id={id}
           role={role}
           onClick={this.handleClick}
-          aria-disabled={!!isDisabled}
+          aria-disabled={isDisabled ? true : undefined}
           isDisabled={!!isDisabled}
           isFocused={!!isFocused}
           {...elemProps}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "6.3.0",
+  "version": "7.0.0-alpha.0-next.0+69f28d82",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -54,15 +54,15 @@
   "dependencies": {
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
-    "@workday/canvas-kit-react": "^6.3.0",
+    "@workday/canvas-kit-react": "^7.0.0-alpha.0-next.0+69f28d82",
     "@workday/canvas-system-icons-web": "1.0.41",
     "@workday/design-assets-types": "^0.2.4"
   },
   "devDependencies": {
     "@workday/canvas-accent-icons-web": "^1.0.0",
-    "@workday/canvas-kit-labs-react": "^6.3.0",
+    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.0-next.0+69f28d82",
     "formik": "^2.2.9",
     "yup": "^0.31.1"
   },
-  "gitHead": "94d5ae2d79daa43b9c2ef5f8eef572fc89694d5e"
+  "gitHead": "69f28d82a0291ed45c2c9d3ef92e437d69033471"
 }

package/side-panel/lib/SidePanel.tsx

@@ -5,6 +5,7 @@ import {css, CSSObject, jsx, keyframes} from '@emotion/core';
 import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
 import {space, colors, depth} from '@workday/canvas-kit-react/tokens';
 import {transformationImportIcon} from '@workday/canvas-system-icons-web';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 
 export type SidePanelVariant = 'standard' | 'alternate';
 export type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
@@ -206,7 +207,18 @@ const SidePanel = ({
   );
 };
 
-export type ToggleButtonProps = Omit<IconButtonProps, 'aria-label'>;
+export type ToggleButtonProps = IconButtonProps & {
+  /**
+   * The tooltip text to expand the side panel
+   * @default 'Expand'
+   */
+  tooltipTextExpand?: string;
+  /**
+   * The tooltip text to collapse the side panel
+   * @default 'Collapse'
+   */
+  tooltipTextCollapse?: string;
+};
 
 /**
  * A toggle button styled specifically for the side panel container.
@@ -214,6 +226,8 @@ export type ToggleButtonProps = Omit<IconButtonProps, 'aria-label'>;
 const ToggleButton = ({
   variant = 'plain',
   icon = transformationImportIcon,
+  tooltipTextExpand: expandLabel = 'Expand',
+  tooltipTextCollapse: collapseLabel = 'Collapse',
   ...rest
 }: ToggleButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
   const context = React.useContext(SidePanelContext);
@@ -243,8 +257,11 @@ const ToggleButton = ({
         : `scaleX(${rtlOrigin === 'left' ? '-1' : '1'})`,
   });
 
-  // @ts-ignore aria-label type error here. The user will decide to use aria-label or aria-labelledby
-  return <IconButton type="button" css={buttonStyle} icon={icon} variant={variant} {...rest} />;
+  return (
+    <Tooltip title={context.state === 'collapsed' ? expandLabel : collapseLabel} type="muted">
+      <IconButton type="button" css={buttonStyle} icon={icon} variant={variant} {...rest} />
+    </Tooltip>
+  );
 };
 
 SidePanel.ToggleButton = ToggleButton;

package/ts3.5/dist/commonjs/side-panel/lib/SidePanel.d.ts

@@ -66,8 +66,30 @@ export declare const SidePanelContext: React.Context<{
 }>;
 declare const SidePanel: {
     ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, variant, touched, ...elemProps }: SidePanelProps): JSX.Element;
-    ToggleButton: ({ variant, icon, ...rest }: Pick<IconButtonProps, "value" | "children" | "theme" | "size" | "icon" | "shouldMirrorIcon" | "variant" | "onToggleChange" | "toggled"> & React.ButtonHTMLAttributes<HTMLButtonElement>) => JSX.Element;
+    ToggleButton: ({ variant, icon, tooltipTextExpand: expandLabel, tooltipTextCollapse: collapseLabel, ...rest }: IconButtonProps & {
+        /**
+         * The tooltip text to expand the side panel
+         * @default 'Expand'
+         */
+        tooltipTextExpand?: string | undefined;
+        /**
+         * The tooltip text to collapse the side panel
+         * @default 'Collapse'
+         */
+        tooltipTextCollapse?: string | undefined;
+    } & React.ButtonHTMLAttributes<HTMLButtonElement>) => JSX.Element;
+};
+export declare type ToggleButtonProps = IconButtonProps & {
+    /**
+     * The tooltip text to expand the side panel
+     * @default 'Expand'
+     */
+    tooltipTextExpand?: string;
+    /**
+     * The tooltip text to collapse the side panel
+     * @default 'Collapse'
+     */
+    tooltipTextCollapse?: string;
 };
-export declare type ToggleButtonProps = Pick<IconButtonProps, Exclude<keyof IconButtonProps, 'aria-label'>>;
 export default SidePanel;
 //# sourceMappingURL=SidePanel.d.ts.map

package/ts3.5/dist/es6/side-panel/lib/SidePanel.d.ts

@@ -66,8 +66,30 @@ export declare const SidePanelContext: React.Context<{
 }>;
 declare const SidePanel: {
     ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, variant, touched, ...elemProps }: SidePanelProps): JSX.Element;
-    ToggleButton: ({ variant, icon, ...rest }: Pick<IconButtonProps, "size" | "icon" | "children" | "value" | "theme" | "shouldMirrorIcon" | "variant" | "onToggleChange" | "toggled"> & React.ButtonHTMLAttributes<HTMLButtonElement>) => JSX.Element;
+    ToggleButton: ({ variant, icon, tooltipTextExpand: expandLabel, tooltipTextCollapse: collapseLabel, ...rest }: IconButtonProps & {
+        /**
+         * The tooltip text to expand the side panel
+         * @default 'Expand'
+         */
+        tooltipTextExpand?: string | undefined;
+        /**
+         * The tooltip text to collapse the side panel
+         * @default 'Collapse'
+         */
+        tooltipTextCollapse?: string | undefined;
+    } & React.ButtonHTMLAttributes<HTMLButtonElement>) => JSX.Element;
+};
+export declare type ToggleButtonProps = IconButtonProps & {
+    /**
+     * The tooltip text to expand the side panel
+     * @default 'Expand'
+     */
+    tooltipTextExpand?: string;
+    /**
+     * The tooltip text to collapse the side panel
+     * @default 'Collapse'
+     */
+    tooltipTextCollapse?: string;
 };
-export declare type ToggleButtonProps = Pick<IconButtonProps, Exclude<keyof IconButtonProps, 'aria-label'>>;
 export default SidePanel;
 //# sourceMappingURL=SidePanel.d.ts.map