@popsure/dirty-swan 0.53.3 → 0.53.4
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/cjs/index.js +4 -5
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/accordion/index.js +2 -3
- package/dist/esm/components/accordion/index.js.map +1 -1
- package/dist/esm/components/comparisonTable/index.js +2 -2
- package/dist/esm/components/comparisonTable/index.js.map +1 -1
- package/dist/esm/components/comparisonTable/index.stories.js +1 -1
- package/dist/esm/components/comparisonTable/index.stories.js.map +1 -1
- package/package.json +1 -1
- package/src/lib/components/accordion/index.tsx +0 -1
- package/src/lib/components/accordion/style.module.scss +0 -4
- package/src/lib/components/comparisonTable/index.stories.tsx +1 -1
- package/src/lib/components/comparisonTable/index.tsx +1 -1
|
@@ -9,8 +9,8 @@ import { Card } from '../cards/card/index.js';
|
|
|
9
9
|
import '../icon/IconWrapper/IconWrapper.js';
|
|
10
10
|
import '../icon/icons/ChevronRight.js';
|
|
11
11
|
|
|
12
|
-
var css_248z = ".style-module_wrapperBordered__1BsXF {\n border: 1px solid #ededf2;\n}\n\n.style-module_container__37ni0 {\n border-bottom: 1px solid #ededf2;\n}\n.style-module_containerBordered__2IHWI:last-of-type {\n border-bottom: 0;\n}\n\n.style-module_question__2bC30 {\n color: #4c4c53;\n}\n\n.style-module_chevron__2nixo {\n color: #4c4c53;\n transition: transform 0.3s ease-in-out;\n}\n.style-module_chevronOpen__1nFZj {\n transform: rotate(180deg);\n}\n\n.style-module_answerIcon__Pugpz {\n padding-left: 20px;\n}\n.style-module_answerIconDefault__2myqw {\n padding-left: 4px;\n}\n\n.style-module_buttonWrapper__2A5FG {\n background-color: transparent !important;\n color: #8e8cee;\n outline-offset: -4px;\n}\n.style-module_buttonWrapperDefault__2DCgb {\n outline-offset: 0;\n}\n.style-
|
|
13
|
-
var styles = {"wrapperBordered":"style-module_wrapperBordered__1BsXF","container":"style-module_container__37ni0","containerBordered":"style-module_containerBordered__2IHWI","question":"style-module_question__2bC30","chevron":"style-module_chevron__2nixo","chevronOpen":"style-module_chevronOpen__1nFZj","answerIcon":"style-module_answerIcon__Pugpz","answerIconDefault":"style-module_answerIconDefault__2myqw","buttonWrapper":"style-module_buttonWrapper__2A5FG","buttonWrapperDefault":"style-module_buttonWrapperDefault__2DCgb","
|
|
12
|
+
var css_248z = ".style-module_wrapperBordered__1BsXF {\n border: 1px solid #ededf2;\n}\n\n.style-module_container__37ni0 {\n border-bottom: 1px solid #ededf2;\n}\n.style-module_containerBordered__2IHWI:last-of-type {\n border-bottom: 0;\n}\n\n.style-module_question__2bC30 {\n color: #4c4c53;\n}\n\n.style-module_chevron__2nixo {\n color: #4c4c53;\n transition: transform 0.3s ease-in-out;\n}\n.style-module_chevronOpen__1nFZj {\n transform: rotate(180deg);\n}\n\n.style-module_answerIcon__Pugpz {\n padding-left: 20px;\n}\n.style-module_answerIconDefault__2myqw {\n padding-left: 4px;\n}\n\n.style-module_buttonWrapper__2A5FG {\n background-color: transparent !important;\n color: #8e8cee;\n outline-offset: -4px;\n}\n.style-module_buttonWrapperDefault__2DCgb {\n outline-offset: 0;\n}\n.style-module_buttonWrapper__2A5FG:hover, .style-module_buttonWrapper__2A5FG:focus-visible {\n background: #f7f7ff;\n}\n.style-module_buttonWrapper__2A5FG:hover .style-module_icon__jyQp0, .style-module_buttonWrapper__2A5FG:focus-visible .style-module_icon__jyQp0 {\n color: #8e8cee !important;\n}\n.style-module_buttonWrapper__2A5FG:hover .style-module_question__2bC30,\n.style-module_buttonWrapper__2A5FG:hover .style-module_chevron__2nixo, .style-module_buttonWrapper__2A5FG:focus-visible .style-module_question__2bC30,\n.style-module_buttonWrapper__2A5FG:focus-visible .style-module_chevron__2nixo {\n color: #8e8cee;\n}\n.style-module_buttonWrapper__2A5FG:hover {\n outline: 0 solid transparent !important;\n}\n.style-module_buttonWrapper__2A5FG:focus-visible {\n outline: 2px solid #8e8cee !important;\n}";
|
|
13
|
+
var styles = {"wrapperBordered":"style-module_wrapperBordered__1BsXF","container":"style-module_container__37ni0","containerBordered":"style-module_containerBordered__2IHWI","question":"style-module_question__2bC30","chevron":"style-module_chevron__2nixo","chevronOpen":"style-module_chevronOpen__1nFZj","answerIcon":"style-module_answerIcon__Pugpz","answerIconDefault":"style-module_answerIconDefault__2myqw","buttonWrapper":"style-module_buttonWrapper__2A5FG","buttonWrapperDefault":"style-module_buttonWrapperDefault__2DCgb","icon":"style-module_icon__jyQp0"};
|
|
14
14
|
styleInject(css_248z);
|
|
15
15
|
|
|
16
16
|
var Accordion = function (_a) {
|
|
@@ -46,7 +46,6 @@ var Accordion = function (_a) {
|
|
|
46
46
|
var isOpen = selectedQuestionId.includes(id);
|
|
47
47
|
return (jsxs("div", { className: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.questionWrapper, styles.container, (_a = {}, _a[styles.containerBordered] = !isDefaultVariant, _a)), children: [jsx(Card, { title: question, titleVariant: "small", density: 'compact', icon: icon, classNames: __assign({ icon: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.icon, styles.icon, 'tc-grey-700'), buttonWrapper: classNames('py8 my8', classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.buttonWrapper, styles.buttonWrapper, (_b = {},
|
|
48
48
|
_b[styles.buttonWrapperDefault] = isDefaultVariant,
|
|
49
|
-
_b[styles.buttonWrapperOpen] = isOpen,
|
|
50
49
|
_b)), wrapper: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.wrapper, 'bg-transparent br0 py0', { 'pl0': isDefaultVariant }), title: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.question, styles.question, 'fw-bold', (_c = {}, _c[styles.questionOpen] = isOpen, _c)) }, classNames$1), dropShadow: false, onClick: function () { return handleClick(questionData); }, "aria-expanded": isOpen, actionIcon: jsx(ChevronDownIcon, { className: classNames(styles.chevron, (_d = {},
|
|
51
50
|
_d[styles.chevronOpen] = isOpen,
|
|
52
51
|
_d)), size: 20, noMargin: true }) }), jsx(AnimateHeight, { duration: 300, height: isOpen ? 'auto' : 0, children: jsx("div", { className: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.answer, 'tc-grey-600 pr16 pb24', (_e = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/accordion/index.tsx"],"sourcesContent":["import classnamesUtil from 'classnames';\nimport { ReactNode, useCallback, useState } from 'react';\nimport AnimateHeight from 'react-animate-height';\n\nimport styles from './style.module.scss';\nimport { ChevronDownIcon } from '../icon';\nimport { Card } from '../cards/card';\n\nexport interface AccordionItem {\n id: string;\n question: string;\n icon?: ReactNode;\n answer: ReactNode;\n}\n\nexport interface AccordionProps {\n items: AccordionItem[];\n classNames?: {\n questionWrapper?: string;\n buttonWrapper?: string;\n wrapper?: string;\n question?: string;\n answer?: string;\n icon?: string;\n markdown?: string;\n };\n multiple?: boolean;\n onClick?: (item: AccordionItem) => void;\n variant?: 'default' | 'bordered';\n};\n\nconst Accordion = ({\n items = [],\n classNames = {},\n variant = 'default',\n multiple = false,\n onClick,\n}: AccordionProps) => {\n const [selectedQuestionId, setSelectedQuestionId] = useState<(string[])>([]);\n const isDefaultVariant = variant === 'default';\n\n const handleClick = useCallback((questionData: AccordionItem) => {\n const { id } = questionData;\n if (selectedQuestionId.includes(id)) {\n if (!multiple) {\n setSelectedQuestionId([]);\n return\n }\n\n setSelectedQuestionId((selectedItems) => \n selectedItems.filter((selectedId) => selectedId !== id)\n );\n } else {\n onClick?.(questionData);\n setSelectedQuestionId((selectedIds) => [\n id, ...multiple ? selectedIds : [],\n ]);\n }\n }, [multiple, onClick, selectedQuestionId]);\n\n return (\n <div\n className={\n classnamesUtil(\n {\n 'br8': !isDefaultVariant,\n [styles.wrapperBordered]: !isDefaultVariant,\n }\n )\n }\n >\n {items.map((questionData) => {\n const { question, answer, id, icon } = questionData;\n const isOpen = selectedQuestionId.includes(id);\n\n return (\n <div\n key={id}\n className={classnamesUtil(\n classNames?.questionWrapper,\n styles.container,\n { [styles.containerBordered]: !isDefaultVariant }\n )}\n >\n <Card\n title={question}\n titleVariant=\"small\"\n density='compact'\n icon={icon}\n classNames={{\n icon: classnamesUtil(\n classNames?.icon,\n styles.icon,\n 'tc-grey-700',\n ),\n buttonWrapper: classnamesUtil(\n 'py8 my8',\n classNames?.buttonWrapper,\n styles.buttonWrapper, {\n [styles.buttonWrapperDefault]: isDefaultVariant,\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/accordion/index.tsx"],"sourcesContent":["import classnamesUtil from 'classnames';\nimport { ReactNode, useCallback, useState } from 'react';\nimport AnimateHeight from 'react-animate-height';\n\nimport styles from './style.module.scss';\nimport { ChevronDownIcon } from '../icon';\nimport { Card } from '../cards/card';\n\nexport interface AccordionItem {\n id: string;\n question: string;\n icon?: ReactNode;\n answer: ReactNode;\n}\n\nexport interface AccordionProps {\n items: AccordionItem[];\n classNames?: {\n questionWrapper?: string;\n buttonWrapper?: string;\n wrapper?: string;\n question?: string;\n answer?: string;\n icon?: string;\n markdown?: string;\n };\n multiple?: boolean;\n onClick?: (item: AccordionItem) => void;\n variant?: 'default' | 'bordered';\n};\n\nconst Accordion = ({\n items = [],\n classNames = {},\n variant = 'default',\n multiple = false,\n onClick,\n}: AccordionProps) => {\n const [selectedQuestionId, setSelectedQuestionId] = useState<(string[])>([]);\n const isDefaultVariant = variant === 'default';\n\n const handleClick = useCallback((questionData: AccordionItem) => {\n const { id } = questionData;\n if (selectedQuestionId.includes(id)) {\n if (!multiple) {\n setSelectedQuestionId([]);\n return\n }\n\n setSelectedQuestionId((selectedItems) => \n selectedItems.filter((selectedId) => selectedId !== id)\n );\n } else {\n onClick?.(questionData);\n setSelectedQuestionId((selectedIds) => [\n id, ...multiple ? selectedIds : [],\n ]);\n }\n }, [multiple, onClick, selectedQuestionId]);\n\n return (\n <div\n className={\n classnamesUtil(\n {\n 'br8': !isDefaultVariant,\n [styles.wrapperBordered]: !isDefaultVariant,\n }\n )\n }\n >\n {items.map((questionData) => {\n const { question, answer, id, icon } = questionData;\n const isOpen = selectedQuestionId.includes(id);\n\n return (\n <div\n key={id}\n className={classnamesUtil(\n classNames?.questionWrapper,\n styles.container,\n { [styles.containerBordered]: !isDefaultVariant }\n )}\n >\n <Card\n title={question}\n titleVariant=\"small\"\n density='compact'\n icon={icon}\n classNames={{\n icon: classnamesUtil(\n classNames?.icon,\n styles.icon,\n 'tc-grey-700',\n ),\n buttonWrapper: classnamesUtil(\n 'py8 my8',\n classNames?.buttonWrapper,\n styles.buttonWrapper, {\n [styles.buttonWrapperDefault]: isDefaultVariant,\n },\n ),\n wrapper: classnamesUtil(\n classNames?.wrapper,\n 'bg-transparent br0 py0',\n { 'pl0': isDefaultVariant },\n ),\n title: classnamesUtil(\n classNames?.question,\n styles.question,\n 'fw-bold', \n { [styles.questionOpen]: isOpen }\n ),\n ...classNames,\n }}\n dropShadow={false}\n onClick={() => handleClick(questionData)}\n aria-expanded={isOpen}\n actionIcon={\n <ChevronDownIcon\n className={classnamesUtil(styles.chevron, {\n [styles.chevronOpen]: isOpen\n })}\n size={20}\n noMargin\n />\n }\n />\n\n <AnimateHeight\n duration={300}\n height={isOpen ? 'auto' : 0}\n >\n <div \n className={classnamesUtil(\n classNames?.answer,\n 'tc-grey-600 pr16 pb24', \n { \n 'pl16': !isDefaultVariant,\n [styles?.answerIcon]: !isDefaultVariant && icon,\n [styles?.answerIconDefault]: isDefaultVariant && icon,\n },\n )}\n >\n {answer}\n </div>\n </AnimateHeight>\n </div>\n );\n })}\n </div>\n );\n};\n\nexport { Accordion };"],"names":["classNames","_jsx","classnamesUtil","_jsxs"],"mappings":"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"}
|
|
@@ -1667,8 +1667,8 @@ styleInject(css_248z);
|
|
|
1667
1667
|
|
|
1668
1668
|
var ComparisonTable = function (props) {
|
|
1669
1669
|
var _a;
|
|
1670
|
-
var headers = props.headers, data = props.data, hideDetails = props.hideDetails, _b = props.hideDetailsCaption, hideDetailsCaption = _b === void 0 ? 'Hide details' : _b, _c = props.showDetailsCaption, showDetailsCaption = _c === void 0 ? 'Show details' : _c, classNameOverrides = props.classNameOverrides, hideScrollBars = props.hideScrollBars,
|
|
1671
|
-
var
|
|
1670
|
+
var headers = props.headers, data = props.data, hideDetails = props.hideDetails, _b = props.hideDetailsCaption, hideDetailsCaption = _b === void 0 ? 'Hide details' : _b, _c = props.showDetailsCaption, showDetailsCaption = _c === void 0 ? 'Show details' : _c, classNameOverrides = props.classNameOverrides, hideScrollBars = props.hideScrollBars, _d = props.hideScrollBarsMobile, hideScrollBarsMobile = _d === void 0 ? true : _d, collapsibleSections = props.collapsibleSections, cellWidth = props.cellWidth, firstColumnWidth = props.firstColumnWidth, stickyHeaderTopOffset = props.stickyHeaderTopOffset, growContent = props.growContent, onSelectionChanged = props.onSelectionChanged;
|
|
1671
|
+
var _e = useComparisonTable({ onSelectionChanged: onSelectionChanged }), headerWidth = _e.headerWidth, headerId = _e.headerId, contentContainerRef = _e.contentContainerRef, selectedSection = _e.selectedSection, setSelectedSection = _e.setSelectedSection, selectedTabIndex = _e.selectedTabIndex, headerRefCallbackRef = _e.headerRefCallbackRef, handleArrowsClick = _e.handleArrowsClick, toggleMoreRows = _e.toggleMoreRows, showMore = _e.showMore;
|
|
1672
1672
|
var cssVariablesStyle = __assign(__assign(__assign(__assign({ '--tableWidth': "".concat(headerWidth, "px") }, (cellWidth ? { '--cellWidth': "".concat(cellWidth, "px") } : {})), (firstColumnWidth
|
|
1673
1673
|
? { '--firstColumnWidth': "".concat(firstColumnWidth, "px") }
|
|
1674
1674
|
: {})), (stickyHeaderTopOffset
|