@audius/harmony 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_virtual/_tslib.js +11 -1
- package/dist/_virtual/_tslib.js.map +1 -1
- package/dist/assets/icons/LogoPhantomPlain.svg.js +78 -0
- package/dist/assets/icons/LogoPhantomPlain.svg.js.map +1 -0
- package/dist/assets/icons/PaperAirplane.svg.js +76 -0
- package/dist/assets/icons/PaperAirplane.svg.js.map +1 -0
- package/dist/assets/icons/Pin.svg.js +76 -0
- package/dist/assets/icons/Pin.svg.js.map +1 -0
- package/dist/assets/icons/QrCode.svg.js +78 -0
- package/dist/assets/icons/QrCode.svg.js.map +1 -0
- package/dist/assets/icons/Send.svg.js +6 -3
- package/dist/assets/icons/Send.svg.js.map +1 -1
- package/dist/assets/icons/TowerBroadcast.svg.js +75 -0
- package/dist/assets/icons/TowerBroadcast.svg.js.map +1 -0
- package/dist/components/artwork/Artwork.d.ts.map +1 -1
- package/dist/components/artwork/Artwork.js +5 -4
- package/dist/components/artwork/Artwork.js.map +1 -1
- package/dist/components/avatar/Avatar.d.ts.map +1 -1
- package/dist/components/avatar/Avatar.js +1 -1
- package/dist/components/avatar/Avatar.js.map +1 -1
- package/dist/components/button/BaseButton/BaseButton.d.ts +1 -0
- package/dist/components/button/BaseButton/BaseButton.d.ts.map +1 -1
- package/dist/components/button/BaseButton/BaseButton.js +2 -2
- package/dist/components/button/BaseButton/BaseButton.js.map +1 -1
- package/dist/components/button/BaseButton/types.d.ts +1 -0
- package/dist/components/button/BaseButton/types.d.ts.map +1 -1
- package/dist/components/button/FilterButton/FilterButton.d.ts +1 -1
- package/dist/components/button/FilterButton/FilterButton.d.ts.map +1 -1
- package/dist/components/button/FilterButton/FilterButton.js +85 -61
- package/dist/components/button/FilterButton/FilterButton.js.map +1 -1
- package/dist/components/button/{OptionsFilterButton/OptionsFilterButton.stories.d.ts → FilterButton/FilterButton.stories.d.ts} +5 -4
- package/dist/components/button/FilterButton/FilterButton.stories.d.ts.map +1 -0
- package/dist/components/button/FilterButton/FilterButtonKeyHandler.d.ts +18 -0
- package/dist/components/button/FilterButton/FilterButtonKeyHandler.d.ts.map +1 -0
- package/dist/components/button/FilterButton/FilterButtonOption.d.ts +11 -0
- package/dist/components/button/FilterButton/FilterButtonOption.d.ts.map +1 -0
- package/dist/components/button/FilterButton/FilterButtonOption.js +57 -0
- package/dist/components/button/FilterButton/FilterButtonOption.js.map +1 -0
- package/dist/components/button/FilterButton/FilterButtonOptionsList.d.ts +21 -0
- package/dist/components/button/FilterButton/FilterButtonOptionsList.d.ts.map +1 -0
- package/dist/components/button/FilterButton/FilterButtonOptionsList.js +40 -0
- package/dist/components/button/FilterButton/FilterButtonOptionsList.js.map +1 -0
- package/dist/components/button/FilterButton/types.d.ts +51 -24
- package/dist/components/button/FilterButton/types.d.ts.map +1 -1
- package/dist/components/button/IconButton/IconButton.d.ts +19 -2
- package/dist/components/button/IconButton/IconButton.d.ts.map +1 -1
- package/dist/components/button/IconButton/IconButton.js +3 -2
- package/dist/components/button/IconButton/IconButton.js.map +1 -1
- package/dist/components/button/index.d.ts +3 -4
- package/dist/components/button/index.d.ts.map +1 -1
- package/dist/components/checkbox/Checkbox.d.ts +7 -0
- package/dist/components/checkbox/Checkbox.d.ts.map +1 -0
- package/dist/components/checkbox/Checkbox.js +64 -0
- package/dist/components/checkbox/Checkbox.js.map +1 -0
- package/dist/components/checkbox/Checkbox.stories.d.ts +9 -0
- package/dist/components/checkbox/Checkbox.stories.d.ts.map +1 -0
- package/dist/components/checkbox/Indeterminate.svg.js +114 -0
- package/dist/components/checkbox/Indeterminate.svg.js.map +1 -0
- package/dist/components/checkbox/Select.svg.js +118 -0
- package/dist/components/checkbox/Select.svg.js.map +1 -0
- package/dist/components/checkbox/index.d.ts +3 -0
- package/dist/components/checkbox/index.d.ts.map +1 -0
- package/dist/components/checkbox/types.d.ts +7 -0
- package/dist/components/checkbox/types.d.ts.map +1 -0
- package/dist/components/comments/ArtistPick/ArtistPick.d.ts +3 -0
- package/dist/components/comments/ArtistPick/ArtistPick.d.ts.map +1 -0
- package/dist/components/comments/ArtistPick/ArtistPick.js +20 -0
- package/dist/components/comments/ArtistPick/ArtistPick.js.map +1 -0
- package/dist/components/comments/ArtistPick/ArtistPick.stories.d.ts +7 -0
- package/dist/components/comments/ArtistPick/ArtistPick.stories.d.ts.map +1 -0
- package/dist/components/comments/ArtistPick/index.d.ts +3 -0
- package/dist/components/comments/ArtistPick/index.d.ts.map +1 -0
- package/dist/components/comments/ArtistPick/types.d.ts +5 -0
- package/dist/components/comments/ArtistPick/types.d.ts.map +1 -0
- package/dist/components/comments/CommentText/CommentText.d.ts +3 -0
- package/dist/components/comments/CommentText/CommentText.d.ts.map +1 -0
- package/dist/components/comments/CommentText/CommentText.js +36 -0
- package/dist/components/comments/CommentText/CommentText.js.map +1 -0
- package/dist/components/comments/CommentText/CommentText.stories.d.ts +10 -0
- package/dist/components/comments/CommentText/CommentText.stories.d.ts.map +1 -0
- package/dist/components/comments/CommentText/index.d.ts +3 -0
- package/dist/components/comments/CommentText/index.d.ts.map +1 -0
- package/dist/components/comments/CommentText/types.d.ts +5 -0
- package/dist/components/comments/CommentText/types.d.ts.map +1 -0
- package/dist/components/comments/IconText/IconText.d.ts +3 -0
- package/dist/components/comments/IconText/IconText.d.ts.map +1 -0
- package/dist/components/comments/IconText/IconText.js +19 -0
- package/dist/components/comments/IconText/IconText.js.map +1 -0
- package/dist/components/comments/IconText/IconText.stories.d.ts +7 -0
- package/dist/components/comments/IconText/IconText.stories.d.ts.map +1 -0
- package/dist/components/comments/IconText/index.d.ts +3 -0
- package/dist/components/comments/IconText/index.d.ts.map +1 -0
- package/dist/components/comments/IconText/types.d.ts +14 -0
- package/dist/components/comments/IconText/types.d.ts.map +1 -0
- package/dist/components/comments/Identifier/Identifier.d.ts +3 -0
- package/dist/components/comments/Identifier/Identifier.d.ts.map +1 -0
- package/dist/components/comments/Identifier/Identifier.js +30 -0
- package/dist/components/comments/Identifier/Identifier.js.map +1 -0
- package/dist/components/comments/Identifier/Identifier.stories.d.ts +7 -0
- package/dist/components/comments/Identifier/Identifier.stories.d.ts.map +1 -0
- package/dist/components/comments/Identifier/index.d.ts +3 -0
- package/dist/components/comments/Identifier/index.d.ts.map +1 -0
- package/dist/components/comments/Identifier/types.d.ts +5 -0
- package/dist/components/comments/Identifier/types.d.ts.map +1 -0
- package/dist/components/comments/SendIcon/SendIcon.d.ts +3 -0
- package/dist/components/comments/SendIcon/SendIcon.d.ts.map +1 -0
- package/dist/components/comments/SendIcon/SendIcon.js +36 -0
- package/dist/components/comments/SendIcon/SendIcon.js.map +1 -0
- package/dist/components/comments/SendIcon/SendIcon.stories.d.ts +7 -0
- package/dist/components/comments/SendIcon/SendIcon.stories.d.ts.map +1 -0
- package/dist/components/comments/SendIcon/index.d.ts +3 -0
- package/dist/components/comments/SendIcon/index.d.ts.map +1 -0
- package/dist/components/comments/SendIcon/types.d.ts +5 -0
- package/dist/components/comments/SendIcon/types.d.ts.map +1 -0
- package/dist/components/comments/Timestamp/Timestamp.d.ts +3 -0
- package/dist/components/comments/Timestamp/Timestamp.d.ts.map +1 -0
- package/dist/components/comments/Timestamp/Timestamp.js +13 -0
- package/dist/components/comments/Timestamp/Timestamp.js.map +1 -0
- package/dist/components/comments/Timestamp/Timestamp.stories.d.ts +7 -0
- package/dist/components/comments/Timestamp/Timestamp.stories.d.ts.map +1 -0
- package/dist/components/comments/Timestamp/index.d.ts +4 -0
- package/dist/components/comments/Timestamp/index.d.ts.map +1 -0
- package/dist/components/comments/Timestamp/types.d.ts +11 -0
- package/dist/components/comments/Timestamp/types.d.ts.map +1 -0
- package/dist/components/comments/Timestamp/types.js +10 -0
- package/dist/components/comments/Timestamp/types.js.map +1 -0
- package/dist/components/comments/Timestamp/util.d.ts +2 -0
- package/dist/components/comments/Timestamp/util.d.ts.map +1 -0
- package/dist/components/comments/Timestamp/util.js +26 -0
- package/dist/components/comments/Timestamp/util.js.map +1 -0
- package/dist/components/icon.d.ts +2 -1
- package/dist/components/icon.d.ts.map +1 -1
- package/dist/components/index.d.ts +8 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/input/PasswordInput/PasswordInput.js +2 -2
- package/dist/components/input/SelectablePill/SelectablePill.d.ts.map +1 -1
- package/dist/components/input/SelectablePill/SelectablePill.js +1 -3
- package/dist/components/input/SelectablePill/SelectablePill.js.map +1 -1
- package/dist/components/input/TextInput/TextInput.d.ts +2 -0
- package/dist/components/input/TextInput/TextInput.d.ts.map +1 -1
- package/dist/components/input/TextInput/TextInput.js +10 -6
- package/dist/components/input/TextInput/TextInput.js.map +1 -1
- package/dist/components/input/TextInput/types.d.ts +8 -1
- package/dist/components/input/TextInput/types.d.ts.map +1 -1
- package/dist/components/input/TextInput/types.js.map +1 -1
- package/dist/components/internal/Menu.d.ts +22 -0
- package/dist/components/internal/Menu.d.ts.map +1 -0
- package/dist/components/internal/Menu.js +17 -0
- package/dist/components/internal/Menu.js.map +1 -0
- package/dist/components/internal/MenuItem.d.ts +19 -0
- package/dist/components/internal/MenuItem.d.ts.map +1 -0
- package/dist/components/internal/MenuItem.js +57 -0
- package/dist/components/internal/MenuItem.js.map +1 -0
- package/dist/components/internal/OptionKeyHandler.d.ts +30 -0
- package/dist/components/internal/OptionKeyHandler.d.ts.map +1 -0
- package/dist/components/{button/OptionsFilterButton/SelectPopupKeyHandler.js → internal/OptionKeyHandler.js} +6 -11
- package/dist/components/internal/OptionKeyHandler.js.map +1 -0
- package/dist/components/layout/Box/Box.js +4 -4
- package/dist/components/layout/Box/Box.js.map +1 -1
- package/dist/components/layout/Box/types.d.ts +6 -6
- package/dist/components/layout/Box/types.d.ts.map +1 -1
- package/dist/components/layout/Flex/Flex.d.ts.map +1 -1
- package/dist/components/layout/Flex/Flex.js +2 -2
- package/dist/components/layout/Flex/Flex.js.map +1 -1
- package/dist/components/layout/Flex/types.d.ts +2 -0
- package/dist/components/layout/Flex/types.d.ts.map +1 -1
- package/dist/components/modal/Modal.js +3 -3
- package/dist/components/modal/Modal.js.map +1 -1
- package/dist/components/modal/ModalContentPages.d.ts +10 -10
- package/dist/components/modal/ModalContentPages.d.ts.map +1 -1
- package/dist/components/modal/ModalContentPages.js +2 -2
- package/dist/components/modal/ModalContentPages.js.map +1 -1
- package/dist/components/modal/ModalHeader.js +2 -2
- package/dist/components/music-badge/MusicBadge.d.ts.map +1 -1
- package/dist/components/music-badge/MusicBadge.js +1 -1
- package/dist/components/music-badge/MusicBadge.js.map +1 -1
- package/dist/components/pill/Pill.d.ts +1 -0
- package/dist/components/pill/Pill.d.ts.map +1 -1
- package/dist/components/popup/Popup.d.ts +6 -1
- package/dist/components/popup/Popup.d.ts.map +1 -1
- package/dist/components/popup/Popup.js +47 -37
- package/dist/components/popup/Popup.js.map +1 -1
- package/dist/components/popup/types.d.ts +4 -0
- package/dist/components/popup/types.d.ts.map +1 -1
- package/dist/components/scrubber/Scrubber.d.ts.map +1 -1
- package/dist/components/scrubber/Scrubber.js +3 -13
- package/dist/components/scrubber/Scrubber.js.map +1 -1
- package/dist/components/scrubber/Slider.js +1 -1
- package/dist/components/scrubber/Slider.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControl.js +1 -3
- package/dist/components/segmented-control/SegmentedControl.js.map +1 -1
- package/dist/components/select/Select/Select.d.ts +21 -0
- package/dist/components/select/Select/Select.d.ts.map +1 -0
- package/dist/components/select/Select/Select.js +115 -0
- package/dist/components/select/Select/Select.js.map +1 -0
- package/dist/components/select/Select/Select.stories.d.ts +8 -0
- package/dist/components/select/Select/Select.stories.d.ts.map +1 -0
- package/dist/components/select/Select/index.d.ts +3 -0
- package/dist/components/select/Select/index.d.ts.map +1 -0
- package/dist/components/select/Select/types.d.ts +46 -0
- package/dist/components/select/Select/types.d.ts.map +1 -0
- package/dist/components/select/index.d.ts +2 -0
- package/dist/components/select/index.d.ts.map +1 -0
- package/dist/components/tag/Tag.d.ts.map +1 -1
- package/dist/components/tag/Tag.js +1 -1
- package/dist/components/tag/Tag.js.map +1 -1
- package/dist/components/text/Text.d.ts.map +1 -1
- package/dist/components/text/Text.js +15 -5
- package/dist/components/text/Text.js.map +1 -1
- package/dist/components/text/constants.d.ts +18 -0
- package/dist/components/text/constants.d.ts.map +1 -1
- package/dist/components/text/constants.js +7 -1
- package/dist/components/text/constants.js.map +1 -1
- package/dist/components/text/types.d.ts +2 -0
- package/dist/components/text/types.d.ts.map +1 -1
- package/dist/components/text-link/TextLink.d.ts.map +1 -1
- package/dist/components/text-link/TextLink.js +1 -1
- package/dist/components/text-link/TextLink.js.map +1 -1
- package/dist/foundations/color/color.d.ts +116 -0
- package/dist/foundations/color/color.d.ts.map +1 -1
- package/dist/foundations/color/color.js +2 -1
- package/dist/foundations/color/color.js.map +1 -1
- package/dist/foundations/color/primitive.d.ts +52 -0
- package/dist/foundations/color/primitive.d.ts.map +1 -1
- package/dist/foundations/color/primitive.js +52 -0
- package/dist/foundations/color/primitive.js.map +1 -1
- package/dist/foundations/color/semantic.d.ts +66 -0
- package/dist/foundations/color/semantic.d.ts.map +1 -1
- package/dist/foundations/color/semantic.js +8 -3
- package/dist/foundations/color/semantic.js.map +1 -1
- package/dist/foundations/theme/theme.d.ts +2 -0
- package/dist/foundations/theme/theme.d.ts.map +1 -1
- package/dist/foundations/theme/theme.js +4 -2
- package/dist/foundations/theme/theme.js.map +1 -1
- package/dist/foundations/theme/types.d.ts +6 -1
- package/dist/foundations/theme/types.d.ts.map +1 -1
- package/dist/foundations/typography/typography.d.ts +1 -0
- package/dist/foundations/typography/typography.d.ts.map +1 -1
- package/dist/foundations/typography/typography.js +2 -0
- package/dist/foundations/typography/typography.js.map +1 -1
- package/dist/harmony.css +1 -1
- package/dist/hooks/useClickOutside.d.ts +1 -1
- package/dist/hooks/useClickOutside.d.ts.map +1 -1
- package/dist/hooks/useClickOutside.js +11 -8
- package/dist/hooks/useClickOutside.js.map +1 -1
- package/dist/hooks/useControlled.d.ts +1 -1
- package/dist/hooks/useControlled.js.map +1 -1
- package/dist/hooks/useHotKeys.d.ts.map +1 -1
- package/dist/hooks/useHotKeys.js +2 -1
- package/dist/hooks/useHotKeys.js.map +1 -1
- package/dist/icons/logos.d.ts +1 -0
- package/dist/icons/logos.d.ts.map +1 -1
- package/dist/icons/logos.js +3 -1
- package/dist/icons/logos.js.map +1 -1
- package/dist/icons/utilityIcons.d.ts +4 -0
- package/dist/icons/utilityIcons.d.ts.map +1 -1
- package/dist/icons/utilityIcons.js +9 -1
- package/dist/icons/utilityIcons.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +19 -6
- package/dist/index.js.map +1 -1
- package/dist/utils/formatTrackTimestamp.d.ts +6 -0
- package/dist/utils/formatTrackTimestamp.d.ts.map +1 -0
- package/dist/utils/formatTrackTimestamp.js +18 -0
- package/dist/utils/formatTrackTimestamp.js.map +1 -0
- package/dist/utils/index.d.ts +5 -0
- package/dist/utils/index.d.ts.map +1 -0
- package/package.json +4 -2
- package/dist/components/button/OptionsFilterButton/OptionsFilterButton.d.ts +0 -18
- package/dist/components/button/OptionsFilterButton/OptionsFilterButton.d.ts.map +0 -1
- package/dist/components/button/OptionsFilterButton/OptionsFilterButton.js +0 -123
- package/dist/components/button/OptionsFilterButton/OptionsFilterButton.js.map +0 -1
- package/dist/components/button/OptionsFilterButton/OptionsFilterButton.stories.d.ts.map +0 -1
- package/dist/components/button/OptionsFilterButton/SelectPopupKeyHandler.d.ts +0 -18
- package/dist/components/button/OptionsFilterButton/SelectPopupKeyHandler.d.ts.map +0 -1
- package/dist/components/button/OptionsFilterButton/SelectPopupKeyHandler.js.map +0 -1
- package/dist/components/button/OptionsFilterButton/types.d.ts +0 -62
- package/dist/components/button/OptionsFilterButton/types.d.ts.map +0 -1
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Timestamp } from './Timestamp';
|
|
3
|
+
declare const meta: Meta<typeof Timestamp>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Timestamp>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
//# sourceMappingURL=Timestamp.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Timestamp.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/comments/Timestamp/Timestamp.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAItD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAUvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAGhC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAA;AASvC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/comments/Timestamp/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,QAAQ,CAAA;AAC/C,cAAc,SAAS,CAAA"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export type TimestampProps = {
|
|
2
|
+
time: Date;
|
|
3
|
+
};
|
|
4
|
+
export declare const MS_IN_S = 1000;
|
|
5
|
+
export declare const S_IN_MIN = 60;
|
|
6
|
+
export declare const MIN_IN_HR = 60;
|
|
7
|
+
export declare const HR_IN_DAY = 24;
|
|
8
|
+
export declare const DAY_IN_MONTH = 30;
|
|
9
|
+
export declare const MONTH_IN_YEAR = 12;
|
|
10
|
+
export type TimeUnit = 'm' | 'h' | 'd' | 'mo' | 'y';
|
|
11
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/comments/Timestamp/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,IAAI,CAAA;CACX,CAAA;AAGD,eAAO,MAAM,OAAO,OAAO,CAAA;AAC3B,eAAO,MAAM,QAAQ,KAAK,CAAA;AAC1B,eAAO,MAAM,SAAS,KAAK,CAAA;AAC3B,eAAO,MAAM,SAAS,KAAK,CAAA;AAC3B,eAAO,MAAM,YAAY,KAAK,CAAA;AAC9B,eAAO,MAAM,aAAa,KAAK,CAAA;AAE/B,MAAM,MAAM,QAAQ,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,CAAA"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
// TODO: Probably should move these to a general util file
|
|
2
|
+
var MS_IN_S = 1000;
|
|
3
|
+
var S_IN_MIN = 60;
|
|
4
|
+
var MIN_IN_HR = 60;
|
|
5
|
+
var HR_IN_DAY = 24;
|
|
6
|
+
var DAY_IN_MONTH = 30;
|
|
7
|
+
var MONTH_IN_YEAR = 12;
|
|
8
|
+
|
|
9
|
+
export { DAY_IN_MONTH, HR_IN_DAY, MIN_IN_HR, MONTH_IN_YEAR, MS_IN_S, S_IN_MIN };
|
|
10
|
+
//# sourceMappingURL=types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../../src/components/comments/Timestamp/types.ts"],"sourcesContent":["export type TimestampProps = {\n time: Date\n}\n\n// TODO: Probably should move these to a general util file\nexport const MS_IN_S = 1000\nexport const S_IN_MIN = 60\nexport const MIN_IN_HR = 60\nexport const HR_IN_DAY = 24\nexport const DAY_IN_MONTH = 30\nexport const MONTH_IN_YEAR = 12\n\nexport type TimeUnit = 'm' | 'h' | 'd' | 'mo' | 'y'\n"],"names":[],"mappings":"AAIA;AACO,IAAM,OAAO,GAAG,KAAI;AACpB,IAAM,QAAQ,GAAG,GAAE;AACnB,IAAM,SAAS,GAAG,GAAE;AACpB,IAAM,SAAS,GAAG,GAAE;AACpB,IAAM,YAAY,GAAG,GAAE;AACvB,IAAM,aAAa,GAAG;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/components/comments/Timestamp/util.ts"],"names":[],"mappings":"AAkBA,eAAO,MAAM,sBAAsB,SAAU,IAAI,WAchD,CAAA"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { MS_IN_S, S_IN_MIN, MIN_IN_HR, HR_IN_DAY, DAY_IN_MONTH, MONTH_IN_YEAR } from './types.js';
|
|
2
|
+
|
|
3
|
+
var timeUnitMsMap = {
|
|
4
|
+
m: MS_IN_S * S_IN_MIN,
|
|
5
|
+
h: MS_IN_S * S_IN_MIN * MIN_IN_HR,
|
|
6
|
+
d: MS_IN_S * S_IN_MIN * MIN_IN_HR * HR_IN_DAY,
|
|
7
|
+
mo: MS_IN_S * S_IN_MIN * MIN_IN_HR * HR_IN_DAY * DAY_IN_MONTH,
|
|
8
|
+
y: MS_IN_S * S_IN_MIN * MIN_IN_HR * HR_IN_DAY * DAY_IN_MONTH * MONTH_IN_YEAR
|
|
9
|
+
};
|
|
10
|
+
var getLargestTimeUnitText = function (time) {
|
|
11
|
+
var then = new Date(time).getTime();
|
|
12
|
+
var now = Date.now();
|
|
13
|
+
var diff = now - then;
|
|
14
|
+
var unit = null;
|
|
15
|
+
// Iterate through all time units to determine the largest one
|
|
16
|
+
Object.entries(timeUnitMsMap).forEach(function (_a) {
|
|
17
|
+
var u = _a[0], ms = _a[1];
|
|
18
|
+
if (diff >= ms) {
|
|
19
|
+
unit = u;
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
return unit ? "".concat(Math.floor(diff / timeUnitMsMap[unit])).concat(unit) : 'just now';
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export { getLargestTimeUnitText };
|
|
26
|
+
//# sourceMappingURL=util.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"util.js","sources":["../../../../src/components/comments/Timestamp/util.ts"],"sourcesContent":["import type { TimeUnit } from './types'\nimport {\n DAY_IN_MONTH,\n HR_IN_DAY,\n MIN_IN_HR,\n MONTH_IN_YEAR,\n MS_IN_S,\n S_IN_MIN\n} from './types'\n\nconst timeUnitMsMap: Record<TimeUnit, number> = {\n m: MS_IN_S * S_IN_MIN,\n h: MS_IN_S * S_IN_MIN * MIN_IN_HR,\n d: MS_IN_S * S_IN_MIN * MIN_IN_HR * HR_IN_DAY,\n mo: MS_IN_S * S_IN_MIN * MIN_IN_HR * HR_IN_DAY * DAY_IN_MONTH,\n y: MS_IN_S * S_IN_MIN * MIN_IN_HR * HR_IN_DAY * DAY_IN_MONTH * MONTH_IN_YEAR\n} as const\n\nexport const getLargestTimeUnitText = (time: Date) => {\n const then = new Date(time).getTime()\n const now = Date.now()\n const diff = now - then\n let unit: TimeUnit | null = null\n\n // Iterate through all time units to determine the largest one\n Object.entries(timeUnitMsMap).forEach(([u, ms]) => {\n if (diff >= ms) {\n unit = u as TimeUnit\n }\n })\n\n return unit ? `${Math.floor(diff / timeUnitMsMap[unit])}${unit}` : 'just now'\n}\n"],"names":[],"mappings":";;AAUA,IAAM,aAAa,GAA6B;IAC9C,CAAC,EAAE,OAAO,GAAG,QAAQ;AACrB,IAAA,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS;AACjC,IAAA,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS;IAC7C,EAAE,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,YAAY;IAC7D,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,YAAY,GAAG,aAAa;CACpE,CAAA;AAEH,IAAM,sBAAsB,GAAG,UAAC,IAAU,EAAA;IAC/C,IAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,CAAA;AACrC,IAAA,IAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAA;AACtB,IAAA,IAAM,IAAI,GAAG,GAAG,GAAG,IAAI,CAAA;IACvB,IAAI,IAAI,GAAoB,IAAI,CAAA;;IAGhC,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,UAAC,EAAO,EAAA;YAAN,CAAC,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,EAAE,GAAA,EAAA,CAAA,CAAA,CAAA,CAAA;QAC3C,IAAI,IAAI,IAAI,EAAE,EAAE;YACd,IAAI,GAAG,CAAa,CAAA;AACrB,SAAA;AACH,KAAC,CAAC,CAAA;IAEF,OAAO,IAAI,GAAG,UAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,CAAG,CAAA,MAAA,CAAA,IAAI,CAAE,GAAG,UAAU,CAAA;AAC/E;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ComponentType, SVGProps } from 'react';
|
|
1
|
+
import type { ComponentType, MouseEventHandler, SVGProps } from 'react';
|
|
2
2
|
import type { IconColors } from '../foundations/color/semantic';
|
|
3
3
|
import type { ShadowOptions } from '../foundations/shadows';
|
|
4
4
|
import { IconSize } from '../foundations/spacing';
|
|
@@ -12,6 +12,7 @@ export type IconProps = {
|
|
|
12
12
|
width?: number;
|
|
13
13
|
shadow?: ShadowOptions;
|
|
14
14
|
title?: string;
|
|
15
|
+
onClick?: MouseEventHandler<SVGSVGElement>;
|
|
15
16
|
};
|
|
16
17
|
type SVGIconProps = SVGBaseProps & IconProps;
|
|
17
18
|
export type IconComponent = ComponentType<SVGBaseProps | SVGIconProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/components/icon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/components/icon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEjD,KAAK,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA;AAE3C,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAA;CAC3C,CAAA;AAED,KAAK,YAAY,GAAG,YAAY,GAAG,SAAS,CAAA;AAE5C,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,YAAY,GAAG,YAAY,CAAC,CAAA"}
|
|
@@ -24,4 +24,12 @@ export * from './music-badge';
|
|
|
24
24
|
export { default as LoadingSpinner } from './loading-spinner/LoadingSpinner';
|
|
25
25
|
export * from './pill';
|
|
26
26
|
export * from './common/HiddenInput';
|
|
27
|
+
export * from './select';
|
|
28
|
+
export * from './comments/ArtistPick';
|
|
29
|
+
export * from './comments/CommentText';
|
|
30
|
+
export * from './comments/IconText';
|
|
31
|
+
export * from './comments/Identifier';
|
|
32
|
+
export * from './comments/SendIcon';
|
|
33
|
+
export * from './comments/Timestamp';
|
|
34
|
+
export * from './checkbox';
|
|
27
35
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kCAAkC,CAAA;AAC5E,cAAc,QAAQ,CAAA;AACtB,cAAc,sBAAsB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kCAAkC,CAAA;AAC5E,cAAc,QAAQ,CAAA;AACtB,cAAc,sBAAsB,CAAA;AACpC,cAAc,UAAU,CAAA;AACxB,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,YAAY,CAAA"}
|
|
@@ -8,10 +8,10 @@ import { IconVisibilityPublic, IconVisibilityHidden } from '../../../icons/utili
|
|
|
8
8
|
import '@emotion/react';
|
|
9
9
|
import '@emotion/css';
|
|
10
10
|
import '../../button/FollowButton/FollowButton.js';
|
|
11
|
-
import '../../button/FilterButton/FilterButton.js';
|
|
12
|
-
import '../../button/OptionsFilterButton/OptionsFilterButton.js';
|
|
13
11
|
import { IconButton } from '../../button/IconButton/IconButton.js';
|
|
14
12
|
import '../../button/UnstyledButton.js';
|
|
13
|
+
import '../../button/FilterButton/FilterButton.js';
|
|
14
|
+
import '../../button/FilterButton/FilterButtonOption.js';
|
|
15
15
|
import { TextInput } from '../TextInput/TextInput.js';
|
|
16
16
|
import '../TextInput/types.js';
|
|
17
17
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectablePill.d.ts","sourceRoot":"","sources":["../../../../src/components/input/SelectablePill/SelectablePill.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AASlD,eAAO,MAAM,cAAc,UAAW,mBAAmB,
|
|
1
|
+
{"version":3,"file":"SelectablePill.d.ts","sourceRoot":"","sources":["../../../../src/components/input/SelectablePill/SelectablePill.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AASlD,eAAO,MAAM,cAAc,UAAW,mBAAmB,qDAoIxD,CAAA"}
|
|
@@ -41,8 +41,6 @@ var SelectablePill = function (props) {
|
|
|
41
41
|
pointerEvents: 'none'
|
|
42
42
|
})), { ':hover': hoverCss, ':active': activeCss });
|
|
43
43
|
var iconCss = {
|
|
44
|
-
width: spacing.l,
|
|
45
|
-
height: spacing.l,
|
|
46
44
|
'& path': {
|
|
47
45
|
fill: 'currentColor'
|
|
48
46
|
}
|
|
@@ -51,7 +49,7 @@ var SelectablePill = function (props) {
|
|
|
51
49
|
css: rootCss,
|
|
52
50
|
className: className
|
|
53
51
|
};
|
|
54
|
-
var pillContent = (jsxs(Fragment, { children: [Icon ? jsx(Icon, { css: iconCss }) : null, 'label' in other ? (jsx(Text, __assign({ variant: size === 'oversized' ? 'heading' : 'body', tag: 'span', css: size === 'oversized' && { textTransform: 'uppercase' } }, { children: other.label }))) : null] }));
|
|
52
|
+
var pillContent = (jsxs(Fragment, { children: [size !== 'small' && Icon ? jsx(Icon, { size: 's', css: iconCss }) : null, 'label' in other ? (jsx(Text, __assign({ variant: size === 'oversized' ? 'heading' : 'body', tag: 'span', css: size === 'oversized' && { textTransform: 'uppercase' } }, { children: other.label }))) : null] }));
|
|
55
53
|
switch (type) {
|
|
56
54
|
case 'checkbox': {
|
|
57
55
|
return (jsxs("label", __assign({}, rootProps, { children: [pillContent, jsx(HiddenInput, __assign({}, other, { checked: isSelected }))] })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectablePill.js","sources":["../../../../src/components/input/SelectablePill/SelectablePill.tsx"],"sourcesContent":["import { ComponentProps } from 'react'\n\nimport { CSSObject, useTheme } from '@emotion/react'\n\nimport { HiddenInput } from 'components/common/HiddenInput'\nimport { useRadioGroup } from 'components/radio-group/useRadioGroup'\nimport { Text } from 'components/text'\n\nimport type { SelectablePillProps } from './types'\n\nconst RadioInput = (props: ComponentProps<'input'>) => {\n const { name, checked, onChange } = useRadioGroup(props)\n return (\n <HiddenInput {...props} name={name} checked={checked} onChange={onChange} />\n )\n}\n\nexport const SelectablePill = (props: SelectablePillProps) => {\n const {\n isSelected: isSelectedProp,\n size = 'small',\n _isHovered,\n icon: Icon,\n className,\n ...other\n } = props\n\n const { disabled, type } = other\n const isSelected =\n type === 'checkbox' || type === 'radio'\n ? other.checked ?? isSelectedProp\n : isSelectedProp\n\n const theme = useTheme()\n const { spacing } = theme\n\n const hoverCss: CSSObject = {\n backgroundColor: theme.color.secondary.s200,\n color: theme.color.static.white,\n border: `1px solid ${theme.color.secondary.secondary}`,\n ...(size === 'large' && {\n backgroundColor: theme.color.secondary.s100,\n border: `1px solid ${theme.color.secondary.s200}`,\n boxShadow: 'none'\n })\n }\n\n const activeCss: CSSObject = {\n backgroundColor: theme.color.secondary.s400,\n color: theme.color.static.white,\n border: `1px solid ${theme.color.secondary.s400}`,\n\n ...(size === 'large' && {\n boxShadow: 'none'\n })\n }\n\n const rootCss: CSSObject = {\n display: 'inline-flex',\n position: 'relative',\n alignItems: 'center',\n justifyContent: 'center',\n gap: theme.spacing.s,\n color: theme.color.text.default,\n backgroundColor: theme.color.background.white,\n cursor: 'pointer',\n userSelect: 'none',\n transition: 'all 0.12s ease-out',\n textWrap: 'nowrap',\n border: `1px solid ${theme.color.border.strong}`,\n borderRadius: theme.cornerRadius['2xl'],\n ...(size === 'small' && {\n height: theme.spacing.xl,\n paddingInline: theme.spacing.m\n }),\n ...(size === 'large' && {\n height: theme.spacing['2xl'],\n paddingInline: theme.spacing.l,\n boxShadow: theme.shadows.near\n }),\n ...(size === 'oversized' && {\n height: spacing.unit12,\n padding: spacing.m,\n borderWidth: 2\n }),\n ...(disabled && { opacity: 0.45 }),\n ...(_isHovered && hoverCss),\n ...(isSelected && activeCss),\n ...((disabled || _isHovered) && {\n pointerEvents: 'none'\n }),\n ':hover': hoverCss,\n ':active': activeCss\n }\n\n const iconCss = {\n
|
|
1
|
+
{"version":3,"file":"SelectablePill.js","sources":["../../../../src/components/input/SelectablePill/SelectablePill.tsx"],"sourcesContent":["import { ComponentProps } from 'react'\n\nimport { CSSObject, useTheme } from '@emotion/react'\n\nimport { HiddenInput } from 'components/common/HiddenInput'\nimport { useRadioGroup } from 'components/radio-group/useRadioGroup'\nimport { Text } from 'components/text'\n\nimport type { SelectablePillProps } from './types'\n\nconst RadioInput = (props: ComponentProps<'input'>) => {\n const { name, checked, onChange } = useRadioGroup(props)\n return (\n <HiddenInput {...props} name={name} checked={checked} onChange={onChange} />\n )\n}\n\nexport const SelectablePill = (props: SelectablePillProps) => {\n const {\n isSelected: isSelectedProp,\n size = 'small',\n _isHovered,\n icon: Icon,\n className,\n ...other\n } = props\n\n const { disabled, type } = other\n const isSelected =\n type === 'checkbox' || type === 'radio'\n ? other.checked ?? isSelectedProp\n : isSelectedProp\n\n const theme = useTheme()\n const { spacing } = theme\n\n const hoverCss: CSSObject = {\n backgroundColor: theme.color.secondary.s200,\n color: theme.color.static.white,\n border: `1px solid ${theme.color.secondary.secondary}`,\n ...(size === 'large' && {\n backgroundColor: theme.color.secondary.s100,\n border: `1px solid ${theme.color.secondary.s200}`,\n boxShadow: 'none'\n })\n }\n\n const activeCss: CSSObject = {\n backgroundColor: theme.color.secondary.s400,\n color: theme.color.static.white,\n border: `1px solid ${theme.color.secondary.s400}`,\n\n ...(size === 'large' && {\n boxShadow: 'none'\n })\n }\n\n const rootCss: CSSObject = {\n display: 'inline-flex',\n position: 'relative',\n alignItems: 'center',\n justifyContent: 'center',\n gap: theme.spacing.s,\n color: theme.color.text.default,\n backgroundColor: theme.color.background.white,\n cursor: 'pointer',\n userSelect: 'none',\n transition: 'all 0.12s ease-out',\n textWrap: 'nowrap',\n border: `1px solid ${theme.color.border.strong}`,\n borderRadius: theme.cornerRadius['2xl'],\n ...(size === 'small' && {\n height: theme.spacing.xl,\n paddingInline: theme.spacing.m\n }),\n ...(size === 'large' && {\n height: theme.spacing['2xl'],\n paddingInline: theme.spacing.l,\n boxShadow: theme.shadows.near\n }),\n ...(size === 'oversized' && {\n height: spacing.unit12,\n padding: spacing.m,\n borderWidth: 2\n }),\n ...(disabled && { opacity: 0.45 }),\n ...(_isHovered && hoverCss),\n ...(isSelected && activeCss),\n ...((disabled || _isHovered) && {\n pointerEvents: 'none'\n }),\n ':hover': hoverCss,\n ':active': activeCss\n }\n\n const iconCss = {\n '& path': {\n fill: 'currentColor'\n }\n }\n\n const rootProps = {\n css: rootCss,\n className\n }\n\n const pillContent = (\n <>\n {size !== 'small' && Icon ? <Icon size='s' css={iconCss} /> : null}\n {'label' in other ? (\n <Text\n variant={size === 'oversized' ? 'heading' : 'body'}\n tag='span'\n css={size === 'oversized' && { textTransform: 'uppercase' }}\n >\n {other.label}\n </Text>\n ) : null}\n </>\n )\n\n switch (type) {\n case 'checkbox': {\n return (\n <label {...rootProps}>\n {pillContent}\n <HiddenInput {...other} checked={isSelected} />\n </label>\n )\n }\n case 'radio': {\n return (\n <label {...rootProps}>\n {pillContent}\n <RadioInput {...other} checked={isSelected} />\n </label>\n )\n }\n case 'button':\n case 'reset':\n case 'submit':\n default: {\n return (\n <button {...rootProps} {...other}>\n {pillContent}\n </button>\n )\n }\n }\n}\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
|
@@ -8,6 +8,7 @@ export declare const TextInput: (props: Omit<Omit<import("react").DetailedHTMLPr
|
|
|
8
8
|
warning?: boolean | undefined;
|
|
9
9
|
error?: boolean | undefined;
|
|
10
10
|
hideLabel?: boolean | undefined;
|
|
11
|
+
hidePlaceholder?: boolean | undefined;
|
|
11
12
|
label: string;
|
|
12
13
|
inputRootClassName?: string | undefined;
|
|
13
14
|
helperText?: ReactNode;
|
|
@@ -20,6 +21,7 @@ export declare const TextInput: (props: Omit<Omit<import("react").DetailedHTMLPr
|
|
|
20
21
|
required?: boolean | undefined;
|
|
21
22
|
showMaxLengthThreshold?: number | undefined;
|
|
22
23
|
maxLengthWarningThreshold?: number | undefined;
|
|
24
|
+
elevateLabel?: boolean | undefined;
|
|
23
25
|
} & {
|
|
24
26
|
_incorrectError?: boolean | undefined;
|
|
25
27
|
_isHovered?: boolean | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAA;AAWpD,OAAO,EAAE,aAAa,EAAuB,MAAM,SAAS,CAAA;AAE5D;;GAEG;AACH,eAAO,MAAM,SAAS
|
|
1
|
+
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAA;AAWpD,OAAO,EAAE,aAAa,EAAuB,MAAM,SAAS,CAAA;AAE5D;;GAEG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;qJAoOrB,CAAA"}
|
|
@@ -16,7 +16,7 @@ import { TextInputSize } from './types.js';
|
|
|
16
16
|
*/
|
|
17
17
|
var TextInput = forwardRef(function (props, ref) {
|
|
18
18
|
var _a, _b;
|
|
19
|
-
var ariaLabel = props["aria-label"], required = props.required, className = props.className, inputRootClassName = props.inputRootClassName, maxLength = props.maxLength, _c = props.showMaxLengthThreshold, showMaxLengthThreshold = _c === void 0 ? 0.7 : _c, _d = props.maxLengthWarningThreshold, maxLengthWarningThreshold = _d === void 0 ? 0.9 : _d, _e = props.size, size = _e === void 0 ? TextInputSize.DEFAULT : _e, hideLabel = props.hideLabel, labelProp = props.label, value = props.value, idProp = props.id, warningProp = props.warning, error = props.error, inputClassName = props.className, disabled = props.disabled, onFocusProp = props.onFocus, onBlurProp = props.onBlur, placeholder = props.placeholder, helperText = props.helperText, startAdornmentText = props.startAdornmentText, endAdornmentText = props.endAdornmentText, StartIcon = props.startIcon, EndIcon = props.endIcon, IconProps = props.IconProps, endAdornmentProp = props.endAdornment, _incorrectError = props._incorrectError, _isHovered = props._isHovered, _isFocused = props._isFocused, _disablePointerEvents = props._disablePointerEvents, other = __rest(props, ['aria-label', "required", "className", "inputRootClassName", "maxLength", "showMaxLengthThreshold", "maxLengthWarningThreshold", "size", "hideLabel", "label", "value", "id", "warning", "error", "className", "disabled", "onFocus", "onBlur", "placeholder", "helperText", "startAdornmentText", "endAdornmentText", "startIcon", "endIcon", "IconProps", "endAdornment", "_incorrectError", "_isHovered", "_isFocused", "_disablePointerEvents"]);
|
|
19
|
+
var ariaLabel = props["aria-label"], required = props.required, className = props.className, inputRootClassName = props.inputRootClassName, maxLength = props.maxLength, _c = props.showMaxLengthThreshold, showMaxLengthThreshold = _c === void 0 ? 0.7 : _c, _d = props.maxLengthWarningThreshold, maxLengthWarningThreshold = _d === void 0 ? 0.9 : _d, _e = props.size, size = _e === void 0 ? TextInputSize.DEFAULT : _e, hideLabel = props.hideLabel, hidePlaceholder = props.hidePlaceholder, labelProp = props.label, value = props.value, idProp = props.id, warningProp = props.warning, error = props.error, inputClassName = props.className, disabled = props.disabled, onFocusProp = props.onFocus, onBlurProp = props.onBlur, placeholder = props.placeholder, helperText = props.helperText, startAdornmentText = props.startAdornmentText, endAdornmentText = props.endAdornmentText, StartIcon = props.startIcon, EndIcon = props.endIcon, IconProps = props.IconProps, endAdornmentProp = props.endAdornment, elevateLabel = props.elevateLabel, _incorrectError = props._incorrectError, _isHovered = props._isHovered, _isFocused = props._isFocused, _disablePointerEvents = props._disablePointerEvents, other = __rest(props, ['aria-label', "required", "className", "inputRootClassName", "maxLength", "showMaxLengthThreshold", "maxLengthWarningThreshold", "size", "hideLabel", "hidePlaceholder", "label", "value", "id", "warning", "error", "className", "disabled", "onFocus", "onBlur", "placeholder", "helperText", "startAdornmentText", "endAdornmentText", "startIcon", "endIcon", "IconProps", "endAdornment", "elevateLabel", "_incorrectError", "_isHovered", "_isFocused", "_disablePointerEvents"]);
|
|
20
20
|
var endAdornment;
|
|
21
21
|
if (EndIcon != null) {
|
|
22
22
|
endAdornment = jsx(EndIcon, __assign({ size: 'm', color: 'subdued' }, IconProps));
|
|
@@ -41,10 +41,14 @@ var TextInput = forwardRef(function (props, ref) {
|
|
|
41
41
|
// Hide the label when requested or when the size is set to small
|
|
42
42
|
var shouldShowLabel = !hideLabel && size !== TextInputSize.SMALL;
|
|
43
43
|
var labelText = required ? "".concat(labelProp, " *") : labelProp;
|
|
44
|
-
var placeholderText = required && hideLabel
|
|
44
|
+
var placeholderText = required && hideLabel
|
|
45
|
+
? "".concat(placeholder, " *")
|
|
46
|
+
: size === TextInputSize.SMALL
|
|
47
|
+
? labelText
|
|
48
|
+
: placeholder;
|
|
45
49
|
var helperTextSize = size === TextInputSize.SMALL ? 'xs' : 's';
|
|
46
50
|
// Whenever a label isn't visible the placeholder should be visible in it's place (if provided)
|
|
47
|
-
var shouldShowPlaceholder = isFocused || !shouldShowLabel;
|
|
51
|
+
var shouldShowPlaceholder = (isFocused || !shouldShowLabel) && !hidePlaceholder;
|
|
48
52
|
var shouldShowAdornments = isFocused || hasValue || !shouldShowLabel;
|
|
49
53
|
// Show the maxlength text whenever we hit a certain threshold (default 70%) + the input is focused
|
|
50
54
|
var shouldShowMaxLengthText = isFocused &&
|
|
@@ -79,8 +83,8 @@ var TextInput = forwardRef(function (props, ref) {
|
|
|
79
83
|
_b[styles.disabled] = disabled,
|
|
80
84
|
_b[styles.focused] = isFocused,
|
|
81
85
|
_b);
|
|
82
|
-
var
|
|
83
|
-
var isLabelElevated = hasValue || isFocused;
|
|
86
|
+
var inputElement = (jsxs(Flex, __assign({ alignItems: 'center', justifyContent: 'space-between' }, { children: [startAdornmentText && shouldShowAdornments ? (jsx(Text, __assign({ variant: 'label', size: 'l', color: 'subdued' }, { children: startAdornmentText }))) : null, jsx("input", __assign({ onFocus: handleFocus, onBlur: handleBlur, ref: ref, className: cn(styles.input, inputClassName, inputElStyle), value: value, maxLength: maxLength, disabled: disabled, placeholder: shouldShowPlaceholder ? placeholderText : undefined, "aria-label": (ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : shouldShowLabel) ? labelText : undefined, "aria-required": required, id: id, autoComplete: 'off' }, other)), endAdornmentText && shouldShowAdornments ? (jsx(Text, __assign({ variant: 'label', size: 'l', color: 'subdued' }, { children: endAdornmentText }))) : null] })));
|
|
87
|
+
var isLabelElevated = hasValue || isFocused || elevateLabel;
|
|
84
88
|
return (jsxs(Flex, __assign({ className: cn(styles.root, className), direction: 'column', gap: 'xs', alignItems: 'flex-start', w: '100%' }, { children: [jsxs("label", __assign({ htmlFor: id, className: cn(styles.contentContainer, inputRootClassName, inputRootStyle) }, { children: [StartIcon ? (jsx(StartIcon, __assign({ size: size === TextInputSize.SMALL ? 's' : 'm', color: 'subdued' }, IconProps))) : null, jsxs(Flex, __assign({ direction: 'column', gap: 'xs', justifyContent: 'center', w: '100%' }, { children: [shouldShowLabel ? (jsxs(Flex, __assign({ className: styles.labelRow, direction: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 's' }, { children: [jsx(Text, __assign({ variant: 'body', tag: 'span', size: isLabelElevated ? 's' : 'l', color: 'subdued', css: function (theme) { return ({
|
|
85
89
|
whiteSpace: 'nowrap',
|
|
86
90
|
overflow: 'hidden',
|
|
@@ -90,7 +94,7 @@ var TextInput = forwardRef(function (props, ref) {
|
|
|
90
94
|
transform: isLabelElevated
|
|
91
95
|
? 'translate(0, 0)'
|
|
92
96
|
: 'translate(0px, 13px)'
|
|
93
|
-
}); } }, { children: labelText })), shouldShowMaxLengthText ? (jsxs(Text, __assign({ variant: 'body', size: 'xs', tag: 'span', color: maxLengthTextColor }, { children: [characterCount, "/", maxLength] }))) : null] }))) : null,
|
|
97
|
+
}); } }, { children: labelText })), shouldShowMaxLengthText ? (jsxs(Text, __assign({ variant: 'body', size: 'xs', tag: 'span', color: maxLengthTextColor }, { children: [characterCount, "/", maxLength] }))) : null] }))) : null, inputElement] })), endAdornment] })), helperText ? (jsx(Text, __assign({ variant: 'body', size: helperTextSize, color: error ? 'danger' : _incorrectError ? 'warning' : 'default' }, { children: helperText }))) : null] })));
|
|
94
98
|
});
|
|
95
99
|
|
|
96
100
|
export { TextInput };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput.js","sources":["../../../../src/components/input/TextInput/TextInput.tsx"],"sourcesContent":["import { ReactNode, forwardRef, useId } from 'react'\n\nimport cn from 'classnames'\n\nimport { Text, TextSize } from 'components/text'\nimport type { TextColors } from 'foundations/color/semantic'\n\nimport { Flex } from '../../layout'\nimport { useFocusState } from '../useFocusState'\n\nimport styles from './TextInput.module.css'\nimport { TextInputSize, type TextInputProps } from './types'\n\n/**\n * An input is a field where users can enter and edit text and enables the user to provide input in the form of plain text.\n */\nexport const TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n (props, ref) => {\n const {\n 'aria-label': ariaLabel,\n required,\n className,\n inputRootClassName,\n maxLength,\n showMaxLengthThreshold = 0.7,\n maxLengthWarningThreshold = 0.9,\n size = TextInputSize.DEFAULT,\n hideLabel,\n label: labelProp,\n value,\n id: idProp,\n warning: warningProp,\n error,\n className: inputClassName,\n disabled,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n placeholder,\n helperText,\n startAdornmentText,\n endAdornmentText,\n startIcon: StartIcon,\n endIcon: EndIcon,\n IconProps,\n endAdornment: endAdornmentProp,\n _incorrectError,\n _isHovered,\n _isFocused,\n _disablePointerEvents,\n ...other\n } = props\n\n let endAdornment: null | ReactNode\n if (EndIcon != null) {\n endAdornment = <EndIcon size='m' color='subdued' {...IconProps} />\n } else if (endAdornmentProp != null) {\n endAdornment = endAdornmentProp\n } else {\n endAdornment = null\n }\n\n /**\n * Since Firefox doesn't support the :has() pseudo selector,\n * manually track the focused state and use classes for focus, required, and disabled\n */\n const [isFocusedState, handleFocus, handleBlur] = useFocusState(\n onFocusProp,\n onBlurProp\n )\n\n const isFocused = _isFocused ?? isFocusedState\n\n // For focus behavior and accessiblity, <label> needs to have a htmlFor={} provided to an id matching the input\n const backupId = useId()\n const id = idProp ?? backupId\n\n const characterCount = value !== undefined ? `${value}`.length : 0\n const hasValue = characterCount > 0\n\n // Hide the label when requested or when the size is set to small\n const shouldShowLabel = !hideLabel && size !== TextInputSize.SMALL\n const labelText = required ? `${labelProp} *` : labelProp\n const placeholderText =\n required && hideLabel ? `${placeholder} *` : placeholder\n const helperTextSize: TextSize = size === TextInputSize.SMALL ? 'xs' : 's'\n\n // Whenever a label isn't visible the placeholder should be visible in it's place (if provided)\n const shouldShowPlaceholder = isFocused || !shouldShowLabel\n const shouldShowAdornments = isFocused || hasValue || !shouldShowLabel\n // Show the maxlength text whenever we hit a certain threshold (default 70%) + the input is focused\n const shouldShowMaxLengthText =\n isFocused &&\n maxLength &&\n characterCount >= showMaxLengthThreshold * maxLength\n // Turn the maxlength text to the warning color whenever we hit a certain threshold (default 90%)\n let maxLengthTextColor: TextColors = 'default'\n if (maxLength && characterCount > maxLength) {\n maxLengthTextColor = 'danger'\n } else if (\n maxLength &&\n characterCount >= maxLengthWarningThreshold * maxLength\n ) {\n maxLengthTextColor = 'warning'\n }\n\n // Styles for the root of the input\n const inputRootStyle = {\n [styles.default]: size === TextInputSize.DEFAULT,\n [styles.small]: size === TextInputSize.SMALL,\n [styles.warning]: warningProp,\n [styles.error]: error,\n [styles.focused]: isFocused || _isFocused,\n [styles.disabled]: disabled,\n [styles.required]: required,\n [styles.hover]: _isHovered,\n [styles.incorrectError]: _incorrectError,\n [styles.disablePointerEvents]: _disablePointerEvents\n }\n\n // Styles for the input element itself\n const inputElStyle = {\n [styles.default]: size === TextInputSize.DEFAULT,\n [styles.small]: size === TextInputSize.SMALL,\n [styles.disabled]: disabled,\n [styles.focused]: isFocused\n }\n\n const inputRender = (\n <Flex alignItems='center' justifyContent='space-between'>\n {startAdornmentText && shouldShowAdornments ? (\n <Text variant='label' size='l' color='subdued'>\n {startAdornmentText}\n </Text>\n ) : null}\n <input\n onFocus={handleFocus}\n onBlur={handleBlur}\n ref={ref}\n className={cn(styles.input, inputClassName, inputElStyle)}\n value={value}\n maxLength={maxLength}\n disabled={disabled}\n placeholder={shouldShowPlaceholder ? placeholderText : undefined}\n aria-label={ariaLabel ?? shouldShowLabel ? labelText : undefined}\n aria-required={required}\n id={id}\n {...other}\n />\n {endAdornmentText && shouldShowAdornments ? (\n <Text variant='label' size='l' color='subdued'>\n {endAdornmentText}\n </Text>\n ) : null}\n </Flex>\n )\n\n const isLabelElevated = hasValue || isFocused\n\n return (\n <Flex\n className={cn(styles.root, className)}\n direction='column'\n gap='xs'\n alignItems='flex-start'\n w='100%'\n >\n <label\n htmlFor={id}\n className={cn(\n styles.contentContainer,\n inputRootClassName,\n inputRootStyle\n )}\n >\n {StartIcon ? (\n <StartIcon\n size={size === TextInputSize.SMALL ? 's' : 'm'}\n color='subdued'\n {...IconProps}\n />\n ) : null}\n <Flex direction='column' gap='xs' justifyContent='center' w='100%'>\n {shouldShowLabel ? (\n <Flex\n className={styles.labelRow}\n direction='row'\n alignItems='center'\n justifyContent='space-between'\n gap='s'\n >\n <Text\n variant='body'\n tag='span'\n size={isLabelElevated ? 's' : 'l'}\n color='subdued'\n css={(theme) => ({\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n zIndex: 2,\n transition: `all ${theme.motion.expressive}`,\n transform: isLabelElevated\n ? 'translate(0, 0)'\n : 'translate(0px, 13px)'\n })}\n >\n {labelText}\n </Text>\n {shouldShowMaxLengthText ? (\n <Text\n variant='body'\n size='xs'\n tag='span'\n color={maxLengthTextColor}\n >\n {characterCount}/{maxLength}\n </Text>\n ) : null}\n </Flex>\n ) : null}\n {inputRender}\n </Flex>\n {endAdornment}\n </label>\n {helperText ? (\n <Text\n variant='body'\n size={helperTextSize}\n color={error ? 'danger' : _incorrectError ? 'warning' : 'default'}\n >\n {helperText}\n </Text>\n ) : null}\n </Flex>\n )\n }\n)\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TextInput.js","sources":["../../../../src/components/input/TextInput/TextInput.tsx"],"sourcesContent":["import { ReactNode, forwardRef, useId } from 'react'\n\nimport cn from 'classnames'\n\nimport { Text, TextSize } from 'components/text'\nimport type { TextColors } from 'foundations/color/semantic'\n\nimport { Flex } from '../../layout'\nimport { useFocusState } from '../useFocusState'\n\nimport styles from './TextInput.module.css'\nimport { TextInputSize, type TextInputProps } from './types'\n\n/**\n * An input is a field where users can enter and edit text and enables the user to provide input in the form of plain text.\n */\nexport const TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n (props, ref) => {\n const {\n 'aria-label': ariaLabel,\n required,\n className,\n inputRootClassName,\n maxLength,\n showMaxLengthThreshold = 0.7,\n maxLengthWarningThreshold = 0.9,\n size = TextInputSize.DEFAULT,\n hideLabel,\n hidePlaceholder,\n label: labelProp,\n value,\n id: idProp,\n warning: warningProp,\n error,\n className: inputClassName,\n disabled,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n placeholder,\n helperText,\n startAdornmentText,\n endAdornmentText,\n startIcon: StartIcon,\n endIcon: EndIcon,\n IconProps,\n endAdornment: endAdornmentProp,\n elevateLabel,\n _incorrectError,\n _isHovered,\n _isFocused,\n _disablePointerEvents,\n ...other\n } = props\n\n let endAdornment: null | ReactNode\n if (EndIcon != null) {\n endAdornment = <EndIcon size='m' color='subdued' {...IconProps} />\n } else if (endAdornmentProp != null) {\n endAdornment = endAdornmentProp\n } else {\n endAdornment = null\n }\n\n /**\n * Since Firefox doesn't support the :has() pseudo selector,\n * manually track the focused state and use classes for focus, required, and disabled\n */\n const [isFocusedState, handleFocus, handleBlur] = useFocusState(\n onFocusProp,\n onBlurProp\n )\n\n const isFocused = _isFocused ?? isFocusedState\n\n // For focus behavior and accessiblity, <label> needs to have a htmlFor={} provided to an id matching the input\n const backupId = useId()\n const id = idProp ?? backupId\n\n const characterCount = value !== undefined ? `${value}`.length : 0\n const hasValue = characterCount > 0\n\n // Hide the label when requested or when the size is set to small\n const shouldShowLabel = !hideLabel && size !== TextInputSize.SMALL\n const labelText = required ? `${labelProp} *` : labelProp\n const placeholderText =\n required && hideLabel\n ? `${placeholder} *`\n : size === TextInputSize.SMALL\n ? labelText\n : placeholder\n const helperTextSize: TextSize = size === TextInputSize.SMALL ? 'xs' : 's'\n\n // Whenever a label isn't visible the placeholder should be visible in it's place (if provided)\n const shouldShowPlaceholder =\n (isFocused || !shouldShowLabel) && !hidePlaceholder\n const shouldShowAdornments = isFocused || hasValue || !shouldShowLabel\n // Show the maxlength text whenever we hit a certain threshold (default 70%) + the input is focused\n const shouldShowMaxLengthText =\n isFocused &&\n maxLength &&\n characterCount >= showMaxLengthThreshold * maxLength\n // Turn the maxlength text to the warning color whenever we hit a certain threshold (default 90%)\n let maxLengthTextColor: TextColors = 'default'\n if (maxLength && characterCount > maxLength) {\n maxLengthTextColor = 'danger'\n } else if (\n maxLength &&\n characterCount >= maxLengthWarningThreshold * maxLength\n ) {\n maxLengthTextColor = 'warning'\n }\n\n // Styles for the root of the input\n const inputRootStyle = {\n [styles.default]: size === TextInputSize.DEFAULT,\n [styles.small]: size === TextInputSize.SMALL,\n [styles.warning]: warningProp,\n [styles.error]: error,\n [styles.focused]: isFocused || _isFocused,\n [styles.disabled]: disabled,\n [styles.required]: required,\n [styles.hover]: _isHovered,\n [styles.incorrectError]: _incorrectError,\n [styles.disablePointerEvents]: _disablePointerEvents\n }\n\n // Styles for the input element itself\n const inputElStyle = {\n [styles.default]: size === TextInputSize.DEFAULT,\n [styles.small]: size === TextInputSize.SMALL,\n [styles.disabled]: disabled,\n [styles.focused]: isFocused\n }\n\n const inputElement = (\n <Flex alignItems='center' justifyContent='space-between'>\n {startAdornmentText && shouldShowAdornments ? (\n <Text variant='label' size='l' color='subdued'>\n {startAdornmentText}\n </Text>\n ) : null}\n <input\n onFocus={handleFocus}\n onBlur={handleBlur}\n ref={ref}\n className={cn(styles.input, inputClassName, inputElStyle)}\n value={value}\n maxLength={maxLength}\n disabled={disabled}\n placeholder={shouldShowPlaceholder ? placeholderText : undefined}\n aria-label={ariaLabel ?? shouldShowLabel ? labelText : undefined}\n aria-required={required}\n id={id}\n autoComplete='off'\n {...other}\n />\n {endAdornmentText && shouldShowAdornments ? (\n <Text variant='label' size='l' color='subdued'>\n {endAdornmentText}\n </Text>\n ) : null}\n </Flex>\n )\n\n const isLabelElevated = hasValue || isFocused || elevateLabel\n\n return (\n <Flex\n className={cn(styles.root, className)}\n direction='column'\n gap='xs'\n alignItems='flex-start'\n w='100%'\n >\n <label\n htmlFor={id}\n className={cn(\n styles.contentContainer,\n inputRootClassName,\n inputRootStyle\n )}\n >\n {StartIcon ? (\n <StartIcon\n size={size === TextInputSize.SMALL ? 's' : 'm'}\n color='subdued'\n {...IconProps}\n />\n ) : null}\n <Flex direction='column' gap='xs' justifyContent='center' w='100%'>\n {shouldShowLabel ? (\n <Flex\n className={styles.labelRow}\n direction='row'\n alignItems='center'\n justifyContent='space-between'\n gap='s'\n >\n <Text\n variant='body'\n tag='span'\n size={isLabelElevated ? 's' : 'l'}\n color='subdued'\n css={(theme) => ({\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n zIndex: 2,\n transition: `all ${theme.motion.expressive}`,\n transform: isLabelElevated\n ? 'translate(0, 0)'\n : 'translate(0px, 13px)'\n })}\n >\n {labelText}\n </Text>\n {shouldShowMaxLengthText ? (\n <Text\n variant='body'\n size='xs'\n tag='span'\n color={maxLengthTextColor}\n >\n {characterCount}/{maxLength}\n </Text>\n ) : null}\n </Flex>\n ) : null}\n {inputElement}\n </Flex>\n {endAdornment}\n </label>\n {helperText ? (\n <Text\n variant='body'\n size={helperTextSize}\n color={error ? 'danger' : _incorrectError ? 'warning' : 'default'}\n >\n {helperText}\n </Text>\n ) : null}\n </Flex>\n )\n }\n)\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -46,9 +46,12 @@ export type TextInputProps = Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'r
|
|
|
46
46
|
error?: boolean;
|
|
47
47
|
/**
|
|
48
48
|
* Hides the label. If the label is hidden the placeholder will show by default instead.
|
|
49
|
-
* @default false
|
|
50
49
|
*/
|
|
51
50
|
hideLabel?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* When `true` hides the placeholder. Used in `Select`.
|
|
53
|
+
*/
|
|
54
|
+
hidePlaceholder?: boolean;
|
|
52
55
|
/**
|
|
53
56
|
* Label Text. Required due to accessibility. If hideLabel is true, the label is set via aria-label
|
|
54
57
|
*/
|
|
@@ -100,6 +103,10 @@ export type TextInputProps = Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'r
|
|
|
100
103
|
* @default 0.9
|
|
101
104
|
*/
|
|
102
105
|
maxLengthWarningThreshold?: number;
|
|
106
|
+
/**
|
|
107
|
+
* When `true` elevate the label. Useful for adding custom values. Reference `Select` component
|
|
108
|
+
*/
|
|
109
|
+
elevateLabel?: boolean;
|
|
103
110
|
} & InternalProps;
|
|
104
111
|
export {};
|
|
105
112
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/input/TextInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEhE,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAE1D,oBAAY,aAAa;IACvB,KAAK,UAAU;IACf,OAAO,YAAY;CACpB;AAED,KAAK,aAAa,GAAG;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,wBAAwB,CAAC,OAAO,CAAC,EAEjC,MAAM,GAAG,UAAU,CACpB,GAAG;IACF;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/input/TextInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEhE,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAE1D,oBAAY,aAAa;IACvB,KAAK,UAAU;IACf,OAAO,YAAY;CACpB;AAED,KAAK,aAAa,GAAG;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,wBAAwB,CAAC,OAAO,CAAC,EAEjC,MAAM,GAAG,UAAU,CACpB,GAAG;IACF;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAA;IAC9B;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B;;;OAGG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAA;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,GAAG,aAAa,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../../../src/components/input/TextInput/types.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport type { IconComponent, IconProps } from '../../icon'\n\nexport enum TextInputSize {\n SMALL = 'small',\n DEFAULT = 'default'\n}\n\ntype InternalProps = {\n /**\n * @ignore\n * This prop is for internal use only.\n * Toggles the incorrect error state for the storybook docs\n */\n _incorrectError?: boolean\n /**\n * @ignore\n * This prop is for internal use only.\n * Toggles the hover state for the storybook docs\n */\n _isHovered?: boolean\n /**\n * @ignore\n * This prop is for internal use only.\n * Toggles the focus state for the storybook docs\n */\n _isFocused?: boolean\n /**\n * @ignore\n * This prop is for internal use only.\n * Disabled pointer events for storybook docs\n */\n _disablePointerEvents?: boolean\n}\n\nexport type TextInputProps = Omit<\n ComponentPropsWithoutRef<'input'>,\n // Omitting required purely for storybook docs\n 'size' | 'required'\n> & {\n /**\n * Input sizes. NOTE: small inputs will not show the label\n * @default default\n */\n size?: TextInputSize\n /**\n * Toggles warning state (turns border warning color). NOTE: this is not used any where at the moment\n */\n warning?: boolean\n /**\n * Toggles error state\n */\n error?: boolean\n /**\n * Hides the label. If the label is hidden the placeholder will show by default instead.\n *
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../../src/components/input/TextInput/types.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport type { IconComponent, IconProps } from '../../icon'\n\nexport enum TextInputSize {\n SMALL = 'small',\n DEFAULT = 'default'\n}\n\ntype InternalProps = {\n /**\n * @ignore\n * This prop is for internal use only.\n * Toggles the incorrect error state for the storybook docs\n */\n _incorrectError?: boolean\n /**\n * @ignore\n * This prop is for internal use only.\n * Toggles the hover state for the storybook docs\n */\n _isHovered?: boolean\n /**\n * @ignore\n * This prop is for internal use only.\n * Toggles the focus state for the storybook docs\n */\n _isFocused?: boolean\n /**\n * @ignore\n * This prop is for internal use only.\n * Disabled pointer events for storybook docs\n */\n _disablePointerEvents?: boolean\n}\n\nexport type TextInputProps = Omit<\n ComponentPropsWithoutRef<'input'>,\n // Omitting required purely for storybook docs\n 'size' | 'required'\n> & {\n /**\n * Input sizes. NOTE: small inputs will not show the label\n * @default default\n */\n size?: TextInputSize\n /**\n * Toggles warning state (turns border warning color). NOTE: this is not used any where at the moment\n */\n warning?: boolean\n /**\n * Toggles error state\n */\n error?: boolean\n /**\n * Hides the label. If the label is hidden the placeholder will show by default instead.\n */\n hideLabel?: boolean\n /**\n * When `true` hides the placeholder. Used in `Select`.\n */\n hidePlaceholder?: boolean\n /**\n * Label Text. Required due to accessibility. If hideLabel is true, the label is set via aria-label\n */\n label: string\n /**\n * ClassName on the div wrapping the whole input container (doesn't include assistive text)\n */\n inputRootClassName?: string\n /**\n * Helper text (or JSX) that shows up below the input\n */\n helperText?: string | ReactNode\n /**\n * Floating text on the lefthand side of the input.\n */\n startAdornmentText?: string\n /**\n * Floating text on the righthand side of the input\n */\n endAdornmentText?: string\n /**\n * Floating icon on the lefthand side of the input. Note: will float to the left of the label & content\n */\n startIcon?: IconComponent\n /**\n * Floating icon on the righthand side of the input\n */\n endIcon?: IconComponent\n /**\n * Override props to supply the start or end Icon\n */\n IconProps?: Partial<IconProps>\n /**\n * @hidden\n * Floating component on the righthand side of the input. Meant for internal use only.\n */\n endAdornment?: ReactNode\n /**\n * Required or not. Will add an * to the label if required\n */\n required?: boolean\n /**\n * 0-1 number representating a percentage threshold to show the max character text. Default is 0.7 (70%)\n * @default 0.7\n */\n showMaxLengthThreshold?: number\n /**\n * 0-1 number representating a percentage threshold to turn the character limit text orange. Default is 0.9 (90%)\n * @default 0.9\n */\n maxLengthWarningThreshold?: number\n /**\n * When `true` elevate the label. Useful for adding custom values. Reference `Select` component\n */\n elevateLabel?: boolean\n} & InternalProps\n"],"names":[],"mappings":"IAIY,cAGX;AAHD,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf,IAAA,aAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACrB,CAAC,EAHW,aAAa,KAAb,aAAa,GAGxB,EAAA,CAAA,CAAA;;;;"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { ReactNode, Ref } from 'react';
|
|
2
|
+
import { CSSObject } from '@emotion/react';
|
|
3
|
+
import { FlexProps } from "../layout/Flex";
|
|
4
|
+
import { PaperProps } from "../layout/Paper";
|
|
5
|
+
import { PopupProps } from "../popup/types";
|
|
6
|
+
import { WithCSS } from "../../foundations";
|
|
7
|
+
export type MenuProps = Omit<PopupProps, 'children'> & {
|
|
8
|
+
children: ReactNode;
|
|
9
|
+
PaperProps?: WithCSS<Partial<PaperProps>>;
|
|
10
|
+
};
|
|
11
|
+
export type MenuContentProps = {
|
|
12
|
+
children: ReactNode;
|
|
13
|
+
maxHeight?: CSSObject['maxHeight'];
|
|
14
|
+
width?: CSSObject['width'];
|
|
15
|
+
MenuListProps?: WithCSS<Partial<FlexProps>>;
|
|
16
|
+
scrollRef: Ref<HTMLDivElement>;
|
|
17
|
+
'aria-label'?: string;
|
|
18
|
+
'aria-activedescendent'?: string;
|
|
19
|
+
};
|
|
20
|
+
export declare const Menu: (props: MenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
21
|
+
export declare const MenuContent: (props: MenuContentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
22
|
+
//# sourceMappingURL=Menu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/internal/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,OAAO,EAAQ,SAAS,EAAE,uBAA8B;AACxD,OAAO,EAAS,UAAU,EAAE,wBAA+B;AAE3D,OAAO,EAAE,UAAU,EAAE,uBAA8B;AACnD,OAAO,EAAE,OAAO,EAAE,0BAAmB;AAIrC,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG;IACrD,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAA;CAC1C,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAA;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAA;IAC3C,SAAS,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uBAAuB,CAAC,EAAE,MAAM,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,IAAI,UAAW,SAAS,qDAUpC,CAAA;AAED,eAAO,MAAM,WAAW,UAAW,gBAAgB,qDA4BlD,CAAA"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { __rest, __assign } from '../../_virtual/_tslib.js';
|
|
2
|
+
import { jsx } from '@emotion/react/jsx-runtime';
|
|
3
|
+
import { Flex } from '../layout/Flex/Flex.js';
|
|
4
|
+
import { Paper } from '../layout/Paper/Paper.js';
|
|
5
|
+
import { Popup } from '../popup/Popup.js';
|
|
6
|
+
|
|
7
|
+
var Menu = function (props) {
|
|
8
|
+
var children = props.children, PaperProps = props.PaperProps, other = __rest(props, ["children", "PaperProps"]);
|
|
9
|
+
return (jsx(Popup, __assign({}, other, { children: jsx(Paper, __assign({ mt: 's', border: 'strong', shadow: 'far' }, PaperProps, { children: children })) })));
|
|
10
|
+
};
|
|
11
|
+
var MenuContent = function (props) {
|
|
12
|
+
var children = props.children, maxHeight = props.maxHeight, width = props.width, MenuListProps = props.MenuListProps, scrollRef = props.scrollRef, ariaLabel = props["aria-label"], ariaActiveDescendant = props["aria-activedescendent"];
|
|
13
|
+
return (jsx(Flex, __assign({ direction: 'column', p: 's', gap: 's', alignItems: 'flex-start', role: 'listbox', css: { maxHeight: maxHeight, width: width, overflowY: 'auto' }, ref: scrollRef, onClick: function (e) { return e.stopPropagation(); }, "aria-label": ariaLabel, "aria-activedescendant": ariaActiveDescendant }, MenuListProps, { children: children })));
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
export { Menu, MenuContent };
|
|
17
|
+
//# sourceMappingURL=Menu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Menu.js","sources":["../../../src/components/internal/Menu.tsx"],"sourcesContent":["import { ReactNode, Ref } from 'react'\n\nimport { CSSObject } from '@emotion/react'\n\nimport { Flex, FlexProps } from 'components/layout/Flex'\nimport { Paper, PaperProps } from 'components/layout/Paper'\nimport { Popup } from 'components/popup/Popup'\nimport { PopupProps } from 'components/popup/types'\nimport { WithCSS } from 'foundations'\n\n// TODO menu label\n\nexport type MenuProps = Omit<PopupProps, 'children'> & {\n children: ReactNode\n PaperProps?: WithCSS<Partial<PaperProps>>\n}\n\nexport type MenuContentProps = {\n children: ReactNode\n maxHeight?: CSSObject['maxHeight']\n width?: CSSObject['width']\n MenuListProps?: WithCSS<Partial<FlexProps>>\n scrollRef: Ref<HTMLDivElement>\n 'aria-label'?: string\n 'aria-activedescendent'?: string\n}\n\nexport const Menu = (props: MenuProps) => {\n const { children, PaperProps, ...other } = props\n\n return (\n <Popup {...other}>\n <Paper mt='s' border='strong' shadow='far' {...PaperProps}>\n {children}\n </Paper>\n </Popup>\n )\n}\n\nexport const MenuContent = (props: MenuContentProps) => {\n const {\n children,\n maxHeight,\n width,\n MenuListProps,\n scrollRef,\n 'aria-label': ariaLabel,\n 'aria-activedescendent': ariaActiveDescendant\n } = props\n\n return (\n <Flex\n direction='column'\n p='s'\n gap='s'\n alignItems='flex-start'\n role='listbox'\n css={{ maxHeight, width, overflowY: 'auto' }}\n ref={scrollRef}\n onClick={(e) => e.stopPropagation()}\n aria-label={ariaLabel}\n aria-activedescendant={ariaActiveDescendant}\n {...MenuListProps}\n >\n {children}\n </Flex>\n )\n}\n"],"names":["_jsx"],"mappings":";;;;;;AA2BO,IAAM,IAAI,GAAG,UAAC,KAAgB,EAAA;AAC3B,IAAA,IAAA,QAAQ,GAA2B,KAAK,CAAhC,QAAA,EAAE,UAAU,GAAe,KAAK,CAApB,UAAA,EAAK,KAAK,GAAK,MAAA,CAAA,KAAK,EAA1C,CAAA,UAAA,EAAA,YAAA,CAAkC,CAAF,CAAU;IAEhD,QACEA,GAAC,CAAA,KAAK,EAAK,QAAA,CAAA,EAAA,EAAA,KAAK,EACd,EAAA,QAAA,EAAAA,GAAA,CAAC,KAAK,EAAA,QAAA,CAAA,EAAC,EAAE,EAAC,GAAG,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,KAAK,EAAA,EAAK,UAAU,EAAA,EAAA,QAAA,EACtD,QAAQ,EAAA,CAAA,CACH,EACF,CAAA,CAAA,EACT;AACH,EAAC;AAEM,IAAM,WAAW,GAAG,UAAC,KAAuB,EAAA;AAE/C,IAAA,IAAA,QAAQ,GAON,KAAK,CAAA,QAPC,EACR,SAAS,GAMP,KAAK,CAAA,SANE,EACT,KAAK,GAKH,KAAK,CAAA,KALF,EACL,aAAa,GAIX,KAAK,CAAA,aAJM,EACb,SAAS,GAGP,KAAK,UAHE,EACK,SAAS,GAErB,KAAK,cAFgB,EACE,oBAAoB,GAC3C,KAAK,yBADsC,CACtC;AAET,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,QAAA,CAAA,EACH,SAAS,EAAC,QAAQ,EAClB,CAAC,EAAC,GAAG,EACL,GAAG,EAAC,GAAG,EACP,UAAU,EAAC,YAAY,EACvB,IAAI,EAAC,SAAS,EACd,GAAG,EAAE,EAAE,SAAS,EAAA,SAAA,EAAE,KAAK,EAAA,KAAA,EAAE,SAAS,EAAE,MAAM,EAAE,EAC5C,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,eAAe,EAAE,CAAA,EAAA,EAAA,YAAA,EACvB,SAAS,EAAA,uBAAA,EACE,oBAAoB,EAAA,EACvC,aAAa,EAAA,EAAA,QAAA,EAEhB,QAAQ,EAAA,CAAA,CACJ,EACR;AACH;;;;"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ButtonProps } from "..";
|
|
3
|
+
import { IconComponent } from "../icon";
|
|
4
|
+
export type MenuItemProps<Value extends string> = Omit<ButtonProps, 'variant' | 'onChange'> & {
|
|
5
|
+
variant?: 'option' | 'button';
|
|
6
|
+
label?: string;
|
|
7
|
+
icon?: IconComponent;
|
|
8
|
+
leadingElement?: JSX.Element;
|
|
9
|
+
helperText?: string;
|
|
10
|
+
isActive?: boolean;
|
|
11
|
+
} & ({
|
|
12
|
+
variant: 'option';
|
|
13
|
+
onChange: (option: Value) => void;
|
|
14
|
+
value: Value;
|
|
15
|
+
} | {
|
|
16
|
+
variant: 'button';
|
|
17
|
+
});
|
|
18
|
+
export declare const MenuItem: <Value extends string>(props: MenuItemProps<Value> & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
|
|
19
|
+
//# sourceMappingURL=MenuItem.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/internal/MenuItem.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,WAAkB;AAExC,OAAO,EAAE,aAAa,EAAE,gBAAuB;AAI/C,MAAM,MAAM,aAAa,CAAC,KAAK,SAAS,MAAM,IAAI,IAAI,CACpD,WAAW,EACX,SAAS,GAAG,UAAU,CACvB,GAAG;IACF,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,CACE;IACE,OAAO,EAAE,QAAQ,CAAA;IACjB,QAAQ,EAAE,CAAC,MAAM,EAAE,KAAK,KAAK,IAAI,CAAA;IACjC,KAAK,EAAE,KAAK,CAAA;CACb,GACD;IAAE,OAAO,EAAE,QAAQ,CAAA;CAAE,CACxB,CAAA;AAEH,eAAO,MAAM,QAAQ,yMAkGnB,CAAA"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { __rest, __assign } from '../../_virtual/_tslib.js';
|
|
2
|
+
import { jsxs, jsx } from '@emotion/react/jsx-runtime';
|
|
3
|
+
import { forwardRef, useCallback } from 'react';
|
|
4
|
+
import { BaseButton } from '../button/BaseButton/BaseButton.js';
|
|
5
|
+
import { Text } from '../text/Text.js';
|
|
6
|
+
import '../../foundations/color/semantic.js';
|
|
7
|
+
import '../../foundations/color/color.js';
|
|
8
|
+
import { useTheme } from '@emotion/react';
|
|
9
|
+
import '../../foundations/theme/theme.js';
|
|
10
|
+
|
|
11
|
+
var MenuItem = forwardRef(function (props, ref) {
|
|
12
|
+
var label = props.label, isActive = props.isActive, onClick = props.onClick, icon = props.icon, leadingElement = props.leadingElement, variant = props.variant, helperText = props.helperText, other = __rest(props, ["label", "isActive", "onClick", "icon", "leadingElement", "variant", "helperText"]);
|
|
13
|
+
var _a = useTheme(), color = _a.color, cornerRadius = _a.cornerRadius, spacing = _a.spacing, typography = _a.typography;
|
|
14
|
+
// Popup Styles
|
|
15
|
+
var optionIconCss = {
|
|
16
|
+
width: spacing.unit4,
|
|
17
|
+
height: spacing.unit4
|
|
18
|
+
};
|
|
19
|
+
var activeOptionCss = {
|
|
20
|
+
transform: 'none',
|
|
21
|
+
backgroundColor: color.secondary.s300,
|
|
22
|
+
color: color.static.white
|
|
23
|
+
};
|
|
24
|
+
var optionCss = {
|
|
25
|
+
height: variant === 'option' ? 36 : 40,
|
|
26
|
+
background: 'transparent',
|
|
27
|
+
border: 'none',
|
|
28
|
+
color: color.text.default,
|
|
29
|
+
fontWeight: typography.weight.medium,
|
|
30
|
+
gap: spacing.s,
|
|
31
|
+
paddingLeft: spacing.m,
|
|
32
|
+
paddingRight: spacing.m,
|
|
33
|
+
paddingTop: spacing.s,
|
|
34
|
+
paddingBottom: spacing.s,
|
|
35
|
+
width: '100%',
|
|
36
|
+
borderRadius: cornerRadius.s,
|
|
37
|
+
justifyContent: 'flex-start',
|
|
38
|
+
'&:hover': activeOptionCss,
|
|
39
|
+
'&:active': {
|
|
40
|
+
transform: 'none'
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
var handleClick = useCallback(function (e) {
|
|
44
|
+
e.stopPropagation();
|
|
45
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
46
|
+
if (variant === 'option') {
|
|
47
|
+
props.onChange(props.value);
|
|
48
|
+
}
|
|
49
|
+
}, [onClick, props, variant]);
|
|
50
|
+
return (jsxs(BaseButton, __assign({ ref: ref, iconLeft: icon, styles: {
|
|
51
|
+
button: __assign(__assign({}, optionCss), (isActive ? activeOptionCss : {})),
|
|
52
|
+
icon: optionIconCss
|
|
53
|
+
}, onClick: handleClick, role: variant === 'option' ? 'option' : undefined }, other, { onChange: undefined }, { children: [leadingElement !== null && leadingElement !== void 0 ? leadingElement : null, jsx(Text, __assign({ variant: 'body', size: variant === 'option' ? 'l' : 'm', strength: variant === 'button' ? 'strong' : 'default' }, { children: variant === 'option' ? label !== null && label !== void 0 ? label : props.value : label })), helperText ? (jsx(Text, __assign({ variant: 'body', size: variant === 'option' ? 'l' : 'm', strength: variant === 'button' ? 'strong' : 'default', color: isActive ? 'staticWhite' : 'subdued' }, { children: helperText }))) : null] })));
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
export { MenuItem };
|
|
57
|
+
//# sourceMappingURL=MenuItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MenuItem.js","sources":["../../../src/components/internal/MenuItem.tsx"],"sourcesContent":["import { forwardRef, MouseEventHandler, Ref, useCallback } from 'react'\n\nimport { CSSObject } from '@emotion/react'\n\nimport { ButtonProps } from 'components'\nimport { BaseButton } from 'components/button/BaseButton/BaseButton'\nimport { IconComponent } from 'components/icon'\nimport { Text } from 'components/text/Text'\nimport { useTheme } from 'foundations'\n\nexport type MenuItemProps<Value extends string> = Omit<\n ButtonProps,\n 'variant' | 'onChange'\n> & {\n variant?: 'option' | 'button'\n label?: string\n icon?: IconComponent\n leadingElement?: JSX.Element\n helperText?: string\n isActive?: boolean\n} & (\n | {\n variant: 'option'\n onChange: (option: Value) => void\n value: Value\n }\n | { variant: 'button' }\n )\n\nexport const MenuItem = forwardRef(function <Value extends string>(\n props: MenuItemProps<Value>,\n ref: Ref<HTMLButtonElement>\n) {\n const {\n label,\n isActive,\n onClick,\n icon,\n leadingElement,\n variant,\n helperText,\n ...other\n } = props\n\n const { color, cornerRadius, spacing, typography } = useTheme()\n\n // Popup Styles\n const optionIconCss: CSSObject = {\n width: spacing.unit4,\n height: spacing.unit4\n }\n\n const activeOptionCss: CSSObject = {\n transform: 'none',\n backgroundColor: color.secondary.s300,\n color: color.static.white\n }\n\n const optionCss: CSSObject = {\n height: variant === 'option' ? 36 : 40,\n background: 'transparent',\n border: 'none',\n color: color.text.default,\n fontWeight: typography.weight.medium,\n gap: spacing.s,\n paddingLeft: spacing.m,\n paddingRight: spacing.m,\n paddingTop: spacing.s,\n paddingBottom: spacing.s,\n width: '100%',\n borderRadius: cornerRadius.s,\n justifyContent: 'flex-start',\n\n '&:hover': activeOptionCss,\n '&:active': {\n transform: 'none'\n }\n }\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n (e) => {\n e.stopPropagation()\n onClick?.(e)\n\n if (variant === 'option') {\n props.onChange(props.value)\n }\n },\n [onClick, props, variant]\n )\n\n return (\n <BaseButton\n ref={ref}\n iconLeft={icon}\n styles={{\n button: {\n ...optionCss,\n ...(isActive ? activeOptionCss : {})\n },\n icon: optionIconCss\n }}\n onClick={handleClick}\n role={variant === 'option' ? 'option' : undefined}\n {...other}\n onChange={undefined}\n >\n {leadingElement ?? null}\n <Text\n variant='body'\n size={variant === 'option' ? 'l' : 'm'}\n strength={variant === 'button' ? 'strong' : 'default'}\n >\n {variant === 'option' ? label ?? props.value : label}\n </Text>\n {helperText ? (\n <Text\n variant='body'\n size={variant === 'option' ? 'l' : 'm'}\n strength={variant === 'button' ? 'strong' : 'default'}\n color={isActive ? 'staticWhite' : 'subdued'}\n >\n {helperText}\n </Text>\n ) : null}\n </BaseButton>\n )\n})\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|