@infonomic/uikit 6.7.7 → 6.8.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.
@@ -1,9 +1,16 @@
1
1
  import { type ButtonProps } from './button';
2
+ export interface ComboButtonOption {
3
+ label: string;
4
+ value: string;
5
+ /**
6
+ * Optional leading icon for the menu item. Rendered before the label; items
7
+ * without one still align with their icon-bearing siblings, so a menu may
8
+ * mix the two.
9
+ */
10
+ icon?: React.ReactNode;
11
+ }
2
12
  export type ComboButtonProps = ButtonProps & {
3
- options: {
4
- label: string;
5
- value: string;
6
- }[];
13
+ options: ComboButtonOption[];
7
14
  onButtonClick?: () => void;
8
15
  onOptionSelect?: (value: string) => void;
9
16
  disabled?: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"combo-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/combo-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAGnD,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,6LAgBzB,gBAAgB,gCAiDlB,CAAA"}
1
+ {"version":3,"file":"combo-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/combo-button.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAGnD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,OAAO,EAAE,iBAAiB,EAAE,CAAA;IAC5B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,6LAgBzB,gBAAgB,gCAgFlB,CAAA"}
@@ -1,10 +1,15 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { useRef } from "react";
2
3
  import classnames from "classnames";
3
4
  import { ChevronDownIcon } from "../../icons/chevron-down-icon.js";
4
5
  import { Dropdown } from "../dropdown/dropdown.js";
5
6
  import { Button } from "./button.js";
6
7
  import combo_button_module from "./combo-button.module.js";
