@workday/canvas-kit-preview-react 9.0.0-alpha.364-next.3 → 9.0.0-alpha.382-next.2

package/dist/es6/pill/lib/usePillModel.js

@@ -1,16 +1,5 @@
-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);
-};
 import { createModelHook, useUniqueId } from '@workday/canvas-kit-react/common';
-export var usePillModel = createModelHook({
+export const usePillModel = createModelHook({
     defaultConfig: {
         /**
          * Determines the max width of the pill. If the pill text is longer than the max width,
@@ -27,8 +16,11 @@ export var usePillModel = createModelHook({
          */
         id: '',
     },
-})(function (config) {
-    var id = useUniqueId(config.id);
-    var state = __assign(__assign({}, config), { id: id });
-    return { state: state, events: {} };
+})(config => {
+    const id = useUniqueId(config.id);
+    const state = {
+        ...config,
+        id,
+    };
+    return { state, events: {} };
 });

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

@@ -23,7 +23,7 @@ import { SegmentedControlItem } from './SegmentedControlItem';
  * <SegmentedControl model={model}>{Child components}</SegmentedControl>;
  * ```
  */
-export var SegmentedControl = createContainer()({
+export const SegmentedControl = createContainer()({
     displayName: 'SegmentedControl',
     modelHook: useSegmentedControlModel,
     subComponents: {
@@ -46,7 +46,6 @@ export var SegmentedControl = createContainer()({
          */
         Item: SegmentedControlItem,
     },
-})(function (_a) {
-    var children = _a.children;
+})(({ children }) => {
     return React.createElement(React.Fragment, null, children);
 });

package/dist/es6/segmented-control/lib/SegmentedControlItem.js

@@ -1,25 +1,3 @@
-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 __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;
-};
 import * as React from 'react';
 import { colors, type, space } from '@workday/canvas-kit-react/tokens';
 import { createSubcomponent, useIsRTL } from '@workday/canvas-kit-react/common';
@@ -28,7 +6,7 @@ import { BaseButton, getMinWidthStyles, } from '@workday/canvas-kit-react/button
 import { useSegmentedControlModel } from './hooks/useSegmentedControlModel';
 import { Text } from '@workday/canvas-kit-react/text';
 import { useSegmentedControlItem } from './hooks/useSegmentedControlItem';
-var getButtonSize = function (size) {
+const getButtonSize = (size) => {
     switch (size) {
         case 'large':
             return 'medium';
@@ -40,7 +18,7 @@ var getButtonSize = function (size) {
             return 'medium';
     }
 };
-var getIconButtonColors = function (toggled) {
+const getIconButtonColors = (toggled) => {
     return {
         default: {
             background: toggled ? colors.frenchVanilla100 : colors.soap200,
@@ -65,44 +43,41 @@ var getIconButtonColors = function (toggled) {
         },
     };
 };
-var getPaddingStyles = function (children, size, icon) {
+const getPaddingStyles = (children, size, icon) => {
     if (!children) {
         return 0;
     }
     switch (size) {
         case 'large':
-            return icon ? "0 " + space.m + " 0 20px" : "0 " + space.m;
+            return icon ? `0 ${space.m} 0 20px` : `0 ${space.m}`;
         case 'medium':
-            return icon ? "0 20px 0 " + space.s : "0 " + space.s;
+            return icon ? `0 20px 0 ${space.s}` : `0 ${space.s}`;
         case 'small':
-            return icon ? "0 " + space.xs + " 0 " + space.xxs : "0 " + space.xs;
+            return icon ? `0 ${space.xs} 0 ${space.xxs}` : `0 ${space.xs}`;
         default:
-            return icon ? "0 20px 0 " + space.s : "0 " + space.s;
+            return icon ? `0 20px 0 ${space.s}` : `0 ${space.s}`;
     }
 };
-var geButtonStyles = function (size, children, icon) {
-    var buttonSize = getButtonSize(size);
-    var minWidthValue = getMinWidthStyles(children, children ? size : buttonSize);
+const geButtonStyles = (size, children, icon) => {
+    const buttonSize = getButtonSize(size);
+    const minWidthValue = getMinWidthStyles(children, children ? size : buttonSize);
     return {
         height: getMinWidthStyles(false, buttonSize),
         minWidth: minWidthValue,
         padding: getPaddingStyles(children, size, icon),
     };
 };
-var Container = function (_a) {
-    var tooltipProps = _a.tooltipProps, children = _a.children;
-    return tooltipProps ? (React.createElement(Tooltip, __assign({}, tooltipProps), children)) : (React.createElement(React.Fragment, null, children));
+const Container = ({ tooltipProps, children, }) => {
+    return tooltipProps ? (React.createElement(Tooltip, Object.assign({}, tooltipProps), children)) : (React.createElement(React.Fragment, null, children));
 };
-export var SegmentedControlItem = createSubcomponent('button')({
+export const SegmentedControlItem = createSubcomponent('button')({
     displayName: 'SegmentedControl.Item',
     modelHook: useSegmentedControlModel,
     elemPropsHook: useSegmentedControlItem,
-})(function (_a, Element, _b) {
-    var size = _b.state.size;
-    var children = _a.children, icon = _a.icon, tooltipProps = _a.tooltipProps, elemProps = __rest(_a, ["children", "icon", "tooltipProps"]);
-    var _c = type.levels.subtext[size === 'small' ? 'medium' : 'large'], color = _c.color, textStyles = __rest(_c, ["color"]);
+})(({ children, icon, tooltipProps, ...elemProps }, Element, { state: { size } }) => {
+    const { color, ...textStyles } = type.levels.subtext[size === 'small' ? 'medium' : 'large'];
     return (React.createElement(Container, { tooltipProps: tooltipProps },
-        React.createElement(BaseButton, __assign({ as: Element, borderRadius: "m", colors: getIconButtonColors(elemProps['aria-pressed']) }, geButtonStyles(size, children, icon), elemProps),
+        React.createElement(BaseButton, Object.assign({ as: Element, borderRadius: "m", colors: getIconButtonColors(elemProps['aria-pressed']) }, geButtonStyles(size, children, icon), elemProps),
             icon && (React.createElement(BaseButton.Icon, { size: size === 'small' ? 'extraSmall' : 'medium', icon: icon, shouldMirrorIcon: useIsRTL() })),
-            children && (React.createElement(Text, __assign({}, textStyles, { fontWeight: "bold", textAlign: "left" }), children)))));
+            children && (React.createElement(Text, Object.assign({}, textStyles, { fontWeight: "bold", textAlign: "left" }), children)))));
 });

package/dist/es6/segmented-control/lib/SegmentedControlList.js

@@ -1,44 +1,19 @@
-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 __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;
-};
 import * as React from 'react';
 import { createSubcomponent, createElemPropsHook, } from '@workday/canvas-kit-react/common';
 import { Grid } from '@workday/canvas-kit-react/layout';
 import { useListRenderItems } from '@workday/canvas-kit-react/collection';
 import { useSegmentedControlModel } from './hooks/useSegmentedControlModel';
-export var useSegmentedControlList = createElemPropsHook(useSegmentedControlModel)(function (_a) {
-    var _b;
-    var _c = _a.state, orientation = _c.orientation, disabled = _c.disabled, items = _c.items;
-    var directionName = orientation === 'vertical' ? 'Row' : 'Column';
-    return _b = {},
-        _b["gridTemplate" + directionName + "s"] = "repeat(" + items.length + ", 1fr)",
-        _b.opacity = disabled ? 0.4 : undefined,
-        _b;
+export const useSegmentedControlList = createElemPropsHook(useSegmentedControlModel)(({ state: { orientation, disabled, items } }) => {
+    const directionName = orientation === 'vertical' ? 'Row' : 'Column';
+    return {
+        [`gridTemplate${directionName}s`]: `repeat(${items.length}, 1fr)`,
+        opacity: disabled ? 0.4 : undefined,
+    };
 });
-export var SegmentedControlList = createSubcomponent('div')({
+export const SegmentedControlList = createSubcomponent('div')({
     displayName: 'SegmentedControl.List',
     modelHook: useSegmentedControlModel,
     elemPropsHook: useSegmentedControlList,
-})(function (_a, Element, model) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return (React.createElement(Grid, __assign({ as: Element, display: "inline-grid", role: "group", backgroundColor: "soap200", border: "1px solid transparent", borderColor: "licorice200", borderRadius: "l", padding: "3px", gridGap: "xxs" }, elemProps), useListRenderItems(model, children)));
+})(({ children, ...elemProps }, Element, model) => {
+    return (React.createElement(Grid, Object.assign({ as: Element, display: "inline-grid", role: "group", backgroundColor: "soap200", border: "1px solid transparent", borderColor: "licorice200", borderRadius: "l", padding: "3px", gridGap: "xxs" }, elemProps), useListRenderItems(model, children)));
 });

package/dist/es6/segmented-control/lib/hooks/useSegmentedControlItem.js

@@ -1,16 +1,14 @@
 import { createElemPropsHook, composeHooks } from '@workday/canvas-kit-react/common';
 import { useListItemRegister, isSelected, useListItemSelect, } from '@workday/canvas-kit-react/collection';
 import { useSegmentedControlModel } from './useSegmentedControlModel';
-export var useSegmentedControlItem = composeHooks(useListItemSelect, createElemPropsHook(useSegmentedControlModel)(function (model, _, elemProps) {
-    if (elemProps === void 0) { elemProps = {}; }
-    var name = elemProps['data-id'] || '';
-    var selected = !!name && isSelected(name, model.state);
+export const useSegmentedControlItem = composeHooks(useListItemSelect, createElemPropsHook(useSegmentedControlModel)((model, _, elemProps = {}) => {
+    const name = elemProps['data-id'] || '';
+    const selected = !!name && isSelected(name, model.state);
     return {
-        id: model.state.id + "-" + name,
+        id: `${model.state.id}-${name}`,
         'aria-pressed': selected,
     };
-}), useListItemRegister, createElemPropsHook(useSegmentedControlModel)(function (_a) {
-    var state = _a.state;
+}), useListItemRegister, createElemPropsHook(useSegmentedControlModel)(({ state }) => {
     return {
         // override the default disabled functionality of `useListItemRegister`
         // it shouldn't allow to set disabled state only for one button

package/dist/es6/segmented-control/lib/hooks/useSegmentedControlModel.js

@@ -1,55 +1,46 @@
-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);
-};
 import React from 'react';
 import { createModelHook } from '@workday/canvas-kit-react/common';
 import { defaultGetId, useListModel } from '@workday/canvas-kit-react/collection';
-export var useSegmentedControlModel = createModelHook({
-    defaultConfig: __assign(__assign({}, useListModel.defaultConfig), { 
+export const useSegmentedControlModel = createModelHook({
+    defaultConfig: {
+        ...useListModel.defaultConfig,
         /**
          * Optional id for the whole `SegmentedControl` group. If not provided, a unique id will be created.
          * @default useUniqueId()
          */
-        id: '', 
+        id: '',
         /**
          * An initially selected value. This value must match the `data-id` of the `SegmentedControl.Item` component.
          * If not provided, the first value will be selected.
          */
-        initialValue: '', 
+        initialValue: '',
         /**
          * Sets disabled state for all segmented control buttons
          * @default false
          */
-        disabled: false, 
+        disabled: false,
         /**
          * Sets the size of the segmented control container and its buttons. Can be `small`, `medium` or `large`.
          * @default 'medium'
          */
-        size: 'medium', 
+        size: 'medium',
         /**
          * The SegmentedControl can rendered in a horizontal or vertical orientation.
          * We suggest to use the `vertical` orientation only for icon only variant.
          * @default 'horizontal'
          */
-        orientation: 'horizontal' }),
+        orientation: 'horizontal',
+    },
     requiredConfig: useListModel.requiredConfig,
-})(function (config) {
+})(config => {
     var _a;
-    var getId = config.getId || defaultGetId;
-    var initialSelectedRef = React.useRef(config.initialValue);
-    var items = config.items;
-    var model = useListModel(useListModel.mergeConfig(config, {
+    const getId = config.getId || defaultGetId;
+    const initialSelectedRef = React.useRef(config.initialValue);
+    const items = config.items;
+    const model = useListModel(useListModel.mergeConfig(config, {
         orientation: config.orientation || 'horizontal',
-        items: items,
-        onRegisterItem: function (data) {
+        items,
+        onRegisterItem(data) {
             if (!initialSelectedRef.current) {
                 initialSelectedRef.current = getId(data.item);
                 events.select({ id: initialSelectedRef.current });
@@ -62,8 +53,17 @@ export var useSegmentedControlModel = createModelHook({
                 : [],
         shouldVirtualize: false,
     }));
-    var state = __assign(__assign({}, model.state), { disabled: config.disabled, size: config.size });
-    var events = __assign({}, model.events);
-    return __assign(__assign({}, model), { state: state,
-        events: events });
+    const state = {
+        ...model.state,
+        disabled: config.disabled,
+        size: config.size,
+    };
+    const events = {
+        ...model.events,
+    };
+    return {
+        ...model,
+        state,
+        events,
+    };
 });