@workday/canvas-kit-preview-react 7.1.4 → 7.2.0-427-next.2

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 = getId(data.item);
+          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/segmented-control/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/commonjs/segmented-control",
+  "module": "../dist/es6/segmented-control",
+  "sideEffects": false,
+  "types": "../dist/es6/segmented-control"
+}

package/select/README.md

@@ -34,7 +34,7 @@ fully accessible (see below).
 
 ```tsx
 import * as React from 'react';
-import Select from '@workday/canvas-kit-preview-react/select';
+import {Select} from '@workday/canvas-kit-preview-react/select';
 
 function Example() {
   const options = [
@@ -58,8 +58,8 @@ function Example() {
 
 ```tsx
 import * as React from 'react';
-import Select from '@workday/canvas-kit-preview-react/select';
-import FormField from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 function Example() {
   const options = [
@@ -89,8 +89,8 @@ function Example() {
 
 ```tsx
 import * as React from 'react';
-import Select from '@workday/canvas-kit-preview-react/select';
-import FormField from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 function Example() {
   const options = ['California', 'Florida', 'New York', 'Pennsylvania', 'Texas'];
@@ -117,8 +117,8 @@ used to customize how each option is rendered.
 
 ```tsx
 import * as React from 'react';
-import Select from '@workday/canvas-kit-preview-react/select';
-import FormField from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {colors, typeColors} from '@workday/canvas-kit-react/tokens';
 import {
   activityStreamIcon,

package/select/index.ts

@@ -1,7 +1,3 @@
-import Select from './lib/Select';
-
-export default Select;
-export {Select};
 export * from './lib/Select';
 
 export {

package/select/lib/Select.tsx

@@ -7,7 +7,7 @@ import {
   generateUniqueId,
 } from '@workday/canvas-kit-react/common';
 import {menuAnimationDuration} from './SelectMenu';
-import SelectBase, {CoreSelectBaseProps, Option, NormalizedOption} from './SelectBase';
+import {SelectBase, CoreSelectBaseProps, Option, NormalizedOption} from './SelectBase';
 import {MenuVisibility} from './types';
 import {getCorrectedIndexByValue} from './utils';
 
@@ -587,5 +587,3 @@ export const Select = createComponent('button')({
     ErrorType,
   },
 });
-
-export default Select;

package/select/lib/SelectBase.tsx

@@ -20,8 +20,8 @@ import {
 import {caretDownSmallIcon} from '@workday/canvas-system-icons-web';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 
-import SelectMenu from './SelectMenu';
-import SelectOption from './SelectOption';
+import {SelectMenu} from './SelectMenu';
+import {SelectOption} from './SelectOption';
 import {scrollIntoViewIfNeeded} from './scrolling';
 import {MenuPlacement, MenuVisibility} from './types';
 import {getCorrectedIndexByValue} from './utils';
@@ -288,7 +288,7 @@ const defaultRenderSelected: RenderSelectedFunction = option => {
   return option.label;
 };
 
-const SelectBase = ({
+export const SelectBase = ({
   'aria-labelledby': ariaLabelledBy,
   'aria-required': ariaRequired,
   as,
@@ -475,5 +475,3 @@ const SelectBase = ({
     </SelectWrapper>
   );
 };
-
-export default SelectBase;

package/select/lib/SelectMenu.tsx

@@ -223,7 +223,7 @@ const generatePopperOptions = (
   };
 };
 
-const SelectMenu = ({
+export const SelectMenu = ({
   buttonRef,
   children,
   error,
@@ -294,5 +294,3 @@ const SelectMenu = ({
     </Popper>
   );
 };
-
-export default SelectMenu;

package/select/lib/SelectOption.tsx

@@ -105,7 +105,7 @@ const Option = styled('li')<SelectOptionProps>(
   })
 );
 
-const SelectOption = ({
+export const SelectOption = ({
   children,
   focused = false,
   interactive = true,
@@ -126,5 +126,3 @@ const SelectOption = ({
     </Option>
   );
 };
-
-export default SelectOption;

package/select/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/select",
   "module": "../dist/es6/select",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/select"
 }

package/side-panel/index.ts

@@ -1,6 +1,2 @@
-import SidePanel from './lib/SidePanel';
-
-export default SidePanel;
-export {SidePanel};
 export * from './lib/hooks';
 export * from './lib/SidePanel';

package/side-panel/lib/SidePanel.tsx

@@ -1,23 +1,16 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import * as React from 'react';
-import {styled, useIsRTL} from '@workday/canvas-kit-react/common';
-import {css, jsx, keyframes, CSSObject} from '@emotion/react';
-import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
-import {space, colors, depth} from '@workday/canvas-kit-react/tokens';
-import {transformationImportIcon} from '@workday/canvas-system-icons-web';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {createComponent, styled} from '@workday/canvas-kit-react/common';
+import {jsx, keyframes, CSSObject} from '@emotion/react';
+import {colors, depth} from '@workday/canvas-kit-react/tokens';
+import {SidePanelContext} from './hooks';
+import {SidePanelToggleButton} from './SidePanelToggleButton';
 
 export type SidePanelVariant = 'standard' | 'alternate';
 export type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
 
-export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * The element the side panel will render as (e.g. 'div').
-   *
-   * @default 'section'
-   */
-  as?: React.ElementType;
+export interface SidePanelProps {
   /**
    * The width of the component (in `px` if it's a `number`) when it is collapsed.
    *
@@ -67,6 +60,9 @@ export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
    * @param boolean
    */
   touched: boolean;
+  children?: React.ReactNode;
+  onAnimationStart?: React.AnimationEventHandler<HTMLElement>;
+  onAnimationEnd?: React.AnimationEventHandler<HTMLElement>;
 }
 
 const createKeyframes = (from: number | string, to: number | string) => {
@@ -98,173 +94,126 @@ const containerVariantStyle: Record<SidePanelVariant, CSSObject> = {
   },
 };
 
-const Panel = styled('section')<Pick<SidePanelProps, 'as'>>({
+const Panel = styled('section')({
   overflow: 'hidden',
   position: 'relative',
   boxSizing: 'border-box',
   height: '100%',
 });
 
-export const SidePanelContext = React.createContext({
-  state: 'expanded',
-  origin: 'left',
-});
-
-const SidePanel = ({
-  as = 'section',
-  children,
-  collapsedWidth = 64,
-  expanded = true,
-  expandedWidth = 320,
-  onAnimationEnd,
-  onAnimationStart,
-  onExpandedChange,
-  onStateTransition,
-  origin = 'left',
-  variant = 'standard',
-  touched,
-  ...elemProps
-}: SidePanelProps) => {
-  const [state, setState] = React.useState<SidePanelTransitionStates>(
-    expanded ? 'expanded' : 'collapsed'
-  );
-
-  React.useEffect(() => {
-    if (typeof onExpandedChange !== 'undefined') {
-      onExpandedChange(expanded);
-    }
-  }, [expanded, onExpandedChange]);
-
-  React.useEffect(() => {
-    if (typeof onStateTransition !== 'undefined') {
-      onStateTransition(state);
-    }
-  }, [state, onStateTransition]);
-
-  const motion = {
-    collapse: createKeyframes(expandedWidth, collapsedWidth),
-    expand: createKeyframes(collapsedWidth, expandedWidth),
-  };
-
-  const handleAnimationEnd = (event: React.AnimationEvent<HTMLDivElement>) => {
-    if (event.currentTarget === event.target) {
-      if (event.animationName === motion.collapse.name) {
-        setState('collapsed');
+export const SidePanel = createComponent('section')({
+  displayName: 'SidePanel',
+  Component(
+    {
+      children,
+      collapsedWidth = 64,
+      expanded = true,
+      expandedWidth = 320,
+      onAnimationEnd,
+      onAnimationStart,
+      onExpandedChange,
+      onStateTransition,
+      origin = 'left',
+      variant = 'standard',
+      touched,
+      ...elemProps
+    }: SidePanelProps,
+    ref,
+    Element
+  ) {
+    const [state, setState] = React.useState<SidePanelTransitionStates>(
+      expanded ? 'expanded' : 'collapsed'
+    );
+
+    React.useEffect(() => {
+      if (typeof onExpandedChange !== 'undefined') {
+        onExpandedChange(expanded);
       }
+    }, [expanded, onExpandedChange]);
 
-      if (event.animationName === motion.expand.name) {
-        setState('expanded');
+    React.useEffect(() => {
+      if (typeof onStateTransition !== 'undefined') {
+        onStateTransition(state);
       }
-    }
-
-    if (typeof onAnimationEnd !== 'undefined') {
-      onAnimationEnd(event);
-    }
-  };
-
-  const handleAnimationStart = (event: React.AnimationEvent<HTMLDivElement>) => {
-    if (event.currentTarget === event.target) {
-      if (
-        event.animationName === motion.collapse.name ||
-        event.animationName === motion.expand.name
-      ) {
-        setState(expanded ? 'expanding' : 'collapsing');
+    }, [state, onStateTransition]);
+
+    const motion = {
+      collapse: createKeyframes(expandedWidth, collapsedWidth),
+      expand: createKeyframes(collapsedWidth, expandedWidth),
+    };
+
+    const handleAnimationEnd = (event: React.AnimationEvent<HTMLDivElement>) => {
+      if (event.currentTarget === event.target) {
+        if (event.animationName === motion.collapse.name) {
+          setState('collapsed');
+        }
+
+        if (event.animationName === motion.expand.name) {
+          setState('expanded');
+        }
       }
-    }
 
-    if (typeof onAnimationStart !== 'undefined') {
-      onAnimationStart(event);
-    }
-  };
+      if (typeof onAnimationEnd !== 'undefined') {
+        onAnimationEnd(event);
+      }
+    };
+
+    const handleAnimationStart = (event: React.AnimationEvent<HTMLDivElement>) => {
+      if (event.currentTarget === event.target) {
+        if (
+          event.animationName === motion.collapse.name ||
+          event.animationName === motion.expand.name
+        ) {
+          setState(expanded ? 'expanding' : 'collapsing');
+        }
+      }
 
-  return (
-    <Panel
-      as={as}
-      css={[
-        {
-          width: expanded ? expandedWidth : collapsedWidth,
-          maxWidth: expanded ? expandedWidth : collapsedWidth,
-          // mounted.current will be false on the first render, thus you won't get an unwanted animation here
-          // Will animate again if you force a re-render (like in Storybook)
-          animation: touched
-            ? `${expanded ? motion.expand : motion.collapse} 200ms ease-out`
-            : undefined,
-        },
-        containerVariantStyle[variant],
-      ]}
-      onAnimationEnd={handleAnimationEnd}
-      onAnimationStart={handleAnimationStart}
-      {...elemProps}
-    >
-      <SidePanelContext.Provider
-        value={{
-          state,
-          origin,
-        }}
+      if (typeof onAnimationStart !== 'undefined') {
+        onAnimationStart(event);
+      }
+    };
+
+    return (
+      <Panel
+        ref={ref}
+        as={Element}
+        css={[
+          {
+            width: expanded ? expandedWidth : collapsedWidth,
+            maxWidth: expanded ? expandedWidth : collapsedWidth,
+            // mounted.current will be false on the first render, thus you won't get an unwanted animation here
+            // Will animate again if you force a re-render (like in Storybook)
+            animation: touched
+              ? `${expanded ? motion.expand : motion.collapse} 200ms ease-out`
+              : undefined,
+          },
+          containerVariantStyle[variant],
+        ]}
+        onAnimationEnd={handleAnimationEnd}
+        onAnimationStart={handleAnimationStart}
+        {...elemProps}
       >
-        {children}
-      </SidePanelContext.Provider>
-    </Panel>
-  );
-};
-
-export type ToggleButtonProps = TertiaryButtonProps & {
-  /**
-   * The tooltip text to expand the side panel
-   * @default 'Expand'
-   */
-  tooltipTextExpand?: string;
-  /**
-   * The tooltip text to collapse the side panel
-   * @default 'Collapse'
-   */
-  tooltipTextCollapse?: string;
-};
-
-/**
- * A toggle button styled specifically for the side panel container.
- */
-const ToggleButton = ({
-  variant = undefined,
-  icon = transformationImportIcon,
-  tooltipTextExpand: expandLabel = 'Expand',
-  tooltipTextCollapse: collapseLabel = 'Collapse',
-  ...rest
-}: ToggleButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
-  const context = React.useContext(SidePanelContext);
-
-  const useRTLOrigin = () => {
-    const isRTL = useIsRTL();
-    // if the direction is set to RTl, flip the origin
-    if (isRTL) {
-      return context.origin === 'left' ? 'right' : 'left';
-    }
-    // Otherwise, default to returning the origin
-    return context.origin;
-  };
-
-  const rtlOrigin = useRTLOrigin();
-
-  // Note: Depending on the collapsed width, the button could "jump" to it's final position.
-  const buttonStyle = css({
-    position: 'absolute',
-    top: space.m,
-    width: space.l,
-    right: context.state === 'collapsed' ? 0 : rtlOrigin === 'left' ? space.s : undefined,
-    left: context.state === 'collapsed' ? 0 : rtlOrigin === 'right' ? space.s : undefined,
-    margin: context.state === 'collapsed' ? 'auto' : 0, // to override the -8px margin for TertiaryButton.Plain
-    transform:
-      context.state === 'collapsed' || context.state === 'collapsing'
-        ? `scaleX(${rtlOrigin === 'left' ? '1' : '-1'})`
-        : `scaleX(${rtlOrigin === 'left' ? '-1' : '1'})`,
-  });
-
-  return (
-    <Tooltip title={context.state === 'collapsed' ? expandLabel : collapseLabel} type="muted">
-      <TertiaryButton type="button" css={buttonStyle} icon={icon} variant={variant} {...rest} />
-    </Tooltip>
-  );
-};
-
-SidePanel.ToggleButton = ToggleButton;
-export default SidePanel;
+        <SidePanelContext.Provider
+          value={{
+            state,
+            origin,
+          }}
+        >
+          {children}
+        </SidePanelContext.Provider>
+      </Panel>
+    );
+  },
+  subComponents: {
+    /**
+     * `SidePanel.ToggleButton` is a control that is meant to toggle between `expanded = true` and
+     * `expanded = false` states. It must be used within the `SidePanel` component as a child. Use
+     * in conjunction with `useSidePanel`'s `controlProps`, otherwise it does not come with explicit
+     * `onClick` handlers.
+     *
+     * For accessibility purposes, it must be the first focusable element. We recommend that you
+     * keep it as the first child of `SidePanel`
+     */
+    ToggleButton: SidePanelToggleButton,
+  },
+});

package/side-panel/lib/SidePanelToggleButton.tsx

@@ -0,0 +1,78 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import * as React from 'react';
+import {createComponent, ExtractProps, useIsRTL} from '@workday/canvas-kit-react/common';
+import {css, jsx} from '@emotion/react';
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
+import {space} from '@workday/canvas-kit-react/tokens';
+import {transformationImportIcon} from '@workday/canvas-system-icons-web';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {SidePanelContext} from './hooks';
+
+export interface SidePanelToggleButtonProps extends ExtractProps<typeof TertiaryButton, never> {
+  /**
+   * The tooltip text to expand the side panel
+   */
+  tooltipTextExpand?: string;
+  /**
+   * The tooltip text to collapse the side panel
+   */
+  tooltipTextCollapse?: string;
+}
+
+/**
+ * A toggle button styled specifically for the side panel container.
+ */
+export const SidePanelToggleButton = createComponent('button')({
+  displayName: 'SidePanel.ToggleButton',
+  Component({
+    variant = undefined,
+    icon = transformationImportIcon,
+    tooltipTextExpand = 'Expand',
+    tooltipTextCollapse = 'Collapse',
+    ...elemProps
+  }: SidePanelToggleButtonProps) {
+    const context = React.useContext(SidePanelContext);
+
+    const useRTLOrigin = () => {
+      const isRTL = useIsRTL();
+      // if the direction is set to RTl, flip the origin
+      if (isRTL) {
+        return context.origin === 'left' ? 'right' : 'left';
+      }
+      // Otherwise, default to returning the origin
+      return context.origin;
+    };
+
+    const rtlOrigin = useRTLOrigin();
+
+    // Note: Depending on the collapsed width, the button could "jump" to it's final position.
+    const buttonStyle = css({
+      position: 'absolute',
+      top: space.m,
+      width: space.l,
+      right: context.state === 'collapsed' ? 0 : rtlOrigin === 'left' ? space.s : undefined,
+      left: context.state === 'collapsed' ? 0 : rtlOrigin === 'right' ? space.s : undefined,
+      margin: context.state === 'collapsed' ? 'auto' : 0, // to override the -8px margin for TertiaryButton.Plain
+      transform:
+        context.state === 'collapsed' || context.state === 'collapsing'
+          ? `scaleX(${rtlOrigin === 'left' ? '1' : '-1'})`
+          : `scaleX(${rtlOrigin === 'left' ? '-1' : '1'})`,
+    });
+
+    return (
+      <Tooltip
+        title={context.state === 'collapsed' ? tooltipTextExpand : tooltipTextCollapse}
+        type="muted"
+      >
+        <TertiaryButton
+          type="button"
+          css={buttonStyle}
+          icon={icon}
+          variant={variant}
+          {...elemProps}
+        />
+      </Tooltip>
+    );
+  },
+});

package/side-panel/lib/hooks.ts

@@ -1,5 +1,10 @@
 import * as React from 'react';
 
+export const SidePanelContext = React.createContext({
+  state: 'expanded',
+  origin: 'left',
+});
+
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 /**
  * The optional config options for the `useSidePanel` hook
@@ -77,6 +82,21 @@ export interface ControlProps {
   onClick: () => void;
 }
 
+/**
+ *
+ * This hook manages the state and `aria-` attributes for the SidePanel. It takes an optional
+ * configuration object:
+ *
+ * ```tsx
+ * import {useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
+ *
+ * const {expanded, setExpanded, panelProps, labelProps, controlProps} = useSidePanel({
+ *   initialExpanded: false,
+ *   panelId: 'custom-panel-id',
+ *   labelId: 'custom-label-id',
+ * });
+ * ```
+ */
 export const useSidePanel = (config?: UseSidePanelProps) => {
   const [touched, setTouched] = React.useState(false);
   const configParams = config

package/side-panel/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/side-panel",
   "module": "../dist/es6/side-panel",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/side-panel"
 }