etudes 3.1.0 → 3.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/Accordion.js +3 -2
- package/lib/Accordion.js.map +1 -1
- package/lib/Dropdown.js +3 -2
- package/lib/Dropdown.js.map +1 -1
- package/package.json +1 -1
package/lib/Accordion.js
CHANGED
|
@@ -179,6 +179,7 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
179
179
|
fontWeight: 'inherit',
|
|
180
180
|
letterSpacing: 'inherit',
|
|
181
181
|
lineHeight: 'inherit',
|
|
182
|
+
pointerEvents: 'none',
|
|
182
183
|
transition: 'inherit',
|
|
183
184
|
},
|
|
184
185
|
expandIcon: {
|
|
@@ -250,13 +251,13 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
250
251
|
}),
|
|
251
252
|
style: (0, styles_1.default)(fixedStyles.header),
|
|
252
253
|
onClick: function () { return toggleSectionAt(sectionIdx); },
|
|
253
|
-
}], [
|
|
254
|
+
}], __read(components.header ? [] : [
|
|
254
255
|
react_1.default.createElement("label", { style: fixedStyles.headerLabel, dangerouslySetInnerHTML: { __html: section.label } }),
|
|
255
256
|
(0, cloneStyledElement_1.default)(isCollapsed ? expandIconComponent : collapseIconComponent, {
|
|
256
257
|
className: (0, classnames_1.default)(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),
|
|
257
258
|
style: (0, styles_1.default)(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),
|
|
258
259
|
}),
|
|
259
|
-
], false)),
|
|
260
|
+
]), false)),
|
|
260
261
|
react_1.default.createElement(List_1.default, { style: (0, styles_1.default)(fixedStyles.list, orientation === 'vertical' ? {
|
|
261
262
|
height: isCollapsed ? '0px' : "".concat(menuLength, "px"),
|
|
262
263
|
marginTop: isCollapsed ? '0px' : "".concat(itemPadding - borderThickness, "px"),
|
package/lib/Accordion.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport isEqual from 'fast-deep-equal'\nimport React, { forwardRef, useEffect, useState, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport Each from './Each'\nimport FlatSVG from './FlatSVG'\nimport List, { type ListItemProps, type ListProps } from './List'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type AccordionItemProps<T> = ListItemProps<T>\n\nexport type AccordionSectionData<T> = {\n label: string\n items: T[]\n}\n\nexport type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & Omit<ListProps<T>, 'data' | 'itemComponentType' | 'selectedIndices' | 'onActivateAt' | 'onSelectAt' | 'onDeselectAt'> & PropsWithChildren<{\n /**\n * Specifies if expanded sections should automatically collapse upon expanding\n * another section.\n */\n autoCollapse?: boolean\n\n /**\n * Data provided to each section.\n */\n data: AccordionSectionData<T>[]\n\n /**\n * Indices of sections that are expanded.\n */\n expandedSectionIndices?: number[]\n\n /**\n * Indices of selected items per section.\n */\n selectedItemIndices?: Record<number, number[]>\n\n /**\n * Padding (in pixels) between each section.\n */\n sectionPadding?: number\n\n /**\n * Maximum number of items that are viside when a section expands. When a\n * value greater than or equal to 0 is specified, only that number of items\n * will be visible at a time, and a scrollbar will appear to scroll to\n * remaining items. Any value less than 0 indicates that all items will be\n * visible when a section expands.\n */\n maxVisibleItems?: number\n\n /**\n * SVG markup to be put in the section header as the expand icon.\n */\n expandIconSvg?: string\n\n /**\n * SVG markup to be put in the section header as the collapse icon.\n */\n collapseIconSvg?: string\n\n /**\n * React component type to be used for generating items inside the component.\n */\n itemComponentType: ComponentType<AccordionItemProps<T>>\n\n /**\n * Handler invoked when a section is expanded.\n *\n * @param sectionIndex Section index.\n */\n onExpandSectionAt?: (sectionIndex: number) => void\n\n /**\n * Handler invoked when a section is collapsed.\n *\n * @param sectionIndex Section index.\n */\n onCollapseSectionAt?: (sectionIndex: number) => void\n\n /**\n * Handler invoked when an item is activated in a section.\n *\n * @param sectionIndex Section index.\n * @param itemIndex Item index.\n */\n onActivateAt?: (sectionIndex: number, itemIndex: number) => void\n\n /**\n * Handler invoked when an item is selected in a section.\n *\n * @param sectionIndex Section index.\n * @param itemIndex Item index.\n */\n onSelectAt?: (sectionIndex: number, itemIndex: number) => void\n\n /**\n * Handler invoked when an item is deselected in a section.\n *\n * @param sectionIndex Section index.\n * @param itemIndex Item index.\n */\n onDeselectAt?: (sectionIndex: number, itemIndex: number) => void\n\n /**\n * Handler invoked when selected items have changed.\n *\n * @param selectedIndices Dictionary of indices of selected items per section.\n */\n onSelectionChange?: (selectedIndices: Record<number, number[]>) => void\n}>\n\nexport default forwardRef(({\n children,\n className,\n style,\n autoCollapse = false,\n borderThickness = 0,\n collapseIconSvg,\n data,\n expandedSectionIndices: externalExpandedSectionIndices = [],\n expandIconSvg,\n isTogglable,\n itemComponentType,\n itemLength = 50,\n itemPadding = 0,\n maxVisibleItems = -1,\n orientation = 'vertical',\n sectionPadding = 0,\n selectedItemIndices: externalSelectedItemIndices = {},\n selectionMode = 'single',\n onActivateAt,\n onSelectAt,\n onDeselectAt,\n onSelectionChange,\n ...props\n}, ref) => {\n const isSectionExpandedAt = (idx: number) => expandedSectionIndices.indexOf(idx) >= 0\n\n const toggleSectionAt = (idx: number) => {\n if (isSectionExpandedAt(idx)) {\n setExpandedSectionIndices(prev => prev.filter(t => t !== idx))\n }\n else if (autoCollapse) {\n setExpandedSectionIndices([idx])\n }\n else {\n setExpandedSectionIndices(prev => [...prev.filter(t => t !== idx), idx])\n }\n }\n\n const selectAt = (sectionIdx: number, itemIdx: number) => {\n switch (selectionMode) {\n case 'multiple':\n setSelectedItemIndices(prev => ({\n ...prev,\n [sectionIdx]: [...(prev[sectionIdx] ?? []).filter(t => t !== itemIdx), itemIdx],\n }))\n\n onSelectAt?.(sectionIdx, itemIdx)\n\n break\n case 'single':\n setSelectedItemIndices({ [sectionIdx]: [itemIdx] })\n onSelectAt?.(sectionIdx, itemIdx)\n\n break\n default:\n break\n }\n }\n\n const deselectAt = (sectionIdx: number, itemIdx: number) => {\n setSelectedItemIndices(prev => ({\n ...prev,\n [sectionIdx]: (prev[sectionIdx] ?? []).filter(t => t !== itemIdx),\n }))\n\n onDeselectAt?.(sectionIdx, itemIdx)\n }\n\n const [expandedSectionIndices, setExpandedSectionIndices] = useState(externalExpandedSectionIndices)\n const [selectedItemIndices, setSelectedItemIndices] = useState(externalSelectedItemIndices)\n\n useEffect(() => {\n if (isEqual(expandedSectionIndices, expandedSectionIndices)) return\n\n setExpandedSectionIndices(externalExpandedSectionIndices)\n }, [JSON.stringify(externalExpandedSectionIndices)])\n\n useEffect(() => {\n if (isEqual(externalSelectedItemIndices, selectedItemIndices)) return\n\n setSelectedItemIndices(externalSelectedItemIndices)\n }, [JSON.stringify(externalSelectedItemIndices)])\n\n useEffect(() => {\n onSelectionChange?.(selectedItemIndices)\n }, [JSON.stringify(selectedItemIndices)])\n\n const components = asComponentDict(children, {\n header: AccordionHeader,\n expandIcon: AccordionExpandIcon,\n collapseIcon: AccordionCollapseIcon,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation),\n header: classNames(orientation),\n expandIcon: classNames(orientation),\n collapseIcon: classNames(orientation),\n })\n\n const fixedStyles = asStyleDict({\n root: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flex: '0 0 auto',\n justifyContent: 'flex-start',\n padding: '0',\n ...orientation === 'vertical' ? {\n flexDirection: 'column',\n height: 'auto',\n } : {\n flexDirection: 'row',\n width: 'auto',\n },\n },\n section: {\n alignItems: 'flex-start',\n display: 'flex',\n flex: '0 0 auto',\n justifyContent: 'flex-start',\n margin: '0',\n padding: '0',\n ...orientation === 'vertical' ? {\n flexDirection: 'column',\n width: '100%',\n } : {\n flexDirection: 'row',\n height: '100%',\n },\n },\n header: {\n borderWidth: `${borderThickness}px`,\n margin: '0',\n outline: 'none',\n ...orientation === 'vertical' ? {\n width: '100%',\n } : {\n height: '100%',\n },\n },\n headerLabel: {\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n letterSpacing: 'inherit',\n lineHeight: 'inherit',\n transition: 'inherit',\n },\n expandIcon: {\n margin: '0',\n padding: '0',\n },\n collapseIcon: {\n margin: '0',\n padding: '0',\n },\n list: {\n transitionDuration: '100ms',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'vertical' ? {\n width: '100%',\n transitionProperty: 'height, margin',\n top: '100%',\n } : {\n height: '100%',\n transitionProperty: 'width, margin',\n left: '100%',\n },\n },\n })\n\n const defaultStyles = asStyleDict({\n header: {\n alignItems: 'center',\n background: '#fff',\n borderStyle: 'solid',\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n padding: '0 10px',\n transitionDuration: '100ms',\n transitionProperty: 'transform, opacity, background, color',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'vertical' ? {\n height: '50px',\n } : {\n width: '50px',\n },\n },\n expandIcon: {\n boxSizing: 'border-box',\n display: 'block',\n fill: '#000',\n height: '15px',\n transformOrigin: 'center',\n transitionDuration: '100ms',\n transitionProperty: 'transform',\n transitionTimingFunction: 'ease-out',\n width: '15px',\n },\n collapseIcon: {\n boxSizing: 'border-box',\n display: 'block',\n fill: '#000',\n height: '15px',\n transformOrigin: 'center',\n transitionDuration: '100ms',\n transitionProperty: 'transform',\n transitionTimingFunction: 'ease-out',\n width: '15px',\n },\n })\n\n return (\n <div\n {...props}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n <Each in={data}>\n {(section, sectionIdx) => {\n const numItems = section.items.length\n const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n const isCollapsed = !isSectionExpandedAt(sectionIdx)\n const headerComponent = components.header ?? <AccordionHeader style={defaultStyles.header}/>\n const expandIconComponent = components.expandIcon ?? (expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>)\n const collapseIconComponent = components.collapseIcon ?? (collapseIconSvg ? <FlatSVG svg={collapseIconSvg} style={defaultStyles.collapseIcon}/> : expandIconComponent)\n\n return (\n <div style={styles(fixedStyles.section, orientation === 'vertical' ? {\n marginTop: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n } : {\n marginLeft: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n })}>\n {cloneStyledElement(headerComponent, {\n className: classNames(fixedClassNames.header, {\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n style: styles(fixedStyles.header),\n onClick: () => toggleSectionAt(sectionIdx),\n }, ...[\n <label style={fixedStyles.headerLabel} dangerouslySetInnerHTML={{ __html: section.label }}/>,\n cloneStyledElement(isCollapsed ? expandIconComponent : collapseIconComponent, {\n className: classNames(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),\n style: styles(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),\n }),\n ])}\n <List\n style={styles(fixedStyles.list, orientation === 'vertical' ? {\n height: isCollapsed ? '0px' : `${menuLength}px`,\n marginTop: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n } : {\n marginLeft: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n width: isCollapsed ? '0px' : `${menuLength}px`,\n })}\n borderThickness={borderThickness}\n data={section.items}\n selectionMode={selectionMode}\n isTogglable={isTogglable}\n itemComponentType={itemComponentType}\n itemLength={itemLength}\n itemPadding={itemPadding}\n orientation={orientation}\n selectedIndices={selectedItemIndices[sectionIdx] ?? []}\n onActivateAt={itemIdx => onActivateAt?.(sectionIdx, itemIdx)}\n onDeselectAt={itemIdx => deselectAt(sectionIdx, itemIdx)}\n onSelectAt={itemIdx => selectAt(sectionIdx, itemIdx)}\n />\n </div>\n )\n }}\n </Each>\n </div>\n )\n}) as <T>(props: AccordionProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nexport const AccordionHeader = ({ children, ...props }: HTMLAttributes<HTMLButtonElement> & PropsWithChildren) => <button {...props}>{children}</button>\n\nexport const AccordionExpandIcon = ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => <div {...props}>{children}</div>\n\nexport const AccordionCollapseIcon = ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => <div {...props}>{children}</div>\n"]}
|
|
1
|
+
{"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport isEqual from 'fast-deep-equal'\nimport React, { forwardRef, useEffect, useState, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport Each from './Each'\nimport FlatSVG from './FlatSVG'\nimport List, { type ListItemProps, type ListProps } from './List'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type AccordionItemProps<T> = ListItemProps<T>\n\nexport type AccordionSectionData<T> = {\n label: string\n items: T[]\n}\n\nexport type AccordionProps<T> = HTMLAttributes<HTMLDivElement> & Omit<ListProps<T>, 'data' | 'itemComponentType' | 'selectedIndices' | 'onActivateAt' | 'onSelectAt' | 'onDeselectAt'> & PropsWithChildren<{\n /**\n * Specifies if expanded sections should automatically collapse upon expanding\n * another section.\n */\n autoCollapse?: boolean\n\n /**\n * Data provided to each section.\n */\n data: AccordionSectionData<T>[]\n\n /**\n * Indices of sections that are expanded.\n */\n expandedSectionIndices?: number[]\n\n /**\n * Indices of selected items per section.\n */\n selectedItemIndices?: Record<number, number[]>\n\n /**\n * Padding (in pixels) between each section.\n */\n sectionPadding?: number\n\n /**\n * Maximum number of items that are viside when a section expands. When a\n * value greater than or equal to 0 is specified, only that number of items\n * will be visible at a time, and a scrollbar will appear to scroll to\n * remaining items. Any value less than 0 indicates that all items will be\n * visible when a section expands.\n */\n maxVisibleItems?: number\n\n /**\n * SVG markup to be put in the section header as the expand icon.\n */\n expandIconSvg?: string\n\n /**\n * SVG markup to be put in the section header as the collapse icon.\n */\n collapseIconSvg?: string\n\n /**\n * React component type to be used for generating items inside the component.\n */\n itemComponentType: ComponentType<AccordionItemProps<T>>\n\n /**\n * Handler invoked when a section is expanded.\n *\n * @param sectionIndex Section index.\n */\n onExpandSectionAt?: (sectionIndex: number) => void\n\n /**\n * Handler invoked when a section is collapsed.\n *\n * @param sectionIndex Section index.\n */\n onCollapseSectionAt?: (sectionIndex: number) => void\n\n /**\n * Handler invoked when an item is activated in a section.\n *\n * @param sectionIndex Section index.\n * @param itemIndex Item index.\n */\n onActivateAt?: (sectionIndex: number, itemIndex: number) => void\n\n /**\n * Handler invoked when an item is selected in a section.\n *\n * @param sectionIndex Section index.\n * @param itemIndex Item index.\n */\n onSelectAt?: (sectionIndex: number, itemIndex: number) => void\n\n /**\n * Handler invoked when an item is deselected in a section.\n *\n * @param sectionIndex Section index.\n * @param itemIndex Item index.\n */\n onDeselectAt?: (sectionIndex: number, itemIndex: number) => void\n\n /**\n * Handler invoked when selected items have changed.\n *\n * @param selectedIndices Dictionary of indices of selected items per section.\n */\n onSelectionChange?: (selectedIndices: Record<number, number[]>) => void\n}>\n\nexport default forwardRef(({\n children,\n className,\n style,\n autoCollapse = false,\n borderThickness = 0,\n collapseIconSvg,\n data,\n expandedSectionIndices: externalExpandedSectionIndices = [],\n expandIconSvg,\n isTogglable,\n itemComponentType,\n itemLength = 50,\n itemPadding = 0,\n maxVisibleItems = -1,\n orientation = 'vertical',\n sectionPadding = 0,\n selectedItemIndices: externalSelectedItemIndices = {},\n selectionMode = 'single',\n onActivateAt,\n onSelectAt,\n onDeselectAt,\n onSelectionChange,\n ...props\n}, ref) => {\n const isSectionExpandedAt = (idx: number) => expandedSectionIndices.indexOf(idx) >= 0\n\n const toggleSectionAt = (idx: number) => {\n if (isSectionExpandedAt(idx)) {\n setExpandedSectionIndices(prev => prev.filter(t => t !== idx))\n }\n else if (autoCollapse) {\n setExpandedSectionIndices([idx])\n }\n else {\n setExpandedSectionIndices(prev => [...prev.filter(t => t !== idx), idx])\n }\n }\n\n const selectAt = (sectionIdx: number, itemIdx: number) => {\n switch (selectionMode) {\n case 'multiple':\n setSelectedItemIndices(prev => ({\n ...prev,\n [sectionIdx]: [...(prev[sectionIdx] ?? []).filter(t => t !== itemIdx), itemIdx],\n }))\n\n onSelectAt?.(sectionIdx, itemIdx)\n\n break\n case 'single':\n setSelectedItemIndices({ [sectionIdx]: [itemIdx] })\n onSelectAt?.(sectionIdx, itemIdx)\n\n break\n default:\n break\n }\n }\n\n const deselectAt = (sectionIdx: number, itemIdx: number) => {\n setSelectedItemIndices(prev => ({\n ...prev,\n [sectionIdx]: (prev[sectionIdx] ?? []).filter(t => t !== itemIdx),\n }))\n\n onDeselectAt?.(sectionIdx, itemIdx)\n }\n\n const [expandedSectionIndices, setExpandedSectionIndices] = useState(externalExpandedSectionIndices)\n const [selectedItemIndices, setSelectedItemIndices] = useState(externalSelectedItemIndices)\n\n useEffect(() => {\n if (isEqual(expandedSectionIndices, expandedSectionIndices)) return\n\n setExpandedSectionIndices(externalExpandedSectionIndices)\n }, [JSON.stringify(externalExpandedSectionIndices)])\n\n useEffect(() => {\n if (isEqual(externalSelectedItemIndices, selectedItemIndices)) return\n\n setSelectedItemIndices(externalSelectedItemIndices)\n }, [JSON.stringify(externalSelectedItemIndices)])\n\n useEffect(() => {\n onSelectionChange?.(selectedItemIndices)\n }, [JSON.stringify(selectedItemIndices)])\n\n const components = asComponentDict(children, {\n header: AccordionHeader,\n expandIcon: AccordionExpandIcon,\n collapseIcon: AccordionCollapseIcon,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation),\n header: classNames(orientation),\n expandIcon: classNames(orientation),\n collapseIcon: classNames(orientation),\n })\n\n const fixedStyles = asStyleDict({\n root: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flex: '0 0 auto',\n justifyContent: 'flex-start',\n padding: '0',\n ...orientation === 'vertical' ? {\n flexDirection: 'column',\n height: 'auto',\n } : {\n flexDirection: 'row',\n width: 'auto',\n },\n },\n section: {\n alignItems: 'flex-start',\n display: 'flex',\n flex: '0 0 auto',\n justifyContent: 'flex-start',\n margin: '0',\n padding: '0',\n ...orientation === 'vertical' ? {\n flexDirection: 'column',\n width: '100%',\n } : {\n flexDirection: 'row',\n height: '100%',\n },\n },\n header: {\n borderWidth: `${borderThickness}px`,\n margin: '0',\n outline: 'none',\n ...orientation === 'vertical' ? {\n width: '100%',\n } : {\n height: '100%',\n },\n },\n headerLabel: {\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n letterSpacing: 'inherit',\n lineHeight: 'inherit',\n pointerEvents: 'none',\n transition: 'inherit',\n },\n expandIcon: {\n margin: '0',\n padding: '0',\n },\n collapseIcon: {\n margin: '0',\n padding: '0',\n },\n list: {\n transitionDuration: '100ms',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'vertical' ? {\n width: '100%',\n transitionProperty: 'height, margin',\n top: '100%',\n } : {\n height: '100%',\n transitionProperty: 'width, margin',\n left: '100%',\n },\n },\n })\n\n const defaultStyles = asStyleDict({\n header: {\n alignItems: 'center',\n background: '#fff',\n borderStyle: 'solid',\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n padding: '0 10px',\n transitionDuration: '100ms',\n transitionProperty: 'transform, opacity, background, color',\n transitionTimingFunction: 'ease-out',\n ...orientation === 'vertical' ? {\n height: '50px',\n } : {\n width: '50px',\n },\n },\n expandIcon: {\n boxSizing: 'border-box',\n display: 'block',\n fill: '#000',\n height: '15px',\n transformOrigin: 'center',\n transitionDuration: '100ms',\n transitionProperty: 'transform',\n transitionTimingFunction: 'ease-out',\n width: '15px',\n },\n collapseIcon: {\n boxSizing: 'border-box',\n display: 'block',\n fill: '#000',\n height: '15px',\n transformOrigin: 'center',\n transitionDuration: '100ms',\n transitionProperty: 'transform',\n transitionTimingFunction: 'ease-out',\n width: '15px',\n },\n })\n\n return (\n <div\n {...props}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n <Each in={data}>\n {(section, sectionIdx) => {\n const numItems = section.items.length\n const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n const isCollapsed = !isSectionExpandedAt(sectionIdx)\n const headerComponent = components.header ?? <AccordionHeader style={defaultStyles.header}/>\n const expandIconComponent = components.expandIcon ?? (expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>)\n const collapseIconComponent = components.collapseIcon ?? (collapseIconSvg ? <FlatSVG svg={collapseIconSvg} style={defaultStyles.collapseIcon}/> : expandIconComponent)\n\n return (\n <div style={styles(fixedStyles.section, orientation === 'vertical' ? {\n marginTop: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n } : {\n marginLeft: sectionIdx === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n })}>\n {cloneStyledElement(headerComponent, {\n className: classNames(fixedClassNames.header, {\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n style: styles(fixedStyles.header),\n onClick: () => toggleSectionAt(sectionIdx),\n }, ...components.header ? [] : [\n <label style={fixedStyles.headerLabel} dangerouslySetInnerHTML={{ __html: section.label }}/>,\n cloneStyledElement(isCollapsed ? expandIconComponent : collapseIconComponent, {\n className: classNames(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),\n style: styles(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),\n }),\n ])}\n <List\n style={styles(fixedStyles.list, orientation === 'vertical' ? {\n height: isCollapsed ? '0px' : `${menuLength}px`,\n marginTop: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n } : {\n marginLeft: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n width: isCollapsed ? '0px' : `${menuLength}px`,\n })}\n borderThickness={borderThickness}\n data={section.items}\n selectionMode={selectionMode}\n isTogglable={isTogglable}\n itemComponentType={itemComponentType}\n itemLength={itemLength}\n itemPadding={itemPadding}\n orientation={orientation}\n selectedIndices={selectedItemIndices[sectionIdx] ?? []}\n onActivateAt={itemIdx => onActivateAt?.(sectionIdx, itemIdx)}\n onDeselectAt={itemIdx => deselectAt(sectionIdx, itemIdx)}\n onSelectAt={itemIdx => selectAt(sectionIdx, itemIdx)}\n />\n </div>\n )\n }}\n </Each>\n </div>\n )\n}) as <T>(props: AccordionProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nexport const AccordionHeader = ({ children, ...props }: HTMLAttributes<HTMLButtonElement> & PropsWithChildren) => <button {...props}>{children}</button>\n\nexport const AccordionExpandIcon = ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => <div {...props}>{children}</div>\n\nexport const AccordionCollapseIcon = ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => <div {...props}>{children}</div>\n"]}
|
package/lib/Dropdown.js
CHANGED
|
@@ -212,6 +212,7 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
212
212
|
fontWeight: 'inherit',
|
|
213
213
|
letterSpacing: 'inherit',
|
|
214
214
|
lineHeight: 'inherit',
|
|
215
|
+
pointerEvents: 'none',
|
|
215
216
|
},
|
|
216
217
|
expandIcon: {},
|
|
217
218
|
collapseIcon: {},
|
|
@@ -264,13 +265,13 @@ exports.default = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
264
265
|
className: (0, classnames_1.default)(fixedClassNames.toggle),
|
|
265
266
|
style: (0, styles_1.default)(fixedStyles.toggle),
|
|
266
267
|
onClick: function () { return toggle(); },
|
|
267
|
-
}], [
|
|
268
|
+
}], __read(components.toggle ? [] : [
|
|
268
269
|
react_1.default.createElement("label", { style: fixedStyles.toggleLabel, dangerouslySetInnerHTML: { __html: selectedIndices.length > 0 ? selectedIndices.map(function (t) { return data[t].label; }).join(', ') : defaultLabel !== null && defaultLabel !== void 0 ? defaultLabel : '' } }),
|
|
269
270
|
(0, cloneStyledElement_1.default)(isCollapsed ? expandIconComponent : collapseIconComponent, {
|
|
270
271
|
className: (0, classnames_1.default)(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),
|
|
271
272
|
style: (0, styles_1.default)(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),
|
|
272
273
|
}),
|
|
273
|
-
], false)),
|
|
274
|
+
]), false)),
|
|
274
275
|
react_1.default.createElement(List_1.default, { className: fixedClassNames.list, style: (0, styles_1.default)(fixedStyles.list), borderThickness: borderThickness, data: data, isTogglable: isTogglable, itemComponentType: itemComponentType, itemLength: itemLength, itemPadding: itemPadding, orientation: orientation, selectedIndices: selectedIndices, selectionMode: selectionMode, onActivateAt: onActivateAt, onDeselectAt: onDeselectAt, onSelectAt: selectAtHandler, onSelectionChange: onSelectionChange }))));
|
|
275
276
|
});
|
|
276
277
|
var DropdownToggle = function (_a) {
|
package/lib/Dropdown.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"/","sources":["Dropdown.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,oEAAqC;AACrC,6CAAgJ;AAChJ,sDAA+B;AAC/B,gDAAiE;AACjE,0EAAmD;AACnD,4EAAqD;AACrD,4EAAqD;AACrD,oEAA6C;AAC7C,kFAA2D;AAC3D,0DAAmC;AA8CnC;;;;GAIG;AACH,kBAAe,IAAA,kBAAU,EAAC,UAAC,EAwB1B,EAAE,GAAG;;IAvBJ,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,KAAK,WAAA,EACL,uBAAmB,EAAnB,eAAe,mBAAG,CAAC,KAAA,EACnB,IAAI,UAAA,EACJ,yBAAwB,EAAxB,iBAAiB,mBAAG,IAAI,KAAA,EACxB,oBAAuB,EAAvB,YAAY,mBAAG,QAAQ,KAAA,EACvB,aAAa,mBAAA,EACb,eAAe,qBAAA,EACf,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,mBAAmB,EAAnB,WAAW,mBAAG,KAAK,KAAA,EACnB,iBAAiB,uBAAA,EACL,kBAAkB,gBAAA,EAC9B,mBAAe,EAAf,WAAW,mBAAG,CAAC,KAAA,EACf,uBAAoB,EAApB,eAAe,mBAAG,CAAC,CAAC,KAAA,EACpB,mBAAwB,EAAxB,WAAW,mBAAG,UAAU,KAAA,EACxB,qBAAwB,EAAxB,aAAa,mBAAG,QAAQ,KAAA,EACxB,uBAA6C,EAA5B,uBAAuB,mBAAG,EAAE,KAAA,EAC7C,YAAY,kBAAA,EACZ,YAAY,kBAAA,EACZ,UAAU,gBAAA,EACV,iBAAiB,uBAAA,EACd,KAAK,cAvBiB,8VAwB1B,CADS;IAER,IAAM,MAAM,GAAG;QACb,IAAI,WAAW;YAAE,cAAc,CAAC,KAAK,CAAC,CAAA;IACxC,CAAC,CAAA;IAED,IAAM,QAAQ,GAAG;QACf,IAAI,CAAC,WAAW;YAAE,cAAc,CAAC,IAAI,CAAC,CAAA;IACxC,CAAC,CAAA;IAED,IAAM,MAAM,GAAG;QACb,IAAI,WAAW,EAAE;YACf,MAAM,EAAE,CAAA;SACT;aACI;YACH,QAAQ,EAAE,CAAA;SACX;IACH,CAAC,CAAA;IAED,IAAM,eAAe,GAAG,UAAC,KAAa;QACpC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,KAAK,CAAC,CAAA;QAEnB,IAAI,aAAa,KAAK,QAAQ,IAAI,iBAAiB;YAAE,QAAQ,EAAE,CAAA;IACjE,CAAC,CAAA;IAED,IAAM,mBAAmB,GAAG,UAAC,KAAiB;QAC5C,IAAI,WAAW;YAAE,OAAM;QACvB,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,YAAY,IAAI,CAAC;YAAE,OAAM;QAE3C,IAAI,SAAS,GAAG,IAAI,CAAA;QACpB,IAAI,IAAI,GAAG,KAAK,CAAC,MAAM,CAAA;QAEvB,OAAO,IAAI,EAAE;YACX,IAAI,IAAI,KAAK,OAAO,CAAC,OAAO,EAAE;gBAC5B,SAAS,GAAG,KAAK,CAAA;gBACjB,MAAK;aACN;YAED,IAAI,CAAC,IAAI,CAAC,UAAU;gBAAE,MAAK;YAE3B,IAAI,GAAG,IAAI,CAAC,UAAU,CAAA;SACvB;QAED,IAAI,CAAC,SAAS;YAAE,OAAM;QAEtB,QAAQ,EAAE,CAAA;IACZ,CAAC,CAAA;IAED,IAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAA;IACtC,IAAA,KAAA,OAAwC,IAAA,gBAAQ,EAAC,uBAAuB,CAAC,IAAA,EAAxE,eAAe,QAAA,EAAE,kBAAkB,QAAqC,CAAA;IACzE,IAAA,KAAA,OAAgC,IAAA,gBAAQ,EAAC,IAAI,CAAC,IAAA,EAA7C,WAAW,QAAA,EAAE,cAAc,QAAkB,CAAA;IACpD,IAAM,IAAI,GAAG,IAAA,wBAAc,EAAC,OAAO,CAAC,CAAA;IAEpC,IAAA,iBAAS,EAAC;QACR,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAA;QAErD,OAAO;YACL,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAA;QAC1D,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAA;IAEjB,IAAA,iBAAS,EAAC;QACR,IAAI,IAAA,yBAAO,EAAC,uBAAuB,EAAE,eAAe,CAAC;YAAE,OAAM;QAE7D,kBAAkB,CAAC,uBAAuB,CAAC,CAAA;IAC7C,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAA;IAE7C,IAAM,UAAU,GAAG,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAChG,IAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAA;IAC5B,IAAM,eAAe,GAAG,eAAe,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAA;IAC5F,IAAM,UAAU,GAAG,CAAC,UAAU,GAAG,eAAe,CAAC,GAAG,eAAe,GAAG,WAAW,GAAG,CAAC,eAAe,GAAG,CAAC,CAAC,GAAG,eAAe,CAAA;IAE3H,IAAM,UAAU,GAAG,IAAA,yBAAe,EAAC,QAAQ,EAAE;QAC3C,MAAM,EAAE,sBAAc;QACtB,UAAU,EAAE,0BAAkB;QAC9B,YAAY,EAAE,4BAAoB;KACnC,CAAC,CAAA;IAEF,IAAM,eAAe,GAAG,IAAA,yBAAe,EAAC;QACtC,IAAI,EAAE,IAAA,oBAAU,EAAC,WAAW,EAAE;YAC5B,SAAS,EAAE,WAAW;YACtB,SAAS,EAAE,WAAW;YACtB,QAAQ,EAAE,CAAC,WAAW;SACvB,CAAC;QACF,MAAM,EAAE,IAAA,oBAAU,EAAC,WAAW,EAAE;YAC9B,SAAS,EAAE,WAAW;YACtB,SAAS,EAAE,WAAW;YACtB,QAAQ,EAAE,CAAC,WAAW;SACvB,CAAC;QACF,UAAU,EAAE,IAAA,oBAAU,EAAC,WAAW,EAAE;YAClC,SAAS,EAAE,WAAW;YACtB,SAAS,EAAE,WAAW;YACtB,QAAQ,EAAE,CAAC,WAAW;SACvB,CAAC;QACF,YAAY,EAAE,IAAA,oBAAU,EAAC,WAAW,EAAE;YACpC,SAAS,EAAE,WAAW;YACtB,SAAS,EAAE,WAAW;YACtB,QAAQ,EAAE,CAAC,WAAW;SACvB,CAAC;QACF,IAAI,EAAE,IAAA,oBAAU,EAAC;YACf,SAAS,EAAE,WAAW;YACtB,SAAS,EAAE,WAAW;YACtB,QAAQ,EAAE,CAAC,WAAW;SACvB,CAAC;KACH,CAAC,CAAA;IAEF,IAAM,WAAW,GAAG,IAAA,qBAAW,EAAC;QAC9B,IAAI,aACF,UAAU,EAAE,QAAQ,EACpB,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,YAAY,EAC5B,QAAQ,EAAE,SAAS,IAChB,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;YAC9B,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,QAAQ;SACxD,CAAC,CAAC,CAAC;YACF,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK;SAClD,CACF;QACD,IAAI,EAAE;YACJ,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd;QACD,MAAM,EAAE;YACN,WAAW,EAAE,UAAG,eAAe,OAAI;YACnC,MAAM,EAAE,MAAM;YACd,IAAI,EAAE,GAAG;YACT,MAAM,EAAE,GAAG;YACX,OAAO,EAAE,MAAM;YACf,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,GAAG;YACR,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,GAAG;SACZ;QACD,WAAW,EAAE;YACX,UAAU,EAAE,SAAS;YACrB,QAAQ,EAAE,SAAS;YACnB,UAAU,EAAE,SAAS;YACrB,aAAa,EAAE,SAAS;YACxB,UAAU,EAAE,SAAS;SACtB;QACD,UAAU,EAAE,EAEX;QACD,YAAY,EAAE,EAEb;QACD,IAAI,aACF,QAAQ,EAAE,UAAU,IACjB,WAAW,KAAK,UAAU,CAAC,CAAC,YAC7B,UAAU,EAAE,uBAAuB,EACnC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAG,UAAU,OAAI,EAC/C,SAAS,EAAE,eAAe,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,IAC5F,UAAU,CAAC,CAAC,CAAC;YACd,YAAY,EAAE,UAAG,WAAW,GAAG,eAAe,OAAI;YAClD,MAAM,EAAE,MAAM;SACf,CAAC,CAAC,CAAC;YACF,GAAG,EAAE,MAAM;YACX,SAAS,EAAE,UAAG,WAAW,GAAG,eAAe,OAAI;SAChD,EACD,CAAC,YACD,UAAU,EAAE,sBAAsB,EAClC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAG,UAAU,OAAI,EAC9C,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,eAAe,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,IAC5F,UAAU,CAAC,CAAC,CAAC;YACd,WAAW,EAAE,UAAG,WAAW,GAAG,eAAe,OAAI;YACjD,KAAK,EAAE,MAAM;SACd,CAAC,CAAC,CAAC;YACF,IAAI,EAAE,MAAM;YACZ,UAAU,EAAE,UAAG,WAAW,GAAG,eAAe,OAAI;SACjD,CACF,CACF;KACF,CAAC,CAAA;IAEF,IAAM,aAAa,GAAG,IAAA,qBAAW,EAAC;QAChC,MAAM,EAAE;YACN,UAAU,EAAE,QAAQ;YACpB,UAAU,EAAE,MAAM;YAClB,SAAS,EAAE,YAAY;YACvB,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,KAAK;YACpB,QAAQ,EAAE,MAAM;YAChB,cAAc,EAAE,eAAe;YAC/B,MAAM,EAAE,GAAG;YACX,OAAO,EAAE,QAAQ;SAClB;QACD,UAAU,EAAE;YACV,MAAM,EAAE,MAAM;YACd,MAAM,EAAE,GAAG;YACX,OAAO,EAAE,GAAG;YACZ,KAAK,EAAE,MAAM;SACd;QACD,YAAY,EAAE;YACZ,MAAM,EAAE,MAAM;YACd,MAAM,EAAE,GAAG;YACX,OAAO,EAAE,GAAG;YACZ,KAAK,EAAE,MAAM;SACd;KACF,CAAC,CAAA;IAEF,IAAM,eAAe,GAAG,MAAA,UAAU,CAAC,MAAM,mCAAI,0CAAQ,KAAK,EAAE,aAAa,CAAC,MAAM,GAAG,CAAA;IACnF,IAAM,mBAAmB,GAAG,MAAA,UAAU,CAAC,UAAU,mCAAI,CAAC,aAAa,CAAC,CAAC,CAAC,8BAAC,iBAAO,IAAC,GAAG,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,6DAAK,CAAC,CAAA;IAC9I,IAAM,qBAAqB,GAAG,MAAA,UAAU,CAAC,YAAY,mCAAI,CAAC,eAAe,CAAC,CAAC,CAAC,8BAAC,iBAAO,IAAC,GAAG,EAAE,eAAe,EAAE,KAAK,EAAE,aAAa,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAA;IAEtK,OAAO,CACL,kDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,EACtD,KAAK,EAAE,IAAA,gBAAM,EAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC;QAEtC,uCAAK,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,IAAI,CAAC;YAC/C,4BAAkB,8BAAC,eAAe,EAAE;oBACnC,SAAS,EAAE,IAAA,oBAAU,EAAC,eAAe,CAAC,MAAM,CAAC;oBAC7C,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,MAAM,CAAC;oBACjC,OAAO,EAAE,cAAM,OAAA,MAAM,EAAE,EAAR,CAAQ;iBACxB,GAAK;gBACJ,yCAAO,KAAK,EAAE,WAAW,CAAC,WAAW,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,UAAA,CAAC,IAAI,OAAA,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,EAAb,CAAa,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,EAAE,GAAG;gBACnL,IAAA,4BAAkB,EAAC,WAAW,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAAqB,EAAE;oBAC5E,SAAS,EAAE,IAAA,oBAAU,EAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,YAAY,CAAC;oBAC9F,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC;iBAC/E,CAAC;aACH;YACD,8BAAC,cAAI,IACH,SAAS,EAAE,eAAe,CAAC,IAAI,EAC/B,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,IAAI,CAAC,EAC/B,eAAe,EAAE,eAAe,EAChC,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,eAAe,EAC3B,iBAAiB,EAAE,iBAAiB,GACpC,CACE,CACF,CACP,CAAA;AACH,CAAC,CAAqH,CAAA;AAE/G,IAAM,cAAc,GAAG,UAAC,EAA6E;IAA3E,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IAA8D,OAAA,qDAAY,KAAK,GAAG,QAAQ,CAAU,CAAA;CAAA,CAAA;AAA1I,QAAA,cAAc,kBAA4H;AAEhJ,IAAM,kBAAkB,GAAG,UAAC,EAA0E;IAAxE,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IAA2D,OAAA,kDAAS,KAAK,GAAG,QAAQ,CAAO,CAAA;CAAA,CAAA;AAArI,QAAA,kBAAkB,sBAAmH;AAE3I,IAAM,oBAAoB,GAAG,UAAC,EAA0E;IAAxE,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IAA2D,OAAA,kDAAS,KAAK,GAAG,QAAQ,CAAO,CAAA;CAAA,CAAA;AAAvI,QAAA,oBAAoB,wBAAmH","sourcesContent":["import classNames from 'classnames'\nimport isEqual from 'fast-deep-equal'\nimport React, { forwardRef, useEffect, useRef, useState, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport FlatSVG from './FlatSVG'\nimport List, { type ListItemProps, type ListProps } from './List'\nimport useElementRect from './hooks/useElementRect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type DropdownData = {\n label?: string\n}\n\nexport type DropdownItemProps<T extends DropdownData = DropdownData> = ListItemProps<T>\n\nexport type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttributes<HTMLDivElement> & ListProps<T> & PropsWithChildren<{\n /**\n * Indicates if the component is inverted (i.e. \"dropup\" instead of dropdown).\n * Supports all orientations.\n */\n isInverted?: boolean\n\n /**\n * Specifies if the dropdown should be collapsed upon selection. This only\n * works if `selectionMode` is `single`.\n */\n collapsesOnSelect?: boolean\n\n /**\n * Maximum number of items that are viside when the component expands. When a\n * value greater than or equal to 0 is specified, only that number of items\n * will be visible at a time, and a scrollbar will appear to scroll to\n * remaining items. Any value less than 0 indicates that all items will be\n * visible when the component expands.\n */\n maxVisibleItems?: number\n\n /**\n * The label to appear on the dropdown button when no items are selected.\n */\n defaultLabel?: string\n\n /**\n * SVG markup to be put in the dropdown button as the expand icon.\n */\n expandIconSvg?: string\n\n /**\n * SVG markup to be put in the dropdown button as the collapse icon.\n */\n collapseIconSvg?: string\n}>\n\n/**\n * A dropdown menu component that is invertible (i.e. can \"dropup\" instead) and\n * supports both horizontal and vertical orientations. Provide data and item\n * component type to this component to automatically generate menu items.\n */\nexport default forwardRef(({\n children,\n className,\n style,\n borderThickness = 0,\n data,\n collapsesOnSelect = true,\n defaultLabel = 'Select',\n expandIconSvg,\n collapseIconSvg,\n isInverted = false,\n isTogglable = false,\n itemComponentType,\n itemLength: externalItemLength,\n itemPadding = 0,\n maxVisibleItems = -1,\n orientation = 'vertical',\n selectionMode = 'single',\n selectedIndices: externalSelectedIndices = [],\n onActivateAt,\n onDeselectAt,\n onSelectAt,\n onSelectionChange,\n ...props\n}, ref) => {\n const expand = () => {\n if (isCollapsed) setIsCollapsed(false)\n }\n\n const collapse = () => {\n if (!isCollapsed) setIsCollapsed(true)\n }\n\n const toggle = () => {\n if (isCollapsed) {\n expand()\n }\n else {\n collapse()\n }\n }\n\n const selectAtHandler = (index: number) => {\n onSelectAt?.(index)\n\n if (selectionMode === 'single' && collapsesOnSelect) collapse()\n }\n\n const clickOutsideHandler = (event: MouseEvent) => {\n if (isCollapsed) return\n if (!(event.target instanceof Node)) return\n\n let isOutside = true\n let node = event.target\n\n while (node) {\n if (node === bodyRef.current) {\n isOutside = false\n break\n }\n\n if (!node.parentNode) break\n\n node = node.parentNode\n }\n\n if (!isOutside) return\n\n collapse()\n }\n\n const bodyRef = useRef<HTMLDivElement>(null)\n const [selectedIndices, setSelectedIndices] = useState(externalSelectedIndices)\n const [isCollapsed, setIsCollapsed] = useState(true)\n const rect = useElementRect(bodyRef)\n\n useEffect(() => {\n window.addEventListener('click', clickOutsideHandler)\n\n return () => {\n window.removeEventListener('click', clickOutsideHandler)\n }\n }, [isCollapsed])\n\n useEffect(() => {\n if (isEqual(externalSelectedIndices, selectedIndices)) return\n\n setSelectedIndices(externalSelectedIndices)\n }, [JSON.stringify(externalSelectedIndices)])\n\n const itemLength = externalItemLength ?? (orientation === 'vertical' ? rect.height : rect.width)\n const numItems = data.length\n const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n\n const components = asComponentDict(children, {\n toggle: DropdownToggle,\n expandIcon: DropdownExpandIcon,\n collapseIcon: DropdownCollapseIcon,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation, {\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n toggle: classNames(orientation, {\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n expandIcon: classNames(orientation, {\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n collapseIcon: classNames(orientation, {\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n list: classNames({\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n })\n\n const fixedStyles = asStyleDict({\n root: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'flex-start',\n overflow: 'visible',\n ...orientation === 'vertical' ? {\n flexDirection: isInverted ? 'column-reverse' : 'column',\n } : {\n flexDirection: isInverted ? 'row-reverse' : 'row',\n },\n },\n body: {\n height: '100%',\n width: '100%',\n },\n toggle: {\n borderWidth: `${borderThickness}px`,\n height: '100%',\n left: '0',\n margin: '0',\n outline: 'none',\n position: 'absolute',\n top: '0',\n width: '100%',\n zIndex: '1',\n },\n toggleLabel: {\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n letterSpacing: 'inherit',\n lineHeight: 'inherit',\n },\n expandIcon: {\n\n },\n collapseIcon: {\n\n },\n list: {\n position: 'absolute',\n ...orientation === 'vertical' ? {\n transition: 'height 100ms ease-out',\n width: '100%',\n height: isCollapsed ? '0px' : `${menuLength}px`,\n overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n ...isInverted ? {\n marginBottom: `${itemPadding - borderThickness}px`,\n bottom: '100%',\n } : {\n top: '100%',\n marginTop: `${itemPadding - borderThickness}px`,\n },\n } : {\n transition: 'width 100ms ease-out',\n width: isCollapsed ? '0px' : `${menuLength}px`,\n height: '100%',\n overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n ...isInverted ? {\n marginRight: `${itemPadding - borderThickness}px`,\n right: '100%',\n } : {\n left: '100%',\n marginLeft: `${itemPadding - borderThickness}px`,\n },\n },\n },\n })\n\n const defaultStyles = asStyleDict({\n toggle: {\n alignItems: 'center',\n background: '#fff',\n boxSizing: 'border-box',\n color: '#000',\n display: 'flex',\n flexDirection: 'row',\n fontSize: '16px',\n justifyContent: 'space-between',\n margin: '0',\n padding: '0 10px',\n },\n expandIcon: {\n height: '15px',\n margin: '0',\n padding: '0',\n width: '15px',\n },\n collapseIcon: {\n height: '15px',\n margin: '0',\n padding: '0',\n width: '15px',\n },\n })\n\n const toggleComponent = components.toggle ?? <button style={defaultStyles.toggle}/>\n const expandIconComponent = components.expandIcon ?? (expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>)\n const collapseIconComponent = components.collapseIcon ?? (collapseIconSvg ? <FlatSVG svg={collapseIconSvg} style={defaultStyles.collapseIcon}/> : expandIconComponent)\n\n return (\n <div\n {...props}\n ref={ref}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n <div ref={bodyRef} style={styles(fixedStyles.body)}>\n {cloneStyledElement(toggleComponent, {\n className: classNames(fixedClassNames.toggle),\n style: styles(fixedStyles.toggle),\n onClick: () => toggle(),\n }, ...[\n <label style={fixedStyles.toggleLabel} dangerouslySetInnerHTML={{ __html: selectedIndices.length > 0 ? selectedIndices.map(t => data[t].label).join(', ') : defaultLabel ?? '' }}/>,\n cloneStyledElement(isCollapsed ? expandIconComponent : collapseIconComponent, {\n className: classNames(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),\n style: styles(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),\n }),\n ])}\n <List\n className={fixedClassNames.list}\n style={styles(fixedStyles.list)}\n borderThickness={borderThickness}\n data={data}\n isTogglable={isTogglable}\n itemComponentType={itemComponentType}\n itemLength={itemLength}\n itemPadding={itemPadding}\n orientation={orientation}\n selectedIndices={selectedIndices}\n selectionMode={selectionMode}\n onActivateAt={onActivateAt}\n onDeselectAt={onDeselectAt}\n onSelectAt={selectAtHandler}\n onSelectionChange={onSelectionChange}\n />\n </div>\n </div>\n )\n}) as <T extends DropdownData = DropdownData>(props: DropdownProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nexport const DropdownToggle = ({ children, ...props }: HTMLAttributes<HTMLButtonElement> & PropsWithChildren) => <button {...props}>{children}</button>\n\nexport const DropdownExpandIcon = ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => <div {...props}>{children}</div>\n\nexport const DropdownCollapseIcon = ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => <div {...props}>{children}</div>\n"]}
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sourceRoot":"/","sources":["Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport isEqual from 'fast-deep-equal'\nimport React, { forwardRef, useEffect, useRef, useState, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport FlatSVG from './FlatSVG'\nimport List, { type ListItemProps, type ListProps } from './List'\nimport useElementRect from './hooks/useElementRect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type DropdownData = {\n label?: string\n}\n\nexport type DropdownItemProps<T extends DropdownData = DropdownData> = ListItemProps<T>\n\nexport type DropdownProps<T extends DropdownData = DropdownData> = HTMLAttributes<HTMLDivElement> & ListProps<T> & PropsWithChildren<{\n /**\n * Indicates if the component is inverted (i.e. \"dropup\" instead of dropdown).\n * Supports all orientations.\n */\n isInverted?: boolean\n\n /**\n * Specifies if the dropdown should be collapsed upon selection. This only\n * works if `selectionMode` is `single`.\n */\n collapsesOnSelect?: boolean\n\n /**\n * Maximum number of items that are viside when the component expands. When a\n * value greater than or equal to 0 is specified, only that number of items\n * will be visible at a time, and a scrollbar will appear to scroll to\n * remaining items. Any value less than 0 indicates that all items will be\n * visible when the component expands.\n */\n maxVisibleItems?: number\n\n /**\n * The label to appear on the dropdown button when no items are selected.\n */\n defaultLabel?: string\n\n /**\n * SVG markup to be put in the dropdown button as the expand icon.\n */\n expandIconSvg?: string\n\n /**\n * SVG markup to be put in the dropdown button as the collapse icon.\n */\n collapseIconSvg?: string\n}>\n\n/**\n * A dropdown menu component that is invertible (i.e. can \"dropup\" instead) and\n * supports both horizontal and vertical orientations. Provide data and item\n * component type to this component to automatically generate menu items.\n */\nexport default forwardRef(({\n children,\n className,\n style,\n borderThickness = 0,\n data,\n collapsesOnSelect = true,\n defaultLabel = 'Select',\n expandIconSvg,\n collapseIconSvg,\n isInverted = false,\n isTogglable = false,\n itemComponentType,\n itemLength: externalItemLength,\n itemPadding = 0,\n maxVisibleItems = -1,\n orientation = 'vertical',\n selectionMode = 'single',\n selectedIndices: externalSelectedIndices = [],\n onActivateAt,\n onDeselectAt,\n onSelectAt,\n onSelectionChange,\n ...props\n}, ref) => {\n const expand = () => {\n if (isCollapsed) setIsCollapsed(false)\n }\n\n const collapse = () => {\n if (!isCollapsed) setIsCollapsed(true)\n }\n\n const toggle = () => {\n if (isCollapsed) {\n expand()\n }\n else {\n collapse()\n }\n }\n\n const selectAtHandler = (index: number) => {\n onSelectAt?.(index)\n\n if (selectionMode === 'single' && collapsesOnSelect) collapse()\n }\n\n const clickOutsideHandler = (event: MouseEvent) => {\n if (isCollapsed) return\n if (!(event.target instanceof Node)) return\n\n let isOutside = true\n let node = event.target\n\n while (node) {\n if (node === bodyRef.current) {\n isOutside = false\n break\n }\n\n if (!node.parentNode) break\n\n node = node.parentNode\n }\n\n if (!isOutside) return\n\n collapse()\n }\n\n const bodyRef = useRef<HTMLDivElement>(null)\n const [selectedIndices, setSelectedIndices] = useState(externalSelectedIndices)\n const [isCollapsed, setIsCollapsed] = useState(true)\n const rect = useElementRect(bodyRef)\n\n useEffect(() => {\n window.addEventListener('click', clickOutsideHandler)\n\n return () => {\n window.removeEventListener('click', clickOutsideHandler)\n }\n }, [isCollapsed])\n\n useEffect(() => {\n if (isEqual(externalSelectedIndices, selectedIndices)) return\n\n setSelectedIndices(externalSelectedIndices)\n }, [JSON.stringify(externalSelectedIndices)])\n\n const itemLength = externalItemLength ?? (orientation === 'vertical' ? rect.height : rect.width)\n const numItems = data.length\n const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n\n const components = asComponentDict(children, {\n toggle: DropdownToggle,\n expandIcon: DropdownExpandIcon,\n collapseIcon: DropdownCollapseIcon,\n })\n\n const fixedClassNames = asClassNameDict({\n root: classNames(orientation, {\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n toggle: classNames(orientation, {\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n expandIcon: classNames(orientation, {\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n collapseIcon: classNames(orientation, {\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n list: classNames({\n togglable: isTogglable,\n collapsed: isCollapsed,\n expanded: !isCollapsed,\n }),\n })\n\n const fixedStyles = asStyleDict({\n root: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'flex-start',\n overflow: 'visible',\n ...orientation === 'vertical' ? {\n flexDirection: isInverted ? 'column-reverse' : 'column',\n } : {\n flexDirection: isInverted ? 'row-reverse' : 'row',\n },\n },\n body: {\n height: '100%',\n width: '100%',\n },\n toggle: {\n borderWidth: `${borderThickness}px`,\n height: '100%',\n left: '0',\n margin: '0',\n outline: 'none',\n position: 'absolute',\n top: '0',\n width: '100%',\n zIndex: '1',\n },\n toggleLabel: {\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n letterSpacing: 'inherit',\n lineHeight: 'inherit',\n pointerEvents: 'none',\n },\n expandIcon: {\n\n },\n collapseIcon: {\n\n },\n list: {\n position: 'absolute',\n ...orientation === 'vertical' ? {\n transition: 'height 100ms ease-out',\n width: '100%',\n height: isCollapsed ? '0px' : `${menuLength}px`,\n overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n ...isInverted ? {\n marginBottom: `${itemPadding - borderThickness}px`,\n bottom: '100%',\n } : {\n top: '100%',\n marginTop: `${itemPadding - borderThickness}px`,\n },\n } : {\n transition: 'width 100ms ease-out',\n width: isCollapsed ? '0px' : `${menuLength}px`,\n height: '100%',\n overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n ...isInverted ? {\n marginRight: `${itemPadding - borderThickness}px`,\n right: '100%',\n } : {\n left: '100%',\n marginLeft: `${itemPadding - borderThickness}px`,\n },\n },\n },\n })\n\n const defaultStyles = asStyleDict({\n toggle: {\n alignItems: 'center',\n background: '#fff',\n boxSizing: 'border-box',\n color: '#000',\n display: 'flex',\n flexDirection: 'row',\n fontSize: '16px',\n justifyContent: 'space-between',\n margin: '0',\n padding: '0 10px',\n },\n expandIcon: {\n height: '15px',\n margin: '0',\n padding: '0',\n width: '15px',\n },\n collapseIcon: {\n height: '15px',\n margin: '0',\n padding: '0',\n width: '15px',\n },\n })\n\n const toggleComponent = components.toggle ?? <button style={defaultStyles.toggle}/>\n const expandIconComponent = components.expandIcon ?? (expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>)\n const collapseIconComponent = components.collapseIcon ?? (collapseIconSvg ? <FlatSVG svg={collapseIconSvg} style={defaultStyles.collapseIcon}/> : expandIconComponent)\n\n return (\n <div\n {...props}\n ref={ref}\n className={classNames(className, fixedClassNames.root)}\n style={styles(style, fixedStyles.root)}\n >\n <div ref={bodyRef} style={styles(fixedStyles.body)}>\n {cloneStyledElement(toggleComponent, {\n className: classNames(fixedClassNames.toggle),\n style: styles(fixedStyles.toggle),\n onClick: () => toggle(),\n }, ...components.toggle ? [] : [\n <label style={fixedStyles.toggleLabel} dangerouslySetInnerHTML={{ __html: selectedIndices.length > 0 ? selectedIndices.map(t => data[t].label).join(', ') : defaultLabel ?? '' }}/>,\n cloneStyledElement(isCollapsed ? expandIconComponent : collapseIconComponent, {\n className: classNames(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),\n style: styles(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),\n }),\n ])}\n <List\n className={fixedClassNames.list}\n style={styles(fixedStyles.list)}\n borderThickness={borderThickness}\n data={data}\n isTogglable={isTogglable}\n itemComponentType={itemComponentType}\n itemLength={itemLength}\n itemPadding={itemPadding}\n orientation={orientation}\n selectedIndices={selectedIndices}\n selectionMode={selectionMode}\n onActivateAt={onActivateAt}\n onDeselectAt={onDeselectAt}\n onSelectAt={selectAtHandler}\n onSelectionChange={onSelectionChange}\n />\n </div>\n </div>\n )\n}) as <T extends DropdownData = DropdownData>(props: DropdownProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nexport const DropdownToggle = ({ children, ...props }: HTMLAttributes<HTMLButtonElement> & PropsWithChildren) => <button {...props}>{children}</button>\n\nexport const DropdownExpandIcon = ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => <div {...props}>{children}</div>\n\nexport const DropdownCollapseIcon = ({ children, ...props }: HTMLAttributes<HTMLDivElement> & PropsWithChildren) => <div {...props}>{children}</div>\n"]}
|