@workday/canvas-kit-preview-react 7.0.0-alpha.0-next.7 → 7.0.0-alpha.102-next.27
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/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.tsx +51 -22
- package/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.tsx +1 -1
- package/breadcrumbs/lib/Breadcrumbs/List/CurrentItem.tsx +1 -0
- package/breadcrumbs/lib/Breadcrumbs/List/ListItem.tsx +4 -0
- package/color-picker/lib/ColorPicker.tsx +3 -3
- package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.d.ts +3 -3
- package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.d.ts.map +1 -1
- package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.js +33 -5
- package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.js +1 -1
- package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/CurrentItem.d.ts.map +1 -1
- package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/CurrentItem.js +1 -1
- package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts.map +1 -1
- package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/ListItem.js +1 -1
- package/dist/commonjs/color-picker/lib/ColorPicker.js +2 -2
- package/dist/commonjs/form-field/lib/FormField.d.ts +46 -12
- package/dist/commonjs/form-field/lib/FormField.d.ts.map +1 -1
- package/dist/commonjs/form-field/lib/FormField.js +7 -11
- package/dist/commonjs/form-field/lib/FormFieldHint.d.ts +8 -12
- package/dist/commonjs/form-field/lib/FormFieldHint.d.ts.map +1 -1
- package/dist/commonjs/form-field/lib/FormFieldHint.js +11 -13
- package/dist/commonjs/form-field/lib/FormFieldInput.d.ts +8 -7
- package/dist/commonjs/form-field/lib/FormFieldInput.d.ts.map +1 -1
- package/dist/commonjs/form-field/lib/FormFieldInput.js +5 -19
- package/dist/commonjs/form-field/lib/FormFieldLabel.d.ts +8 -3
- package/dist/commonjs/form-field/lib/FormFieldLabel.d.ts.map +1 -1
- package/dist/commonjs/form-field/lib/FormFieldLabel.js +9 -11
- package/dist/commonjs/form-field/lib/hooks/useFormFieldHint.d.ts +8 -5
- package/dist/commonjs/form-field/lib/hooks/useFormFieldHint.d.ts.map +1 -1
- package/dist/commonjs/form-field/lib/hooks/useFormFieldHint.js +2 -1
- package/dist/commonjs/form-field/lib/hooks/useFormFieldInput.d.ts +8 -5
- package/dist/commonjs/form-field/lib/hooks/useFormFieldInput.d.ts.map +1 -1
- package/dist/commonjs/form-field/lib/hooks/useFormFieldInput.js +2 -1
- package/dist/commonjs/form-field/lib/hooks/useFormFieldLabel.d.ts +8 -5
- package/dist/commonjs/form-field/lib/hooks/useFormFieldLabel.d.ts.map +1 -1
- package/dist/commonjs/form-field/lib/hooks/useFormFieldLabel.js +2 -1
- package/dist/commonjs/form-field/lib/hooks/useFormFieldModel.d.ts +77 -15
- package/dist/commonjs/form-field/lib/hooks/useFormFieldModel.d.ts.map +1 -1
- package/dist/commonjs/form-field/lib/hooks/useFormFieldModel.js +41 -15
- package/dist/commonjs/index.d.ts +1 -0
- package/dist/commonjs/index.d.ts.map +1 -1
- package/dist/commonjs/index.js +1 -0
- package/dist/commonjs/menu/lib/Menu.js +1 -1
- package/dist/commonjs/pill/index.d.ts +3 -0
- package/dist/commonjs/pill/index.d.ts.map +1 -0
- package/dist/commonjs/pill/index.js +14 -0
- package/dist/commonjs/pill/lib/Pill.d.ts +58 -0
- package/dist/commonjs/pill/lib/Pill.d.ts.map +1 -0
- package/dist/commonjs/pill/lib/Pill.js +164 -0
- package/dist/commonjs/pill/lib/PillAvatar.d.ts +11 -0
- package/dist/commonjs/pill/lib/PillAvatar.d.ts.map +1 -0
- package/dist/commonjs/pill/lib/PillAvatar.js +29 -0
- package/dist/commonjs/pill/lib/PillCount.d.ts +5 -0
- package/dist/commonjs/pill/lib/PillCount.d.ts.map +1 -0
- package/dist/commonjs/pill/lib/PillCount.js +45 -0
- package/dist/commonjs/pill/lib/PillIcon.d.ts +17 -0
- package/dist/commonjs/pill/lib/PillIcon.d.ts.map +1 -0
- package/dist/commonjs/pill/lib/PillIcon.js +40 -0
- package/dist/commonjs/pill/lib/PillIconButton.d.ts +17 -0
- package/dist/commonjs/pill/lib/PillIconButton.d.ts.map +1 -0
- package/dist/commonjs/pill/lib/PillIconButton.js +88 -0
- package/dist/commonjs/pill/lib/PillLabel.d.ts +13 -0
- package/dist/commonjs/pill/lib/PillLabel.d.ts.map +1 -0
- package/dist/commonjs/pill/lib/PillLabel.js +47 -0
- package/dist/commonjs/pill/lib/usePillModel.d.ts +58 -0
- package/dist/commonjs/pill/lib/usePillModel.d.ts.map +1 -0
- package/dist/commonjs/pill/lib/usePillModel.js +31 -0
- package/dist/commonjs/side-panel/lib/SidePanel.d.ts +4 -4
- package/dist/commonjs/side-panel/lib/SidePanel.d.ts.map +1 -1
- package/dist/commonjs/side-panel/lib/SidePanel.js +24 -9
- package/dist/commonjs/text-area/lib/TextArea.d.ts +52 -11
- package/dist/commonjs/text-area/lib/TextArea.d.ts.map +1 -1
- package/dist/commonjs/text-area/lib/TextArea.js +9 -15
- package/dist/commonjs/text-area/lib/TextAreaField.d.ts +15 -7
- package/dist/commonjs/text-area/lib/TextAreaField.d.ts.map +1 -1
- package/dist/commonjs/text-area/lib/TextAreaField.js +16 -17
- package/dist/commonjs/text-area/lib/hooks/useTextAreaModel.d.ts +27 -7
- package/dist/commonjs/text-area/lib/hooks/useTextAreaModel.d.ts.map +1 -1
- package/dist/commonjs/text-input/lib/TextInput.d.ts +59 -11
- package/dist/commonjs/text-input/lib/TextInput.d.ts.map +1 -1
- package/dist/commonjs/text-input/lib/TextInput.js +9 -15
- package/dist/commonjs/text-input/lib/TextInputField.d.ts +15 -7
- package/dist/commonjs/text-input/lib/TextInputField.d.ts.map +1 -1
- package/dist/commonjs/text-input/lib/TextInputField.js +15 -29
- package/dist/commonjs/text-input/lib/hooks/useTextInputField.d.ts +8 -1
- package/dist/commonjs/text-input/lib/hooks/useTextInputField.d.ts.map +1 -1
- package/dist/commonjs/text-input/lib/hooks/useTextInputField.js +2 -1
- package/dist/commonjs/text-input/lib/hooks/useTextInputModel.d.ts +27 -7
- package/dist/commonjs/text-input/lib/hooks/useTextInputModel.d.ts.map +1 -1
- package/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.d.ts +3 -3
- package/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.d.ts.map +1 -1
- package/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.js +35 -7
- package/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.js +1 -1
- package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/CurrentItem.d.ts.map +1 -1
- package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/CurrentItem.js +1 -1
- package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts.map +1 -1
- package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/ListItem.js +1 -1
- package/dist/es6/color-picker/lib/ColorPicker.js +3 -3
- package/dist/es6/form-field/lib/FormField.d.ts +46 -12
- package/dist/es6/form-field/lib/FormField.d.ts.map +1 -1
- package/dist/es6/form-field/lib/FormField.js +8 -12
- package/dist/es6/form-field/lib/FormFieldHint.d.ts +8 -12
- package/dist/es6/form-field/lib/FormFieldHint.d.ts.map +1 -1
- package/dist/es6/form-field/lib/FormFieldHint.js +13 -15
- package/dist/es6/form-field/lib/FormFieldInput.d.ts +8 -7
- package/dist/es6/form-field/lib/FormFieldInput.d.ts.map +1 -1
- package/dist/es6/form-field/lib/FormFieldInput.js +7 -21
- package/dist/es6/form-field/lib/FormFieldLabel.d.ts +8 -3
- package/dist/es6/form-field/lib/FormFieldLabel.d.ts.map +1 -1
- package/dist/es6/form-field/lib/FormFieldLabel.js +11 -13
- package/dist/es6/form-field/lib/hooks/useFormFieldHint.d.ts +8 -5
- package/dist/es6/form-field/lib/hooks/useFormFieldHint.d.ts.map +1 -1
- package/dist/es6/form-field/lib/hooks/useFormFieldHint.js +3 -2
- package/dist/es6/form-field/lib/hooks/useFormFieldInput.d.ts +8 -5
- package/dist/es6/form-field/lib/hooks/useFormFieldInput.d.ts.map +1 -1
- package/dist/es6/form-field/lib/hooks/useFormFieldInput.js +3 -2
- package/dist/es6/form-field/lib/hooks/useFormFieldLabel.d.ts +8 -5
- package/dist/es6/form-field/lib/hooks/useFormFieldLabel.d.ts.map +1 -1
- package/dist/es6/form-field/lib/hooks/useFormFieldLabel.js +3 -2
- package/dist/es6/form-field/lib/hooks/useFormFieldModel.d.ts +77 -15
- package/dist/es6/form-field/lib/hooks/useFormFieldModel.d.ts.map +1 -1
- package/dist/es6/form-field/lib/hooks/useFormFieldModel.js +42 -15
- package/dist/es6/index.d.ts +1 -0
- package/dist/es6/index.d.ts.map +1 -1
- package/dist/es6/index.js +1 -0
- package/dist/es6/menu/lib/Menu.js +1 -1
- package/dist/es6/pill/index.d.ts +3 -0
- package/dist/es6/pill/index.d.ts.map +1 -0
- package/dist/es6/pill/index.js +2 -0
- package/dist/es6/pill/lib/Pill.d.ts +58 -0
- package/dist/es6/pill/lib/Pill.d.ts.map +1 -0
- package/dist/es6/pill/lib/Pill.js +158 -0
- package/dist/es6/pill/lib/PillAvatar.d.ts +12 -0
- package/dist/es6/pill/lib/PillAvatar.d.ts.map +1 -0
- package/dist/es6/pill/lib/PillAvatar.js +23 -0
- package/dist/es6/pill/lib/PillCount.d.ts +5 -0
- package/dist/es6/pill/lib/PillCount.d.ts.map +1 -0
- package/dist/es6/pill/lib/PillCount.js +39 -0
- package/dist/es6/pill/lib/PillIcon.d.ts +18 -0
- package/dist/es6/pill/lib/PillIcon.d.ts.map +1 -0
- package/dist/es6/pill/lib/PillIcon.js +34 -0
- package/dist/es6/pill/lib/PillIconButton.d.ts +18 -0
- package/dist/es6/pill/lib/PillIconButton.d.ts.map +1 -0
- package/dist/es6/pill/lib/PillIconButton.js +82 -0
- package/dist/es6/pill/lib/PillLabel.d.ts +14 -0
- package/dist/es6/pill/lib/PillLabel.d.ts.map +1 -0
- package/dist/es6/pill/lib/PillLabel.js +41 -0
- package/dist/es6/pill/lib/usePillModel.d.ts +58 -0
- package/dist/es6/pill/lib/usePillModel.d.ts.map +1 -0
- package/dist/es6/pill/lib/usePillModel.js +28 -0
- package/dist/es6/side-panel/lib/SidePanel.d.ts +4 -4
- package/dist/es6/side-panel/lib/SidePanel.d.ts.map +1 -1
- package/dist/es6/side-panel/lib/SidePanel.js +26 -11
- package/dist/es6/text-area/lib/TextArea.d.ts +52 -11
- package/dist/es6/text-area/lib/TextArea.d.ts.map +1 -1
- package/dist/es6/text-area/lib/TextArea.js +10 -16
- package/dist/es6/text-area/lib/TextAreaField.d.ts +15 -7
- package/dist/es6/text-area/lib/TextAreaField.d.ts.map +1 -1
- package/dist/es6/text-area/lib/TextAreaField.js +17 -18
- package/dist/es6/text-area/lib/hooks/useTextAreaModel.d.ts +27 -7
- package/dist/es6/text-area/lib/hooks/useTextAreaModel.d.ts.map +1 -1
- package/dist/es6/text-input/lib/TextInput.d.ts +59 -11
- package/dist/es6/text-input/lib/TextInput.d.ts.map +1 -1
- package/dist/es6/text-input/lib/TextInput.js +10 -16
- package/dist/es6/text-input/lib/TextInputField.d.ts +15 -7
- package/dist/es6/text-input/lib/TextInputField.d.ts.map +1 -1
- package/dist/es6/text-input/lib/TextInputField.js +17 -31
- package/dist/es6/text-input/lib/hooks/useTextInputField.d.ts +8 -1
- package/dist/es6/text-input/lib/hooks/useTextInputField.d.ts.map +1 -1
- package/dist/es6/text-input/lib/hooks/useTextInputField.js +3 -2
- package/dist/es6/text-input/lib/hooks/useTextInputModel.d.ts +27 -7
- package/dist/es6/text-input/lib/hooks/useTextInputModel.d.ts.map +1 -1
- package/form-field/lib/FormField.tsx +13 -28
- package/form-field/lib/FormFieldHint.tsx +21 -32
- package/form-field/lib/FormFieldInput.tsx +7 -14
- package/form-field/lib/FormFieldLabel.tsx +17 -21
- package/form-field/lib/hooks/useFormFieldHint.tsx +3 -3
- package/form-field/lib/hooks/useFormFieldInput.tsx +3 -3
- package/form-field/lib/hooks/useFormFieldLabel.tsx +3 -3
- package/form-field/lib/hooks/useFormFieldModel.tsx +32 -53
- package/index.ts +1 -0
- package/menu/lib/Menu.tsx +1 -1
- package/package.json +9 -18
- package/pill/LICENSE +52 -0
- package/pill/README.md +5 -0
- package/pill/index.ts +2 -0
- package/pill/lib/Pill.tsx +218 -0
- package/pill/lib/PillAvatar.tsx +26 -0
- package/pill/lib/PillCount.tsx +39 -0
- package/pill/lib/PillIcon.tsx +32 -0
- package/pill/lib/PillIconButton.tsx +96 -0
- package/pill/lib/PillLabel.tsx +35 -0
- package/pill/lib/usePillModel.tsx +21 -0
- package/pill/package.json +5 -0
- package/side-panel/lib/SidePanel.tsx +36 -21
- package/text-area/lib/TextArea.tsx +15 -29
- package/text-area/lib/TextAreaField.tsx +30 -44
- package/text-area/lib/hooks/useTextAreaModel.ts +1 -3
- package/text-input/lib/TextInput.tsx +15 -29
- package/text-input/lib/TextInputField.tsx +31 -43
- package/text-input/lib/hooks/useTextInputField.tsx +3 -2
- package/text-input/lib/hooks/useTextInputModel.ts +1 -3
- package/dist/commonjs/text-area/lib/TextAreaHint.d.ts +0 -5
- package/dist/commonjs/text-area/lib/TextAreaHint.d.ts.map +0 -1
- package/dist/commonjs/text-area/lib/TextAreaHint.js +0 -5
- package/dist/commonjs/text-area/lib/TextAreaLabel.d.ts +0 -5
- package/dist/commonjs/text-area/lib/TextAreaLabel.d.ts.map +0 -1
- package/dist/commonjs/text-area/lib/TextAreaLabel.js +0 -5
- package/dist/commonjs/text-input/lib/TextInputHint.d.ts +0 -5
- package/dist/commonjs/text-input/lib/TextInputHint.d.ts.map +0 -1
- package/dist/commonjs/text-input/lib/TextInputHint.js +0 -5
- package/dist/commonjs/text-input/lib/TextInputLabel.d.ts +0 -5
- package/dist/commonjs/text-input/lib/TextInputLabel.d.ts.map +0 -1
- package/dist/commonjs/text-input/lib/TextInputLabel.js +0 -5
- package/dist/es6/text-area/lib/TextAreaHint.d.ts +0 -5
- package/dist/es6/text-area/lib/TextAreaHint.d.ts.map +0 -1
- package/dist/es6/text-area/lib/TextAreaHint.js +0 -2
- package/dist/es6/text-area/lib/TextAreaLabel.d.ts +0 -5
- package/dist/es6/text-area/lib/TextAreaLabel.d.ts.map +0 -1
- package/dist/es6/text-area/lib/TextAreaLabel.js +0 -2
- package/dist/es6/text-input/lib/TextInputHint.d.ts +0 -5
- package/dist/es6/text-input/lib/TextInputHint.d.ts.map +0 -1
- package/dist/es6/text-input/lib/TextInputHint.js +0 -2
- package/dist/es6/text-input/lib/TextInputLabel.d.ts +0 -5
- package/dist/es6/text-input/lib/TextInputLabel.d.ts.map +0 -1
- package/dist/es6/text-input/lib/TextInputLabel.js +0 -2
- package/text-area/lib/TextAreaHint.tsx +0 -6
- package/text-area/lib/TextAreaLabel.tsx +0 -6
- package/text-input/lib/TextInputHint.tsx +0 -6
- package/text-input/lib/TextInputLabel.tsx +0 -6
- package/ts3.5/dist/commonjs/breadcrumbs/index.d.ts +0 -5
- package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.d.ts +0 -20
- package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.d.ts +0 -38
- package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/MenuItemLink.d.ts +0 -14
- package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/hooks.d.ts +0 -13
- package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/index.d.ts +0 -8
- package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/Collapsible.d.ts +0 -16
- package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/CurrentItem.d.ts +0 -11
- package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/Link.d.ts +0 -19
- package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts +0 -4
- package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/hooks.d.ts +0 -19
- package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/index.d.ts +0 -4
- package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/styles.d.ts +0 -3
- package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Nav.d.ts +0 -11
- package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/hooks.d.ts +0 -5
- package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/index.d.ts +0 -9
- package/ts3.5/dist/commonjs/breadcrumbs/lib/Breadcrumbs/types.d.ts +0 -8
- package/ts3.5/dist/commonjs/color-picker/index.d.ts +0 -2
- package/ts3.5/dist/commonjs/color-picker/lib/ColorPicker.d.ts +0 -55
- package/ts3.5/dist/commonjs/color-picker/lib/parts/ColorReset.d.ts +0 -7
- package/ts3.5/dist/commonjs/color-picker/lib/parts/SwatchBook.d.ts +0 -7
- package/ts3.5/dist/commonjs/form-field/index.d.ts +0 -3
- package/ts3.5/dist/commonjs/form-field/lib/FormField.d.ts +0 -31
- package/ts3.5/dist/commonjs/form-field/lib/FormFieldHint.d.ts +0 -13
- package/ts3.5/dist/commonjs/form-field/lib/FormFieldInput.d.ts +0 -8
- package/ts3.5/dist/commonjs/form-field/lib/FormFieldLabel.d.ts +0 -18
- package/ts3.5/dist/commonjs/form-field/lib/hooks/index.d.ts +0 -6
- package/ts3.5/dist/commonjs/form-field/lib/hooks/useFormFieldHint.d.ts +0 -14
- package/ts3.5/dist/commonjs/form-field/lib/hooks/useFormFieldInput.d.ts +0 -17
- package/ts3.5/dist/commonjs/form-field/lib/hooks/useFormFieldLabel.d.ts +0 -14
- package/ts3.5/dist/commonjs/form-field/lib/hooks/useFormFieldModel.d.ts +0 -36
- package/ts3.5/dist/commonjs/form-field/lib/hooks/useFormFieldOrientation.d.ts +0 -10
- package/ts3.5/dist/commonjs/index.d.ts +0 -9
- package/ts3.5/dist/commonjs/menu/index.d.ts +0 -6
- package/ts3.5/dist/commonjs/menu/lib/Menu.d.ts +0 -61
- package/ts3.5/dist/commonjs/menu/lib/MenuItem.d.ts +0 -53
- package/ts3.5/dist/commonjs/select/index.d.ts +0 -6
- package/ts3.5/dist/commonjs/select/lib/Select.d.ts +0 -25
- package/ts3.5/dist/commonjs/select/lib/SelectBase.d.ts +0 -123
- package/ts3.5/dist/commonjs/select/lib/SelectMenu.d.ts +0 -42
- package/ts3.5/dist/commonjs/select/lib/SelectOption.d.ts +0 -33
- package/ts3.5/dist/commonjs/select/lib/scrolling.d.ts +0 -2
- package/ts3.5/dist/commonjs/select/lib/types.d.ts +0 -33
- package/ts3.5/dist/commonjs/select/lib/utils.d.ts +0 -4
- package/ts3.5/dist/commonjs/side-panel/index.d.ts +0 -6
- package/ts3.5/dist/commonjs/side-panel/lib/SidePanel.d.ts +0 -86
- package/ts3.5/dist/commonjs/side-panel/lib/hooks.d.ts +0 -80
- package/ts3.5/dist/commonjs/text-area/index.d.ts +0 -2
- package/ts3.5/dist/commonjs/text-area/lib/TextArea.d.ts +0 -22
- package/ts3.5/dist/commonjs/text-area/lib/TextAreaField.d.ts +0 -8
- package/ts3.5/dist/commonjs/text-area/lib/TextAreaHint.d.ts +0 -5
- package/ts3.5/dist/commonjs/text-area/lib/TextAreaLabel.d.ts +0 -5
- package/ts3.5/dist/commonjs/text-area/lib/hooks/index.d.ts +0 -2
- package/ts3.5/dist/commonjs/text-area/lib/hooks/useTextAreaModel.d.ts +0 -8
- package/ts3.5/dist/commonjs/text-input/index.d.ts +0 -3
- package/ts3.5/dist/commonjs/text-input/lib/TextInput.d.ts +0 -22
- package/ts3.5/dist/commonjs/text-input/lib/TextInputField.d.ts +0 -8
- package/ts3.5/dist/commonjs/text-input/lib/TextInputHint.d.ts +0 -5
- package/ts3.5/dist/commonjs/text-input/lib/TextInputLabel.d.ts +0 -5
- package/ts3.5/dist/commonjs/text-input/lib/hooks/index.d.ts +0 -3
- package/ts3.5/dist/commonjs/text-input/lib/hooks/useTextInputField.d.ts +0 -9
- package/ts3.5/dist/commonjs/text-input/lib/hooks/useTextInputModel.d.ts +0 -8
- package/ts3.5/dist/es6/breadcrumbs/index.d.ts +0 -5
- package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.d.ts +0 -20
- package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.d.ts +0 -38
- package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/MenuItemLink.d.ts +0 -14
- package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/hooks.d.ts +0 -13
- package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/Dropdown/index.d.ts +0 -8
- package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/List/Collapsible.d.ts +0 -16
- package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/List/CurrentItem.d.ts +0 -11
- package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/List/Link.d.ts +0 -19
- package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts +0 -4
- package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/List/hooks.d.ts +0 -19
- package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/List/index.d.ts +0 -4
- package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/List/styles.d.ts +0 -3
- package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/Nav.d.ts +0 -11
- package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/hooks.d.ts +0 -5
- package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/index.d.ts +0 -9
- package/ts3.5/dist/es6/breadcrumbs/lib/Breadcrumbs/types.d.ts +0 -8
- package/ts3.5/dist/es6/color-picker/index.d.ts +0 -2
- package/ts3.5/dist/es6/color-picker/lib/ColorPicker.d.ts +0 -55
- package/ts3.5/dist/es6/color-picker/lib/parts/ColorReset.d.ts +0 -7
- package/ts3.5/dist/es6/color-picker/lib/parts/SwatchBook.d.ts +0 -7
- package/ts3.5/dist/es6/form-field/index.d.ts +0 -3
- package/ts3.5/dist/es6/form-field/lib/FormField.d.ts +0 -31
- package/ts3.5/dist/es6/form-field/lib/FormFieldHint.d.ts +0 -13
- package/ts3.5/dist/es6/form-field/lib/FormFieldInput.d.ts +0 -8
- package/ts3.5/dist/es6/form-field/lib/FormFieldLabel.d.ts +0 -18
- package/ts3.5/dist/es6/form-field/lib/hooks/index.d.ts +0 -6
- package/ts3.5/dist/es6/form-field/lib/hooks/useFormFieldHint.d.ts +0 -14
- package/ts3.5/dist/es6/form-field/lib/hooks/useFormFieldInput.d.ts +0 -17
- package/ts3.5/dist/es6/form-field/lib/hooks/useFormFieldLabel.d.ts +0 -14
- package/ts3.5/dist/es6/form-field/lib/hooks/useFormFieldModel.d.ts +0 -36
- package/ts3.5/dist/es6/form-field/lib/hooks/useFormFieldOrientation.d.ts +0 -10
- package/ts3.5/dist/es6/index.d.ts +0 -9
- package/ts3.5/dist/es6/menu/index.d.ts +0 -6
- package/ts3.5/dist/es6/menu/lib/Menu.d.ts +0 -61
- package/ts3.5/dist/es6/menu/lib/MenuItem.d.ts +0 -53
- package/ts3.5/dist/es6/select/index.d.ts +0 -6
- package/ts3.5/dist/es6/select/lib/Select.d.ts +0 -25
- package/ts3.5/dist/es6/select/lib/SelectBase.d.ts +0 -123
- package/ts3.5/dist/es6/select/lib/SelectMenu.d.ts +0 -42
- package/ts3.5/dist/es6/select/lib/SelectOption.d.ts +0 -33
- package/ts3.5/dist/es6/select/lib/scrolling.d.ts +0 -2
- package/ts3.5/dist/es6/select/lib/types.d.ts +0 -33
- package/ts3.5/dist/es6/select/lib/utils.d.ts +0 -4
- package/ts3.5/dist/es6/side-panel/index.d.ts +0 -6
- package/ts3.5/dist/es6/side-panel/lib/SidePanel.d.ts +0 -86
- package/ts3.5/dist/es6/side-panel/lib/hooks.d.ts +0 -80
- package/ts3.5/dist/es6/text-area/index.d.ts +0 -2
- package/ts3.5/dist/es6/text-area/lib/TextArea.d.ts +0 -22
- package/ts3.5/dist/es6/text-area/lib/TextAreaField.d.ts +0 -8
- package/ts3.5/dist/es6/text-area/lib/TextAreaHint.d.ts +0 -5
- package/ts3.5/dist/es6/text-area/lib/TextAreaLabel.d.ts +0 -5
- package/ts3.5/dist/es6/text-area/lib/hooks/index.d.ts +0 -2
- package/ts3.5/dist/es6/text-area/lib/hooks/useTextAreaModel.d.ts +0 -8
- package/ts3.5/dist/es6/text-input/index.d.ts +0 -3
- package/ts3.5/dist/es6/text-input/lib/TextInput.d.ts +0 -22
- package/ts3.5/dist/es6/text-input/lib/TextInputField.d.ts +0 -8
- package/ts3.5/dist/es6/text-input/lib/TextInputHint.d.ts +0 -5
- package/ts3.5/dist/es6/text-input/lib/TextInputLabel.d.ts +0 -5
- package/ts3.5/dist/es6/text-input/lib/hooks/index.d.ts +0 -3
- package/ts3.5/dist/es6/text-input/lib/hooks/useTextInputField.d.ts +0 -9
- package/ts3.5/dist/es6/text-input/lib/hooks/useTextInputModel.d.ts +0 -8
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
/** @jsxRuntime classic */
|
|
2
2
|
/** @jsx jsx */
|
|
3
3
|
import * as React from 'react';
|
|
4
|
-
import {styled, useIsRTL
|
|
5
|
-
import {css, jsx, keyframes} from '@emotion/react';
|
|
6
|
-
import {
|
|
7
|
-
import {space, colors} from '@workday/canvas-kit-react/tokens';
|
|
4
|
+
import {styled, useIsRTL} from '@workday/canvas-kit-react/common';
|
|
5
|
+
import {css, jsx, keyframes, CSSObject} from '@emotion/react';
|
|
6
|
+
import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
|
|
7
|
+
import {space, colors, depth} from '@workday/canvas-kit-react/tokens';
|
|
8
8
|
import {transformationImportIcon} from '@workday/canvas-system-icons-web';
|
|
9
9
|
import {Tooltip} from '@workday/canvas-kit-react/tooltip';
|
|
10
|
-
import {Box} from '@workday/canvas-kit-react/layout';
|
|
11
10
|
|
|
12
11
|
export type SidePanelVariant = 'standard' | 'alternate';
|
|
13
12
|
export type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
|
|
@@ -57,7 +56,7 @@ export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
57
56
|
*/
|
|
58
57
|
onStateTransition?: (state?: SidePanelTransitionStates) => void;
|
|
59
58
|
/**
|
|
60
|
-
* The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level
|
|
59
|
+
* The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 6 depth.
|
|
61
60
|
*
|
|
62
61
|
* @default 'standard'
|
|
63
62
|
*/
|
|
@@ -89,7 +88,17 @@ const createKeyframes = (from: number | string, to: number | string) => {
|
|
|
89
88
|
`;
|
|
90
89
|
};
|
|
91
90
|
|
|
92
|
-
const
|
|
91
|
+
const containerVariantStyle: Record<SidePanelVariant, CSSObject> = {
|
|
92
|
+
alternate: {
|
|
93
|
+
backgroundColor: colors.frenchVanilla100,
|
|
94
|
+
...depth[5],
|
|
95
|
+
},
|
|
96
|
+
standard: {
|
|
97
|
+
backgroundColor: colors.soap100,
|
|
98
|
+
},
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
const Panel = styled('section')<Pick<SidePanelProps, 'as'>>({
|
|
93
102
|
overflow: 'hidden',
|
|
94
103
|
position: 'relative',
|
|
95
104
|
boxSizing: 'border-box',
|
|
@@ -112,7 +121,7 @@ const SidePanel = ({
|
|
|
112
121
|
onExpandedChange,
|
|
113
122
|
onStateTransition,
|
|
114
123
|
origin = 'left',
|
|
115
|
-
|
|
124
|
+
variant = 'standard',
|
|
116
125
|
touched,
|
|
117
126
|
...elemProps
|
|
118
127
|
}: SidePanelProps) => {
|
|
@@ -169,15 +178,20 @@ const SidePanel = ({
|
|
|
169
178
|
};
|
|
170
179
|
|
|
171
180
|
return (
|
|
172
|
-
<
|
|
181
|
+
<Panel
|
|
173
182
|
as={as}
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
183
|
+
css={[
|
|
184
|
+
{
|
|
185
|
+
width: expanded ? expandedWidth : collapsedWidth,
|
|
186
|
+
maxWidth: expanded ? expandedWidth : collapsedWidth,
|
|
187
|
+
// mounted.current will be false on the first render, thus you won't get an unwanted animation here
|
|
188
|
+
// Will animate again if you force a re-render (like in Storybook)
|
|
189
|
+
animation: touched
|
|
190
|
+
? `${expanded ? motion.expand : motion.collapse} 200ms ease-out`
|
|
191
|
+
: undefined,
|
|
192
|
+
},
|
|
193
|
+
containerVariantStyle[variant],
|
|
194
|
+
]}
|
|
181
195
|
onAnimationEnd={handleAnimationEnd}
|
|
182
196
|
onAnimationStart={handleAnimationStart}
|
|
183
197
|
{...elemProps}
|
|
@@ -190,11 +204,11 @@ const SidePanel = ({
|
|
|
190
204
|
>
|
|
191
205
|
{children}
|
|
192
206
|
</SidePanelContext.Provider>
|
|
193
|
-
</
|
|
207
|
+
</Panel>
|
|
194
208
|
);
|
|
195
209
|
};
|
|
196
210
|
|
|
197
|
-
export type ToggleButtonProps =
|
|
211
|
+
export type ToggleButtonProps = TertiaryButtonProps & {
|
|
198
212
|
/**
|
|
199
213
|
* The tooltip text to expand the side panel
|
|
200
214
|
* @default 'Expand'
|
|
@@ -211,7 +225,7 @@ export type ToggleButtonProps = IconButtonProps & {
|
|
|
211
225
|
* A toggle button styled specifically for the side panel container.
|
|
212
226
|
*/
|
|
213
227
|
const ToggleButton = ({
|
|
214
|
-
variant =
|
|
228
|
+
variant = undefined,
|
|
215
229
|
icon = transformationImportIcon,
|
|
216
230
|
tooltipTextExpand: expandLabel = 'Expand',
|
|
217
231
|
tooltipTextCollapse: collapseLabel = 'Collapse',
|
|
@@ -235,9 +249,10 @@ const ToggleButton = ({
|
|
|
235
249
|
const buttonStyle = css({
|
|
236
250
|
position: 'absolute',
|
|
237
251
|
top: space.m,
|
|
252
|
+
width: space.l,
|
|
238
253
|
right: context.state === 'collapsed' ? 0 : rtlOrigin === 'left' ? space.s : undefined,
|
|
239
254
|
left: context.state === 'collapsed' ? 0 : rtlOrigin === 'right' ? space.s : undefined,
|
|
240
|
-
margin: context.state === 'collapsed' ? 'auto' : 0, // to override the -8px margin for
|
|
255
|
+
margin: context.state === 'collapsed' ? 'auto' : 0, // to override the -8px margin for TertiaryButton.Plain
|
|
241
256
|
transform:
|
|
242
257
|
context.state === 'collapsed' || context.state === 'collapsing'
|
|
243
258
|
? `scaleX(${rtlOrigin === 'left' ? '1' : '-1'})`
|
|
@@ -246,7 +261,7 @@ const ToggleButton = ({
|
|
|
246
261
|
|
|
247
262
|
return (
|
|
248
263
|
<Tooltip title={context.state === 'collapsed' ? expandLabel : collapseLabel} type="muted">
|
|
249
|
-
<
|
|
264
|
+
<TertiaryButton type="button" css={buttonStyle} icon={icon} variant={variant} {...rest} />
|
|
250
265
|
</Tooltip>
|
|
251
266
|
);
|
|
252
267
|
};
|
|
@@ -1,47 +1,33 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
FormField,
|
|
6
|
-
FormFieldModelContext,
|
|
7
|
-
useFormFieldOrientation,
|
|
8
|
-
} from '@workday/canvas-kit-preview-react/form-field';
|
|
3
|
+
import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
|
|
4
|
+
import {FormField, useFormFieldOrientation} from '@workday/canvas-kit-preview-react/form-field';
|
|
9
5
|
import {Stack} from '@workday/canvas-kit-react/layout';
|
|
10
6
|
|
|
11
|
-
import {
|
|
7
|
+
import {useTextAreaModel} from './hooks';
|
|
12
8
|
import {TextAreaField} from './TextAreaField';
|
|
13
|
-
import {TextAreaLabel} from './TextAreaLabel';
|
|
14
|
-
import {TextAreaHint} from './TextAreaHint';
|
|
15
|
-
|
|
16
|
-
export const TextAreaModelContext = FormFieldModelContext;
|
|
17
9
|
|
|
18
10
|
export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
|
|
19
|
-
model?: TextAreaModel;
|
|
20
11
|
/**
|
|
21
12
|
* Children of the Text Input. Should contain a `<TextArea.Field>`, a `<TextArea.Label>` and an optional `<TextArea.Hint>`
|
|
22
13
|
*/
|
|
23
14
|
children: React.ReactNode;
|
|
24
15
|
}
|
|
25
16
|
|
|
26
|
-
export const TextArea =
|
|
17
|
+
export const TextArea = createContainer('div')({
|
|
27
18
|
displayName: 'TextArea',
|
|
28
|
-
|
|
29
|
-
const {hasError, id, isRequired, ...elemProps} = props;
|
|
30
|
-
const value = useDefaultModel(model, {hasError, id, isRequired}, useTextAreaModel);
|
|
31
|
-
|
|
32
|
-
const layoutProps = useFormFieldOrientation(orientation);
|
|
33
|
-
|
|
34
|
-
return (
|
|
35
|
-
<TextAreaModelContext.Provider value={value}>
|
|
36
|
-
<Stack ref={ref} {...layoutProps} {...elemProps}>
|
|
37
|
-
{children}
|
|
38
|
-
</Stack>
|
|
39
|
-
</TextAreaModelContext.Provider>
|
|
40
|
-
);
|
|
41
|
-
},
|
|
19
|
+
modelHook: useTextAreaModel,
|
|
42
20
|
subComponents: {
|
|
43
21
|
Field: TextAreaField,
|
|
44
|
-
Label:
|
|
45
|
-
Hint:
|
|
22
|
+
Label: FormField.Label,
|
|
23
|
+
Hint: FormField.Hint,
|
|
46
24
|
},
|
|
25
|
+
})<TextAreaProps>(({children, orientation, ...elemProps}, Element) => {
|
|
26
|
+
const layoutProps = useFormFieldOrientation(orientation);
|
|
27
|
+
|
|
28
|
+
return (
|
|
29
|
+
<Stack as={Element} {...layoutProps} {...elemProps}>
|
|
30
|
+
{children}
|
|
31
|
+
</Stack>
|
|
32
|
+
);
|
|
47
33
|
});
|
|
@@ -9,21 +9,10 @@ import {
|
|
|
9
9
|
spaceNumbers,
|
|
10
10
|
type,
|
|
11
11
|
} from '@workday/canvas-kit-react/tokens';
|
|
12
|
-
import {
|
|
13
|
-
createComponent,
|
|
14
|
-
ExtractProps,
|
|
15
|
-
useModelContext,
|
|
16
|
-
useTheme,
|
|
17
|
-
} from '@workday/canvas-kit-react/common';
|
|
12
|
+
import {createSubcomponent, ExtractProps, useTheme} from '@workday/canvas-kit-react/common';
|
|
18
13
|
import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
|
|
19
14
|
import {FormField} from '@workday/canvas-kit-preview-react/form-field';
|
|
20
|
-
|
|
21
|
-
import {TextAreaModelContext} from './TextArea';
|
|
22
|
-
import {TextAreaModel} from './hooks';
|
|
23
|
-
|
|
24
|
-
export interface TextAreaFieldProps extends ExtractProps<typeof FormField.Input, never> {
|
|
25
|
-
model?: TextAreaModel;
|
|
26
|
-
}
|
|
15
|
+
import {useTextInputModel} from '@workday/canvas-kit-preview-react/text-input';
|
|
27
16
|
|
|
28
17
|
const baseStyles: CSSProperties = {
|
|
29
18
|
...type.levels.subtext.large,
|
|
@@ -51,38 +40,35 @@ const baseStyles: CSSProperties = {
|
|
|
51
40
|
},
|
|
52
41
|
};
|
|
53
42
|
|
|
54
|
-
export const TextAreaField =
|
|
43
|
+
export const TextAreaField = createSubcomponent('textarea')({
|
|
55
44
|
displayName: 'TextArea.Field',
|
|
56
|
-
|
|
57
|
-
|
|
45
|
+
modelHook: useTextInputModel,
|
|
46
|
+
})<ExtractProps<typeof FormField.Input, never>>(({...elemProps}, Element, model) => {
|
|
47
|
+
const theme = useTheme();
|
|
48
|
+
const errorRing = useThemedRing('error');
|
|
58
49
|
|
|
59
|
-
|
|
60
|
-
|
|
50
|
+
const focusStyles = model.state.hasError
|
|
51
|
+
? errorRing
|
|
52
|
+
: {
|
|
53
|
+
'&:focus:not([disabled])': {
|
|
54
|
+
borderColor: theme.canvas.palette.common.focusOutline,
|
|
55
|
+
boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
|
|
56
|
+
},
|
|
57
|
+
};
|
|
61
58
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
border={`1px solid ${inputColors.border}`}
|
|
78
|
-
display="block"
|
|
79
|
-
backgroundColor={inputColors.background}
|
|
80
|
-
borderRadius={borderRadius.m}
|
|
81
|
-
minHeight={64}
|
|
82
|
-
minWidth={280}
|
|
83
|
-
padding={spaceNumbers.xxs} // Compensate for border
|
|
84
|
-
margin={0} // Fix Safari
|
|
85
|
-
/>
|
|
86
|
-
);
|
|
87
|
-
},
|
|
59
|
+
return (
|
|
60
|
+
<FormField.Input
|
|
61
|
+
as={Element}
|
|
62
|
+
css={[baseStyles, focusStyles]}
|
|
63
|
+
{...elemProps}
|
|
64
|
+
border={`1px solid ${inputColors.border}`}
|
|
65
|
+
display="block"
|
|
66
|
+
backgroundColor={inputColors.background}
|
|
67
|
+
borderRadius={borderRadius.m}
|
|
68
|
+
minHeight={64}
|
|
69
|
+
minWidth={280}
|
|
70
|
+
padding={spaceNumbers.xxs} // Compensate for border
|
|
71
|
+
margin={0} // Fix Safari
|
|
72
|
+
/>
|
|
73
|
+
);
|
|
88
74
|
});
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import {useFormFieldModel
|
|
1
|
+
import {useFormFieldModel} from '@workday/canvas-kit-preview-react/form-field';
|
|
2
2
|
|
|
3
3
|
export const useTextAreaModel = useFormFieldModel;
|
|
4
|
-
|
|
5
|
-
export type TextAreaModel = FormFieldModel;
|
|
@@ -1,47 +1,33 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
FormField,
|
|
6
|
-
FormFieldModelContext,
|
|
7
|
-
useFormFieldOrientation,
|
|
8
|
-
} from '@workday/canvas-kit-preview-react/form-field';
|
|
3
|
+
import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
|
|
4
|
+
import {FormField, useFormFieldOrientation} from '@workday/canvas-kit-preview-react/form-field';
|
|
9
5
|
import {Stack} from '@workday/canvas-kit-react/layout';
|
|
10
6
|
|
|
11
|
-
import {useTextInputModel
|
|
7
|
+
import {useTextInputModel} from './hooks';
|
|
12
8
|
import {TextInputField} from './TextInputField';
|
|
13
|
-
import {TextInputLabel} from './TextInputLabel';
|
|
14
|
-
import {TextInputHint} from './TextInputHint';
|
|
15
|
-
|
|
16
|
-
export const TextInputModelContext = FormFieldModelContext;
|
|
17
9
|
|
|
18
10
|
export interface TextInputProps extends ExtractProps<typeof FormField, never> {
|
|
19
|
-
model?: TextInputModel;
|
|
20
11
|
/**
|
|
21
12
|
* Children of the Text Input. Should contain a `<TextInput.Field>`, a `<TextInput.Label>` and an optional `<TextInput.Hint>`
|
|
22
13
|
*/
|
|
23
14
|
children: React.ReactNode;
|
|
24
15
|
}
|
|
25
16
|
|
|
26
|
-
export const TextInput =
|
|
17
|
+
export const TextInput = createContainer('div')({
|
|
27
18
|
displayName: 'TextInput',
|
|
28
|
-
|
|
29
|
-
const {hasError, id, isRequired, ...elemProps} = props;
|
|
30
|
-
const value = useDefaultModel(model, {hasError, id, isRequired}, useTextInputModel);
|
|
31
|
-
|
|
32
|
-
const layoutProps = useFormFieldOrientation(orientation);
|
|
33
|
-
|
|
34
|
-
return (
|
|
35
|
-
<TextInputModelContext.Provider value={value}>
|
|
36
|
-
<Stack ref={ref} {...layoutProps} {...elemProps}>
|
|
37
|
-
{children}
|
|
38
|
-
</Stack>
|
|
39
|
-
</TextInputModelContext.Provider>
|
|
40
|
-
);
|
|
41
|
-
},
|
|
19
|
+
modelHook: useTextInputModel,
|
|
42
20
|
subComponents: {
|
|
43
21
|
Field: TextInputField,
|
|
44
|
-
Label:
|
|
45
|
-
Hint:
|
|
22
|
+
Label: FormField.Label,
|
|
23
|
+
Hint: FormField.Hint,
|
|
46
24
|
},
|
|
25
|
+
})<ExtractProps<typeof FormField, never>>(({children, orientation, ...elemProps}, Element) => {
|
|
26
|
+
const layoutProps = useFormFieldOrientation(orientation);
|
|
27
|
+
|
|
28
|
+
return (
|
|
29
|
+
<Stack as={Element} {...layoutProps} {...elemProps}>
|
|
30
|
+
{children}
|
|
31
|
+
</Stack>
|
|
32
|
+
);
|
|
47
33
|
});
|
|
@@ -9,21 +9,11 @@ import {
|
|
|
9
9
|
space,
|
|
10
10
|
type,
|
|
11
11
|
} from '@workday/canvas-kit-react/tokens';
|
|
12
|
-
import {
|
|
13
|
-
createComponent,
|
|
14
|
-
ExtractProps,
|
|
15
|
-
useModelContext,
|
|
16
|
-
useTheme,
|
|
17
|
-
} from '@workday/canvas-kit-react/common';
|
|
12
|
+
import {createSubcomponent, ExtractProps, useTheme} from '@workday/canvas-kit-react/common';
|
|
18
13
|
import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
|
|
19
14
|
import {FormField} from '@workday/canvas-kit-preview-react/form-field';
|
|
20
15
|
|
|
21
|
-
import {
|
|
22
|
-
import {useTextInputField, TextInputModel} from './hooks';
|
|
23
|
-
|
|
24
|
-
export interface TextInputFieldProps extends ExtractProps<typeof FormField.Input, never> {
|
|
25
|
-
model?: TextInputModel;
|
|
26
|
-
}
|
|
16
|
+
import {useTextInputField, useTextInputModel} from './hooks';
|
|
27
17
|
|
|
28
18
|
const baseStyles: CSSProperties = {
|
|
29
19
|
...type.levels.subtext.large,
|
|
@@ -50,38 +40,36 @@ const baseStyles: CSSProperties = {
|
|
|
50
40
|
},
|
|
51
41
|
};
|
|
52
42
|
|
|
53
|
-
export const TextInputField =
|
|
43
|
+
export const TextInputField = createSubcomponent('input')({
|
|
54
44
|
displayName: 'TextInput.Field',
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
45
|
+
modelHook: useTextInputModel,
|
|
46
|
+
elemPropsHook: useTextInputField,
|
|
47
|
+
})<ExtractProps<typeof FormField.Input, never>>((elemProps, Element, model) => {
|
|
48
|
+
const theme = useTheme();
|
|
49
|
+
const errorRing = useThemedRing('error');
|
|
58
50
|
|
|
59
|
-
|
|
60
|
-
|
|
51
|
+
const focusStyles = model.state.hasError
|
|
52
|
+
? errorRing
|
|
53
|
+
: {
|
|
54
|
+
'&:focus:not([disabled])': {
|
|
55
|
+
borderColor: theme.canvas.palette.common.focusOutline,
|
|
56
|
+
boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
|
|
57
|
+
},
|
|
58
|
+
};
|
|
61
59
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
display="block"
|
|
78
|
-
height="40px"
|
|
79
|
-
minWidth="280px"
|
|
80
|
-
border={`1px solid ${inputColors.border}`}
|
|
81
|
-
backgroundColor={inputColors.background}
|
|
82
|
-
borderRadius={borderRadius.m}
|
|
83
|
-
{...props}
|
|
84
|
-
/>
|
|
85
|
-
);
|
|
86
|
-
},
|
|
60
|
+
return (
|
|
61
|
+
<FormField.Input
|
|
62
|
+
as="input"
|
|
63
|
+
css={[baseStyles, focusStyles]}
|
|
64
|
+
padding={space.xxs}
|
|
65
|
+
margin={0}
|
|
66
|
+
display="block"
|
|
67
|
+
height="40px"
|
|
68
|
+
minWidth="280px"
|
|
69
|
+
border={`1px solid ${inputColors.border}`}
|
|
70
|
+
backgroundColor={inputColors.background}
|
|
71
|
+
borderRadius={borderRadius.m}
|
|
72
|
+
{...elemProps}
|
|
73
|
+
/>
|
|
74
|
+
);
|
|
87
75
|
});
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {createElemPropsHook} from '@workday/canvas-kit-react/common';
|
|
2
|
+
import {useTextInputModel} from './useTextInputModel';
|
|
2
3
|
|
|
3
4
|
/**
|
|
4
5
|
* Adds the necessary props to a `Field` component. Used by the TextInput.Field subcomponent.
|
|
5
6
|
*/
|
|
6
|
-
export const useTextInputField =
|
|
7
|
+
export const useTextInputField = createElemPropsHook(useTextInputModel)(() => {
|
|
7
8
|
return {
|
|
8
9
|
type: 'text',
|
|
9
10
|
};
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import {useFormFieldModel
|
|
1
|
+
import {useFormFieldModel} from '@workday/canvas-kit-preview-react/form-field';
|
|
2
2
|
|
|
3
3
|
export const useTextInputModel = useFormFieldModel;
|
|
4
|
-
|
|
5
|
-
export type TextInputModel = FormFieldModel;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { ExtractProps } from '@workday/canvas-kit-react/common';
|
|
2
|
-
import { FormField } from '@workday/canvas-kit-preview-react/form-field';
|
|
3
|
-
export declare type TextAreaHintProps = ExtractProps<typeof FormField.Hint, never>;
|
|
4
|
-
export declare const TextAreaHint: import("@workday/canvas-kit-react/common").ElementComponent<"p", import("../../form-field/lib/FormFieldHint").FormFieldHintProps>;
|
|
5
|
-
//# sourceMappingURL=TextAreaHint.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextAreaHint.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaHint.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAC,SAAS,EAAC,MAAM,8CAA8C,CAAC;AAEvE,oBAAY,iBAAiB,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAE3E,eAAO,MAAM,YAAY,mIAAiB,CAAC"}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { ExtractProps } from '@workday/canvas-kit-react/common';
|
|
2
|
-
import { FormField } from '@workday/canvas-kit-preview-react/form-field';
|
|
3
|
-
export declare type TextAreaLabelProps = ExtractProps<typeof FormField.Label, never>;
|
|
4
|
-
export declare const TextAreaLabel: import("@workday/canvas-kit-react/common").ElementComponent<"label", import("../../form-field/lib/FormFieldLabel").FormFieldLabelProps>;
|
|
5
|
-
//# sourceMappingURL=TextAreaLabel.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextAreaLabel.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAC,SAAS,EAAC,MAAM,8CAA8C,CAAC;AAEvE,oBAAY,kBAAkB,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAE7E,eAAO,MAAM,aAAa,yIAAkB,CAAC"}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { ExtractProps } from '@workday/canvas-kit-react/common';
|
|
2
|
-
import { FormField } from '@workday/canvas-kit-preview-react/form-field';
|
|
3
|
-
export declare type TextInputHintProps = ExtractProps<typeof FormField.Hint, never>;
|
|
4
|
-
export declare const TextInputHint: import("@workday/canvas-kit-react/common").ElementComponent<"p", import("../../form-field/lib/FormFieldHint").FormFieldHintProps>;
|
|
5
|
-
//# sourceMappingURL=TextInputHint.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextInputHint.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputHint.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAC,SAAS,EAAC,MAAM,8CAA8C,CAAC;AAEvE,oBAAY,kBAAkB,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAE5E,eAAO,MAAM,aAAa,mIAAiB,CAAC"}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { ExtractProps } from '@workday/canvas-kit-react/common';
|
|
2
|
-
import { FormField } from '@workday/canvas-kit-preview-react/form-field';
|
|
3
|
-
export declare type TextInputLabelProps = ExtractProps<typeof FormField.Label, never>;
|
|
4
|
-
export declare const TextInputLabel: import("@workday/canvas-kit-react/common").ElementComponent<"label", import("../../form-field/lib/FormFieldLabel").FormFieldLabelProps>;
|
|
5
|
-
//# sourceMappingURL=TextInputLabel.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextInputLabel.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAC,SAAS,EAAC,MAAM,8CAA8C,CAAC;AAEvE,oBAAY,mBAAmB,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAE9E,eAAO,MAAM,cAAc,yIAAkB,CAAC"}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { ExtractProps } from '@workday/canvas-kit-react/common';
|
|
2
|
-
import { FormField } from '@workday/canvas-kit-preview-react/form-field';
|
|
3
|
-
export declare type TextAreaHintProps = ExtractProps<typeof FormField.Hint, never>;
|
|
4
|
-
export declare const TextAreaHint: import("@workday/canvas-kit-react/common").ElementComponent<"p", import("../../form-field/lib/FormFieldHint").FormFieldHintProps>;
|
|
5
|
-
//# sourceMappingURL=TextAreaHint.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextAreaHint.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaHint.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAC,SAAS,EAAC,MAAM,8CAA8C,CAAC;AAEvE,oBAAY,iBAAiB,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAE3E,eAAO,MAAM,YAAY,mIAAiB,CAAC"}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { ExtractProps } from '@workday/canvas-kit-react/common';
|
|
2
|
-
import { FormField } from '@workday/canvas-kit-preview-react/form-field';
|
|
3
|
-
export declare type TextAreaLabelProps = ExtractProps<typeof FormField.Label, never>;
|
|
4
|
-
export declare const TextAreaLabel: import("@workday/canvas-kit-react/common").ElementComponent<"label", import("../../form-field/lib/FormFieldLabel").FormFieldLabelProps>;
|
|
5
|
-
//# sourceMappingURL=TextAreaLabel.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextAreaLabel.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAC,SAAS,EAAC,MAAM,8CAA8C,CAAC;AAEvE,oBAAY,kBAAkB,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAE7E,eAAO,MAAM,aAAa,yIAAkB,CAAC"}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { ExtractProps } from '@workday/canvas-kit-react/common';
|
|
2
|
-
import { FormField } from '@workday/canvas-kit-preview-react/form-field';
|
|
3
|
-
export declare type TextInputHintProps = ExtractProps<typeof FormField.Hint, never>;
|
|
4
|
-
export declare const TextInputHint: import("@workday/canvas-kit-react/common").ElementComponent<"p", import("../../form-field/lib/FormFieldHint").FormFieldHintProps>;
|
|
5
|
-
//# sourceMappingURL=TextInputHint.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextInputHint.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputHint.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAC,SAAS,EAAC,MAAM,8CAA8C,CAAC;AAEvE,oBAAY,kBAAkB,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAE5E,eAAO,MAAM,aAAa,mIAAiB,CAAC"}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { ExtractProps } from '@workday/canvas-kit-react/common';
|
|
2
|
-
import { FormField } from '@workday/canvas-kit-preview-react/form-field';
|
|
3
|
-
export declare type TextInputLabelProps = ExtractProps<typeof FormField.Label, never>;
|
|
4
|
-
export declare const TextInputLabel: import("@workday/canvas-kit-react/common").ElementComponent<"label", import("../../form-field/lib/FormFieldLabel").FormFieldLabelProps>;
|
|
5
|
-
//# sourceMappingURL=TextInputLabel.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextInputLabel.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAC,SAAS,EAAC,MAAM,8CAA8C,CAAC;AAEvE,oBAAY,mBAAmB,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAE9E,eAAO,MAAM,cAAc,yIAAkB,CAAC"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import {ExtractProps} from '@workday/canvas-kit-react/common';
|
|
2
|
-
import {FormField} from '@workday/canvas-kit-preview-react/form-field';
|
|
3
|
-
|
|
4
|
-
export type TextInputLabelProps = ExtractProps<typeof FormField.Label, never>;
|
|
5
|
-
|
|
6
|
-
export const TextInputLabel = FormField.Label;
|