@workday/canvas-kit-preview-react 9.0.0-alpha.338-next.5 → 9.0.0-alpha.344-next.3
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/dist/commonjs/form-field/lib/FormField.d.ts +2 -2
- package/dist/commonjs/form-field/lib/FormFieldHint.d.ts +1 -1
- package/dist/commonjs/form-field/lib/FormFieldInput.d.ts +1 -1
- package/dist/commonjs/form-field/lib/hooks/useFormFieldHint.d.ts +1 -1
- package/dist/commonjs/form-field/lib/hooks/useFormFieldInput.d.ts +1 -1
- package/dist/commonjs/form-field/lib/hooks/useFormFieldLabel.d.ts +1 -1
- package/dist/commonjs/form-field/lib/hooks/useFormFieldModel.d.ts +2 -12
- package/dist/commonjs/form-field/lib/hooks/useFormFieldModel.d.ts.map +1 -1
- package/dist/commonjs/form-field/lib/hooks/useFormFieldModel.js +1 -3
- package/dist/commonjs/menu/lib/Menu.d.ts +12 -5
- package/dist/commonjs/menu/lib/Menu.d.ts.map +1 -1
- package/dist/commonjs/menu/lib/Menu.js +14 -5
- package/dist/commonjs/menu/lib/MenuItem.d.ts +15 -5
- package/dist/commonjs/menu/lib/MenuItem.d.ts.map +1 -1
- package/dist/commonjs/menu/lib/MenuItem.js +18 -6
- package/dist/commonjs/pill/lib/Pill.d.ts +103 -5
- package/dist/commonjs/pill/lib/Pill.d.ts.map +1 -1
- package/dist/commonjs/pill/lib/Pill.js +101 -2
- package/dist/commonjs/segmented-control/index.d.ts +2 -0
- package/dist/commonjs/segmented-control/index.d.ts.map +1 -1
- package/dist/commonjs/segmented-control/index.js +4 -0
- package/dist/commonjs/segmented-control/lib/SegmentedControl.d.ts +74 -38
- package/dist/commonjs/segmented-control/lib/SegmentedControl.d.ts.map +1 -1
- package/dist/commonjs/segmented-control/lib/SegmentedControl.js +36 -0
- package/dist/commonjs/segmented-control/lib/SegmentedControlItem.d.ts +1 -1
- package/dist/commonjs/segmented-control/lib/SegmentedControlList.d.ts +64 -1
- package/dist/commonjs/segmented-control/lib/SegmentedControlList.d.ts.map +1 -1
- package/dist/commonjs/segmented-control/lib/SegmentedControlList.js +3 -3
- package/dist/commonjs/segmented-control/lib/hooks/useSegmentedControlItem.d.ts +2 -2
- package/dist/commonjs/segmented-control/lib/hooks/useSegmentedControlModel.d.ts +39 -39
- package/dist/commonjs/segmented-control/lib/hooks/useSegmentedControlModel.js +2 -1
- package/dist/commonjs/select/lib/Select.js +2 -0
- package/dist/commonjs/side-panel/lib/SidePanel.d.ts +13 -26
- package/dist/commonjs/side-panel/lib/SidePanel.d.ts.map +1 -1
- package/dist/commonjs/side-panel/lib/SidePanel.js +73 -96
- package/dist/commonjs/side-panel/lib/SidePanelToggleButton.d.ts +17 -0
- package/dist/commonjs/side-panel/lib/SidePanelToggleButton.d.ts.map +1 -0
- package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js +88 -0
- package/dist/commonjs/side-panel/lib/hooks.d.ts +20 -0
- package/dist/commonjs/side-panel/lib/hooks.d.ts.map +1 -1
- package/dist/commonjs/side-panel/lib/hooks.js +20 -1
- package/dist/commonjs/status-indicator/index.d.ts +2 -0
- package/dist/commonjs/status-indicator/index.d.ts.map +1 -1
- package/dist/commonjs/status-indicator/index.js +4 -0
- package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts +28 -2
- package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts.map +1 -1
- package/dist/commonjs/status-indicator/lib/StatusIndicator.js +27 -1
- package/dist/commonjs/status-indicator/lib/StatusIndicatorIcon.d.ts +13 -0
- package/dist/commonjs/status-indicator/lib/StatusIndicatorIcon.d.ts.map +1 -1
- package/dist/commonjs/status-indicator/lib/StatusIndicatorIcon.js +3 -3
- package/dist/commonjs/text-area/lib/TextArea.d.ts +1 -1
- package/dist/commonjs/text-area/lib/TextArea.d.ts.map +1 -1
- package/dist/commonjs/text-area/lib/TextArea.js +1 -2
- package/dist/commonjs/text-input/lib/TextInput.d.ts +2 -2
- package/dist/commonjs/text-input/lib/TextInput.d.ts.map +1 -1
- package/dist/commonjs/text-input/lib/TextInput.js +1 -2
- package/dist/commonjs/text-input/lib/TextInputField.js +1 -1
- package/dist/commonjs/text-input/lib/hooks/useTextInputField.d.ts +1 -1
- package/dist/commonjs/text-input/lib/hooks/useTextInputModel.d.ts +1 -0
- package/dist/commonjs/text-input/lib/hooks/useTextInputModel.d.ts.map +1 -1
- package/dist/commonjs/text-input/lib/hooks/useTextInputModel.js +1 -0
- package/dist/es6/form-field/lib/FormField.d.ts +2 -2
- package/dist/es6/form-field/lib/FormFieldHint.d.ts +1 -1
- package/dist/es6/form-field/lib/FormFieldInput.d.ts +1 -1
- package/dist/es6/form-field/lib/hooks/useFormFieldHint.d.ts +1 -1
- package/dist/es6/form-field/lib/hooks/useFormFieldInput.d.ts +1 -1
- package/dist/es6/form-field/lib/hooks/useFormFieldLabel.d.ts +1 -1
- package/dist/es6/form-field/lib/hooks/useFormFieldModel.d.ts +2 -12
- package/dist/es6/form-field/lib/hooks/useFormFieldModel.d.ts.map +1 -1
- package/dist/es6/form-field/lib/hooks/useFormFieldModel.js +1 -3
- package/dist/es6/menu/lib/Menu.d.ts +12 -5
- package/dist/es6/menu/lib/Menu.d.ts.map +1 -1
- package/dist/es6/menu/lib/Menu.js +14 -5
- package/dist/es6/menu/lib/MenuItem.d.ts +15 -5
- package/dist/es6/menu/lib/MenuItem.d.ts.map +1 -1
- package/dist/es6/menu/lib/MenuItem.js +18 -6
- package/dist/es6/pill/lib/Pill.d.ts +103 -5
- package/dist/es6/pill/lib/Pill.d.ts.map +1 -1
- package/dist/es6/pill/lib/Pill.js +101 -2
- package/dist/es6/segmented-control/index.d.ts +2 -0
- package/dist/es6/segmented-control/index.d.ts.map +1 -1
- package/dist/es6/segmented-control/index.js +2 -0
- package/dist/es6/segmented-control/lib/SegmentedControl.d.ts +74 -38
- package/dist/es6/segmented-control/lib/SegmentedControl.d.ts.map +1 -1
- package/dist/es6/segmented-control/lib/SegmentedControl.js +36 -0
- package/dist/es6/segmented-control/lib/SegmentedControlItem.d.ts +1 -1
- package/dist/es6/segmented-control/lib/SegmentedControlList.d.ts +64 -1
- package/dist/es6/segmented-control/lib/SegmentedControlList.d.ts.map +1 -1
- package/dist/es6/segmented-control/lib/SegmentedControlList.js +1 -1
- package/dist/es6/segmented-control/lib/hooks/useSegmentedControlItem.d.ts +2 -2
- package/dist/es6/segmented-control/lib/hooks/useSegmentedControlModel.d.ts +39 -39
- package/dist/es6/segmented-control/lib/hooks/useSegmentedControlModel.js +2 -1
- package/dist/es6/select/lib/Select.js +2 -0
- package/dist/es6/side-panel/lib/SidePanel.d.ts +13 -26
- package/dist/es6/side-panel/lib/SidePanel.d.ts.map +1 -1
- package/dist/es6/side-panel/lib/SidePanel.js +75 -97
- package/dist/es6/side-panel/lib/SidePanelToggleButton.d.ts +17 -0
- package/dist/es6/side-panel/lib/SidePanelToggleButton.d.ts.map +1 -0
- package/dist/es6/side-panel/lib/SidePanelToggleButton.js +66 -0
- package/dist/es6/side-panel/lib/hooks.d.ts +20 -0
- package/dist/es6/side-panel/lib/hooks.d.ts.map +1 -1
- package/dist/es6/side-panel/lib/hooks.js +19 -0
- package/dist/es6/status-indicator/index.d.ts +2 -0
- package/dist/es6/status-indicator/index.d.ts.map +1 -1
- package/dist/es6/status-indicator/index.js +2 -0
- package/dist/es6/status-indicator/lib/StatusIndicator.d.ts +28 -2
- package/dist/es6/status-indicator/lib/StatusIndicator.d.ts.map +1 -1
- package/dist/es6/status-indicator/lib/StatusIndicator.js +27 -1
- package/dist/es6/status-indicator/lib/StatusIndicatorIcon.d.ts +13 -0
- package/dist/es6/status-indicator/lib/StatusIndicatorIcon.d.ts.map +1 -1
- package/dist/es6/status-indicator/lib/StatusIndicatorIcon.js +1 -1
- package/dist/es6/text-area/lib/TextArea.d.ts +1 -1
- package/dist/es6/text-area/lib/TextArea.d.ts.map +1 -1
- package/dist/es6/text-area/lib/TextArea.js +2 -3
- package/dist/es6/text-input/lib/TextInput.d.ts +2 -2
- package/dist/es6/text-input/lib/TextInput.d.ts.map +1 -1
- package/dist/es6/text-input/lib/TextInput.js +2 -3
- package/dist/es6/text-input/lib/TextInputField.js +3 -3
- package/dist/es6/text-input/lib/hooks/useTextInputField.d.ts +1 -1
- package/dist/es6/text-input/lib/hooks/useTextInputModel.d.ts +1 -0
- package/dist/es6/text-input/lib/hooks/useTextInputModel.d.ts.map +1 -1
- package/dist/es6/text-input/lib/hooks/useTextInputModel.js +1 -0
- package/form-field/lib/hooks/useFormFieldModel.tsx +1 -3
- package/menu/lib/Menu.tsx +12 -5
- package/menu/lib/MenuItem.tsx +15 -5
- package/package.json +4 -4
- package/pill/lib/Pill.tsx +101 -2
- package/segmented-control/index.ts +2 -0
- package/segmented-control/lib/SegmentedControl.tsx +36 -0
- package/segmented-control/lib/SegmentedControlList.tsx +1 -1
- package/side-panel/lib/SidePanel.tsx +119 -169
- package/side-panel/lib/SidePanelToggleButton.tsx +78 -0
- package/side-panel/lib/hooks.ts +20 -0
- package/status-indicator/index.ts +2 -0
- package/status-indicator/lib/StatusIndicator.tsx +27 -1
- package/status-indicator/lib/StatusIndicatorIcon.tsx +1 -1
- package/text-area/lib/TextArea.tsx +6 -3
- package/text-input/lib/TextInput.tsx +6 -3
- package/text-input/lib/TextInputField.tsx +3 -3
- package/text-input/lib/hooks/useTextInputModel.ts +1 -0
- package/dist/commonjs/text-area/lib/hooks/index.d.ts +0 -2
- package/dist/commonjs/text-area/lib/hooks/index.d.ts.map +0 -1
- package/dist/commonjs/text-area/lib/hooks/index.js +0 -13
- package/dist/commonjs/text-area/lib/hooks/useTextAreaModel.d.ts +0 -28
- package/dist/commonjs/text-area/lib/hooks/useTextAreaModel.d.ts.map +0 -1
- package/dist/commonjs/text-area/lib/hooks/useTextAreaModel.js +0 -5
- package/dist/es6/text-area/lib/hooks/index.d.ts +0 -2
- package/dist/es6/text-area/lib/hooks/index.d.ts.map +0 -1
- package/dist/es6/text-area/lib/hooks/index.js +0 -1
- package/dist/es6/text-area/lib/hooks/useTextAreaModel.d.ts +0 -28
- package/dist/es6/text-area/lib/hooks/useTextAreaModel.d.ts.map +0 -1
- package/dist/es6/text-area/lib/hooks/useTextAreaModel.js +0 -2
- package/text-area/lib/hooks/index.ts +0 -1
- package/text-area/lib/hooks/useTextAreaModel.ts +0 -3
|
@@ -22,7 +22,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
|
|
|
22
22
|
};
|
|
23
23
|
events: {};
|
|
24
24
|
}> & {
|
|
25
|
-
Input: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").
|
|
25
|
+
Input: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps, {
|
|
26
26
|
state: {
|
|
27
27
|
id: string;
|
|
28
28
|
hasError: boolean;
|
|
@@ -38,7 +38,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
|
|
|
38
38
|
};
|
|
39
39
|
events: {};
|
|
40
40
|
}>;
|
|
41
|
-
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p",
|
|
41
|
+
Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Omit<import("@workday/canvas-kit-react/text").TypeLevelProps, "size">, {
|
|
42
42
|
state: {
|
|
43
43
|
id: string;
|
|
44
44
|
hasError: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const FormFieldHint: import("@workday/canvas-kit-react/common").ElementComponentM<"p",
|
|
1
|
+
export declare const FormFieldHint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Omit<import("@workday/canvas-kit-react/text").TypeLevelProps, "size">, {
|
|
2
2
|
state: {
|
|
3
3
|
id: string;
|
|
4
4
|
hasError: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const FormFieldInput: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").
|
|
1
|
+
export declare const FormFieldInput: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps, {
|
|
2
2
|
state: {
|
|
3
3
|
id: string;
|
|
4
4
|
hasError: boolean;
|
|
@@ -9,7 +9,7 @@ export declare const useFormFieldHint: <P extends {}, R>(model: {
|
|
|
9
9
|
isRequired: boolean;
|
|
10
10
|
};
|
|
11
11
|
events: {};
|
|
12
|
-
}, elemProps?: P | undefined, ref?:
|
|
12
|
+
}, elemProps?: P | undefined, ref?: import("react").Ref<R> | undefined) => {
|
|
13
13
|
id: string;
|
|
14
14
|
} & P & (R extends HTMLOrSVGElement ? {
|
|
15
15
|
ref: import("react").Ref<R>;
|
|
@@ -9,7 +9,7 @@ export declare const useFormFieldInput: <P extends {}, R>(model: {
|
|
|
9
9
|
isRequired: boolean;
|
|
10
10
|
};
|
|
11
11
|
events: {};
|
|
12
|
-
}, elemProps?: P | undefined, ref?:
|
|
12
|
+
}, elemProps?: P | undefined, ref?: import("react").Ref<R> | undefined) => {
|
|
13
13
|
required: boolean | undefined;
|
|
14
14
|
'aria-invalid': boolean | undefined;
|
|
15
15
|
'aria-describedby': string;
|
|
@@ -9,7 +9,7 @@ export declare const useFormFieldLabel: <P extends {}, R>(model: {
|
|
|
9
9
|
isRequired: boolean;
|
|
10
10
|
};
|
|
11
11
|
events: {};
|
|
12
|
-
}, elemProps?: P | undefined, ref?:
|
|
12
|
+
}, elemProps?: P | undefined, ref?: import("react").Ref<R> | undefined) => {
|
|
13
13
|
htmlFor: string;
|
|
14
14
|
} & P & (R extends HTMLOrSVGElement ? {
|
|
15
15
|
ref: import("react").Ref<R>;
|
|
@@ -2,7 +2,6 @@ export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<
|
|
|
2
2
|
/**
|
|
3
3
|
* Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
|
|
4
4
|
* `required` set to true, and usually some subcomponents will have a error color applied.
|
|
5
|
-
* @default false
|
|
6
5
|
*/
|
|
7
6
|
hasError: boolean;
|
|
8
7
|
/**
|
|
@@ -13,13 +12,12 @@ export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<
|
|
|
13
12
|
* - `FormField.Hint` will set `id` to `hint-${id}`
|
|
14
13
|
*
|
|
15
14
|
* If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
|
|
16
|
-
* @default
|
|
15
|
+
* @default {useUniqueId}
|
|
17
16
|
*/
|
|
18
17
|
id: string;
|
|
19
18
|
/**
|
|
20
19
|
* Optional flag to denote if this field is required. When true the `FormField.Input` will have
|
|
21
20
|
* `required` set to true, and an asterisk will be appended to the `FormField.Label`.
|
|
22
|
-
* @default false
|
|
23
21
|
*/
|
|
24
22
|
isRequired: boolean;
|
|
25
23
|
}> & {} & {}) | undefined) => {
|
|
@@ -28,13 +26,11 @@ export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<
|
|
|
28
26
|
/**
|
|
29
27
|
* Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
|
|
30
28
|
* `required` set to true, and usually some subcomponents will have a error color applied.
|
|
31
|
-
* @default false
|
|
32
29
|
*/
|
|
33
30
|
hasError: boolean;
|
|
34
31
|
/**
|
|
35
32
|
* Optional flag to denote if this field is required. When true the `FormField.Input` will have
|
|
36
33
|
* `required` set to true, and an asterisk will be appended to the `FormField.Label`.
|
|
37
|
-
* @default false
|
|
38
34
|
*/
|
|
39
35
|
isRequired: boolean;
|
|
40
36
|
};
|
|
@@ -43,7 +39,6 @@ export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<
|
|
|
43
39
|
/**
|
|
44
40
|
* Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
|
|
45
41
|
* `required` set to true, and usually some subcomponents will have a error color applied.
|
|
46
|
-
* @default false
|
|
47
42
|
*/
|
|
48
43
|
hasError: boolean;
|
|
49
44
|
/**
|
|
@@ -54,13 +49,12 @@ export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<
|
|
|
54
49
|
* - `FormField.Hint` will set `id` to `hint-${id}`
|
|
55
50
|
*
|
|
56
51
|
* If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
|
|
57
|
-
* @default
|
|
52
|
+
* @default {useUniqueId}
|
|
58
53
|
*/
|
|
59
54
|
id: string;
|
|
60
55
|
/**
|
|
61
56
|
* Optional flag to denote if this field is required. When true the `FormField.Input` will have
|
|
62
57
|
* `required` set to true, and an asterisk will be appended to the `FormField.Label`.
|
|
63
|
-
* @default false
|
|
64
58
|
*/
|
|
65
59
|
isRequired: boolean;
|
|
66
60
|
}, {}, {
|
|
@@ -68,13 +62,11 @@ export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<
|
|
|
68
62
|
/**
|
|
69
63
|
* Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
|
|
70
64
|
* `required` set to true, and usually some subcomponents will have a error color applied.
|
|
71
|
-
* @default false
|
|
72
65
|
*/
|
|
73
66
|
hasError: boolean;
|
|
74
67
|
/**
|
|
75
68
|
* Optional flag to denote if this field is required. When true the `FormField.Input` will have
|
|
76
69
|
* `required` set to true, and an asterisk will be appended to the `FormField.Label`.
|
|
77
|
-
* @default false
|
|
78
70
|
*/
|
|
79
71
|
isRequired: boolean;
|
|
80
72
|
}, {}, {
|
|
@@ -83,13 +75,11 @@ export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<
|
|
|
83
75
|
/**
|
|
84
76
|
* Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
|
|
85
77
|
* `required` set to true, and usually some subcomponents will have a error color applied.
|
|
86
|
-
* @default false
|
|
87
78
|
*/
|
|
88
79
|
hasError: boolean;
|
|
89
80
|
/**
|
|
90
81
|
* Optional flag to denote if this field is required. When true the `FormField.Input` will have
|
|
91
82
|
* `required` set to true, and an asterisk will be appended to the `FormField.Label`.
|
|
92
|
-
* @default false
|
|
93
83
|
*/
|
|
94
84
|
isRequired: boolean;
|
|
95
85
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFormFieldModel.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldModel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;IAE1B
|
|
1
|
+
{"version":3,"file":"useFormFieldModel.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldModel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;IAE1B;;;OAGG;;IAEH;;;;;;;;;OASG;;IAEH;;;OAGG;;;;;QAnBH;;;WAGG;;QAaH;;;WAGG;;;;;IAnBH;;;OAGG;;IAEH;;;;;;;;;OASG;;IAEH;;;OAGG;;;;IAnBH;;;OAGG;;IAaH;;;OAGG;;;;;QAnBH;;;WAGG;;QAaH;;;WAGG;;;;EAeL,CAAC"}
|
|
@@ -18,7 +18,6 @@ exports.useFormFieldModel = common_1.createModelHook({
|
|
|
18
18
|
/**
|
|
19
19
|
* Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
|
|
20
20
|
* `required` set to true, and usually some subcomponents will have a error color applied.
|
|
21
|
-
* @default false
|
|
22
21
|
*/
|
|
23
22
|
hasError: false,
|
|
24
23
|
/**
|
|
@@ -29,13 +28,12 @@ exports.useFormFieldModel = common_1.createModelHook({
|
|
|
29
28
|
* - `FormField.Hint` will set `id` to `hint-${id}`
|
|
30
29
|
*
|
|
31
30
|
* If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
|
|
32
|
-
* @default
|
|
31
|
+
* @default {useUniqueId}
|
|
33
32
|
*/
|
|
34
33
|
id: '',
|
|
35
34
|
/**
|
|
36
35
|
* Optional flag to denote if this field is required. When true the `FormField.Input` will have
|
|
37
36
|
* `required` set to true, and an asterisk will be appended to the `FormField.Label`.
|
|
38
|
-
* @default false
|
|
39
37
|
*/
|
|
40
38
|
isRequired: false,
|
|
41
39
|
},
|
|
@@ -56,12 +56,19 @@ export interface DeprecatedMenuState {
|
|
|
56
56
|
selectedItemIndex: number;
|
|
57
57
|
}
|
|
58
58
|
/**
|
|
59
|
-
*
|
|
59
|
+
* As of Canvas Kit v8, this component is being soft-deprecated. It will be hard-deprecated
|
|
60
|
+
* (completely removed) in v9. Please see the [upgrade
|
|
61
|
+
* guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page) for
|
|
62
|
+
* more information.
|
|
60
63
|
*
|
|
61
|
-
*
|
|
62
|
-
*
|
|
63
|
-
*
|
|
64
|
-
*
|
|
64
|
+
* `DeprecatedMenu` renders a styled `<ul role="menu">` element within a {@link Card} and follows
|
|
65
|
+
* the [Active Menu
|
|
66
|
+
* pattern](https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions-active-descendant.html)
|
|
67
|
+
* using `aria-activedescendant`.
|
|
68
|
+
*
|
|
69
|
+
* Undocumented props are spread to the underlying `<ul>` element.
|
|
70
|
+
*
|
|
71
|
+
* @deprecated
|
|
65
72
|
*/
|
|
66
73
|
export declare class DeprecatedMenu extends React.Component<DeprecatedMenuProps, DeprecatedMenuState> {
|
|
67
74
|
private id;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../menu/lib/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,uBAAuB,EAAC,MAAM,YAAY,CAAC;AAGnD,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG;;;;;;;GAOG;AACH,MAAM,WAAW,mBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,EACL,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,GAC3C,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,EAAE,CAAC;IAClD;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../menu/lib/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,uBAAuB,EAAC,MAAM,YAAY,CAAC;AAGnD,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG;;;;;;;GAOG;AACH,MAAM,WAAW,mBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,EACL,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,GAC3C,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,EAAE,CAAC;IAClD;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD;;;;;;;;;;;;;;GAcG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,SAAS,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;IAC3F,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,mBAAmB;IAetC,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAejD,iBAAiB;IAYjB,oBAAoB;IAIb,MAAM;IAyDN,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,MAAM,CAQjE;IAEK,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,IAAI,CAE/D;IAEF,OAAO,CAAC,uBAAuB,CA+E7B;IAEF,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,kBAAkB,CAkCxB;IAEF,OAAO,CAAC,sBAAsB,CAU5B;IAEF,OAAO,CAAC,sBAAsB,CAG5B;CACH"}
|
|
@@ -7,6 +7,8 @@ var __extends = (this && this.__extends) || (function () {
|
|
|
7
7
|
return extendStatics(d, b);
|
|
8
8
|
};
|
|
9
9
|
return function (d, b) {
|
|
10
|
+
if (typeof b !== "function" && b !== null)
|
|
11
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
10
12
|
extendStatics(d, b);
|
|
11
13
|
function __() { this.constructor = d; }
|
|
12
14
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
@@ -67,12 +69,19 @@ var List = styled_1.default('ul')(__assign({ background: tokens_1.commonColors.b
|
|
|
67
69
|
outline: 'none',
|
|
68
70
|
} }, common_1.hideMouseFocus));
|
|
69
71
|
/**
|
|
70
|
-
*
|
|
72
|
+
* As of Canvas Kit v8, this component is being soft-deprecated. It will be hard-deprecated
|
|
73
|
+
* (completely removed) in v9. Please see the [upgrade
|
|
74
|
+
* guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page) for
|
|
75
|
+
* more information.
|
|
71
76
|
*
|
|
72
|
-
*
|
|
73
|
-
*
|
|
74
|
-
*
|
|
75
|
-
*
|
|
77
|
+
* `DeprecatedMenu` renders a styled `<ul role="menu">` element within a {@link Card} and follows
|
|
78
|
+
* the [Active Menu
|
|
79
|
+
* pattern](https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions-active-descendant.html)
|
|
80
|
+
* using `aria-activedescendant`.
|
|
81
|
+
*
|
|
82
|
+
* Undocumented props are spread to the underlying `<ul>` element.
|
|
83
|
+
*
|
|
84
|
+
* @deprecated
|
|
76
85
|
*/
|
|
77
86
|
var DeprecatedMenu = /** @class */ (function (_super) {
|
|
78
87
|
__extends(DeprecatedMenu, _super);
|
|
@@ -57,12 +57,22 @@ export interface DeprecatedMenuItemProps extends React.LiHTMLAttributes<HTMLLIEl
|
|
|
57
57
|
shouldClose?: boolean;
|
|
58
58
|
}
|
|
59
59
|
/**
|
|
60
|
-
*
|
|
60
|
+
* `DeprecatedMenuItem` renders an `<li>` element with the correct attributes to ensure it is
|
|
61
|
+
* accessible. If you choose to implement your own custom menu items, be sure to use semantic `<li>`
|
|
62
|
+
* elements with the following attributes:
|
|
61
63
|
*
|
|
62
|
-
*
|
|
63
|
-
*
|
|
64
|
-
*
|
|
65
|
-
*
|
|
64
|
+
* - `role="menuitem"`
|
|
65
|
+
* - `tabindex={-1}`
|
|
66
|
+
* - `id`s following this pattern: `${MenuId}-${index}`
|
|
67
|
+
*
|
|
68
|
+
* As of Canvas Kit v8, Menu is being soft-deprecated. It will be hard-deprecated (completely
|
|
69
|
+
* removed) in v9. Please see the [upgrade
|
|
70
|
+
* guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page) for
|
|
71
|
+
* more information.
|
|
72
|
+
*
|
|
73
|
+
* Undocumented props are spread to the underlying `<li>` element.
|
|
74
|
+
*
|
|
75
|
+
* @deprecated
|
|
66
76
|
*/
|
|
67
77
|
export declare class DeprecatedMenuItem extends React.Component<DeprecatedMenuItemProps> {
|
|
68
78
|
ref: React.RefObject<HTMLLIElement>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D;;;;;;;GAOG;AACH,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IACpF;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA2LD
|
|
1
|
+
{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D;;;;;;;GAOG;AACH,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IACpF;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA2LD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC;IAC9E,GAAG,iCAAoC;IAEvC,iBAAiB;IASjB,kBAAkB,cAAe,uBAAuB,UAMtD;IAEF,MAAM;IA4CN,OAAO,CAAC,WAAW,CAOjB;CACH"}
|
|
@@ -7,6 +7,8 @@ var __extends = (this && this.__extends) || (function () {
|
|
|
7
7
|
return extendStatics(d, b);
|
|
8
8
|
};
|
|
9
9
|
return function (d, b) {
|
|
10
|
+
if (typeof b !== "function" && b !== null)
|
|
11
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
10
12
|
extendStatics(d, b);
|
|
11
13
|
function __() { this.constructor = d; }
|
|
12
14
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
@@ -143,7 +145,7 @@ var Divider = styled_1.default('hr')({
|
|
|
143
145
|
var iconSize = 24;
|
|
144
146
|
var iconPadding = 16;
|
|
145
147
|
var StyledSystemIcon = styled_1.default(icon_1.SystemIcon)({
|
|
146
|
-
minWidth: iconSize + iconPadding,
|
|
148
|
+
minWidth: iconSize + iconPadding, // gives padding between LabelContainer, no matter the direction
|
|
147
149
|
});
|
|
148
150
|
var SecondaryStyledSystemIcon = styled_1.default(icon_1.SystemIcon)({
|
|
149
151
|
display: "flex",
|
|
@@ -197,12 +199,22 @@ var scrollIntoViewIfNeeded = function (elem, centerIfNeeded) {
|
|
|
197
199
|
}
|
|
198
200
|
};
|
|
199
201
|
/**
|
|
200
|
-
*
|
|
202
|
+
* `DeprecatedMenuItem` renders an `<li>` element with the correct attributes to ensure it is
|
|
203
|
+
* accessible. If you choose to implement your own custom menu items, be sure to use semantic `<li>`
|
|
204
|
+
* elements with the following attributes:
|
|
205
|
+
*
|
|
206
|
+
* - `role="menuitem"`
|
|
207
|
+
* - `tabindex={-1}`
|
|
208
|
+
* - `id`s following this pattern: `${MenuId}-${index}`
|
|
209
|
+
*
|
|
210
|
+
* As of Canvas Kit v8, Menu is being soft-deprecated. It will be hard-deprecated (completely
|
|
211
|
+
* removed) in v9. Please see the [upgrade
|
|
212
|
+
* guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page) for
|
|
213
|
+
* more information.
|
|
214
|
+
*
|
|
215
|
+
* Undocumented props are spread to the underlying `<li>` element.
|
|
201
216
|
*
|
|
202
|
-
*
|
|
203
|
-
* It will be hard-deprecated (completely removed) in v9. Please see the
|
|
204
|
-
* [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
|
|
205
|
-
* for more information.
|
|
217
|
+
* @deprecated
|
|
206
218
|
*/
|
|
207
219
|
var DeprecatedMenuItem = /** @class */ (function (_super) {
|
|
208
220
|
__extends(DeprecatedMenuItem, _super);
|
|
@@ -6,6 +6,49 @@ export interface PillProps extends BoxProps {
|
|
|
6
6
|
*/
|
|
7
7
|
variant?: 'default' | 'readOnly' | 'removable';
|
|
8
8
|
}
|
|
9
|
+
/**
|
|
10
|
+
* By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
|
|
11
|
+
* we mean that the Pill container is a focusable element (a `<button>`). All leading elements
|
|
12
|
+
* (icons or avatars) are intended to be descriptive, helping support the label. They should not
|
|
13
|
+
* receive focus.
|
|
14
|
+
*
|
|
15
|
+
* `Pill` is the container component. It also provides a React context model for its subcomponents.
|
|
16
|
+
* Based on the `variant` prop this component will render different styled `Pill`s.
|
|
17
|
+
*
|
|
18
|
+
* Example of read only:
|
|
19
|
+
*
|
|
20
|
+
* ```tsx
|
|
21
|
+
* <Pill variant="readOnly">This is a read only</Pill>
|
|
22
|
+
* ```
|
|
23
|
+
*
|
|
24
|
+
* Example of interactive:
|
|
25
|
+
*
|
|
26
|
+
* ```tsx
|
|
27
|
+
* <Pill onClick={() => console.log('clicked')}>
|
|
28
|
+
* <Pill.Avatar /> Regina Skeltor
|
|
29
|
+
* </Pill>
|
|
30
|
+
* ```
|
|
31
|
+
*
|
|
32
|
+
* Example of removable:
|
|
33
|
+
*
|
|
34
|
+
* ```tsx
|
|
35
|
+
* <Pill variant="removable">
|
|
36
|
+
* <Pill.Avatar /> Regina Skeltor
|
|
37
|
+
* <Pill.IconButton onClick={() => console.log('clicked')} />
|
|
38
|
+
* </Pill>
|
|
39
|
+
* ```
|
|
40
|
+
*
|
|
41
|
+
* If you set the `Pill` `variant` to `removable`, it will render a `<span>` element. You can then
|
|
42
|
+
* provide a `Pill.IconButton` that acts as the focus target. This creates a smaller, more
|
|
43
|
+
* intentional click target that prevents users from accidentally deleting an item.
|
|
44
|
+
*
|
|
45
|
+
* ```tsx
|
|
46
|
+
* <Pill variant="removable">
|
|
47
|
+
* Shoes
|
|
48
|
+
* <Pill.IconButton onClick={() => console.log('handle remove')} />
|
|
49
|
+
* </Pill>
|
|
50
|
+
* ```
|
|
51
|
+
*/
|
|
9
52
|
export declare const Pill: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillProps & Partial<{
|
|
10
53
|
maxWidth: string | number;
|
|
11
54
|
disabled: boolean;
|
|
@@ -18,7 +61,18 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
|
|
|
18
61
|
};
|
|
19
62
|
events: {};
|
|
20
63
|
}> & {
|
|
21
|
-
|
|
64
|
+
/**
|
|
65
|
+
* This component renders an avatar. It supports all props of the `Avatar` component.
|
|
66
|
+
*
|
|
67
|
+
* ```tsx
|
|
68
|
+
* <Pill variant="removable">
|
|
69
|
+
* <Pill.Avatar url={avatarUrl} />
|
|
70
|
+
* Regina Skeltor
|
|
71
|
+
* <Pill.IconButton onClick={() => console.log('handle remove')} />
|
|
72
|
+
* </Pill>
|
|
73
|
+
* ```
|
|
74
|
+
*/
|
|
75
|
+
Avatar: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillAvatar").PillAvatarProps, {
|
|
22
76
|
state: {
|
|
23
77
|
id: string;
|
|
24
78
|
maxWidth: string | number;
|
|
@@ -26,7 +80,30 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
|
|
|
26
80
|
};
|
|
27
81
|
events: {};
|
|
28
82
|
}>;
|
|
29
|
-
|
|
83
|
+
/**
|
|
84
|
+
* This component renders its `children` as the count.
|
|
85
|
+
*
|
|
86
|
+
* ```tsx
|
|
87
|
+
* <Pill onClick={() => console.warn('clicked')}>
|
|
88
|
+
* Shoes
|
|
89
|
+
* <Pill.Count>30</Pill.Count>
|
|
90
|
+
* </Pill>
|
|
91
|
+
* ```
|
|
92
|
+
*/
|
|
93
|
+
Count: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./PillCount").PillCountProps>;
|
|
94
|
+
/**
|
|
95
|
+
* This component renders an `icon`. It not be used with the `default` styling – not `readOnly`
|
|
96
|
+
* or `removable` variants. By default it renders a `plusIcon` but it can be overridden by
|
|
97
|
+
* providing an icon to the `icon` prop.
|
|
98
|
+
*
|
|
99
|
+
* ```tsx
|
|
100
|
+
* <Pill onClick={() => console.warn('clicked')}>
|
|
101
|
+
* <Pill.Icon />
|
|
102
|
+
* <Pill.Label>Regina Skeltor</Pill.Label>
|
|
103
|
+
* </Pill>
|
|
104
|
+
* ```
|
|
105
|
+
*/
|
|
106
|
+
Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillIcon").PillIconProps, {
|
|
30
107
|
state: {
|
|
31
108
|
id: string;
|
|
32
109
|
maxWidth: string | number;
|
|
@@ -34,8 +111,19 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
|
|
|
34
111
|
};
|
|
35
112
|
events: {};
|
|
36
113
|
}>;
|
|
37
|
-
|
|
38
|
-
|
|
114
|
+
/**
|
|
115
|
+
* This component renders a custom icon button. It is only intended to be used with the
|
|
116
|
+
* `removable` variant. By default, it renders a `xSmallIcon` but can be overridden by providing
|
|
117
|
+
* an icon to the `icon` prop.
|
|
118
|
+
*
|
|
119
|
+
* ```tsx
|
|
120
|
+
* <Pill variant="removable">
|
|
121
|
+
* Pink Shirts
|
|
122
|
+
* <Pill.IconButton onClick={() => console.warn('clicked')} />
|
|
123
|
+
* </Pill>
|
|
124
|
+
* ```
|
|
125
|
+
*/
|
|
126
|
+
IconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillIconButton").PillIconButtonProps, {
|
|
39
127
|
state: {
|
|
40
128
|
id: string;
|
|
41
129
|
maxWidth: string | number;
|
|
@@ -43,7 +131,17 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
|
|
|
43
131
|
};
|
|
44
132
|
events: {};
|
|
45
133
|
}>;
|
|
46
|
-
|
|
134
|
+
/**
|
|
135
|
+
* This component renders a `<span>` that automatically handles overflow by rendering a tooltip.
|
|
136
|
+
* There's no need to use this component directly since the overflow is handled for you automatically.
|
|
137
|
+
*
|
|
138
|
+
* ```tsx
|
|
139
|
+
* <Pill variant="readOnly">
|
|
140
|
+
* <Pill.Label>Read-only</Pill.Label>
|
|
141
|
+
* </Pill>
|
|
142
|
+
* ```
|
|
143
|
+
*/
|
|
144
|
+
Label: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillLabel").PillLabelProps, {
|
|
47
145
|
state: {
|
|
48
146
|
id: string;
|
|
49
147
|
maxWidth: string | number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAC,QAAQ,EAAmB,MAAM,kCAAkC,CAAC;AAW5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAsID,eAAO,MAAM,IAAI
|
|
1
|
+
{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAC,QAAQ,EAAmB,MAAM,kCAAkC,CAAC;AAW5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAsID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;IAIb;;;;;;;;;;OAUG;;;;;;;;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;;CAyDL,CAAC"}
|
|
@@ -140,14 +140,113 @@ var StyledNonInteractivePill = common_1.styled(StyledBasePill)({
|
|
|
140
140
|
overflow: 'revert',
|
|
141
141
|
position: 'relative',
|
|
142
142
|
});
|
|
143
|
+
/**
|
|
144
|
+
* By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
|
|
145
|
+
* we mean that the Pill container is a focusable element (a `<button>`). All leading elements
|
|
146
|
+
* (icons or avatars) are intended to be descriptive, helping support the label. They should not
|
|
147
|
+
* receive focus.
|
|
148
|
+
*
|
|
149
|
+
* `Pill` is the container component. It also provides a React context model for its subcomponents.
|
|
150
|
+
* Based on the `variant` prop this component will render different styled `Pill`s.
|
|
151
|
+
*
|
|
152
|
+
* Example of read only:
|
|
153
|
+
*
|
|
154
|
+
* ```tsx
|
|
155
|
+
* <Pill variant="readOnly">This is a read only</Pill>
|
|
156
|
+
* ```
|
|
157
|
+
*
|
|
158
|
+
* Example of interactive:
|
|
159
|
+
*
|
|
160
|
+
* ```tsx
|
|
161
|
+
* <Pill onClick={() => console.log('clicked')}>
|
|
162
|
+
* <Pill.Avatar /> Regina Skeltor
|
|
163
|
+
* </Pill>
|
|
164
|
+
* ```
|
|
165
|
+
*
|
|
166
|
+
* Example of removable:
|
|
167
|
+
*
|
|
168
|
+
* ```tsx
|
|
169
|
+
* <Pill variant="removable">
|
|
170
|
+
* <Pill.Avatar /> Regina Skeltor
|
|
171
|
+
* <Pill.IconButton onClick={() => console.log('clicked')} />
|
|
172
|
+
* </Pill>
|
|
173
|
+
* ```
|
|
174
|
+
*
|
|
175
|
+
* If you set the `Pill` `variant` to `removable`, it will render a `<span>` element. You can then
|
|
176
|
+
* provide a `Pill.IconButton` that acts as the focus target. This creates a smaller, more
|
|
177
|
+
* intentional click target that prevents users from accidentally deleting an item.
|
|
178
|
+
*
|
|
179
|
+
* ```tsx
|
|
180
|
+
* <Pill variant="removable">
|
|
181
|
+
* Shoes
|
|
182
|
+
* <Pill.IconButton onClick={() => console.log('handle remove')} />
|
|
183
|
+
* </Pill>
|
|
184
|
+
* ```
|
|
185
|
+
*/
|
|
143
186
|
exports.Pill = common_1.createContainer('button')({
|
|
187
|
+
displayName: 'Pill',
|
|
144
188
|
modelHook: usePillModel_1.usePillModel,
|
|
145
189
|
subComponents: {
|
|
146
|
-
|
|
190
|
+
/**
|
|
191
|
+
* This component renders an avatar. It supports all props of the `Avatar` component.
|
|
192
|
+
*
|
|
193
|
+
* ```tsx
|
|
194
|
+
* <Pill variant="removable">
|
|
195
|
+
* <Pill.Avatar url={avatarUrl} />
|
|
196
|
+
* Regina Skeltor
|
|
197
|
+
* <Pill.IconButton onClick={() => console.log('handle remove')} />
|
|
198
|
+
* </Pill>
|
|
199
|
+
* ```
|
|
200
|
+
*/
|
|
147
201
|
Avatar: PillAvatar_1.PillAvatar,
|
|
202
|
+
/**
|
|
203
|
+
* This component renders its `children` as the count.
|
|
204
|
+
*
|
|
205
|
+
* ```tsx
|
|
206
|
+
* <Pill onClick={() => console.warn('clicked')}>
|
|
207
|
+
* Shoes
|
|
208
|
+
* <Pill.Count>30</Pill.Count>
|
|
209
|
+
* </Pill>
|
|
210
|
+
* ```
|
|
211
|
+
*/
|
|
148
212
|
Count: PillCount_1.PillCount,
|
|
149
|
-
|
|
213
|
+
/**
|
|
214
|
+
* This component renders an `icon`. It not be used with the `default` styling – not `readOnly`
|
|
215
|
+
* or `removable` variants. By default it renders a `plusIcon` but it can be overridden by
|
|
216
|
+
* providing an icon to the `icon` prop.
|
|
217
|
+
*
|
|
218
|
+
* ```tsx
|
|
219
|
+
* <Pill onClick={() => console.warn('clicked')}>
|
|
220
|
+
* <Pill.Icon />
|
|
221
|
+
* <Pill.Label>Regina Skeltor</Pill.Label>
|
|
222
|
+
* </Pill>
|
|
223
|
+
* ```
|
|
224
|
+
*/
|
|
225
|
+
Icon: PillIcon_1.PillIcon,
|
|
226
|
+
/**
|
|
227
|
+
* This component renders a custom icon button. It is only intended to be used with the
|
|
228
|
+
* `removable` variant. By default, it renders a `xSmallIcon` but can be overridden by providing
|
|
229
|
+
* an icon to the `icon` prop.
|
|
230
|
+
*
|
|
231
|
+
* ```tsx
|
|
232
|
+
* <Pill variant="removable">
|
|
233
|
+
* Pink Shirts
|
|
234
|
+
* <Pill.IconButton onClick={() => console.warn('clicked')} />
|
|
235
|
+
* </Pill>
|
|
236
|
+
* ```
|
|
237
|
+
*/
|
|
150
238
|
IconButton: PillIconButton_1.PillIconButton,
|
|
239
|
+
/**
|
|
240
|
+
* This component renders a `<span>` that automatically handles overflow by rendering a tooltip.
|
|
241
|
+
* There's no need to use this component directly since the overflow is handled for you automatically.
|
|
242
|
+
*
|
|
243
|
+
* ```tsx
|
|
244
|
+
* <Pill variant="readOnly">
|
|
245
|
+
* <Pill.Label>Read-only</Pill.Label>
|
|
246
|
+
* </Pill>
|
|
247
|
+
* ```
|
|
248
|
+
*/
|
|
249
|
+
Label: PillLabel_1.PillLabel,
|
|
151
250
|
},
|
|
152
251
|
})(function (_a, Element, model) {
|
|
153
252
|
var _b = _a.variant, variant = _b === void 0 ? 'default' : _b, maxWidth = _a.maxWidth, elemProps = __rest(_a, ["variant", "maxWidth"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../segmented-control/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,sCAAsC,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../segmented-control/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,sCAAsC,CAAC;AACrD,cAAc,qCAAqC,CAAC;AACpD,OAAO,EAAC,uBAAuB,EAAC,MAAM,4BAA4B,CAAC"}
|
|
@@ -10,5 +10,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
10
10
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
11
|
};
|
|
12
12
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
+
exports.useSegmentedControlList = void 0;
|
|
13
14
|
__exportStar(require("./lib/SegmentedControl"), exports);
|
|
14
15
|
__exportStar(require("./lib/hooks/useSegmentedControlModel"), exports);
|
|
16
|
+
__exportStar(require("./lib/hooks/useSegmentedControlItem"), exports);
|
|
17
|
+
var SegmentedControlList_1 = require("./lib/SegmentedControlList");
|
|
18
|
+
Object.defineProperty(exports, "useSegmentedControlList", { enumerable: true, get: function () { return SegmentedControlList_1.useSegmentedControlList; } });
|