@laerdal/life-react-components 1.9.9-dev.6.full → 1.10.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.
Files changed (169) hide show
  1. package/dist/Accordion/AccordionItem.cjs +4 -3
  2. package/dist/Accordion/AccordionItem.cjs.map +1 -1
  3. package/dist/Accordion/AccordionItem.d.ts +0 -1
  4. package/dist/Accordion/AccordionItem.js +4 -3
  5. package/dist/Accordion/AccordionItem.js.map +1 -1
  6. package/dist/Accordion/AccordionMenu.cjs +5 -5
  7. package/dist/Accordion/AccordionMenu.cjs.map +1 -1
  8. package/dist/Accordion/AccordionMenu.d.ts +1 -2
  9. package/dist/Accordion/AccordionMenu.js +5 -5
  10. package/dist/Accordion/AccordionMenu.js.map +1 -1
  11. package/dist/Accordion/ContentAccordion.cjs +14 -11
  12. package/dist/Accordion/ContentAccordion.cjs.map +1 -1
  13. package/dist/Accordion/ContentAccordion.d.ts +1 -1
  14. package/dist/Accordion/ContentAccordion.js +14 -11
  15. package/dist/Accordion/ContentAccordion.js.map +1 -1
  16. package/dist/Accordion/styles.cjs +2 -4
  17. package/dist/Accordion/styles.cjs.map +1 -1
  18. package/dist/Accordion/styles.d.ts +0 -1
  19. package/dist/Accordion/styles.js +2 -4
  20. package/dist/Accordion/styles.js.map +1 -1
  21. package/dist/Button/Button.cjs +10 -18
  22. package/dist/Button/Button.cjs.map +1 -1
  23. package/dist/Button/Button.js +10 -18
  24. package/dist/Button/Button.js.map +1 -1
  25. package/dist/Card/VerticalCard/Card.cjs +2 -2
  26. package/dist/Card/VerticalCard/Card.cjs.map +1 -1
  27. package/dist/Card/VerticalCard/Card.js +2 -2
  28. package/dist/Card/VerticalCard/Card.js.map +1 -1
  29. package/dist/Chips/ActionChip.cjs +24 -23
  30. package/dist/Chips/ActionChip.cjs.map +1 -1
  31. package/dist/Chips/ActionChip.js +24 -25
  32. package/dist/Chips/ActionChip.js.map +1 -1
  33. package/dist/Chips/ChipTypes.d.ts +3 -3
  34. package/dist/Chips/ChoiceChips.cjs +6 -2
  35. package/dist/Chips/ChoiceChips.cjs.map +1 -1
  36. package/dist/Chips/ChoiceChips.js +5 -2
  37. package/dist/Chips/ChoiceChips.js.map +1 -1
  38. package/dist/Chips/FilterChip.cjs +24 -23
  39. package/dist/Chips/FilterChip.cjs.map +1 -1
  40. package/dist/Chips/FilterChip.js +24 -25
  41. package/dist/Chips/FilterChip.js.map +1 -1
  42. package/dist/Chips/InputChip.cjs +42 -40
  43. package/dist/Chips/InputChip.cjs.map +1 -1
  44. package/dist/Chips/InputChip.js +41 -41
  45. package/dist/Chips/InputChip.js.map +1 -1
  46. package/dist/Dropdown/CommonStyling.cjs +1 -1
  47. package/dist/Dropdown/CommonStyling.cjs.map +1 -1
  48. package/dist/Dropdown/CommonStyling.js +1 -1
  49. package/dist/Dropdown/CommonStyling.js.map +1 -1
  50. package/dist/Dropdown/index.cjs +4 -4
  51. package/dist/Dropdown/index.cjs.map +1 -1
  52. package/dist/Dropdown/index.d.ts +4 -5
  53. package/dist/Dropdown/index.js +4 -5
  54. package/dist/Dropdown/index.js.map +1 -1
  55. package/dist/GlobalNavigationBar/desktop/MainMenu.cjs +1 -1
  56. package/dist/GlobalNavigationBar/desktop/MainMenu.cjs.map +1 -1
  57. package/dist/GlobalNavigationBar/desktop/MainMenu.js +1 -1
  58. package/dist/GlobalNavigationBar/desktop/MainMenu.js.map +1 -1
  59. package/dist/GlobalNavigationBar/desktop/UserMenu.cjs +2 -2
  60. package/dist/GlobalNavigationBar/desktop/UserMenu.cjs.map +1 -1
  61. package/dist/GlobalNavigationBar/desktop/UserMenu.js +2 -2
  62. package/dist/GlobalNavigationBar/desktop/UserMenu.js.map +1 -1
  63. package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs +1 -1
  64. package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs.map +1 -1
  65. package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js +1 -1
  66. package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js.map +1 -1
  67. package/dist/InputFields/SearchBar.cjs +78 -7
  68. package/dist/InputFields/SearchBar.cjs.map +1 -1
  69. package/dist/InputFields/SearchBar.d.ts +9 -0
  70. package/dist/InputFields/SearchBar.js +75 -7
  71. package/dist/InputFields/SearchBar.js.map +1 -1
  72. package/dist/InputFields/components/SearchBarInput.cjs +6 -3
  73. package/dist/InputFields/components/SearchBarInput.cjs.map +1 -1
  74. package/dist/InputFields/components/SearchBarInput.d.ts +1 -0
  75. package/dist/InputFields/components/SearchBarInput.js +6 -3
  76. package/dist/InputFields/components/SearchBarInput.js.map +1 -1
  77. package/dist/InputFields/styling.cjs +1 -1
  78. package/dist/InputFields/styling.cjs.map +1 -1
  79. package/dist/InputFields/styling.js +1 -1
  80. package/dist/InputFields/styling.js.map +1 -1
  81. package/dist/MenuItem/MenuItem.cjs +3 -5
  82. package/dist/MenuItem/MenuItem.cjs.map +1 -1
  83. package/dist/MenuItem/MenuItem.js +3 -5
  84. package/dist/MenuItem/MenuItem.js.map +1 -1
  85. package/dist/Modals/ModalContainer.cjs.map +1 -1
  86. package/dist/Modals/ModalContainer.js.map +1 -1
  87. package/dist/Popover/Popover.cjs +13 -24
  88. package/dist/Popover/Popover.cjs.map +1 -1
  89. package/dist/Popover/Popover.js +13 -23
  90. package/dist/Popover/Popover.js.map +1 -1
  91. package/dist/SideMenu/SideMenu.cjs +49 -0
  92. package/dist/SideMenu/SideMenu.cjs.map +1 -0
  93. package/dist/SideMenu/SideMenu.d.ts +4 -0
  94. package/dist/SideMenu/SideMenu.js +31 -0
  95. package/dist/SideMenu/SideMenu.js.map +1 -0
  96. package/dist/SideMenu/SideMenuBody.cjs +64 -0
  97. package/dist/SideMenu/SideMenuBody.cjs.map +1 -0
  98. package/dist/SideMenu/SideMenuBody.d.ts +2 -0
  99. package/dist/SideMenu/SideMenuBody.js +43 -0
  100. package/dist/SideMenu/SideMenuBody.js.map +1 -0
  101. package/dist/SideMenu/SideMenuFooter.cjs +74 -0
  102. package/dist/SideMenu/SideMenuFooter.cjs.map +1 -0
  103. package/dist/SideMenu/SideMenuFooter.d.ts +2 -0
  104. package/dist/SideMenu/SideMenuFooter.js +51 -0
  105. package/dist/SideMenu/SideMenuFooter.js.map +1 -0
  106. package/dist/SideMenu/SideMenuHeader.cjs +68 -0
  107. package/dist/SideMenu/SideMenuHeader.cjs.map +1 -0
  108. package/dist/SideMenu/SideMenuHeader.d.ts +2 -0
  109. package/dist/SideMenu/SideMenuHeader.js +48 -0
  110. package/dist/SideMenu/SideMenuHeader.js.map +1 -0
  111. package/dist/SideMenu/index.cjs +33 -0
  112. package/dist/SideMenu/index.cjs.map +1 -0
  113. package/dist/SideMenu/index.d.ts +2 -0
  114. package/dist/SideMenu/index.js +3 -0
  115. package/dist/SideMenu/index.js.map +1 -0
  116. package/dist/SideMenu/types.cjs +6 -0
  117. package/dist/SideMenu/types.cjs.map +1 -0
  118. package/dist/SideMenu/types.d.ts +27 -0
  119. package/dist/SideMenu/types.js +2 -0
  120. package/dist/SideMenu/types.js.map +1 -0
  121. package/dist/Switcher/MobileSwitcherMenu.cjs +1 -1
  122. package/dist/Switcher/MobileSwitcherMenu.cjs.map +1 -1
  123. package/dist/Switcher/MobileSwitcherMenu.js +1 -1
  124. package/dist/Switcher/MobileSwitcherMenu.js.map +1 -1
  125. package/dist/Switcher/SwitcherMenuItem.cjs +16 -16
  126. package/dist/Switcher/SwitcherMenuItem.cjs.map +1 -1
  127. package/dist/Switcher/SwitcherMenuItem.d.ts +9 -2
  128. package/dist/Switcher/SwitcherMenuItem.js +16 -10
  129. package/dist/Switcher/SwitcherMenuItem.js.map +1 -1
  130. package/dist/Table/Table.cjs +3 -3
  131. package/dist/Table/Table.cjs.map +1 -1
  132. package/dist/Table/Table.js +3 -3
  133. package/dist/Table/Table.js.map +1 -1
  134. package/dist/Table/TableBody.cjs +4 -2
  135. package/dist/Table/TableBody.cjs.map +1 -1
  136. package/dist/Table/TableBody.js +5 -3
  137. package/dist/Table/TableBody.js.map +1 -1
  138. package/dist/Table/TableFooter.cjs +5 -3
  139. package/dist/Table/TableFooter.cjs.map +1 -1
  140. package/dist/Table/TableFooter.js +5 -3
  141. package/dist/Table/TableFooter.js.map +1 -1
  142. package/dist/Table/TableStyles.cjs +17 -13
  143. package/dist/Table/TableStyles.cjs.map +1 -1
  144. package/dist/Table/TableStyles.d.ts +1 -0
  145. package/dist/Table/TableStyles.js +13 -12
  146. package/dist/Table/TableStyles.js.map +1 -1
  147. package/dist/Table/TableTypes.d.ts +4 -0
  148. package/dist/Tabs/HorizontalTabs.cjs +3 -1
  149. package/dist/Tabs/HorizontalTabs.cjs.map +1 -1
  150. package/dist/Tabs/HorizontalTabs.js +3 -1
  151. package/dist/Tabs/HorizontalTabs.js.map +1 -1
  152. package/dist/Tabs/__tests__/Tablist.tests.d.ts +2 -0
  153. package/dist/Tooltips/TooltipTypes.cjs.map +1 -1
  154. package/dist/Tooltips/TooltipTypes.d.ts +1 -1
  155. package/dist/Tooltips/TooltipTypes.js.map +1 -1
  156. package/dist/Tooltips/TooltipWrapper.cjs +19 -4
  157. package/dist/Tooltips/TooltipWrapper.cjs.map +1 -1
  158. package/dist/Tooltips/TooltipWrapper.d.ts +1 -1
  159. package/dist/Tooltips/TooltipWrapper.js +16 -4
  160. package/dist/Tooltips/TooltipWrapper.js.map +1 -1
  161. package/dist/index.cjs +14 -0
  162. package/dist/index.cjs.map +1 -1
  163. package/dist/index.d.ts +1 -0
  164. package/dist/index.js +1 -0
  165. package/dist/index.js.map +1 -1
  166. package/dist/types.cjs.map +1 -1
  167. package/dist/types.d.ts +0 -8
  168. package/dist/types.js.map +1 -1
  169. package/package.json +5 -1
