@adaptabletools/adaptable-cjs 21.0.2 → 21.0.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.
Files changed (11) hide show
  1. package/base.css +14 -0
  2. package/base.css.map +1 -1
  3. package/index.css +12 -0
  4. package/index.css.map +1 -1
  5. package/package.json +1 -1
  6. package/src/agGrid/AgGridColumnAdapter.js +7 -5
  7. package/src/components/Select/CSSNumericVariableWatch.d.ts +11 -0
  8. package/src/components/Select/CSSNumericVariableWatch.js +51 -0
  9. package/src/components/Select/Select.js +186 -159
  10. package/src/env.js +2 -2
  11. package/tsconfig.cjs.tsbuildinfo +1 -1
package/src/components/Select/Select.js CHANGED
@@ -14,6 +14,7 @@ const join_1 = tslib_1.__importDefault(require("../utils/join"));
14
14
  const re_resizable_1 = require("re-resizable");
15
15
  const Tooltip_1 = tslib_1.__importDefault(require("../Tooltip"));
16
16
  const OverlayTrigger_1 = require("../OverlayTrigger");
17
+ const CSSNumericVariableWatch_1 = require("./CSSNumericVariableWatch");
17
18
  const resizableDirections = {
18
19
  right: true,
19
20
  bottom: true,
@@ -105,6 +106,16 @@ const doesOptionMatchValue = function (value) {
105
106
  };
106
107
  const Select = function (props) {
107
108
  let maxLabelLength = 0;
109
+ const cssVarsValuesRef = React.useRef({
110
+ '--ab-cmp-select-menu__max-width': 0,
111
+ '--ab-cmp-select-menu__min-width': 0,
112
+ '--ab-cmp-select-menu__max-height': 0,
113
+ });
114
+ const CSS_VARS_VALUES = {
115
+ '--ab-cmp-select-menu__max-width': cssVarsValuesRef.current['--ab-cmp-select-menu__max-width'] || '60vw',
116
+ '--ab-cmp-select-menu__min-width': cssVarsValuesRef.current['--ab-cmp-select-menu__min-width'] || 150,
117
+ '--ab-cmp-select-menu__max-height': cssVarsValuesRef.current['--ab-cmp-select-menu__max-height'] || '60vh',
118
+ };
108
119
  const searchableInMenulist = props.searchable === 'menulist';
109
120
  const searchableInline = props.searchable === 'inline';
110
121
  // relevant for menulist search only
@@ -289,11 +300,17 @@ const Select = function (props) {
289
300
  event.stopPropagation();
290
301
  }
291
302
  },
292
- } }, resizable ? (React.createElement(re_resizable_1.Resizable, { className: "ab-Select-MenuContainer-Resizable", enable: resizableDirections, minWidth: '100%', maxHeight: '60vh', maxWidth: '60vw', defaultSize: sizeRef.current, onResizeStop: onResizeStop, onResizeStart: (e) => {
303
+ } }, resizable ? (React.createElement(re_resizable_1.Resizable, { className: "ab-Select-MenuContainer-Resizable", enable: resizableDirections,
304
+ // ideally we wouldn't need those to be computed values
305
+ // and instead pass the CSS var name, like `var(--ab-cmp-select-menu__min-width)`
306
+ // to the Resizable component, but it won't respect them
307
+ // so we needed to read the CSS variables from the DOM, using CSSNumericVariableWatch
308
+ // and then pass the actual values to Resizable
309
+ minWidth: CSS_VARS_VALUES['--ab-cmp-select-menu__min-width'], maxHeight: CSS_VARS_VALUES['--ab-cmp-select-menu__max-height'], maxWidth: CSS_VARS_VALUES['--ab-cmp-select-menu__max-width'], defaultSize: sizeRef.current, onResizeStop: onResizeStop, onResizeStart: (e) => {
293
310
  e.preventDefault();
294
311
  } }, theChildren)) : (theChildren))));
295
312
  };
296
- }, [resizable]);
313
+ }, [resizable, JSON.stringify(CSS_VARS_VALUES)]);
297
314
  const SelectComponent = props.isCreatable ? creatable_1.default : react_select_1.default;
