linear-react-components-ui 2.4.0-beta.0 → 2.4.0-beta.1

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.
@@ -1 +1 @@
1
- {"version":3,"file":"listbox.js","sources":["../../../src/lib/inputs2/selectfield/listbox.tsx"],"sourcesContent":["import _ from 'lodash';\nimport { ComponentProps, CSSProperties, forwardRef, useEffect, useRef, useState } from 'react';\nimport { UseScrollEndReachedParams } from 'src/lib/hooks/useScrollEndReached/types';\nimport { useScrollEndReached } from '../../hooks/useScrollEndReached';\nimport { Search } from './search';\nimport { useSelectFieldContext } from './context';\n\ninterface SelectFieldListBoxProps extends ComponentProps<'div'>, UseScrollEndReachedParams {\n dropdownMaxWidth?: number;\n}\n\nconst MAX_HEIGHT = ((27 * 15) + 1); // 27px de height do list item * 15 itens máximos na exibição + 1px de borda listbox.\nconst ListBox = forwardRef<HTMLDivElement, SelectFieldListBoxProps>((props, ref) => {\n const {\n children, dropdownMaxWidth, onEndReached, onEndReachedThreshold, itemsCount, ...rest\n } = props;\n const {\n listBoxOpen, valueSelect, selectFieldId, selectContainerRef, notFoundFilterLabel,\n searchOnDropdown, isMultipleWithCheckboxes,\n } = useSelectFieldContext();\n\n const [listBoxStyles, setListBoxStyles] = useState<CSSProperties>({});\n const [filterResultIsEmpty, setFilterResultIsEmpty] = useState(false);\n const listBoxRef = useRef<HTMLUListElement>(null);\n const shouldBeShowSearchInput = searchOnDropdown || isMultipleWithCheckboxes;\n\n requestAnimationFrame(() => {\n const hasChildrenElementsInUL = (listBoxRef.current?.childNodes);\n const liElementsFiltered = (listBoxRef.current?.querySelectorAll(\n 'li[data-state-filtered=\"true\"]',\n ) ?? []) as HTMLLIElement[];\n const filterIsEmpty = !_.isEmpty(hasChildrenElementsInUL) && _.isEmpty(liElementsFiltered);\n setFilterResultIsEmpty(filterIsEmpty);\n });\n\n useEffect(() => {\n const updatePosition = () => {\n const selectPositionOnScreen = selectContainerRef.current?.getBoundingClientRect();\n if (selectPositionOnScreen) {\n const { top, left, width, height } = selectPositionOnScreen;\n const spaceBelow = window.innerHeight - (top + height);\n const spaceAbove = top;\n const shouldOpenUp = spaceBelow < MAX_HEIGHT && spaceAbove > spaceBelow;\n\n const styles: CSSProperties = {\n left: left + window.scrollX,\n minWidth: dropdownMaxWidth ?? width,\n };\n\n if (shouldOpenUp) {\n styles.bottom = window.innerHeight - top - window.scrollY;\n styles.maxHeight = Math.min(MAX_HEIGHT, spaceAbove);\n } else {\n styles.top = top + height + window.scrollY;\n styles.maxHeight = Math.min(MAX_HEIGHT, spaceBelow);\n }\n\n setListBoxStyles(styles);\n }\n };\n\n if (listBoxOpen) {\n updatePosition();\n window.addEventListener('resize', updatePosition);\n window.addEventListener('scroll', updatePosition, true);\n }\n\n return () => {\n window.removeEventListener('resize', updatePosition);\n window.removeEventListener('scroll', updatePosition, true);\n };\n }, [listBoxOpen, valueSelect, selectContainerRef]);\n\n useScrollEndReached({\n elementRef: listBoxRef,\n onEndReached,\n onEndReachedThreshold,\n itemsCount,\n });\n\n return (\n <div\n ref={ref}\n style={listBoxStyles}\n aria-expanded={listBoxOpen}\n className=\"select-field-listbox\"\n data-testid=\"test-select-field-listbox\"\n data-dropdown-max-width={dropdownMaxWidth}\n {...rest}>\n {shouldBeShowSearchInput && (<Search />)}\n <ul\n id={selectFieldId}\n role=\"listbox\"\n ref={listBoxRef}>\n {children}\n {filterResultIsEmpty && (\n <li\n tabIndex={-1}\n aria-disabled={true}\n aria-label={notFoundFilterLabel}\n key=\"not-found-values\"\n // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n role=\"option\"\n id=\"not-found-values\"\n className=\"not-found-values\"\n onClick={(event) => { event.preventDefault(); }}\n onMouseDown={(event) => { event.preventDefault(); }}>\n {notFoundFilterLabel}\n </li>\n )}\n </ul>\n </div>\n );\n});\n\nListBox.displayName = 'SelectListBox';\nexport { ListBox };\nexport type { SelectFieldListBoxProps };\n"],"names":["MAX_HEIGHT","ListBox","forwardRef","props","ref","children","dropdownMaxWidth","onEndReached","onEndReachedThreshold","itemsCount","rest","listBoxOpen","valueSelect","selectFieldId","selectContainerRef","notFoundFilterLabel","searchOnDropdown","isMultipleWithCheckboxes","useSelectFieldContext","listBoxStyles","setListBoxStyles","useState","filterResultIsEmpty","setFilterResultIsEmpty","listBoxRef","useRef","shouldBeShowSearchInput","requestAnimationFrame","hasChildrenElementsInUL","current","childNodes","liElementsFiltered","querySelectorAll","filterIsEmpty","_","isEmpty","useEffect","updatePosition","selectPositionOnScreen","getBoundingClientRect","top","left","width","height","spaceBelow","window","innerHeight","spaceAbove","shouldOpenUp","styles","scrollX","minWidth","bottom","scrollY","maxHeight","Math","min","addEventListener","removeEventListener","useScrollEndReached","elementRef","event","preventDefault","displayName"],"mappings":"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"}
1
+ {"version":3,"file":"listbox.js","sources":["../../../src/lib/inputs2/selectfield/listbox.tsx"],"sourcesContent":["import _ from 'lodash';\nimport { ComponentProps, CSSProperties, forwardRef, useEffect, useRef, useState } from 'react';\nimport { UseScrollEndReachedParams } from '../../hooks/useScrollEndReached/types';\nimport { useScrollEndReached } from '../../hooks/useScrollEndReached';\nimport { Search } from './search';\nimport { useSelectFieldContext } from './context';\n\ninterface SelectFieldListBoxProps extends ComponentProps<'div'>, UseScrollEndReachedParams {\n dropdownMaxWidth?: number;\n}\n\nconst MAX_HEIGHT = ((27 * 15) + 1); // 27px de height do list item * 15 itens máximos na exibição + 1px de borda listbox.\nconst ListBox = forwardRef<HTMLDivElement, SelectFieldListBoxProps>((props, ref) => {\n const {\n children, dropdownMaxWidth, onEndReached, onEndReachedThreshold, itemsCount, ...rest\n } = props;\n const {\n listBoxOpen, valueSelect, selectFieldId, selectContainerRef, notFoundFilterLabel,\n searchOnDropdown, isMultipleWithCheckboxes,\n } = useSelectFieldContext();\n\n const [listBoxStyles, setListBoxStyles] = useState<CSSProperties>({});\n const [filterResultIsEmpty, setFilterResultIsEmpty] = useState(false);\n const listBoxRef = useRef<HTMLUListElement>(null);\n const shouldBeShowSearchInput = searchOnDropdown || isMultipleWithCheckboxes;\n\n requestAnimationFrame(() => {\n const hasChildrenElementsInUL = (listBoxRef.current?.childNodes);\n const liElementsFiltered = (listBoxRef.current?.querySelectorAll(\n 'li[data-state-filtered=\"true\"]',\n ) ?? []) as HTMLLIElement[];\n const filterIsEmpty = !_.isEmpty(hasChildrenElementsInUL) && _.isEmpty(liElementsFiltered);\n setFilterResultIsEmpty(filterIsEmpty);\n });\n\n useEffect(() => {\n const updatePosition = () => {\n const selectPositionOnScreen = selectContainerRef.current?.getBoundingClientRect();\n if (selectPositionOnScreen) {\n const { top, left, width, height } = selectPositionOnScreen;\n const spaceBelow = window.innerHeight - (top + height);\n const spaceAbove = top;\n const shouldOpenUp = spaceBelow < MAX_HEIGHT && spaceAbove > spaceBelow;\n\n const styles: CSSProperties = {\n left: left + window.scrollX,\n minWidth: dropdownMaxWidth ?? width,\n };\n\n if (shouldOpenUp) {\n styles.bottom = window.innerHeight - top - window.scrollY;\n styles.maxHeight = Math.min(MAX_HEIGHT, spaceAbove);\n } else {\n styles.top = top + height + window.scrollY;\n styles.maxHeight = Math.min(MAX_HEIGHT, spaceBelow);\n }\n\n setListBoxStyles(styles);\n }\n };\n\n if (listBoxOpen) {\n updatePosition();\n window.addEventListener('resize', updatePosition);\n window.addEventListener('scroll', updatePosition, true);\n }\n\n return () => {\n window.removeEventListener('resize', updatePosition);\n window.removeEventListener('scroll', updatePosition, true);\n };\n }, [listBoxOpen, valueSelect, selectContainerRef]);\n\n useScrollEndReached({\n elementRef: listBoxRef,\n onEndReached,\n onEndReachedThreshold,\n itemsCount,\n });\n\n return (\n <div\n ref={ref}\n style={listBoxStyles}\n aria-expanded={listBoxOpen}\n className=\"select-field-listbox\"\n data-testid=\"test-select-field-listbox\"\n data-dropdown-max-width={dropdownMaxWidth}\n {...rest}>\n {shouldBeShowSearchInput && (<Search />)}\n <ul\n id={selectFieldId}\n role=\"listbox\"\n ref={listBoxRef}>\n {children}\n {filterResultIsEmpty && (\n <li\n tabIndex={-1}\n aria-disabled={true}\n aria-label={notFoundFilterLabel}\n key=\"not-found-values\"\n // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n role=\"option\"\n id=\"not-found-values\"\n className=\"not-found-values\"\n onClick={(event) => { event.preventDefault(); }}\n onMouseDown={(event) => { event.preventDefault(); }}>\n {notFoundFilterLabel}\n </li>\n )}\n </ul>\n </div>\n );\n});\n\nListBox.displayName = 'SelectListBox';\nexport { ListBox };\nexport type { SelectFieldListBoxProps };\n"],"names":["MAX_HEIGHT","ListBox","forwardRef","props","ref","children","dropdownMaxWidth","onEndReached","onEndReachedThreshold","itemsCount","rest","listBoxOpen","valueSelect","selectFieldId","selectContainerRef","notFoundFilterLabel","searchOnDropdown","isMultipleWithCheckboxes","useSelectFieldContext","listBoxStyles","setListBoxStyles","useState","filterResultIsEmpty","setFilterResultIsEmpty","listBoxRef","useRef","shouldBeShowSearchInput","requestAnimationFrame","hasChildrenElementsInUL","current","childNodes","liElementsFiltered","querySelectorAll","filterIsEmpty","_","isEmpty","useEffect","updatePosition","selectPositionOnScreen","getBoundingClientRect","top","left","width","height","spaceBelow","window","innerHeight","spaceAbove","shouldOpenUp","styles","scrollX","minWidth","bottom","scrollY","maxHeight","Math","min","addEventListener","removeEventListener","useScrollEndReached","elementRef","event","preventDefault","displayName"],"mappings":"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"}
@@ -13,7 +13,7 @@ var hasRequiredLodash;
13
13
  function requireLodash() {
14
14
  if (hasRequiredLodash) return lodash$1.exports;
15
15
  hasRequiredLodash = 1;
16
- (function(module, exports$1) {
16
+ (function(module, exports) {
17
17
  (function() {
18
18
  var undefined$1;
19
19
  var VERSION = "4.17.21";
@@ -341,7 +341,7 @@ function requireLodash() {
341
341
  var freeGlobal = typeof commonjsGlobal == "object" && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
342
342
  var freeSelf = typeof self == "object" && self && self.Object === Object && self;
343
343
  var root = freeGlobal || freeSelf || Function("return this")();
344
- var freeExports = exports$1 && !exports$1.nodeType && exports$1;
344
+ var freeExports = exports && !exports.nodeType && exports;
345
345
  var freeModule = freeExports && true && module && !module.nodeType && module;
346
346
  var moduleExports = freeModule && freeModule.exports === freeExports;
347
347
  var freeProcess = moduleExports && freeGlobal.process;