@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.
Files changed (154) hide show
  1. package/dist/commonjs/form-field/lib/FormField.d.ts +2 -2
  2. package/dist/commonjs/form-field/lib/FormFieldHint.d.ts +1 -1
  3. package/dist/commonjs/form-field/lib/FormFieldInput.d.ts +1 -1
  4. package/dist/commonjs/form-field/lib/hooks/useFormFieldHint.d.ts +1 -1
  5. package/dist/commonjs/form-field/lib/hooks/useFormFieldInput.d.ts +1 -1
  6. package/dist/commonjs/form-field/lib/hooks/useFormFieldLabel.d.ts +1 -1
  7. package/dist/commonjs/form-field/lib/hooks/useFormFieldModel.d.ts +2 -12
  8. package/dist/commonjs/form-field/lib/hooks/useFormFieldModel.d.ts.map +1 -1
  9. package/dist/commonjs/form-field/lib/hooks/useFormFieldModel.js +1 -3
  10. package/dist/commonjs/menu/lib/Menu.d.ts +12 -5
  11. package/dist/commonjs/menu/lib/Menu.d.ts.map +1 -1
  12. package/dist/commonjs/menu/lib/Menu.js +14 -5
  13. package/dist/commonjs/menu/lib/MenuItem.d.ts +15 -5
  14. package/dist/commonjs/menu/lib/MenuItem.d.ts.map +1 -1
  15. package/dist/commonjs/menu/lib/MenuItem.js +18 -6
  16. package/dist/commonjs/pill/lib/Pill.d.ts +103 -5
  17. package/dist/commonjs/pill/lib/Pill.d.ts.map +1 -1
  18. package/dist/commonjs/pill/lib/Pill.js +101 -2
  19. package/dist/commonjs/segmented-control/index.d.ts +2 -0
  20. package/dist/commonjs/segmented-control/index.d.ts.map +1 -1
  21. package/dist/commonjs/segmented-control/index.js +4 -0
  22. package/dist/commonjs/segmented-control/lib/SegmentedControl.d.ts +74 -38
  23. package/dist/commonjs/segmented-control/lib/SegmentedControl.d.ts.map +1 -1
  24. package/dist/commonjs/segmented-control/lib/SegmentedControl.js +36 -0
  25. package/dist/commonjs/segmented-control/lib/SegmentedControlItem.d.ts +1 -1
  26. package/dist/commonjs/segmented-control/lib/SegmentedControlList.d.ts +64 -1
  27. package/dist/commonjs/segmented-control/lib/SegmentedControlList.d.ts.map +1 -1
  28. package/dist/commonjs/segmented-control/lib/SegmentedControlList.js +3 -3
  29. package/dist/commonjs/segmented-control/lib/hooks/useSegmentedControlItem.d.ts +2 -2
  30. package/dist/commonjs/segmented-control/lib/hooks/useSegmentedControlModel.d.ts +39 -39
  31. package/dist/commonjs/segmented-control/lib/hooks/useSegmentedControlModel.js +2 -1
  32. package/dist/commonjs/select/lib/Select.js +2 -0
  33. package/dist/commonjs/side-panel/lib/SidePanel.d.ts +13 -26
  34. package/dist/commonjs/side-panel/lib/SidePanel.d.ts.map +1 -1
  35. package/dist/commonjs/side-panel/lib/SidePanel.js +73 -96
  36. package/dist/commonjs/side-panel/lib/SidePanelToggleButton.d.ts +17 -0
  37. package/dist/commonjs/side-panel/lib/SidePanelToggleButton.d.ts.map +1 -0
  38. package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js +88 -0
  39. package/dist/commonjs/side-panel/lib/hooks.d.ts +20 -0
  40. package/dist/commonjs/side-panel/lib/hooks.d.ts.map +1 -1
  41. package/dist/commonjs/side-panel/lib/hooks.js +20 -1
  42. package/dist/commonjs/status-indicator/index.d.ts +2 -0
  43. package/dist/commonjs/status-indicator/index.d.ts.map +1 -1
  44. package/dist/commonjs/status-indicator/index.js +4 -0
  45. package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts +28 -2
  46. package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts.map +1 -1
  47. package/dist/commonjs/status-indicator/lib/StatusIndicator.js +27 -1
  48. package/dist/commonjs/status-indicator/lib/StatusIndicatorIcon.d.ts +13 -0
  49. package/dist/commonjs/status-indicator/lib/StatusIndicatorIcon.d.ts.map +1 -1
  50. package/dist/commonjs/status-indicator/lib/StatusIndicatorIcon.js +3 -3
  51. package/dist/commonjs/text-area/lib/TextArea.d.ts +1 -1
  52. package/dist/commonjs/text-area/lib/TextArea.d.ts.map +1 -1
  53. package/dist/commonjs/text-area/lib/TextArea.js +1 -2
  54. package/dist/commonjs/text-input/lib/TextInput.d.ts +2 -2
  55. package/dist/commonjs/text-input/lib/TextInput.d.ts.map +1 -1
  56. package/dist/commonjs/text-input/lib/TextInput.js +1 -2
  57. package/dist/commonjs/text-input/lib/TextInputField.js +1 -1
  58. package/dist/commonjs/text-input/lib/hooks/useTextInputField.d.ts +1 -1
  59. package/dist/commonjs/text-input/lib/hooks/useTextInputModel.d.ts +1 -0
  60. package/dist/commonjs/text-input/lib/hooks/useTextInputModel.d.ts.map +1 -1
  61. package/dist/commonjs/text-input/lib/hooks/useTextInputModel.js +1 -0
  62. package/dist/es6/form-field/lib/FormField.d.ts +2 -2
  63. package/dist/es6/form-field/lib/FormFieldHint.d.ts +1 -1
  64. package/dist/es6/form-field/lib/FormFieldInput.d.ts +1 -1
  65. package/dist/es6/form-field/lib/hooks/useFormFieldHint.d.ts +1 -1
  66. package/dist/es6/form-field/lib/hooks/useFormFieldInput.d.ts +1 -1
  67. package/dist/es6/form-field/lib/hooks/useFormFieldLabel.d.ts +1 -1
  68. package/dist/es6/form-field/lib/hooks/useFormFieldModel.d.ts +2 -12
  69. package/dist/es6/form-field/lib/hooks/useFormFieldModel.d.ts.map +1 -1
  70. package/dist/es6/form-field/lib/hooks/useFormFieldModel.js +1 -3
  71. package/dist/es6/menu/lib/Menu.d.ts +12 -5
  72. package/dist/es6/menu/lib/Menu.d.ts.map +1 -1
  73. package/dist/es6/menu/lib/Menu.js +14 -5
  74. package/dist/es6/menu/lib/MenuItem.d.ts +15 -5
  75. package/dist/es6/menu/lib/MenuItem.d.ts.map +1 -1
  76. package/dist/es6/menu/lib/MenuItem.js +18 -6
  77. package/dist/es6/pill/lib/Pill.d.ts +103 -5
  78. package/dist/es6/pill/lib/Pill.d.ts.map +1 -1
  79. package/dist/es6/pill/lib/Pill.js +101 -2
  80. package/dist/es6/segmented-control/index.d.ts +2 -0
  81. package/dist/es6/segmented-control/index.d.ts.map +1 -1
  82. package/dist/es6/segmented-control/index.js +2 -0
  83. package/dist/es6/segmented-control/lib/SegmentedControl.d.ts +74 -38
  84. package/dist/es6/segmented-control/lib/SegmentedControl.d.ts.map +1 -1
  85. package/dist/es6/segmented-control/lib/SegmentedControl.js +36 -0
  86. package/dist/es6/segmented-control/lib/SegmentedControlItem.d.ts +1 -1
  87. package/dist/es6/segmented-control/lib/SegmentedControlList.d.ts +64 -1
  88. package/dist/es6/segmented-control/lib/SegmentedControlList.d.ts.map +1 -1
  89. package/dist/es6/segmented-control/lib/SegmentedControlList.js +1 -1
  90. package/dist/es6/segmented-control/lib/hooks/useSegmentedControlItem.d.ts +2 -2
  91. package/dist/es6/segmented-control/lib/hooks/useSegmentedControlModel.d.ts +39 -39
  92. package/dist/es6/segmented-control/lib/hooks/useSegmentedControlModel.js +2 -1
  93. package/dist/es6/select/lib/Select.js +2 -0
  94. package/dist/es6/side-panel/lib/SidePanel.d.ts +13 -26
  95. package/dist/es6/side-panel/lib/SidePanel.d.ts.map +1 -1
  96. package/dist/es6/side-panel/lib/SidePanel.js +75 -97
  97. package/dist/es6/side-panel/lib/SidePanelToggleButton.d.ts +17 -0
  98. package/dist/es6/side-panel/lib/SidePanelToggleButton.d.ts.map +1 -0
  99. package/dist/es6/side-panel/lib/SidePanelToggleButton.js +66 -0
  100. package/dist/es6/side-panel/lib/hooks.d.ts +20 -0
  101. package/dist/es6/side-panel/lib/hooks.d.ts.map +1 -1
  102. package/dist/es6/side-panel/lib/hooks.js +19 -0
  103. package/dist/es6/status-indicator/index.d.ts +2 -0
  104. package/dist/es6/status-indicator/index.d.ts.map +1 -1
  105. package/dist/es6/status-indicator/index.js +2 -0
  106. package/dist/es6/status-indicator/lib/StatusIndicator.d.ts +28 -2
  107. package/dist/es6/status-indicator/lib/StatusIndicator.d.ts.map +1 -1
  108. package/dist/es6/status-indicator/lib/StatusIndicator.js +27 -1
  109. package/dist/es6/status-indicator/lib/StatusIndicatorIcon.d.ts +13 -0
  110. package/dist/es6/status-indicator/lib/StatusIndicatorIcon.d.ts.map +1 -1
  111. package/dist/es6/status-indicator/lib/StatusIndicatorIcon.js +1 -1
  112. package/dist/es6/text-area/lib/TextArea.d.ts +1 -1
  113. package/dist/es6/text-area/lib/TextArea.d.ts.map +1 -1
  114. package/dist/es6/text-area/lib/TextArea.js +2 -3
  115. package/dist/es6/text-input/lib/TextInput.d.ts +2 -2
  116. package/dist/es6/text-input/lib/TextInput.d.ts.map +1 -1
  117. package/dist/es6/text-input/lib/TextInput.js +2 -3
  118. package/dist/es6/text-input/lib/TextInputField.js +3 -3
  119. package/dist/es6/text-input/lib/hooks/useTextInputField.d.ts +1 -1
  120. package/dist/es6/text-input/lib/hooks/useTextInputModel.d.ts +1 -0
  121. package/dist/es6/text-input/lib/hooks/useTextInputModel.d.ts.map +1 -1
  122. package/dist/es6/text-input/lib/hooks/useTextInputModel.js +1 -0
  123. package/form-field/lib/hooks/useFormFieldModel.tsx +1 -3
  124. package/menu/lib/Menu.tsx +12 -5
  125. package/menu/lib/MenuItem.tsx +15 -5
  126. package/package.json +4 -4
  127. package/pill/lib/Pill.tsx +101 -2
  128. package/segmented-control/index.ts +2 -0
  129. package/segmented-control/lib/SegmentedControl.tsx +36 -0
  130. package/segmented-control/lib/SegmentedControlList.tsx +1 -1
  131. package/side-panel/lib/SidePanel.tsx +119 -169
  132. package/side-panel/lib/SidePanelToggleButton.tsx +78 -0
  133. package/side-panel/lib/hooks.ts +20 -0
  134. package/status-indicator/index.ts +2 -0
  135. package/status-indicator/lib/StatusIndicator.tsx +27 -1
  136. package/status-indicator/lib/StatusIndicatorIcon.tsx +1 -1
  137. package/text-area/lib/TextArea.tsx +6 -3
  138. package/text-input/lib/TextInput.tsx +6 -3
  139. package/text-input/lib/TextInputField.tsx +3 -3
  140. package/text-input/lib/hooks/useTextInputModel.ts +1 -0
  141. package/dist/commonjs/text-area/lib/hooks/index.d.ts +0 -2
  142. package/dist/commonjs/text-area/lib/hooks/index.d.ts.map +0 -1
  143. package/dist/commonjs/text-area/lib/hooks/index.js +0 -13
  144. package/dist/commonjs/text-area/lib/hooks/useTextAreaModel.d.ts +0 -28
  145. package/dist/commonjs/text-area/lib/hooks/useTextAreaModel.d.ts.map +0 -1
  146. package/dist/commonjs/text-area/lib/hooks/useTextAreaModel.js +0 -5
  147. package/dist/es6/text-area/lib/hooks/index.d.ts +0 -2
  148. package/dist/es6/text-area/lib/hooks/index.d.ts.map +0 -1
  149. package/dist/es6/text-area/lib/hooks/index.js +0 -1
  150. package/dist/es6/text-area/lib/hooks/useTextAreaModel.d.ts +0 -28
  151. package/dist/es6/text-area/lib/hooks/useTextAreaModel.d.ts.map +0 -1
  152. package/dist/es6/text-area/lib/hooks/useTextAreaModel.js +0 -2
  153. package/text-area/lib/hooks/index.ts +0 -1
  154. 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").CommonStyleProps, {
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", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "fill" | "children" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
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", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "fill" | "children" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
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").CommonStyleProps, {
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?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
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?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
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?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
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 `useUniqueId()`
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 `useUniqueId()`
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;;;;OAIG;;IAEH;;;;;;;;;OASG;;IAEH;;;;OAIG;;;;;QArBH;;;;WAIG;;QAaH;;;;WAIG;;;;;IArBH;;;;OAIG;;IAEH;;;;;;;;;OASG;;IAEH;;;;OAIG;;;;IArBH;;;;OAIG;;IAaH;;;;OAIG;;;;;QArBH;;;;WAIG;;QAaH;;;;WAIG;;;;EAeL,CAAC"}
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 `useUniqueId()`
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
- * ### Deprecated Menu
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
- * As of Canvas Kit v8, this component is being soft-deprecated.
62
- * It will be hard-deprecated (completely removed) in v9. Please see the
63
- * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
64
- * for more information.
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;;;;;;;GAOG;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"}
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
- * ### Deprecated Menu
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
- * As of Canvas Kit v8, this component is being soft-deprecated.
73
- * It will be hard-deprecated (completely removed) in v9. Please see the
74
- * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
75
- * for more information.
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
- * ### Deprecated Menu Item
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
- * As of Canvas Kit v8, Menu is being soft-deprecated.
63
- * It will be hard-deprecated (completely removed) in v9. Please see the
64
- * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
65
- * for more information.
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;;;;;;;GAOG;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"}
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
- * ### Deprecated Menu Item
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
- * As of Canvas Kit v8, Menu is being soft-deprecated.
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
- Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillIcon").PillIconProps, {
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
- Avatar: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillAvatar").PillAvatarProps, {
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
- Count: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./PillCount").PillCountProps>;
38
- Label: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillLabel").PillLabelProps, {
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
- IconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillIconButton").PillIconButtonProps, {
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Df,CAAC"}
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
- Icon: PillIcon_1.PillIcon,
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
- Label: PillLabel_1.PillLabel,
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,3 +1,5 @@
1
1
  export * from './lib/SegmentedControl';
2
2
  export * from './lib/hooks/useSegmentedControlModel';
3
+ export * from './lib/hooks/useSegmentedControlItem';
4
+ export { useSegmentedControlList } from './lib/SegmentedControlList';
3
5
  //# sourceMappingURL=index.d.ts.map
@@ -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; } });