@workday/canvas-kit-preview-react 7.0.0-alpha.0-next.5 → 7.0.0-alpha.78-next.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.tsx +51 -22
  2. package/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.tsx +1 -1
  3. package/breadcrumbs/lib/Breadcrumbs/List/CurrentItem.tsx +1 -0
  4. package/breadcrumbs/lib/Breadcrumbs/List/ListItem.tsx +5 -1
  5. package/breadcrumbs/lib/Breadcrumbs/List/index.tsx +1 -1
  6. package/color-picker/lib/ColorPicker.tsx +3 -3
  7. package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.d.ts +3 -3
  8. package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.d.ts.map +1 -1
  9. package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.js +33 -5
  10. package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.js +2 -2
  11. package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/CurrentItem.d.ts.map +1 -1
  12. package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/CurrentItem.js +1 -1
  13. package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts.map +1 -1
  14. package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/ListItem.js +2 -2
  15. package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/index.js +1 -1
  16. package/dist/commonjs/color-picker/lib/ColorPicker.js +2 -2
  17. package/dist/commonjs/form-field/lib/FormField.d.ts +1 -1
  18. package/dist/commonjs/form-field/lib/FormField.d.ts.map +1 -1
  19. package/dist/commonjs/form-field/lib/FormField.js +1 -1
  20. package/dist/commonjs/form-field/lib/FormFieldHint.d.ts +1 -1
  21. package/dist/commonjs/form-field/lib/FormFieldHint.d.ts.map +1 -1
  22. package/dist/commonjs/form-field/lib/FormFieldHint.js +2 -2
  23. package/dist/commonjs/form-field/lib/FormFieldInput.d.ts +1 -1
  24. package/dist/commonjs/form-field/lib/FormFieldInput.d.ts.map +1 -1
  25. package/dist/commonjs/form-field/lib/FormFieldInput.js +2 -2
  26. package/dist/commonjs/form-field/lib/FormFieldLabel.d.ts +1 -1
  27. package/dist/commonjs/form-field/lib/FormFieldLabel.d.ts.map +1 -1
  28. package/dist/commonjs/form-field/lib/FormFieldLabel.js +2 -3
  29. package/dist/commonjs/form-field/lib/hooks/useFormFieldOrientation.d.ts +1 -1
  30. package/dist/commonjs/form-field/lib/hooks/useFormFieldOrientation.d.ts.map +1 -1
  31. package/dist/commonjs/side-panel/lib/SidePanel.d.ts +3 -3
  32. package/dist/commonjs/side-panel/lib/SidePanel.d.ts.map +1 -1
  33. package/dist/commonjs/side-panel/lib/SidePanel.js +24 -9
  34. package/dist/commonjs/text-area/lib/TextArea.js +1 -1
  35. package/dist/commonjs/text-input/lib/TextInput.js +1 -1
  36. package/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.d.ts +3 -3
  37. package/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.d.ts.map +1 -1
  38. package/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.js +35 -7
  39. package/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.js +1 -1
  40. package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/CurrentItem.d.ts.map +1 -1
  41. package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/CurrentItem.js +1 -1
  42. package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts.map +1 -1
  43. package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/ListItem.js +2 -2
  44. package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/index.js +1 -1
  45. package/dist/es6/color-picker/lib/ColorPicker.js +3 -3
  46. package/dist/es6/form-field/lib/FormField.d.ts +1 -1
  47. package/dist/es6/form-field/lib/FormField.d.ts.map +1 -1
  48. package/dist/es6/form-field/lib/FormField.js +1 -1
  49. package/dist/es6/form-field/lib/FormFieldHint.d.ts +1 -1
  50. package/dist/es6/form-field/lib/FormFieldHint.d.ts.map +1 -1
  51. package/dist/es6/form-field/lib/FormFieldHint.js +1 -1
  52. package/dist/es6/form-field/lib/FormFieldInput.d.ts +1 -1
  53. package/dist/es6/form-field/lib/FormFieldInput.d.ts.map +1 -1
  54. package/dist/es6/form-field/lib/FormFieldInput.js +1 -1
  55. package/dist/es6/form-field/lib/FormFieldLabel.d.ts +1 -1
  56. package/dist/es6/form-field/lib/FormFieldLabel.d.ts.map +1 -1
  57. package/dist/es6/form-field/lib/FormFieldLabel.js +1 -2
  58. package/dist/es6/form-field/lib/hooks/useFormFieldOrientation.d.ts +1 -1
  59. package/dist/es6/form-field/lib/hooks/useFormFieldOrientation.d.ts.map +1 -1
  60. package/dist/es6/side-panel/lib/SidePanel.d.ts +3 -3
  61. package/dist/es6/side-panel/lib/SidePanel.d.ts.map +1 -1
  62. package/dist/es6/side-panel/lib/SidePanel.js +26 -11
  63. package/dist/es6/text-area/lib/TextArea.js +1 -1
  64. package/dist/es6/text-input/lib/TextInput.js +1 -1
  65. package/form-field/lib/FormField.tsx +1 -1
  66. package/form-field/lib/FormFieldHint.tsx +1 -1
  67. package/form-field/lib/FormFieldInput.tsx +1 -1
  68. package/form-field/lib/FormFieldLabel.tsx +1 -2
  69. package/form-field/lib/hooks/useFormFieldOrientation.tsx +1 -1
  70. package/package.json +4 -4
  71. package/side-panel/lib/SidePanel.tsx +35 -20
  72. package/text-area/lib/TextArea.tsx +1 -1
  73. package/text-input/lib/TextInput.tsx +1 -1
  74. package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.d.ts +3 -3
  75. package/ts3.5/dist/commonjs/form-field/lib/FormField.d.ts +1 -1
  76. package/ts3.5/dist/commonjs/form-field/lib/FormFieldHint.d.ts +1 -1
  77. package/ts3.5/dist/commonjs/form-field/lib/FormFieldInput.d.ts +1 -1
  78. package/ts3.5/dist/commonjs/form-field/lib/FormFieldLabel.d.ts +1 -1
  79. package/ts3.5/dist/commonjs/form-field/lib/hooks/useFormFieldOrientation.d.ts +1 -1
  80. package/ts3.5/dist/commonjs/side-panel/lib/SidePanel.d.ts +3 -3
  81. package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.d.ts +3 -3
  82. package/ts3.5/dist/es6/form-field/lib/FormField.d.ts +1 -1
  83. package/ts3.5/dist/es6/form-field/lib/FormFieldHint.d.ts +1 -1
  84. package/ts3.5/dist/es6/form-field/lib/FormFieldInput.d.ts +1 -1
  85. package/ts3.5/dist/es6/form-field/lib/FormFieldLabel.d.ts +1 -1
  86. package/ts3.5/dist/es6/form-field/lib/hooks/useFormFieldOrientation.d.ts +1 -1
  87. package/ts3.5/dist/es6/side-panel/lib/SidePanel.d.ts +3 -3
