@workday/canvas-kit-react 12.0.0-alpha.862-next.0 → 12.0.0-alpha.898-next.0

package/dist/commonjs/popup/lib/hooks/usePopupPopper.js

@@ -11,8 +11,8 @@ const react_1 = __importDefault(require("react"));
  * Adds the necessary props to a {@link Popper} component. Used by the
  * {@link PopupPopper Popup.Popper} subcomponent.
  */
-exports.usePopupPopper = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(({ state, events }, ref) => {
-    const elementRef = common_1.useForkRef(ref, state.stackRef);
+exports.usePopupPopper = (0, common_1.createElemPropsHook)(usePopupModel_1.usePopupModel)(({ state, events }, ref) => {
+    const elementRef = (0, common_1.useForkRef)(ref, state.stackRef);
     // Create a mutable ref of the placement to keep a stable `onPlacementChange` reference.
     const placementRef = react_1.default.useRef(state.placement);
     placementRef.current = state.placement;

package/dist/commonjs/popup/lib/hooks/usePopupStack.d.ts

@@ -41,5 +41,5 @@ import React from 'react';
  * by all ephemeral-type popups (like Tooltips, Select menus, etc). It will also add in clickOutside
  * detection.
  */
-export declare const usePopupStack: <E extends HTMLElement>(ref?: React.Ref<E> | undefined, target?: HTMLElement | React.RefObject<HTMLElement> | undefined) => React.RefObject<HTMLElement>;
+export declare const usePopupStack: <E extends HTMLElement>(ref?: React.Ref<E> | undefined, target?: HTMLElement | React.RefObject<HTMLElement>) => React.RefObject<HTMLElement>;
 //# sourceMappingURL=usePopupStack.d.ts.map

package/dist/commonjs/popup/lib/hooks/usePopupStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopupStack.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupStack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,aAAa,8HAGvB,MAAM,SAAS,CAAC,WAAW,CA0E7B,CAAC"}
+{"version":3,"file":"usePopupStack.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupStack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,aAAa,mEAEf,WAAW,GAAG,MAAM,SAAS,CAAC,WAAW,CAAC,KAClD,MAAM,SAAS,CAAC,WAAW,CA0E7B,CAAC"}

package/dist/commonjs/popup/lib/hooks/usePopupStack.js

@@ -51,10 +51,10 @@ const react_2 = require("@emotion/react");
  * detection.
  */
 const usePopupStack = (ref, target) => {
-    const { elementRef, localRef } = common_1.useLocalRef(ref);
-    const isRTL = common_1.useIsRTL();
+    const { elementRef, localRef } = (0, common_1.useLocalRef)(ref);
+    const isRTL = (0, common_1.useIsRTL)();
     const theme = react_1.default.useContext(react_2.ThemeContext);
-    const { className, style } = common_1.useCanvasThemeToCssVars(theme, {});
+    const { className, style } = (0, common_1.useCanvasThemeToCssVars)(theme, {});
     // useState function input ensures we only create a container once.
     const [popupRef] = react_1.default.useState(() => {
         const container = canvas_kit_popup_stack_1.PopupStack.createContainer();

package/dist/commonjs/popup/lib/hooks/usePopupTarget.js

@@ -6,8 +6,8 @@ const usePopupModel_1 = require("./usePopupModel");
 /**
  * Adds the necessary props to a {@link PopupTarget Popup.Target} subcomponent.
  */
-exports.usePopupTarget = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(({ events, state }, ref) => {
-    const elementRef = common_1.useForkRef(ref, state.targetRef);
+exports.usePopupTarget = (0, common_1.createElemPropsHook)(usePopupModel_1.usePopupModel)(({ events, state }, ref) => {
+    const elementRef = (0, common_1.useForkRef)(ref, state.targetRef);
     return {
         ref: elementRef,
         onClick: (event) => {

package/dist/commonjs/popup/lib/hooks/usePopupTargetContext.js

@@ -6,8 +6,8 @@ const usePopupModel_1 = require("./usePopupModel");
 /**
  * Adds the necessary props to a `Target` component. Used by the Popup.Target subcomponent.
  */
-exports.usePopupTargetContext = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(({ events, state }, ref) => {
-    const elementRef = common_1.useForkRef(ref, state.targetRef);
+exports.usePopupTargetContext = (0, common_1.createElemPropsHook)(usePopupModel_1.usePopupModel)(({ events, state }, ref) => {
+    const elementRef = (0, common_1.useForkRef)(ref, state.targetRef);
     return {
         ref: elementRef,
         onContextMenu: (event) => {

package/dist/commonjs/popup/lib/hooks/useReturnFocus.js

@@ -25,7 +25,7 @@ function getFocusableElement(element) {
     if (element === null || element === document.body || !element.parentElement) {
         return null;
     }
-    else if (common_1.isFocusable(element)) {
+    else if ((0, common_1.isFocusable)(element)) {
         return element;
     }
     return getFocusableElement(element.parentElement);
@@ -48,7 +48,7 @@ function isElementOutOfBounds(element, boundingRect) {
  *
  * This should be used on popup elements that use `useInitialFocus`.
  */
-exports.useReturnFocus = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(model => {
+exports.useReturnFocus = (0, common_1.createElemPropsHook)(usePopupModel_1.usePopupModel)(model => {
     const visible = model.state.visibility !== 'hidden';
     const elementRef = react_1.default.useRef(null);
     // This boolean tracks keyboard-driven focus changes. This is required for `useFocusRedirect` as
@@ -121,13 +121,13 @@ exports.useReturnFocus = common_1.createElemPropsHook(usePopupModel_1.usePopupMo
                 // We need to change focus _before_ the browser process the default action of picking a new
                 // focus target. Doing this immediately prevents the `focus` event from firing on `element`,
                 // but that's okay because the browser will change focus anyways.
-                common_1.changeFocus(element);
+                (0, common_1.changeFocus)(element);
             }
             else {
                 // We wait a frame for the current event to process, allowing the browser to fire default
                 // actions. This delay allows the focus change to trigger a `focus` event on `element`.
                 requestAnimationFrame(() => {
-                    common_1.changeFocus(element);
+                    (0, common_1.changeFocus)(element);
                 });
             }
             elementRef.current = null;

package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenEnter.js

@@ -17,7 +17,7 @@ const usePopupModel_1 = require("./usePopupModel");
  * Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
  * Doing so would open the popup when the intention was to close it.
  */
-exports.useTransferOnFullscreenEnter = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(model => {
+exports.useTransferOnFullscreenEnter = (0, common_1.createElemPropsHook)(usePopupModel_1.usePopupModel)(model => {
     const handler = react_1.default.useCallback((event) => {
         if (screenfull_1.default.isFullscreen && model.state.stackRef.current) {
             canvas_kit_popup_stack_1.PopupStack.transferToCurrentContext({

package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenExit.js

@@ -16,7 +16,7 @@ const usePopupModel_1 = require("./usePopupModel");
  * Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
  * Doing so would open the popup when the intention was to close it.
  */
-exports.useTransferOnFullscreenExit = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(model => {
+exports.useTransferOnFullscreenExit = (0, common_1.createElemPropsHook)(usePopupModel_1.usePopupModel)(model => {
     const handler = react_1.default.useCallback((event) => {
         if (!screenfull_1.default.isFullscreen && model.state.stackRef.current) {
             canvas_kit_popup_stack_1.PopupStack.transferToCurrentContext({

package/dist/commonjs/radio/index.js

@@ -1,7 +1,11 @@
 "use strict";
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/commonjs/radio/lib/Radio.js

@@ -1,7 +1,11 @@
 "use strict";
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -25,7 +29,7 @@ const common_1 = require("@workday/canvas-kit-react/common");
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const text_1 = require("@workday/canvas-kit-react/text");
 const radioBorderRadius = 9;
-const RadioContainer = common_1.styled('div')({
+const RadioContainer = (0, common_1.styled)('div')({
     display: 'flex',
     alignItems: 'center',
     minHeight: tokens_1.space.m,
@@ -36,12 +40,12 @@ const RadioContainer = common_1.styled('div')({
  * :hover on the radio when you hover on it's corresponding label.
  * This stops the ripple from showing when you hover on the label.
  */
-const RadioInputWrapper = common_1.styled('div')({
+const RadioInputWrapper = (0, common_1.styled)('div')({
     display: 'flex',
     height: `calc(${tokens_1.space.s} + 2px)`,
     width: `calc(${tokens_1.space.s} + 2px)`,
 });
-const RadioRipple = common_1.styled('span')({
+const RadioRipple = (0, common_1.styled)('span')({
     borderRadius: tokens_1.borderRadius.circle,
     boxShadow: `0 0 0 0 ${tokens_1.colors.soap200}`,
     height: `calc(${tokens_1.space.s} + 2px)`,
@@ -52,7 +56,7 @@ const RadioRipple = common_1.styled('span')({
 }, ({ variant }) => ({
     opacity: variant === 'inverse' ? '0.4' : '1',
 }));
-const RadioInput = common_1.styled('input')({
+const RadioInput = (0, common_1.styled)('input')({
     borderRadius: `calc(${tokens_1.space.xxs} + 1px)`,
     width: tokens_1.space.m,
     height: tokens_1.space.m,
@@ -107,7 +111,7 @@ const RadioInput = common_1.styled('input')({
             borderWidth: '2px',
             borderColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : themeFocusOutline,
             boxShadow: 'none',
-            ...common_1.focusRing({
+            ...(0, common_1.focusRing)({
                 width: variant === 'inverse' ? 2 : 0,
                 separation: 0,
                 animate: false,
@@ -117,7 +121,7 @@ const RadioInput = common_1.styled('input')({
         },
     },
     '&:checked:focus ~ div:first-of-type': {
-        ...common_1.focusRing({
+        ...(0, common_1.focusRing)({
             separation: 2,
             width: 2,
             innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined,
@@ -126,9 +130,9 @@ const RadioInput = common_1.styled('input')({
         borderColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themePrimary.main,
         borderWidth: '2px',
     },
-    ...common_1.mouseFocusBehavior({
+    ...(0, common_1.mouseFocusBehavior)({
         '&:focus ~ div:first-of-type': {
-            ...common_1.focusRing({
+            ...(0, common_1.focusRing)({
                 width: 0,
                 outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
             }),
@@ -150,7 +154,7 @@ const RadioInput = common_1.styled('input')({
         },
     }),
 }));
-const RadioBackground = common_1.styled('div')({
+const RadioBackground = (0, common_1.styled)('div')({
     alignItems: 'center',
     backgroundColor: tokens_1.colors.frenchVanilla100,
     borderRadius: radioBorderRadius,
@@ -184,7 +188,7 @@ const RadioBackground = common_1.styled('div')({
             : 'white',
     opacity: disabled && variant === 'inverse' ? '.4' : '1',
 }));
-const RadioCheck = common_1.styled('div')({
+const RadioCheck = (0, common_1.styled)('div')({
     borderRadius: radioBorderRadius,
     display: 'flex',
     flexDirection: 'column',
@@ -200,13 +204,13 @@ const RadioCheck = common_1.styled('div')({
     opacity: checked ? 1 : 0,
     transform: checked ? 'scale(1)' : 'scale(0.5)',
 }));
-exports.Radio = common_1.createComponent('input')({
+exports.Radio = (0, common_1.createComponent)('input')({
     displayName: 'Radio',
     Component: ({ checked = false, id, label = '', disabled, name, onChange, value, variant, ...elemProps }, ref, Element) => {
-        const inputId = common_1.useUniqueId(id);
+        const inputId = (0, common_1.useUniqueId)(id);
         return (React.createElement(RadioContainer, null,
             React.createElement(RadioInputWrapper, { disabled: disabled },
-                React.createElement(RadioInput, Object.assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, name: name, onChange: onChange, type: "radio", value: value, "aria-checked": checked, variant: variant }, elemProps)),
+                React.createElement(RadioInput, { as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, name: name, onChange: onChange, type: "radio", value: value, "aria-checked": checked, variant: variant, ...elemProps }),
                 React.createElement(RadioRipple, { variant: variant }),
                 React.createElement(RadioBackground, { checked: checked, disabled: disabled, variant: variant },
                     React.createElement(RadioCheck, { checked: checked, variant: variant }))),

package/dist/commonjs/radio/lib/RadioGroup.js

@@ -1,7 +1,11 @@
 "use strict";
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -24,12 +28,12 @@ const React = __importStar(require("react"));
 const Radio_1 = require("./Radio");
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const common_1 = require("@workday/canvas-kit-react/common");
-const Container = common_1.styled('div')({
+const Container = (0, common_1.styled)('div')({
     display: 'inline-block',
     boxSizing: 'border-box',
     borderRadius: tokens_1.borderRadius.m,
     padding: `${tokens_1.space.xxxs} ${tokens_1.space.xs}`,
-    margin: `-${tokens_1.space.xxxs} -${tokens_1.space.xs}`,
+    margin: `0 -${tokens_1.space.xs}`,
     '& > div': {
         margin: `${tokens_1.space.xxs} ${tokens_1.space.zero}`,
         alignItems: 'flex-start',
@@ -44,7 +48,7 @@ const Container = common_1.styled('div')({
         },
     },
 }, ({ grow }) => grow && { width: '100%' }, ({ error, theme }) => {
-    const errorColors = common_1.getErrorColors(error, theme);
+    const errorColors = (0, common_1.getErrorColors)(error, theme);
     return {
         transition: '100ms box-shadow',
         boxShadow: errorColors.outer !== errorColors.inner
@@ -85,7 +89,7 @@ class RadioGroup extends React.Component {
     }
     render() {
         const { value = 0, children, error, onChange, grow, ...elemProps } = this.props;
-        return (React.createElement(Container, Object.assign({ error: error, grow: grow }, elemProps), React.Children.map(children, (child, index) => this.renderChild(child, index, value))));
+        return (React.createElement(Container, { error: error, grow: grow, ...elemProps }, React.Children.map(children, (child, index) => this.renderChild(child, index, value))));
     }
 }
 exports.RadioGroup = RadioGroup;

package/dist/commonjs/segmented-control/index.js

@@ -1,7 +1,11 @@
 "use strict";
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/commonjs/segmented-control/lib/SegmentedControl.js

@@ -1,7 +1,11 @@
 "use strict";
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -37,10 +41,10 @@ const onButtonClick = (existingOnClick, onChange, index, event) => {
         }
     }
 };
-exports.SegmentedControl = common_1.createComponent('div')({
+exports.SegmentedControl = (0, common_1.createComponent)('div')({
     displayName: 'SegmentedControl',
     Component: ({ value = 0, children, onChange, ...elemProps }, ref) => {
-        return (React.createElement("div", Object.assign({}, elemProps), React.Children.map(children, (child, index) => {
+        return (React.createElement("div", { ...elemProps }, React.Children.map(children, (child, index) => {
             if (typeof child.type === typeof SegmentedControlButton_1.SegmentedControlButton) {
                 return React.cloneElement(child, {
                     toggled: typeof value === 'number' ? index === value : child.props.value === value,

package/dist/commonjs/segmented-control/lib/SegmentedControlButton.js

@@ -42,7 +42,7 @@ const getSizeStyles = (size) => {
         height: sizeValue,
     };
 };
-const StyledButton = common_1.styled(button_1.BaseButton)({
+const StyledButton = (0, common_1.styled)(button_1.BaseButton)({
     borderRadius: tokens_1.borderRadius.zero,
     border: `1px solid ${tokens_1.colors.soap500}`,
     borderLeft: 'none',
@@ -65,7 +65,7 @@ const StyledButton = common_1.styled(button_1.BaseButton)({
         zIndex: 1,
         animation: 'none',
         transition: 'all 120ms, border-radius 1ms',
-        ...common_1.mouseFocusBehavior({
+        ...(0, common_1.mouseFocusBehavior)({
             '&': {
                 borderRadius: tokens_1.borderRadius.zero,
                 '&:first-of-type': {
@@ -87,10 +87,10 @@ const StyledButton = common_1.styled(button_1.BaseButton)({
 }), ({ size }) => ({
     ...getSizeStyles(size),
 }));
-exports.SegmentedControlButton = common_1.createComponent('button')({
+exports.SegmentedControlButton = (0, common_1.createComponent)('button')({
     displayName: 'Button',
     Component: ({ value, icon, toggled, ...props }, ref, Element) => {
-        return (react_1.default.createElement(StyledButton, Object.assign({ as: Element, "aria-pressed": toggled, value: value, colors: getIconButtonColors(toggled), fillIcon: toggled, ref: ref }, props),
+        return (react_1.default.createElement(StyledButton, { as: Element, "aria-pressed": toggled, value: value, colors: getIconButtonColors(toggled), fillIcon: toggled, ref: ref, ...props },
             react_1.default.createElement(button_1.BaseButton.Icon, { size: props.size || 'large', icon: icon })));
     },
 });

package/dist/commonjs/select/index.js

@@ -1,7 +1,11 @@
 "use strict";
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];