298
315
  const ClearIndicator = React.useMemo(() => {
299
316
  return (clearIndicatorProps) => {
@@ -499,165 +516,175 @@ const Select = function (props) {
499
516
  setInputValue(value);
500
517
  props.onInputChange?.(value);
501
518
  }, [props.onInputChange, isMulti]);
502
- return (React.createElement(SelectComponent, { ref: ref, openMenuOnClick: searchableInMenulist ? false : undefined, openMenuOnFocus: searchableInMenulist ? false : undefined, menuIsOpen: searchableInMenulist ? isSelectMenuOpen : undefined, isSearchable: searchableInline, "aria-label": props['aria-label'], onKeyDown: props.onKeyDown, inputValue: inputValue, onInputChange: onInputChange, onFocus: onFocus, onBlur: onBlur, onMenuOpen: props.onMenuOpen, isLoading: props.isLoading, options: props.options, className: (0, join_1.default)(props.className, 'ab-Select'), isDisabled: disabled, menuPlacement: props.menuPlacement ?? 'auto', hideSelectedOptions: false, isMulti: isMulti, value: selectedOption, blurInputOnSelect: false, menuPosition: props.menuPosition ?? 'absolute',
503
- // This needed so the menu is not clipped by overflow: hidden
504
- menuPortalTarget: (0, OverlayTrigger_1.ensurePortalElement)(), isClearable: props.isClearable, closeMenuOnSelect: props.closeMenuOnSelect, onChange: (option) => {
505
- if (isMulti) {
506
- const value = option.map((x) => x?.value);
507
- props.onChange(value);
508
- }
509
- else {
510
- props.onChange(option?.value);
511
- }
512
- if (searchableInMenulist) {
513
- // ensure element keeps focus
514
- requestAnimationFrame(() => {
515
- menulistInputRef.current?.focus();
516
- });
517
- }
518
- }, placeholder: props.placeholder, createOptionPosition: 'first',
519
- // formatCreateLabel={(inputValue) => inputValue} // can we make this auto??
520
- // we use this: https://react-select.com/creatable
521
- components: {
522
- SelectContainer,
523
- ValueContainer,
524
- Menu: MenuComponent,
525
- SingleValue: React.useCallback((singleValueProps) => {
526
- return (React.createElement(react_select_1.components.SingleValue, { ...singleValueProps }, props.renderSingleValue
527
- ? props.renderSingleValue(selectedOption)
528
- : singleValueProps.children));
529
- }, [selectedOption]),
530
- ClearIndicator,
531
- DropdownIndicator,
532
- MenuList,
533
- },
534
- /**
535
- * Using styles is the preferred way to style react-select.
536
- * https://react-select.com/styles#the-styles-prop
537
- */
538
- styles: {
539
- // Typescript issue with csstype@3.1.3
540
- // https://github.com/JedWatson/react-select/issues/5825#issuecomment-1850472549
541
- // Remove
542
- container: (baseStyle) => {
543
- return {
544
- ...baseStyle,
545
- ...props.style,
546
- ...props.styles?.container,
547
- };
548
- },
549
- // @ts-ignorets-ignore when fixed
550
- menuPortal: (baseStyle) => {
551
- return {
552
- ...baseStyle,
553
- // needed to avoid tooltips from being displayed under this menu
554
- // as otherwise react-select uses zIndex 1
555
- zIndex: 'auto',
556
- textAlign: 'left',
557
- };
558
- },
559
- // @ts-ignore
560
- menu: (baseStyle, state) => {
561
- return {
562
- ...baseStyle,
563
- // needed to avoid tooltips from being displayed under this menu
564
- // as otherwise react-select uses zIndex 1
565
- zIndex: 'auto',
566
- minWidth: `var(--ab-cmp-select-menu__min-width)`,
567
- width: resizable ? '100%' : `${Math.max(maxLabelLength, 10)}ch`,
568
- '--ab-cmp-select-menu__min-height': `min(${(props.options || []).length + (showHeaderSelectionCheckbox ? 1 : 0)} * var(--ab-grid-row-height) + ${searchableInMenulist ? 40 : 0}px, ${searchableInMenulist ? 22 : 20}rem)`,
569
- maxHeight: 'var(--ab-cmp-select-menu__max-height)',
570
- maxWidth: 'var(--ab-cmp-select-menu__max-width)',
571
- ...commonStyles(state),
572
- ...props.menuStyle,
573
- };
574
- },
575
- // @ts-ignore
576
- option: (baseStyle, state) => {
577
- const style = {
578
- ...baseStyle,
579
- ...commonStyles(state),
580
- '&:active': {
581
- background: 'var(--ab-cmp-select-option-active__background)',
582
- },
583
- };
584
- if (state.isSelected) {
585
- style.background = 'var(--ab-cmp-select-option-active__background)';
586
- style.color = 'var(--ab-cmp-select-option-active__color)';
519
+ return (React.createElement(React.Fragment, null,
520
+ React.createElement(CSSNumericVariableWatch_1.CSSNumericVariableWatch, { varName: "--ab-cmp-select-menu__max-width", onChange: (value) => {
521
+ cssVarsValuesRef.current['--ab-cmp-select-menu__max-width'] = value;
522
+ } }),
523
+ React.createElement(CSSNumericVariableWatch_1.CSSNumericVariableWatch, { varName: "--ab-cmp-select-menu__min-width", onChange: (value) => {
524
+ cssVarsValuesRef.current['--ab-cmp-select-menu__min-width'] = value;
525
+ } }),
526
+ React.createElement(CSSNumericVariableWatch_1.CSSNumericVariableWatch, { varName: "--ab-cmp-select-menu__max-height", onChange: (value) => {
527
+ cssVarsValuesRef.current['--ab-cmp-select-menu__max-height'] = value;
528
+ } }),
529
+ React.createElement(SelectComponent, { ref: ref, openMenuOnClick: searchableInMenulist ? false : undefined, openMenuOnFocus: searchableInMenulist ? false : undefined, menuIsOpen: searchableInMenulist ? isSelectMenuOpen : undefined, isSearchable: searchableInline, "aria-label": props['aria-label'], onKeyDown: props.onKeyDown, inputValue: inputValue, onInputChange: onInputChange, onFocus: onFocus, onBlur: onBlur, onMenuOpen: props.onMenuOpen, isLoading: props.isLoading, options: props.options, className: (0, join_1.default)(props.className, 'ab-Select'), isDisabled: disabled, menuPlacement: props.menuPlacement ?? 'auto', hideSelectedOptions: false, isMulti: isMulti, value: selectedOption, blurInputOnSelect: false, menuPosition: props.menuPosition ?? 'absolute',
530
+ // This needed so the menu is not clipped by overflow: hidden
531
+ menuPortalTarget: (0, OverlayTrigger_1.ensurePortalElement)(), isClearable: props.isClearable, closeMenuOnSelect: props.closeMenuOnSelect, onChange: (option) => {
532
+ if (isMulti) {
533
+ const value = option.map((x) => x?.value);
534
+ props.onChange(value);
587
535
  }
588
- if (state.isFocused) {
589
- style.background = 'var(--ab-cmp-select-option-focused__background)';
536
+ else {
537
+ props.onChange(option?.value);
590
538
  }
591
- return style;
592
- },
593
- // @ts-ignore
594
- input: (baseStyle, state) => {
595
- return {
596
- ...baseStyle,
597
- padding: props.size === 'small' ? 0 : baseStyle.padding,
598
- color: 'var(--ab-cmp-select__color)',
599
- };
600
- },
601
- valueContainer: (baseStyle) => {
602
- return {
603
- ...baseStyle,
604
- padding: props.size === 'small' ? `0 var(--ab-space-1)` : baseStyle.padding,
605
- ...props.styles?.valueContainer,
606
- };
607
- },
608
- // @ts-ignore
609
- singleValue: (baseStyle, state) => {
610
- return {
611
- ...baseStyle,
612
- ...commonStyles(state),
613
- };
614
- },
615
- // @ts-ignore
616
- control: (baseStyle, state) => {
617
- return {
618
- ...baseStyle,
619
- ...commonStyles(state), // height: 30,
620
- minHeight: props.size === 'small' ? 0 : '100%',
621
- boxShadow: state.isFocused ? 'var(--ab-cmp-select-focused__box-shadow)' : 'none',
622
- outline: state.isFocused ? 'var(--ab-cmp-select-focused__outline)' : 'none',
623
- border: 'var(--ab-cmp-select__border)',
624
- borderRadius: 'var(--ab-cmp-select__border-radius)',
625
- '&:hover': {
539
+ if (searchableInMenulist) {
540
+ // ensure element keeps focus
541
+ requestAnimationFrame(() => {
542
+ menulistInputRef.current?.focus();
543
+ });
544
+ }
545
+ }, placeholder: props.placeholder, createOptionPosition: 'first',
546
+ // formatCreateLabel={(inputValue) => inputValue} // can we make this auto??
547
+ // we use this: https://react-select.com/creatable
548
+ components: {
549
+ SelectContainer,
550
+ ValueContainer,
551
+ Menu: MenuComponent,
552
+ SingleValue: React.useCallback((singleValueProps) => {
553
+ return (React.createElement(react_select_1.components.SingleValue, { ...singleValueProps }, props.renderSingleValue
554
+ ? props.renderSingleValue(selectedOption)
555
+ : singleValueProps.children));
556
+ }, [selectedOption]),
557
+ ClearIndicator,
558
+ DropdownIndicator,
559
+ MenuList,
560
+ },
561
+ /**
562
+ * Using styles is the preferred way to style react-select.
563
+ * https://react-select.com/styles#the-styles-prop
564
+ */
565
+ styles: {
566
+ // Typescript issue with csstype@3.1.3
567
+ // https://github.com/JedWatson/react-select/issues/5825#issuecomment-1850472549
568
+ // Remove
569
+ container: (baseStyle) => {
570
+ return {
571
+ ...baseStyle,
572
+ ...props.style,
573
+ ...props.styles?.container,
574
+ };
575
+ },
576
+ // @ts-ignorets-ignore when fixed
577
+ menuPortal: (baseStyle) => {
578
+ return {
579
+ ...baseStyle,
580
+ // needed to avoid tooltips from being displayed under this menu
581
+ // as otherwise react-select uses zIndex 1
582
+ zIndex: 'auto',
583
+ textAlign: 'left',
584
+ };
585
+ },
586
+ // @ts-ignore
587
+ menu: (baseStyle, state) => {
588
+ return {
589
+ ...baseStyle,
590
+ // needed to avoid tooltips from being displayed under this menu
591
+ // as otherwise react-select uses zIndex 1
592
+ zIndex: 'auto',
593
+ width: resizable ? '100%' : `${Math.max(maxLabelLength, 10)}ch`,
594
+ '--ab-cmp-select-menu__min-height': `min(${(props.options || []).length + (showHeaderSelectionCheckbox ? 1 : 0)} * var(--ab-grid-row-height) + ${searchableInMenulist ? 40 : 0}px, ${searchableInMenulist ? 22 : 20}rem)`,
595
+ maxHeight: 'var(--ab-cmp-select-menu__max-height)',
596
+ minWidth: 'var(--ab-cmp-select-menu__min-width)',
597
+ maxWidth: 'var(--ab-cmp-select-menu__max-width)',
598
+ ...commonStyles(state),
599
+ ...props.menuStyle,
600
+ };
601
+ },
602
+ // @ts-ignore
603
+ option: (baseStyle, state) => {
604
+ const style = {
605
+ ...baseStyle,
606
+ ...commonStyles(state),
607
+ '&:active': {
608
+ background: 'var(--ab-cmp-select-option-active__background)',
609
+ },
610
+ };
611
+ if (state.isSelected) {
612
+ style.background = 'var(--ab-cmp-select-option-active__background)';
613
+ style.color = 'var(--ab-cmp-select-option-active__color)';
614
+ }
615
+ if (state.isFocused) {
616
+ style.background = 'var(--ab-cmp-select-option-focused__background)';
617
+ }
618
+ return style;
619
+ },
620
+ // @ts-ignore
621
+ input: (baseStyle, state) => {
622
+ return {
623
+ ...baseStyle,
624
+ padding: props.size === 'small' ? 0 : baseStyle.padding,
625
+ color: 'var(--ab-cmp-select__color)',
626
+ };
627
+ },
628
+ valueContainer: (baseStyle) => {
629
+ return {
630
+ ...baseStyle,
631
+ padding: props.size === 'small' ? `0 var(--ab-space-1)` : baseStyle.padding,
632
+ ...props.styles?.valueContainer,
633
+ };
634
+ },
635
+ // @ts-ignore
636
+ singleValue: (baseStyle, state) => {
637
+ return {
638
+ ...baseStyle,
639
+ ...commonStyles(state),
640
+ };
641
+ },
642
+ // @ts-ignore
643
+ control: (baseStyle, state) => {
644
+ return {
645
+ ...baseStyle,
646
+ ...commonStyles(state), // height: 30,
647
+ minHeight: props.size === 'small' ? 0 : '100%',
648
+ boxShadow: state.isFocused ? 'var(--ab-cmp-select-focused__box-shadow)' : 'none',
649
+ outline: state.isFocused ? 'var(--ab-cmp-select-focused__outline)' : 'none',
626
650
  border: 'var(--ab-cmp-select__border)',
627
- },
628
- ...props.styles?.control,
629
- };
630
- },
631
- // @ts-ignore
632
- dropdownIndicator: (baseStyle) => {
633
- return {
634
- ...baseStyle,
635
- padding: 0,
636
- ...props.styles?.dropdownIndicator,
637
- };
638
- },
639
- // @ts-ignore
640
- clearIndicator: (baseStyle) => {
641
- return {
642
- ...baseStyle,
643
- padding: '2px 3px',
644
- };
645
- },
646
- multiValue: (baseStyle) => {
647
- return {
648
- ...baseStyle,
649
- color: 'var(--ab-cmp-select__color)',
650
- background: 'var(--ab-cmp-select-multi-value__background)',
651
- border: 'var(--ab-cmp-select__border)',
652
- };
653
- },
654
- multiValueLabel: (baseStyle) => {
655
- return {
656
- ...baseStyle,
657
- ...fontCommonStyles,
658
- color: 'var(--ab-cmp-select__color)',
659
- };
660
- },
661
- } }));
651
+ borderRadius: 'var(--ab-cmp-select__border-radius)',
652
+ '&:hover': {
653
+ border: 'var(--ab-cmp-select__border)',
654
+ },
655
+ ...props.styles?.control,
656
+ };
657
+ },
658
+ // @ts-ignore
659
+ dropdownIndicator: (baseStyle) => {
660
+ return {
661
+ ...baseStyle,
662
+ padding: 0,
663
+ ...props.styles?.dropdownIndicator,
664
+ };
665
+ },
666
+ // @ts-ignore
667
+ clearIndicator: (baseStyle) => {
668
+ return {
669
+ ...baseStyle,
670
+ padding: '2px 3px',
671
+ };
672
+ },
673
+ multiValue: (baseStyle) => {
674
+ return {
675
+ ...baseStyle,
676
+ color: 'var(--ab-cmp-select__color)',
677
+ background: 'var(--ab-cmp-select-multi-value__background)',
678
+ border: 'var(--ab-cmp-select__border)',
679
+ };
680
+ },
681
+ multiValueLabel: (baseStyle) => {
682
+ return {
683
+ ...baseStyle,
684
+ ...fontCommonStyles,
685
+ color: 'var(--ab-cmp-select__color)',
686
+ };
687
+ },
688
+ } })));
662
689
  };
663
690
  exports.Select = Select;
package/src/env.js CHANGED
@@ -2,6 +2,6 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.default = {
4
4
  NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
5
- PUBLISH_TIMESTAMP: 1758711922044 || Date.now(),
6
- VERSION: "21.0.2" || '--current-version--',
5
+ PUBLISH_TIMESTAMP: 1758887620106 || Date.now(),
6
+ VERSION: "21.0.4" || '--current-version--',
7
7
  };