@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.
- package/dist/Accordion/AccordionItem.cjs +4 -3
- package/dist/Accordion/AccordionItem.cjs.map +1 -1
- package/dist/Accordion/AccordionItem.d.ts +0 -1
- package/dist/Accordion/AccordionItem.js +4 -3
- package/dist/Accordion/AccordionItem.js.map +1 -1
- package/dist/Accordion/AccordionMenu.cjs +5 -5
- package/dist/Accordion/AccordionMenu.cjs.map +1 -1
- package/dist/Accordion/AccordionMenu.d.ts +1 -2
- package/dist/Accordion/AccordionMenu.js +5 -5
- package/dist/Accordion/AccordionMenu.js.map +1 -1
- package/dist/Accordion/ContentAccordion.cjs +14 -11
- package/dist/Accordion/ContentAccordion.cjs.map +1 -1
- package/dist/Accordion/ContentAccordion.d.ts +1 -1
- package/dist/Accordion/ContentAccordion.js +14 -11
- package/dist/Accordion/ContentAccordion.js.map +1 -1
- package/dist/Accordion/styles.cjs +2 -4
- package/dist/Accordion/styles.cjs.map +1 -1
- package/dist/Accordion/styles.d.ts +0 -1
- package/dist/Accordion/styles.js +2 -4
- package/dist/Accordion/styles.js.map +1 -1
- package/dist/Button/Button.cjs +10 -18
- package/dist/Button/Button.cjs.map +1 -1
- package/dist/Button/Button.js +10 -18
- package/dist/Button/Button.js.map +1 -1
- package/dist/Card/VerticalCard/Card.cjs +2 -2
- package/dist/Card/VerticalCard/Card.cjs.map +1 -1
- package/dist/Card/VerticalCard/Card.js +2 -2
- package/dist/Card/VerticalCard/Card.js.map +1 -1
- package/dist/Chips/ActionChip.cjs +24 -23
- package/dist/Chips/ActionChip.cjs.map +1 -1
- package/dist/Chips/ActionChip.js +24 -25
- package/dist/Chips/ActionChip.js.map +1 -1
- package/dist/Chips/ChipTypes.d.ts +3 -3
- package/dist/Chips/ChoiceChips.cjs +6 -2
- package/dist/Chips/ChoiceChips.cjs.map +1 -1
- package/dist/Chips/ChoiceChips.js +5 -2
- package/dist/Chips/ChoiceChips.js.map +1 -1
- package/dist/Chips/FilterChip.cjs +24 -23
- package/dist/Chips/FilterChip.cjs.map +1 -1
- package/dist/Chips/FilterChip.js +24 -25
- package/dist/Chips/FilterChip.js.map +1 -1
- package/dist/Chips/InputChip.cjs +42 -40
- package/dist/Chips/InputChip.cjs.map +1 -1
- package/dist/Chips/InputChip.js +41 -41
- package/dist/Chips/InputChip.js.map +1 -1
- package/dist/Dropdown/CommonStyling.cjs +1 -1
- package/dist/Dropdown/CommonStyling.cjs.map +1 -1
- package/dist/Dropdown/CommonStyling.js +1 -1
- package/dist/Dropdown/CommonStyling.js.map +1 -1
- package/dist/Dropdown/index.cjs +4 -4
- package/dist/Dropdown/index.cjs.map +1 -1
- package/dist/Dropdown/index.d.ts +4 -5
- package/dist/Dropdown/index.js +4 -5
- package/dist/Dropdown/index.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.cjs +1 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.js +1 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.cjs +2 -2
- package/dist/GlobalNavigationBar/desktop/UserMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.js +2 -2
- package/dist/GlobalNavigationBar/desktop/UserMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js.map +1 -1
- package/dist/InputFields/SearchBar.cjs +78 -7
- package/dist/InputFields/SearchBar.cjs.map +1 -1
- package/dist/InputFields/SearchBar.d.ts +9 -0
- package/dist/InputFields/SearchBar.js +75 -7
- package/dist/InputFields/SearchBar.js.map +1 -1
- package/dist/InputFields/components/SearchBarInput.cjs +6 -3
- package/dist/InputFields/components/SearchBarInput.cjs.map +1 -1
- package/dist/InputFields/components/SearchBarInput.d.ts +1 -0
- package/dist/InputFields/components/SearchBarInput.js +6 -3
- package/dist/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/InputFields/styling.cjs +1 -1
- package/dist/InputFields/styling.cjs.map +1 -1
- package/dist/InputFields/styling.js +1 -1
- package/dist/InputFields/styling.js.map +1 -1
- package/dist/MenuItem/MenuItem.cjs +3 -5
- package/dist/MenuItem/MenuItem.cjs.map +1 -1
- package/dist/MenuItem/MenuItem.js +3 -5
- package/dist/MenuItem/MenuItem.js.map +1 -1
- package/dist/Modals/ModalContainer.cjs.map +1 -1
- package/dist/Modals/ModalContainer.js.map +1 -1
- package/dist/Popover/Popover.cjs +13 -24
- package/dist/Popover/Popover.cjs.map +1 -1
- package/dist/Popover/Popover.js +13 -23
- package/dist/Popover/Popover.js.map +1 -1
- package/dist/SideMenu/SideMenu.cjs +49 -0
- package/dist/SideMenu/SideMenu.cjs.map +1 -0
- package/dist/SideMenu/SideMenu.d.ts +4 -0
- package/dist/SideMenu/SideMenu.js +31 -0
- package/dist/SideMenu/SideMenu.js.map +1 -0
- package/dist/SideMenu/SideMenuBody.cjs +64 -0
- package/dist/SideMenu/SideMenuBody.cjs.map +1 -0
- package/dist/SideMenu/SideMenuBody.d.ts +2 -0
- package/dist/SideMenu/SideMenuBody.js +43 -0
- package/dist/SideMenu/SideMenuBody.js.map +1 -0
- package/dist/SideMenu/SideMenuFooter.cjs +74 -0
- package/dist/SideMenu/SideMenuFooter.cjs.map +1 -0
- package/dist/SideMenu/SideMenuFooter.d.ts +2 -0
- package/dist/SideMenu/SideMenuFooter.js +51 -0
- package/dist/SideMenu/SideMenuFooter.js.map +1 -0
- package/dist/SideMenu/SideMenuHeader.cjs +68 -0
- package/dist/SideMenu/SideMenuHeader.cjs.map +1 -0
- package/dist/SideMenu/SideMenuHeader.d.ts +2 -0
- package/dist/SideMenu/SideMenuHeader.js +48 -0
- package/dist/SideMenu/SideMenuHeader.js.map +1 -0
- package/dist/SideMenu/index.cjs +33 -0
- package/dist/SideMenu/index.cjs.map +1 -0
- package/dist/SideMenu/index.d.ts +2 -0
- package/dist/SideMenu/index.js +3 -0
- package/dist/SideMenu/index.js.map +1 -0
- package/dist/SideMenu/types.cjs +6 -0
- package/dist/SideMenu/types.cjs.map +1 -0
- package/dist/SideMenu/types.d.ts +27 -0
- package/dist/SideMenu/types.js +2 -0
- package/dist/SideMenu/types.js.map +1 -0
- package/dist/Switcher/MobileSwitcherMenu.cjs +1 -1
- package/dist/Switcher/MobileSwitcherMenu.cjs.map +1 -1
- package/dist/Switcher/MobileSwitcherMenu.js +1 -1
- package/dist/Switcher/MobileSwitcherMenu.js.map +1 -1
- package/dist/Switcher/SwitcherMenuItem.cjs +16 -16
- package/dist/Switcher/SwitcherMenuItem.cjs.map +1 -1
- package/dist/Switcher/SwitcherMenuItem.d.ts +9 -2
- package/dist/Switcher/SwitcherMenuItem.js +16 -10
- package/dist/Switcher/SwitcherMenuItem.js.map +1 -1
- package/dist/Table/Table.cjs +3 -3
- package/dist/Table/Table.cjs.map +1 -1
- package/dist/Table/Table.js +3 -3
- package/dist/Table/Table.js.map +1 -1
- package/dist/Table/TableBody.cjs +4 -2
- package/dist/Table/TableBody.cjs.map +1 -1
- package/dist/Table/TableBody.js +5 -3
- package/dist/Table/TableBody.js.map +1 -1
- package/dist/Table/TableFooter.cjs +5 -3
- package/dist/Table/TableFooter.cjs.map +1 -1
- package/dist/Table/TableFooter.js +5 -3
- package/dist/Table/TableFooter.js.map +1 -1
- package/dist/Table/TableStyles.cjs +17 -13
- package/dist/Table/TableStyles.cjs.map +1 -1
- package/dist/Table/TableStyles.d.ts +1 -0
- package/dist/Table/TableStyles.js +13 -12
- package/dist/Table/TableStyles.js.map +1 -1
- package/dist/Table/TableTypes.d.ts +4 -0
- package/dist/Tabs/HorizontalTabs.cjs +3 -1
- package/dist/Tabs/HorizontalTabs.cjs.map +1 -1
- package/dist/Tabs/HorizontalTabs.js +3 -1
- package/dist/Tabs/HorizontalTabs.js.map +1 -1
- package/dist/Tabs/__tests__/Tablist.tests.d.ts +2 -0
- package/dist/Tooltips/TooltipTypes.cjs.map +1 -1
- package/dist/Tooltips/TooltipTypes.d.ts +1 -1
- package/dist/Tooltips/TooltipTypes.js.map +1 -1
- package/dist/Tooltips/TooltipWrapper.cjs +19 -4
- package/dist/Tooltips/TooltipWrapper.cjs.map +1 -1
- package/dist/Tooltips/TooltipWrapper.d.ts +1 -1
- package/dist/Tooltips/TooltipWrapper.js +16 -4
- package/dist/Tooltips/TooltipWrapper.js.map +1 -1
- package/dist/index.cjs +14 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/types.cjs.map +1 -1
- package/dist/types.d.ts +0 -8
- package/dist/types.js.map +1 -1
- 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 ? '
|
|
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":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,cAAP,MAAkD,kBAAlD;AACA,OAAOC,iBAAP,MAAwD,qBAAxD;AACA,OAAOC,iBAAP,MAAwD,qBAAxD;AACA,SAAQC,UAAR,EAAoBC,MAApB,EAA4BC,yBAA5B,EAAuDC,WAAvD,EAAoEC,eAApE,QAA0F,aAA1F;;;AAEA,OAAO,IAAMC,qBAAqB,GAAGT,MAAM,CAACU,GAAV,0UACZL,MAAM,CAACM,KADK,EAWhBP,UAAU,CAACQ,YAXK,EAeVP,MAAM,CAACQ,WAfG,CAA3B;AAoBP,OAAO,IAAMC,OAAO,GAAGd,MAAM,CAACU,GAAV,
|
|
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":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,cAAP,MAAkD,kBAAlD;AACA,OAAOC,iBAAP,MAAwD,qBAAxD;AACA,OAAOC,iBAAP,MAAwD,qBAAxD;AACA,SAAQC,UAAR,EAAoBC,MAApB,EAA4BC,yBAA5B,EAAuDC,WAAvD,EAAoEC,eAApE,QAA0F,aAA1F;;;AAEA,OAAO,IAAMC,qBAAqB,GAAGT,MAAM,CAACU,GAAV,0UACZL,MAAM,CAACM,KADK,EAWhBP,UAAU,CAACQ,YAXK,EAeVP,MAAM,CAACQ,WAfG,CAA3B;AAoBP,OAAO,IAAMC,OAAO,GAAGd,MAAM,CAACU,GAAV,6uBAKdH,WALc,EAYZE,qBAZY,EAcUJ,MAAM,CAACU,UAdjB,EAkBUV,MAAM,CAACW,WAlBjB,EAwBZP,qBAxBY,EA0BIL,UAAU,CAACa,YA1Bf,EA8BIb,UAAU,CAACc,YA9Bf,EAsCdT,qBAtCc,EAuCMJ,MAAM,CAACc,WAvCb,CAAb;;AAsDP,IAAMC,IAAwC,GAAG,SAA3CA,IAA2C,OAOkB;AAAA,MANfC,aAMe,QANfA,aAMe;AAAA,MALfC,eAKe,QALfA,eAKe;AAAA,MAJfC,kBAIe,QAJfA,kBAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,QAEe,QAFfA,QAEe;AAAA,0BADfC,OACe;AAAA,MADfA,OACe,6BADL,UACK;;AAGjE,wBAAsC3B,KAAK,CAAC4B,QAAN,CAA+C,EAA/C,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AACA,MAAMC,WAAW,GAAI/B,KAAK,CAACgC,MAAN,CAA6B,IAA7B,CAArB;AACA,MAAMC,YAAY,GAAGjC,KAAK,CAACgC,MAAN,CAA6B,IAA7B,CAArB;AAEAvB,EAAAA,eAAe,CAACwB,YAAD,+BAAmBJ,WAAnB,IAAgCE,WAAhC,GAAf;AAEA,MAAMG,GAAG,aAAM,CAAC,CAACZ,aAAF,GAAkB,aAAlB,GAAkC,EAAxC,cAA8CI,QAAQ,GAAG,UAAH,GAAgB,EAAtE,cAA4EC,OAA5E,CAAT;AAEA,sBAEE,KAAC,OAAD;AAAS,IAAA,GAAG,EAAEM,YAAd;AACS,IAAA,SAAS,EAAEC,GADpB;AAES,IAAA,QAAQ,EAAE,CAAC,CAACZ,aAAF,IAAmB,CAACI,QAApB,GAA+B,CAA/B,GAAmC,CAAC,CAFvD;AAGS,IAAA,WAAW,EAAEnB,yBAHtB;AAIS,IAAA,SAAS,EAAE,mBAAA4B,CAAC;AAAA,aAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACV,QAAtB,IAAkCJ,aAAlC,IAAmDA,aAAa,EAApE;AAAA,KAJrB;AAKS,IAAA,OAAO,EAAE,iBAAAe,CAAC;AAAA,aAAI,CAACX,QAAD,IAAaJ,aAAb,IAA8BA,aAAa,EAA/C;AAAA,KALnB;AAMS,mBAAa,cANtB;AAAA,2BAOE,MAAC,qBAAD;AAAA,iBAEIC,eAAe,iBACf,KAAC,cAAD;AAAgB,QAAA,GAAG,EAAEQ;AAArB,SACMR,eADN;AACuB,QAAA,QAAQ,EAAEG;AADjC,SAHJ,EAOIF,kBAAkB,iBAClB,KAAC,iBAAD,kCAAuBA,kBAAvB;AAA2C,QAAA,QAAQ,EAAEE;AAArD,SARJ,EAWID,kBAAkB,iBAClB,KAAC,iBAAD;AAAmB,QAAA,GAAG,EAAE,aAAAa,QAAQ;AAAA,iBAAIR,cAAc,CAACQ,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,EAAb,CAAlB;AAAA;AAAhC,SACuBb,kBADvB;AAC2C,QAAA,QAAQ,EAAEC;AADrD,SAZJ;AAAA;AAPF,IAFF;AA4BD,CA9CD;;;AAREJ,EAAAA,a;AACAI,EAAAA,Q;AAIAC,EAAAA,O,aAAU,S,EAAY,U;;AAmDxB,eAAeN,IAAf","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)(
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
children: /*#__PURE__*/(0, _jsxRuntime.
|
|
57
|
-
children: /*#__PURE__*/(0, _jsxRuntime.
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
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;;
|
|
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"}
|
package/dist/Chips/ActionChip.js
CHANGED
|
@@ -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(
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
children: /*#__PURE__*/
|
|
46
|
-
children: /*#__PURE__*/
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
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
|
|
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
|
|
6
|
+
size?: Size;
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
}
|
|
9
9
|
export interface InputChipProps extends ChipProps {
|
|
10
10
|
text: string;
|
|
11
|
-
variant
|
|
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
|
|
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;;;;;;;;
|
|
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,
|
|
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)(
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
children: /*#__PURE__*/(0, _jsxRuntime.
|
|
57
|
-
children: /*#__PURE__*/(0, _jsxRuntime.
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
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;;
|
|
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"}
|
package/dist/Chips/FilterChip.js
CHANGED
|
@@ -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(
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
children: /*#__PURE__*/
|
|
46
|
-
children: /*#__PURE__*/
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
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
|
|
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"}
|