@workday/canvas-kit-react 15.0.0-alpha.0008-next.0 → 15.0.0-alpha.0023-next.0

package/segmented-control/lib/SegmentedControlList.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {Grid} from '@workday/canvas-kit-react/layout';
+import {system} from '@workday/canvas-tokens-web';
+import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
+import {useListRenderItems} from '@workday/canvas-kit-react/collection';
+
+export interface SegmentedControlListProps<T = any>
+  extends Omit<Partial<ExtractProps<typeof Grid, never>>, 'children'> {
+  'aria-label': string;
+  children: ((item: T) => React.ReactNode) | React.ReactNode;
+}
+
+export const segmentedControlListStencil = createStencil({
+  vars: {
+    items: '',
+  },
+  base: {
+    display: 'inline-grid',
+    backgroundColor: system.color.bg.alt.soft,
+    border: `${px2rem(1)} solid ${system.color.border.input.default}`,
+    borderRadius: system.shape.x2,
+    padding: px2rem(3),
+    gridGap: system.space.x2,
+  },
+  modifiers: {
+    disabled: {
+      true: {
+        opacity: system.opacity.disabled,
+      },
+    },
+    orientation: {
+      vertical: ({items}) => ({
+        gridTemplateRows: `repeat(${items}, 1fr)`,
+      }),
+      horizontal: ({items}) => ({
+        gridTemplateColumns: `repeat(${items}, 1fr)`,
+      }),
+    },
+  },
+});
+
+export const SegmentedControlList = createSubcomponent('div')({
+  displayName: 'SegmentedControl.List',
+  modelHook: useSegmentedControlModel,
+})<SegmentedControlListProps>(({children, ...elemProps}, Element, model) => {
+  return (
+    <Element
+      role="group"
+      {...handleCsProp(
+        elemProps,
+        segmentedControlListStencil({
+          disabled: model.state.disabled,
+          items: `${model.state.items.length}`,
+          orientation: model.state.orientation,
+        })
+      )}
+    >
+      {useListRenderItems(model, children)}
+    </Element>
+  );
+});

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+import {createElemPropsHook, composeHooks} from '@workday/canvas-kit-react/common';
+import {
+  useListItemRegister,
+  isSelected,
+  useListItemSelect,
+} from '@workday/canvas-kit-react/collection';
+import {useSegmentedControlModel} from './useSegmentedControlModel';
+
+export const useSegmentedControlItem = composeHooks(
+  useListItemSelect,
+  createElemPropsHook(useSegmentedControlModel)(
+    (model, _, elemProps: {'data-id'?: string; children?: React.ReactNode} = {}) => {
+      const name = elemProps['data-id'] || '';
+      const selected = !!name && isSelected(name, model.state);
+
+      return {
+        id: `${model.state.id}-${name}`,
+        'aria-pressed': selected,
+      };
+    }
+  ),
+  useListItemRegister,
+  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

@@ -0,0 +1,75 @@
+import React from 'react';
+import {createModelHook} from '@workday/canvas-kit-react/common';
+import {defaultGetId, useListModel} from '@workday/canvas-kit-react/collection';
+
+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: '',
+    /**
+     * 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: '',
+    /**
+     * Sets disabled state for all segmented control buttons
+     * @default false
+     */
+    disabled: false,
+    /**
+     * Sets the size of the segmented control container and its buttons. Can be `small`, `medium` or `large`.
+     * @default 'medium'
+     */
+    size: 'medium' as 'small' | 'medium' | 'large',
+    /**
+     * 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' as typeof useListModel.defaultConfig.orientation,
+  },
+  requiredConfig: useListModel.requiredConfig,
+})(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,
+      onRegisterItem(data) {
+        if (!initialSelectedRef.current) {
+          initialSelectedRef.current = data.id;
+          events.select({id: initialSelectedRef.current});
+        }
+      },
+      initialSelectedIds: config.initialValue
+        ? [config.initialValue]
+        : config.items?.length
+        ? [getId(config.items![0])]
+        : [],
+      shouldVirtualize: false,
+    })
+  );
+
+  const state = {
+    ...model.state,
+    disabled: config.disabled,
+    size: config.size,
+  };
+
+  const events = {
+    ...model.events,
+  };
+
+  return {
+    ...model,
+    state,
+    events,
+  };
+});

package/testing/lib/ComponentStatesTable.tsx

@@ -28,14 +28,14 @@ export interface ComponentStatesTableProps {
 const Table = styled('table')({
   width: '100%',
   thead: {
-    textAlign: 'left',
-    paddingBottom: 16,
+    textAlign: 'start',
+    paddingBlockEnd: 16,
   },
   'td, th': {
     minWidth: 100,
-    paddingBottom: 16,
-    paddingRight: 16,
-    textAlign: 'left',
+    paddingBlockEnd: 16,
+    paddingInlineEnd: 16,
+    textAlign: 'start',
   },
 });
 

package/dist/commonjs/segmented-control/lib/SegmentedControlButton.d.ts

@@ -1,16 +0,0 @@
-import { ButtonContainerProps } from '@workday/canvas-kit-react/button';
-import { CanvasSystemIcon } from '@workday/design-assets-types';
-/**
- * @deprecated ⚠️ `SegmentedControlButtonProps` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
- */
-export interface SegmentedControlButtonProps extends ButtonContainerProps {
-    toggled?: boolean;
-    icon: CanvasSystemIcon;
-    value?: string | number;
-    size?: 'small' | 'medium' | 'large';
-}
-/**
- * @deprecated ⚠️ `SegmentedControlButton` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
- */
-export declare const SegmentedControlButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", SegmentedControlButtonProps>;
-//# sourceMappingURL=SegmentedControlButton.d.ts.map

package/dist/commonjs/segmented-control/lib/SegmentedControlButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SegmentedControlButton.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,oBAAoB,EAAgB,MAAM,kCAAkC,CAAC;AAEjG,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AA+E9D;;GAEG;AACH,MAAM,WAAW,2BAA4B,SAAQ,oBAAoB;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,oGAkBjC,CAAC"}

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

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SegmentedControlButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-const button_1 = require("@workday/canvas-kit-react/button");
-const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
-const common_1 = require("@workday/canvas-kit-react/common");
-const icon_1 = require("@workday/canvas-kit-react/icon");
-const segmentedControlButtonStencil = (0, canvas_kit_styling_1.createStencil)({
-    extends: button_1.buttonStencil,
-    base: { name: "1mdcmu", styles: "box-sizing:border-box;border-inline-start:none;min-width:auto;--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-soft);--border-button-f6d2bd:var(--cnvs-sys-color-border-container);--borderRadius-button-f6d2bd:var(--cnvs-sys-shape-zero);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-soft);&:hover, &.hover{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:active, &.active{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-softer);--border-button-f6d2bd:var(--cnvs-sys-color-border-container);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}&:first-of-type{border-radius:var(--cnvs-sys-shape-x1) 0 0 var(--cnvs-sys-shape-x1);border-inline-start:0.0625rem solid var(--cnvs-sys-color-border-container);}&:last-of-type{border-radius:0 var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) 0;}&[aria-pressed=\"true\"]{--background-button-f6d2bd:var(--cnvs-brand-primary-base);--border-button-f6d2bd:var(--cnvs-brand-primary-base);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-inverse);&:first-of-type{border-inline-start-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-softer);--border-button-f6d2bd:var(--cnvs-sys-color-border-container);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}}&:focus-visible, &.focus{border-radius:var(--cnvs-sys-shape-x1);z-index:1;animation:none;transition:all 120ms border-radius 1ms;}" },
-    modifiers: {
-        segmentedControlButtonSize: {
-            small: { name: "1zrudd", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);" },
-            medium: { name: "1pmoid", styles: "width:var(--cnvs-sys-space-x10);height:var(--cnvs-sys-space-x10);" },
-            large: { name: "2231pm", styles: "width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));" }
-        }
-    }
-}, "segmented-control-button-c9fec8");
-/**
- * @deprecated ⚠️ `SegmentedControlButton` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
- */
-exports.SegmentedControlButton = (0, common_1.createComponent)('button')({
-    displayName: 'Button',
-    Component: ({ value, icon, toggled, ...props }, ref, Element) => {
-        return ((0, jsx_runtime_1.jsx)(button_1.BaseButton, { as: Element, ref: ref, "aria-pressed": toggled, value: value, ...(0, canvas_kit_styling_1.handleCsProp)(props, segmentedControlButtonStencil({ segmentedControlButtonSize: props.size || 'medium' })), children: (0, jsx_runtime_1.jsx)(button_1.BaseButton.Icon, { size: props.size || 'large', icon: icon }) }));
-    },
-});

package/dist/es6/segmented-control/lib/SegmentedControlButton.d.ts

@@ -1,16 +0,0 @@
-import { ButtonContainerProps } from '@workday/canvas-kit-react/button';
-import { CanvasSystemIcon } from '@workday/design-assets-types';
-/**
- * @deprecated ⚠️ `SegmentedControlButtonProps` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
- */
-export interface SegmentedControlButtonProps extends ButtonContainerProps {
-    toggled?: boolean;
-    icon: CanvasSystemIcon;
-    value?: string | number;
-    size?: 'small' | 'medium' | 'large';
-}
-/**
- * @deprecated ⚠️ `SegmentedControlButton` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
- */
-export declare const SegmentedControlButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", SegmentedControlButtonProps>;
-//# sourceMappingURL=SegmentedControlButton.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SegmentedControlButton.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,oBAAoB,EAAgB,MAAM,kCAAkC,CAAC;AAEjG,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AA+E9D;;GAEG;AACH,MAAM,WAAW,2BAA4B,SAAQ,oBAAoB;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,oGAkBjC,CAAC"}

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

@@ -1,26 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { brand, system } from '@workday/canvas-tokens-web';
-import { BaseButton, buttonStencil } from '@workday/canvas-kit-react/button';
-import { calc, createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
-import { createComponent } from '@workday/canvas-kit-react/common';
-import { systemIconStencil } from '@workday/canvas-kit-react/icon';
-const segmentedControlButtonStencil = createStencil({
-    extends: buttonStencil,
-    base: { name: "1mdcmu", styles: "box-sizing:border-box;border-inline-start:none;min-width:auto;--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-soft);--border-button-f6d2bd:var(--cnvs-sys-color-border-container);--borderRadius-button-f6d2bd:var(--cnvs-sys-shape-zero);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-soft);&:hover, &.hover{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:active, &.active{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-softer);--border-button-f6d2bd:var(--cnvs-sys-color-border-container);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}&:first-of-type{border-radius:var(--cnvs-sys-shape-x1) 0 0 var(--cnvs-sys-shape-x1);border-inline-start:0.0625rem solid var(--cnvs-sys-color-border-container);}&:last-of-type{border-radius:0 var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) 0;}&[aria-pressed=\"true\"]{--background-button-f6d2bd:var(--cnvs-brand-primary-base);--border-button-f6d2bd:var(--cnvs-brand-primary-base);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-inverse);&:first-of-type{border-inline-start-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-softer);--border-button-f6d2bd:var(--cnvs-sys-color-border-container);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}}&:focus-visible, &.focus{border-radius:var(--cnvs-sys-shape-x1);z-index:1;animation:none;transition:all 120ms border-radius 1ms;}" },
-    modifiers: {
-        segmentedControlButtonSize: {
-            small: { name: "1zrudd", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);" },
-            medium: { name: "1pmoid", styles: "width:var(--cnvs-sys-space-x10);height:var(--cnvs-sys-space-x10);" },
-            large: { name: "2231pm", styles: "width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));" }
-        }
-    }
-}, "segmented-control-button-c9fec8");
-/**
- * @deprecated ⚠️ `SegmentedControlButton` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
- */
-export const SegmentedControlButton = createComponent('button')({
-    displayName: 'Button',
-    Component: ({ value, icon, toggled, ...props }, ref, Element) => {
-        return (_jsx(BaseButton, { as: Element, ref: ref, "aria-pressed": toggled, value: value, ...handleCsProp(props, segmentedControlButtonStencil({ segmentedControlButtonSize: props.size || 'medium' })), children: _jsx(BaseButton.Icon, { size: props.size || 'large', icon: icon }) }));
-    },
-});

package/segmented-control/lib/SegmentedControlButton.tsx

@@ -1,114 +0,0 @@
-import {brand, system} from '@workday/canvas-tokens-web';
-import {BaseButton, ButtonContainerProps, buttonStencil} from '@workday/canvas-kit-react/button';
-import {calc, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
-import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {createComponent} from '@workday/canvas-kit-react/common';
-import {systemIconStencil} from '@workday/canvas-kit-react/icon';
-
-const segmentedControlButtonStencil = createStencil({
-  extends: buttonStencil,
-  base: {
-    borderInlineStart: 'none',
-    minWidth: 'auto',
-
-    [buttonStencil.vars.background]: system.color.bg.alt.soft,
-    [buttonStencil.vars.border]: system.color.border.container,
-    [buttonStencil.vars.borderRadius]: system.shape.zero,
-    [systemIconStencil.vars.color]: system.color.fg.muted.soft,
-
-    '&:hover, &.hover': {
-      [buttonStencil.vars.background]: system.color.bg.alt.default,
-      [systemIconStencil.vars.color]: system.color.icon.strong,
-    },
-    '&:active, &.active': {
-      [buttonStencil.vars.background]: system.color.bg.alt.stronger,
-    },
-
-    '&:disabled, &.disabled': {
-      [buttonStencil.vars.background]: system.color.bg.alt.softer,
-      [buttonStencil.vars.border]: system.color.border.container,
-      [systemIconStencil.vars.color]: system.color.icon.soft,
-    },
-
-    '&:first-of-type': {
-      borderRadius: `${system.shape.x1} 0 0 ${system.shape.x1}`,
-      borderInlineStart: `${px2rem(1)} solid ${system.color.border.container}`,
-    },
-
-    '&:last-of-type': {
-      borderRadius: `0 ${system.shape.x1} ${system.shape.x1} 0`,
-    },
-
-    '&[aria-pressed="true"]': {
-      [buttonStencil.vars.background]: brand.primary.base,
-      [buttonStencil.vars.border]: brand.primary.base,
-      [systemIconStencil.vars.color]: system.color.fg.inverse,
-
-      '&:first-of-type': {
-        borderInlineStartColor: brand.primary.base,
-      },
-
-      '&:disabled, &.disabled': {
-        [buttonStencil.vars.background]: system.color.bg.alt.softer,
-        [buttonStencil.vars.border]: system.color.border.container,
-        [systemIconStencil.vars.color]: system.color.icon.soft,
-      },
-    },
-
-    '&:focus-visible, &.focus': {
-      borderRadius: system.shape.x1,
-      zIndex: 1,
-      animation: 'none',
-      transition: 'all 120ms border-radius 1ms',
-    },
-  },
-  modifiers: {
-    segmentedControlButtonSize: {
-      small: {
-        width: system.space.x8,
-        height: system.space.x8,
-      },
-      medium: {
-        width: system.space.x10,
-        height: system.space.x10,
-      },
-      large: {
-        width: calc.add(system.space.x10, system.space.x2),
-        height: calc.add(system.space.x10, system.space.x2),
-      },
-    },
-  },
-});
-
-/**
- * @deprecated ⚠️ `SegmentedControlButtonProps` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
- */
-export interface SegmentedControlButtonProps extends ButtonContainerProps {
-  toggled?: boolean;
-  icon: CanvasSystemIcon;
-  value?: string | number;
-  size?: 'small' | 'medium' | 'large';
-}
-
-/**
- * @deprecated ⚠️ `SegmentedControlButton` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
- */
-export const SegmentedControlButton = createComponent('button')({
-  displayName: 'Button',
-  Component: ({value, icon, toggled, ...props}: SegmentedControlButtonProps, ref, Element) => {
-    return (
-      <BaseButton
-        as={Element}
-        ref={ref}
-        aria-pressed={toggled}
-        value={value}
-        {...handleCsProp(
-          props,
-          segmentedControlButtonStencil({segmentedControlButtonSize: props.size || 'medium'})
-        )}
-      >
-        <BaseButton.Icon size={props.size || 'large'} icon={icon} />
-      </BaseButton>
-    );
-  },
-});