@@ -19,7 +19,7 @@ import { BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWi
19
19
  import { jsx as _jsx } from "react/jsx-runtime";
20
20
  import { jsxs as _jsxs } from "react/jsx-runtime";
21
21
  export var CardTopLevelContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n\n border-radius: 8px;\n\n background-clip: padding-box;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n .elevated & {\n box-shadow: ", ";\n }\n\n .outline & {\n border: 1px solid ", ";\n }\n"])), COLORS.white, BOXSHADOWS.BOXSHADOW_L1, COLORS.neutral_200);
22
- export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: max-content;\n width: max-content;\n\n &.interactive:focus {\n ", "\n }\n\n &.interactive:not(.disabled) {\n cursor: pointer;\n\n &.outline:not(.action-within) {\n ", " {\n &:hover {\n background-color: ", ";\n }\n\n &:active, &.active-state {\n background-color: ", ";\n }\n }\n }\n\n &.elevated:not(.action-within) {\n ", " {\n &:hover {\n box-shadow: ", ";\n }\n\n &:active, &.active-state {\n box-shadow: ", ";\n }\n }\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n }\n"])), focusStyles, CardTopLevelContainer, COLORS.primary_20, COLORS.primary_100, CardTopLevelContainer, BOXSHADOWS.BOXSHADOW_L3, BOXSHADOWS.BOXSHADOW_L2);
22
+ export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: max-content;\n width: max-content;\n\n &.interactive:focus {\n ", "\n }\n\n &.interactive:not(.disabled) {\n cursor: pointer;\n\n &.outline:not(.action-within) {\n ", " {\n &:hover {\n background-color: ", ";\n }\n\n &:active, &.active-state {\n background-color: ", ";\n }\n }\n }\n\n &.elevated:not(.action-within) {\n ", " {\n &:hover {\n box-shadow: ", ";\n }\n\n &:active, &.active-state {\n box-shadow: ", ";\n }\n }\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n ", "{\n border: 1px solid ", ";\n }\n }\n"])), focusStyles, CardTopLevelContainer, COLORS.primary_20, COLORS.primary_100, CardTopLevelContainer, BOXSHADOWS.BOXSHADOW_L3, BOXSHADOWS.BOXSHADOW_L2, CardTopLevelContainer, COLORS.neutral_100);
23
23
 
24
24
  var Card = function Card(_ref) {
25
25
  var onCardClicked = _ref.onCardClicked,
@@ -28,7 +28,7 @@ var Card = function Card(_ref) {
28
28
  bottomSectionProps = _ref.bottomSectionProps,
29
29
  disabled = _ref.disabled,
30
30
  _ref$variant = _ref.variant,
31
- variant = _ref$variant === void 0 ? 'outline' : _ref$variant;
31
+ variant = _ref$variant === void 0 ? 'elevated' : _ref$variant;
32
32
 
33
33
  var _React$useState = React.useState([]),
34
34
  _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Card/VerticalCard/Card.tsx"],"names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","CardTopLevelContainer","div","white","BOXSHADOW_L1","neutral_200","Wrapper","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","a","key","e","instance"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n background-color: ${COLORS.white};\n\n border-radius: 8px;\n\n background-clip: padding-box;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n .elevated & {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n }\n\n .outline & {\n border: 1px solid ${COLORS.neutral_200};\n }\n`;\n\n\nexport const Wrapper = styled.div`\n height: max-content;\n width: max-content;\n\n &.interactive:focus {\n ${focusStyles}\n }\n\n &.interactive:not(.disabled) {\n cursor: pointer;\n\n &.outline:not(.action-within) {\n ${CardTopLevelContainer} {\n &:hover {\n background-color: ${COLORS.primary_20};\n }\n\n &:active, &.active-state {\n background-color: ${COLORS.primary_100};\n }\n }\n }\n\n &.elevated:not(.action-within) {\n ${CardTopLevelContainer} {\n &:hover {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n }\n\n &:active, &.active-state {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n }\n }\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n }\n`;\n\n\nexport interface CardProps {\n onCardClicked?: () => {};\n disabled?: boolean;\n topSectionProps?: CardTopSectionProps;\n middleSectionProps?: CardMiddleSectionProps;\n bottomSectionProps?: CardBottomSectionProps;\n variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n onCardClicked,\n topSectionProps,\n middleSectionProps,\n bottomSectionProps,\n disabled,\n variant = 'outline'\n }: CardProps) => {\n\n\n const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n const checkBoxRef = React.useRef<HTMLDivElement>(null);\n const containerRef = React.useRef<HTMLDivElement>(null);\n\n useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant}`;\n\n return (\n\n <Wrapper ref={containerRef}\n className={cls}\n tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n onClick={e => !disabled && onCardClicked && onCardClicked()}\n data-testid={'card-wrapper'}>\n <CardTopLevelContainer>\n {\n topSectionProps &&\n <CardTopSection ref={checkBoxRef}\n {...topSectionProps} disabled={disabled}/>\n }\n {\n middleSectionProps &&\n <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n }\n {\n bottomSectionProps &&\n <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n {...bottomSectionProps} disabled={disabled}/>\n }\n </CardTopLevelContainer>\n </Wrapper>\n\n );\n};\n\nexport default Card;\n"],"file":"Card.js"}
1
+ {"version":3,"sources":["../../../src/Card/VerticalCard/Card.tsx"],"names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","CardTopLevelContainer","div","white","BOXSHADOW_L1","neutral_200","Wrapper","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","a","key","e","instance"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n background-color: ${COLORS.white};\n\n border-radius: 8px;\n\n background-clip: padding-box;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n .elevated & {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n }\n\n .outline & {\n border: 1px solid ${COLORS.neutral_200};\n }\n`;\n\n\nexport const Wrapper = styled.div`\n height: max-content;\n width: max-content;\n\n &.interactive:focus {\n ${focusStyles}\n }\n\n &.interactive:not(.disabled) {\n cursor: pointer;\n\n &.outline:not(.action-within) {\n ${CardTopLevelContainer} {\n &:hover {\n background-color: ${COLORS.primary_20};\n }\n\n &:active, &.active-state {\n background-color: ${COLORS.primary_100};\n }\n }\n }\n\n &.elevated:not(.action-within) {\n ${CardTopLevelContainer} {\n &:hover {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n }\n\n &:active, &.active-state {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n }\n }\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n ${CardTopLevelContainer}{\n border: 1px solid ${COLORS.neutral_100};\n }\n }\n`;\n\n\nexport interface CardProps {\n onCardClicked?: () => {};\n disabled?: boolean;\n topSectionProps?: CardTopSectionProps;\n middleSectionProps?: CardMiddleSectionProps;\n bottomSectionProps?: CardBottomSectionProps;\n variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n onCardClicked,\n topSectionProps,\n middleSectionProps,\n bottomSectionProps,\n disabled,\n variant = 'elevated'\n }: CardProps) => {\n\n\n const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n const checkBoxRef = React.useRef<HTMLDivElement>(null);\n const containerRef = React.useRef<HTMLDivElement>(null);\n\n useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant}`;\n\n return (\n\n <Wrapper ref={containerRef}\n className={cls}\n tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n onClick={e => !disabled && onCardClicked && onCardClicked()}\n data-testid={'card-wrapper'}>\n <CardTopLevelContainer>\n {\n topSectionProps &&\n <CardTopSection ref={checkBoxRef}\n {...topSectionProps} disabled={disabled}/>\n }\n {\n middleSectionProps &&\n <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n }\n {\n bottomSectionProps &&\n <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n {...bottomSectionProps} disabled={disabled}/>\n }\n </CardTopLevelContainer>\n </Wrapper>\n\n );\n};\n\nexport default Card;\n"],"file":"Card.js"}
@@ -11,6 +11,8 @@ var React = _interopRequireWildcard(require("react"));
11
11
 
12
12
  var _index = require("../icons/index");
13
13
 
14
+ var _types = require("../types");
15
+
14
16
  var _ChipStyles = require("./ChipStyles");
15
17
 
16
18
  var _common = require("../common");
@@ -35,35 +37,34 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
35
37
  var ActionChip = function ActionChip(_ref) {
36
38
  var icon = _ref.icon,
37
39
  text = _ref.text,
38
- size = _ref.size,
40
+ _ref$size = _ref.size,
41
+ size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
39
42
  disabled = _ref.disabled,
40
43
  _onClick = _ref.onClick;
41
44
 
42
45
  /**
43
46
  * Return Action Chip component.
44
47
  */
45
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
46
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, {
47
- className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " outline ").concat(!!_onClick ? 'interactive' : ''),
48
- onClick: function onClick() {
49
- return !disabled && _onClick && _onClick();
50
- },
51
- onMouseDown: _common.defaultOnMouseDownHandler,
52
- onKeyDown: function onKeyDown(e) {
53
- return e.key === 'Enter' && !disabled && _onClick && _onClick();
54
- },
55
- tabIndex: disabled || !!_onClick ? -1 : 0,
56
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContentContainer, {
57
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChipStyles.ChipContent, {
58
- children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
59
- className: 'chip-icon icon-left',
60
- children: _index.SystemIcons[icon]({
61
- className: 'icon'
62
- })
63
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
64
- children: text
65
- })]
66
- })
48
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, {
49
+ className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " outline ").concat(!!_onClick ? 'interactive' : ''),
50
+ onClick: function onClick() {
51
+ return !disabled && _onClick && _onClick();
52
+ },
53
+ onMouseDown: _common.defaultOnMouseDownHandler,
54
+ onKeyDown: function onKeyDown(e) {
55
+ return (e.key === 'Enter' || e.key === ' ') && !disabled && _onClick && _onClick();
56
+ },
57
+ tabIndex: disabled || !_onClick ? -1 : 0,
58
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContentContainer, {
59
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChipStyles.ChipContent, {
60
+ children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
61
+ className: 'chip-icon icon-left',
62
+ children: _index.SystemIcons[icon]({
63
+ className: 'icon'
64
+ })
65
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
66
+ children: text
67
+ })]
67
68
  })