7
- const ComboButton = ({ options, onButtonClick, onOptionSelect, disabled = false, buttonDisabled = false, optionsDisabled = false, children, align = 'end', dataSide = 'top', sideOffset = 5, className, buttonClassName, triggerClassName, intent = 'primary', ...rest })=>/*#__PURE__*/ jsxs("div", {
8
+ const ComboButton = ({ options, onButtonClick, onOptionSelect, disabled = false, buttonDisabled = false, optionsDisabled = false, children, align = 'end', dataSide = 'top', sideOffset = 5, className, buttonClassName, triggerClassName, intent = 'primary', ...rest })=>{
9
+ const anyOptionHasIcon = options.some((option)=>null != option.icon);
10
+ const wrapperRef = useRef(null);
11
+ return /*#__PURE__*/ jsxs("div", {
12
+ ref: wrapperRef,
8
13
  className: classnames('combo-button-wrapper', combo_button_module["combo-button-wrapper"], className),
9
14
  style: {
10
15
  '--ring-color': `var(--ring-${intent})`
@@ -36,13 +41,24 @@ const ComboButton = ({ options, onButtonClick, onOptionSelect, disabled = false,
36
41
  children: /*#__PURE__*/ jsx(Dropdown.Content, {
37
42
  className: classnames('combo-button-options', combo_button_module["combo-button-options"]),
38
43
  align: align,
44
+ anchor: wrapperRef,
39
45
  "data-side": dataSide,
40
46
  sideOffset: sideOffset,
41
47
  children: options.map((option)=>/*#__PURE__*/ jsx(Dropdown.Item, {
42
48
  onClick: ()=>onOptionSelect?.(option.value),
43
- children: /*#__PURE__*/ jsx("div", {
49
+ children: /*#__PURE__*/ jsxs("div", {
44
50
  className: classnames('combo-button-options-item', combo_button_module["combo-button-options-item"]),
45
- children: option.label
51
+ children: [
52
+ anyOptionHasIcon && /*#__PURE__*/ jsx("span", {
53
+ className: classnames('combo-button-options-item-icon', combo_button_module["combo-button-options-item-icon"]),
54
+ "aria-hidden": "true",
55
+ children: option.icon
56
+ }),
57
+ /*#__PURE__*/ jsx("span", {
58
+ className: classnames('combo-button-options-item-label', combo_button_module["combo-button-options-item-label"]),
59
+ children: option.label
60
+ })
61
+ ]
46
62
  })
47
63
  }, option.value))
48
64
  })
@@ -51,4 +67,5 @@ const ComboButton = ({ options, onButtonClick, onOptionSelect, disabled = false,
51
67
  })
52
68
  ]
53
69
  });
70
+ };
54
71
  export { ComboButton };
@@ -48,5 +48,25 @@
48
48
 
49
49
  .combo-button-options-item,
50
50
  :global(.infonomic-combo-button-options-item) {
51
+ display: flex;
52
+ align-items: center;
53
+ gap: 0.5rem;
54
+ padding: 0 4px;
55
+ }
56
+
57
+ /* Fixed box so labels line up whether or not an item carries an icon. */
58
+ .combo-button-options-item-icon,
59
+ :global(.infonomic-combo-button-options-item-icon) {
60
+ display: inline-flex;
61
+ align-items: center;
62
+ justify-content: center;
63
+ flex-shrink: 0;
64
+ width: 1rem;
65
+ height: 1rem;
66
+ }
67
+
68
+ .combo-button-options-item-label,
69
+ :global(.infonomic-combo-button-options-item-label) {
70
+ min-width: 0;
51
71
  }
52
72
  }
@@ -7,6 +7,12 @@ const combo_button_module = {
7
7
  "combo-button-trigger": "combo-button-trigger-mVb2fy",
8
8
  comboButtonTrigger: "combo-button-trigger-mVb2fy",
9
9
  "combo-button-options": "combo-button-options-T9vVC9",
10
- comboButtonOptions: "combo-button-options-T9vVC9"
10
+ comboButtonOptions: "combo-button-options-T9vVC9",
11
+ "combo-button-options-item": "combo-button-options-item-yPO0eQ",
12
+ comboButtonOptionsItem: "combo-button-options-item-yPO0eQ",
13
+ "combo-button-options-item-icon": "combo-button-options-item-icon-OpHeKm",
14
+ comboButtonOptionsItemIcon: "combo-button-options-item-icon-OpHeKm",
15
+ "combo-button-options-item-label": "combo-button-options-item-label-Q7QOKt",
16
+ comboButtonOptionsItemLabel: "combo-button-options-item-label-Q7QOKt"
11
17
  };
12
18
  export default combo_button_module;
@@ -48,5 +48,25 @@
48
48
  :is(.combo-button-options-T9vVC9, .infonomic-combo-button-options) {
49
49
  min-width: 120px;
50
50
  }
51
+
52
+ :is(.combo-button-options-item-yPO0eQ, .infonomic-combo-button-options-item) {
53
+ align-items: center;
54
+ gap: .5rem;
55
+ padding: 0 4px;
56
+ display: flex;
57
+ }
58
+
59
+ :is(.combo-button-options-item-icon-OpHeKm, .infonomic-combo-button-options-item-icon) {
60
+ flex-shrink: 0;
61
+ justify-content: center;
62
+ align-items: center;
63
+ width: 1rem;
64
+ height: 1rem;
65
+ display: inline-flex;
66
+ }
67
+
68
+ :is(.combo-button-options-item-label-Q7QOKt, .infonomic-combo-button-options-item-label) {
69
+ min-width: 0;
70
+ }
51
71
  }
52
72
 
@@ -13,7 +13,7 @@ export declare const Dropdown: {
13
13
  };
14
14
  Portal: typeof Portal;
15
15
  Content: {
16
- ({ ref, className, children, side, sideOffset, align, alignOffset, collisionPadding, ...rest }: {
16
+ ({ ref, className, children, side, sideOffset, align, alignOffset, collisionPadding, anchor, ...rest }: {
17
17
  ref?: React.RefObject<React.ComponentRef<"div">>;
18
18
  className?: string;
19
19
  children?: React.ReactNode;
@@ -22,6 +22,14 @@ export declare const Dropdown: {
22
22
  align?: React.ComponentProps<typeof Menu.Positioner>["align"];
23
23
  alignOffset?: React.ComponentProps<typeof Menu.Positioner>["alignOffset"];
24
24
  collisionPadding?: React.ComponentProps<typeof Menu.Positioner>["collisionPadding"];
25
+ /**
26
+ * Element the popup is positioned against. Defaults to the trigger, which is
27
+ * the right answer when the trigger is the whole control. Pass a wider
28
+ * element when the trigger is only part of it — a combo button's dropdown
29
+ * half, say — so `align` measures against the control the user sees rather
30
+ * than against the narrow trigger.
31
+ */
32
+ anchor?: React.ComponentProps<typeof Menu.Positioner>["anchor"];
25
33
  } & Omit<React.ComponentProps<typeof Menu.Popup>, "className">): React.JSX.Element;
26
34
  displayName: string;
27
35
  };
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"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"}
@@ -22,12 +22,13 @@ function Portal({ children, ...rest }) {
22
22
  children: children
23
23
  });
24
24
  }
25
- const Content = ({ ref, className, children, side, sideOffset, align, alignOffset, collisionPadding, ...rest })=>/*#__PURE__*/ jsx(Menu.Positioner, {
25
+ const Content = ({ ref, className, children, side, sideOffset, align, alignOffset, collisionPadding, anchor, ...rest })=>/*#__PURE__*/ jsx(Menu.Positioner, {
26
26
  side: side,
27
27
  sideOffset: sideOffset,
28
28
  align: align,
29
29
  alignOffset: alignOffset,
30
30
  collisionPadding: collisionPadding,
31
+ anchor: anchor,
31
32
  children: /*#__PURE__*/ jsx(Menu.Popup, {
32
33
  ref: ref,
33
34
  className: classnames('infonomic-dropdown-content', dropdown_module["dropdown-content"], className),
@@ -32,6 +32,7 @@ export * from './info-icon.js';
32
32
  export * from './infonomic-icon.js';
33
33
  export * from './light-icon.js';
34
34
  export * from './location-pin-icon.js';
35
+ export * from './markdown-icon.js';
35
36
  export * from './moon-icon.js';
36
37
  export * from './plus-icon.js';
37
38
  export * from './primary-icon.js';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/icons/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,wBAAwB,CAAA;AACtC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,wBAAwB,CAAA;AACtC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/icons/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,wBAAwB,CAAA;AACtC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA"}
@@ -32,6 +32,7 @@ export * from "./info-icon.js";
32
32
  export * from "./infonomic-icon.js";
33
33
  export * from "./light-icon.js";
34
34
  export * from "./location-pin-icon.js";
35
+ export * from "./markdown-icon.js";
35
36
  export * from "./moon-icon.js";
36
37
  export * from "./plus-icon.js";
37
38
  export * from "./primary-icon.js";
@@ -0,0 +1,11 @@
1
+ import type React from 'react';
2
+ import type { IconProps } from './types/icon.js';
3
+ /**
4
+ * The CommonMark mark — the conventional glyph for "this content is available
5
+ * as markdown". Used by surfaces that expose a document's `.md` representation.
6
+ */
7
+ export declare const MarkdownIcon: {
8
+ ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element;
9
+ displayName: string;
10
+ };
11
+ //# sourceMappingURL=markdown-icon.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"markdown-icon.d.ts","sourceRoot":"","sources":["../../src/icons/markdown-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEhD;;;GAGG;AACH,eAAO,MAAM,YAAY;2CAItB,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAuB/B,CAAA"}
@@ -0,0 +1,34 @@
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import classnames from "classnames";
3
+ import { IconElement } from "./icon-element.js";
4
+ import icons_module from "./icons.module.js";
5
+ const MarkdownIcon = ({ className, svgClassName, ...rest })=>{
6
+ const applied = classnames(icons_module["fill-current"], svgClassName);
7
+ return /*#__PURE__*/ jsx(IconElement, {
8
+ className: classnames('markdown-icon', className),
9
+ ...rest,
10
+ children: /*#__PURE__*/ jsxs("svg", {
11
+ className: applied,
12
+ xmlns: "http://www.w3.org/2000/svg",
13
+ focusable: "false",
14
+ "aria-hidden": "true",
15
+ viewBox: "0 0 16 16",
16
+ strokeWidth: "0",
17
+ children: [
18
+ /*#__PURE__*/ jsx("path", {
19
+ d: "M14.5 3H1.5C0.671573 3 0 3.67157 0 4.5V11.5C0 12.3284 0.671573 13 1.5 13H14.5C15.3284 13 16 12.3284 16 11.5V4.5C16 3.67157 15.3284 3 14.5 3ZM1.5 4H14.5C14.7761 4 15 4.22386 15 4.5V11.5C15 11.7761 14.7761 12 14.5 12H1.5C1.22386 12 1 11.7761 1 11.5V4.5C1 4.22386 1.22386 4 1.5 4Z",
20
+ fillRule: "evenodd",
21
+ clipRule: "evenodd"
22
+ }),
23
+ /*#__PURE__*/ jsx("path", {
24
+ d: "M2.5 10.5V5.5H4L5.5 7.5L7 5.5H8.5V10.5H7V7.75L5.5 9.75L4 7.75V10.5H2.5Z"
25
+ }),
26
+ /*#__PURE__*/ jsx("path", {
27
+ d: "M11.75 10.5L9.5 8H11V5.5H12.5V8H14L11.75 10.5Z"
28
+ })
29
+ ]
30
+ })
31
+ });
32
+ };
33
+ MarkdownIcon.displayName = 'MarkdownIcon';
34
+ export { MarkdownIcon };
package/dist/react.d.ts CHANGED
@@ -78,6 +78,7 @@ export * from './icons/info-icon.js';
78
78
  export * from './icons/infonomic-icon.js';
79
79
  export * from './icons/light-icon.js';
80
80
  export * from './icons/location-pin-icon.js';
81
+ export * from './icons/markdown-icon.js';
81
82
  export * from './icons/moon-icon.js';
82
83
  export * from './icons/plus-icon.js';
83
84
  export * from './icons/primary-icon.js';
@@ -1 +1 @@
1
- {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"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"}
package/dist/react.js CHANGED
@@ -73,6 +73,7 @@ export * from "./icons/info-icon.js";
73
73
  export * from "./icons/infonomic-icon.js";
74
74
  export * from "./icons/light-icon.js";
75
75
  export * from "./icons/location-pin-icon.js";
76
+ export * from "./icons/markdown-icon.js";
76
77
  export * from "./icons/moon-icon.js";
77
78
  export * from "./icons/plus-icon.js";
78
79
  export * from "./icons/primary-icon.js";
@@ -1 +1 @@
1
- {"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/widgets/modal/modal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,eAAO,MAAM,YAAY;gBACX,MAAM,IAAI;EAClB,CAAA;AAEN,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAA;AAEvD,wBAAgB,QAAQ,IAAI;IAC1B,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,MAAM,EAAE,OAAO,CAAA;IACf,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;CACzD,CAiBA;AAED,iBAAS,KAAK,CAAC,EACb,MAAM,EACN,SAAS,EACT,mBAAmB,EACnB,QAAQ,GACT,EAAE,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAsBhC;kBA3BQ,KAAK;;;WArCN,CAAC;;;WAF2B,CAAC;;;WAAK,CAAC;;;WAAD,CAAC;;;AA2E3C,OAAO,EAAE,KAAK,EAAE,CAAA"}
1
+ {"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/widgets/modal/modal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,eAAO,MAAM,YAAY;gBACX,MAAM,IAAI;EAClB,CAAA;AAEN,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAA;AAEvD,wBAAgB,QAAQ,IAAI;IAC1B,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,MAAM,EAAE,OAAO,CAAA;IACf,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;CACzD,CAiBA;AAED,iBAAS,KAAK,CAAC,EACb,MAAM,EACN,SAAS,EACT,mBAAmB,EACnB,QAAQ,GACT,EAAE,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAqDhC;kBA1DQ,KAAK;;;WArCd,CAAC;;;WAF2B,CAAC;;;WAAK,CAAC;;;WAAD,CAAC;;;AA0GnC,OAAO,EAAE,KAAK,EAAE,CAAA"}
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
- import { createContext, useCallback, useState } from "react";
3
+ import { createContext, useCallback, useRef, useState } from "react";
4
4
  import { Dialog } from "@base-ui/react/dialog";
5
5
  import classnames from "classnames";
6
6
  import modal_module from "./modal.module.js";
@@ -25,6 +25,17 @@ function useModal() {
25
25
  };
26
26
  }
27
27
  function Modal({ isOpen, onDismiss, closeOnOverlayClick, children }) {
28
+ const pressStartedOnOverlay = useRef(false);
29
+ const handleOverlayPointerDown = (event)=>{
30
+ pressStartedOnOverlay.current = event.target === event.currentTarget;
31
+ };
32
+ const handleOverlayClick = (event)=>{
33
+ const startedOnOverlay = pressStartedOnOverlay.current;
34
+ pressStartedOnOverlay.current = false;
35
+ if (true !== closeOnOverlayClick) return;
36
+ if (!startedOnOverlay || event.target !== event.currentTarget) return;
37
+ onDismiss?.();
38
+ };
28
39
  return /*#__PURE__*/ jsx(ModalContext.Provider, {
29
40
  value: {
30
41
  onDismiss
@@ -43,6 +54,8 @@ function Modal({ isOpen, onDismiss, closeOnOverlayClick, children }) {
43
54
  }),
44
55
  /*#__PURE__*/ jsx(Dialog.Popup, {
45
56
  className: classnames('infonomic-modal-wrapper', modal_module["modal-wrapper"]),
57
+ onPointerDown: handleOverlayPointerDown,
58
+ onClick: handleOverlayClick,
46
59
  children: children
47
60
  })
48
61
  ]
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@infonomic/uikit",
3
3
  "private": false,
4
4
  "license": "MIT",
5
- "version": "6.7.7",
5
+ "version": "6.8.0",
6
6
  "type": "module",
7
7
  "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
8
8
  "keywords": [
@@ -48,5 +48,25 @@
48
48
 
49
49
  .combo-button-options-item,
50
50
  :global(.infonomic-combo-button-options-item) {
51
+ display: flex;
52
+ align-items: center;
53
+ gap: 0.5rem;
54
+ padding: 0 4px;
55
+ }
56
+
57
+ /* Fixed box so labels line up whether or not an item carries an icon. */
58
+ .combo-button-options-item-icon,
59
+ :global(.infonomic-combo-button-options-item-icon) {
60
+ display: inline-flex;
61
+ align-items: center;
62
+ justify-content: center;
63
+ flex-shrink: 0;
64
+ width: 1rem;
65
+ height: 1rem;
66
+ }
67
+
68
+ .combo-button-options-item-label,
69
+ :global(.infonomic-combo-button-options-item-label) {
70
+ min-width: 0;
51
71
  }
52
72
  }
@@ -1,3 +1,5 @@
1
+ import { useRef } from 'react'
2
+
1
3
  import cx from 'classnames'
2
4
 
3
5
  import { ChevronDownIcon } from '../../icons/chevron-down-icon'
@@ -5,8 +7,19 @@ import { Dropdown as DropdownComponent } from '../dropdown/dropdown'
5
7
  import { Button, type ButtonProps } from './button'
6
8
  import styles from './combo-button.module.css'
7
9
 
10
+ export interface ComboButtonOption {
11
+ label: string
12
+ value: string
13
+ /**
14
+ * Optional leading icon for the menu item. Rendered before the label; items
15
+ * without one still align with their icon-bearing siblings, so a menu may
16
+ * mix the two.
17
+ */
18
+ icon?: React.ReactNode
19
+ }
20
+
8
21
  export type ComboButtonProps = ButtonProps & {
9
- options: { label: string; value: string }[]
22
+ options: ComboButtonOption[]
10
23
  onButtonClick?: () => void
11
24
  onOptionSelect?: (value: string) => void
12
25
  disabled?: boolean
@@ -38,8 +51,20 @@ export const ComboButton = ({
38
51
  intent = 'primary',
39
52
  ...rest
40
53
  }: ComboButtonProps) => {
54
+ // Reserve the icon column for every item as soon as one option carries an
55
+ // icon, so labels stay on a common left edge in a mixed menu.
56
+ const anyOptionHasIcon = options.some((option) => option.icon != null)
57
+
58
+ // The menu is positioned against the whole control, not against the dropdown
59
+ // half that triggers it. Anchoring to the trigger would measure `align`
60
+ // from the narrow chevron, so an `end`-aligned menu hangs off the right of
61
+ // the button and a `start`-aligned one starts at the chevron rather than at
62
+ // the button's left edge.
63
+ const wrapperRef = useRef<HTMLDivElement>(null)
64
+
41
65
  return (
42
66
  <div
67
+ ref={wrapperRef}
43
68
  className={cx('combo-button-wrapper', styles['combo-button-wrapper'], className)}
44
69
  style={{ '--ring-color': `var(--ring-${intent})` } as React.CSSProperties}
45
70
  >
@@ -65,6 +90,7 @@ export const ComboButton = ({
65
90
  <DropdownComponent.Content
66
91
  className={cx('combo-button-options', styles['combo-button-options'])}
67
92
  align={align}
93
+ anchor={wrapperRef}
68
94
  data-side={dataSide}
69
95
  sideOffset={sideOffset}
70
96
  >
@@ -76,7 +102,25 @@ export const ComboButton = ({
76
102
  <div
77
103
  className={cx('combo-button-options-item', styles['combo-button-options-item'])}
78
104
  >
79
- {option.label}
105
+ {anyOptionHasIcon && (
106
+ <span
107
+ className={cx(
108
+ 'combo-button-options-item-icon',
109
+ styles['combo-button-options-item-icon']
110
+ )}
111
+ aria-hidden="true"
112
+ >
113
+ {option.icon}
114
+ </span>
115
+ )}
116
+ <span
117
+ className={cx(
118
+ 'combo-button-options-item-label',
119
+ styles['combo-button-options-item-label']
120
+ )}
121
+ >
122
+ {option.label}
123
+ </span>
80
124
  </div>
81
125
  </DropdownComponent.Item>
82
126
  ))}
@@ -43,6 +43,7 @@ const Content = ({
43
43
  align,
44
44
  alignOffset,
45
45
  collisionPadding,
46
+ anchor,
46
47
  ...rest
47
48
  }: {
48
49
  ref?: React.RefObject<React.ComponentRef<'div'>>
@@ -53,6 +54,14 @@ const Content = ({
53
54
  align?: React.ComponentProps<typeof Menu.Positioner>['align']
54
55
  alignOffset?: React.ComponentProps<typeof Menu.Positioner>['alignOffset']
55
56
  collisionPadding?: React.ComponentProps<typeof Menu.Positioner>['collisionPadding']
57
+ /**
58
+ * Element the popup is positioned against. Defaults to the trigger, which is
59
+ * the right answer when the trigger is the whole control. Pass a wider
60
+ * element when the trigger is only part of it — a combo button's dropdown
61
+ * half, say — so `align` measures against the control the user sees rather
62
+ * than against the narrow trigger.
63
+ */
64
+ anchor?: React.ComponentProps<typeof Menu.Positioner>['anchor']
56
65
  } & Omit<React.ComponentProps<typeof Menu.Popup>, 'className'>): React.JSX.Element => {
57
66
  return (
58
67
  <Menu.Positioner
@@ -61,6 +70,7 @@ const Content = ({
61
70
  align={align}
62
71
  alignOffset={alignOffset}
63
72
  collisionPadding={collisionPadding}
73
+ anchor={anchor}
64
74
  >
65
75
  <Menu.Popup
66
76
  ref={ref}
@@ -32,6 +32,7 @@ export * from './info-icon.js'
32
32
  export * from './infonomic-icon.js'
33
33
  export * from './light-icon.js'
34
34
  export * from './location-pin-icon.js'
35
+ export * from './markdown-icon.js'
35
36
  export * from './moon-icon.js'
36
37
  export * from './plus-icon.js'
37
38
  export * from './primary-icon.js'
@@ -0,0 +1,42 @@
1
+ import type React from 'react'
2
+
3
+ import cx from 'classnames'
4
+
5
+ import { IconElement } from './icon-element.js'
6
+ import styles from './icons.module.css'
7
+ import type { IconProps } from './types/icon.js'
8
+
9
+ /**
10
+ * The CommonMark mark — the conventional glyph for "this content is available
11
+ * as markdown". Used by surfaces that expose a document's `.md` representation.
12
+ */
13
+ export const MarkdownIcon = ({
14
+ className,
15
+ svgClassName,
16
+ ...rest
17
+ }: IconProps): React.JSX.Element => {
18
+ const applied = cx(styles['fill-current'], svgClassName)
19
+
20
+ return (
21
+ <IconElement className={cx('markdown-icon', className)} {...rest}>
22
+ <svg
23
+ className={applied}
24
+ xmlns="http://www.w3.org/2000/svg"
25
+ focusable="false"
26
+ aria-hidden="true"
27
+ viewBox="0 0 16 16"
28
+ strokeWidth="0"
29
+ >
30
+ <path
31
+ d="M14.5 3H1.5C0.671573 3 0 3.67157 0 4.5V11.5C0 12.3284 0.671573 13 1.5 13H14.5C15.3284 13 16 12.3284 16 11.5V4.5C16 3.67157 15.3284 3 14.5 3ZM1.5 4H14.5C14.7761 4 15 4.22386 15 4.5V11.5C15 11.7761 14.7761 12 14.5 12H1.5C1.22386 12 1 11.7761 1 11.5V4.5C1 4.22386 1.22386 4 1.5 4Z"
32
+ fillRule="evenodd"
33
+ clipRule="evenodd"
34
+ />
35
+ <path d="M2.5 10.5V5.5H4L5.5 7.5L7 5.5H8.5V10.5H7V7.75L5.5 9.75L4 7.75V10.5H2.5Z" />
36
+ <path d="M11.75 10.5L9.5 8H11V5.5H12.5V8H14L11.75 10.5Z" />
37
+ </svg>
38
+ </IconElement>
39
+ )
40
+ }
41
+
42
+ MarkdownIcon.displayName = 'MarkdownIcon'
package/src/react.ts CHANGED
@@ -81,6 +81,7 @@ export * from './icons/info-icon.js'
81
81
  export * from './icons/infonomic-icon.js'
82
82
  export * from './icons/light-icon.js'
83
83
  export * from './icons/location-pin-icon.js'
84
+ export * from './icons/markdown-icon.js'
84
85
  export * from './icons/moon-icon.js'
85
86
  export * from './icons/plus-icon.js'
86
87
  export * from './icons/primary-icon.js'
@@ -1,7 +1,7 @@
1
1
  'use client'
2
2
 
3
3
  import type React from 'react'
4
- import { createContext, useCallback, useState } from 'react'
4
+ import { createContext, useCallback, useRef, useState } from 'react'
5
5
 
6
6
  import { Dialog } from '@base-ui/react/dialog'
7
7
  import cx from 'classnames'
@@ -55,6 +55,33 @@ function Modal({
55
55
  closeOnOverlayClick,
56
56
  children,
57
57
  }: ModalProps): React.JSX.Element {
58
+ // Overlay dismissal is handled here rather than by Base UI's outside-press
59
+ // detection. `Dialog.Popup` below is the full-viewport flex box that centres
60
+ // the dialog, not the dialog box itself, so a click on the empty space around
61
+ // the dialog still lands *inside* the popup — Base UI sees no outside press
62
+ // and `disablePointerDismissal` never comes into play. Comparing the event
63
+ // target against the popup identifies those clicks: they hit the centring box
64
+ // directly, whereas a click on the dialog hits `Modal.Container` or a
65
+ // descendant of it.
66
+ //
67
+ // The press must both start and end on the popup. Without the pointerdown
68
+ // check, selecting text in the dialog and releasing outside it emits a click
69
+ // on their common ancestor — the popup — and would dismiss the dialog
70
+ // mid-drag.
71
+ const pressStartedOnOverlay = useRef(false)
72
+
73
+ const handleOverlayPointerDown = (event: React.PointerEvent<HTMLDivElement>): void => {
74
+ pressStartedOnOverlay.current = event.target === event.currentTarget
75
+ }
76
+
77
+ const handleOverlayClick = (event: React.MouseEvent<HTMLDivElement>): void => {
78
+ const startedOnOverlay = pressStartedOnOverlay.current
79
+ pressStartedOnOverlay.current = false
80
+ if (closeOnOverlayClick !== true) return
81
+ if (!startedOnOverlay || event.target !== event.currentTarget) return
82
+ onDismiss?.()
83
+ }
84
+
58
85
  return (
59
86
  <ModalContext.Provider value={{ onDismiss }}>
60
87
  <Dialog.Root
@@ -69,7 +96,11 @@ function Modal({
69
96
  >
70
97
  <Dialog.Portal>
71
98
  <Dialog.Backdrop className={cx('infonomic-modal-backdrop', styles.backdrop)} />
72
- <Dialog.Popup className={cx('infonomic-modal-wrapper', styles['modal-wrapper'])}>
99
+ <Dialog.Popup
100
+ className={cx('infonomic-modal-wrapper', styles['modal-wrapper'])}
101
+ onPointerDown={handleOverlayPointerDown}
102
+ onClick={handleOverlayClick}
103
+ >
73
104
  {children}
74
105
  </Dialog.Popup>
75
106
  </Dialog.Portal>