@geneui/components 3.0.0-next-7a73b77-22052026 → 3.0.0-next-2fa65ce-08062026

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 (52) hide show
  1. package/Accordion.js +2 -3
  2. package/ActionableList.js +6 -25
  3. package/Banner.js +2 -3
  4. package/Breadcrumb.js +11 -12
  5. package/{ButtonGroup-b4b22335.js → ButtonGroup-f8e59eb9.js} +5 -4
  6. package/ButtonGroup.js +2 -3
  7. package/{ColorPicker-76533087.js → ColorPicker-c6af3618.js} +1 -1
  8. package/ColorPicker.js +35 -18
  9. package/DataCard.js +2 -3
  10. package/DataCardList.js +2 -3
  11. package/DataTable.js +20 -14
  12. package/Drawer.js +2 -3
  13. package/Dropdown.js +431 -0
  14. package/DropdownItem-c643e1f0.js +7 -0
  15. package/Empty.js +2 -3
  16. package/GlobalHeader.js +3 -4
  17. package/Image.js +2 -3
  18. package/Info.js +4 -3
  19. package/List.js +2 -3
  20. package/{ThreeDotsHorizontal-479c2b4b.js → Magnifier-8df67f2d.js} +3 -9
  21. package/Menu.js +2 -3
  22. package/Modal.js +2 -3
  23. package/Navigation.js +6 -7
  24. package/Notification.js +2 -3
  25. package/OTPField.js +2 -3
  26. package/PageHeader.js +10 -11
  27. package/Pagination-5de60aef.js +4 -0
  28. package/Pagination.js +37 -19
  29. package/Popover.js +2 -3
  30. package/PopoverConfirm.js +2 -3
  31. package/{Products-4d9d10d2.js → Products-d6d5921f.js} +1 -1
  32. package/Products.js +3 -3
  33. package/Profile.js +2 -3
  34. package/SegmentedControl.js +7 -7
  35. package/SplitButton.js +2 -3
  36. package/TextField.js +20 -4
  37. package/Tooltip.js +1 -1
  38. package/components/atoms/Popover/Popover.d.ts +6 -0
  39. package/components/molecules/ColorPicker/constants.d.ts +3 -1
  40. package/components/molecules/Dropdown/Dropdown.d.ts +169 -0
  41. package/components/molecules/Dropdown/DropdownItem/DropdownItem.d.ts +20 -0
  42. package/components/molecules/Dropdown/constants.d.ts +8 -0
  43. package/components/molecules/Dropdown/helpers.d.ts +5 -0
  44. package/components/molecules/Dropdown/index.d.ts +3 -0
  45. package/components/molecules/Dropdown/types.d.ts +25 -0
  46. package/components/molecules/TextField/TextField.d.ts +26 -1
  47. package/{index-796d2943.js → index-3dc2323a.js} +2 -3
  48. package/{index-b87da2e1.js → index-a46fb8ec.js} +28 -3
  49. package/index.d.ts +2 -2
  50. package/index.js +9 -7
  51. package/package.json +1 -1
  52. package/Pagination-3019ed0e.js +0 -4
package/Accordion.js CHANGED
@@ -7,7 +7,7 @@ import { a as SvgChevronLeft, S as SvgChevronRight } from './ChevronRight-af87e2
7
7
  import Button from './Button.js';
8
8
  import { S as Scrollbar } from './index-4388be47.js';
9
9
  import Text from './Text.js';
10
- import { B as ButtonGroup } from './index-b87da2e1.js';
10
+ import { B as ButtonGroup } from './index-a46fb8ec.js';
11
11
  import Tooltip from './Tooltip.js';
12
12
  import { u as useEllipsisDetection } from './useEllipsisDetection-c5f9b175.js';
13
13
  import { a as AccordionContext } from './Accordion-3e20a13f.js';
@@ -18,7 +18,7 @@ import './style-inject.es-746bb8ed.js';
18
18
  import 'prop-types';
19
19
  import 'react-dom';
20
20
  import './useDebounceCallback-999deae7.js';
21
- import './ButtonGroup-b4b22335.js';
21
+ import './ButtonGroup-f8e59eb9.js';
22
22
  import './index-7d785c81.js';
23
23
  import './X-20da3b4a.js';
24
24
  import './index-5becfc74.js';
@@ -26,7 +26,6 @@ import './index-9a69bcc6.js';
26
26
  import './useWindowSize-6faa0d0f.js';
27
27
  import './useDeviceInfo-8340f573.js';
28
28
  import './Divider.js';
29
- import './ThreeDotsHorizontal-479c2b4b.js';
30
29
  import './CheckMark-34798545.js';
31
30
 