68
69
  })
69
70
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Chips/ActionChip.tsx"],"names":["ActionChip","icon","text","size","disabled","onClick","defaultOnMouseDownHandler","e","key","icons","className"],"mappings":";;;;;;;;;AAGA;;AAKA;;AAKA;;AAMA;;;;;;;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AASA,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,IAKqB,QALrBA,IAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,MAHrBC,IAGqB,QAHrBA,IAGqB;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAEnF;AACF;AACA;AACE,sBACE;AAAA,2BACE,qBAAC,yBAAD;AAAe,MAAA,SAAS,YAAKF,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgB,EAArC,sBAAmD,CAAC,CAACC,QAAF,GAAY,aAAZ,GAA4B,EAA/E,CAAxB;AACe,MAAA,OAAO,EAAE;AAAA,eAAM,CAACD,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,OADxB;AAEe,MAAA,WAAW,EAAEC,iCAF5B;AAGe,MAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,eAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACJ,QAAtB,IAAkCC,QAAlC,IAA6CA,QAAO,EAAxD;AAAA,OAH3B;AAIe,MAAA,QAAQ,EAAED,QAAQ,IAAI,CAAC,CAACC,QAAd,GAAwB,CAAC,CAAzB,GAA6B,CAJtD;AAAA,6BAKE,qBAAC,gCAAD;AAAA,+BACE,sBAAC,uBAAD;AAAA,qBAEIJ,IAAI,iBACJ;AAAK,YAAA,SAAS,EAAE,qBAAhB;AAAA,sBACGQ,mBAAMR,IAAN,EAAY;AAACS,cAAAA,SAAS,EAAE;AAAZ,aAAZ;AADH,YAHJ,eAOE;AAAA,sBACGR;AADH,YAPF;AAAA;AADF;AALF;AADF,IADF;AAuBD,CAlCD;;eAoCeF,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n icon,\n text,\n size,\n disabled,\n onClick\n }: ActionChipProps) => {\n\n /**\n * Return Action Chip component.\n */\n return (\n <>\n <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''}`}\n onClick={() => !disabled && onClick && onClick()}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyDown={e => e.key === 'Enter' && !disabled && onClick && onClick()}\n tabIndex={disabled || !!onClick ? -1 : 0}>\n <ChipContentContainer>\n <ChipContent>\n {\n icon &&\n <div className={'chip-icon icon-left'}>\n {icons[icon]({className: 'icon'})}\n </div>\n }\n <div>\n {text}\n </div>\n </ChipContent>\n </ChipContentContainer>\n </ChipContainer>\n </>\n );\n};\n\nexport default ActionChip;\n"],"file":"ActionChip.cjs"}
1
+ {"version":3,"sources":["../../src/Chips/ActionChip.tsx"],"names":["ActionChip","icon","text","size","Size","Medium","disabled","onClick","defaultOnMouseDownHandler","e","key","icons","className"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AAIA;;AAMA;;;;;;;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AASA,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,IAKqB,QALrBA,IAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,uBAHrBC,IAGqB;AAAA,MAHrBA,IAGqB,0BAHdC,YAAKC,MAGS;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAEnF;AACF;AACA;AACE,sBACE,qBAAC,yBAAD;AAAe,IAAA,SAAS,YAAKJ,IAAL,cAAaG,QAAQ,GAAG,UAAH,GAAgB,EAArC,sBAAmD,CAAC,CAACC,QAAF,GAAY,aAAZ,GAA4B,EAA/E,CAAxB;AACe,IAAA,OAAO,EAAE;AAAA,aAAM,CAACD,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,KADxB;AAEe,IAAA,WAAW,EAAEC,iCAF5B;AAGe,IAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,aAAI,CAACA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAhC,KAAwC,CAACJ,QAAzC,IAAqDC,QAArD,IAAgEA,QAAO,EAA3E;AAAA,KAH3B;AAIe,IAAA,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAb,GAAuB,CAAC,CAAxB,GAA4B,CAJrD;AAAA,2BAKE,qBAAC,gCAAD;AAAA,6BACE,sBAAC,uBAAD;AAAA,mBAEIN,IAAI,iBACJ;AAAK,UAAA,SAAS,EAAE,qBAAhB;AAAA,oBACGU,mBAAMV,IAAN,EAAY;AAACW,YAAAA,SAAS,EAAE;AAAZ,WAAZ;AADH,UAHJ,eAOE;AAAA,oBACGV;AADH,UAPF;AAAA;AADF;AALF,IADF;AAqBD,CAhCD;;eAkCeF,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n icon,\n text,\n size = Size.Medium,\n disabled,\n onClick\n }: ActionChipProps) => {\n\n /**\n * Return Action Chip component.\n */\n return (\n <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''}`}\n onClick={() => !disabled && onClick && onClick()}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n tabIndex={disabled || !onClick ? -1 : 0}>\n <ChipContentContainer>\n <ChipContent>\n {\n icon &&\n <div className={'chip-icon icon-left'}>\n {icons[icon]({className: 'icon'})}\n </div>\n }\n <div>\n {text}\n </div>\n </ChipContent>\n </ChipContentContainer>\n </ChipContainer>\n );\n};\n\nexport default ActionChip;\n"],"file":"ActionChip.cjs"}
@@ -7,10 +7,11 @@ import * as React from 'react';
7
7
  */
8
8
 
9
9
  import { SystemIcons as icons } from '../icons/index';
10
-
10
+ import { Size } from '../types';
11
11
  /**
12
12
  * Import custom styles.
13
13
  */
14
+
14
15
  import { ChipContainer, ChipContent, ChipContentContainer } from './ChipStyles';
15
16
  /**
16
17
  * Import custom types.
@@ -19,40 +20,38 @@ import { ChipContainer, ChipContent, ChipContentContainer } from './ChipStyles';
19
20
  import { defaultOnMouseDownHandler } from '../common';
20
21
  import { jsx as _jsx } from "react/jsx-runtime";
21
22
  import { jsxs as _jsxs } from "react/jsx-runtime";
22
- import { Fragment as _Fragment } from "react/jsx-runtime";
23
23
 
24
24
  var ActionChip = function ActionChip(_ref) {
25
25
  var icon = _ref.icon,
26
26
  text = _ref.text,
27
- size = _ref.size,
27
+ _ref$size = _ref.size,
28
+ size = _ref$size === void 0 ? Size.Medium : _ref$size,
28
29
  disabled = _ref.disabled,
29
30
  _onClick = _ref.onClick;
30
31
 
31
32
  /**
32
33
  * Return Action Chip component.
33
34
  */
