@workday/canvas-kit-react 7.1.5 → 7.2.0-427-next.2

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

@@ -1,28 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -42,28 +18,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidePanelBackgroundColor = exports.SidePanelOpenDirection = void 0;
-var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var throttle_1 = __importDefault(require("lodash/throttle"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var button_1 = require("@workday/canvas-kit-react/button");
-var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+exports.SidePanel = exports.SidePanelBackgroundColor = exports.SidePanelOpenDirection = void 0;
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const button_1 = require("@workday/canvas-kit-react/button");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const text_1 = require("@workday/canvas-kit-react/text");
 var SidePanelOpenDirection;
 (function (SidePanelOpenDirection) {
     SidePanelOpenDirection[SidePanelOpenDirection["Left"] = 0] = "Left";
@@ -75,9 +40,8 @@ var SidePanelBackgroundColor;
     SidePanelBackgroundColor[SidePanelBackgroundColor["Transparent"] = 1] = "Transparent";
     SidePanelBackgroundColor[SidePanelBackgroundColor["Gray"] = 2] = "Gray";
 })(SidePanelBackgroundColor = exports.SidePanelBackgroundColor || (exports.SidePanelBackgroundColor = {}));
-var closedWidth = tokens_1.space.xxl;
-var Header = styled_1.default('h2')(__assign(__assign({}, tokens_1.type.levels.heading.small), { marginTop: tokens_1.space.zero }));
-var SidePanelContainer = styled_1.default('div')({
+const closedWidth = tokens_1.space.xxl;
+const SidePanelContainer = styled_1.default('div')({
     overflow: 'hidden',
     height: '100%',
     boxSizing: 'border-box',
@@ -85,15 +49,11 @@ var SidePanelContainer = styled_1.default('div')({
     flexDirection: 'column',
     transition: 'width 200ms ease',
     position: 'absolute',
-}, function (_a) {
-    var open = _a.open;
-    return ({
-        alignItems: open ? undefined : 'center',
-        boxShadow: open ? undefined : '0 8px 16px -8px rgba(0, 0, 0, 0.16)',
-    });
-}, function (_a) {
-    var open = _a.open, backgroundColor = _a.backgroundColor;
-    var openBackgroundColor;
+}, ({ open }) => ({
+    alignItems: open ? undefined : 'center',
+    boxShadow: open ? undefined : '0 8px 16px -8px rgba(0, 0, 0, 0.16)',
+}), ({ open, backgroundColor }) => {
+    let openBackgroundColor;
     switch (backgroundColor) {
         case SidePanelBackgroundColor.Transparent:
             openBackgroundColor = 'transparent';
@@ -109,78 +69,59 @@ var SidePanelContainer = styled_1.default('div')({
     return {
         backgroundColor: open ? openBackgroundColor : tokens_1.colors.frenchVanilla100,
     };
-}, function (_a) {
-    var open = _a.open, openWidth = _a.openWidth;
-    return ({
-        width: open ? openWidth : closedWidth,
-    });
-}, function (_a) {
-    var open = _a.open, padding = _a.padding;
-    return ({
-        padding: open ? padding || tokens_1.space.m : tokens_1.space.s + " 0",
-    });
-}, function (_a) {
-    var openDirection = _a.openDirection;
-    return ({
-        right: openDirection === SidePanelOpenDirection.Right ? tokens_1.space.zero : undefined,
-        left: openDirection === SidePanelOpenDirection.Left ? tokens_1.space.zero : undefined,
-    });
-});
-var ChildrenContainer = styled_1.default('div')({
+}, ({ open, openWidth }) => ({
+    width: open ? openWidth : closedWidth,
+}), ({ open, padding }) => ({
+    padding: open ? padding || tokens_1.space.m : `${tokens_1.space.s} 0`,
+}), ({ openDirection }) => ({
+    right: openDirection === SidePanelOpenDirection.Right ? tokens_1.space.zero : undefined,
+    left: openDirection === SidePanelOpenDirection.Left ? tokens_1.space.zero : undefined,
+}));
+const ChildrenContainer = styled_1.default('div')({
     transition: 'none',
-    zIndex: 1,
-}, function (_a) {
-    var open = _a.open, openWidth = _a.openWidth;
-    return ({
-        width: open ? openWidth : closedWidth,
-    });
-});
-var ToggleButton = styled_1.default(button_1.TertiaryButton)({
+    zIndex: 1, // show above SidePanelFooter when screen is small vertically
+}, ({ open, openWidth }) => ({
+    width: open ? openWidth : closedWidth,
+}));
+const ToggleButton = styled_1.default(button_1.TertiaryButton)({
     position: 'absolute',
     bottom: tokens_1.space.s,
-}, function (_a) {
-    var openDirection = _a.openDirection;
-    return ({
-        right: openDirection === SidePanelOpenDirection.Left ? tokens_1.space.s : '',
-        left: openDirection === SidePanelOpenDirection.Right ? tokens_1.space.s : '',
-    });
-});
-var SidePanelFooter = styled_1.default('div')({
+}, ({ openDirection }) => ({
+    right: openDirection === SidePanelOpenDirection.Left ? tokens_1.space.s : '',
+    left: openDirection === SidePanelOpenDirection.Right ? tokens_1.space.s : '',
+}));
+const SidePanelFooter = styled_1.default('div')({
     position: 'absolute',
     bottom: '0',
     height: 120,
     left: 0,
     background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.0001) 0%, #FFFFFF 100%)',
-}, function (_a) {
-    var open = _a.open, openWidth = _a.openWidth;
-    return ({
-        width: open ? openWidth : tokens_1.space.xxl,
-    });
-});
-var SidePanel = /** @class */ (function (_super) {
-    __extends(SidePanel, _super);
-    function SidePanel(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = {
+}, ({ open, openWidth }) => ({
+    width: open ? openWidth : tokens_1.space.xxl,
+}));
+class SidePanel extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
             screenSize: typeof window !== 'undefined' ? window.innerWidth : 0,
         };
-        _this.handleResize = function () {
-            if (!_this.props.onBreakpointChange || !_this.props.breakpoint) {
+        this.handleResize = () => {
+            if (!this.props.onBreakpointChange || !this.props.breakpoint) {
                 return;
             }
-            if (window.innerWidth > _this.props.breakpoint && !_this.props.open) {
-                _this.props.onBreakpointChange(true);
+            if (window.innerWidth > this.props.breakpoint && !this.props.open) {
+                this.props.onBreakpointChange(true);
             }
-            if (window.innerWidth <= _this.props.breakpoint && _this.props.open) {
-                _this.props.onBreakpointChange(false);
+            if (window.innerWidth <= this.props.breakpoint && this.props.open) {
+                this.props.onBreakpointChange(false);
             }
         };
-        _this.onToggleClick = function () {
-            if (_this.props.onToggleClick) {
-                _this.props.onToggleClick();
+        this.onToggleClick = () => {
+            if (this.props.onToggleClick) {
+                this.props.onToggleClick();
             }
         };
-        _this.toggleButtonDirection = function (open, openDirection) {
+        this.toggleButtonDirection = (open, openDirection) => {
             if (openDirection !== SidePanelOpenDirection.Right) {
                 return open ? canvas_system_icons_web_1.chevronLeftIcon : canvas_system_icons_web_1.chevronRightIcon;
             }
@@ -188,25 +129,23 @@ var SidePanel = /** @class */ (function (_super) {
                 return open ? canvas_system_icons_web_1.chevronRightIcon : canvas_system_icons_web_1.chevronLeftIcon;
             }
         };
-        _this.handleResize = throttle_1.default(_this.handleResize.bind(_this), 150);
-        return _this;
+        this.handleResize = this.handleResize.bind(this);
     }
-    SidePanel.prototype.componentDidMount = function () {
+    componentDidMount() {
         window.addEventListener('resize', this.handleResize);
-    };
-    SidePanel.prototype.componentWillUnmount = function () {
+    }
+    componentWillUnmount() {
         window.removeEventListener('resize', this.handleResize);
-    };
-    SidePanel.prototype.render = function () {
-        var _a = this.props, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? SidePanelBackgroundColor.White : _b, _c = _a.openNavigationAriaLabel, openNavigationAriaLabel = _c === void 0 ? 'open navigation' : _c, _d = _a.closeNavigationAriaLabel, closeNavigationAriaLabel = _d === void 0 ? 'close navigation' : _d, _e = _a.openDirection, openDirection = _e === void 0 ? SidePanelOpenDirection.Left : _e, _f = _a.breakpoint, breakpoint = _f === void 0 ? 768 : _f, _g = _a.openWidth, openWidth = _g === void 0 ? 300 : _g, header = _a.header, onToggleClick = _a.onToggleClick, open = _a.open, padding = _a.padding, onBreakpointChange = _a.onBreakpointChange, elemProps = __rest(_a, ["backgroundColor", "openNavigationAriaLabel", "closeNavigationAriaLabel", "openDirection", "breakpoint", "openWidth", "header", "onToggleClick", "open", "padding", "onBreakpointChange"]);
-        return (React.createElement(SidePanelContainer, __assign({ role: "region", padding: padding, openDirection: openDirection, openWidth: openWidth, backgroundColor: backgroundColor, open: open }, elemProps),
+    }
+    render() {
+        const { backgroundColor = SidePanelBackgroundColor.White, openNavigationAriaLabel = 'open navigation', closeNavigationAriaLabel = 'close navigation', openDirection = SidePanelOpenDirection.Left, breakpoint = 768, openWidth = 300, header, onToggleClick, open, padding, onBreakpointChange, ...elemProps } = this.props;
+        return (React.createElement(SidePanelContainer, Object.assign({ role: "region", padding: padding, openDirection: openDirection, openWidth: openWidth, backgroundColor: backgroundColor, open: open }, elemProps),
             React.createElement(ChildrenContainer, { open: open, openWidth: openWidth },
-                header && open ? React.createElement(Header, null, header) : null,
+                header && open ? (React.createElement(text_1.Heading, { as: "h2", size: "small", marginTop: "zero" }, header)) : null,
                 this.props.children),
             React.createElement(SidePanelFooter, { openWidth: openWidth, open: open }, onToggleClick && (React.createElement(ToggleButton, { openDirection: openDirection, "aria-label": open ? closeNavigationAriaLabel : openNavigationAriaLabel, onClick: this.onToggleClick, icon: this.toggleButtonDirection(open, openDirection) })))));
-    };
-    SidePanel.OpenDirection = SidePanelOpenDirection;
-    SidePanel.BackgroundColor = SidePanelBackgroundColor;
-    return SidePanel;
-}(React.Component));
-exports.default = SidePanel;
+    }
+}
+exports.SidePanel = SidePanel;
+SidePanel.OpenDirection = SidePanelOpenDirection;
+SidePanel.BackgroundColor = SidePanelBackgroundColor;

package/dist/commonjs/skeleton/lib/parts/skeletonHeader.d.ts

@@ -15,5 +15,5 @@ export interface SkeletonHeaderProps {
      */
     width?: number | string;
 }
-export declare const SkeletonHeader: import("../../../common").ElementComponent<"div", SkeletonHeaderProps>;
+export declare const SkeletonHeader: import("@workday/canvas-kit-react/common").ElementComponent<"div", SkeletonHeaderProps>;
 //# sourceMappingURL=skeletonHeader.d.ts.map

package/dist/commonjs/skeleton/lib/parts/skeletonHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeletonHeader.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/skeletonHeader.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,cAAc,wEAsBzB,CAAC"}
+{"version":3,"file":"skeletonHeader.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/skeletonHeader.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,cAAc,yFAsBzB,CAAC"}

package/dist/commonjs/skeleton/lib/parts/skeletonHeader.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,27 +18,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonHeader = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var skeletonShape_1 = require("./skeletonShape");
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const skeletonShape_1 = require("./skeletonShape");
 exports.SkeletonHeader = common_1.createComponent('div')({
     displayName: 'Skeleton.Header',
-    Component: function (_a, ref, Element) {
-        var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? tokens_1.colors.soap200 : _b, _c = _a.height, height = _c === void 0 ? '28px' : _c, _d = _a.width, width = _d === void 0 ? '100%' : _d, elemProps = __rest(_a, ["backgroundColor", "height", "width"]);
-        return (React.createElement(skeletonShape_1.SkeletonShape, __assign({ ref: ref, as: Element, backgroundColor: backgroundColor, borderRadius: tokens_1.borderRadius.s, height: height, width: width }, elemProps)));
-    },
+    Component: ({ backgroundColor = tokens_1.colors.soap200, height = '28px', width = '100%', ...elemProps }, ref, Element) => (React.createElement(skeletonShape_1.SkeletonShape, Object.assign({ ref: ref, as: Element, backgroundColor: backgroundColor, borderRadius: tokens_1.borderRadius.s, height: height, width: width }, elemProps))),
 });

package/dist/commonjs/skeleton/lib/parts/skeletonShape.d.ts

@@ -20,5 +20,5 @@ export interface SkeletonShapeProps {
      */
     backgroundColor?: string;
 }
-export declare const SkeletonShape: import("../../../common").ElementComponent<"div", SkeletonShapeProps>;
+export declare const SkeletonShape: import("@workday/canvas-kit-react/common").ElementComponent<"div", SkeletonShapeProps>;
 //# sourceMappingURL=skeletonShape.d.ts.map

package/dist/commonjs/skeleton/lib/parts/skeletonShape.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeletonShape.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/skeletonShape.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAYD,eAAO,MAAM,aAAa,uEAuBxB,CAAC"}
+{"version":3,"file":"skeletonShape.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/skeletonShape.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAYD,eAAO,MAAM,aAAa,wFAuBxB,CAAC"}

package/dist/commonjs/skeleton/lib/parts/skeletonShape.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,40 +18,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonShape = void 0;
-var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var Shape = styled_1.default('div')(function (_a) {
-    var backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius, height = _a.height, width = _a.width;
-    return ({
-        backgroundColor: backgroundColor,
-        borderRadius: borderRadius,
-        height: height,
-        width: width,
-        marginBottom: tokens_1.space.s,
-    });
-});
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const Shape = styled_1.default('div')(({ backgroundColor, borderRadius, height, width }) => ({
+    backgroundColor,
+    borderRadius,
+    height,
+    width,
+    marginBottom: tokens_1.space.s,
+}));
 exports.SkeletonShape = common_1.createComponent('div')({
     displayName: 'Skeleton.Shape',
-    Component: function (_a, ref, Element) {
-        var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? tokens_1.colors.soap200 : _b, _c = _a.borderRadius, borderRadius = _c === void 0 ? 0 : _c, _d = _a.height, height = _d === void 0 ? '100%' : _d, _e = _a.width, width = _e === void 0 ? '100%' : _e, elemProps = __rest(_a, ["backgroundColor", "borderRadius", "height", "width"]);
-        return (React.createElement(Shape, __assign({ ref: ref, as: Element, backgroundColor: backgroundColor, borderRadius: borderRadius, height: height, width: width }, elemProps)));
-    },
+    Component: ({ backgroundColor = tokens_1.colors.soap200, borderRadius = 0, height = '100%', width = '100%', ...elemProps }, ref, Element) => (React.createElement(Shape, Object.assign({ ref: ref, as: Element, backgroundColor: backgroundColor, borderRadius: borderRadius, height: height, width: width }, elemProps))),
 });

package/dist/commonjs/skeleton/lib/parts/skeletonText.d.ts

@@ -10,5 +10,5 @@ export interface SkeletonTextProps {
      */
     backgroundColor?: string;
 }
-export declare const SkeletonText: import("../../../common").ElementComponent<"div", SkeletonTextProps>;
+export declare const SkeletonText: import("@workday/canvas-kit-react/common").ElementComponent<"div", SkeletonTextProps>;
 //# sourceMappingURL=skeletonText.d.ts.map

package/dist/commonjs/skeleton/lib/parts/skeletonText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeletonText.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/skeletonText.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA6BD,eAAO,MAAM,YAAY,sEAYvB,CAAC"}
+{"version":3,"file":"skeletonText.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/skeletonText.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA6BD,eAAO,MAAM,YAAY,uFAYvB,CAAC"}

package/dist/commonjs/skeleton/lib/parts/skeletonText.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,47 +18,32 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonText = void 0;
-var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var TextContainer = styled_1.default('div')({
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const TextContainer = styled_1.default('div')({
     marginBottom: tokens_1.space.m,
 });
-var Line = styled_1.default('div')(function (_a) {
-    var backgroundColor = _a.backgroundColor, width = _a.width;
+const Line = styled_1.default('div')(({ backgroundColor, width }) => {
     return {
-        backgroundColor: backgroundColor,
-        width: width,
+        backgroundColor,
+        width,
         borderRadius: tokens_1.borderRadius.s,
         height: '21px',
         marginBottom: tokens_1.space.xs,
     };
 });
-var createTextLines = function (lineCount, backgroundColor) {
-    var lines = new Array(lineCount).fill(null);
-    return lines.map(function (_value, index) { return (React.createElement(Line, { key: index, backgroundColor: backgroundColor, width: index < lineCount - 1 || lineCount === 1 ? '100%' : '60%' })); });
+const createTextLines = (lineCount, backgroundColor) => {
+    const lines = new Array(lineCount).fill(null);
+    return lines.map((_value, index) => (React.createElement(Line, { key: index, backgroundColor: backgroundColor, width: index < lineCount - 1 || lineCount === 1 ? '100%' : '60%' })));
 };
 exports.SkeletonText = common_1.createComponent('div')({
     displayName: 'Skeleton.Text',
-    Component: function (_a, ref, Element) {
-        var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? tokens_1.colors.soap200 : _b, _c = _a.lineCount, lineCount = _c === void 0 ? 2 : _c, elemProps = __rest(_a, ["backgroundColor", "lineCount"]);
-        return lineCount <= 0 ? null : (React.createElement(TextContainer, __assign({ ref: ref, as: Element }, elemProps), createTextLines(lineCount, backgroundColor)));
-    },
+    Component: ({ backgroundColor = tokens_1.colors.soap200, lineCount = 2, ...elemProps }, ref, Element) => lineCount <= 0 ? null : (React.createElement(TextContainer, Object.assign({ ref: ref, as: Element }, elemProps), createTextLines(lineCount, backgroundColor))),
 });

package/dist/commonjs/skeleton/lib/skeleton.d.ts

@@ -12,9 +12,35 @@ export interface SkeletonProps {
     'aria-label'?: string;
     children?: React.ReactNode;
 }
-export declare const Skeleton: import("../../common").ElementComponent<"div", SkeletonProps> & {
-    Header: import("../../common").ElementComponent<"div", import("./parts/skeletonHeader").SkeletonHeaderProps>;
-    Shape: import("../../common").ElementComponent<"div", import("./parts/skeletonShape").SkeletonShapeProps>;
-    Text: import("../../common").ElementComponent<"div", import("./parts/skeletonText").SkeletonTextProps>;
+/**
+ * Skeleton subcomponents **must** be wrapped by the `Skeleton` container component.
+ *
+ * ```tsx
+ * <Skeleton>
+ *   <Skeleton.Header />
+ *   <Skeleton.Text />
+ * </Skeleton>
+ * ```
+ *
+ * `Skeleton` places its children in a container element with `aria-hidden` set to `true` and
+ * announces itself using a visually hidden element.
+ */
+export declare const Skeleton: import("@workday/canvas-kit-react/common").ElementComponent<"div", SkeletonProps> & {
+    /**
+     * `Skeleton.Header` renders a placeholder for header content such as headings.
+     */
+    Header: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./parts/skeletonHeader").SkeletonHeaderProps>;
+    /**
+     * `Skeleton.Text` renders a placeholder for text content such as paragraphs. Each placeholder
+     * line has a width of `100%` and a fixed height of `21px`, with the last line having a width of
+     * `60%` if there are multiple lines.
+     */
+    Text: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./parts/skeletonText").SkeletonTextProps>;
+    /**
+     * `Skeleton.Shape` renders a placeholder for graphic elements such as icons, avatars and small
+     * images. Set the `height`, `width`, and `borderRadius` props of the `Skeleton.Shape` to create
+     * various rectangular and circular shapes.
+     */
+    Shape: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./parts/skeletonShape").SkeletonShapeProps>;
 };
 //# sourceMappingURL=skeleton.d.ts.map

package/dist/commonjs/skeleton/lib/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../skeleton/lib/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,WAAW,aAAa;IAC5B;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAmBD,eAAO,MAAM,QAAQ;;;;CAkBnB,CAAC"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../skeleton/lib/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,WAAW,aAAa;IAC5B;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAmBD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ;IAcjB;;OAEG;;IAEH;;;;OAIG;;IAEH;;;;OAIG;;CAGL,CAAC"}