@salutejs/plasma-new-hope 0.122.0-canary.1349.10357757918.0 → 0.122.0-canary.1352.10359015289.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Autocomplete/Autocomplete.css +10 -9
- package/cjs/components/Autocomplete/Autocomplete.js +1 -1
- package/cjs/components/Autocomplete/Autocomplete.js.map +1 -1
- package/cjs/components/DatePicker/RangeDate/RangeDate.css +10 -9
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +10 -9
- package/cjs/components/DatePicker/SingleDate/SingleDate.css +10 -9
- package/cjs/components/Pagination/Pagination.css +8 -8
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +8 -8
- package/cjs/components/Range/Range.css +10 -9
- package/cjs/components/Select/Select.css +8 -8
- package/cjs/components/Select/Select.js +6 -13
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/Select/hooks/useKeyboardNavigation.js.map +1 -1
- package/cjs/components/Select/hooks/usePathMaps.js +2 -2
- package/cjs/components/Select/hooks/usePathMaps.js.map +1 -1
- package/cjs/components/Select/ui/Inner/Inner.css +8 -8
- package/cjs/components/Select/ui/Inner/Inner.js.map +1 -1
- package/cjs/components/Select/ui/Inner/ui/Item/Item.css +8 -8
- package/cjs/components/Select/ui/Inner/ui/Item/Item.js +5 -13
- package/cjs/components/Select/ui/Inner/ui/Item/Item.js.map +1 -1
- package/cjs/components/Select/ui/Inner/ui/Item/Item.styles.js +6 -15
- package/cjs/components/Select/ui/Inner/ui/Item/Item.styles.js.map +1 -1
- package/cjs/components/Select/ui/Inner/ui/Item/{Item.styles_baxa65.css → Item.styles_y3jg1m.css} +1 -1
- package/cjs/components/Select/ui/Target/Target.js +2 -4
- package/cjs/components/Select/ui/Target/Target.js.map +1 -1
- package/cjs/components/Select/ui/Target/ui/Button/Button.js +1 -3
- package/cjs/components/Select/ui/Target/ui/Button/Button.js.map +1 -1
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.js +5 -7
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.js.map +1 -1
- package/cjs/components/Select/utils/getButtonLabel.js +5 -5
- package/cjs/components/Select/utils/getButtonLabel.js.map +1 -1
- package/cjs/components/Select/utils/initialItemsTransform.js.map +1 -1
- package/cjs/components/Select/utils/updateAncestors.js.map +1 -1
- package/cjs/components/Select/utils/updateDescendants.js.map +1 -1
- package/cjs/components/Select/utils/updateSingleAncestors.js.map +1 -1
- package/cjs/components/Slider/Slider.css +10 -9
- package/cjs/components/Slider/components/Double/Double.css +10 -9
- package/cjs/components/TextArea/TextArea.js +17 -3
- package/cjs/components/TextArea/TextArea.js.map +1 -1
- package/cjs/components/TextArea/TextArea.styles.js +7 -1
- package/cjs/components/TextArea/TextArea.styles.js.map +1 -1
- package/{es/components/TextArea/TextArea.styles_1bv40vw.css → cjs/components/TextArea/TextArea.styles_wt773g.css} +2 -1
- package/cjs/components/TextArea/TextArea.tokens.js +8 -1
- package/cjs/components/TextArea/TextArea.tokens.js.map +1 -1
- package/cjs/components/TextArea/variations/_required/base.js +9 -0
- package/cjs/components/TextArea/variations/_required/base.js.map +1 -0
- package/cjs/components/TextArea/variations/_required/base_x642ct.css +1 -0
- package/cjs/components/TextField/TextField.js +23 -7
- package/cjs/components/TextField/TextField.js.map +1 -1
- package/cjs/components/TextField/TextField.styles.js +7 -1
- package/cjs/components/TextField/TextField.styles.js.map +1 -1
- package/cjs/components/TextField/{TextField.styles_9fkr1l.css → TextField.styles_x7rboj.css} +2 -1
- package/cjs/components/TextField/TextField.tokens.js +8 -1
- package/cjs/components/TextField/TextField.tokens.js.map +1 -1
- package/cjs/components/TextField/TextField_1lzb2r1.css +1 -0
- package/cjs/components/TextField/variations/_label-placement/base.js +1 -1
- package/cjs/components/TextField/variations/_label-placement/base.js.map +1 -1
- package/cjs/components/TextField/variations/_label-placement/base_1ch19bp.css +1 -0
- package/cjs/components/TextField/variations/_required/base.js +9 -0
- package/cjs/components/TextField/variations/_required/base.js.map +1 -0
- package/cjs/components/TextField/variations/_required/base_x642ct.css +1 -0
- package/cjs/index.css +28 -26
- package/emotion/cjs/components/Autocomplete/Autocomplete.js +1 -1
- package/emotion/cjs/components/Select/Select.js +6 -13
- package/emotion/cjs/components/Select/hooks/usePathMaps.js +2 -2
- package/emotion/cjs/components/Select/ui/Inner/ui/Item/Item.js +5 -13
- package/emotion/cjs/components/Select/ui/Inner/ui/Item/Item.styles.js +11 -14
- package/emotion/cjs/components/Select/ui/Target/Target.js +2 -4
- package/emotion/cjs/components/Select/ui/Target/ui/Button/Button.js +1 -3
- package/emotion/cjs/components/Select/ui/Target/ui/Textfield/Textfield.js +5 -7
- package/emotion/cjs/components/Select/utils/getButtonLabel.js +5 -5
- package/emotion/cjs/components/Select/utils/index.js +1 -8
- package/emotion/cjs/components/TextArea/TextArea.js +18 -4
- package/emotion/cjs/components/TextArea/TextArea.styles.js +23 -19
- package/emotion/cjs/components/TextArea/TextArea.template-doc.mdx +29 -3
- package/emotion/cjs/components/TextArea/TextArea.tokens.js +8 -1
- package/emotion/cjs/components/TextArea/variations/_required/base.js +8 -0
- package/emotion/cjs/components/TextArea/variations/_required/tokens.json +1 -0
- package/emotion/cjs/components/TextArea/variations/_size/tokens.json +7 -1
- package/emotion/cjs/components/TextField/TextField.js +27 -11
- package/emotion/cjs/components/TextField/TextField.styles.js +33 -21
- package/emotion/cjs/components/TextField/TextField.template-doc.mdx +27 -1
- package/emotion/cjs/components/TextField/TextField.tokens.js +8 -1
- package/emotion/cjs/components/TextField/variations/_label-placement/base.js +1 -1
- package/emotion/cjs/components/TextField/variations/_required/base.js +8 -0
- package/emotion/cjs/components/TextField/variations/_required/tokens.json +1 -0
- package/emotion/cjs/components/TextField/variations/_size/tokens.json +6 -0
- package/emotion/cjs/examples/plasma_b2c/components/Select/Select.stories.tsx +21 -38
- package/emotion/cjs/examples/plasma_web/components/Select/Select.stories.tsx +21 -38
- package/emotion/cjs/examples/plasma_web/components/TextArea/TextArea.config.js +12 -9
- package/emotion/cjs/examples/plasma_web/components/TextArea/TextArea.stories.tsx +45 -0
- package/emotion/cjs/examples/plasma_web/components/TextField/TextField.config.js +15 -12
- package/emotion/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +43 -0
- package/emotion/es/components/Autocomplete/Autocomplete.js +1 -1
- package/emotion/es/components/Select/Select.js +7 -14
- package/emotion/es/components/Select/hooks/usePathMaps.js +2 -2
- package/emotion/es/components/Select/ui/Inner/ui/Item/Item.js +5 -13
- package/emotion/es/components/Select/ui/Inner/ui/Item/Item.styles.js +11 -14
- package/emotion/es/components/Select/ui/Target/Target.js +2 -4
- package/emotion/es/components/Select/ui/Target/ui/Button/Button.js +1 -3
- package/emotion/es/components/Select/ui/Target/ui/Textfield/Textfield.js +5 -7
- package/emotion/es/components/Select/utils/getButtonLabel.js +5 -5
- package/emotion/es/components/Select/utils/index.js +1 -2
- package/emotion/es/components/TextArea/TextArea.js +19 -5
- package/emotion/es/components/TextArea/TextArea.styles.js +22 -18
- package/emotion/es/components/TextArea/TextArea.template-doc.mdx +29 -3
- package/emotion/es/components/TextArea/TextArea.tokens.js +8 -1
- package/emotion/es/components/TextArea/variations/_required/base.js +2 -0
- package/emotion/es/components/TextArea/variations/_required/tokens.json +1 -0
- package/emotion/es/components/TextArea/variations/_size/tokens.json +7 -1
- package/emotion/es/components/TextField/TextField.js +26 -10
- package/emotion/es/components/TextField/TextField.styles.js +32 -20
- package/emotion/es/components/TextField/TextField.template-doc.mdx +27 -1
- package/emotion/es/components/TextField/TextField.tokens.js +8 -1
- package/emotion/es/components/TextField/variations/_label-placement/base.js +1 -1
- package/emotion/es/components/TextField/variations/_required/base.js +2 -0
- package/emotion/es/components/TextField/variations/_required/tokens.json +1 -0
- package/emotion/es/components/TextField/variations/_size/tokens.json +6 -0
- package/emotion/es/examples/plasma_b2c/components/Select/Select.stories.tsx +21 -38
- package/emotion/es/examples/plasma_web/components/Select/Select.stories.tsx +21 -38
- package/emotion/es/examples/plasma_web/components/TextArea/TextArea.config.js +12 -9
- package/emotion/es/examples/plasma_web/components/TextArea/TextArea.stories.tsx +45 -0
- package/emotion/es/examples/plasma_web/components/TextField/TextField.config.js +15 -12
- package/emotion/es/examples/plasma_web/components/TextField/TextField.stories.tsx +43 -0
- package/es/components/Autocomplete/Autocomplete.css +10 -9
- package/es/components/Autocomplete/Autocomplete.js +1 -1
- package/es/components/Autocomplete/Autocomplete.js.map +1 -1
- package/es/components/DatePicker/RangeDate/RangeDate.css +10 -9
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +10 -9
- package/es/components/DatePicker/SingleDate/SingleDate.css +10 -9
- package/es/components/Pagination/Pagination.css +8 -8
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +8 -8
- package/es/components/Range/Range.css +10 -9
- package/es/components/Select/Select.css +8 -8
- package/es/components/Select/Select.js +6 -13
- package/es/components/Select/Select.js.map +1 -1
- package/es/components/Select/hooks/useKeyboardNavigation.js.map +1 -1
- package/es/components/Select/hooks/usePathMaps.js +2 -2
- package/es/components/Select/hooks/usePathMaps.js.map +1 -1
- package/es/components/Select/ui/Inner/Inner.css +8 -8
- package/es/components/Select/ui/Inner/Inner.js.map +1 -1
- package/es/components/Select/ui/Inner/ui/Item/Item.css +8 -8
- package/es/components/Select/ui/Inner/ui/Item/Item.js +5 -13
- package/es/components/Select/ui/Inner/ui/Item/Item.js.map +1 -1
- package/es/components/Select/ui/Inner/ui/Item/Item.styles.js +6 -15
- package/es/components/Select/ui/Inner/ui/Item/Item.styles.js.map +1 -1
- package/es/components/Select/ui/Inner/ui/Item/{Item.styles_baxa65.css → Item.styles_y3jg1m.css} +1 -1
- package/es/components/Select/ui/Target/Target.js +2 -4
- package/es/components/Select/ui/Target/Target.js.map +1 -1
- package/es/components/Select/ui/Target/ui/Button/Button.js +1 -3
- package/es/components/Select/ui/Target/ui/Button/Button.js.map +1 -1
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.js +5 -7
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.js.map +1 -1
- package/es/components/Select/utils/getButtonLabel.js +5 -5
- package/es/components/Select/utils/getButtonLabel.js.map +1 -1
- package/es/components/Select/utils/initialItemsTransform.js.map +1 -1
- package/es/components/Select/utils/updateAncestors.js.map +1 -1
- package/es/components/Select/utils/updateDescendants.js.map +1 -1
- package/es/components/Select/utils/updateSingleAncestors.js.map +1 -1
- package/es/components/Slider/Slider.css +10 -9
- package/es/components/Slider/components/Double/Double.css +10 -9
- package/es/components/TextArea/TextArea.js +18 -4
- package/es/components/TextArea/TextArea.js.map +1 -1
- package/es/components/TextArea/TextArea.styles.js +7 -2
- package/es/components/TextArea/TextArea.styles.js.map +1 -1
- package/{cjs/components/TextArea/TextArea.styles_1bv40vw.css → es/components/TextArea/TextArea.styles_wt773g.css} +2 -1
- package/es/components/TextArea/TextArea.tokens.js +8 -1
- package/es/components/TextArea/TextArea.tokens.js.map +1 -1
- package/es/components/TextArea/variations/_required/base.js +5 -0
- package/es/components/TextArea/variations/_required/base.js.map +1 -0
- package/es/components/TextArea/variations/_required/base_x642ct.css +1 -0
- package/es/components/TextField/TextField.js +24 -8
- package/es/components/TextField/TextField.js.map +1 -1
- package/es/components/TextField/TextField.styles.js +7 -2
- package/es/components/TextField/TextField.styles.js.map +1 -1
- package/es/components/TextField/{TextField.styles_9fkr1l.css → TextField.styles_x7rboj.css} +2 -1
- package/es/components/TextField/TextField.tokens.js +8 -1
- package/es/components/TextField/TextField.tokens.js.map +1 -1
- package/es/components/TextField/TextField_1lzb2r1.css +1 -0
- package/es/components/TextField/variations/_label-placement/base.js +1 -1
- package/es/components/TextField/variations/_label-placement/base.js.map +1 -1
- package/es/components/TextField/variations/_label-placement/base_1ch19bp.css +1 -0
- package/es/components/TextField/variations/_required/base.js +5 -0
- package/es/components/TextField/variations/_required/base.js.map +1 -0
- package/es/components/TextField/variations/_required/base_x642ct.css +1 -0
- package/es/index.css +28 -26
- package/package.json +2 -2
- package/styled-components/cjs/components/Autocomplete/Autocomplete.js +1 -1
- package/styled-components/cjs/components/Select/Select.js +6 -13
- package/styled-components/cjs/components/Select/hooks/usePathMaps.js +2 -2
- package/styled-components/cjs/components/Select/ui/Inner/ui/Item/Item.js +5 -13
- package/styled-components/cjs/components/Select/ui/Inner/ui/Item/Item.styles.js +3 -6
- package/styled-components/cjs/components/Select/ui/Target/Target.js +2 -4
- package/styled-components/cjs/components/Select/ui/Target/ui/Button/Button.js +1 -3
- package/styled-components/cjs/components/Select/ui/Target/ui/Textfield/Textfield.js +5 -7
- package/styled-components/cjs/components/Select/utils/getButtonLabel.js +5 -5
- package/styled-components/cjs/components/Select/utils/index.js +1 -8
- package/styled-components/cjs/components/TextArea/TextArea.js +17 -3
- package/styled-components/cjs/components/TextArea/TextArea.styles.js +6 -3
- package/styled-components/cjs/components/TextArea/TextArea.template-doc.mdx +29 -3
- package/styled-components/cjs/components/TextArea/TextArea.tokens.js +8 -1
- package/styled-components/cjs/components/TextArea/variations/_required/base.js +8 -0
- package/styled-components/cjs/components/TextArea/variations/_required/tokens.json +1 -0
- package/styled-components/cjs/components/TextArea/variations/_size/tokens.json +7 -1
- package/styled-components/cjs/components/TextField/TextField.js +23 -7
- package/styled-components/cjs/components/TextField/TextField.styles.js +6 -3
- package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +27 -1
- package/styled-components/cjs/components/TextField/TextField.tokens.js +8 -1
- package/styled-components/cjs/components/TextField/variations/_label-placement/base.js +1 -1
- package/styled-components/cjs/components/TextField/variations/_required/base.js +8 -0
- package/styled-components/cjs/components/TextField/variations/_required/tokens.json +1 -0
- package/styled-components/cjs/components/TextField/variations/_size/tokens.json +6 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Select/Select.stories.tsx +21 -38
- package/styled-components/cjs/examples/plasma_web/components/Select/Select.stories.tsx +21 -38
- package/styled-components/cjs/examples/plasma_web/components/TextArea/TextArea.config.js +7 -4
- package/styled-components/cjs/examples/plasma_web/components/TextArea/TextArea.stories.tsx +45 -0
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.config.js +7 -4
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +43 -0
- package/styled-components/es/components/Autocomplete/Autocomplete.js +1 -1
- package/styled-components/es/components/Select/Select.js +7 -14
- package/styled-components/es/components/Select/hooks/usePathMaps.js +2 -2
- package/styled-components/es/components/Select/ui/Inner/ui/Item/Item.js +5 -13
- package/styled-components/es/components/Select/ui/Inner/ui/Item/Item.styles.js +3 -6
- package/styled-components/es/components/Select/ui/Target/Target.js +2 -4
- package/styled-components/es/components/Select/ui/Target/ui/Button/Button.js +1 -3
- package/styled-components/es/components/Select/ui/Target/ui/Textfield/Textfield.js +5 -7
- package/styled-components/es/components/Select/utils/getButtonLabel.js +5 -5
- package/styled-components/es/components/Select/utils/index.js +1 -2
- package/styled-components/es/components/TextArea/TextArea.js +18 -4
- package/styled-components/es/components/TextArea/TextArea.styles.js +5 -2
- package/styled-components/es/components/TextArea/TextArea.template-doc.mdx +29 -3
- package/styled-components/es/components/TextArea/TextArea.tokens.js +8 -1
- package/styled-components/es/components/TextArea/variations/_required/base.js +2 -0
- package/styled-components/es/components/TextArea/variations/_required/tokens.json +1 -0
- package/styled-components/es/components/TextArea/variations/_size/tokens.json +7 -1
- package/styled-components/es/components/TextField/TextField.js +22 -6
- package/styled-components/es/components/TextField/TextField.styles.js +5 -2
- package/styled-components/es/components/TextField/TextField.template-doc.mdx +27 -1
- package/styled-components/es/components/TextField/TextField.tokens.js +8 -1
- package/styled-components/es/components/TextField/variations/_label-placement/base.js +1 -1
- package/styled-components/es/components/TextField/variations/_required/base.js +2 -0
- package/styled-components/es/components/TextField/variations/_required/tokens.json +1 -0
- package/styled-components/es/components/TextField/variations/_size/tokens.json +6 -0
- package/styled-components/es/examples/plasma_b2c/components/Select/Select.stories.tsx +21 -38
- package/styled-components/es/examples/plasma_web/components/Select/Select.stories.tsx +21 -38
- package/styled-components/es/examples/plasma_web/components/TextArea/TextArea.config.js +7 -4
- package/styled-components/es/examples/plasma_web/components/TextArea/TextArea.stories.tsx +45 -0
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.config.js +7 -4
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx +43 -0
- package/types/components/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts +4 -0
- package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts +4 -0
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts.map +1 -1
- package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts +27 -123
- package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts.map +1 -1
- package/types/components/Range/Range.styles.d.ts +4 -0
- package/types/components/Range/Range.styles.d.ts.map +1 -1
- package/types/components/Select/Select.d.ts +3 -3
- package/types/components/Select/Select.d.ts.map +1 -1
- package/types/components/Select/Select.types.d.ts +11 -140
- package/types/components/Select/Select.types.d.ts.map +1 -1
- package/types/components/Select/hooks/useKeyboardNavigation.d.ts +6 -6
- package/types/components/Select/hooks/useKeyboardNavigation.d.ts.map +1 -1
- package/types/components/Select/hooks/usePathMaps.d.ts +6 -6
- package/types/components/Select/hooks/usePathMaps.d.ts.map +1 -1
- package/types/components/Select/index.d.ts +1 -1
- package/types/components/Select/index.d.ts.map +1 -1
- package/types/components/Select/ui/Inner/Inner.type.d.ts +4 -4
- package/types/components/Select/ui/Inner/Inner.type.d.ts.map +1 -1
- package/types/components/Select/ui/Inner/ui/Item/Item.d.ts.map +1 -1
- package/types/components/Select/ui/Inner/ui/Item/Item.styles.d.ts +1 -3
- package/types/components/Select/ui/Inner/ui/Item/Item.styles.d.ts.map +1 -1
- package/types/components/Select/ui/Inner/ui/Item/Item.types.d.ts +3 -18
- package/types/components/Select/ui/Inner/ui/Item/Item.types.d.ts.map +1 -1
- package/types/components/Select/ui/Target/Target.d.ts.map +1 -1
- package/types/components/Select/ui/Target/Target.types.d.ts +3 -4
- package/types/components/Select/ui/Target/Target.types.d.ts.map +1 -1
- package/types/components/Select/ui/Target/ui/Button/Button.d.ts.map +1 -1
- package/types/components/Select/ui/Target/ui/Textfield/Textfield.d.ts.map +1 -1
- package/types/components/Select/utils/index.d.ts +0 -1
- package/types/components/Select/utils/index.d.ts.map +1 -1
- package/types/components/Select/utils/initialItemsTransform.d.ts +2 -2
- package/types/components/Select/utils/initialItemsTransform.d.ts.map +1 -1
- package/types/components/Select/utils/updateAncestors.d.ts +2 -2
- package/types/components/Select/utils/updateAncestors.d.ts.map +1 -1
- package/types/components/Select/utils/updateDescendants.d.ts +2 -2
- package/types/components/Select/utils/updateDescendants.d.ts.map +1 -1
- package/types/components/Select/utils/updateSingleAncestors.d.ts +2 -2
- package/types/components/Select/utils/updateSingleAncestors.d.ts.map +1 -1
- package/types/components/Slider/components/Double/Double.styles.d.ts +4 -0
- package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.d.ts +4 -0
- package/types/components/TextArea/TextArea.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.styles.d.ts +1 -0
- package/types/components/TextArea/TextArea.styles.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.tokens.d.ts +7 -0
- package/types/components/TextArea/TextArea.tokens.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.types.d.ts +9 -0
- package/types/components/TextArea/TextArea.types.d.ts.map +1 -1
- package/types/components/TextArea/variations/_required/base.d.ts +2 -0
- package/types/components/TextArea/variations/_required/base.d.ts.map +1 -0
- package/types/components/TextField/TextField.d.ts +4 -0
- package/types/components/TextField/TextField.d.ts.map +1 -1
- package/types/components/TextField/TextField.styles.d.ts +1 -0
- package/types/components/TextField/TextField.styles.d.ts.map +1 -1
- package/types/components/TextField/TextField.tokens.d.ts +7 -0
- package/types/components/TextField/TextField.tokens.d.ts.map +1 -1
- package/types/components/TextField/TextField.types.d.ts +9 -0
- package/types/components/TextField/TextField.types.d.ts.map +1 -1
- package/types/components/TextField/variations/_label-placement/base.d.ts.map +1 -1
- package/types/components/TextField/variations/_required/base.d.ts +2 -0
- package/types/components/TextField/variations/_required/base.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/Select/Select.d.ts +27 -123
- package/types/examples/plasma_b2c/components/Select/Select.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts +4 -0
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Select/Select.d.ts +27 -123
- package/types/examples/plasma_web/components/Select/Select.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextArea/TextArea.config.d.ts +3 -0
- package/types/examples/plasma_web/components/TextArea/TextArea.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextArea/TextArea.d.ts +3 -0
- package/types/examples/plasma_web/components/TextArea/TextArea.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextField/TextField.config.d.ts +3 -0
- package/types/examples/plasma_web/components/TextField/TextField.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextField/TextField.d.ts +7 -0
- package/types/examples/plasma_web/components/TextField/TextField.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/TextField/TextField.d.ts +4 -0
- package/types/examples/sds_engineer/components/TextField/TextField.d.ts.map +1 -1
- package/cjs/components/Select/utils/getView.js +0 -27
- package/cjs/components/Select/utils/getView.js.map +0 -1
- package/cjs/components/TextField/TextField_wctd2m.css +0 -1
- package/cjs/components/TextField/variations/_label-placement/base_qtoism.css +0 -1
- package/emotion/cjs/components/Select/utils/getView.js +0 -26
- package/emotion/es/components/Select/utils/getView.js +0 -20
- package/es/components/Select/utils/getView.js +0 -23
- package/es/components/Select/utils/getView.js.map +0 -1
- package/es/components/TextField/TextField_wctd2m.css +0 -1
- package/es/components/TextField/variations/_label-placement/base_qtoism.css +0 -1
- package/styled-components/cjs/components/Select/utils/getView.js +0 -26
- package/styled-components/es/components/Select/utils/getView.js +0 -20
- package/types/components/Select/utils/getView.d.ts +0 -3
- package/types/components/Select/utils/getView.d.ts.map +0 -1
@@ -11,10 +11,10 @@ var usePathMaps = exports.usePathMaps = function usePathMaps(items) {
|
|
11
11
|
var focusedToValueMap = new Map();
|
12
12
|
var valueToCheckedMap = new Map();
|
13
13
|
var valueToItemMap = new Map();
|
14
|
-
pathMap.set('root',
|
14
|
+
pathMap.set('root', items.length);
|
15
15
|
var rec = function rec(items) {
|
16
16
|
var prevIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
17
|
-
items
|
17
|
+
items.forEach(function (item, index) {
|
18
18
|
var value = item.value,
|
19
19
|
innerItems = item.items;
|
20
20
|
var currIndex = "".concat(prevIndex, "/").concat(index).replace(/^(\/)/, '');
|
@@ -27,8 +27,6 @@ var Item = exports.Item = function Item(_ref) {
|
|
27
27
|
var value = item.value,
|
28
28
|
label = item.label,
|
29
29
|
disabled = item.disabled,
|
30
|
-
isDisabled = item.isDisabled,
|
31
|
-
color = item.color,
|
32
30
|
contentLeft = item.contentLeft,
|
33
31
|
contentRight = item.contentRight;
|
34
32
|
var ref = (0, _react.useRef)(null);
|
@@ -40,9 +38,8 @@ var Item = exports.Item = function Item(_ref) {
|
|
40
38
|
handleCheckboxChange = _useContext.handleCheckboxChange,
|
41
39
|
handleItemClick = _useContext.handleItemClick,
|
42
40
|
variant = _useContext.variant,
|
43
|
-
renderItem = _useContext.renderItem
|
44
|
-
|
45
|
-
var isDisabledClassName = disabled || isDisabled ? _Select.classes.dropdownItemIsDisabled : undefined;
|
41
|
+
renderItem = _useContext.renderItem;
|
42
|
+
var isDisabledClassName = disabled ? _Select.classes.dropdownItemIsDisabled : undefined;
|
46
43
|
var focusedClass = currentLevel === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentLevel]) ? _Select.classes.dropdownItemIsFocused : undefined;
|
47
44
|
var activeClass = value === (path === null || path === void 0 ? void 0 : path[currentLevel + 1]) ? _Select.classes.dropdownItemIsActive : undefined;
|
48
45
|
(0, _react.useEffect)(function () {
|
@@ -55,15 +52,12 @@ var Item = exports.Item = function Item(_ref) {
|
|
55
52
|
}
|
56
53
|
}, [focusedClass]);
|
57
54
|
var handleChange = function handleChange(e) {
|
58
|
-
if (disabled
|
55
|
+
if (disabled) return;
|
59
56
|
e.stopPropagation();
|
60
57
|
handleCheckboxChange(item);
|
61
58
|
};
|
62
59
|
var handleClick = function handleClick(e) {
|
63
|
-
if (disabled
|
64
|
-
e.stopPropagation();
|
65
|
-
return;
|
66
|
-
}
|
60
|
+
if (disabled) return;
|
67
61
|
handleItemClick(item, e);
|
68
62
|
};
|
69
63
|
return /*#__PURE__*/_react["default"].createElement(_Item.Wrapper, {
|
@@ -94,9 +88,7 @@ var Item = exports.Item = function Item(_ref) {
|
|
94
88
|
}))), !multiselect && checked.get(item.value) === 'done' && /*#__PURE__*/_react["default"].createElement(_Icon.IconDone, {
|
95
89
|
size: (0, _utils.sizeToIconSize)(size, variant),
|
96
90
|
color: "inherit"
|
97
|
-
})), contentLeft && /*#__PURE__*/_react["default"].createElement(_Item.StyledContentLeft, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_Item.StyledText, {
|
98
|
-
color: color
|
99
|
-
}, renderItem && renderItem(valueToItemMap.get(value)) || label), contentRight && /*#__PURE__*/_react["default"].createElement(_Item.StyledContentRight, null, contentRight), !(0, _utils2.isEmpty)(item.items) && /*#__PURE__*/_react["default"].createElement(_Item.DisclosureIconWrapper, null, /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureRightCentered, {
|
91
|
+
})), contentLeft && /*#__PURE__*/_react["default"].createElement(_Item.StyledContentLeft, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_Item.StyledText, null, renderItem && renderItem(value, label) || label), contentRight && /*#__PURE__*/_react["default"].createElement(_Item.StyledContentRight, null, contentRight), !(0, _utils2.isEmpty)(item.items) && /*#__PURE__*/_react["default"].createElement(_Item.DisclosureIconWrapper, null, /*#__PURE__*/_react["default"].createElement(_Icon.IconDisclosureRightCentered, {
|
100
92
|
size: (0, _utils.sizeToIconSize)(size, variant),
|
101
93
|
color: "inherit"
|
102
94
|
})));
|
@@ -47,14 +47,11 @@ var IconWrapper = exports.IconWrapper = /*#__PURE__*/_styledComponents["default"
|
|
47
47
|
});
|
48
48
|
var StyledText = exports.StyledText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
49
49
|
componentId: "plasma-new-hope__sc-fr2h0y-6"
|
50
|
-
})(["", ";flex:1;
|
51
|
-
var color = _ref5.color;
|
52
|
-
return color || 'inherit';
|
53
|
-
});
|
50
|
+
})(["", ";flex:1;"], /*#__PURE__*/(0, _mixins.applyEllipsis)());
|
54
51
|
var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].li.withConfig({
|
55
52
|
componentId: "plasma-new-hope__sc-fr2h0y-7"
|
56
|
-
})(["display:flex;align-items:center;min-height:var(", ");margin:0;box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background:var(", ");color:var(--text-primary);border-radius:var(", ");user-select:none;&:hover:not(.", "){cursor:pointer;background:var(", ");}&.", "{background:var(", ");}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], _Select.tokens.itemHeight, function (
|
57
|
-
var variant =
|
53
|
+
})(["display:flex;align-items:center;min-height:var(", ");margin:0;box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background:var(", ");color:var(--text-primary);border-radius:var(", ");user-select:none;&:hover:not(.", "){cursor:pointer;background:var(", ");}&.", "{background:var(", ");}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], _Select.tokens.itemHeight, function (_ref5) {
|
54
|
+
var variant = _ref5.variant;
|
58
55
|
return "var(".concat(variant === 'tight' ? _Select.tokens.itemPaddingTight : _Select.tokens.itemPadding, ")");
|
59
56
|
}, _Select.tokens.fontFamily, _Select.tokens.fontSize, _Select.tokens.fontStyle, _Select.tokens.fontWeight, _Select.tokens.fontLetterSpacing, _Select.tokens.fontLineHeight, _Select.constants.itemBackground, _Select.tokens.itemBorderRadius, _Select.classes.dropdownItemIsDisabled, _Select.constants.itemBackgroundHover, _Select.classes.dropdownItemIsActive, _Select.constants.itemBackgroundHover, _Select.classes.dropdownItemIsDisabled, _Select.constants.opacity, /*#__PURE__*/(0, _mixins.addFocus)({
|
60
57
|
outlineSize: '0.0625rem',
|
@@ -23,8 +23,7 @@ var Target = exports.Target = function Target(_ref) {
|
|
23
23
|
renderValue = _ref.renderValue,
|
24
24
|
focusedPath = _ref.focusedPath,
|
25
25
|
focusedToValueMap = _ref.focusedToValueMap,
|
26
|
-
selectProps = _ref.selectProps
|
27
|
-
separator = _ref.separator;
|
26
|
+
selectProps = _ref.selectProps;
|
28
27
|
return selectProps.target === 'button-like' ? /*#__PURE__*/_react["default"].createElement(_ui.Button, {
|
29
28
|
opened: opened,
|
30
29
|
value: value,
|
@@ -36,8 +35,7 @@ var Target = exports.Target = function Target(_ref) {
|
|
36
35
|
renderValue: renderValue,
|
37
36
|
focusedPath: focusedPath,
|
38
37
|
focusedToValueMap: focusedToValueMap,
|
39
|
-
selectProps: selectProps
|
40
|
-
separator: separator
|
38
|
+
selectProps: selectProps
|
41
39
|
}) : /*#__PURE__*/_react["default"].createElement(_ui.Textfield, {
|
42
40
|
opened: opened,
|
43
41
|
value: value,
|
@@ -46,9 +46,7 @@ var Button = exports.Button = function Button(_ref) {
|
|
46
46
|
"aria-activedescendant": getActiveDescendant(),
|
47
47
|
"aria-label": label,
|
48
48
|
renderTarget: Boolean(selectProps.renderTarget)
|
49
|
-
}, selectProps.renderTarget ? selectProps.renderTarget(
|
50
|
-
return valueToItemMap.get(value);
|
51
|
-
}) : valueToItemMap.get(value)) : /*#__PURE__*/_react["default"].createElement(_Button.Label, null, (0, _utils2.getButtonLabel)({
|
49
|
+
}, selectProps.renderTarget ? selectProps.renderTarget(value) : /*#__PURE__*/_react["default"].createElement(_Button.Label, null, (0, _utils2.getButtonLabel)({
|
52
50
|
value: value,
|
53
51
|
valueToItemMap: valueToItemMap,
|
54
52
|
label: label,
|
@@ -22,7 +22,7 @@ var getLabel = function getLabel(_ref) {
|
|
22
22
|
labelPlacement = _ref.labelPlacement,
|
23
23
|
size = _ref.size,
|
24
24
|
renderValue = _ref.renderValue;
|
25
|
-
if ((0, _utils.isEmpty)(value)
|
25
|
+
if ((0, _utils.isEmpty)(value)) {
|
26
26
|
if (!label || labelPlacement === 'outer') {
|
27
27
|
return /*#__PURE__*/_react["default"].createElement(_Textfield.Placeholder, null, placeholder);
|
28
28
|
}
|
@@ -38,7 +38,7 @@ var getLabel = function getLabel(_ref) {
|
|
38
38
|
return value.map(function (currentValue, index) {
|
39
39
|
var itemLabel = valueToItemMap.get(currentValue).label;
|
40
40
|
return /*#__PURE__*/_react["default"].createElement(_ui.Chip, {
|
41
|
-
text: renderValue ? renderValue(
|
41
|
+
text: renderValue ? renderValue(currentValue, itemLabel) : itemLabel,
|
42
42
|
onClick: function onClick(e) {
|
43
43
|
e.stopPropagation();
|
44
44
|
onChipClick(currentValue);
|
@@ -49,9 +49,9 @@ var getLabel = function getLabel(_ref) {
|
|
49
49
|
}
|
50
50
|
var itemLabel = valueToItemMap.get(value).label;
|
51
51
|
if (!label || labelPlacement === 'outer') {
|
52
|
-
return /*#__PURE__*/_react["default"].createElement(_Textfield.Value, null, renderValue ? renderValue(
|
52
|
+
return /*#__PURE__*/_react["default"].createElement(_Textfield.Value, null, renderValue ? renderValue(value, itemLabel) : itemLabel);
|
53
53
|
}
|
54
|
-
return /*#__PURE__*/_react["default"].createElement(_Textfield.InnerLabelWrapper, null, size !== 'xs' && /*#__PURE__*/_react["default"].createElement(_Textfield.InnerLabel, null, label), /*#__PURE__*/_react["default"].createElement(_Textfield.Value, null, renderValue ? renderValue(
|
54
|
+
return /*#__PURE__*/_react["default"].createElement(_Textfield.InnerLabelWrapper, null, size !== 'xs' && /*#__PURE__*/_react["default"].createElement(_Textfield.InnerLabel, null, label), /*#__PURE__*/_react["default"].createElement(_Textfield.Value, null, renderValue ? renderValue(value, itemLabel) : itemLabel));
|
55
55
|
};
|
56
56
|
var Textfield = exports.Textfield = function Textfield(_ref2) {
|
57
57
|
var opened = _ref2.opened,
|
@@ -92,9 +92,7 @@ var Textfield = exports.Textfield = function Textfield(_ref2) {
|
|
92
92
|
"aria-activedescendant": getActiveDescendant(),
|
93
93
|
"aria-label": label,
|
94
94
|
renderTarget: Boolean(selectProps.renderTarget)
|
95
|
-
}, /*#__PURE__*/_react["default"].createElement(_Textfield.Wrapper, null, selectProps !== null && selectProps !== void 0 && selectProps.renderTarget ? selectProps.renderTarget(
|
96
|
-
return valueToItemMap.get(value);
|
97
|
-
}) : valueToItemMap.get(value)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, contentLeft && (!selectProps.multiselect || (0, _utils.isEmpty)(value)) && /*#__PURE__*/_react["default"].createElement(_Textfield.ContentLeftWrapper, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_Textfield.ChipWrapper, null, getLabel({
|
95
|
+
}, /*#__PURE__*/_react["default"].createElement(_Textfield.Wrapper, null, selectProps !== null && selectProps !== void 0 && selectProps.renderTarget ? selectProps.renderTarget(value) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, contentLeft && (!selectProps.multiselect || (0, _utils.isEmpty)(value)) && /*#__PURE__*/_react["default"].createElement(_Textfield.ContentLeftWrapper, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_Textfield.ChipWrapper, null, getLabel({
|
98
96
|
value: value,
|
99
97
|
valueToItemMap: valueToItemMap,
|
100
98
|
onChipClick: onChipClick,
|
@@ -9,9 +9,9 @@ var getLabel = function getLabel(_ref) {
|
|
9
9
|
var value = _ref.value,
|
10
10
|
valueToItemMap = _ref.valueToItemMap,
|
11
11
|
renderValue = _ref.renderValue;
|
12
|
-
var _ref2 = valueToItemMap.get(value),
|
12
|
+
var _ref2 = valueToItemMap.get(value === null || value === void 0 ? void 0 : value.toString()),
|
13
13
|
label = _ref2.label;
|
14
|
-
return renderValue ? renderValue(
|
14
|
+
return renderValue ? renderValue(value, label) : label;
|
15
15
|
};
|
16
16
|
var getButtonLabel = exports.getButtonLabel = function getButtonLabel(_ref3) {
|
17
17
|
var value = _ref3.value,
|
@@ -19,7 +19,7 @@ var getButtonLabel = exports.getButtonLabel = function getButtonLabel(_ref3) {
|
|
19
19
|
label = _ref3.label,
|
20
20
|
renderValue = _ref3.renderValue,
|
21
21
|
selectProps = _ref3.selectProps;
|
22
|
-
if ((0, _utils.isEmpty)(value)
|
22
|
+
if ((0, _utils.isEmpty)(value)) {
|
23
23
|
return label || '';
|
24
24
|
}
|
25
25
|
if (selectProps.multiselect && selectProps.isTargetAmount) {
|
@@ -35,8 +35,8 @@ var getButtonLabel = exports.getButtonLabel = function getButtonLabel(_ref3) {
|
|
35
35
|
}).join(', ');
|
36
36
|
}
|
37
37
|
return getLabel({
|
38
|
+
renderValue: renderValue,
|
38
39
|
value: value,
|
39
|
-
valueToItemMap: valueToItemMap
|
40
|
-
renderValue: renderValue
|
40
|
+
valueToItemMap: valueToItemMap
|
41
41
|
});
|
42
42
|
};
|
@@ -15,12 +15,6 @@ Object.defineProperty(exports, "getCorrectHeight", {
|
|
15
15
|
return _getCorrectHeight.getCorrectHeight;
|
16
16
|
}
|
17
17
|
});
|
18
|
-
Object.defineProperty(exports, "getView", {
|
19
|
-
enumerable: true,
|
20
|
-
get: function get() {
|
21
|
-
return _getView.getView;
|
22
|
-
}
|
23
|
-
});
|
24
18
|
Object.defineProperty(exports, "initialItemsTransform", {
|
25
19
|
enumerable: true,
|
26
20
|
get: function get() {
|
@@ -57,5 +51,4 @@ var _updateAncestors = /*#__PURE__*/require("./updateAncestors");
|
|
57
51
|
var _updateSingleAncestors = /*#__PURE__*/require("./updateSingleAncestors");
|
58
52
|
var _sizeToIconSize = /*#__PURE__*/require("./sizeToIconSize");
|
59
53
|
var _getCorrectHeight = /*#__PURE__*/require("./getCorrectHeight");
|
60
|
-
var _getButtonLabel = /*#__PURE__*/require("./getButtonLabel");
|
61
|
-
var _getView = /*#__PURE__*/require("./getView");
|
54
|
+
var _getButtonLabel = /*#__PURE__*/require("./getButtonLabel");
|
@@ -16,7 +16,8 @@ var _TextArea2 = /*#__PURE__*/require("./TextArea.tokens");
|
|
16
16
|
var _base = /*#__PURE__*/require("./variations/_view/base");
|
17
17
|
var _base2 = /*#__PURE__*/require("./variations/_size/base");
|
18
18
|
var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
|
19
|
-
var
|
19
|
+
var _base4 = /*#__PURE__*/require("./variations/_required/base");
|
20
|
+
var _excluded = ["helperText", "status", "resize", "rightHelper", "leftHelper", "contentRight", "autoResize", "minAuto", "maxAuto", "label", "labelPlacement", "placeholder", "defaultValue", "height", "width", "value", "disabled", "required", "requiredAlign", "size", "view", "id", "style", "className", "readOnly", "rows", "cols", "onChange"];
|
20
21
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
21
22
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
22
23
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
@@ -97,6 +98,8 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
|
|
97
98
|
width = props.width,
|
98
99
|
value = props.value,
|
99
100
|
disabled = props.disabled,
|
101
|
+
required = props.required,
|
102
|
+
requiredAlign = props.requiredAlign,
|
100
103
|
size = props.size,
|
101
104
|
view = props.view,
|
102
105
|
id = props.id,
|
@@ -125,6 +128,8 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
|
|
125
128
|
var textareaHelperId = id ? "".concat(id, "-helper") : undefined;
|
126
129
|
var applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;
|
127
130
|
var placeLabel = labelPlacement === 'inner' && label && size !== 'xs' ? label : placeholder;
|
131
|
+
var hasOuterLabel = Boolean(label && labelPlacement === 'outer');
|
132
|
+
var requiredAlignClass = requiredAlign === 'right' ? 'align-right ' : undefined;
|
128
133
|
(0, _plasmaCore.useResizeObserver)(outerRef, function (currentElement) {
|
129
134
|
var inlineWidth = currentElement.style.width;
|
130
135
|
if (inlineWidth || cols) {
|
@@ -163,16 +168,21 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
|
|
163
168
|
size: size,
|
164
169
|
disabled: disabled,
|
165
170
|
readOnly: readOnly,
|
171
|
+
required: required,
|
166
172
|
style: _objectSpread({
|
167
173
|
width: helperWidth
|
168
174
|
}, style),
|
169
175
|
className: className
|
170
|
-
},
|
176
|
+
}, hasOuterLabel && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledLabel, null, required && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledIndicator, {
|
177
|
+
className: (0, _utils.cx)('placement-outer', requiredAlignClass)
|
178
|
+
}), label), /*#__PURE__*/_react["default"].createElement(_TextArea.StyledContainer, {
|
171
179
|
className: _utils.cx.apply(void 0, [styledContainer].concat(_toConsumableArray(dynamicLabelClasses))),
|
172
180
|
width: helperWidth,
|
173
181
|
onFocus: onFocusHandler,
|
174
182
|
onBlur: onBlurHandler
|
175
|
-
},
|
183
|
+
}, required && !hasOuterLabel && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledIndicator, {
|
184
|
+
className: (0, _utils.cx)('placement-inner', requiredAlignClass)
|
185
|
+
}), contentRight && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledContent, null, contentRight), /*#__PURE__*/_react["default"].createElement(_TextArea.StyledTextAreaWrapper, {
|
176
186
|
className: styledTextAreaWrapper,
|
177
187
|
hasHelper: hasHelper
|
178
188
|
}, /*#__PURE__*/_react["default"].createElement(_TextArea.StyledTextArea, _extends({
|
@@ -220,6 +230,10 @@ var textAreaConfig = exports.textAreaConfig = {
|
|
220
230
|
css: _base3.base,
|
221
231
|
attrs: true
|
222
232
|
},
|
233
|
+
required: {
|
234
|
+
css: _base4.base,
|
235
|
+
attrs: true
|
236
|
+
},
|
223
237
|
readOnly: {
|
224
238
|
attrs: true
|
225
239
|
}
|
@@ -3,14 +3,14 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.StyledTextAreaWrapper = exports.StyledTextArea = exports.StyledRightHelper = exports.StyledPlaceholder = exports.StyledLeftHelper = exports.StyledLabel = exports.StyledHelpers = exports.StyledContent = exports.StyledContainer = void 0;
|
6
|
+
exports.StyledTextAreaWrapper = exports.StyledTextArea = exports.StyledRightHelper = exports.StyledPlaceholder = exports.StyledLeftHelper = exports.StyledLabel = exports.StyledIndicator = exports.StyledHelpers = exports.StyledContent = exports.StyledContainer = void 0;
|
7
7
|
var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
|
8
8
|
var _mixins = /*#__PURE__*/require("../../mixins");
|
9
9
|
var _TextArea = /*#__PURE__*/require("./TextArea.tokens");
|
10
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
11
11
|
var StyledLabel = exports.StyledLabel = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
12
12
|
componentId: "plasma-new-hope__sc-pxxv3p-0"
|
13
|
-
})(["margin-bottom:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _TextArea.tokens.labelMarginBottom, _TextArea.tokens.inputFontFamily, _TextArea.tokens.inputFontSize, _TextArea.tokens.inputFontStyle, _TextArea.tokens.inputFontWeight, _TextArea.tokens.inputLetterSpacing, _TextArea.tokens.inputLineHeight);
|
13
|
+
})(["position:relative;display:inline-block;margin-bottom:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _TextArea.tokens.labelMarginBottom, _TextArea.tokens.inputFontFamily, _TextArea.tokens.inputFontSize, _TextArea.tokens.inputFontStyle, _TextArea.tokens.inputFontWeight, _TextArea.tokens.inputLetterSpacing, _TextArea.tokens.inputLineHeight);
|
14
14
|
var StyledTextAreaWrapper = exports.StyledTextAreaWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
15
15
|
componentId: "plasma-new-hope__sc-pxxv3p-1"
|
16
16
|
})(["background-color:var(", ");padding-top:var(", ");padding-bottom:", ";border-radius:", ";"], _TextArea.tokens.inputBackgroundColor, _TextArea.tokens.inputPaddingTop, function (_ref) {
|
@@ -74,4 +74,7 @@ var StyledPlaceholder = exports.StyledPlaceholder = /*#__PURE__*/_styledComponen
|
|
74
74
|
})(["box-sizing:border-box;position:absolute;pointer-events:none;display:inline-flex;align-items:center;transition:all 0.1s ease-in-out;transform-origin:top left;color:var(", ");width:100%;height:auto;top:var(", ");padding-left:var(", ");padding-right:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _TextArea.tokens.placeholderColor, _TextArea.tokens.inputPaddingTop, _TextArea.tokens.inputPaddingLeft, function (_ref13) {
|
75
75
|
var hasContentRight = _ref13.hasContentRight;
|
76
76
|
return hasContentRight ? "var(".concat(_TextArea.tokens.inputPaddingRightWithRightContent, ")") : "var(".concat(_TextArea.tokens.inputPaddingRight, ")");
|
77
|
-
}, _TextArea.tokens.inputFontFamily, _TextArea.tokens.inputFontSize, _TextArea.tokens.inputFontStyle, _TextArea.tokens.inputFontWeight, _TextArea.tokens.inputLetterSpacing, _TextArea.tokens.inputLineHeight);
|
77
|
+
}, _TextArea.tokens.inputFontFamily, _TextArea.tokens.inputFontSize, _TextArea.tokens.inputFontStyle, _TextArea.tokens.inputFontWeight, _TextArea.tokens.inputLetterSpacing, _TextArea.tokens.inputLineHeight);
|
78
|
+
var StyledIndicator = exports.StyledIndicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
79
|
+
componentId: "plasma-new-hope__sc-pxxv3p-9"
|
80
|
+
})(["position:absolute;border-radius:50%;background-color:var(", ");&.placement-outer{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}&.placement-inner{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}"], _TextArea.tokens.indicatorColor, _TextArea.tokens.indicatorSizeOuter, _TextArea.tokens.indicatorSizeOuter, _TextArea.tokens.indicatorLabelPlacementOuter, _TextArea.tokens.indicatorLabelPlacementOuterRight, _TextArea.tokens.indicatorSizeInner, _TextArea.tokens.indicatorSizeInner, _TextArea.tokens.indicatorLabelPlacementInner, _TextArea.tokens.indicatorLabelPlacementInnerRight);
|
@@ -32,7 +32,7 @@ export function App() {
|
|
32
32
|
```
|
33
33
|
|
34
34
|
### Размеры компонента
|
35
|
-
Высоту и ширину можно регулировать с помощью свойств `height` и `width`,
|
35
|
+
Высоту и ширину можно регулировать с помощью свойств `height` и `width`,
|
36
36
|
указав значения в `rem` или соответствующие свойствам css значения.
|
37
37
|
`height` и `width` отвечают за **всю** высоту и ширину компонента.
|
38
38
|
|
@@ -76,7 +76,7 @@ export function App() {
|
|
76
76
|
|
77
77
|
### Autoresize
|
78
78
|
Также можно включить автоматическое регулирование высоты поля ввода по длине контента внутри (параметра `value`).
|
79
|
-
Для этого необходимо использовать свойство `autoResize`.
|
79
|
+
Для этого необходимо использовать свойство `autoResize`.
|
80
80
|
|
81
81
|
Свойства `minAuto`, `maxAuto` указываются в абсолютных единицах и отвечают за минимальное и максимальное количество строк.
|
82
82
|
|
@@ -123,4 +123,30 @@ export function App() {
|
|
123
123
|
</div>
|
124
124
|
);
|
125
125
|
}
|
126
|
-
```
|
126
|
+
```
|
127
|
+
|
128
|
+
|
129
|
+
### Обязательность поля
|
130
|
+
Обязательность поля задаётся с помощью свойств `required` и `requiredAlign`. Где `requiredAlign` отвечает за выравнивание и принимает значения `"left"` и `"right"`:
|
131
|
+
|
132
|
+
```tsx live
|
133
|
+
import React from 'react';
|
134
|
+
import { TextField } from '@salutejs/{{ package }}';
|
135
|
+
|
136
|
+
export function App() {
|
137
|
+
return (
|
138
|
+
<div>
|
139
|
+
<TextArea
|
140
|
+
placeholder="Введите значение"
|
141
|
+
required
|
142
|
+
/>
|
143
|
+
<TextArea
|
144
|
+
placeholder="Введите значение"
|
145
|
+
label="Заголовок"
|
146
|
+
required
|
147
|
+
requiredAlign="right"
|
148
|
+
/>
|
149
|
+
</div>
|
150
|
+
);
|
151
|
+
}
|
152
|
+
```
|
@@ -152,5 +152,12 @@ var tokens = exports.tokens = {
|
|
152
152
|
/** Прозрачность для всего компонента в состоянии disabled */
|
153
153
|
disabledOpacity: '--plasma-textarea-disabled-opacity',
|
154
154
|
/** Цвет текста для элемента textarea в состоянии disabled */
|
155
|
-
inputColorDisabled: '--plasma-textarea-input-color-disabled'
|
155
|
+
inputColorDisabled: '--plasma-textarea-input-color-disabled',
|
156
|
+
indicatorColor: '--plasma-textarea-indicator-color',
|
157
|
+
indicatorSizeInner: '--plasma-textarea-indicator-size-inner',
|
158
|
+
indicatorSizeOuter: '--plasma-textarea-indicator-size-outer',
|
159
|
+
indicatorLabelPlacementInner: '--plasma-textarea-indicator-placement-inner',
|
160
|
+
indicatorLabelPlacementOuter: '--plasma-textarea-indicator-placement-outer',
|
161
|
+
indicatorLabelPlacementInnerRight: '--plasma-textarea-indicator-placement-inner-right',
|
162
|
+
indicatorLabelPlacementOuterRight: '--plasma-textarea-indicator-placement-outer-right'
|
156
163
|
};
|
@@ -0,0 +1 @@
|
|
1
|
+
["--plasma-textarea-indicator-color"]
|
@@ -36,5 +36,11 @@
|
|
36
36
|
"--plasma-textarea-helpers-font-style",
|
37
37
|
"--plasma-textarea-helpers-font-weight",
|
38
38
|
"--plasma-textarea-helpers-letter-spacing",
|
39
|
-
"--plasma-textarea-helpers-line-height"
|
39
|
+
"--plasma-textarea-helpers-line-height",
|
40
|
+
"--plasma-textarea-indicator-size-inner",
|
41
|
+
"--plasma-textarea-indicator-size-outer",
|
42
|
+
"--plasma-textarea-indicator-placement-inner",
|
43
|
+
"--plasma-textarea-indicator-placement-outer",
|
44
|
+
"--plasma-textarea-indicator-placement-inner-right",
|
45
|
+
"--plasma-textarea-indicator-placement-outer-right"
|
40
46
|
]
|
@@ -13,12 +13,13 @@ var _base = /*#__PURE__*/require("./variations/_size/base");
|
|
13
13
|
var _base2 = /*#__PURE__*/require("./variations/_view/base");
|
14
14
|
var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
|
15
15
|
var _base4 = /*#__PURE__*/require("./variations/_read-only/base");
|
16
|
-
var _base5 = /*#__PURE__*/require("./variations/
|
16
|
+
var _base5 = /*#__PURE__*/require("./variations/_required/base");
|
17
|
+
var _base6 = /*#__PURE__*/require("./variations/_label-placement/base");
|
17
18
|
var _TextField = /*#__PURE__*/require("./TextField.styles");
|
18
19
|
var _TextField2 = /*#__PURE__*/require("./TextField.tokens");
|
19
20
|
var _ui = /*#__PURE__*/require("./ui");
|
20
21
|
var _hooks = /*#__PURE__*/require("./hooks");
|
21
|
-
var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
|
22
|
+
var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredAlign", "view", "size", "readOnly", "disabled", "required", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
|
22
23
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
23
24
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
24
25
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
@@ -30,7 +31,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
|
|
30
31
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
31
32
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
32
33
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
33
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["display:block;
|
34
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["display:block;"]);
|
34
35
|
var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
|
35
36
|
return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
36
37
|
var id = _ref.id,
|
@@ -46,12 +47,16 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
|
|
46
47
|
leftHelper = _ref.leftHelper,
|
47
48
|
_ref$enumerationType = _ref.enumerationType,
|
48
49
|
enumerationType = _ref$enumerationType === void 0 ? 'plain' : _ref$enumerationType,
|
50
|
+
_ref$requiredAlign = _ref.requiredAlign,
|
51
|
+
requiredAlign = _ref$requiredAlign === void 0 ? 'left' : _ref$requiredAlign,
|
49
52
|
view = _ref.view,
|
50
53
|
size = _ref.size,
|
51
54
|
_ref$readOnly = _ref.readOnly,
|
52
55
|
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
|
53
56
|
_ref$disabled = _ref.disabled,
|
54
57
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
58
|
+
_ref$required = _ref.required,
|
59
|
+
required = _ref$required === void 0 ? false : _ref$required,
|
55
60
|
values = _ref.chips,
|
56
61
|
onChange = _ref.onChange,
|
57
62
|
onChangeChips = _ref.onChangeChips,
|
@@ -81,6 +86,8 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
|
|
81
86
|
var innerLabelPlacementValue = hideLabel ? 'outer' : labelPlacement;
|
82
87
|
var innerPlaceholderValue = hideLabel ? label : placeholder;
|
83
88
|
var innerLabelValue = hideLabel ? undefined : label;
|
89
|
+
var hasOuterLabel = Boolean(!labelInside && innerLabelValue);
|
90
|
+
var requiredAlignClass = requiredAlign === 'right' ? 'align-right ' : undefined;
|
84
91
|
var hideLabelClass = hideLabel && label ? _TextField2.classes.hideLabel : undefined;
|
85
92
|
var labelPlacementClass = _TextField2.classes["".concat(labelPlacement, "LabelPlacement")];
|
86
93
|
var isChipsVisible = isChipEnumeration && (chips === null || chips === void 0 ? void 0 : chips.length);
|
@@ -156,17 +163,22 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
|
|
156
163
|
view: view,
|
157
164
|
size: size,
|
158
165
|
disabled: disabled,
|
166
|
+
required: required,
|
159
167
|
readOnly: !disabled && readOnly,
|
160
168
|
labelPlacement: innerLabelPlacementValue,
|
161
169
|
onClick: handleInputFocus,
|
162
170
|
className: (0, _utils.cx)(labelPlacementClass, hideLabelClass, className),
|
163
171
|
style: style
|
164
|
-
},
|
172
|
+
}, hasOuterLabel && /*#__PURE__*/_react["default"].createElement(_TextField.Label, {
|
165
173
|
id: labelId,
|
166
174
|
htmlFor: id
|
167
|
-
},
|
175
|
+
}, required && /*#__PURE__*/_react["default"].createElement(_TextField.StyledIndicator, {
|
176
|
+
className: (0, _utils.cx)('placement-outer', requiredAlignClass)
|
177
|
+
}), innerLabelValue), /*#__PURE__*/_react["default"].createElement(_TextField.InputWrapper, {
|
168
178
|
className: (0, _utils.cx)(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent)
|
169
|
-
},
|
179
|
+
}, !hasOuterLabel && required && /*#__PURE__*/_react["default"].createElement(_TextField.StyledIndicator, {
|
180
|
+
className: (0, _utils.cx)('placement-inner', requiredAlignClass)
|
181
|
+
}), contentLeft && /*#__PURE__*/_react["default"].createElement(_TextField.StyledContentLeft, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_TextField.InputLabelWrapper, {
|
170
182
|
tabIndex: -1,
|
171
183
|
ref: contentRef,
|
172
184
|
onKeyDown: handleContentKeyDown,
|
@@ -230,8 +242,12 @@ var textFieldConfig = exports.textFieldConfig = {
|
|
230
242
|
css: _base4.base,
|
231
243
|
attrs: true
|
232
244
|
},
|
245
|
+
required: {
|
246
|
+
css: _base5.base,
|
247
|
+
attrs: true
|
248
|
+
},
|
233
249
|
labelPlacement: {
|
234
|
-
css:
|
250
|
+
css: _base6.base
|
235
251
|
}
|
236
252
|
},
|
237
253
|
defaults: {
|
@@ -3,7 +3,7 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.StyledTextBefore = exports.StyledTextAfter = exports.StyledContentRight = exports.StyledContentLeft = exports.StyledChips = exports.LeftHelper = exports.Label = exports.InputWrapper = exports.InputLabelWrapper = exports.Input = void 0;
|
6
|
+
exports.StyledTextBefore = exports.StyledTextAfter = exports.StyledIndicator = exports.StyledContentRight = exports.StyledContentLeft = exports.StyledChips = exports.LeftHelper = exports.Label = exports.InputWrapper = exports.InputLabelWrapper = exports.Input = void 0;
|
7
7
|
var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
|
8
8
|
var _TextField = /*#__PURE__*/require("./TextField.tokens");
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
@@ -21,7 +21,7 @@ var Input = exports.Input = /*#__PURE__*/_styledComponents["default"].input.with
|
|
21
21
|
})(["box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;flex:1;min-width:60%;"]);
|
22
22
|
var Label = exports.Label = /*#__PURE__*/_styledComponents["default"].label.withConfig({
|
23
23
|
componentId: "plasma-new-hope__sc-g4vxbb-4"
|
24
|
-
})([""]);
|
24
|
+
})(["position:relative;"]);
|
25
25
|
var StyledContentLeft = exports.StyledContentLeft = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
26
26
|
componentId: "plasma-new-hope__sc-g4vxbb-5"
|
27
27
|
})(["margin:var(", ");line-height:0;"], _TextField.tokens.leftContentMargin);
|
@@ -36,4 +36,7 @@ var StyledTextBefore = exports.StyledTextBefore = /*#__PURE__*/_styledComponents
|
|
36
36
|
})([""]);
|
37
37
|
var StyledTextAfter = exports.StyledTextAfter = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
38
38
|
componentId: "plasma-new-hope__sc-g4vxbb-9"
|
39
|
-
})([""]);
|
39
|
+
})([""]);
|
40
|
+
var StyledIndicator = exports.StyledIndicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
41
|
+
componentId: "plasma-new-hope__sc-g4vxbb-10"
|
42
|
+
})(["position:absolute;border-radius:50%;background-color:var(", ");&.placement-outer{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}&.placement-inner{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}"], _TextField.tokens.indicatorColor, _TextField.tokens.indicatorSizeOuter, _TextField.tokens.indicatorSizeOuter, _TextField.tokens.indicatorLabelPlacementOuter, _TextField.tokens.indicatorLabelPlacementOuterRight, _TextField.tokens.indicatorSizeInner, _TextField.tokens.indicatorSizeInner, _TextField.tokens.indicatorLabelPlacementInner, _TextField.tokens.indicatorLabelPlacementInnerRight);
|
@@ -112,7 +112,7 @@ export function App() {
|
|
112
112
|
```
|
113
113
|
|
114
114
|
### Режим ввода
|
115
|
-
С помощью свойства `enumarationType` можно вводить элементы как теги.
|
115
|
+
С помощью свойства `enumarationType` можно вводить элементы как теги.
|
116
116
|
По нажатию Enter, после ввода нужного текста, он преобразуется в Chip:
|
117
117
|
|
118
118
|
```tsx live
|
@@ -134,3 +134,29 @@ export function App() {
|
|
134
134
|
);
|
135
135
|
}
|
136
136
|
```
|
137
|
+
|
138
|
+
|
139
|
+
### Обязательность поля
|
140
|
+
Обязательность поля задаётся с помощью свойств `required` и `requiredAlign`. Где `requiredAlign` отвечает за выравнивание и принимает значения `"left"` и `"right"`:
|
141
|
+
|
142
|
+
```tsx live
|
143
|
+
import React from 'react';
|
144
|
+
import { TextField } from '@salutejs/{{ package }}';
|
145
|
+
|
146
|
+
export function App() {
|
147
|
+
return (
|
148
|
+
<div>
|
149
|
+
<TextField
|
150
|
+
placeholder="Введите значение"
|
151
|
+
required
|
152
|
+
/>
|
153
|
+
<TextField
|
154
|
+
placeholder="Введите значение"
|
155
|
+
label="Заголовок"
|
156
|
+
required
|
157
|
+
requiredAlign="right"
|
158
|
+
/>
|
159
|
+
</div>
|
160
|
+
);
|
161
|
+
}
|
162
|
+
```
|
@@ -112,5 +112,12 @@ var tokens = exports.tokens = {
|
|
112
112
|
chipClearContentMarginLeft: '--plasma-textfield__chip-clear-content-margin-left',
|
113
113
|
chipClearContentMarginRight: '--plasma-textfield__chip-clear-content-margin-right',
|
114
114
|
chipOpacityReadonly: '--plasma-textfield__chip-opacity-readonly',
|
115
|
-
focusColor: '--plasma-textfield-focus-color'
|
115
|
+
focusColor: '--plasma-textfield-focus-color',
|
116
|
+
indicatorColor: '--plasma-textfield-indicator-color',
|
117
|
+
indicatorSizeInner: '--plasma-textfield-indicator-size-inner',
|
118
|
+
indicatorSizeOuter: '--plasma-textfield-indicator-size-outer',
|
119
|
+
indicatorLabelPlacementInner: '--plasma-textfield-indicator-placement-inner',
|
120
|
+
indicatorLabelPlacementOuter: '--plasma-textfield-indicator-placement-outer',
|
121
|
+
indicatorLabelPlacementInnerRight: '--plasma-textfield-indicator-placement-inner-right',
|
122
|
+
indicatorLabelPlacementOuterRight: '--plasma-textfield-indicator-placement-outer-right'
|
116
123
|
};
|
@@ -7,4 +7,4 @@ exports.base = void 0;
|
|
7
7
|
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
8
|
var _TextField = /*#__PURE__*/require("../../TextField.tokens");
|
9
9
|
var _TextField2 = /*#__PURE__*/require("../../TextField.styles");
|
10
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{", "{display:block;margin-bottom:var(", ");color:var(", ");}}&.", "{&:not(.", "){", "{padding:var(", ");}", ",", "{padding:var(", ");}}", ":focus ~ ", ",", ":not(:placeholder-shown) ~ ", "{height:auto;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}&:not(.", "){", ":not(:focus)::placeholder{color:transparent;}", ":focus::placeholder{color:transparent;}}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;transition:padding 0.1s ease-in-out,height 0s;height:var(", ");padding-top:calc(var(", ") / 4);padding-bottom:calc(var(", ") / 4);}}"], _TextField.classes.outerLabelPlacement, _TextField2.Label, _TextField.tokens.labelOffset, _TextField.tokens.labelColor, _TextField.classes.innerLabelPlacement, _TextField.classes.hideLabel, _TextField2.Input, _TextField.tokens.contentLabelInnerPadding, _TextField2.StyledTextAfter, _TextField2.StyledTextBefore, _TextField.tokens.contentLabelInnerPadding, _TextField2.Input, _TextField2.Label, _TextField2.Input, _TextField2.Label, _TextField.tokens.labelInnerPadding, _TextField.tokens.labelInnerFontFamily, _TextField.tokens.labelInnerFontSize, _TextField.tokens.labelInnerFontStyle, _TextField.tokens.labelInnerFontWeight, _TextField.tokens.labelInnerLetterSpacing, _TextField.tokens.labelInnerLineHeight, _TextField.classes.hideLabel, _TextField2.Input, _TextField2.Input, _TextField2.Label, _TextField.tokens.placeholderColor, _TextField.tokens.height, _TextField.tokens.height, _TextField.tokens.height);
|
10
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{", "{position:relative;display:inline-block;margin-bottom:var(", ");color:var(", ");}}&.", "{&:not(.", "){", "{padding:var(", ");}", ",", "{padding:var(", ");}}", ":focus ~ ", ",", ":not(:placeholder-shown) ~ ", "{height:auto;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}&:not(.", "){", ":not(:focus)::placeholder{color:transparent;}", ":focus::placeholder{color:transparent;}}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;transition:padding 0.1s ease-in-out,height 0s;height:var(", ");padding-top:calc(var(", ") / 4);padding-bottom:calc(var(", ") / 4);}}"], _TextField.classes.outerLabelPlacement, _TextField2.Label, _TextField.tokens.labelOffset, _TextField.tokens.labelColor, _TextField.classes.innerLabelPlacement, _TextField.classes.hideLabel, _TextField2.Input, _TextField.tokens.contentLabelInnerPadding, _TextField2.StyledTextAfter, _TextField2.StyledTextBefore, _TextField.tokens.contentLabelInnerPadding, _TextField2.Input, _TextField2.Label, _TextField2.Input, _TextField2.Label, _TextField.tokens.labelInnerPadding, _TextField.tokens.labelInnerFontFamily, _TextField.tokens.labelInnerFontSize, _TextField.tokens.labelInnerFontStyle, _TextField.tokens.labelInnerFontWeight, _TextField.tokens.labelInnerLetterSpacing, _TextField.tokens.labelInnerLineHeight, _TextField.classes.hideLabel, _TextField2.Input, _TextField2.Input, _TextField2.Label, _TextField.tokens.placeholderColor, _TextField.tokens.height, _TextField.tokens.height, _TextField.tokens.height);
|
@@ -0,0 +1 @@
|
|
1
|
+
["--plasma-textfield-indicator-color"]
|
@@ -2,5 +2,11 @@
|
|
2
2
|
"--plasma-textfield-height",
|
3
3
|
"--plasma-textfield-padding",
|
4
4
|
"--plasma-textfield-radius",
|
5
|
+
"--plasma-textfield-indicator-size-inner",
|
6
|
+
"--plasma-textfield-indicator-size-outer",
|
7
|
+
"--plasma-textfield-indicator-placement-inner",
|
8
|
+
"--plasma-textfield-indicator-placement-outer",
|
9
|
+
"--plasma-textfield-indicator-placement-inner-right",
|
10
|
+
"--plasma-textfield-indicator-placement-outer-right",
|
5
11
|
{ "name": "typography", "type": "enum", "value": "typo:body" }
|
6
12
|
]
|