32
31
  const buttonSizes = {
package/ActionableList.js CHANGED
@@ -1,17 +1,18 @@
1
1
  import React__default, { useContext, useState, useRef, useEffect, useMemo, useCallback } from 'react';
2
2
  import { _ as _slicedToArray, d as dist, a as _toConsumableArray, g as getBindingsForBrokenDrags, m as monitorForElements, c as combine, b as dropTargetForElements, e as draggable, f as disableNativeDragPreview } from './ActionableListNodeWrapper-42ea60cf.js';
3
3
  import { c as classNames } from './index-ce02421b.js';
4
- import { _ as _objectWithoutProperties, a as _extends } from './ActivityRecent-b88e2ba8.js';
4
+ import { S as SvgMagnifier } from './Magnifier-8df67f2d.js';
5
5
  import Divider from './Divider.js';
6
6
  import Loader from './Loader.js';
7
7
  import { S as Scrollbar } from './index-4388be47.js';
8
8
  import Text from './Text.js';
9
9
  import Checkbox from './Checkbox.js';
10
- import { E as Empty } from './index-b87da2e1.js';
10
+ import { E as Empty } from './index-a46fb8ec.js';
11
11
  import TextField from './TextField.js';
12
12
  import { u as useDebouncedCallback } from './useDebounceCallback-999deae7.js';
13
13
  import { S as SvgChevronDown } from './ChevronDown-ee53f094.js';
14
14
  import { S as SvgChevronRight } from './ChevronRight-af87e2a4.js';
15
+ import { _ as _objectWithoutProperties, a as _extends } from './ActivityRecent-b88e2ba8.js';
15
16
  import Button from './Button.js';
16
17
  import Info from './Info.js';
17
18
  import { createPortal } from 'react-dom';
@@ -32,20 +33,19 @@ import './index-7d785c81.js';
32
33
  import './useWindowSize-6faa0d0f.js';
33
34
  import './useDeviceInfo-8340f573.js';
34
35
  import './Checkbox-11eae830.js';
35
- import './ButtonGroup-b4b22335.js';
36
+ import './ButtonGroup-f8e59eb9.js';
36
37
  import './tslib.es6-f211516f.js';
37
38
  import './X-20da3b4a.js';
38
39
  import './index-5becfc74.js';
39
- import './ThreeDotsHorizontal-479c2b4b.js';
40
40
  import './regex-d4e84e78.js';
41
41
 
42
- var _excluded$1 = ["size", "color"];
42
+ var _excluded = ["size", "color"];
43
43
  var SvgGripDots = function SvgGripDots(_ref) {
44
44
  var _ref$size = _ref.size,
45
45
  size = _ref$size === void 0 ? 24 : _ref$size,
46
46
  _ref$color = _ref.color,
47
47
  color = _ref$color === void 0 ? "currentColor" : _ref$color,
48
- props = _objectWithoutProperties(_ref, _excluded$1);
48
+ props = _objectWithoutProperties(_ref, _excluded);
49
49
  return /*#__PURE__*/React__default.createElement("svg", _extends({
50
50
  width: size,
51
51
  height: size,
@@ -73,25 +73,6 @@ var SvgGripDots = function SvgGripDots(_ref) {
73
73
  }));
74
74
  };
75
75
 
76
- var _excluded = ["size", "color"];
77
- var SvgMagnifier = function SvgMagnifier(_ref) {
78
- var _ref$size = _ref.size,
79
- size = _ref$size === void 0 ? 24 : _ref$size,
80
- _ref$color = _ref.color,
81
- color = _ref$color === void 0 ? "currentColor" : _ref$color,
82
- props = _objectWithoutProperties(_ref, _excluded);
83
- return /*#__PURE__*/React__default.createElement("svg", _extends({
84
- width: size,
85
- height: size,
86
- viewBox: "0 0 24 24",
87
- fill: color,
88
- xmlns: "http://www.w3.org/2000/svg"
89
- }, props), /*#__PURE__*/React__default.createElement("path", {
90
- d: "m20.782 19.727-4.89-4.889a7.259 7.259 0 1 0-1.054 1.055l4.89 4.889a.745.745 0 1 0 1.054-1.055Zm-16.263-9.455a5.754 5.754 0 1 1 11.508.002 5.754 5.754 0 0 1-11.508-.002Z",
91
- fill: color
92
- }));
93
- };
94
-
95
76
  /**
96
77
  * A function that will reorder an array (`list`).
97
78
  * `reorder` returns a new array with reordered items and does not
package/Banner.js CHANGED
@@ -5,12 +5,12 @@ import { S as SvgInfo } from './Info-0f0741e0.js';
5
5
  import { S as SvgX } from './X-20da3b4a.js';
6
6
  import Button from './Button.js';
7
7
  import Text from './Text.js';
8
- import { B as ButtonGroup } from './index-b87da2e1.js';
8
+ import { B as ButtonGroup } from './index-a46fb8ec.js';
9
9
  import { a as GeneUIDesignSystemContext } from './index-9a69bcc6.js';
10
10
  import './Banner-09cf6dea.js';
11
11
  import './Loader.js';
12
12
  import './style-inject.es-746bb8ed.js';
13
- import './ButtonGroup-b4b22335.js';
13
+ import './ButtonGroup-f8e59eb9.js';
14
14
  import './tslib.es6-f211516f.js';
15
15
  import './index-7d785c81.js';
16
16
  import 'react-dom';
@@ -20,7 +20,6 @@ import 'prop-types';
20
20
  import './useDebounceCallback-999deae7.js';
21
21
  import './Divider.js';
22
22
  import './index-15303b91.js';
23
- import './ThreeDotsHorizontal-479c2b4b.js';
24
23
  import './CheckMark-34798545.js';
25
24
  import './ChevronRight-af87e2a4.js';
26
25
  import './useWindowSize-6faa0d0f.js';
package/Breadcrumb.js CHANGED
@@ -1,27 +1,26 @@
1
- export { B as default } from './index-796d2943.js';
1
+ export { B as default } from './index-3dc2323a.js';
2
2
  import 'react';
3
3
  import './index-ce02421b.js';
4
4
  import './ActivityRecent-b88e2ba8.js';
5
- import './ThreeDotsHorizontal-479c2b4b.js';
6
- import './Button.js';
5
+ import './index-a46fb8ec.js';
6
+ import './ButtonGroup-f8e59eb9.js';
7
+ import './tslib.es6-f211516f.js';
7
8
  import './Loader.js';
8
9
  import './style-inject.es-746bb8ed.js';
9
- import './Text.js';
10
- import './Tooltip.js';
11
10
  import './index-7d785c81.js';
12
11
  import 'react-dom';
13
- import './index-9a69bcc6.js';
14
- import './useWindowSize-6faa0d0f.js';
15
- import './useDebounceCallback-999deae7.js';
16
- import './useDeviceInfo-8340f573.js';
17
- import './ButtonGroup-b4b22335.js';
18
- import './tslib.es6-f211516f.js';
19
12
  import './X-20da3b4a.js';
13
+ import './Button.js';
20
14
  import './index-5becfc74.js';
21
15
  import './index-4388be47.js';
22
16
  import 'prop-types';
17
+ import './useDebounceCallback-999deae7.js';
18
+ import './index-9a69bcc6.js';
19
+ import './useWindowSize-6faa0d0f.js';
20
+ import './useDeviceInfo-8340f573.js';
21
+ import './Text.js';
23
22
  import './Divider.js';
24
- import './index-b87da2e1.js';
25
23
  import './index-15303b91.js';
26
24
  import './CheckMark-34798545.js';
27
25
  import './ChevronRight-af87e2a4.js';
26
+ import './Tooltip.js';
package/{ButtonGroup-b4b22335.js → ButtonGroup-f8e59eb9.js} RENAMED
@@ -12,7 +12,7 @@ import { S as Scrollbar } from './index-4388be47.js';
12
12
  import './Text.js';
13
13
  import './Divider.js';
14
14
 
15
- var css_248z$3 = ".popover{background-color:var(--guit-sem-color-background-neutral-1-nudge);border-top-left-radius:var(--guit-ref-radius-2xsmall);border-top-right-radius:var(--guit-ref-radius-2xsmall);filter:drop-shadow(var(--guit-sem-shadow-floating-2-position-x-1) var(--guit-sem-shadow-floating-2-position-y-1) var(--guit-sem-shadow-floating-2-blur-1) var(--guit-sem-color-floating-2-rgba-1)) drop-shadow(var(--guit-sem-shadow-floating-2-position-x-2) var(--guit-sem-shadow-floating-2-position-y-2) var(--guit-sem-shadow-floating-2-blur-2) var(--guit-sem-color-floating-2-rgba-2));z-index:1}.popover:not(.popover_size_mobile){border-bottom-left-radius:var(--guit-ref-radius-2xsmall);border-bottom-right-radius:var(--guit-ref-radius-2xsmall)}.popover:not(.popover_size_mobile) .popover__arrow{position:absolute}.popover:not(.popover_size_mobile) .popover__arrowPath{fill:var(--guit-sem-color-background-neutral-1-nudge)}.popover_position_top .popover__arrow{transform:rotate(180deg)}.popover_position_bottom .popover__arrow{transform:rotate(0deg)}.popover_position_left .popover__arrow{transform:rotate(90deg)}.popover_position_right .popover__arrow{transform:rotate(-90deg)}.popover_size_xLarge .popover__container{max-height:82rem;max-width:82rem;min-width:64rem}.popover_size_large .popover__container{max-height:64rem;max-width:64rem;min-width:52rem}.popover_size_medium .popover__container{max-height:52rem;max-width:52rem;min-width:28rem}.popover_size_small .popover__container{max-height:52rem;max-width:28rem;min-width:16rem}.popover_size_large .popover__footer,.popover_size_xLarge .popover__footer{height:6.4rem}.popover_size_fitContent{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.popover_size_reference{min-width:auto;width:var(--parent-width)}.popover__container{display:grid;grid-template-rows:auto 1fr auto}.popover__container_height_full{display:flex;flex-direction:column;height:100%;justify-content:space-between}.popover__header{border-bottom:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);flex:none;height:var(--guit-sem-dimension-height-2xlarge);justify-content:space-between;padding-inline:var(--guit-ref-spacing-large)}.popover__header,.popover__title{align-items:center;column-gap:var(--guit-ref-spacing-xsmall);display:flex;overflow:hidden}.popover__title{color:var(--guit-sem-color-foreground-neutral-2);flex:1}.popover__title_icon{flex:0 0 auto}.popover__title_text{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family),sans-serif;font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-semibold-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.popover__close{flex:0 0 auto}.popover__body{flex:1;height:100%;min-height:0;min-width:0}.popover__body_withPadding{padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large)}.popover__footer{border-top:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);flex:none;justify-content:space-between;overflow:hidden;padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large)}.popover__footer,.popover__footerActions{align-items:center;column-gap:var(--guit-ref-spacing-xsmall);display:flex}.popover__footerActions{-webkit-margin-start:auto;margin-inline-start:auto}";
15
+ var css_248z$3 = ".popover{background-color:var(--guit-sem-color-background-neutral-1-nudge);border-top-left-radius:var(--guit-ref-radius-2xsmall);border-top-right-radius:var(--guit-ref-radius-2xsmall);filter:drop-shadow(var(--guit-sem-shadow-floating-2-position-x-1) var(--guit-sem-shadow-floating-2-position-y-1) var(--guit-sem-shadow-floating-2-blur-1) var(--guit-sem-color-floating-2-rgba-1)) drop-shadow(var(--guit-sem-shadow-floating-2-position-x-2) var(--guit-sem-shadow-floating-2-position-y-2) var(--guit-sem-shadow-floating-2-blur-2) var(--guit-sem-color-floating-2-rgba-2));z-index:11}.popover:not(.popover_size_mobile){border-bottom-left-radius:var(--guit-ref-radius-2xsmall);border-bottom-right-radius:var(--guit-ref-radius-2xsmall)}.popover:not(.popover_size_mobile) .popover__arrow{position:absolute}.popover:not(.popover_size_mobile) .popover__arrowPath{fill:var(--guit-sem-color-background-neutral-1-nudge)}.popover_position_top .popover__arrow{transform:rotate(180deg)}.popover_position_bottom .popover__arrow{transform:rotate(0deg)}.popover_position_left .popover__arrow{transform:rotate(90deg)}.popover_position_right .popover__arrow{transform:rotate(-90deg)}.popover_size_xLarge .popover__container{max-height:82rem;max-width:82rem;min-width:64rem}.popover_size_large .popover__container{max-height:64rem;max-width:64rem;min-width:52rem}.popover_size_medium .popover__container{max-height:52rem;max-width:52rem;min-width:28rem}.popover_size_small .popover__container{max-height:52rem;max-width:28rem;min-width:16rem}.popover_size_large .popover__footer,.popover_size_xLarge .popover__footer{height:6.4rem}.popover_size_fitContent{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.popover_size_reference{min-width:auto;width:var(--parent-width)}.popover__container{display:grid;grid-template-rows:auto 1fr auto}.popover__container_height_full{display:flex;flex-direction:column;height:100%;justify-content:space-between}.popover__header{border-bottom:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);flex:none;height:var(--guit-sem-dimension-height-2xlarge);justify-content:space-between;padding-inline:var(--guit-ref-spacing-large)}.popover__header,.popover__title{align-items:center;column-gap:var(--guit-ref-spacing-xsmall);display:flex;overflow:hidden}.popover__title{color:var(--guit-sem-color-foreground-neutral-2);flex:1}.popover__title_icon{flex:0 0 auto}.popover__title_text{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family),sans-serif;font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-semibold-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.popover__close{flex:0 0 auto}.popover__body{flex:1;height:100%;min-height:0;min-width:0}.popover__body_withPadding{padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large)}.popover__footer{border-top:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);flex:none;justify-content:space-between;overflow:hidden;padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large)}.popover__footer,.popover__footerActions{align-items:center;column-gap:var(--guit-ref-spacing-xsmall);display:flex}.popover__footerActions{-webkit-margin-start:auto;margin-inline-start:auto}";
16
16
  styleInject(css_248z$3);
17
17
 
18
18
  const getPositionRect = (currentPopoverRect, position) => {
@@ -165,7 +165,7 @@ const staticSides = {
165
165
  such as a click or hover. Unlike tooltips, popovers can contain more
166
166
  complex and interactive content, including text, images, and form elements.
167
167
  */
168
- const Popover = forwardRef(({ size = "medium", fitReference, position = "bottom-center", margin = 10, defaultOpen = false, setProps, title, withArrow = true, children, disableReposition = false, onClose, open, trigger = "click", hasCloseButton = true, Icon, mobileHeightMode = "full" }, popoverRef) => {
168
+ const Popover = forwardRef(({ size = "medium", fitReference, position = "bottom-center", margin = 10, defaultOpen = false, setProps, title, withArrow = true, children, disableReposition = false, onClose, open, trigger = "click", hasCloseButton = true, Icon, mobileHeightMode = "full", disableMobileSpreadsheet = false }, popoverRef) => {
169
169
  const [popoverOpened, setPopoverOpened] = useState(defaultOpen);
170
170
  const { geneUIProviderRef, breakpoint } = useContext(GeneUIDesignSystemContext);
171
171
  const [currentPosition, setCurrentPosition] = useState(correctPosition[position]);
@@ -299,8 +299,9 @@ const Popover = forwardRef(({ size = "medium", fitReference, position = "bottom-
299
299
  }, [popoverOpened, refs.floating.current, placement, position, currentPosition]);
300
300
  const arrowOffsetFromEdge = 5;
301
301
  const parentElement = refs.reference.current;
302
+ const shouldUseSpreadsheet = isMobile && !disableMobileSpreadsheet;
302
303
  return (React__default.createElement(React__default.Fragment, null, isPopoverOpened &&
303
- (isMobile ? (React__default.createElement(Spreadsheet, { inset: false, open: isPopoverOpened, heightMode: mobileHeightMode, onClose: (e) => handleOpenChange(false, e, "mobile-dismiss") },
304
+ (shouldUseSpreadsheet ? (React__default.createElement(Spreadsheet, { inset: false, open: isPopoverOpened, heightMode: mobileHeightMode, onClose: (e) => handleOpenChange(false, e, "mobile-dismiss") },
304
305
  React__default.createElement("div", Object.assign({ className: classNames("popover__container", "popover__container_height_full"), ref: refs.setFloating }, getFloatingProps()),
305
306
  title && (React__default.createElement("div", { className: "popover__header" },
306
307
  React__default.createElement("p", { className: "popover__title" },
@@ -309,7 +310,7 @@ const Popover = forwardRef(({ size = "medium", fitReference, position = "bottom-
309
310
  hasCloseButton && (React__default.createElement(Button, { Icon: SvgX, size: "small", appearance: "secondary", layout: "text", className: "popover__close", onClick: (e) => handleOpenChange(false, e, "close-button") })))),
310
311
  children))) : (React__default.createElement(FloatingPortal, { root: geneUIProviderRef.current },
311
312
  React__default.createElement("div", Object.assign({ style: fitReference && parentElement
312
- ? Object.assign(Object.assign({}, floatingStyles), { "--parent-width": `${parentElement === null || parentElement === void 0 ? void 0 : parentElement.offsetWidth}px` }) : floatingStyles, className: classNames(`popover popover_position_${currentDirection} popover_size_${size}`, { popover_size_reference: fitReference }), ref: refs.setFloating }, getFloatingProps()),
313
+ ? Object.assign(Object.assign({}, floatingStyles), { "--parent-width": `${parentElement === null || parentElement === void 0 ? void 0 : parentElement.offsetWidth}px` }) : floatingStyles, className: classNames("popover", `popover_position_${currentDirection}`, { popover_size_reference: fitReference }, !fitReference && `popover_size_${size}`), ref: refs.setFloating }, getFloatingProps()),
313
314
  React__default.createElement("div", { ref: arrowRef, className: "popover__arrow", style: Object.assign(Object.assign({}, getCorrectPosition), { top: middlewareArrowData === null || middlewareArrowData === void 0 ? void 0 : middlewareArrowData.y, [staticSide]: arrowRef.current
314
315
  ? `${-arrowRef.current.offsetWidth + arrowOffsetFromEdge}px`
315
316
  : 0 }) },
package/ButtonGroup.js CHANGED
@@ -1,5 +1,5 @@
1
- export { B as default } from './index-b87da2e1.js';
2
- import './ButtonGroup-b4b22335.js';
1
+ export { B as default } from './index-a46fb8ec.js';
2
+ import './ButtonGroup-f8e59eb9.js';
3
3
  import './tslib.es6-f211516f.js';
4
4
  import 'react';
5
5
  import './index-ce02421b.js';
@@ -20,6 +20,5 @@ import './useDeviceInfo-8340f573.js';
20
20
  import './Text.js';
21
21
  import './Divider.js';
22
22
  import './index-15303b91.js';
23
- import './ThreeDotsHorizontal-479c2b4b.js';
24
23
  import './CheckMark-34798545.js';
25
24
  import './ChevronRight-af87e2a4.js';
package/{ColorPicker-76533087.js → ColorPicker-c6af3618.js} RENAMED
@@ -9,5 +9,5 @@ styleInject(css_248z$2);
9
9
  var css_248z$1 = ".colorPalette{display:flex;flex-direction:column;gap:var(--guit-ref-spacing-large);height:auto;width:100%}.colorPalette__saturation{border-bottom:none;border-radius:.4rem;box-shadow:none;cursor:crosshair;height:16rem;position:relative;touch-action:none}.colorPalette__saturationPointer{border:var(--guit-ref-border-width-thick) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-1);border-radius:50%;box-shadow:var(--guit-sem-shadow-floating-1-position-x-1) var(--guit-sem-shadow-floating-1-position-y-1) var(--guit-sem-shadow-floating-2-blur-2) var(--guit-sem-shadow-floating-1-spread-1) var(--guit-sem-color-floating-2-rgba-1),var(--guit-sem-shadow-floating-1-position-x-1) var(--guit-sem-shadow-floating-1-position-y-2) var(--guit-sem-shadow-floating-1-blur-2) var(--guit-sem-shadow-floating-2-spread-2) var(--guit-sem-color-floating-2-rgba-2);height:1.4rem;position:absolute;transform:translate(-50%,-50%);width:1.4rem}.colorPalette__alpha,.colorPalette__hue{border-radius:10rem;cursor:pointer;height:.8rem;position:relative;width:100%}.colorPalette__alpha{background-image:conic-gradient(#e6e6e6 90deg,#0000 90deg 180deg,#e6e6e6 180deg 270deg,#0000 270deg);background-size:.6rem 66%}.colorPalette__alphaPointer,.colorPalette__huePointer{border:var(--guit-ref-border-width-thick) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-1);border-radius:50%;box-shadow:var(--guit-sem-shadow-floating-1-position-x-1) var(--guit-sem-shadow-floating-1-position-y-1) var(--guit-sem-shadow-floating-2-blur-2) var(--guit-sem-shadow-floating-1-spread-1) var(--guit-sem-color-floating-2-rgba-1),var(--guit-sem-shadow-floating-1-position-x-1) var(--guit-sem-shadow-floating-1-position-y-2) var(--guit-sem-shadow-floating-1-blur-2) var(--guit-sem-shadow-floating-2-spread-2) var(--guit-sem-color-floating-2-rgba-2);height:1rem;position:absolute;top:50%;transform:translate(-50%,-50%);width:1rem}.colorPalette__alphaInput{max-width:6rem}.colorPalette__alphaGradient{border-radius:inherit;box-shadow:none;inset:0;position:absolute}";
10
10
  styleInject(css_248z$1);
11
11
 
12
- var css_248z = ".colorPicker{display:flex;flex-direction:column;gap:var(--guit-ref-spacing-2xsmall);width:100%}.colorPicker__textField{max-width:16rem}.colorPicker__alphaField{max-width:6rem}.colorPicker__alphaInput{max-width:7rem}.colorPicker__inputs{display:flex;width:100%}.colorPicker__inputsRgb{gap:var(--guit-ref-spacing-3xsmall)}.colorPicker__inputsHex{gap:var(--guit-ref-spacing-2xsmall)}.colorPicker__rgbInputs{display:flex;gap:var(--guit-ref-spacing-3xsmall);width:100%}.colorPicker__hexInput{unicode-bidi:bidi-override;width:100%}.colorPicker__recents{grid-gap:var(--guit-ref-spacing-xsmall) .5rem;display:grid;grid-template-columns:repeat(10,1fr);padding-inline:var(--guit-ref-spacing-3xsmall);width:100%}.colorPicker__recentColorWrapper{height:var(--guit-sem-dimension-height-small);padding:.2rem;width:var(--guit-sem-dimension-width-small)}.colorPicker__recentColor{background:var(--color-picker-recent-color,#0000);border:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);border-radius:var(--guit-ref-radius-4xsmall);height:100%;overflow:hidden;position:relative;width:100%}.colorPicker__recentColor__empty:after{background-color:var(--guit-sem-color-background-error-2);content:\"\";height:150%;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:.1rem}.colorPicker__wrapper{display:flex;flex-direction:column;gap:var(--guit-ref-spacing-medium);padding:var(--guit-ref-spacing-large);width:32rem}.colorPicker__wrapper_mobile{width:100%}";
12
+ var css_248z = ".colorPicker{display:flex;flex-direction:column;gap:var(--guit-ref-spacing-2xsmall);width:100%}.colorPicker__textField{max-width:16rem}.colorPicker__alphaField{max-width:6rem}.colorPicker__alphaInput{flex:0 0 auto;max-width:7rem;width:7rem}.colorPicker__inputs{align-items:center;display:flex;min-width:0;width:100%}.colorPicker__inputsRgb{gap:var(--guit-ref-spacing-3xsmall)}.colorPicker__inputsHex{gap:var(--guit-ref-spacing-2xsmall)}.colorPicker__rgbInputs{display:flex;flex:1;gap:var(--guit-ref-spacing-3xsmall);min-width:0}.colorPicker__hexInput{flex:1 1 0;min-width:0;unicode-bidi:bidi-override}.colorPicker__rgbInput{flex:1;min-width:0}.colorPicker__formatDropdown{flex:0 0 8.6rem;max-width:8.6rem;width:8.6rem}.colorPicker__recents{grid-gap:var(--guit-ref-spacing-xsmall) .5rem;display:grid;grid-template-columns:repeat(10,1fr);padding-inline:var(--guit-ref-spacing-3xsmall);width:100%}.colorPicker__recentColorWrapper{height:var(--guit-sem-dimension-height-small);padding:.2rem;width:var(--guit-sem-dimension-width-small)}.colorPicker__recentColor{background:var(--color-picker-recent-color,#0000);border:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);border-radius:var(--guit-ref-radius-4xsmall);height:100%;overflow:hidden;position:relative;width:100%}.colorPicker__recentColor__empty:after{background-color:var(--guit-sem-color-background-error-2);content:\"\";height:150%;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:.1rem}.colorPicker__wrapper{display:flex;flex-direction:column;gap:var(--guit-ref-spacing-medium);padding:var(--guit-ref-spacing-large);width:32rem}.colorPicker__wrapper_mobile{width:100%}";
13
13
  styleInject(css_248z);
package/ColorPicker.js CHANGED
@@ -2,7 +2,7 @@ import React__default, { useState, useEffect, useRef, useCallback, useContext, u
2
2
  import { c as classNames } from './index-ce02421b.js';
3
3
  import { _ as _objectWithoutProperties, a as _extends } from './ActivityRecent-b88e2ba8.js';
4
4
  import Label from './Label.js';
5
- import { P as Popover, a as PopoverBody } from './ButtonGroup-b4b22335.js';
5
+ import { P as Popover, a as PopoverBody } from './ButtonGroup-f8e59eb9.js';
6
6
  import './tslib.es6-f211516f.js';
7
7
  import './Button.js';
8
8
  import './index-7d785c81.js';
@@ -10,23 +10,33 @@ import './Loader.js';
10
10
  import './index-4388be47.js';
11
11
  import './Text.js';
12
12
  import Divider from './Divider.js';
13
- import './ColorPicker-76533087.js';
14
- import TextField from './TextField.js';
13
+ import './ColorPicker-c6af3618.js';
14
+ import Dropdown from './Dropdown.js';
15
+ import './Tooltip.js';
15
16
  import { a as GeneUIDesignSystemContext } from './index-9a69bcc6.js';
16
- import { u as useDebouncedCallback } from './useDebounceCallback-999deae7.js';
17
17
  import './Info.js';
18
- import './Info-0f0741e0.js';
19
- import './Tooltip.js';
18
+ import './HelperText.js';
19
+ import './Checkbox-11eae830.js';
20
+ import './DropdownItem-c643e1f0.js';
21
+ import TextField from './TextField.js';
22
+ import { u as useDebouncedCallback } from './useDebounceCallback-999deae7.js';
23
+ import './useEllipsisDetection-c5f9b175.js';
24
+ import './useWindowSize-6faa0d0f.js';
20
25
  import './style-inject.es-746bb8ed.js';
26
+ import './Info-0f0741e0.js';
21
27
  import 'react-dom';
22
- import './useWindowSize-6faa0d0f.js';
23
28
  import './useDeviceInfo-8340f573.js';
24
- import './useEllipsisDetection-c5f9b175.js';
25
29
  import './X-20da3b4a.js';
26
30
  import './index-5becfc74.js';
27
31
  import 'prop-types';
32
+ import './CaretDownFilled-924e7189.js';
33
+ import './Magnifier-8df67f2d.js';
34
+ import './index-a46fb8ec.js';
28
35
  import './index-15303b91.js';
29
- import './HelperText.js';
36
+ import './CheckMark-34798545.js';
37
+ import './ChevronRight-af87e2a4.js';
38
+ import './Checkbox.js';
39
+ import './Minus-c3ff7a21.js';
30
40
  import './ErrorFilled-f4226310.js';
31
41
  import './TriangleAlert-ba250f4c.js';
32
42
  import './regex-d4e84e78.js';
@@ -56,6 +66,10 @@ const RGB_CHANNELS = ["r", "g", "b"];
56
66
  * Default empty RGBA state used when resetting or clearing color selection
57
67
  */
58
68
  const EMPTY_RGBA = { r: "", g: "", b: "", a: 1 };
69
+ const FORMAT_OPTIONS = [
70
+ { id: "rgb", label: "RGB", value: "rgb" },
71
+ { id: "hex", label: "HEX", value: "hex" }
72
+ ];
59
73
 
60
74
  /**
61
75
  * Converts an RGB or RGBA color object to a 6-character HEX string.
@@ -548,7 +562,8 @@ const ColorPicker = ({ className, alphaEnabled = false, alphaValue, value, defau
548
562
  const isOpenControlled = open !== undefined;
549
563
  const [isOpen, setIsOpen] = useState(!!open);
550
564
  const [isAlphaEnabled, setIsAlphaEnabled] = useState(alphaEnabled);
551
- const [formatState, setFormatState] = useState(format);
565
+ const [colorFormatMode, setColorFormatMode] = useState(format);
566
+ const [isFormatDropdownOpen, setIsFormatDropdownOpen] = useState(false);
552
567
  const [propsForPopover, setPropsForPopover] = useState({});
553
568
  const { breakpoint } = useContext(GeneUIDesignSystemContext);
554
569
  const isMobileBreakpoint = breakpoint === null || breakpoint === void 0 ? void 0 : breakpoint.isMobileBreakpoint;
@@ -676,7 +691,7 @@ const ColorPicker = ({ className, alphaEnabled = false, alphaValue, value, defau
676
691
  setIsOpen(open);
677
692
  }, [open, isOpenControlled]);
678
693
  useEffect(() => {
679
- setFormatState(format);
694
+ setColorFormatMode(format);
680
695
  }, [format]);
681
696
  useEffect(() => {
682
697
  setIsAlphaEnabled(alphaEnabled);
@@ -684,20 +699,22 @@ const ColorPicker = ({ className, alphaEnabled = false, alphaValue, value, defau
684
699
  return (React__default.createElement("div", Object.assign({ className: classNames("colorPicker", className) }, propsForPopover),
685
700
  React__default.createElement(Label, { size: size === "large" ? "medium" : size, text: label, infoText: labelInfoText, labelFor: "colorPickerTextField" }),
686
701
  React__default.createElement(ColorPickerTextField, { id: "colorPickerTextField", value: localHex, alpha: alpha, alphaEnabled: isAlphaEnabled, onChange: handleHexInputChange, onAlphaChange: handleAlphaChange, placeholder: placeholder, onPickerOpen: handleOpen, size: size }),
687
- React__default.createElement(Popover, { onClose: () => handleOpen(false), withArrow: false, ref: popoverRef, position: "bottom-left", open: isOpen, setProps: setPropsForPopover, mobileHeightMode: "fit" },
702
+ React__default.createElement(Popover, { onClose: () => {
703
+ if (isFormatDropdownOpen)
704
+ return;
705
+ handleOpen(false);
706
+ }, withArrow: false, ref: popoverRef, position: "bottom-left", open: isOpen, setProps: setPropsForPopover, mobileHeightMode: "fit" },
688
707
  React__default.createElement(PopoverBody, { withPadding: false },
689
708
  React__default.createElement("div", { className: classNames("colorPicker__wrapper", {
690
709
  colorPicker__wrapper_mobile: isMobileBreakpoint
691
710
  }) },
692
711
  isAlphaEnabled ? (React__default.createElement(RgbaColorPicker, { color: rgba, onChange: handlePickerChange })) : (React__default.createElement(HexColorPicker, { color: hex, onChange: handlePickerChange })),
693
712
  React__default.createElement("div", { className: classNames("colorPicker__inputs", {
694
- colorPicker__inputsRgb: format === "rgb",
695
- colorPicker__inputsHex: format === "hex"
713
+ colorPicker__inputsRgb: colorFormatMode === "rgb",
714
+ colorPicker__inputsHex: colorFormatMode === "hex"
696
715
  }) },
697
- React__default.createElement("select", { name: "color_formats", value: formatState, onChange: (e) => setFormatState(e.target.value) },
698
- React__default.createElement("option", { value: "rgb" }, "RGB"),
699
- React__default.createElement("option", { value: "hex" }, "HEX")),
700
- formatState === "hex" ? (React__default.createElement(TextField, { type: "text", size: "small", value: localHex, onChange: handleHexInputChange, placeholder: "Hex", autoComplete: "off", className: "colorPicker__hexInput" })) : (React__default.createElement("div", { className: "colorPicker__rgbInputs" }, RGB_CHANNELS.map((channel) => (React__default.createElement(TextField, { key: channel, size: "small", value: rgba[channel], autoComplete: "off", placeholder: channel, type: "number", name: channel, onChange: (e) => handleRGBInputChange(channel, Number(e.target.value)) }))))),
716
+ React__default.createElement(Dropdown, { className: "colorPicker__formatDropdown", options: FORMAT_OPTIONS, value: colorFormatMode, size: "small", onOpenChange: setIsFormatDropdownOpen, onChange: (option) => setColorFormatMode(option.value) }),
717
+ colorFormatMode === "hex" ? (React__default.createElement(TextField, { type: "text", size: "small", value: localHex, onChange: handleHexInputChange, placeholder: "Hex", autoComplete: "off", className: "colorPicker__hexInput" })) : (React__default.createElement("div", { className: "colorPicker__rgbInputs" }, RGB_CHANNELS.map((channel) => (React__default.createElement(TextField, { className: "colorPicker__rgbInput", key: channel, size: "small", value: rgba[channel], autoComplete: "off", placeholder: channel, type: "number", name: channel, onChange: (e) => handleRGBInputChange(channel, Number(e.target.value)) }))))),
701
718
  isAlphaEnabled && (React__default.createElement(TextField, { type: "number", size: "small", placeholder: "Alpha", autoComplete: "off", value: alpha, className: "colorPicker__alphaInput", onChange: handleAlphaChange, IconAfter: SvgPercent }))),
702
719
  recentColors && (recentColors === null || recentColors === void 0 ? void 0 : recentColors.length) > 0 && (React__default.createElement("div", { className: "colorPicker__recents" }, recentColors.map((recentColor) => (React__default.createElement("div", { className: "colorPicker__recentColorWrapper", key: recentColor },
703
720
  React__default.createElement("button", { key: recentColor, type: "button", className: classNames("colorPicker__recentColor", {
package/DataCard.js CHANGED
@@ -6,8 +6,8 @@ import { S as Spreadsheet } from './index-5becfc74.js';
6
6
  import TextLink from './TextLink.js';
7
7
  import { K as KeyValue } from './KeyValue-2fdb0641.js';
8
8
  import { Key, Value } from './KeyValue.js';
9
- import { M as Menu } from './ButtonGroup-b4b22335.js';
10
- import { M as MenuItem } from './index-b87da2e1.js';
9
+ import { M as Menu } from './ButtonGroup-f8e59eb9.js';
10
+ import { M as MenuItem } from './index-a46fb8ec.js';
11
11
  import './DataCard-3601ca38.js';
12
12
  import './Loader.js';
13
13
  import './style-inject.es-746bb8ed.js';
@@ -32,7 +32,6 @@ import './X-20da3b4a.js';
32
32
  import './Text.js';
33
33
  import './Divider.js';
34
34
  import './index-15303b91.js';
35
- import './ThreeDotsHorizontal-479c2b4b.js';
36
35
  import './CheckMark-34798545.js';
37
36
  import './ChevronRight-af87e2a4.js';
38
37
 
package/DataCardList.js CHANGED
@@ -27,14 +27,13 @@ import './KeyValue-2fdb0641.js';
27
27
  import './KeyValue.js';
28
28
  import './Info.js';
29
29
  import './Info-0f0741e0.js';
30
- import './ButtonGroup-b4b22335.js';
30
+ import './ButtonGroup-f8e59eb9.js';
31
31
  import './tslib.es6-f211516f.js';
32
32
  import './X-20da3b4a.js';
33
33
  import './Text.js';
34
34
  import './Divider.js';
35
- import './index-b87da2e1.js';
35
+ import './index-a46fb8ec.js';
36
36
  import './index-15303b91.js';
37
- import './ThreeDotsHorizontal-479c2b4b.js';
38
37
  import './CheckMark-34798545.js';
39
38
  import './ChevronRight-af87e2a4.js';
40
39
  import './DataCard-3601ca38.js';
package/DataTable.js CHANGED
@@ -10,33 +10,39 @@ import { a as SvgChevronLeft, S as SvgChevronRight } from './ChevronRight-af87e2
10
10
  import Button from './Button.js';
11
11
  import { u as useEllipsisDetection } from './useEllipsisDetection-c5f9b175.js';
12
12
  import Loader from './Loader.js';
13
- import { E as Empty } from './index-b87da2e1.js';
13
+ import { E as Empty } from './index-a46fb8ec.js';
14
14
  import './style-inject.es-746bb8ed.js';
15
15
  import 'prop-types';
16
16
  import 'react-dom';
17
17
  import './useDebounceCallback-999deae7.js';
18
18
  import './ActivityRecent-b88e2ba8.js';
19
- import './ThreeDotsHorizontal-479c2b4b.js';
20
- import './TextField.js';
21
- import './index-15303b91.js';
19
+ import './Dropdown.js';
20
+ import './CaretDownFilled-924e7189.js';
21
+ import './Magnifier-8df67f2d.js';
22
+ import './ButtonGroup-f8e59eb9.js';
23
+ import './tslib.es6-f211516f.js';
24
+ import './index-7d785c81.js';
22
25
  import './X-20da3b4a.js';
26
+ import './index-5becfc74.js';
27
+ import './index-9a69bcc6.js';
28
+ import './useWindowSize-6faa0d0f.js';
29
+ import './useDeviceInfo-8340f573.js';
30
+ import './Divider.js';
31
+ import './Checkbox.js';
32
+ import './index-15303b91.js';
33
+ import './CheckMark-34798545.js';
34
+ import './Minus-c3ff7a21.js';
23
35
  import './HelperText.js';
24
36
  import './ErrorFilled-f4226310.js';
25
37
  import './TriangleAlert-ba250f4c.js';
26
38
  import './Label.js';
27
39
  import './Info.js';
28
40
  import './Info-0f0741e0.js';
29
- import './index-7d785c81.js';
30
- import './index-9a69bcc6.js';
31
- import './useWindowSize-6faa0d0f.js';
32
- import './useDeviceInfo-8340f573.js';
41
+ import './Checkbox-11eae830.js';
42
+ import './TextField.js';
33
43
  import './regex-d4e84e78.js';
34
- import './Pagination-3019ed0e.js';
35
- import './ButtonGroup-b4b22335.js';
36
- import './tslib.es6-f211516f.js';
37
- import './index-5becfc74.js';
38
- import './Divider.js';
39
- import './CheckMark-34798545.js';
44
+ import './DropdownItem-c643e1f0.js';
45
+ import './Pagination-5de60aef.js';
40
46
 
41
47
  /**
42
48
  * Renders the expander toggle button injected as a leading column of an expandable {@link DataTable}.
package/Drawer.js CHANGED
@@ -5,7 +5,7 @@ import { S as SvgX } from './X-20da3b4a.js';
5
5
  import Button from './Button.js';
6
6
  import { S as Scrollbar } from './index-4388be47.js';
7
7
  import Text from './Text.js';
8
- import { B as ButtonGroup } from './index-b87da2e1.js';
8
+ import { B as ButtonGroup } from './index-a46fb8ec.js';
9
9
  import Tooltip from './Tooltip.js';
10
10
  import { a as GeneUIDesignSystemContext } from './index-9a69bcc6.js';
11
11
  import { u as useEllipsisDetection } from './useEllipsisDetection-c5f9b175.js';
@@ -15,13 +15,12 @@ import './Loader.js';
15
15
  import './style-inject.es-746bb8ed.js';
16
16
  import 'prop-types';
17
17
  import './useDebounceCallback-999deae7.js';
18
- import './ButtonGroup-b4b22335.js';
18
+ import './ButtonGroup-f8e59eb9.js';
19
19
  import './tslib.es6-f211516f.js';
20
20
  import './index-7d785c81.js';
21
21
  import './index-5becfc74.js';
22
22
  import './Divider.js';
23
23
  import './index-15303b91.js';
24
- import './ThreeDotsHorizontal-479c2b4b.js';
25
24
  import './CheckMark-34798545.js';
26
25
  import './ChevronRight-af87e2a4.js';
27
26
  import './useWindowSize-6faa0d0f.js';