@workday/canvas-kit-react 9.0.0-alpha.368-next.6 → 9.0.0-alpha.384-next.3

package/action-bar/lib/ActionBarList.tsx

@@ -4,7 +4,7 @@ import {commonColors, colors, space} from '@workday/canvas-kit-react/tokens';
 import {
   createSubcomponent,
   ExtractProps,
-  getCanvasTheme,
+  getTheme,
   styled,
   StyledType,
 } from '@workday/canvas-kit-react/common';
@@ -37,7 +37,7 @@ export interface ActionBarListProps<T = any>
 }
 
 const ResponsiveList = styled(Flex)<ActionBarListProps & StyledType>(({theme}) => {
-  const canvasTheme = getCanvasTheme(theme);
+  const {canvas: canvasTheme} = getTheme(theme);
   return {
     [canvasTheme.breakpoints.down('s')]: {
       padding: space.s,

package/banner/lib/hooks/index.ts

@@ -1,6 +1,8 @@
+import {getPaletteColors} from './useThemedPalette';
 export * from './useBannerModel';
 export * from './useThemedPalette';
 export * from './useBannerIcon';
 export * from './useBannerLabel';
 export * from './useBannerActionText';
 export * from './useBanner';
+export {getPaletteColors};

package/banner/lib/hooks/useThemedPalette.ts

@@ -27,10 +27,10 @@ const getPaletteColorsFromTheme = (
   };
 };
 
-export function getPaletteColors(
+export const getPaletteColors = (
   type: paletteSelection,
   theme: EmotionCanvasTheme
-): BackgroundColors {
+): BackgroundColors => {
   const palette = theme.canvas.palette[type];
 
   switch (type) {
@@ -44,7 +44,7 @@ export function getPaletteColors(
       return getPaletteColorsFromTheme(palette);
     }
   }
-}
+};
 
 export const useThemedPalette = (type: paletteSelection) => {
   const theme = useTheme();

package/common/lib/theming/README.md

@@ -241,6 +241,103 @@ window.workday = {
 If the theme is not available via a context, Canvas Kit components will attempt to pull it from this
 variable before falling back to the default theme.
 
+## Accessing the theme value
+
+Canvas Kit provides two functions to access the current theme, `getTheme` and `useTheme`. If you
+need to access the theme within a function component, use the hook, `useTheme`. If you need to
+access the theme within a `styled` component, a class component, or outside a component, use
+`getTheme`. The main difference is `useTheme` is intended to work within the `CanvasProvider` and
+will check the `ThemeContext` for the theme first. Both functions check the window for the theme and
+fall back to the default theme is nothing is found. Both functions will return a full theme object
+in this shape:
+
+**Return value**
+
+```tsx
+{
+  canvas: {
+    palette: {
+      // ...
+    },
+    breakpoints: {
+      // ...
+    },
+    direction: ContentDirection.LTR,
+  },
+  // other themes can be placed here
+}
+```
+
+### getTheme
+
+`getTheme` is a function that returns the full theme object with the Canvas Kit theme under the
+`canvas` key. It should be used with `styled` components, class components, or outside components.
+
+Below is an example of how to use `getTheme` to build responsive media query styles with the
+breakpoint functions provided in the theme.
+
+```tsx
+import {getTheme} from '@workday/canvas-kit-react/common';
+
+const theme = getTheme();
+const {up, down} = theme.canvas.breakpoints;
+const small = down('m'); // Returns '@media (max-width: 768px)'
+const medium = up('m'); // Returns '@media (min-width: 768px)'
+const styles = {
+  [small]: {
+    margin: space.m,
+  },
+  [medium]: {
+    margin: space.l,
+  },
+};
+```
+
+### useTheme
+
+`useTheme` is hook to get the full theme object. It should be used only with functional compoents
+wrapped in ContextProvider. Function returns a theme object with the Canvas Kit theme under the
+canvas key.
+
+`useTheme` should be used only inside functional component otherwise it will show a warning if the
+theme context value has not been found. In that case you will need to use `getTheme`.
+
+Below is an example showing how to use `useTheme` in a function component to set `Subtext`'s color
+to the error color provided by the theme.
+
+```tsx
+export const ErrorMessage = () => {
+  const theme = useTheme();
+  return (
+    <Subtext size="large" color={theme.canvas.palette.error.main}>
+  )
+}
+```
+
+### Overwriting the theme
+
+You can also use both functions to overwrite the theme object by providing a partial or full theme
+object to overwrite the current theme. In the example below, we're setting a custom content
+direction, which can be passed to either `useTheme` or `getTheme`. These functions will properly
+merge your the partial theme with the default Canvas theme and return a complete theme object.
+
+```tsx
+import {ContentDirection, useTheme, getTheme} from '@workday/canvas-kit-react/common';
+
+const customTheme = {
+  canvas: {
+    // set the content direction to right-to-left
+    direction: ContentDirection.RTL,
+  },
+};
+
+// Overwriting the theme with useTheme
+const customTheme = useTheme(customTheme);
+
+// Overwriting the theme with getTheme
+const customTheme = getTheme(customTheme);
+```
+
 ## Breakpoints
 
 Breakpoints are used by media queries to conditionally apply or modify styles based on the viewport

package/common/lib/theming/index.ts

@@ -4,6 +4,6 @@ export * from './types';
 export {default as styled, StyleRewriteFn} from './styled';
 export * from './theme';
 export * from './useTheme';
+export * from './useThemedRing';
 export * from './useIsRTL';
-export * from './getCanvasTheme';
 export * from './getObjectProxy';

package/common/lib/theming/useTheme.ts

@@ -1,3 +1,6 @@
+// refactor for v5
+/// <reference types="@types/node" />
+
 import {useTheme as useEmotionTheme} from '@emotion/react';
 import {
   defaultCanvasTheme,
@@ -12,12 +15,61 @@ const getFilledTheme = (theme: PartialEmotionCanvasTheme) => ({
 });
 
 /**
- * Hook function to get the correct theme object.
- * @param {Object=} theme - The theme object returned from the emotion ThemeContext
- * (through ThemeProvider). The Canvas Kit theme is namespaced within this variable under the `canvas` key.
+ * Function to get the correct theme object for `styled` and class components
+ * or to be used outside component.
+ * @param {Object=} theme - The theme object with the Canvas Kit theme.
+ * It should be namespaced within this variable under the `canvas` key.
+ * Value of `canvas` property is any partial or full theme object to overwtite default theme.
+ *
+ * @returns An object containing updated or default Canvas Kit theme under `canvas` key.
+ *
+ * The passed partial theme object will be merged with the default Canvas theme
+ * (using memoized createCanvasTheme()) to establish any missing fields that have
+ * not been defined by the consumer's theme object.
+ *
+ * If theme is not passed, the function will try to retrieve it from the window object.
+ * If window theme is not found, it will return the default Canvas theme.
+ *
+ * @example
+ * import {getTheme} from '@workday/canvas-kit-react/common';
+ *
+ * const theme = getTheme();
+ * const {up, down} = theme.canvas.breakpoints;
+ * const small = down('m'); // Returns '@media (max-width: 768px)'
+ * const medium = up('m'); // Returns '@media (min-width: 768px)'
+ *
+ * const styles = {
+ *  [small]: {
+ *    margin: space.m
+ *  },
+ *  [medium]: {
+ *    margin: space.l
+ *  }
+ * }
+ */
+export function getTheme(theme?: PartialEmotionCanvasTheme): EmotionCanvasTheme {
+  if (theme?.canvas) {
+    return getFilledTheme(theme);
+  }
+
+  const windowTheme = typeof window !== 'undefined' && (window as any)?.workday?.canvas?.theme;
+
+  if (windowTheme) {
+    return getFilledTheme({canvas: windowTheme});
+  }
+
+  return {canvas: defaultCanvasTheme};
+}
+
+/**
+ * Hook function to get the correct theme object for functional components.
+ * @param {Object=} theme - The theme object with the Canvas Kit theme.
+ * It should be namespaced within this variable under the `canvas` key.
+ * Value of `canvas` property is any partial or full theme object to overwtite default theme.
+ *
+ * @returns An object containing updated or default Canvas Kit theme under `canvas` key.
  *
- * NOTE: If you are using a class component, you MUST pass the theme.
- * If not passed, the function will try to pull the theme from ThemeContext.
+ * NOTE: If theme is not passed, the function will try to pull the theme from ThemeContext.
  * If that does not work, it will try to retrieve it from the window object.
  * As a last resort, it will return the default Canvas theme.
  *
@@ -28,26 +80,31 @@ const getFilledTheme = (theme: PartialEmotionCanvasTheme) => ({
  * Providing the default theme here is currently a work around for when no
  * ThemeProvider or context exists.
  * Tracked on https://github.com/emotion-js/emotion/issues/1193.
+ *
+ * @example
+ * export const ErrorMessage = () => {
+ *  const theme = useTheme();
+ *  return (
+ *    <Subtext size="large" color={theme.canvas.palette.error.main}>
+ *  );
+ * }
  */
 export function useTheme(theme?: PartialEmotionCanvasTheme): EmotionCanvasTheme {
-  if (theme && theme.canvas) {
-    return getFilledTheme(theme);
-  }
-
-  try {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const contextTheme = useEmotionTheme() as EmotionCanvasTheme;
-    if (contextTheme && contextTheme.canvas) {
-      return getFilledTheme(contextTheme);
+  if (!theme) {
+    try {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const contextTheme = useEmotionTheme() as EmotionCanvasTheme;
+      if (contextTheme?.canvas) {
+        return getFilledTheme(contextTheme);
+      }
+    } catch (e) {
+      if (process && process.env.NODE_ENV === 'development') {
+        console.warn(
+          'useTheme: Context not supported or invalid. Please consider using `getTheme` function instead for `styled` or class components.'
+        );
+      }
     }
-  } catch (e) {
-    // Context not supported or invalid (probably called from within a class component)
-  }
-
-  const windowTheme = typeof window !== 'undefined' && (window as any)?.workday?.canvas?.theme;
-  if (windowTheme) {
-    return getFilledTheme({canvas: windowTheme});
   }
 
-  return {canvas: defaultCanvasTheme};
+  return getTheme(theme);
 }

package/common/lib/theming/useThemedRing.ts

@@ -0,0 +1,114 @@
+import {CanvasThemePalette, EmotionCanvasTheme, useTheme} from '@workday/canvas-kit-react/common';
+import {colors, CSSProperties, inputColors, statusColors} from '@workday/canvas-kit-react/tokens';
+
+import chroma from 'chroma-js';
+
+type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
+interface ContrastColors {
+  outer?: string;
+  inner?: string;
+}
+
+const isAccessible = (foreground: string, background: string = colors.frenchVanilla100) => {
+  return chroma.contrast(foreground, background) >= 3;
+};
+
+const getPaletteColorsFromTheme = (
+  palette: CanvasThemePalette,
+  fallbackColors?: ContrastColors
+): ContrastColors => {
+  return {
+    outer: isAccessible(palette.main)
+      ? palette.main
+      : isAccessible(palette.darkest)
+      ? palette.darkest
+      : fallbackColors?.outer,
+    inner: fallbackColors?.inner ? fallbackColors.inner : palette.main,
+  };
+};
+
+export function getPaletteColorsForFocusRing(
+  type: paletteSelection,
+  theme: EmotionCanvasTheme
+): ContrastColors {
+  const palette = theme.canvas.palette[type];
+
+  switch (type) {
+    case 'error': {
+      return getPaletteColorsFromTheme(palette, {outer: inputColors.error.border});
+    }
+    case 'alert': {
+      return getPaletteColorsFromTheme(palette, {outer: colors.cantaloupe600});
+    }
+    case 'success': {
+      return getPaletteColorsFromTheme(palette, {
+        outer: colors.greenApple600,
+        // The theme default for success.main is set to the darkest GreenApple
+        // For our default ring, we need to override it so the inner ring is a bit lighter
+        inner: palette.main === colors.greenApple600 ? statusColors.success : palette.main,
+      });
+    }
+    default: {
+      return getPaletteColorsFromTheme(palette);
+    }
+  }
+}
+
+/**
+ * This is a way to automatically add themed colors to your input and is helpful when showing alerts, success or errors to users.
+ * It supports `error`, `alert`, and `success` states. It will try and use the corresponding
+ * `main` colors from your `CanvasThemePalette` unless they do not meet accessibility contrast, in
+ * which case the outer ring will use the `darkest` color. This hook will also show a `focusOutline`
+ * ring when the input is focused. Note: You should not rely on these colors alone to differentiate
+ * alerts, but use them in combination with icons or hint text.
+ * ```tsx
+ * // Add here jsx pragma to use css
+ * import {jsx} from '@emotion/core';
+ * import React from 'react';
+ * import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+ * import {useThemedRing} from '@workday/canvas-kit-react/common';
+ *
+ * export const MyInput = ({handleChange}) => {
+ *  const [value, setValue] = React.useState('invalid@email');
+ *  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ *    setValue(event.target.value);
+ *  };
+ *
+ *  const alertStyles = useThemedRing('alert');
+ *
+ *  return (
+ *    <TextInput>
+ *     <TextInput.Label>Email</TextInput.Label>
+ *      <TextInput.Field css={alertStyles} onChange={handleChange} value={value} />
+ *      <TextInput.Hint>Please enter a valid email.</TextInput.Hint>
+ *    </TextInput>
+ *  );
+ * };
+ *```
+ */
+export const useThemedRing = (type: paletteSelection): CSSProperties => {
+  const theme = useTheme();
+
+  const paletteColors = getPaletteColorsForFocusRing(type, theme);
+  if (!(paletteColors?.outer || paletteColors?.inner)) {
+    return {};
+  }
+  const errorBoxShadow = `inset 0 0 0 ${paletteColors.outer === paletteColors.inner ? 1 : 2}px ${
+    paletteColors.inner
+  }`;
+
+  return {
+    borderColor: paletteColors.outer,
+    transition: '100ms box-shadow',
+    boxShadow: errorBoxShadow,
+    '&:hover, &:disabled': {
+      borderColor: paletteColors.outer,
+    },
+    '&:focus:not([disabled])': {
+      borderColor: paletteColors.outer,
+      boxShadow: `${errorBoxShadow},
+        0 0 0 2px ${colors.frenchVanilla100},
+        0 0 0 4px ${theme ? theme.canvas.palette.common.focusOutline : inputColors.focusBorder}`,
+    },
+  };
+};

package/common/lib/utils/colorUtils.ts

@@ -1,6 +1,18 @@
-import {colors} from '@workday/canvas-kit-react/tokens';
+import {CanvasColor, colors} from '@workday/canvas-kit-react/tokens';
 import chroma from 'chroma-js';
 
+/**
+ * The function takes in a color string or an enum value of CanvasColor and returns its hex value color.
+ * @param value a string or an enum value of CanvasColor
+ * @returns the hex value color
+ */
+export function getColor(value?: CanvasColor | string) {
+  if (value! in colors) {
+    return colors[value as keyof typeof colors];
+  }
+  return value;
+}
+
 // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
 export const expandHex = (hex: string) => {
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
@@ -31,16 +43,17 @@ export const pickForegroundColor = (
   darkColor?: string,
   lightColor?: string
 ) => {
-  if (chroma.valid(background)) {
-    if (lightColor && chroma.contrast(background, lightColor) >= 4.5) {
-      return lightColor;
-    } else if (darkColor && chroma.contrast(background, darkColor) >= 4.5) {
-      return darkColor;
+  const [bg, dark, light] = [getColor(background), getColor(darkColor), getColor(lightColor)];
+  if (bg && chroma.valid(bg)) {
+    if (light && chroma.contrast(bg, light) >= 4.5) {
+      return light;
+    } else if (dark && chroma.contrast(bg, dark) >= 4.5) {
+      return dark;
     } else {
       for (let i = 0; i < colorPriority.length; i++) {
         const color = colorPriority[i];
 
-        if (chroma.contrast(background, color) >= 4.5) {
+        if (chroma.contrast(bg, color) >= 4.5) {
           return color;
         }
       }

package/common/lib/utils/components.ts

@@ -32,6 +32,10 @@ type ExtractRef<T> = T extends undefined // test if T was even passed in
         ? U extends keyof ElementTagNameMap // test inferred U to see if it extends an element string
           ? ElementTagNameMap[U] // if yes, use the inferred U and convert to an element interface. `'button' => HTMLButtonElement`
           : U // if no, fall back to inferred U. Hopefully it is already an element interface
+        : T extends React.FC<{ref?: infer R}> // test if T extends a React functional component with a ref (Emotion's styled components do this)
+        ? R extends React.RefObject<infer E> // if yes, extract the element interface. This step unwraps the ref. Otherwise we'll get React.Ref<React.Ref<Element>>
+          ? E // if yes, use the inferred E
+          : never // never here prevents double refs. Basically the return would be React.Ref<E | {this value}>. I'm not entirely sure why...
         : T // if no, fall back to T. Hopefully it is already an element interface
     >;
 

package/common/lib/utils/memoize.ts

@@ -2,7 +2,7 @@
  * Simple memoize function. It takes a function and a resolver function to generate a
  * cache key
  */
-export function memoize<T extends (...args: any) => any>(
+export function memoize<T extends (...args: any[]) => any>(
   func: T,
   resolver: (...args: Parameters<T>) => string
 ): T {

package/dist/commonjs/action-bar/lib/ActionBar.js

@@ -20,13 +20,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionBar = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var menu_1 = require("@workday/canvas-kit-react/menu");
-var useActionBarModel_1 = require("./useActionBarModel");
-var ActionBarList_1 = require("./ActionBarList");
-var ActionBarOverflowButton_1 = require("./ActionBarOverflowButton");
-var ActionBarItem_1 = require("./ActionBarItem");
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const menu_1 = require("@workday/canvas-kit-react/menu");
+const useActionBarModel_1 = require("./useActionBarModel");
+const ActionBarList_1 = require("./ActionBarList");
+const ActionBarOverflowButton_1 = require("./ActionBarOverflowButton");
+const ActionBarItem_1 = require("./ActionBarItem");
 /**
  * `ActionBar` is a container component that is responsible for creating an {@link ActionBarModel}
  * and sharing it with its subcomponents using React context. It does not represent a real element.
@@ -92,7 +92,6 @@ exports.ActionBar = common_1.createContainer()({
          */
         Menu: menu_1.Menu,
     },
-})(function (_a, _, model) {
-    var children = _a.children;
+})(({ children }, _, model) => {
     return React.createElement(menu_1.Menu, { model: model.menu }, children);
 });

package/dist/commonjs/action-bar/lib/ActionBarItem.js

@@ -1,15 +1,4 @@
 "use strict";
-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 __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]; } });
@@ -31,16 +20,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionBarItem = exports.useActionBarItem = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var button_1 = require("@workday/canvas-kit-react/button");
-var collection_1 = require("@workday/canvas-kit-react/collection");
-var useActionBarModel_1 = require("./useActionBarModel");
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const button_1 = require("@workday/canvas-kit-react/button");
+const collection_1 = require("@workday/canvas-kit-react/collection");
+const useActionBarModel_1 = require("./useActionBarModel");
 exports.useActionBarItem = common_1.composeHooks(collection_1.useOverflowListItemMeasure, collection_1.useListItemRegister);
 exports.ActionBarItem = common_1.createSubcomponent(button_1.SecondaryButton)({
     displayName: 'ActionBar.Item',
     modelHook: useActionBarModel_1.useActionBarModel,
     elemPropsHook: exports.useActionBarItem,
-})(function (elemProps, Element) {
-    return React.createElement(Element, __assign({}, elemProps));
+})((elemProps, Element) => {
+    return React.createElement(Element, Object.assign({}, elemProps));
 });

package/dist/commonjs/action-bar/lib/ActionBarList.js

@@ -1,15 +1,4 @@
 "use strict";
-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 __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]; } });
@@ -29,46 +18,32 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionBarList = exports.useActionBarList = void 0;
-var React = __importStar(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var layout_1 = require("@workday/canvas-kit-react/layout");
-var collection_1 = require("@workday/canvas-kit-react/collection");
-var useActionBarModel_1 = require("./useActionBarModel");
-var ResponsiveList = common_1.styled(layout_1.Flex)(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    var canvasTheme = common_1.getCanvasTheme(theme);
-    return _b = {},
-        _b[canvasTheme.breakpoints.down('s')] = {
+const React = __importStar(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const collection_1 = require("@workday/canvas-kit-react/collection");
+const useActionBarModel_1 = require("./useActionBarModel");
+const ResponsiveList = common_1.styled(layout_1.Flex)(({ theme }) => {
+    const { canvas: canvasTheme } = common_1.getTheme(theme);
+    return {
+        [canvasTheme.breakpoints.down('s')]: {
             padding: tokens_1.space.s,
             '> *': {
                 flex: 1,
             },
         },
-        _b;
+    };
 });
 exports.useActionBarList = collection_1.useOverflowListMeasure;
 exports.ActionBarList = common_1.createSubcomponent('div')({
     displayName: 'ActionBar.List',
     modelHook: useActionBarModel_1.useActionBarModel,
     elemPropsHook: exports.useActionBarList,
-})(function (_a, Element, model) {
-    var children = _a.children, overflowButton = _a.overflowButton, elemProps = __rest(_a, ["children", "overflowButton"]);
-    return (React.createElement(ResponsiveList, __assign({ as: Element, gap: "s", depth: 1, background: tokens_1.commonColors.background, borderTop: "solid 1px " + tokens_1.colors.soap400, padding: tokens_1.space.s + " " + tokens_1.space.xl + " ", position: "fixed", bottom: 0, left: 0, right: 0 }, elemProps),
+})(({ children, overflowButton, ...elemProps }, Element, model) => {
+    return (React.createElement(ResponsiveList, Object.assign({ as: Element, gap: "s", depth: 1, background: tokens_1.commonColors.background, borderTop: `solid 1px ${tokens_1.colors.soap400}`, padding: `${tokens_1.space.s} ${tokens_1.space.xl} `, position: "fixed", bottom: 0, left: 0, right: 0 }, elemProps),
         collection_1.useListRenderItems(model, children),
         overflowButton));
 });