@@ -1,6 +1,6 @@
1
- import { IconButtonProps } from '@workday/canvas-kit-react/button';
1
+ import React from 'react';
2
2
  import { CanvasSystemIcon } from '@workday/design-assets-types';
3
- export interface DropdownButtonProps extends IconButtonProps {
3
+ export interface DropdownButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
4
4
  /**
5
5
  * The accessibility label for the button
6
6
  */
@@ -16,5 +16,5 @@ export interface DropdownButtonProps extends IconButtonProps {
16
16
  */
17
17
  toggled: boolean;
18
18
  }
19
- export declare const DropdownButton: import("@workday/canvas-kit-react/common").ElementComponent<import("@workday/canvas-kit-react/common").ElementComponent<"button", IconButtonProps>, DropdownButtonProps>;
19
+ export declare const DropdownButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", DropdownButtonProps>;
20
20
  //# sourceMappingURL=Button.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,0KA+BzB,CAAC"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IAClF;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,4FA2BzB,CAAC"}
@@ -21,15 +21,43 @@ var __rest = (this && this.__rest) || function (s, e) {
21
21
  return t;
22
22
  };
23
23
  import React from 'react';
24
- import { IconButton } from '@workday/canvas-kit-react/button';
24
+ import { BaseButton } from '@workday/canvas-kit-react/button';
25
25
  import { relatedActionsIcon } from '@workday/canvas-system-icons-web';
26
- import { colors } from '@workday/canvas-kit-react/tokens';
27
- import { createComponent } from '@workday/canvas-kit-react/common';
28
- export var DropdownButton = createComponent(IconButton)({
26
+ import { createComponent, useTheme } from '@workday/canvas-kit-react/common';
27
+ import { colors, space } from '@workday/canvas-kit-react/tokens';
28
+ export var DropdownButton = createComponent('button')({
29
29
  displayName: 'DropdownButton',
30
30
  Component: function (_a, ref, Element) {
31
- var _b = _a.buttonIcon, buttonIcon = _b === void 0 ? relatedActionsIcon : _b, toggled = _a.toggled, _c = _a.variant, variant = _c === void 0 ? 'plain' : _c, elemProps = __rest(_a, ["buttonIcon", "toggled", "variant"]);
32
- var hasPlainVariant = variant === 'plain';
33
- return (React.createElement(Element, __assign({ ref: ref, type: "button", style: hasPlainVariant ? { margin: '0 1px' } : {}, variant: variant, icon: buttonIcon, color: colors.licorice200, toggled: toggled, "aria-pressed": undefined, "aria-expanded": toggled, "aria-haspopup": true, "aria-controls": "menu" }, elemProps)));
31
+ var _b = _a.buttonIcon, buttonIcon = _b === void 0 ? relatedActionsIcon : _b, toggled = _a.toggled, elemProps = __rest(_a, ["buttonIcon", "toggled"]);
32
+ var theme = useTheme();
33
+ return (React.createElement(BaseButton, __assign({ as: Element, ref: ref, "aria-pressed": undefined, "aria-expanded": toggled, "aria-haspopup": true, "aria-controls": "menu", size: "small", height: space.l, width: space.l, padding: space.zero, colors: getDropdownColors(toggled, theme) }, elemProps),
34
+ React.createElement(BaseButton.Icon, { icon: buttonIcon })));
34
35
  },
35
36
  });
37
+ var getDropdownColors = function (toggled, theme) {
38
+ var themePrimary = theme.canvas.palette.primary;
39
+ return {
40
+ default: {
41
+ icon: toggled ? themePrimary.main : colors.blackPepper400,
42
+ label: themePrimary.main,
43
+ },
44
+ hover: {
45
+ background: colors.soap200,
46
+ icon: toggled ? themePrimary.dark : colors.blackPepper500,
47
+ label: themePrimary.dark,
48
+ },
49
+ active: {
50
+ background: colors.soap300,
51
+ icon: toggled ? themePrimary.dark : colors.blackPepper500,
52
+ label: themePrimary.dark,
53
+ },
54
+ focus: {
55
+ icon: toggled ? themePrimary.main : colors.blackPepper500,
56
+ label: themePrimary.main,
57
+ },
58
+ disabled: {
59
+ icon: toggled ? themePrimary.main : colors.blackPepper400,
60
+ label: themePrimary.main,
61
+ },
62
+ };
63
+ };
@@ -25,7 +25,7 @@ import { styled } from '@workday/canvas-kit-react/common';
25
25
  import { borderRadius, colors, commonColors, depth, space, type, } from '@workday/canvas-kit-react/tokens';
26
26
  // local components
27
27
  import { DropdownMenuItemLink } from './MenuItemLink';
28
- import { Box } from '@workday/canvas-kit-labs-react/common';
28
+ import { Box } from '@workday/canvas-kit-react/layout';
29
29
  var StyledDropdownMenu = styled(Box)(__assign(__assign(__assign({}, type.levels.subtext.large), depth[2]), { backgroundColor: commonColors.background, border: "1px solid " + colors.soap500, borderRadius: borderRadius.m, boxSizing: 'border-box', display: 'inline-block', marginTop: space.xxxs, maxHeight: 200, outline: 'none', overflowY: 'auto', position: 'relative', width: 'max-content' }));
30
30
  var StyledMenuList = styled('ul')({
31
31
  boxSizing: 'border-box',
@@ -1 +1 @@
1
- {"version":3,"file":"CurrentItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/CurrentItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;IAC3E;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAgBD,eAAO,MAAM,WAAW,yCAAwC,gBAAgB,gBA8B/E,CAAC"}
1
+ {"version":3,"file":"CurrentItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/CurrentItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;IAC3E;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAiBD,eAAO,MAAM,WAAW,yCAAwC,gBAAgB,gBA8B/E,CAAC"}
@@ -27,7 +27,7 @@ import { TooltipContainer } from '@workday/canvas-kit-react/tooltip';
27
27
  import { Popper } from '@workday/canvas-kit-react/popup';
28
28
  import { useTruncateTooltip } from './hooks';
29
29
  import { truncateStyles } from './styles';
30
- var ListItem = styled('li')(__assign({ display: 'flex', alignItems: 'center', flexDirection: 'column', textAlign: 'left' }, type.levels.subtext.large), function (_a) {
30
+ var ListItem = styled('li')(__assign(__assign({ display: 'flex', alignItems: 'center', flexDirection: 'column', textAlign: 'left' }, type.levels.subtext.large), { fontWeight: 500 }), function (_a) {
31
31
  var maxWidth = _a.maxWidth;
32
32
  return (__assign({}, truncateStyles(maxWidth)));
33
33
  });
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,oBAAY,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;AAEhE,eAAO,MAAM,mBAAmB,wDAe/B,CAAC"}
1
+ {"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,oBAAY,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;AAEhE,eAAO,MAAM,mBAAmB,wDAmB/B,CAAC"}
@@ -25,12 +25,12 @@ import { SystemIcon } from '@workday/canvas-kit-react/icon';
25
25
  import { chevronLeftSmallIcon, chevronRightSmallIcon } from '@workday/canvas-system-icons-web';
26
26
  import { colors } from '@workday/canvas-kit-react/tokens';
27
27
  import { useRTL } from '../hooks';
28
- import { Flex } from '@workday/canvas-kit-labs-react/layout';
28
+ import { Flex } from '@workday/canvas-kit-react/layout';
29
29
  export var BreadcrumbsListItem = function (_a) {
30
30
  var children = _a.children, props = __rest(_a, ["children"]);
31
31
  var shouldUseRTL = useRTL().shouldUseRTL;
32
32
  var icon = shouldUseRTL ? chevronLeftSmallIcon : chevronRightSmallIcon;
33
33
  return (React.createElement(Flex, __assign({ as: "li", alignItems: "center" }, props),
34
34
  children,
35
- React.createElement(SystemIcon, { icon: icon, color: colors.licorice200, colorHover: colors.licorice200, "aria-hidden": true })));
35
+ React.createElement(SystemIcon, { icon: icon, color: colors.licorice200, colorHover: colors.licorice200, size: 20, height: 32, width: 32, styles: { justifyContent: 'center', alignItems: 'center', display: 'inline-flex' }, "aria-hidden": true })));
36
36
  };
@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import React from 'react';
24
24
  import { createComponent } from '@workday/canvas-kit-react/common';
25
- import { Flex } from '@workday/canvas-kit-labs-react/layout';
25
+ import { Flex } from '@workday/canvas-kit-react/layout';
26
26
  export var BreadcrumbsList = createComponent('ul')({
27
27
  displayName: 'BreadcrumbsList',
28
28
  Component: function (_a, ref) {
@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
23
23
  import { colors, space } from '@workday/canvas-kit-react/tokens';
24
24
  import { checkIcon } from '@workday/canvas-system-icons-web';
25
25
  import { ColorInput } from '@workday/canvas-kit-react/color-picker';
26
- import { IconButton } from '@workday/canvas-kit-react/button';
26
+ import { SecondaryButton } from '@workday/canvas-kit-react/button';
27
27
  import * as React from 'react';
28
28
  import FormField from '@workday/canvas-kit-react/form-field';
29
29
  import styled from '@emotion/styled';
@@ -102,7 +102,7 @@ var ColorInputAndLabel = styled(FormField)({
102
102
  flexDirection: 'column',
103
103
  margin: 0,
104
104
  });
105
- var CheckButton = styled(IconButton)({
105
+ var CheckButton = styled(SecondaryButton)({
106
106
  alignSelf: 'flex-end',
107
107
  });
108
108
  var HexColorInput = styled(ColorInput)({
@@ -137,7 +137,7 @@ var ColorPicker = function (_a) {
137
137
  showCustomHexInput && (React.createElement(ColorInputWrapper, { onSubmit: onSubmit },
138
138
  React.createElement(ColorInputAndLabel, { label: customHexInputLabel },
139
139
  React.createElement(HexColorInput, { onChange: onCustomHexChange, onValidColorChange: onValidCustomHexChange, value: customHexValue, showCheck: value === validHexValue || value === customHexValue })),
140
- React.createElement(CheckButton, { "aria-label": submitLabel, variant: "circleFilled", icon: checkIcon })))));
140
+ React.createElement(CheckButton, { "aria-label": submitLabel, icon: checkIcon })))));
141
141
  };
142
142
  ColorPicker.defaultColorSet = defaultColorSet;
143
143
  export default ColorPicker;
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { ExtractProps } from '@workday/canvas-kit-react/common';
3
- import { Stack, StackSpacing } from '@workday/canvas-kit-labs-react/layout';
3
+ import { Stack, StackSpacing } from '@workday/canvas-kit-react/layout';
4
4
  import { FormFieldModel, FormFieldModelConfig } from './hooks';
5
5
  export declare const FormFieldModelContext: React.Context<import("@workday/canvas-kit-react/common").Model<{
6
6
  hasError?: boolean | undefined;
@@ -1 +1 @@
1
- {"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,KAAK,EAAE,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAE1E,OAAO,EAEL,cAAc,EACd,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAKjB,eAAO,MAAM,qBAAqB;;;;OAAiD,CAAC;AAEpF,MAAM,WAAW,cACf,SAAQ,oBAAoB,EAC1B,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IACpD,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;IACvC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,SAAS;;;;CAqBpB,CAAC"}
1
+ {"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,KAAK,EAAE,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAErE,OAAO,EAEL,cAAc,EACd,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAKjB,eAAO,MAAM,qBAAqB;;;;OAAiD,CAAC;AAEpF,MAAM,WAAW,cACf,SAAQ,oBAAoB,EAC1B,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IACpD,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;IACvC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,SAAS;;;;CAqBpB,CAAC"}
@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import React from 'react';
24
24
  import { createComponent, useDefaultModel } from '@workday/canvas-kit-react/common';
25
- import { Stack } from '@workday/canvas-kit-labs-react/layout';
25
+ import { Stack } from '@workday/canvas-kit-react/layout';
26
26
  import { useFormFieldModel, useFormFieldOrientation, } from './hooks';
27
27
  import { FormFieldInput } from './FormFieldInput';
28
28
  import { FormFieldLabel } from './FormFieldLabel';
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { ExtractProps } from '@workday/canvas-kit-react/common';
3
- import { Box } from '@workday/canvas-kit-labs-react/common';
3
+ import { Box } from '@workday/canvas-kit-react/layout';
4
4
  import { FormFieldModel } from './hooks';
5
5
  export interface FormFieldHintProps extends ExtractProps<typeof Box, never> {
6
6
  model?: FormFieldModel;
@@ -1 +1 @@
1
- {"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAW,MAAM,uCAAuC,CAAC;AAGpE,OAAO,EAAC,cAAc,EAAmB,MAAM,SAAS,CAAC;AAEzD,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IACzE,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAMD,eAAO,MAAM,aAAa,sFAuBxB,CAAC"}
1
+ {"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAW,MAAM,kCAAkC,CAAC;AAG/D,OAAO,EAAC,cAAc,EAAmB,MAAM,SAAS,CAAC;AAEzD,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IACzE,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAMD,eAAO,MAAM,aAAa,sFAuBxB,CAAC"}
@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
23
23
  import React from 'react';
24
24
  import { createComponent, useModelContext, useTheme, styled, } from '@workday/canvas-kit-react/common';
25
25
  import { space, type } from '@workday/canvas-kit-react/tokens';
26
- import { Box } from '@workday/canvas-kit-labs-react/common';
26
+ import { Box } from '@workday/canvas-kit-react/layout';
27
27
  import { FormFieldModelContext } from './FormField';
28
28
  import { useFormFieldHint } from './hooks';
29
29
  var StyledHint = styled(Box)(__assign({}, type.levels.subtext.medium));
@@ -1,5 +1,5 @@
1
1
  import { ExtractProps } from '@workday/canvas-kit-react/common';
2
- import { Box } from '@workday/canvas-kit-labs-react/common';
2
+ import { Box } from '@workday/canvas-kit-react/layout';
3
3
  import { FormFieldModel } from './hooks';
4
4
  export interface FormFieldInputProps extends ExtractProps<typeof Box, never> {
5
5
  model?: FormFieldModel;
@@ -1 +1 @@
1
- {"version":3,"file":"FormFieldInput.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,GAAG,EAAC,MAAM,uCAAuC,CAAC;AAG1D,OAAO,EAAC,cAAc,EAAoB,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IAC1E,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,2FAQzB,CAAC"}
1
+ {"version":3,"file":"FormFieldInput.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,GAAG,EAAC,MAAM,kCAAkC,CAAC;AAGrD,OAAO,EAAC,cAAc,EAAoB,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IAC1E,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,2FAQzB,CAAC"}
@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import React from 'react';
24
24
  import { createComponent, useModelContext } from '@workday/canvas-kit-react/common';
25
- import { Box } from '@workday/canvas-kit-labs-react/common';
25
+ import { Box } from '@workday/canvas-kit-react/layout';
26
26
  import { FormFieldModelContext } from './FormField';
27
27
  import { useFormFieldInput } from './hooks';
28
28
  export var FormFieldInput = createComponent('input')({
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { ExtractProps } from '@workday/canvas-kit-react/common';
3
- import { HStack, StackSpacing } from '@workday/canvas-kit-labs-react/layout';
3
+ import { HStack, StackSpacing } from '@workday/canvas-kit-react/layout';
4
4
  import { FormFieldModel } from './hooks';
5
5
  export interface FormFieldLabelProps extends Omit<ExtractProps<typeof HStack, never>, 'spacing'> {
6
6
  model?: FormFieldModel;
@@ -1 +1 @@
1
- {"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,MAAM,EAAE,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAG3E,OAAO,EAAC,cAAc,EAAoB,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAC9F,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAaD,eAAO,MAAM,cAAc,2FAkBzB,CAAC"}
1
+ {"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAM,MAAM,EAAE,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAI3E,OAAO,EAAC,cAAc,EAAoB,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAC9F,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAaD,eAAO,MAAM,cAAc,2FAkBzB,CAAC"}
@@ -22,9 +22,8 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import React from 'react';
24
24
  import { createComponent, useModelContext, useTheme, styled, } from '@workday/canvas-kit-react/common';
25
- import { Box } from '@workday/canvas-kit-labs-react/common';
25
+ import { Box, HStack } from '@workday/canvas-kit-react/layout';
26
26
  import { type } from '@workday/canvas-kit-react/tokens';
27
- import { HStack } from '@workday/canvas-kit-labs-react/layout';
28
27
  import { FormFieldModelContext } from './FormField';
29
28
  import { useFormFieldLabel } from './hooks';
30
29
  var StyledFormFieldLabel = styled('span')(__assign(__assign({}, type.levels.subtext.large), { fontWeight: type.properties.fontWeights.medium }));
@@ -1,4 +1,4 @@
1
- import { StackSpacing, StackProps } from '@workday/canvas-kit-labs-react/layout';
1
+ import { StackSpacing, StackProps } from '@workday/canvas-kit-react/layout';
2
2
  /**
3
3
  * Adds the necessary layout props to a `FormField` component.
4
4
  */
@@ -1 +1 @@
1
- {"version":3,"file":"useFormFieldOrientation.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldOrientation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAE,UAAU,EAAC,MAAM,uCAAuC,CAAC;AAG/E;;GAEG;AACH,eAAO,MAAM,uBAAuB,gBAAiB,YAAY,GAAG,UAAU;mBAE3D,UAAU,CAAC,eAAe,CAAC;gBAC9B,UAAU,CAAC,YAAY,CAAC;aAC3B,YAAY;CAkBxB,CAAC"}
1
+ {"version":3,"file":"useFormFieldOrientation.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldOrientation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAE,UAAU,EAAC,MAAM,kCAAkC,CAAC;AAG1E;;GAEG;AACH,eAAO,MAAM,uBAAuB,gBAAiB,YAAY,GAAG,UAAU;mBAE3D,UAAU,CAAC,eAAe,CAAC;gBAC9B,UAAU,CAAC,YAAY,CAAC;aAC3B,YAAY;CAkBxB,CAAC"}
@@ -2,7 +2,7 @@
2
2
  /** @jsx jsx */
3
3
  import * as React from 'react';
4
4
  import { jsx } from '@emotion/react';
5
- import { IconButtonProps } from '@workday/canvas-kit-react/button';
5
+ import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
6
6
  export declare type SidePanelVariant = 'standard' | 'alternate';
7
7
  export declare type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
8
8
  export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -67,10 +67,10 @@ export declare const SidePanelContext: React.Context<{
67
67
  origin: string;
68
68
  }>;
69
69
  declare const SidePanel: {
70
- ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, touched, ...elemProps }: SidePanelProps): jsx.JSX.Element;
70
+ ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, variant, touched, ...elemProps }: SidePanelProps): jsx.JSX.Element;
71
71
  ToggleButton: ({ variant, icon, tooltipTextExpand: expandLabel, tooltipTextCollapse: collapseLabel, ...rest }: ToggleButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => jsx.JSX.Element;
72
72
  };
73
- export declare type ToggleButtonProps = IconButtonProps & {
73
+ export declare type ToggleButtonProps = TertiaryButtonProps & {
74
74
  /**
75
75
  * The tooltip text to expand the side panel
76
76
  * @default 'Expand'
@@ -1 +1 @@
1
- {"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAM,GAAG,EAAY,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAM7E,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;AA4BD,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,QAAA,MAAM,SAAS;sKAcZ,cAAc;mHAqGd,iBAAiB,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;CAxBnE,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"}
1
+ {"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAM,GAAG,EAAuB,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAKrF,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;+KAcZ,cAAc;mHA0Gd,iBAAiB,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;CAxBnE,CAAC;AAEF,oBAAY,iBAAiB,GAAG,mBAAmB,GAAG;IACpD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAgDF,eAAe,SAAS,CAAC"}
@@ -29,11 +29,10 @@ var __rest = (this && this.__rest) || function (s, e) {
29
29
  import * as React from 'react';
30
30
  import { styled, useIsRTL } from '@workday/canvas-kit-react/common';
31
31
  import { css, jsx, keyframes } from '@emotion/react';
32
- import { IconButton } from '@workday/canvas-kit-react/button';
33
- import { space, colors } from '@workday/canvas-kit-react/tokens';
32
+ import { TertiaryButton } from '@workday/canvas-kit-react/button';
33
+ import { space, colors, depth } from '@workday/canvas-kit-react/tokens';
34
34
  import { transformationImportIcon } from '@workday/canvas-system-icons-web';
35
35
  import { Tooltip } from '@workday/canvas-kit-react/tooltip';
36
- import { Box } from '@workday/canvas-kit-labs-react/common';
37
36
  var createKeyframes = function (from, to) {
38
37
  var normalized = {
39
38
  from: typeof from === 'number' ? from + 'px' : from,
@@ -41,7 +40,13 @@ var createKeyframes = function (from, to) {
41
40
  };
42
41
  return keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n from {\n width: ", ";\n min-width: ", ";\n max-width: ", ";\n } to {\n width: ", ";\n min-width: ", ";\n max-width: ", ";\n }\n "], ["\n from {\n width: ", ";\n min-width: ", ";\n max-width: ", ";\n } to {\n width: ", ";\n min-width: ", ";\n max-width: ", ";\n }\n "])), normalized.from, normalized.from, normalized.from, normalized.to, normalized.to, normalized.to);
43
42
  };
44
- var StyledPanel = styled(Box)({
43
+ var containerVariantStyle = {
44
+ alternate: __assign({ backgroundColor: colors.frenchVanilla100 }, depth[3]),
45
+ standard: {
46
+ backgroundColor: colors.soap100,
47
+ },
48
+ };
49
+ var Panel = styled('section')({
45
50
  overflow: 'hidden',
46
51
  position: 'relative',
47
52
  boxSizing: 'border-box',
@@ -52,10 +57,8 @@ export var SidePanelContext = React.createContext({
52
57
  origin: 'left',
53
58
  });
54
59
  var SidePanel = function (_a) {
55
- var _b = _a.as, as = _b === void 0 ? 'section' : _b, children = _a.children, _c = _a.collapsedWidth, collapsedWidth = _c === void 0 ? 64 : _c, _d = _a.expanded, expanded = _d === void 0 ? true : _d, _e = _a.expandedWidth, expandedWidth = _e === void 0 ? 320 : _e, onAnimationEnd = _a.onAnimationEnd, onAnimationStart = _a.onAnimationStart, onExpandedChange = _a.onExpandedChange, onStateTransition = _a.onStateTransition, _f = _a.origin, origin = _f === void 0 ? 'left' : _f,
56
- // variant = 'standard',
57
- touched = _a.touched, elemProps = __rest(_a, ["as", "children", "collapsedWidth", "expanded", "expandedWidth", "onAnimationEnd", "onAnimationStart", "onExpandedChange", "onStateTransition", "origin", "touched"]);
58
- var _g = React.useState(expanded ? 'expanded' : 'collapsed'), state = _g[0], setState = _g[1];
60
+ var _b = _a.as, as = _b === void 0 ? 'section' : _b, children = _a.children, _c = _a.collapsedWidth, collapsedWidth = _c === void 0 ? 64 : _c, _d = _a.expanded, expanded = _d === void 0 ? true : _d, _e = _a.expandedWidth, expandedWidth = _e === void 0 ? 320 : _e, onAnimationEnd = _a.onAnimationEnd, onAnimationStart = _a.onAnimationStart, onExpandedChange = _a.onExpandedChange, onStateTransition = _a.onStateTransition, _f = _a.origin, origin = _f === void 0 ? 'left' : _f, _g = _a.variant, variant = _g === void 0 ? 'standard' : _g, touched = _a.touched, elemProps = __rest(_a, ["as", "children", "collapsedWidth", "expanded", "expandedWidth", "onAnimationEnd", "onAnimationStart", "onExpandedChange", "onStateTransition", "origin", "variant", "touched"]);
61
+ var _h = React.useState(expanded ? 'expanded' : 'collapsed'), state = _h[0], setState = _h[1];
59
62
  React.useEffect(function () {
60
63
  if (typeof onExpandedChange !== 'undefined') {
61
64
  onExpandedChange(expanded);
@@ -94,7 +97,18 @@ var SidePanel = function (_a) {
94
97
  onAnimationStart(event);
95
98
  }
96
99
  };
97
- return (jsx(StyledPanel, __assign({ as: as, width: expanded ? expandedWidth : collapsedWidth, maxWidth: expanded ? expandedWidth : collapsedWidth, backgroundColor: elemProps.variant === 'alternate' ? colors.frenchVanilla100 : colors.soap100, depth: elemProps.variant === 'alternate' ? 3 : undefined, animation: touched ? (expanded ? motion.expand : motion.collapse) + " 200ms ease-out" : undefined, onAnimationEnd: handleAnimationEnd, onAnimationStart: handleAnimationStart }, elemProps),
100
+ return (jsx(Panel, __assign({ as: as, css: [
101
+ {
102
+ width: expanded ? expandedWidth : collapsedWidth,
103
+ maxWidth: expanded ? expandedWidth : collapsedWidth,
104
+ // mounted.current will be false on the first render, thus you won't get an unwanted animation here
105
+ // Will animate again if you force a re-render (like in Storybook)
106
+ animation: touched
107
+ ? (expanded ? motion.expand : motion.collapse) + " 200ms ease-out"
108
+ : undefined,
109
+ },
110
+ containerVariantStyle[variant],
111
+ ], onAnimationEnd: handleAnimationEnd, onAnimationStart: handleAnimationStart }, elemProps),
98
112
  jsx(SidePanelContext.Provider, { value: {
99
113
  state: state,
100
114
  origin: origin,
@@ -104,7 +118,7 @@ var SidePanel = function (_a) {
104
118
  * A toggle button styled specifically for the side panel container.
105
119
  */
106
120
  var ToggleButton = function (_a) {
107
- 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"]);
121
+ var _b = _a.variant, variant = _b === void 0 ? undefined : _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"]);
108
122
  var context = React.useContext(SidePanelContext);
109
123
  var useRTLOrigin = function () {
110
124
  var isRTL = useIsRTL();
@@ -120,6 +134,7 @@ var ToggleButton = function (_a) {
120
134
  var buttonStyle = css({
121
135
  position: 'absolute',
122
136
  top: space.m,
137
+ width: space.l,
123
138
  right: context.state === 'collapsed' ? 0 : rtlOrigin === 'left' ? space.s : undefined,
124
139
  left: context.state === 'collapsed' ? 0 : rtlOrigin === 'right' ? space.s : undefined,
125
140
  margin: context.state === 'collapsed' ? 'auto' : 0,
@@ -128,7 +143,7 @@ var ToggleButton = function (_a) {
128
143
  : "scaleX(" + (rtlOrigin === 'left' ? '-1' : '1') + ")",
129
144
  });
130
145
  return (jsx(Tooltip, { title: context.state === 'collapsed' ? expandLabel : collapseLabel, type: "muted" },
131
- jsx(IconButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, rest))));
146
+ jsx(TertiaryButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, rest))));
132
147
  };
133
148
  SidePanel.ToggleButton = ToggleButton;
134
149
  export default SidePanel;
@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
23
23
  import React from 'react';
24
24
  import { createComponent, useDefaultModel } from '@workday/canvas-kit-react/common';
25
25
  import { FormFieldModelContext, useFormFieldOrientation, } from '@workday/canvas-kit-preview-react/form-field';
26
- import { Stack } from '@workday/canvas-kit-labs-react/layout';
26
+ import { Stack } from '@workday/canvas-kit-react/layout';
27
27
  import { useTextAreaModel } from './hooks';
28
28
  import { TextAreaField } from './TextAreaField';
29
29
  import { TextAreaLabel } from './TextAreaLabel';
@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
23
23
  import React from 'react';
24
24
  import { createComponent, useDefaultModel } from '@workday/canvas-kit-react/common';
25
25
  import { FormFieldModelContext, useFormFieldOrientation, } from '@workday/canvas-kit-preview-react/form-field';
26
- import { Stack } from '@workday/canvas-kit-labs-react/layout';
26
+ import { Stack } from '@workday/canvas-kit-react/layout';
27
27
  import { useTextInputModel } from './hooks';
28
28
  import { TextInputField } from './TextInputField';
29
29
  import { TextInputLabel } from './TextInputLabel';
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
 
3
3
  import {createComponent, ExtractProps, useDefaultModel} from '@workday/canvas-kit-react/common';
4
- import {Stack, StackSpacing} from '@workday/canvas-kit-labs-react/layout';
4
+ import {Stack, StackSpacing} from '@workday/canvas-kit-react/layout';
5
5
 
6
6
  import {
7
7
  useFormFieldModel,
@@ -8,7 +8,7 @@ import {
8
8
  StyledType,
9
9
  } from '@workday/canvas-kit-react/common';
10
10
  import {space, type} from '@workday/canvas-kit-react/tokens';
11
- import {Box, BoxProps} from '@workday/canvas-kit-labs-react/common';
11
+ import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
12
12
 
13
13
  import {FormFieldModelContext} from './FormField';
14
14
  import {FormFieldModel, useFormFieldHint} from './hooks';
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
 
3
3
  import {createComponent, ExtractProps, useModelContext} from '@workday/canvas-kit-react/common';
4
- import {Box} from '@workday/canvas-kit-labs-react/common';
4
+ import {Box} from '@workday/canvas-kit-react/layout';
5
5
 
6
6
  import {FormFieldModelContext} from './FormField';
7
7
  import {FormFieldModel, useFormFieldInput} from './hooks';
@@ -8,9 +8,8 @@ import {
8
8
  styled,
9
9
  StyledType,
10
10
  } from '@workday/canvas-kit-react/common';
11
- import {Box} from '@workday/canvas-kit-labs-react/common';
11
+ import {Box, HStack, StackSpacing} from '@workday/canvas-kit-react/layout';
12
12
  import {type} from '@workday/canvas-kit-react/tokens';
13
- import {HStack, StackSpacing} from '@workday/canvas-kit-labs-react/layout';
14
13
 
15
14
  import {FormFieldModelContext} from './FormField';
16
15
  import {FormFieldModel, useFormFieldLabel} from './hooks';
@@ -1,4 +1,4 @@
1
- import {StackSpacing, StackProps} from '@workday/canvas-kit-labs-react/layout';
1
+ import {StackSpacing, StackProps} from '@workday/canvas-kit-react/layout';
2
2
  import {space} from '@workday/canvas-kit-react/tokens';
3
3
 
4
4
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-react",
3
- "version": "7.0.0-alpha.0-next.5+b69254c7",
3
+ "version": "7.0.0-alpha.78-next.6+400ffc0b",
4
4
  "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.",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -54,15 +54,15 @@
54
54
  "dependencies": {
55
55
  "@emotion/react": "^11.7.1",
56
56
  "@emotion/styled": "^11.6.0",
57
- "@workday/canvas-kit-react": "^7.0.0-alpha.0-next.5+b69254c7",
57
+ "@workday/canvas-kit-react": "^7.0.0-alpha.78-next.6+400ffc0b",
58
58
  "@workday/canvas-system-icons-web": "1.0.41",
59
59
  "@workday/design-assets-types": "^0.2.4"
60
60
  },
61
61
  "devDependencies": {
62
62
  "@workday/canvas-accent-icons-web": "^1.0.0",
63
- "@workday/canvas-kit-labs-react": "^7.0.0-alpha.0-next.5+b69254c7",
63
+ "@workday/canvas-kit-labs-react": "^7.0.0-alpha.78-next.6+400ffc0b",
64
64
  "formik": "^2.2.9",
65
65
  "yup": "^0.31.1"
66
66
  },
67
- "gitHead": "b69254c752dc3fcc508e3b93164f8f7a83b005bb"
67
+ "gitHead": "400ffc0b29c2762180758d9b7c1bdc0562cb01e4"
68
68
  }