34
- return /*#__PURE__*/_jsx(_Fragment, {
35
- children: /*#__PURE__*/_jsx(ChipContainer, {
36
- className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " outline ").concat(!!_onClick ? 'interactive' : ''),
37
- onClick: function onClick() {
38
- return !disabled && _onClick && _onClick();
39
- },
40
- onMouseDown: defaultOnMouseDownHandler,
41
- onKeyDown: function onKeyDown(e) {
42
- return e.key === 'Enter' && !disabled && _onClick && _onClick();
43
- },
44
- tabIndex: disabled || !!_onClick ? -1 : 0,
45
- children: /*#__PURE__*/_jsx(ChipContentContainer, {
46
- children: /*#__PURE__*/_jsxs(ChipContent, {
47
- children: [icon && /*#__PURE__*/_jsx("div", {
48
- className: 'chip-icon icon-left',
49
- children: icons[icon]({
50
- className: 'icon'
51
- })
52
- }), /*#__PURE__*/_jsx("div", {
53
- children: text
54
- })]
55
- })
35
+ return /*#__PURE__*/_jsx(ChipContainer, {
36
+ className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " outline ").concat(!!_onClick ? 'interactive' : ''),
37
+ onClick: function onClick() {
38
+ return !disabled && _onClick && _onClick();
39
+ },
40
+ onMouseDown: defaultOnMouseDownHandler,
41
+ onKeyDown: function onKeyDown(e) {
42
+ return (e.key === 'Enter' || e.key === ' ') && !disabled && _onClick && _onClick();
43
+ },
44
+ tabIndex: disabled || !_onClick ? -1 : 0,
45
+ children: /*#__PURE__*/_jsx(ChipContentContainer, {
46
+ children: /*#__PURE__*/_jsxs(ChipContent, {
47
+ children: [icon && /*#__PURE__*/_jsx("div", {
48
+ className: 'chip-icon icon-left',
49
+ children: icons[icon]({
50
+ className: 'icon'
51
+ })
52
+ }), /*#__PURE__*/_jsx("div", {
53
+ children: text
54
+ })]
56
55
  })
57
56
  })
58
57
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Chips/ActionChip.tsx"],"names":["React","SystemIcons","icons","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","ActionChip","icon","text","size","disabled","onClick","e","key","className"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,WAAW,IAAIC,KAAvB,QAAmC,gBAAnC;;AAEA;AACA;AACA;AACA,SAAQC,aAAR,EAAuBC,WAAvB,EAAoCC,oBAApC,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;;;;;AAEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,IAKqB,QALrBA,IAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,MAHrBC,IAGqB,QAHrBA,IAGqB;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAEnF;AACF;AACA;AACE,sBACE;AAAA,2BACE,KAAC,aAAD;AAAe,MAAA,SAAS,YAAKF,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgB,EAArC,sBAAmD,CAAC,CAACC,QAAF,GAAY,aAAZ,GAA4B,EAA/E,CAAxB;AACe,MAAA,OAAO,EAAE;AAAA,eAAM,CAACD,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,OADxB;AAEe,MAAA,WAAW,EAAEN,yBAF5B;AAGe,MAAA,SAAS,EAAE,mBAAAO,CAAC;AAAA,eAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACH,QAAtB,IAAkCC,QAAlC,IAA6CA,QAAO,EAAxD;AAAA,OAH3B;AAIe,MAAA,QAAQ,EAAED,QAAQ,IAAI,CAAC,CAACC,QAAd,GAAwB,CAAC,CAAzB,GAA6B,CAJtD;AAAA,6BAKE,KAAC,oBAAD;AAAA,+BACE,MAAC,WAAD;AAAA,qBAEIJ,IAAI,iBACJ;AAAK,YAAA,SAAS,EAAE,qBAAhB;AAAA,sBACGN,KAAK,CAACM,IAAD,CAAL,CAAY;AAACO,cAAAA,SAAS,EAAE;AAAZ,aAAZ;AADH,YAHJ,eAOE;AAAA,sBACGN;AADH,YAPF;AAAA;AADF;AALF;AADF,IADF;AAuBD,CAlCD;;AAoCA,eAAeF,UAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n icon,\n text,\n size,\n disabled,\n onClick\n }: ActionChipProps) => {\n\n /**\n * Return Action Chip component.\n */\n return (\n <>\n <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''}`}\n onClick={() => !disabled && onClick && onClick()}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyDown={e => e.key === 'Enter' && !disabled && onClick && onClick()}\n tabIndex={disabled || !!onClick ? -1 : 0}>\n <ChipContentContainer>\n <ChipContent>\n {\n icon &&\n <div className={'chip-icon icon-left'}>\n {icons[icon]({className: 'icon'})}\n </div>\n }\n <div>\n {text}\n </div>\n </ChipContent>\n </ChipContentContainer>\n </ChipContainer>\n </>\n );\n};\n\nexport default ActionChip;\n"],"file":"ActionChip.js"}
1
+ {"version":3,"sources":["../../src/Chips/ActionChip.tsx"],"names":["React","SystemIcons","icons","Size","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","ActionChip","icon","text","size","Medium","disabled","onClick","e","key","className"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,WAAW,IAAIC,KAAvB,QAAmC,gBAAnC;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA;AACA;AACA;;AACA,SAAQC,aAAR,EAAuBC,WAAvB,EAAoCC,oBAApC,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;;;;AAEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,IAKqB,QALrBA,IAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,uBAHrBC,IAGqB;AAAA,MAHrBA,IAGqB,0BAHdR,IAAI,CAACS,MAGS;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAEnF;AACF;AACA;AACE,sBACE,KAAC,aAAD;AAAe,IAAA,SAAS,YAAKH,IAAL,cAAaE,QAAQ,GAAG,UAAH,GAAgB,EAArC,sBAAmD,CAAC,CAACC,QAAF,GAAY,aAAZ,GAA4B,EAA/E,CAAxB;AACe,IAAA,OAAO,EAAE;AAAA,aAAM,CAACD,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,KADxB;AAEe,IAAA,WAAW,EAAEP,yBAF5B;AAGe,IAAA,SAAS,EAAE,mBAAAQ,CAAC;AAAA,aAAI,CAACA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAhC,KAAwC,CAACH,QAAzC,IAAqDC,QAArD,IAAgEA,QAAO,EAA3E;AAAA,KAH3B;AAIe,IAAA,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAb,GAAuB,CAAC,CAAxB,GAA4B,CAJrD;AAAA,2BAKE,KAAC,oBAAD;AAAA,6BACE,MAAC,WAAD;AAAA,mBAEIL,IAAI,iBACJ;AAAK,UAAA,SAAS,EAAE,qBAAhB;AAAA,oBACGP,KAAK,CAACO,IAAD,CAAL,CAAY;AAACQ,YAAAA,SAAS,EAAE;AAAZ,WAAZ;AADH,UAHJ,eAOE;AAAA,oBACGP;AADH,UAPF;AAAA;AADF;AALF,IADF;AAqBD,CAhCD;;AAkCA,eAAeF,UAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n icon,\n text,\n size = Size.Medium,\n disabled,\n onClick\n }: ActionChipProps) => {\n\n /**\n * Return Action Chip component.\n */\n return (\n <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''}`}\n onClick={() => !disabled && onClick && onClick()}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n tabIndex={disabled || !onClick ? -1 : 0}>\n <ChipContentContainer>\n <ChipContent>\n {\n icon &&\n <div className={'chip-icon icon-left'}>\n {icons[icon]({className: 'icon'})}\n </div>\n }\n <div>\n {text}\n </div>\n </ChipContent>\n </ChipContentContainer>\n </ChipContainer>\n );\n};\n\nexport default ActionChip;\n"],"file":"ActionChip.js"}
@@ -3,12 +3,12 @@ import { Size, States } from '../types';
3
3
  * Types for the chips.
4
4
  */
5
5
  export interface ChipProps {
6
- size: Size;
6
+ size?: Size;
7
7
  disabled?: boolean;
8
8
  }
9
9
  export interface InputChipProps extends ChipProps {
10
10
  text: string;
11
- variant: ChipVariant;
11
+ variant?: ChipVariant;
12
12
  icon?: ChipIcons;
13
13
  disableRemove?: boolean;
14
14
  onRemove: (e: any) => void;
@@ -32,7 +32,7 @@ export interface ChoiceChipProps extends ChipProps {
32
32
  export interface ChipValue {
33
33
  value: string;
34
34
  label: string;
35
- size: Size;
35
+ size?: Size;
36
36
  }
37
37
  export declare type ChipIcons = 'Add' | 'ArrowDropDown' | 'ArrowDropUp' | 'ArrowLineDown' | 'ArrowLineLeft' | 'ArrowLineRight' | 'ArrowLineUp' | 'ArrowStopLeft' | 'ArrowStopRight' | 'Attachment' | 'Attention' | 'BackwardsFiveSec' | 'Book' | 'BookmarkOff' | 'BookmarkOn' | 'Bullet' | 'Calendar' | 'CheckboxOff' | 'CheckboxOn' | 'CheckboxSemi' | 'CheckMark' | 'ChevronDown' | 'ChevronLeft' | 'ChevronRight' | 'ChevronUp' | 'Clear' | 'Close' | 'ClosedCaptionOn' | 'CloudAttention' | 'CloudCheck' | 'CloudDownload' | 'CloudLocked' | 'CloudNoConnection' | 'CloudSyncing' | 'CloudUpload' | 'Cloud' | 'Dashboard' | 'Delete' | 'Download' | 'DragHandle' | 'DragIndicator' | 'Edit' | 'Educator' | 'Equals' | 'EventLog' | 'ExtendTextArea' | 'Filter' | 'Forward' | 'ForwardSlash' | 'ForwardFiveSec' | 'FullscreenExit' | 'Fullscreen' | 'GearSettings' | 'GridView' | 'Group' | 'GuidedTour' | 'Help' | 'Hierarchy' | 'History' | 'Home' | 'Information' | 'Institute' | 'Language' | 'ListView' | 'LoadingMedium' | 'LoadingSmall' | 'LockedOff' | 'LockedOn' | 'Login' | 'Logout' | 'Loop' | 'Mail' | 'Manikin' | 'MapPoint' | 'Menu' | 'Minus' | 'MoreHorizontal' | 'MoreVertical' | 'NotificationNew' | 'Notification' | 'OpenFolder' | 'OpenNewWindow' | 'Pause' | 'PlayOutline' | 'Play' | 'Plus' | 'PointDown' | 'PointLeft' | 'PointRight' | 'PointUp' | 'RadioButtonOff' | 'RadioButtonOn' | 'Record' | 'Refresh' | 'Replay' | 'Rewind' | 'Save' | 'Search' | 'Share' | 'ShoppingCart' | 'StarFilled' | 'StarOutlined' | 'Stop' | 'Support' | 'Team' | 'ThumbsDown' | 'ThumbsUp' | 'TimeLimited' | 'Time' | 'Tip' | 'Upload' | 'Usb' | 'User' | 'Video' | 'VisibleOff' | 'VisibleOn' | 'VolumeDown' | 'VolumeOff' | 'VolumeUp';
38
38
  export declare type ChipVariant = States.Default | States.Invalid;
@@ -17,6 +17,8 @@ var _ChipStyles = require("./ChipStyles");
17
17
 
18
18
  var _common = require("../common");
19
19
 
20
+ var _types = require("../types");
21
+
20
22
  var _jsxRuntime = require("react/jsx-runtime");
21
23
 
22
24
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -64,7 +66,7 @@ var ChoiceChips = function ChoiceChips(_ref) {
64
66
  };
65
67
 
66
68
  var handleKeyDown = function handleKeyDown(e, value) {
67
- if (e.key === 'Enter') {
69
+ if (e.key === 'Enter' || e.key === ' ') {
68
70
  onSelectChip(value);
69
71
  }
70
72
  };
@@ -75,9 +77,11 @@ var ChoiceChips = function ChoiceChips(_ref) {
75
77
 
76
78
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
77
79
  children: values.map(function (value) {
80
+ var _value$size;
81
+
78
82
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, {
79
83
  tabIndex: disabled ? -1 : 0,
80
- className: "".concat(value.size, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value.value ? 'default' : 'outline', " interactive"),
84
+ className: "".concat((_value$size = value.size) !== null && _value$size !== void 0 ? _value$size : _types.Size.Medium, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value.value ? 'default' : 'outline', " interactive"),
81
85
  onMouseDown: _common.defaultOnMouseDownHandler,
82
86
  onClick: function onClick() {
83
87
  return !disabled && onSelectChip(value);
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Chips/ChoiceChips.tsx"],"names":["ChoiceChips","selected","disabled","onClick","values","React","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","size","defaultOnMouseDownHandler","label"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AAMA;;;;;;;;AAdA;AACA;AACA;;AAGA;AACA;AACA;AASA,IAAMA,WAAqD,GAAG,SAAxDA,WAAwD,OAKwB;AAAA,MAJrBC,QAIqB,QAJrBA,QAIqB;AAAA,MAHrBC,QAGqB,QAHrBA,QAGqB;AAAA,MAFrBC,OAEqB,QAFrBA,OAEqB;AAAA,MADrBC,MACqB,QADrBA,MACqB;;AACpF;AACF;AACA;AACE,wBAAwCC,KAAK,CAACC,QAAN,CAAuB,EAAvB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;AAEA;AACF;AACA;;;AACEH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpBD,IAAAA,eAAe,CAACP,QAAD,CAAf;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA;AACF;AACA;AACA;;AACE,MAAMS,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;AACzC;AACAH,IAAAA,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;AACAR,IAAAA,OAAO,IAAIA,OAAO,CAACQ,KAAD,CAAlB;AACD,GAND;;AAQA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;AAClD,QAAIE,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE;AAAA,cACGP,MAAM,CAACW,GAAP,CAAW,UAACJ,KAAD;AAAA,0BACV,qBAAC,yBAAD;AAEE,QAAA,QAAQ,EAAET,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,QAAA,SAAS,YAAKS,KAAK,CAACK,IAAX,cAAmBd,QAAQ,GAAG,UAAH,GAAgB,EAA3C,cAAiDK,YAAY,KAAKI,KAAK,CAACA,KAAvB,GAA+B,SAA/B,GAA2C,SAA5F,iBAHX;AAIE,QAAA,WAAW,EAAEM,iCAJf;AAKE,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACf,QAAD,IAAaQ,YAAY,CAACC,KAAD,CAA/B;AAAA,SALX;AAME,QAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,iBAAI,CAACX,QAAD,IAAaU,aAAa,CAACC,CAAD,EAAIF,KAAJ,CAA9B;AAAA,SANd;AAAA,+BAOE,qBAAC,gCAAD;AAAA,iCACE,qBAAC,uBAAD;AAAA,sBACGA,KAAK,CAACO;AADT;AADF;AAPF,SACOP,KAAK,CAACA,KADb,CADU;AAAA,KAAX;AADH,IADF;AAmBD,CA1DD;;eA4DeX,W","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n selected,\n disabled,\n onClick,\n values\n }: ChoiceChipProps) => {\n /**\n * Globally used variables within the component.\n */\n const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n /**\n * Set the selected value for the chip.\n */\n React.useEffect(() => {\n setSelectedChip(selected);\n }, [selected]);\n\n /**\n * Sets selected chip and fires an event to parent component.\n * @param value - Chip which was selected.\n */\n const onSelectChip = (value: ChipValue) => {\n // Update selected chip\n setSelectedChip(value.value);\n\n // Fire the event\n onClick && onClick(value);\n };\n\n const handleKeyDown = (e: any, value: ChipValue) => {\n if (e.key === 'Enter') {\n onSelectChip(value);\n }\n };\n\n /**\n * Return Choice Chip component.\n */\n return (\n <>\n {values.map((value: ChipValue) => (\n <ChipContainer\n key={value.value}\n tabIndex={disabled ? -1 : 0}\n className={`${value.size} ${disabled ? 'disabled' : ''} ${selectedChip === value.value ? 'default' : 'outline'} interactive`}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => !disabled && onSelectChip(value)}\n onKeyDown={e => !disabled && handleKeyDown(e, value)}>\n <ChipContentContainer>\n <ChipContent>\n {value.label}\n </ChipContent>\n </ChipContentContainer>\n </ChipContainer>\n ))}\n </>\n );\n};\n\nexport default ChoiceChips;\n"],"file":"ChoiceChips.cjs"}
1
+ {"version":3,"sources":["../../src/Chips/ChoiceChips.tsx"],"names":["ChoiceChips","selected","disabled","onClick","values","React","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","size","Size","Medium","defaultOnMouseDownHandler","label"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AAMA;;AACA;;;;;;;;AAfA;AACA;AACA;;AAGA;AACA;AACA;AAUA,IAAMA,WAAqD,GAAG,SAAxDA,WAAwD,OAKwB;AAAA,MAJrBC,QAIqB,QAJrBA,QAIqB;AAAA,MAHrBC,QAGqB,QAHrBA,QAGqB;AAAA,MAFrBC,OAEqB,QAFrBA,OAEqB;AAAA,MADrBC,MACqB,QADrBA,MACqB;;AACpF;AACF;AACA;AACE,wBAAwCC,KAAK,CAACC,QAAN,CAAuB,EAAvB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;AAEA;AACF;AACA;;;AACEH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpBD,IAAAA,eAAe,CAACP,QAAD,CAAf;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA;AACF;AACA;AACA;;AACE,MAAMS,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;AACzC;AACAH,IAAAA,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;AACAR,IAAAA,OAAO,IAAIA,OAAO,CAACQ,KAAD,CAAlB;AACD,GAND;;AAQA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;AAClD,QAAIE,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAnC,EAAwC;AACtCJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE;AAAA,cACGP,MAAM,CAACW,GAAP,CAAW,UAACJ,KAAD;AAAA;;AAAA,0BACV,qBAAC,yBAAD;AAEE,QAAA,QAAQ,EAAET,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,QAAA,SAAS,2BAAKS,KAAK,CAACK,IAAX,qDAAmBC,YAAKC,MAAxB,cAAkChB,QAAQ,GAAG,UAAH,GAAgB,EAA1D,cAAgEK,YAAY,KAAKI,KAAK,CAACA,KAAvB,GAA+B,SAA/B,GAA2C,SAA3G,iBAHX;AAIE,QAAA,WAAW,EAAEQ,iCAJf;AAKE,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACjB,QAAD,IAAaQ,YAAY,CAACC,KAAD,CAA/B;AAAA,SALX;AAME,QAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,iBAAI,CAACX,QAAD,IAAaU,aAAa,CAACC,CAAD,EAAIF,KAAJ,CAA9B;AAAA,SANd;AAAA,+BAOE,qBAAC,gCAAD;AAAA,iCACE,qBAAC,uBAAD;AAAA,sBACGA,KAAK,CAACS;AADT;AADF;AAPF,SACOT,KAAK,CAACA,KADb,CADU;AAAA,KAAX;AADH,IADF;AAmBD,CA1DD;;eA4DeX,W","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {Size} from '../types';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n selected,\n disabled,\n onClick,\n values\n }: ChoiceChipProps) => {\n /**\n * Globally used variables within the component.\n */\n const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n /**\n * Set the selected value for the chip.\n */\n React.useEffect(() => {\n setSelectedChip(selected);\n }, [selected]);\n\n /**\n * Sets selected chip and fires an event to parent component.\n * @param value - Chip which was selected.\n */\n const onSelectChip = (value: ChipValue) => {\n // Update selected chip\n setSelectedChip(value.value);\n\n // Fire the event\n onClick && onClick(value);\n };\n\n const handleKeyDown = (e: any, value: ChipValue) => {\n if (e.key === 'Enter' || e.key === ' ') {\n onSelectChip(value);\n }\n };\n\n /**\n * Return Choice Chip component.\n */\n return (\n <>\n {values.map((value: ChipValue) => (\n <ChipContainer\n key={value.value}\n tabIndex={disabled ? -1 : 0}\n className={`${value.size ?? Size.Medium} ${disabled ? 'disabled' : ''} ${selectedChip === value.value ? 'default' : 'outline'} interactive`}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => !disabled && onSelectChip(value)}\n onKeyDown={e => !disabled && handleKeyDown(e, value)}>\n <ChipContentContainer>\n <ChipContent>\n {value.label}\n </ChipContent>\n </ChipContentContainer>\n </ChipContainer>\n ))}\n </>\n );\n};\n\nexport default ChoiceChips;\n"],"file":"ChoiceChips.cjs"}
@@ -14,6 +14,7 @@ import { ChipContainer, ChipContent, ChipContentContainer } from './ChipStyles';
14
14
  */
15
15
 
16
16
  import { defaultOnMouseDownHandler } from '../common';
17
+ import { Size } from '../types';
17
18
  import { jsx as _jsx } from "react/jsx-runtime";
18
19
  import { Fragment as _Fragment } from "react/jsx-runtime";
19
20
 
@@ -51,7 +52,7 @@ var ChoiceChips = function ChoiceChips(_ref) {
51
52
  };
52
53
 
53
54
  var handleKeyDown = function handleKeyDown(e, value) {
54
- if (e.key === 'Enter') {
55
+ if (e.key === 'Enter' || e.key === ' ') {
55
56
  onSelectChip(value);
56
57
  }
57
58
  };
@@ -62,9 +63,11 @@ var ChoiceChips = function ChoiceChips(_ref) {
62
63
 
63
64
  return /*#__PURE__*/_jsx(_Fragment, {
64
65
  children: values.map(function (value) {
66
+ var _value$size;
67
+
65
68
  return /*#__PURE__*/_jsx(ChipContainer, {
66
69
  tabIndex: disabled ? -1 : 0,
67
- className: "".concat(value.size, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value.value ? 'default' : 'outline', " interactive"),
70
+ className: "".concat((_value$size = value.size) !== null && _value$size !== void 0 ? _value$size : Size.Medium, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value.value ? 'default' : 'outline', " interactive"),
68
71
  onMouseDown: defaultOnMouseDownHandler,
69
72
  onClick: function onClick() {
70
73
  return !disabled && onSelectChip(value);
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Chips/ChoiceChips.tsx"],"names":["React","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","ChoiceChips","selected","disabled","onClick","values","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","size","label"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,aAAR,EAAuBC,WAAvB,EAAoCC,oBAApC,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;;;;AAEA,IAAMC,WAAqD,GAAG,SAAxDA,WAAwD,OAKwB;AAAA,MAJrBC,QAIqB,QAJrBA,QAIqB;AAAA,MAHrBC,QAGqB,QAHrBA,QAGqB;AAAA,MAFrBC,OAEqB,QAFrBA,OAEqB;AAAA,MADrBC,MACqB,QADrBA,MACqB;;AACpF;AACF;AACA;AACE,wBAAwCT,KAAK,CAACU,QAAN,CAAuB,EAAvB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;AAEA;AACF;AACA;;;AACEZ,EAAAA,KAAK,CAACa,SAAN,CAAgB,YAAM;AACpBD,IAAAA,eAAe,CAACN,QAAD,CAAf;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA;AACF;AACA;AACA;;AACE,MAAMQ,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;AACzC;AACAH,IAAAA,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;AACAP,IAAAA,OAAO,IAAIA,OAAO,CAACO,KAAD,CAAlB;AACD,GAND;;AAQA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;AAClD,QAAIE,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE;AAAA,cACGN,MAAM,CAACU,GAAP,CAAW,UAACJ,KAAD;AAAA,0BACV,KAAC,aAAD;AAEE,QAAA,QAAQ,EAAER,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,QAAA,SAAS,YAAKQ,KAAK,CAACK,IAAX,cAAmBb,QAAQ,GAAG,UAAH,GAAgB,EAA3C,cAAiDI,YAAY,KAAKI,KAAK,CAACA,KAAvB,GAA+B,SAA/B,GAA2C,SAA5F,iBAHX;AAIE,QAAA,WAAW,EAAEX,yBAJf;AAKE,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACG,QAAD,IAAaO,YAAY,CAACC,KAAD,CAA/B;AAAA,SALX;AAME,QAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,iBAAI,CAACV,QAAD,IAAaS,aAAa,CAACC,CAAD,EAAIF,KAAJ,CAA9B;AAAA,SANd;AAAA,+BAOE,KAAC,oBAAD;AAAA,iCACE,KAAC,WAAD;AAAA,sBACGA,KAAK,CAACM;AADT;AADF;AAPF,SACON,KAAK,CAACA,KADb,CADU;AAAA,KAAX;AADH,IADF;AAmBD,CA1DD;;AA4DA,eAAeV,WAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n selected,\n disabled,\n onClick,\n values\n }: ChoiceChipProps) => {\n /**\n * Globally used variables within the component.\n */\n const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n /**\n * Set the selected value for the chip.\n */\n React.useEffect(() => {\n setSelectedChip(selected);\n }, [selected]);\n\n /**\n * Sets selected chip and fires an event to parent component.\n * @param value - Chip which was selected.\n */\n const onSelectChip = (value: ChipValue) => {\n // Update selected chip\n setSelectedChip(value.value);\n\n // Fire the event\n onClick && onClick(value);\n };\n\n const handleKeyDown = (e: any, value: ChipValue) => {\n if (e.key === 'Enter') {\n onSelectChip(value);\n }\n };\n\n /**\n * Return Choice Chip component.\n */\n return (\n <>\n {values.map((value: ChipValue) => (\n <ChipContainer\n key={value.value}\n tabIndex={disabled ? -1 : 0}\n className={`${value.size} ${disabled ? 'disabled' : ''} ${selectedChip === value.value ? 'default' : 'outline'} interactive`}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => !disabled && onSelectChip(value)}\n onKeyDown={e => !disabled && handleKeyDown(e, value)}>\n <ChipContentContainer>\n <ChipContent>\n {value.label}\n </ChipContent>\n </ChipContentContainer>\n </ChipContainer>\n ))}\n </>\n );\n};\n\nexport default ChoiceChips;\n"],"file":"ChoiceChips.js"}
1
+ {"version":3,"sources":["../../src/Chips/ChoiceChips.tsx"],"names":["React","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","Size","ChoiceChips","selected","disabled","onClick","values","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","size","Medium","label"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,aAAR,EAAuBC,WAAvB,EAAoCC,oBAApC,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;AACA,SAAQC,IAAR,QAAmB,UAAnB;;;;AAEA,IAAMC,WAAqD,GAAG,SAAxDA,WAAwD,OAKwB;AAAA,MAJrBC,QAIqB,QAJrBA,QAIqB;AAAA,MAHrBC,QAGqB,QAHrBA,QAGqB;AAAA,MAFrBC,OAEqB,QAFrBA,OAEqB;AAAA,MADrBC,MACqB,QADrBA,MACqB;;AACpF;AACF;AACA;AACE,wBAAwCV,KAAK,CAACW,QAAN,CAAuB,EAAvB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;AAEA;AACF;AACA;;;AACEb,EAAAA,KAAK,CAACc,SAAN,CAAgB,YAAM;AACpBD,IAAAA,eAAe,CAACN,QAAD,CAAf;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA;AACF;AACA;AACA;;AACE,MAAMQ,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;AACzC;AACAH,IAAAA,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;AACAP,IAAAA,OAAO,IAAIA,OAAO,CAACO,KAAD,CAAlB;AACD,GAND;;AAQA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;AAClD,QAAIE,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAnC,EAAwC;AACtCJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE;AAAA,cACGN,MAAM,CAACU,GAAP,CAAW,UAACJ,KAAD;AAAA;;AAAA,0BACV,KAAC,aAAD;AAEE,QAAA,QAAQ,EAAER,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,QAAA,SAAS,2BAAKQ,KAAK,CAACK,IAAX,qDAAmBhB,IAAI,CAACiB,MAAxB,cAAkCd,QAAQ,GAAG,UAAH,GAAgB,EAA1D,cAAgEI,YAAY,KAAKI,KAAK,CAACA,KAAvB,GAA+B,SAA/B,GAA2C,SAA3G,iBAHX;AAIE,QAAA,WAAW,EAAEZ,yBAJf;AAKE,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACI,QAAD,IAAaO,YAAY,CAACC,KAAD,CAA/B;AAAA,SALX;AAME,QAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,iBAAI,CAACV,QAAD,IAAaS,aAAa,CAACC,CAAD,EAAIF,KAAJ,CAA9B;AAAA,SANd;AAAA,+BAOE,KAAC,oBAAD;AAAA,iCACE,KAAC,WAAD;AAAA,sBACGA,KAAK,CAACO;AADT;AADF;AAPF,SACOP,KAAK,CAACA,KADb,CADU;AAAA,KAAX;AADH,IADF;AAmBD,CA1DD;;AA4DA,eAAeV,WAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {Size} from '../types';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n selected,\n disabled,\n onClick,\n values\n }: ChoiceChipProps) => {\n /**\n * Globally used variables within the component.\n */\n const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n /**\n * Set the selected value for the chip.\n */\n React.useEffect(() => {\n setSelectedChip(selected);\n }, [selected]);\n\n /**\n * Sets selected chip and fires an event to parent component.\n * @param value - Chip which was selected.\n */\n const onSelectChip = (value: ChipValue) => {\n // Update selected chip\n setSelectedChip(value.value);\n\n // Fire the event\n onClick && onClick(value);\n };\n\n const handleKeyDown = (e: any, value: ChipValue) => {\n if (e.key === 'Enter' || e.key === ' ') {\n onSelectChip(value);\n }\n };\n\n /**\n * Return Choice Chip component.\n */\n return (\n <>\n {values.map((value: ChipValue) => (\n <ChipContainer\n key={value.value}\n tabIndex={disabled ? -1 : 0}\n className={`${value.size ?? Size.Medium} ${disabled ? 'disabled' : ''} ${selectedChip === value.value ? 'default' : 'outline'} interactive`}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => !disabled && onSelectChip(value)}\n onKeyDown={e => !disabled && handleKeyDown(e, value)}>\n <ChipContentContainer>\n <ChipContent>\n {value.label}\n </ChipContent>\n </ChipContentContainer>\n </ChipContainer>\n ))}\n </>\n );\n};\n\nexport default ChoiceChips;\n"],"file":"ChoiceChips.js"}
@@ -9,6 +9,8 @@ exports.default = void 0;
9
9
 
10
10
  var React = _interopRequireWildcard(require("react"));
11
11
 
12
+ var _types = require("../types");
13
+
12
14
  var _index = require("../icons/index");
13
15
 
14
16
  var _ChipStyles = require("./ChipStyles");
@@ -35,35 +37,34 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
35
37
  var FilterChip = function FilterChip(_ref) {
36
38
  var selected = _ref.selected,
37
39
  text = _ref.text,
38
- size = _ref.size,
40
+ _ref$size = _ref.size,
41
+ size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
39
42
  disabled = _ref.disabled,
40
43
  _onClick = _ref.onClick;
41
44
 
42
45
  /**
43
46
  * Return Filter Chip component.
44
47
  */
45
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
46
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, {
47
- className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selected ? 'default' : 'outline', " ").concat(!!_onClick ? 'interactive' : ''),
48
- tabIndex: disabled ? -1 : 0,
49
- onKeyDown: function onKeyDown(e) {
50
- return e.key === 'Enter' && !disabled && _onClick && _onClick();
51
- },
52
- onMouseDown: _common.defaultOnMouseDownHandler,
53
- onClick: function onClick() {
54
- return !disabled && _onClick && _onClick();
55
- },
56
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContentContainer, {
57
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChipStyles.ChipContent, {
58
- children: [selected && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
59
- className: 'chip-icon icon-left',
60
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SystemIcons.CheckMark, {
61
- className: 'icon'
62
- })
63
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
64
- children: text
65
- })]
66
- })
48
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, {
49
+ className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selected ? 'default' : 'outline', " ").concat(!!_onClick ? 'interactive' : ''),
50
+ tabIndex: disabled || !_onClick ? -1 : 0,
51
+ onKeyDown: function onKeyDown(e) {
52
+ return (e.key === 'Enter' || e.key === ' ') && !disabled && _onClick && _onClick();
53
+ },
54
+ onMouseDown: _common.defaultOnMouseDownHandler,
55
+ onClick: function onClick() {
56
+ return !disabled && _onClick && _onClick();
57
+ },
58
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContentContainer, {
59
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChipStyles.ChipContent, {
60
+ children: [selected && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
61
+ className: 'chip-icon icon-left',
62
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SystemIcons.CheckMark, {
63
+ className: 'icon'
64
+ })
65
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
66
+ children: text
67
+ })]
67
68
  })
68
69
  })
69
70
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Chips/FilterChip.tsx"],"names":["FilterChip","selected","text","size","disabled","onClick","e","key","defaultOnMouseDownHandler"],"mappings":";;;;;;;;;AAGA;;AAMA;;AAKA;;AAMA;;;;;;;;AApBA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AASA,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,QAKqB,QALrBA,QAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,MAHrBC,IAGqB,QAHrBA,IAGqB;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAGnF;AACF;AACA;AACE,sBACE;AAAA,2BACE,qBAAC,yBAAD;AACE,MAAA,SAAS,YAAKF,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CH,QAAQ,GAAG,SAAH,GAAe,SAAlE,cAA+E,CAAC,CAACI,QAAF,GAAY,aAAZ,GAA4B,EAA3G,CADX;AAEE,MAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,MAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,eAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACH,QAAtB,IAAkCC,QAAlC,IAA6CA,QAAO,EAAxD;AAAA,OAHd;AAIE,MAAA,WAAW,EAAEG,iCAJf;AAKE,MAAA,OAAO,EAAE;AAAA,eAAM,CAACJ,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,OALX;AAAA,6BAME,qBAAC,gCAAD;AAAA,+BACE,sBAAC,uBAAD;AAAA,qBACGJ,QAAQ,iBAAI;AAAK,YAAA,SAAS,EAAE,qBAAhB;AAAA,mCAAuC,qBAAC,kBAAD,CAAa,SAAb;AAAuB,cAAA,SAAS,EAAE;AAAlC;AAAvC,YADf,eAEE;AAAA,sBAAMC;AAAN,YAFF;AAAA;AADF;AANF;AADF,IADF;AAiBD,CA7BD;;eA+BeF,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport {Size} from '../types';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {FilterChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\n selected,\n text,\n size,\n disabled,\n onClick\n }: FilterChipProps) => {\n\n\n /**\n * Return Filter Chip component.\n */\n return (\n <>\n <ChipContainer\n className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''}`}\n tabIndex={disabled ? -1 : 0}\n onKeyDown={e => e.key === 'Enter' && !disabled && onClick && onClick()}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => !disabled && onClick && onClick()}>\n <ChipContentContainer>\n <ChipContent>\n {selected && <div className={'chip-icon icon-left'}><SystemIcons.CheckMark className={'icon'}/></div>}\n <div>{text}</div>\n </ChipContent>\n </ChipContentContainer>\n </ChipContainer>\n </>\n );\n};\n\nexport default FilterChip;\n"],"file":"FilterChip.cjs"}
1
+ {"version":3,"sources":["../../src/Chips/FilterChip.tsx"],"names":["FilterChip","selected","text","size","Size","Medium","disabled","onClick","e","key","defaultOnMouseDownHandler"],"mappings":";;;;;;;;;AAGA;;AACA;;AAKA;;AAKA;;AAMA;;;;;;;;AApBA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AASA,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,QAKqB,QALrBA,QAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,uBAHrBC,IAGqB;AAAA,MAHrBA,IAGqB,0BAHdC,YAAKC,MAGS;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAGnF;AACF;AACA;AACE,sBACE,qBAAC,yBAAD;AACE,IAAA,SAAS,YAAKJ,IAAL,cAAaG,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CL,QAAQ,GAAG,SAAH,GAAe,SAAlE,cAA+E,CAAC,CAACM,QAAF,GAAY,aAAZ,GAA4B,EAA3G,CADX;AAEE,IAAA,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAb,GAAuB,CAAC,CAAxB,GAA4B,CAFxC;AAGE,IAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,aAAI,CAACA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAhC,KAAwC,CAACH,QAAzC,IAAqDC,QAArD,IAAgEA,QAAO,EAA3E;AAAA,KAHd;AAIE,IAAA,WAAW,EAAEG,iCAJf;AAKE,IAAA,OAAO,EAAE;AAAA,aAAM,CAACJ,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,KALX;AAAA,2BAME,qBAAC,gCAAD;AAAA,6BACE,sBAAC,uBAAD;AAAA,mBACGN,QAAQ,iBAAI;AAAK,UAAA,SAAS,EAAE,qBAAhB;AAAA,iCAAuC,qBAAC,kBAAD,CAAa,SAAb;AAAuB,YAAA,SAAS,EAAE;AAAlC;AAAvC,UADf,eAEE;AAAA,oBAAMC;AAAN,UAFF;AAAA;AADF;AANF,IADF;AAeD,CA3BD;;eA6BeF,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport {Size} from '../types';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {FilterChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\n selected,\n text,\n size = Size.Medium,\n disabled,\n onClick\n }: FilterChipProps) => {\n\n\n /**\n * Return Filter Chip component.\n */\n return (\n <ChipContainer\n className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''}`}\n tabIndex={disabled || !onClick ? -1 : 0}\n onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => !disabled && onClick && onClick()}>\n <ChipContentContainer>\n <ChipContent>\n {selected && <div className={'chip-icon icon-left'}><SystemIcons.CheckMark className={'icon'}/></div>}\n <div>{text}</div>\n </ChipContent>\n </ChipContentContainer>\n </ChipContainer>\n );\n};\n\nexport default FilterChip;\n"],"file":"FilterChip.cjs"}
@@ -2,10 +2,11 @@
2
2
  * Import React libraries.
