@workday/canvas-kit-labs-react 7.0.0-alpha.0-next.0 → 7.0.0-alpha.0-next.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/combobox/lib/Combobox.tsx +5 -3
- package/common/README.md +10 -4
- package/common/lib/Box.tsx +26 -4
- package/common/lib/theming/useThemedRing.ts +9 -5
- package/common/lib/utils/other.ts +20 -0
- package/dist/commonjs/combobox/index.js +12 -4
- package/dist/commonjs/combobox/lib/AutocompleteList.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/AutocompleteList.js +19 -7
- package/dist/commonjs/combobox/lib/Combobox.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/Combobox.js +27 -12
- package/dist/commonjs/combobox/lib/Status.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/Status.js +14 -2
- package/dist/commonjs/common/index.js +15 -7
- package/dist/commonjs/common/lib/Box.d.ts +3 -2
- package/dist/commonjs/common/lib/Box.d.ts.map +1 -1
- package/dist/commonjs/common/lib/Box.js +31 -9
- package/dist/commonjs/common/lib/storybook-utils/ComponentStatesTable.d.ts.map +1 -1
- package/dist/commonjs/common/lib/storybook-utils/ComponentStatesTable.js +3 -1
- package/dist/commonjs/common/lib/storybook-utils/permutateProps.d.ts.map +1 -1
- package/dist/commonjs/common/lib/storybook-utils/permutateProps.js +3 -1
- package/dist/commonjs/common/lib/theming/index.js +12 -5
- package/dist/commonjs/common/lib/theming/useThemeRTL.d.ts.map +1 -1
- package/dist/commonjs/common/lib/theming/useThemeRTL.js +1 -0
- package/dist/commonjs/common/lib/theming/useThemedRing.d.ts +1 -1
- package/dist/commonjs/common/lib/theming/useThemedRing.d.ts.map +1 -1
- package/dist/commonjs/common/lib/theming/useThemedRing.js +8 -2
- package/dist/commonjs/common/lib/utils/border.js +1 -0
- package/dist/commonjs/common/lib/utils/color.js +1 -0
- package/dist/commonjs/common/lib/utils/depth.js +1 -0
- package/dist/commonjs/common/lib/utils/flexItem.js +1 -0
- package/dist/commonjs/common/lib/utils/layout.js +1 -0
- package/dist/commonjs/common/lib/utils/other.d.ts +5 -0
- package/dist/commonjs/common/lib/utils/other.d.ts.map +1 -0
- package/dist/commonjs/common/lib/utils/other.js +19 -0
- package/dist/commonjs/common/lib/utils/position.js +1 -0
- package/dist/commonjs/common/lib/utils/space.js +1 -0
- package/dist/commonjs/drawer/index.js +12 -4
- package/dist/commonjs/drawer/lib/Drawer.js +21 -8
- package/dist/commonjs/drawer/lib/DrawerHeader.js +20 -8
- package/dist/commonjs/header/index.js +14 -6
- package/dist/commonjs/header/lib/GlobalHeader.js +20 -8
- package/dist/commonjs/header/lib/Header.js +22 -10
- package/dist/commonjs/header/lib/parts/DubLogoTitle.js +16 -3
- package/dist/commonjs/header/lib/parts/WorkdayLogoTitle.js +21 -8
- package/dist/commonjs/header/lib/parts/index.js +3 -2
- package/dist/commonjs/header/lib/shared/themes.js +1 -0
- package/dist/commonjs/header/lib/shared/types.js +1 -0
- package/dist/commonjs/index.js +16 -9
- package/dist/commonjs/layout/index.js +12 -5
- package/dist/commonjs/layout/lib/Flex.d.ts +1 -1
- package/dist/commonjs/layout/lib/Flex.d.ts.map +1 -1
- package/dist/commonjs/layout/lib/Flex.js +20 -7
- package/dist/commonjs/layout/lib/Stack.d.ts +8 -8
- package/dist/commonjs/layout/lib/Stack.d.ts.map +1 -1
- package/dist/commonjs/layout/lib/Stack.js +26 -13
- package/dist/commonjs/layout/lib/utils/flex.js +1 -0
- package/dist/commonjs/layout/lib/utils/getValidChildren.js +15 -2
- package/dist/commonjs/layout/lib/utils/stack.js +1 -0
- package/dist/commonjs/search-form/index.js +12 -5
- package/dist/commonjs/search-form/lib/SearchForm.d.ts +3 -2
- package/dist/commonjs/search-form/lib/SearchForm.d.ts.map +1 -1
- package/dist/commonjs/search-form/lib/SearchForm.js +21 -8
- package/dist/commonjs/search-form/lib/themes.d.ts.map +1 -1
- package/dist/commonjs/search-form/lib/themes.js +1 -0
- package/dist/es6/combobox/lib/AutocompleteList.d.ts.map +1 -1
- package/dist/es6/combobox/lib/Combobox.d.ts.map +1 -1
- package/dist/es6/combobox/lib/Combobox.js +1 -1
- package/dist/es6/combobox/lib/Status.d.ts.map +1 -1
- package/dist/es6/common/lib/Box.d.ts +3 -2
- package/dist/es6/common/lib/Box.d.ts.map +1 -1
- package/dist/es6/common/lib/Box.js +12 -3
- package/dist/es6/common/lib/storybook-utils/ComponentStatesTable.d.ts.map +1 -1
- package/dist/es6/common/lib/storybook-utils/permutateProps.d.ts.map +1 -1
- package/dist/es6/common/lib/storybook-utils/propTypes.js +1 -0
- package/dist/es6/common/lib/theming/useThemeRTL.d.ts.map +1 -1
- package/dist/es6/common/lib/theming/useThemedRing.d.ts +1 -1
- package/dist/es6/common/lib/theming/useThemedRing.d.ts.map +1 -1
- package/dist/es6/common/lib/theming/useThemedRing.js +5 -1
- package/dist/es6/common/lib/utils/other.d.ts +5 -0
- package/dist/es6/common/lib/utils/other.d.ts.map +1 -0
- package/dist/es6/common/lib/utils/other.js +15 -0
- package/dist/es6/common/lib/utils/types.js +1 -0
- package/dist/es6/drawer/lib/Drawer.js +1 -1
- package/dist/es6/drawer/lib/DrawerHeader.js +1 -1
- package/dist/es6/header/lib/GlobalHeader.js +1 -1
- package/dist/es6/header/lib/Header.js +2 -2
- package/dist/es6/header/lib/parts/DubLogoTitle.js +1 -1
- package/dist/es6/header/lib/parts/WorkdayLogoTitle.js +1 -1
- package/dist/es6/layout/lib/Flex.d.ts +1 -1
- package/dist/es6/layout/lib/Flex.d.ts.map +1 -1
- package/dist/es6/layout/lib/Stack.d.ts +8 -8
- package/dist/es6/layout/lib/Stack.d.ts.map +1 -1
- package/dist/es6/layout/lib/Stack.js +6 -6
- package/dist/es6/layout/lib/utils/types.js +1 -0
- package/dist/es6/search-form/lib/SearchForm.d.ts +3 -2
- package/dist/es6/search-form/lib/SearchForm.d.ts.map +1 -1
- package/dist/es6/search-form/lib/SearchForm.js +1 -1
- package/dist/es6/search-form/lib/themes.d.ts.map +1 -1
- package/header/lib/Header.tsx +2 -2
- package/layout/lib/Stack.tsx +10 -26
- package/package.json +7 -7
- package/search-form/lib/SearchForm.tsx +3 -3
- package/search-form/lib/themes.ts +2 -1
- package/ts3.5/dist/commonjs/common/lib/Box.d.ts +3 -2
- package/ts3.5/dist/commonjs/common/lib/theming/useThemedRing.d.ts +1 -1
- package/ts3.5/dist/commonjs/common/lib/utils/other.d.ts +5 -0
- package/ts3.5/dist/commonjs/layout/lib/Flex.d.ts +1 -1
- package/ts3.5/dist/commonjs/layout/lib/Stack.d.ts +8 -8
- package/ts3.5/dist/commonjs/search-form/lib/SearchForm.d.ts +3 -2
- package/ts3.5/dist/es6/common/lib/Box.d.ts +3 -2
- package/ts3.5/dist/es6/common/lib/theming/useThemedRing.d.ts +1 -1
- package/ts3.5/dist/es6/common/lib/utils/other.d.ts +5 -0
- package/ts3.5/dist/es6/layout/lib/Flex.d.ts +1 -1
- package/ts3.5/dist/es6/layout/lib/Stack.d.ts +8 -8
- package/ts3.5/dist/es6/search-form/lib/SearchForm.d.ts +3 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, {useEffect, useLayoutEffect, useRef, useState, useCallback} from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import {jsx, keyframes, CSSObject} from '@emotion/react';
|
|
3
3
|
import {
|
|
4
4
|
GrowthBehavior,
|
|
5
5
|
useForkRef,
|
|
@@ -426,8 +426,10 @@ const Combobox = ({
|
|
|
426
426
|
[paddingDirection]: space.xl,
|
|
427
427
|
};
|
|
428
428
|
}
|
|
429
|
-
const newTextInputProps: Partial<
|
|
430
|
-
|
|
429
|
+
const newTextInputProps: Partial<
|
|
430
|
+
TextInputProps &
|
|
431
|
+
React.InputHTMLAttributes<HTMLInputElement> & {ref: React.Ref<HTMLInputElement>}
|
|
432
|
+
> & {css: CSSObject} = {
|
|
431
433
|
type: 'text',
|
|
432
434
|
id: componentId,
|
|
433
435
|
grow: grow,
|
package/common/README.md
CHANGED
|
@@ -31,6 +31,7 @@ together.
|
|
|
31
31
|
### Usage
|
|
32
32
|
|
|
33
33
|
```tsx
|
|
34
|
+
/** @jsxRuntime classic */
|
|
34
35
|
/** @jsx jsx */
|
|
35
36
|
import {jsx} from '@emotion/core';
|
|
36
37
|
import {ComponentStyles, useThemeRTL} from '@workday/canvas-kit-labs-react/common';
|
|
@@ -67,19 +68,23 @@ export const HelloWorld = ({backgroundImagePath}) => {
|
|
|
67
68
|
|
|
68
69
|
## useThemedRing
|
|
69
70
|
|
|
70
|
-
This is a way to automatically add themed colors to your inputs. This is helpful when showing alerts
|
|
71
|
-
|
|
71
|
+
This is a way to automatically add themed colors to your inputs. This is helpful when showing alerts
|
|
72
|
+
to users. It supports `error`, `alert`, and `success` states. It will try and use the corresponding
|
|
73
|
+
`main` colors from your `CanvasThemePalette` unless they do not meet accessibility contrast, in
|
|
74
|
+
which case the outer ring will use the `darkest` color. This hook will also show a `focusOutline`
|
|
75
|
+
ring when the input is focused. Note: You should not rely on these colors alone to differentiate
|
|
76
|
+
alerts, but use them in combination with icons or hint text.
|
|
72
77
|
|
|
73
78
|
### Usage
|
|
74
79
|
|
|
75
80
|
```tsx
|
|
81
|
+
/** @jsxRuntime classic */
|
|
76
82
|
/** @jsx jsx */
|
|
77
83
|
import {jsx} from '@emotion/core';
|
|
78
84
|
import React from 'react';
|
|
79
85
|
import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
|
|
80
86
|
import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
|
|
81
87
|
|
|
82
|
-
|
|
83
88
|
export const MyInput = ({handleChange}) => {
|
|
84
89
|
const [value, setValue] = React.useState('invalid@email');
|
|
85
90
|
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
@@ -95,4 +100,5 @@ export const MyInput = ({handleChange}) => {
|
|
|
95
100
|
<TextInput.Hint>Please enter a valid email.</TextInput.Hint>
|
|
96
101
|
</TextInput>
|
|
97
102
|
);
|
|
98
|
-
}
|
|
103
|
+
};
|
|
104
|
+
```
|
package/common/lib/Box.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import styled from '@emotion/styled';
|
|
3
3
|
import isPropValid from '@emotion/is-prop-valid';
|
|
4
|
-
import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
|
|
4
|
+
import {createComponent, StyledType, useConstant} from '@workday/canvas-kit-react/common';
|
|
5
5
|
|
|
6
6
|
// style props
|
|
7
7
|
import {border, BorderStyleProps} from './utils/border';
|
|
@@ -9,6 +9,7 @@ import {color, ColorStyleProps} from './utils/color';
|
|
|
9
9
|
import {depth, DepthStyleProps} from './utils/depth';
|
|
10
10
|
import {flexItem, FlexItemStyleProps} from './utils/flexItem';
|
|
11
11
|
import {layout, LayoutStyleProps} from './utils/layout';
|
|
12
|
+
import {other, OtherStyleProps} from './utils/other';
|
|
12
13
|
import {position, PositionStyleProps} from './utils/position';
|
|
13
14
|
import {space, SpaceStyleProps} from './utils/space';
|
|
14
15
|
|
|
@@ -17,6 +18,7 @@ export type BoxProps = BorderStyleProps &
|
|
|
17
18
|
DepthStyleProps &
|
|
18
19
|
FlexItemStyleProps &
|
|
19
20
|
LayoutStyleProps &
|
|
21
|
+
OtherStyleProps &
|
|
20
22
|
PositionStyleProps &
|
|
21
23
|
SpaceStyleProps & {
|
|
22
24
|
children?: React.ReactNode;
|
|
@@ -28,7 +30,8 @@ const shouldForwardProp = (prop: string) => {
|
|
|
28
30
|
return isPropValid(prop) && !omittedProps.includes(prop);
|
|
29
31
|
};
|
|
30
32
|
|
|
31
|
-
|
|
33
|
+
// Meant to be used with elements. The `shouldForwardProps` will remove all style props
|
|
34
|
+
const StyledBoxElement = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
|
|
32
35
|
{
|
|
33
36
|
boxSizing: 'border-box',
|
|
34
37
|
},
|
|
@@ -41,6 +44,21 @@ const StyledBox = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
|
|
|
41
44
|
space
|
|
42
45
|
);
|
|
43
46
|
|
|
47
|
+
// Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
|
|
48
|
+
const StyledBoxComponent = styled('div')<StyledType & BoxProps>(
|
|
49
|
+
{
|
|
50
|
+
boxSizing: 'border-box',
|
|
51
|
+
},
|
|
52
|
+
border,
|
|
53
|
+
color,
|
|
54
|
+
depth,
|
|
55
|
+
flexItem,
|
|
56
|
+
layout,
|
|
57
|
+
other,
|
|
58
|
+
position,
|
|
59
|
+
space
|
|
60
|
+
);
|
|
61
|
+
|
|
44
62
|
/**
|
|
45
63
|
* `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.
|
|
46
64
|
* It is highly flexible, and its primary purpose is to build other components.
|
|
@@ -61,10 +79,14 @@ const StyledBox = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
|
|
|
61
79
|
export const Box = createComponent('div')({
|
|
62
80
|
displayName: 'Box',
|
|
63
81
|
Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
|
|
82
|
+
const BoxComponent = useConstant(() =>
|
|
83
|
+
typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent
|
|
84
|
+
);
|
|
85
|
+
|
|
64
86
|
return (
|
|
65
|
-
<
|
|
87
|
+
<BoxComponent as={Element} ref={ref} {...elemProps}>
|
|
66
88
|
{children}
|
|
67
|
-
</
|
|
89
|
+
</BoxComponent>
|
|
68
90
|
);
|
|
69
91
|
},
|
|
70
92
|
});
|
|
@@ -15,12 +15,16 @@ const isAccessible = (foreground: string, background: string = colors.frenchVani
|
|
|
15
15
|
|
|
16
16
|
const getPaletteColorsFromTheme = (
|
|
17
17
|
palette: CanvasThemePalette,
|
|
18
|
-
fallbackColors?: ContrastColors
|
|
18
|
+
fallbackColors?: ContrastColors
|
|
19
19
|
): ContrastColors => {
|
|
20
20
|
return {
|
|
21
|
-
outer: isAccessible(palette.main)
|
|
21
|
+
outer: isAccessible(palette.main)
|
|
22
|
+
? palette.main
|
|
23
|
+
: isAccessible(palette.darkest)
|
|
24
|
+
? palette.darkest
|
|
25
|
+
: fallbackColors?.outer,
|
|
22
26
|
inner: fallbackColors?.inner ? fallbackColors.inner : palette.main,
|
|
23
|
-
}
|
|
27
|
+
};
|
|
24
28
|
};
|
|
25
29
|
|
|
26
30
|
export function getPaletteColors(
|
|
@@ -31,10 +35,10 @@ export function getPaletteColors(
|
|
|
31
35
|
|
|
32
36
|
switch (type) {
|
|
33
37
|
case 'error': {
|
|
34
|
-
return getPaletteColorsFromTheme(palette, {
|
|
38
|
+
return getPaletteColorsFromTheme(palette, {outer: inputColors.error.border});
|
|
35
39
|
}
|
|
36
40
|
case 'alert': {
|
|
37
|
-
return getPaletteColorsFromTheme(palette, {
|
|
41
|
+
return getPaletteColorsFromTheme(palette, {outer: colors.cantaloupe600});
|
|
38
42
|
}
|
|
39
43
|
case 'success': {
|
|
40
44
|
return getPaletteColorsFromTheme(palette, {
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export type OtherStyleProps = {
|
|
2
|
+
animation?: string;
|
|
3
|
+
};
|
|
4
|
+
|
|
5
|
+
const otherProps = {
|
|
6
|
+
animation: (value: string) => {
|
|
7
|
+
return {animation: value};
|
|
8
|
+
},
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export function other<P extends OtherStyleProps>(props: P) {
|
|
12
|
+
for (const key in props) {
|
|
13
|
+
if (key in otherProps) {
|
|
14
|
+
const value = props[key as keyof OtherStyleProps] as keyof OtherStyleProps;
|
|
15
|
+
const styleFn = otherProps[key as keyof OtherStyleProps];
|
|
16
|
+
return styleFn(value);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
return {};
|
|
20
|
+
}
|
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
function
|
|
3
|
-
|
|
4
|
-
}
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
|
+
};
|
|
5
12
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
6
13
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
7
14
|
};
|
|
8
15
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
16
|
+
exports.Combobox = void 0;
|
|
9
17
|
var Combobox_1 = __importDefault(require("./lib/Combobox"));
|
|
10
18
|
exports.Combobox = Combobox_1.default;
|
|
11
19
|
exports.default = Combobox_1.default;
|
|
12
|
-
|
|
20
|
+
__exportStar(require("./lib/Combobox"), exports);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutocompleteList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/AutocompleteList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAiD,MAAM,YAAY,CAAC;AAYjG,UAAU,qBAAqB;IAC7B;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACjF;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,uBAAuB,EAAE,CACvB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,EAC3C,aAAa,EAAE,aAAa,KACzB,IAAI,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"AutocompleteList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/AutocompleteList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAiD,MAAM,YAAY,CAAC;AAYjG,UAAU,qBAAqB;IAC7B;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACjF;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,uBAAuB,EAAE,CACvB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,EAC3C,aAAa,EAAE,aAAa,KACzB,IAAI,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,gBAAgB,uGAOnB,qBAAqB,uBAiFvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -10,6 +10,25 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
};
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
16
|
+
}) : (function(o, m, k, k2) {
|
|
17
|
+
if (k2 === undefined) k2 = k;
|
|
18
|
+
o[k2] = m[k];
|
|
19
|
+
}));
|
|
20
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
21
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
22
|
+
}) : function(o, v) {
|
|
23
|
+
o["default"] = v;
|
|
24
|
+
});
|
|
25
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
26
|
+
if (mod && mod.__esModule) return mod;
|
|
27
|
+
var result = {};
|
|
28
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
29
|
+
__setModuleDefault(result, mod);
|
|
30
|
+
return result;
|
|
31
|
+
};
|
|
13
32
|
var __spreadArrays = (this && this.__spreadArrays) || function () {
|
|
14
33
|
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
|
|
15
34
|
for (var r = Array(s), k = 0, i = 0; i < il; i++)
|
|
@@ -17,13 +36,6 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
|
|
|
17
36
|
r[k] = a[j];
|
|
18
37
|
return r;
|
|
19
38
|
};
|
|
20
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
21
|
-
if (mod && mod.__esModule) return mod;
|
|
22
|
-
var result = {};
|
|
23
|
-
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
|
|
24
|
-
result["default"] = mod;
|
|
25
|
-
return result;
|
|
26
|
-
};
|
|
27
39
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
28
40
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
29
41
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,cAAc,EAKf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AAErE,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAKpE,MAAM,WAAW,qBAAqB;IAEpC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAE1C,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACtF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAChD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAClF;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AA6DD,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,eAAO,MAAM,WAAW,qEACc,CAAC;AAEvC,eAAO,MAAM,kBAAkB,
|
|
1
|
+
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,cAAc,EAKf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AAErE,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAKpE,MAAM,WAAW,qBAAqB;IAEpC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAE1C,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACtF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAChD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAClF;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AA6DD,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,eAAO,MAAM,WAAW,qEACc,CAAC;AAEvC,eAAO,MAAM,kBAAkB,cAAe,MAAM,SAAS,WAc5D,CAAC;AAYF,QAAA,MAAM,QAAQ,wLAeX,aAAa,gBA0Tf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -10,6 +10,25 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
};
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
16
|
+
}) : (function(o, m, k, k2) {
|
|
17
|
+
if (k2 === undefined) k2 = k;
|
|
18
|
+
o[k2] = m[k];
|
|
19
|
+
}));
|
|
20
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
21
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
22
|
+
}) : function(o, v) {
|
|
23
|
+
o["default"] = v;
|
|
24
|
+
});
|
|
25
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
26
|
+
if (mod && mod.__esModule) return mod;
|
|
27
|
+
var result = {};
|
|
28
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
29
|
+
__setModuleDefault(result, mod);
|
|
30
|
+
return result;
|
|
31
|
+
};
|
|
13
32
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
33
|
var t = {};
|
|
15
34
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -21,19 +40,13 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
21
40
|
}
|
|
22
41
|
return t;
|
|
23
42
|
};
|
|
24
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
25
|
-
if (mod && mod.__esModule) return mod;
|
|
26
|
-
var result = {};
|
|
27
|
-
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
|
|
28
|
-
result["default"] = mod;
|
|
29
|
-
return result;
|
|
30
|
-
};
|
|
31
43
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
32
44
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
33
45
|
};
|
|
34
46
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
47
|
+
exports.getTextFromElement = exports.getOptionId = exports.listBoxIdPart = void 0;
|
|
35
48
|
var react_1 = __importStar(require("react"));
|
|
36
|
-
var
|
|
49
|
+
var react_2 = require("@emotion/react");
|
|
37
50
|
var common_1 = require("@workday/canvas-kit-react/common");
|
|
38
51
|
var tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
39
52
|
var card_1 = require("@workday/canvas-kit-react/card");
|
|
@@ -55,7 +68,7 @@ var InputContainer = common_1.styled('div')({
|
|
|
55
68
|
alignItems: "center",
|
|
56
69
|
position: 'relative',
|
|
57
70
|
});
|
|
58
|
-
var fadeInKeyframes =
|
|
71
|
+
var fadeInKeyframes = react_2.keyframes({
|
|
59
72
|
'0%': {
|
|
60
73
|
opacity: 0,
|
|
61
74
|
},
|
|
@@ -98,10 +111,11 @@ var ResetButton = common_1.styled(button_1.IconButton)({
|
|
|
98
111
|
});
|
|
99
112
|
exports.listBoxIdPart = "listbox";
|
|
100
113
|
var optionIdPart = "option";
|
|
101
|
-
|
|
114
|
+
var getOptionId = function (baseId, index) {
|
|
102
115
|
return baseId + "-" + optionIdPart + "-" + index;
|
|
103
116
|
};
|
|
104
|
-
exports.
|
|
117
|
+
exports.getOptionId = getOptionId;
|
|
118
|
+
var getTextFromElement = function (children) {
|
|
105
119
|
var text = '';
|
|
106
120
|
react_1.default.Children.map(children, function (child) {
|
|
107
121
|
if (child == null || typeof child === 'boolean' || child === {}) {
|
|
@@ -119,6 +133,7 @@ exports.getTextFromElement = function (children) {
|
|
|
119
133
|
});
|
|
120
134
|
return text;
|
|
121
135
|
};
|
|
136
|
+
exports.getTextFromElement = getTextFromElement;
|
|
122
137
|
var buildStatusString = function (listCount) {
|
|
123
138
|
return "There " + (listCount === 1 ? 'is' : 'are') + " " + listCount + " suggestion" + (listCount === 1 ? '' : 's') + ".";
|
|
124
139
|
};
|
|
@@ -344,7 +359,7 @@ var Combobox = function (_a) {
|
|
|
344
359
|
'aria-expanded': showingAutocomplete,
|
|
345
360
|
};
|
|
346
361
|
var cloneElement = function (element, props) {
|
|
347
|
-
return
|
|
362
|
+
return react_2.jsx(element.type, __assign(__assign({}, element.props), props));
|
|
348
363
|
};
|
|
349
364
|
return cloneElement(inputElement, __assign(__assign({}, inputElement.props), newTextInputProps));
|
|
350
365
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Status.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;IAC1C,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;IACxE,YAAY,CAAC,EAAE,WAAW,GAAG,gBAAgB,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,CAAC;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAID,QAAA,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Status.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;IAC1C,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;IACxE,YAAY,CAAC,EAAE,WAAW,GAAG,gBAAgB,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,CAAC;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAID,QAAA,MAAM,MAAM,wFAOT,WAAW,gBAuBb,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -1,9 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
+
}) : function(o, v) {
|
|
12
|
+
o["default"] = v;
|
|
13
|
+
});
|
|
2
14
|
var __importStar = (this && this.__importStar) || function (mod) {
|
|
3
15
|
if (mod && mod.__esModule) return mod;
|
|
4
16
|
var result = {};
|
|
5
|
-
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result
|
|
6
|
-
result
|
|
17
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
+
__setModuleDefault(result, mod);
|
|
7
19
|
return result;
|
|
8
20
|
};
|
|
9
21
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
@@ -1,11 +1,19 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
function
|
|
3
|
-
|
|
4
|
-
}
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
|
+
};
|
|
5
12
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
|
|
7
|
-
|
|
13
|
+
exports.permutateProps = exports.ComponentStatesTable = void 0;
|
|
14
|
+
__exportStar(require("./lib/Box"), exports);
|
|
15
|
+
__exportStar(require("./lib/theming"), exports);
|
|
8
16
|
var ComponentStatesTable_1 = require("./lib/storybook-utils/ComponentStatesTable");
|
|
9
|
-
exports
|
|
17
|
+
Object.defineProperty(exports, "ComponentStatesTable", { enumerable: true, get: function () { return ComponentStatesTable_1.ComponentStatesTable; } });
|
|
10
18
|
var permutateProps_1 = require("./lib/storybook-utils/permutateProps");
|
|
11
|
-
exports
|
|
19
|
+
Object.defineProperty(exports, "permutateProps", { enumerable: true, get: function () { return permutateProps_1.permutateProps; } });
|
|
@@ -4,9 +4,10 @@ import { ColorStyleProps } from './utils/color';
|
|
|
4
4
|
import { DepthStyleProps } from './utils/depth';
|
|
5
5
|
import { FlexItemStyleProps } from './utils/flexItem';
|
|
6
6
|
import { LayoutStyleProps } from './utils/layout';
|
|
7
|
+
import { OtherStyleProps } from './utils/other';
|
|
7
8
|
import { PositionStyleProps } from './utils/position';
|
|
8
9
|
import { SpaceStyleProps } from './utils/space';
|
|
9
|
-
export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & LayoutStyleProps & PositionStyleProps & SpaceStyleProps & {
|
|
10
|
+
export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & LayoutStyleProps & OtherStyleProps & PositionStyleProps & SpaceStyleProps & {
|
|
10
11
|
children?: React.ReactNode;
|
|
11
12
|
};
|
|
12
13
|
/**
|
|
@@ -26,5 +27,5 @@ export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStylePr
|
|
|
26
27
|
* );
|
|
27
28
|
*
|
|
28
29
|
*/
|
|
29
|
-
export declare const Box: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./utils/border").BorderShorthandStyleProps & import("./utils/border").BorderColorStyleProps & import("./utils/border").BorderRadiusStyleProps & import("./utils/border").BorderLineStyleProps & import("./utils/border").BorderWidthStyleProps & import("./utils/border").BorderLogicalStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & LayoutStyleProps & import("./utils/position").PositionStandardProps & import("./utils/position").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps>;
|
|
30
|
+
export declare const Box: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./utils/border").BorderShorthandStyleProps & import("./utils/border").BorderColorStyleProps & import("./utils/border").BorderRadiusStyleProps & import("./utils/border").BorderLineStyleProps & import("./utils/border").BorderWidthStyleProps & import("./utils/border").BorderLogicalStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & LayoutStyleProps & OtherStyleProps & import("./utils/position").PositionStandardProps & import("./utils/position").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps>;
|
|
30
31
|
//# sourceMappingURL=Box.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../common/lib/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,QAAQ,GAAG,gBAAgB,GACrC,eAAe,GACf,eAAe,GACf,kBAAkB,GAClB,gBAAgB,GAChB,kBAAkB,GAClB,eAAe,GAAG;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;
|
|
1
|
+
{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../common/lib/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,QAAQ,GAAG,gBAAgB,GACrC,eAAe,GACf,eAAe,GACf,kBAAkB,GAClB,gBAAgB,GAChB,eAAe,GACf,kBAAkB,GAClB,eAAe,GAAG;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAqCJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,2oBAad,CAAC"}
|
|
@@ -10,6 +10,25 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
};
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
16
|
+
}) : (function(o, m, k, k2) {
|
|
17
|
+
if (k2 === undefined) k2 = k;
|
|
18
|
+
o[k2] = m[k];
|
|
19
|
+
}));
|
|
20
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
21
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
22
|
+
}) : function(o, v) {
|
|
23
|
+
o["default"] = v;
|
|
24
|
+
});
|
|
25
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
26
|
+
if (mod && mod.__esModule) return mod;
|
|
27
|
+
var result = {};
|
|
28
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
29
|
+
__setModuleDefault(result, mod);
|
|
30
|
+
return result;
|
|
31
|
+
};
|
|
13
32
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
33
|
var t = {};
|
|
15
34
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -21,17 +40,11 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
21
40
|
}
|
|
22
41
|
return t;
|
|
23
42
|
};
|
|
24
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
25
|
-
if (mod && mod.__esModule) return mod;
|
|
26
|
-
var result = {};
|
|
27
|
-
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
|
|
28
|
-
result["default"] = mod;
|
|
29
|
-
return result;
|
|
30
|
-
};
|
|
31
43
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
32
44
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
33
45
|
};
|
|
34
46
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
47
|
+
exports.Box = void 0;
|
|
35
48
|
var React = __importStar(require("react"));
|
|
36
49
|
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
37
50
|
var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
|
|
@@ -42,15 +55,21 @@ var color_1 = require("./utils/color");
|
|
|
42
55
|
var depth_1 = require("./utils/depth");
|
|
43
56
|
var flexItem_1 = require("./utils/flexItem");
|
|
44
57
|
var layout_1 = require("./utils/layout");
|
|
58
|
+
var other_1 = require("./utils/other");
|
|
45
59
|
var position_1 = require("./utils/position");
|
|
46
60
|
var space_1 = require("./utils/space");
|
|
47
61
|
var omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border', 'background'];
|
|
48
62
|
var shouldForwardProp = function (prop) {
|
|
49
63
|
return is_prop_valid_1.default(prop) && !omittedProps.includes(prop);
|
|
50
64
|
};
|
|
51
|
-
|
|
65
|
+
// Meant to be used with elements. The `shouldForwardProps` will remove all style props
|
|
66
|
+
var StyledBoxElement = styled_1.default('div', { shouldForwardProp: shouldForwardProp })({
|
|
52
67
|
boxSizing: 'border-box',
|
|
53
68
|
}, border_1.border, color_1.color, depth_1.depth, flexItem_1.flexItem, layout_1.layout, position_1.position, space_1.space);
|
|
69
|
+
// Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
|
|
70
|
+
var StyledBoxComponent = styled_1.default('div')({
|
|
71
|
+
boxSizing: 'border-box',
|
|
72
|
+
}, border_1.border, color_1.color, depth_1.depth, flexItem_1.flexItem, layout_1.layout, other_1.other, position_1.position, space_1.space);
|
|
54
73
|
/**
|
|
55
74
|
* `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.
|
|
56
75
|
* It is highly flexible, and its primary purpose is to build other components.
|
|
@@ -72,6 +91,9 @@ exports.Box = common_1.createComponent('div')({
|
|
|
72
91
|
displayName: 'Box',
|
|
73
92
|
Component: function (_a, ref, Element) {
|
|
74
93
|
var children = _a.children, elemProps = __rest(_a, ["children"]);
|
|
75
|
-
|
|
94
|
+
var BoxComponent = common_1.useConstant(function () {
|
|
95
|
+
return typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent;
|
|
96
|
+
});
|
|
97
|
+
return (React.createElement(BoxComponent, __assign({ as: Element, ref: ref }, elemProps), children));
|
|
76
98
|
},
|
|
77
99
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComponentStatesTable.d.ts","sourceRoot":"","sources":["../../../../../common/lib/storybook-utils/ComponentStatesTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,eAAe,EAAE,KAAK,EAAC,MAAM,aAAa,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B;;;;OAIG;IACH,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC;CACzC;AAgBD,eAAO,MAAM,oBAAoB,
|
|
1
|
+
{"version":3,"file":"ComponentStatesTable.d.ts","sourceRoot":"","sources":["../../../../../common/lib/storybook-utils/ComponentStatesTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,eAAe,EAAE,KAAK,EAAC,MAAM,aAAa,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B;;;;OAIG;IACH,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC;CACzC;AAgBD,eAAO,MAAM,oBAAoB,yCAI9B,yBAAyB,gBAkC3B,CAAC"}
|
|
@@ -14,6 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.ComponentStatesTable = void 0;
|
|
17
18
|
var react_1 = __importDefault(require("react"));
|
|
18
19
|
var common_1 = require("@workday/canvas-kit-react/common");
|
|
19
20
|
var Table = common_1.styled('table')({
|
|
@@ -29,7 +30,7 @@ var Table = common_1.styled('table')({
|
|
|
29
30
|
textAlign: 'left',
|
|
30
31
|
},
|
|
31
32
|
});
|
|
32
|
-
|
|
33
|
+
var ComponentStatesTable = function (_a) {
|
|
33
34
|
var rowProps = _a.rowProps, columnProps = _a.columnProps, children = _a.children;
|
|
34
35
|
return (react_1.default.createElement(Table, null,
|
|
35
36
|
react_1.default.createElement("thead", null,
|
|
@@ -44,3 +45,4 @@ exports.ComponentStatesTable = function (_a) {
|
|
|
44
45
|
})));
|
|
45
46
|
}))));
|
|
46
47
|
};
|
|
48
|
+
exports.ComponentStatesTable = ComponentStatesTable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"permutateProps.d.ts","sourceRoot":"","sources":["../../../../../common/lib/storybook-utils/permutateProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAE,eAAe,EAAE,KAAK,EAAE,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAEtF,eAAO,MAAM,cAAc;;
|
|
1
|
+
{"version":3,"file":"permutateProps.d.ts","sourceRoot":"","sources":["../../../../../common/lib/storybook-utils/permutateProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAE,eAAe,EAAE,KAAK,EAAE,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAEtF,eAAO,MAAM,cAAc,aACf,gBAAgB,oBACT,KAAK,KAAK,OAAO,gCAClB,MAAM,EAAE;;MAEvB,eAAe,EAuCjB,CAAC"}
|
|
@@ -11,7 +11,8 @@ var __assign = (this && this.__assign) || function () {
|
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
-
exports.permutateProps =
|
|
14
|
+
exports.permutateProps = void 0;
|
|
15
|
+
var permutateProps = function (allProps, filter, remainingProps, values) {
|
|
15
16
|
if (remainingProps === void 0) { remainingProps = Object.keys(allProps); }
|
|
16
17
|
if (values === void 0) { values = {}; }
|
|
17
18
|
// When there are no more props to combine with, return result
|
|
@@ -43,3 +44,4 @@ exports.permutateProps = function (allProps, filter, remainingProps, values) {
|
|
|
43
44
|
});
|
|
44
45
|
return permutations.flat();
|
|
45
46
|
};
|
|
47
|
+
exports.permutateProps = permutateProps;
|
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
function
|
|
3
|
-
|
|
4
|
-
}
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
|
+
};
|
|
5
12
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
|
|
7
|
-
|
|
13
|
+
__exportStar(require("./useThemeRTL"), exports);
|
|
14
|
+
__exportStar(require("./useThemedRing"), exports);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useThemeRTL.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemeRTL.ts"],"names":[],"mappings":"AAMA,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAI/D,oBAAY,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAW5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,WAAW
|
|
1
|
+
{"version":3,"file":"useThemeRTL.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemeRTL.ts"],"names":[],"mappings":"AAMA,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAI/D,oBAAY,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAW5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,WAAW;6BAMD,aAAa,EAAE;;EAYxC"}
|
|
@@ -21,6 +21,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
21
21
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
22
22
|
};
|
|
23
23
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
24
|
+
exports.useThemeRTL = void 0;
|
|
24
25
|
var common_1 = require("@workday/canvas-kit-react/common");
|
|
25
26
|
var react_1 = require("react");
|
|
26
27
|
var rtl_css_js_1 = __importDefault(require("rtl-css-js"));
|
|
@@ -6,6 +6,6 @@ interface ContrastColors {
|
|
|
6
6
|
inner?: string;
|
|
7
7
|
}
|
|
8
8
|
export declare function getPaletteColors(type: paletteSelection, theme: EmotionCanvasTheme): ContrastColors;
|
|
9
|
-
export declare const useThemedRing: (type:
|
|
9
|
+
export declare const useThemedRing: (type: paletteSelection) => CSSProperties;
|
|
10
10
|
export {};
|
|
11
11
|
//# sourceMappingURL=useThemedRing.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useThemedRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemedRing.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,kBAAkB,EAAC,MAAM,kCAAkC,CAAC;AACxF,OAAO,EAAS,aAAa,EAA4B,MAAM,kCAAkC,CAAC;AAGlG,aAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AACzF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;
|
|
1
|
+
{"version":3,"file":"useThemedRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemedRing.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,kBAAkB,EAAC,MAAM,kCAAkC,CAAC;AACxF,OAAO,EAAS,aAAa,EAA4B,MAAM,kCAAkC,CAAC;AAGlG,aAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AACzF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoBD,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,kBAAkB,GACxB,cAAc,CAsBhB;AAED,eAAO,MAAM,aAAa,SAAU,gBAAgB,KAAG,aAyBtD,CAAC"}
|