@workday/canvas-kit-preview-react 8.0.0-alpha.239-next.10 → 8.0.0-alpha.240-next.11

package/dist/es6/segmented-control/lib/hooks/useSegmentedControlModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSegmentedControlModel.d.ts","sourceRoot":"","sources":["../../../../../segmented-control/lib/hooks/useSegmentedControlModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,eAAO,MAAM,wBAAwB;IAGjC;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAxBH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CL,CAAC"}
+{"version":3,"file":"useSegmentedControlModel.d.ts","sourceRoot":"","sources":["../../../../../segmented-control/lib/hooks/useSegmentedControlModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,wBAAwB;IAGjC;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAxBH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CL,CAAC"}

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

@@ -11,9 +11,9 @@ var __assign = (this && this.__assign) || function () {
 };
 import React from 'react';
 import { createModelHook } from '@workday/canvas-kit-react/common';
-import { defaultGetId, useListModel, useOverflowListModel, } from '@workday/canvas-kit-react/collection';
+import { defaultGetId, useListModel } from '@workday/canvas-kit-react/collection';
 export var useSegmentedControlModel = createModelHook({
-    defaultConfig: __assign(__assign({}, useOverflowListModel.defaultConfig), { 
+    defaultConfig: __assign(__assign({}, useListModel.defaultConfig), { 
         /**
          * Optional id for the whole `SegmentedControl` group. If not provided, a unique id will be created.
          * @default useUniqueId()
@@ -46,7 +46,7 @@ export var useSegmentedControlModel = createModelHook({
     var getId = config.getId || defaultGetId;
     var initialSelectedRef = React.useRef(config.initialValue);
     var items = config.items;
-    var model = useOverflowListModel(useOverflowListModel.mergeConfig(config, {
+    var model = useListModel(useListModel.mergeConfig(config, {
         orientation: config.orientation || 'horizontal',
         items: items,
         onRegisterItem: function (data) {
@@ -61,7 +61,7 @@ export var useSegmentedControlModel = createModelHook({
                 : [],
         shouldVirtualize: false,
     }));
-    var state = __assign(__assign({}, model.state), { disabled: config.disabled, size: config.size, nonInteractiveIds: [], hiddenIds: [] });
+    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 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "8.0.0-alpha.239-next.10+46fbe588",
+  "version": "8.0.0-alpha.240-next.11+f6621f78",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -46,16 +46,16 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^8.0.0-alpha.239-next.10+46fbe588",
+    "@workday/canvas-kit-react": "^8.0.0-alpha.240-next.11+f6621f78",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8"
   },
   "devDependencies": {
     "@workday/canvas-accent-icons-web": "^3.0.0",
-    "@workday/canvas-kit-labs-react": "^8.0.0-alpha.239-next.10+46fbe588",
+    "@workday/canvas-kit-labs-react": "^8.0.0-alpha.240-next.11+f6621f78",
     "formik": "^2.2.9",
     "react-hook-form": "7.36.1",
     "yup": "^0.32.11"
   },
-  "gitHead": "46fbe58858eac3afa6d5df9eb4fccbbb5d806977"
+  "gitHead": "f6621f7840832cf99fc5690de97211525b9dc638"
 }

package/segmented-control/lib/SegmentedControlList.tsx

@@ -5,21 +5,22 @@ import {
   ExtractProps,
   createElemPropsHook,
 } from '@workday/canvas-kit-react/common';
-import {Stack} from '@workday/canvas-kit-react/layout';
+import {Grid} from '@workday/canvas-kit-react/layout';
 import {useListRenderItems} from '@workday/canvas-kit-react/collection';
 import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
 
 export interface SegmentedControlListProps<T = any>
-  extends Omit<Partial<ExtractProps<typeof Stack, never>>, 'children'> {
+  extends Omit<Partial<ExtractProps<typeof Grid, never>>, 'children'> {
   'aria-label': string;
   children: ((item: T) => React.ReactNode) | React.ReactNode;
 }
 
 const useSegmentedControlList = createElemPropsHook(useSegmentedControlModel)(
-  ({state: {orientation, disabled}}) => {
+  ({state: {orientation, disabled, items}}) => {
+    const directionName = orientation === 'vertical' ? 'Row' : 'Column';
     return {
-      flexDirection: orientation === 'vertical' ? 'column' : 'row',
-      opacity: disabled ? 0.4 : 1,
+      [`gridTemplate${directionName}s`]: `repeat(${items.length}, 1fr)`,
+      opacity: disabled ? 0.4 : undefined,
     };
   }
 );
@@ -30,19 +31,19 @@ export const SegmentedControlList = createSubcomponent('div')({
   elemPropsHook: useSegmentedControlList,
 })<SegmentedControlListProps>(({children, ...elemProps}, Element, model) => {
   return (
-    <Stack
+    <Grid
       as={Element}
-      display="inline-flex"
+      display="inline-grid"
       role="group"
       backgroundColor="soap200"
       border="1px solid transparent"
       borderColor="licorice200"
       borderRadius="l"
-      spacing="xxs"
       padding="3px"
+      gridGap="xxs"
       {...elemProps}
     >
       {useListRenderItems(model, children)}
-    </Stack>
+    </Grid>
   );
 });

package/segmented-control/lib/hooks/useSegmentedControlItem.tsx

@@ -1,11 +1,6 @@
 import * as React from 'react';
 
-import {
-  createElemPropsHook,
-  composeHooks,
-  useLocalRef,
-  useMountLayout,
-} from '@workday/canvas-kit-react/common';
+import {createElemPropsHook, composeHooks} from '@workday/canvas-kit-react/common';
 import {
   useListItemRegister,
   isSelected,
@@ -18,57 +13,25 @@ export const useSegmentedControlItem = composeHooks(
   createElemPropsHook(useSegmentedControlModel)(
     (
       model,
-      ref?: React.Ref<HTMLElement>,
+      _?: React.Ref<HTMLElement>,
       elemProps: {'data-id'?: string; children?: React.ReactNode} = {}
     ) => {
-      const {elementRef, localRef} = useLocalRef(ref);
       const name = elemProps['data-id'] || '';
-      const id = `${model.state.id}-${name}`;
-
-      useMountLayout(() => {
-        if (localRef.current) {
-          const styles = getComputedStyle(localRef.current);
-          model.events.addItemWidth({
-            id: name,
-            width:
-              localRef.current.offsetWidth +
-              parseFloat(styles.marginLeft) +
-              parseFloat(styles.marginRight),
-          });
-        }
-
-        return () => {
-          model.events.removeItemWidth({id: name});
-        };
-      });
-
       const selected = !!name && isSelected(name, model.state);
-      const [longest] = Object.keys(model.state.itemWidthCache)
-        .map(e => model.state.itemWidthCache[e])
-        .sort((a, b) => (a < b ? 1 : -1));
 
       return {
-        ref: elementRef,
-        id,
+        id: `${model.state.id}-${name}`,
         'aria-pressed': selected,
-        disabled: model.state.disabled || undefined,
-        width: elemProps.children && `${longest}px`,
       };
     }
   ),
   useListItemRegister,
-  createElemPropsHook(useSegmentedControlModel)(
-    (
-      {state},
-      _ref,
-      elemProps: {
-        disabled?: boolean;
-      } = {}
-    ) => {
-      return {
-        // override the default disabled functionality of `useListItemRegister`
-        disabled: elemProps.disabled || state.disabled ? true : undefined,
-      };
-    }
-  )
+  createElemPropsHook(useSegmentedControlModel)(({state}) => {
+    return {
+      // override the default disabled functionality of `useListItemRegister`
+      // it shouldn't allow to set disabled state only for one button
+      // state prop will disable the whole container
+      disabled: state.disabled ? true : undefined,
+    };
+  })
 );

package/segmented-control/lib/hooks/useSegmentedControlModel.tsx

@@ -1,14 +1,10 @@
 import React from 'react';
 import {createModelHook} from '@workday/canvas-kit-react/common';
-import {
-  defaultGetId,
-  useListModel,
-  useOverflowListModel,
-} from '@workday/canvas-kit-react/collection';
+import {defaultGetId, useListModel} from '@workday/canvas-kit-react/collection';
 
 export const useSegmentedControlModel = createModelHook({
   defaultConfig: {
-    ...useOverflowListModel.defaultConfig,
+    ...useListModel.defaultConfig,
     /**
      * Optional id for the whole `SegmentedControl` group. If not provided, a unique id will be created.
      * @default useUniqueId()
@@ -42,8 +38,8 @@ export const useSegmentedControlModel = createModelHook({
   const initialSelectedRef = React.useRef(config.initialValue);
   const items = config.items;
 
-  const model = useOverflowListModel(
-    useOverflowListModel.mergeConfig(config, {
+  const model = useListModel(
+    useListModel.mergeConfig(config, {
       orientation: config.orientation || 'horizontal',
       items,
       onRegisterItem(data) {
@@ -65,8 +61,6 @@ export const useSegmentedControlModel = createModelHook({
     ...model.state,
     disabled: config.disabled,
     size: config.size,
-    nonInteractiveIds: [],
-    hiddenIds: [],
   };
 
   const events = {