3
3
  */
4
4
  import * as React from 'react';
5
-
5
+ import { Size } from '../types';
6
6
  /**
7
7
  * Import custom components.
8
8
  */
9
+
9
10
  import { SystemIcons } from '../icons/index';
10
11
  /**
11
12
  * Import custom styles.
@@ -19,40 +20,38 @@ import { ChipContent, ChipContentContainer, ChipContainer } from './ChipStyles';
19
20
  import { defaultOnMouseDownHandler } from '../common';
20
21
  import { jsx as _jsx } from "react/jsx-runtime";
21
22
  import { jsxs as _jsxs } from "react/jsx-runtime";
22
- import { Fragment as _Fragment } from "react/jsx-runtime";
23
23
 
24
24
  var FilterChip = function FilterChip(_ref) {
25
25
  var selected = _ref.selected,
26
26
  text = _ref.text,
27
- size = _ref.size,
27
+ _ref$size = _ref.size,
28
+ size = _ref$size === void 0 ? Size.Medium : _ref$size,
28
29
  disabled = _ref.disabled,
29
30
  _onClick = _ref.onClick;
30
31
 
31
32
  /**
32
33
  * Return Filter Chip component.
33
34
  */
34
- return /*#__PURE__*/_jsx(_Fragment, {
35
- children: /*#__PURE__*/_jsx(ChipContainer, {
36
- className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selected ? 'default' : 'outline', " ").concat(!!_onClick ? 'interactive' : ''),
37
- tabIndex: disabled ? -1 : 0,
38
- onKeyDown: function onKeyDown(e) {
39
- return e.key === 'Enter' && !disabled && _onClick && _onClick();
40
- },
41
- onMouseDown: defaultOnMouseDownHandler,
42
- onClick: function onClick() {
43
- return !disabled && _onClick && _onClick();
44
- },
45
- children: /*#__PURE__*/_jsx(ChipContentContainer, {
46
- children: /*#__PURE__*/_jsxs(ChipContent, {
47
- children: [selected && /*#__PURE__*/_jsx("div", {
48
- className: 'chip-icon icon-left',
49
- children: /*#__PURE__*/_jsx(SystemIcons.CheckMark, {
50
- className: 'icon'
51
- })
52
- }), /*#__PURE__*/_jsx("div", {
53
- children: text
54
- })]
55
- })
35
+ return /*#__PURE__*/_jsx(ChipContainer, {
36
+ className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selected ? 'default' : 'outline', " ").concat(!!_onClick ? 'interactive' : ''),
37
+ tabIndex: disabled || !_onClick ? -1 : 0,
38
+ onKeyDown: function onKeyDown(e) {
39
+ return (e.key === 'Enter' || e.key === ' ') && !disabled && _onClick && _onClick();
40
+ },
41
+ onMouseDown: defaultOnMouseDownHandler,
42
+ onClick: function onClick() {
43
+ return !disabled && _onClick && _onClick();
44
+ },
45
+ children: /*#__PURE__*/_jsx(ChipContentContainer, {
46
+ children: /*#__PURE__*/_jsxs(ChipContent, {
47
+ children: [selected && /*#__PURE__*/_jsx("div", {
48
+ className: 'chip-icon icon-left',
49
+ children: /*#__PURE__*/_jsx(SystemIcons.CheckMark, {
50
+ className: 'icon'
51
+ })
52
+ }), /*#__PURE__*/_jsx("div", {
53
+ children: text
54
+ })]
56
55
  })
57
56
  })
58
57
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Chips/FilterChip.tsx"],"names":["React","SystemIcons","ChipContent","ChipContentContainer","ChipContainer","defaultOnMouseDownHandler","FilterChip","selected","text","size","disabled","onClick","e","key"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;;AAGA;AACA;AACA;AACA,SAAQC,WAAR,QAA0B,gBAA1B;AAEA;AACA;AACA;;AACA,SAAQC,WAAR,EAAqBC,oBAArB,EAA2CC,aAA3C,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;;;;;AAEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,QAKqB,QALrBA,QAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,MAHrBC,IAGqB,QAHrBA,IAGqB;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAGnF;AACF;AACA;AACE,sBACE;AAAA,2BACE,KAAC,aAAD;AACE,MAAA,SAAS,YAAKF,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CH,QAAQ,GAAG,SAAH,GAAe,SAAlE,cAA+E,CAAC,CAACI,QAAF,GAAY,aAAZ,GAA4B,EAA3G,CADX;AAEE,MAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,MAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,eAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACH,QAAtB,IAAkCC,QAAlC,IAA6CA,QAAO,EAAxD;AAAA,OAHd;AAIE,MAAA,WAAW,EAAEN,yBAJf;AAKE,MAAA,OAAO,EAAE;AAAA,eAAM,CAACK,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,OALX;AAAA,6BAME,KAAC,oBAAD;AAAA,+BACE,MAAC,WAAD;AAAA,qBACGJ,QAAQ,iBAAI;AAAK,YAAA,SAAS,EAAE,qBAAhB;AAAA,mCAAuC,KAAC,WAAD,CAAa,SAAb;AAAuB,cAAA,SAAS,EAAE;AAAlC;AAAvC,YADf,eAEE;AAAA,sBAAMC;AAAN,YAFF;AAAA;AADF;AANF;AADF,IADF;AAiBD,CA7BD;;AA+BA,eAAeF,UAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport {Size} from '../types';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {FilterChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\n selected,\n text,\n size,\n disabled,\n onClick\n }: FilterChipProps) => {\n\n\n /**\n * Return Filter Chip component.\n */\n return (\n <>\n <ChipContainer\n className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''}`}\n tabIndex={disabled ? -1 : 0}\n onKeyDown={e => e.key === 'Enter' && !disabled && onClick && onClick()}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => !disabled && onClick && onClick()}>\n <ChipContentContainer>\n <ChipContent>\n {selected && <div className={'chip-icon icon-left'}><SystemIcons.CheckMark className={'icon'}/></div>}\n <div>{text}</div>\n </ChipContent>\n </ChipContentContainer>\n </ChipContainer>\n </>\n );\n};\n\nexport default FilterChip;\n"],"file":"FilterChip.js"}
1
+ {"version":3,"sources":["../../src/Chips/FilterChip.tsx"],"names":["React","Size","SystemIcons","ChipContent","ChipContentContainer","ChipContainer","defaultOnMouseDownHandler","FilterChip","selected","text","size","Medium","disabled","onClick","e","key"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAAQC,IAAR,QAAmB,UAAnB;AAEA;AACA;AACA;;AACA,SAAQC,WAAR,QAA0B,gBAA1B;AAEA;AACA;AACA;;AACA,SAAQC,WAAR,EAAqBC,oBAArB,EAA2CC,aAA3C,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;;;;AAEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,QAKqB,QALrBA,QAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,uBAHrBC,IAGqB;AAAA,MAHrBA,IAGqB,0BAHdT,IAAI,CAACU,MAGS;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAGnF;AACF;AACA;AACE,sBACE,KAAC,aAAD;AACE,IAAA,SAAS,YAAKH,IAAL,cAAaE,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CJ,QAAQ,GAAG,SAAH,GAAe,SAAlE,cAA+E,CAAC,CAACK,QAAF,GAAY,aAAZ,GAA4B,EAA3G,CADX;AAEE,IAAA,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAb,GAAuB,CAAC,CAAxB,GAA4B,CAFxC;AAGE,IAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,aAAI,CAACA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAhC,KAAwC,CAACH,QAAzC,IAAqDC,QAArD,IAAgEA,QAAO,EAA3E;AAAA,KAHd;AAIE,IAAA,WAAW,EAAEP,yBAJf;AAKE,IAAA,OAAO,EAAE;AAAA,aAAM,CAACM,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,KALX;AAAA,2BAME,KAAC,oBAAD;AAAA,6BACE,MAAC,WAAD;AAAA,mBACGL,QAAQ,iBAAI;AAAK,UAAA,SAAS,EAAE,qBAAhB;AAAA,iCAAuC,KAAC,WAAD,CAAa,SAAb;AAAuB,YAAA,SAAS,EAAE;AAAlC;AAAvC,UADf,eAEE;AAAA,oBAAMC;AAAN,UAFF;AAAA;AADF;AANF,IADF;AAeD,CA3BD;;AA6BA,eAAeF,UAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport {Size} from '../types';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {FilterChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\n selected,\n text,\n size = Size.Medium,\n disabled,\n onClick\n }: FilterChipProps) => {\n\n\n /**\n * Return Filter Chip component.\n */\n return (\n <ChipContainer\n className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'default' : 'outline'} ${!!onClick ? 'interactive' : ''}`}\n tabIndex={disabled || !onClick ? -1 : 0}\n onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => !disabled && onClick && onClick()}>\n <ChipContentContainer>\n <ChipContent>\n {selected && <div className={'chip-icon icon-left'}><SystemIcons.CheckMark className={'icon'}/></div>}\n <div>{text}</div>\n </ChipContent>\n </ChipContentContainer>\n </ChipContainer>\n );\n};\n\nexport default FilterChip;\n"],"file":"FilterChip.js"}