@galaxy-io/dls 1.5.7 → 1.5.8

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 (10) hide show
  1. package/dist/buttons/Button.d.ts +15 -2
  2. package/dist/buttons/Button.js +106 -18
  3. package/dist/inputs/ColorInput.js +1 -1
  4. package/dist/inputs/DateInput.js +1 -1
  5. package/dist/inputs/MultiSelectInput.js +1 -1
  6. package/dist/inputs/SelectInput.js +1 -1
  7. package/dist/styles.css +5 -3
  8. package/dist/table/SpreadsheetHeaderCell.js +1 -1
  9. package/dist/table/SpreadsheetRowActionCell.js +1 -1
  10. package/package.json +1 -1
package/dist/buttons/Button.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
1
+ import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
2
2
  export interface ButtonProps {
3
3
  /** Button text. Omit for an icon-only button and set `ariaLabel` instead. */
4
4
  label?: string;
@@ -23,6 +23,16 @@ export interface ButtonProps {
23
23
  /** Stretch to the parent's width. */
24
24
  fillWidth?: boolean;
25
25
  cursor?: React.CSSProperties["cursor"];
26
+ /**
27
+ * Renders a split button: the button plus a caret segment that opens an
28
+ * anchored dropdown of advanced actions. Pass a render function to receive
29
+ * `close` for dismissing the panel from a menu item.
30
+ */
31
+ contentWhenDropdown?: React.ReactNode | ((args: {
32
+ close: () => void;
33
+ }) => React.ReactNode);
34
+ /** Accessible name for the caret segment. @default "More actions" */
35
+ dropdownAriaLabel?: string;
26
36
  /** Accessible name — required when the button renders an icon with no label. */
27
37
  ariaLabel?: string;
28
38
  ariaExpanded?: boolean;
@@ -50,6 +60,9 @@ export declare enum ButtonSize {
50
60
  * `isLoading` and `isDisabled` behave identically at the DOM level — both set
51
61
  * `disabled` on the `<button>` and swallow `onClick`. Loading is a lockout, not
52
62
  * a spinner; render your own indicator alongside if you need one.
63
+ *
64
+ * With `contentWhenDropdown`, renders as a split button: a caret segment after
65
+ * a hairline divider opens an anchored dropdown of advanced actions.
53
66
  */
54
- declare const Button: ({ label, icon, variant, size, onClick, onMouseEnter, onMouseLeave, fillWidth, isLoading, isDisabled, isIconTrailing, isIconFilled, isEllipsis, cursor, ariaLabel, ariaExpanded, ariaControls, ariaHasPopup, }: ButtonProps) => import("react").JSX.Element;
67
+ declare const Button: ({ label, icon, variant, size, onClick, onMouseEnter, onMouseLeave, fillWidth, isLoading, isDisabled, isIconTrailing, isIconFilled, isEllipsis, cursor, contentWhenDropdown, dropdownAriaLabel, ariaLabel, ariaExpanded, ariaControls, ariaHasPopup, }: ButtonProps) => import("react").JSX.Element;
55
68
  export default Button;
package/dist/buttons/Button.js CHANGED
@@ -1,13 +1,16 @@
1
1
  import { GalaxyTheme } from "../theme/types.js";
2
2
  import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
3
+ import Rotate from "../transform/Rotate.js";
3
4
  import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
4
5
  import FlexItem from "../containers/FlexItem.js";
6
+ import Dropdown, { DropdownPosition } from "../dropdown/Dropdown.js";
5
7
  import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
6
8
  /* empty css */
7
9
  import { styled } from "@linaria/react";
8
10
  import { match } from "ts-pattern";
9
- import { useCallback } from "react";
11
+ import { useCallback, useState } from "react";
10
12
  import { jsx, jsxs } from "react/jsx-runtime";
13
+ import { CaretDownIcon } from "@phosphor-icons/react";
11
14
  //#region src/buttons/Button.tsx
12
15
  /** Visual weight. One PRIMARY per view; TERTIARY is the transparent variant. */
13
16
  var ButtonVariant = /* @__PURE__ */ function(ButtonVariant) {
@@ -28,30 +31,36 @@ var ButtonSize = /* @__PURE__ */ function(ButtonSize) {
28
31
  }({});
29
32
  var _exp = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
30
33
  var _exp2 = () => ({ $isEllipsis }) => $isEllipsis ? "0" : "auto";
31
- var _exp3 = () => ({ $isEllipsis }) => $isEllipsis ? "hidden" : "visible";
32
- var _exp4 = () => ({ $size }) => {
34
+ var _exp3 = () => ({ $splitSide, $fillWidth }) => $splitSide === "MAIN" && $fillWidth ? "1 1 auto" : "0 1 auto";
35
+ var _exp4 = () => ({ $isEllipsis }) => $isEllipsis ? "hidden" : "visible";
36
+ var _exp5 = () => ({ $size }) => {
33
37
  return match($size).with("SMALL", () => "4px").with("MEDIUM", () => "6px").with("LARGE", () => "6px").exhaustive();
34
38
  };
35
- var _exp5 = () => ({ $size, $noLabel }) => {
39
+ var _exp6 = () => ({ $size, $noLabel }) => {
36
40
  return match($size).with("SMALL", () => $noLabel ? "0 6px" : "0 6px").with("MEDIUM", () => $noLabel ? "0 6px" : "0 8px").with("LARGE", () => $noLabel ? "0 8px" : "0 12px").exhaustive();
37
41
  };
38
- var _exp6 = () => ({ $size }) => {
42
+ var _exp7 = () => ({ $size }) => {
39
43
  return match($size).with("SMALL", () => "24px").with("MEDIUM", () => "28px").with("LARGE", () => "32px").exhaustive();
40
44
  };
41
- var _exp7 = () => ({ theme, $variant }) => {
45
+ var _exp8 = () => ({ theme, $variant }) => {
42
46
  return match($variant).with("PRIMARY", () => theme.color.background.galaxy).with("PRIMARY_ALT", () => theme.color.background.primaryAlt).with("SECONDARY", () => theme.color.background.primary).with("TERTIARY", () => "transparent").with("SUCCESS", () => theme.color.icon.success).with("ERROR", () => theme.color.icon.error).exhaustive();
43
47
  };
44
- var _exp8 = () => ({ theme, $variant }) => {
48
+ var _exp9 = () => ({ theme, $variant }) => {
45
49
  return match($variant).with("PRIMARY", () => "0.5px solid transparent").with("PRIMARY_ALT", () => `0.5px solid transparent`).with("SECONDARY", () => `0.5px solid ${theme.color.border.secondary}`).with("TERTIARY", () => "0.5px solid transparent").with("SUCCESS", () => "0.5px solid transparent").with("ERROR", () => "0.5px solid transparent").exhaustive();
46
50
  };
47
- var _exp9 = () => ({ $cursor }) => $cursor ?? "pointer";
48
- var _exp0 = () => ({ theme, $variant }) => {
51
+ var _exp0 = () => ({ $splitSide }) => $splitSide === "MAIN" ? "0" : "0.5px";
52
+ var _exp1 = () => ({ $splitSide }) => $splitSide === "CARET" ? "0" : "0.5px";
53
+ var _exp10 = () => ({ $splitSide }) => {
54
+ return match($splitSide).with("MAIN", () => "5px 0 0 5px").with("CARET", () => "0 5px 5px 0").otherwise(() => "5px");
55
+ };
56
+ var _exp11 = () => ({ $cursor }) => $cursor ?? "pointer";
57
+ var _exp12 = () => ({ theme, $variant }) => {
49
58
  return match($variant).with("PRIMARY", () => theme.color.background.galaxyAlt).with("PRIMARY_ALT", () => theme.color.background.secondaryAlt).with("SECONDARY", () => theme.color.background.secondary).with("TERTIARY", () => theme.color.background.tertiary).with("SUCCESS", () => theme.color.background.successAlt).with("ERROR", () => theme.color.background.errorAlt).exhaustive();
50
59
  };
51
- var _exp1 = () => ({ theme, $variant }) => {
60
+ var _exp13 = () => ({ theme, $variant }) => {
52
61
  return match($variant).with("PRIMARY", () => theme.color.border.primary).with("PRIMARY_ALT", () => theme.color.border.primary).with("SECONDARY", () => theme.color.border.tertiary).with("TERTIARY", () => "transparent").with("SUCCESS", () => theme.color.border.primary).with("ERROR", () => theme.color.border.primary).exhaustive();
53
62
  };
54
- var _exp10 = () => ({ theme, $variant }) => {
63
+ var _exp14 = () => ({ theme, $variant }) => {
55
64
  return match($variant).with("PRIMARY", () => theme.color.background.disabled).with("PRIMARY_ALT", () => theme.color.background.disabled).with("SECONDARY", () => theme.color.background.disabled).with("TERTIARY", () => "transparent").with("SUCCESS", () => theme.color.background.successAlt).with("ERROR", () => theme.color.background.errorAlt).exhaustive();
56
65
  };
57
66
  var StyledButton = withTheme(/*#__PURE__*/ styled("button")({
@@ -70,20 +79,41 @@ var StyledButton = withTheme(/*#__PURE__*/ styled("button")({
70
79
  "s99zquh-8": [_exp9()],
71
80
  "s99zquh-9": [_exp0()],
72
81
  "s99zquh-10": [_exp1()],
73
- "s99zquh-11": [_exp10()]
82
+ "s99zquh-11": [_exp10()],
83
+ "s99zquh-12": [_exp11()],
84
+ "s99zquh-13": [_exp12()],
85
+ "s99zquh-14": [_exp13()],
86
+ "s99zquh-15": [_exp14()]
74
87
  }
75
88
  }));
76
- var _exp11 = () => ({ $isEllipsis }) => $isEllipsis ? "1" : "0 1 auto";
77
- var _exp12 = () => ({ $isEllipsis }) => $isEllipsis ? "0" : "auto";
89
+ var _exp15 = () => ({ $isEllipsis }) => $isEllipsis ? "1" : "0 1 auto";
90
+ var _exp16 = () => ({ $isEllipsis }) => $isEllipsis ? "0" : "auto";
78
91
  var LabelWrapper = /*#__PURE__*/ styled("span")({
79
92
  name: "LabelWrapper",
80
93
  class: "l9yox33",
81
94
  propsAsIs: false,
82
95
  vars: {
83
- "l9yox33-0": [_exp11()],
84
- "l9yox33-1": [_exp12()]
96
+ "l9yox33-0": [_exp15()],
97
+ "l9yox33-1": [_exp16()]
85
98
  }
86
99
  });
100
+ var _exp17 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "fit-content";
101
+ var SplitWrapper = /*#__PURE__*/ styled("div")({
102
+ name: "SplitWrapper",
103
+ class: "s1bhvbb9",
104
+ propsAsIs: false,
105
+ vars: { "s1bhvbb9-0": [_exp17()] }
106
+ });
107
+ var _exp18 = () => ({ theme, $variant, $isDisabled }) => {
108
+ if ($isDisabled) return theme.color.border.disabled;
109
+ return match($variant).with("PRIMARY", () => theme.color.border.primary).with("SUCCESS", () => theme.color.border.success).with("ERROR", () => theme.color.border.error).with("PRIMARY_ALT", () => theme.color.border.primary).with("SECONDARY", () => theme.color.border.secondary).with("TERTIARY", () => "transparent").exhaustive();
110
+ };
111
+ var SplitDivider = withTheme(/*#__PURE__*/ styled("div")({
112
+ name: "SplitDivider",
113
+ class: "s2x7iw5",
114
+ propsAsIs: false,
115
+ vars: { "s2x7iw5-0": [_exp18()] }
116
+ }));
87
117
  function getTextVariant(variant, activeTheme) {
88
118
  return match(variant).with("PRIMARY", () => activeTheme === GalaxyTheme.DARK ? TextVariant.PRIMARY : TextVariant.PRIMARY_ALT).with("PRIMARY_ALT", () => TextVariant.PRIMARY_ALT).with("SECONDARY", () => TextVariant.PRIMARY).with("TERTIARY", () => TextVariant.PRIMARY).with("SUCCESS", () => activeTheme === GalaxyTheme.DARK ? TextVariant.PRIMARY : TextVariant.PRIMARY_ALT).with("ERROR", () => activeTheme === GalaxyTheme.DARK ? TextVariant.PRIMARY : TextVariant.PRIMARY_ALT).exhaustive();
89
119
  }
@@ -106,9 +136,13 @@ var BUTTON_SIZE_TO_ICON_SIZE_MAP = {
106
136
  * `isLoading` and `isDisabled` behave identically at the DOM level — both set
107
137
  * `disabled` on the `<button>` and swallow `onClick`. Loading is a lockout, not
108
138
  * a spinner; render your own indicator alongside if you need one.
139
+ *
140
+ * With `contentWhenDropdown`, renders as a split button: a caret segment after
141
+ * a hairline divider opens an anchored dropdown of advanced actions.
109
142
  */
110
- var Button = ({ label, icon, variant = "PRIMARY", size = "MEDIUM", onClick, onMouseEnter, onMouseLeave, fillWidth, isLoading, isDisabled, isIconTrailing, isIconFilled, isEllipsis, cursor, ariaLabel, ariaExpanded, ariaControls, ariaHasPopup }) => {
143
+ var Button = ({ label, icon, variant = "PRIMARY", size = "MEDIUM", onClick, onMouseEnter, onMouseLeave, fillWidth, isLoading, isDisabled, isIconTrailing, isIconFilled, isEllipsis, cursor, contentWhenDropdown, dropdownAriaLabel, ariaLabel, ariaExpanded, ariaControls, ariaHasPopup }) => {
111
144
  const { activeTheme } = useGalaxyTheme();
145
+ const [isDropdownOpen, setIsDropdownOpen] = useState(false);
112
146
  const handleClick = useCallback((e) => {
113
147
  if (isDisabled || isLoading) return;
114
148
  onClick(e);
@@ -117,6 +151,14 @@ var Button = ({ label, icon, variant = "PRIMARY", size = "MEDIUM", onClick, onMo
117
151
  isLoading,
118
152
  onClick
119
153
  ]);
154
+ const closeDropdown = useCallback(() => {
155
+ setIsDropdownOpen(false);
156
+ }, []);
157
+ const handleCaretClick = useCallback((e) => {
158
+ e.stopPropagation();
159
+ setIsDropdownOpen((prev) => !prev);
160
+ }, []);
161
+ if ((isDisabled || isLoading) && isDropdownOpen) setIsDropdownOpen(false);
120
162
  const renderIcon = useCallback(() => {
121
163
  if (!icon) return null;
122
164
  return /* @__PURE__ */ jsx(FlexItem, {
@@ -159,13 +201,14 @@ var Button = ({ label, icon, variant = "PRIMARY", size = "MEDIUM", onClick, onMo
159
201
  cursor,
160
202
  activeTheme
161
203
  ]);
162
- return /* @__PURE__ */ jsxs(StyledButton, {
204
+ const mainButton = /* @__PURE__ */ jsxs(StyledButton, {
163
205
  $variant: variant,
164
206
  $size: size,
165
207
  $fillWidth: fillWidth,
166
208
  $noLabel: !label,
167
209
  $isEllipsis: isEllipsis,
168
210
  $cursor: cursor,
211
+ $splitSide: contentWhenDropdown !== void 0 ? "MAIN" : void 0,
169
212
  onClick: handleClick,
170
213
  disabled: isDisabled || isLoading,
171
214
  onMouseEnter,
@@ -180,6 +223,51 @@ var Button = ({ label, icon, variant = "PRIMARY", size = "MEDIUM", onClick, onMo
180
223
  isIconTrailing && renderIcon()
181
224
  ]
182
225
  });
226
+ if (contentWhenDropdown === void 0) return mainButton;
227
+ const dropdownBody = typeof contentWhenDropdown === "function" ? contentWhenDropdown({ close: closeDropdown }) : contentWhenDropdown;
228
+ return /* @__PURE__ */ jsxs(SplitWrapper, {
229
+ $fillWidth: fillWidth,
230
+ children: [
231
+ mainButton,
232
+ /* @__PURE__ */ jsx(SplitDivider, {
233
+ $variant: variant,
234
+ $activeTheme: activeTheme,
235
+ $isDisabled: isDisabled || isLoading
236
+ }),
237
+ /* @__PURE__ */ jsx(FlexItem, {
238
+ shrink: 0,
239
+ grow: 0,
240
+ children: /* @__PURE__ */ jsx(Dropdown, {
241
+ body: dropdownBody,
242
+ isOpen: isDropdownOpen,
243
+ onClose: closeDropdown,
244
+ position: DropdownPosition.BOTTOM_END,
245
+ children: /* @__PURE__ */ jsx(StyledButton, {
246
+ $variant: variant,
247
+ $size: size,
248
+ $noLabel: true,
249
+ $splitSide: "CARET",
250
+ type: "button",
251
+ disabled: isDisabled || isLoading,
252
+ onClick: handleCaretClick,
253
+ "aria-label": dropdownAriaLabel ?? "More actions",
254
+ "aria-haspopup": true,
255
+ "aria-expanded": isDropdownOpen,
256
+ children: /* @__PURE__ */ jsx(Rotate, {
257
+ isRotated: isDropdownOpen,
258
+ deg: -180,
259
+ children: /* @__PURE__ */ jsx(Icon, {
260
+ component: CaretDownIcon,
261
+ variant: getIconVariant(variant, activeTheme),
262
+ size: BUTTON_SIZE_TO_ICON_SIZE_MAP[size],
263
+ weight: IconWeight.BOLD
264
+ })
265
+ })
266
+ })
267
+ })
268
+ })
269
+ ]
270
+ });
183
271
  };
184
272
  //#endregion
185
273
  export { ButtonSize, ButtonVariant, Button as default };
package/dist/inputs/ColorInput.js CHANGED
@@ -2,11 +2,11 @@ import { withTheme } from "../theme/GalaxyTheme.js";
2
2
  import { getCssSizeValue } from "../utils/linaria.js";
3
3
  import { hexToHsva, hsvaToHex } from "../utils/colors.js";
4
4
  import Text, { TextSize, TextVariant } from "../text/Text.js";
5
+ import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
5
6
  import Icon, { IconVariant } from "../icons/Icon.js";
6
7
  import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
7
8
  import Spacing from "../containers/Spacing.js";
8
9
  import { InputLabel, InputSize, InputVariant, getInputBorderColor, getInputHeight, getInputIconSize, getInputPadding, getInputSurfaceColor, getInputTextSize } from "./Input.js";
9
- import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
10
10
  import GridWrapper from "../containers/GridWrapper.js";
11
11
  /* empty css */
12
12
  import { styled } from "@linaria/react";
package/dist/inputs/DateInput.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import { withTheme } from "../theme/GalaxyTheme.js";
2
2
  import { getCssSizeValue } from "../utils/linaria.js";
3
3
  import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
4
+ import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
4
5
  import Icon, { IconVariant } from "../icons/Icon.js";
5
6
  import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
6
7
  import Spacing from "../containers/Spacing.js";
7
8
  import { InputLabel, InputSize, InputVariant, getInputBorderColor, getInputHeight, getInputIconSize, getInputPadding, getInputSurfaceColor, getInputTextSize } from "./Input.js";
8
- import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
9
9
  import GridWrapper from "../containers/GridWrapper.js";
10
10
  import SelectInput from "./SelectInput.js";
11
11
  /* empty css */
package/dist/inputs/MultiSelectInput.js CHANGED
@@ -3,11 +3,11 @@ import { getCssSizeValue } from "../utils/linaria.js";
3
3
  import Rotate from "../transform/Rotate.js";
4
4
  import Text, { TextSize, TextVariant } from "../text/Text.js";
5
5
  import FlexItem from "../containers/FlexItem.js";
6
+ import Dropdown, { DropdownPosition, DropdownVariant } from "../dropdown/Dropdown.js";
6
7
  import Icon, { IconVariant } from "../icons/Icon.js";
7
8
  import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
8
9
  import { InputLabel, InputSize, InputVariant, getInputBorderColor, getInputControlSize, getInputFontSize, getInputHeight, getInputIconSize, getInputLineHeight, getInputPadding, getInputSurfaceColor, getInputTextSize } from "./Input.js";
9
10
  import CheckboxInput from "./CheckboxInput.js";
10
- import Dropdown, { DropdownPosition, DropdownVariant } from "../dropdown/Dropdown.js";
11
11
  import HorizontalDivider from "../dividers/HorizontalDivider.js";
12
12
  import { useElementWidth } from "../hooks/useElementWidth.js";
13
13
  import { useControlledOpenState, useDebouncedValue } from "./hooks.js";
package/dist/inputs/SelectInput.js CHANGED
@@ -3,11 +3,11 @@ import { getCssSizeValue } from "../utils/linaria.js";
3
3
  import Rotate from "../transform/Rotate.js";
4
4
  import Text, { TextSize, TextVariant } from "../text/Text.js";
5
5
  import FlexItem from "../containers/FlexItem.js";
6
+ import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
6
7
  import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
7
8
  import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
8
9
  import Spacing from "../containers/Spacing.js";
9
10
  import { InputLabel, InputSize, InputVariant, getInputBorderColor, getInputFontSize, getInputHeight, getInputIconSize, getInputLineHeight, getInputPadding, getInputSurfaceColor, getInputTextSize } from "./Input.js";
10
- import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
11
11
  import HorizontalDivider from "../dividers/HorizontalDivider.js";
12
12
  import { useElementWidth } from "../hooks/useElementWidth.js";
13
13
  import { useControlledOpenState, useDebouncedValue } from "./hooks.js";
package/dist/styles.css CHANGED
@@ -19,8 +19,12 @@
19
19
  .bjccs5e{position:relative;width:var(--bjccs5e-0);height:var(--bjccs5e-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
20
20
  .barhcbn{position:absolute;inset:0;border-radius:50%;-webkit-animation:ping-barhcbn var(--barhcbn-0) cubic-bezier(0, 0, 0.1, 0.1) infinite;animation:ping-barhcbn var(--barhcbn-0) cubic-bezier(0, 0, 0.1, 0.1) infinite;opacity:0.5;background-color:var(--barhcbn-1);}@-webkit-keyframes ping-barhcbn{75%,100%{-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);transform:scale(2);opacity:0;}}@keyframes ping-barhcbn{75%,100%{-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);transform:scale(2);opacity:0;}}
21
21
  .bv9nmr4{z-index:1;width:70%;height:70%;border-radius:50%;background-color:var(--bv9nmr4-0);}
22
- .s99zquh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:var(--s99zquh-0);min-width:var(--s99zquh-1);overflow:var(--s99zquh-2);gap:var(--s99zquh-3);padding:var(--s99zquh-4);height:var(--s99zquh-5);background-color:var(--s99zquh-6);border:var(--s99zquh-7);border-radius:5px;cursor:var(--s99zquh-8);-webkit-transition:background-color 0.075s ease-in-out,border 0.075s ease-in-out;transition:background-color 0.075s ease-in-out,border 0.075s ease-in-out;}.s99zquh:hover:not(:disabled){background-color:var(--s99zquh-9);border-color:var(--s99zquh-10);}.s99zquh:disabled{background-color:var(--s99zquh-11);cursor:not-allowed;opacity:0.65;}
22
+ .s99zquh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:var(--s99zquh-0);min-width:var(--s99zquh-1);-webkit-flex:var(--s99zquh-2);-ms-flex:var(--s99zquh-2);flex:var(--s99zquh-2);overflow:var(--s99zquh-3);gap:var(--s99zquh-4);padding:var(--s99zquh-5);height:var(--s99zquh-6);background-color:var(--s99zquh-7);border:var(--s99zquh-8);border-right-width:var(--s99zquh-9);border-left-width:var(--s99zquh-10);border-radius:var(--s99zquh-11);cursor:var(--s99zquh-12);-webkit-transition:background-color 0.075s ease-in-out,border 0.075s ease-in-out;transition:background-color 0.075s ease-in-out,border 0.075s ease-in-out;}.s99zquh:hover:not(:disabled){background-color:var(--s99zquh-13);border-color:var(--s99zquh-14);}.s99zquh:disabled{background-color:var(--s99zquh-15);cursor:not-allowed;opacity:0.65;}
23
23
  .l9yox33{-webkit-flex:var(--l9yox33-0);-ms-flex:var(--l9yox33-0);flex:var(--l9yox33-0);min-width:var(--l9yox33-1);overflow:hidden;}
24
+ .s1bhvbb9{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:var(--s1bhvbb9-0);}
25
+ .s2x7iw5{width:0.5px;min-width:0.5px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;background-color:var(--s2x7iw5-0);}
26
+ .d1bgy4cf{display:inline-block;position:relative;width:var(--d1bgy4cf-0);min-width:var(--d1bgy4cf-1);max-width:var(--d1bgy4cf-2);overflow:var(--d1bgy4cf-3);padding:var(--d1bgy4cf-4);background-color:var(--d1bgy4cf-5);border:var(--d1bgy4cf-6);border-radius:5px;}
27
+ .dfdzgmt{position:relative;z-index:var(--dfdzgmt-0);display:var(--dfdzgmt-1);width:var(--dfdzgmt-2);}
24
28
  .c1hcga6s{position:relative;display:var(--c1hcga6s-0);-webkit-flex-direction:var(--c1hcga6s-1);-ms-flex-direction:var(--c1hcga6s-1);flex-direction:var(--c1hcga6s-1);-webkit-align-items:var(--c1hcga6s-2);-webkit-box-align:var(--c1hcga6s-2);-ms-flex-align:var(--c1hcga6s-2);align-items:var(--c1hcga6s-2);-webkit-box-pack:var(--c1hcga6s-3);-ms-flex-pack:var(--c1hcga6s-3);-webkit-justify-content:var(--c1hcga6s-3);justify-content:var(--c1hcga6s-3);width:var(--c1hcga6s-4);min-width:0;height:var(--c1hcga6s-5);min-height:0;}
25
29
  .c1fvbgkp{position:relative;width:var(--c1fvbgkp-0);min-width:0;aspect-ratio:var(--c1fvbgkp-1);height:var(--c1fvbgkp-2);-webkit-flex:var(--c1fvbgkp-3);-ms-flex:var(--c1fvbgkp-3);flex:var(--c1fvbgkp-3);min-height:var(--c1fvbgkp-4);}
26
30
  .c10uj5yt{display:block;overflow:visible;}
@@ -70,8 +74,6 @@
70
74
  .d19reibl{position:absolute;top:8px;right:8px;bottom:8px;left:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;pointer-events:none;}
71
75
  .d410s14{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:var(--d410s14-0);height:100%;background-color:var(--d410s14-1);border:0.5px solid var(--d410s14-2);border-radius:6px;pointer-events:auto;}
72
76
  .s1hpu3t7{position:fixed;inset:0;background-color:var(--s1hpu3t7-0);-webkit-backdrop-filter:var(--s1hpu3t7-1);backdrop-filter:var(--s1hpu3t7-1);opacity:var(--s1hpu3t7-2);visibility:var(--s1hpu3t7-3);-webkit-transition:var(--s1hpu3t7-4);transition:var(--s1hpu3t7-4);z-index:var(--s1hpu3t7-5);pointer-events:var(--s1hpu3t7-6);}
73
- .d1bgy4cf{display:inline-block;position:relative;width:var(--d1bgy4cf-0);min-width:var(--d1bgy4cf-1);max-width:var(--d1bgy4cf-2);overflow:var(--d1bgy4cf-3);padding:var(--d1bgy4cf-4);background-color:var(--d1bgy4cf-5);border:var(--d1bgy4cf-6);border-radius:5px;}
74
- .dfdzgmt{position:relative;z-index:var(--dfdzgmt-0);display:var(--dfdzgmt-1);width:var(--dfdzgmt-2);}
75
77
  .cwfaerb{-webkit-flex:1;-ms-flex:1;flex:1;min-height:0;min-width:0;width:100%;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:hidden;border:var(--cwfaerb-0);border-radius:var(--cwfaerb-1);}.cwfaerb>div{-webkit-flex:1;-ms-flex:1;flex:1;min-height:0;}.cwfaerb .cm-editor{width:100%!important;max-width:100%!important;height:100%!important;}.cwfaerb .cm-scroller{overflow:auto!important;width:100%!important;max-width:100%!important;}.cwfaerb .cm-content{max-width:100%!important;}.cwfaerb .cm-content,.cwfaerb .cm-gutter{line-height:1.8;}
76
78
  .c17zkoob{width:var(--c17zkoob-0);height:var(--c17zkoob-0);}
77
79
  .gm80o9u{width:var(--gm80o9u-0);height:var(--gm80o9u-0);}.gm80o9u >div{width:100%;height:100%;}.gm80o9u svg{display:block;}.gm80o9u svg>g path{fill:var(--gm80o9u-1);}
package/dist/table/SpreadsheetHeaderCell.js CHANGED
@@ -1,8 +1,8 @@
1
+ import Dropdown, { DropdownPosition } from "../dropdown/Dropdown.js";
1
2
  import Icon, { IconVariant } from "../icons/Icon.js";
2
3
  import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
3
4
  import { TableHeaderCell } from "./TablePrimitives.js";
4
5
  import TableHeaderCellContent from "./TableHeaderCellContent.js";
5
- import Dropdown, { DropdownPosition } from "../dropdown/Dropdown.js";
6
6
  import SpreadsheetMenuItem from "./SpreadsheetMenuItem.js";
7
7
  import { HeaderMenuTrigger } from "./SpreadsheetPrimitives.js";
8
8
  import React, { useState } from "react";
package/dist/table/SpreadsheetRowActionCell.js CHANGED
@@ -1,6 +1,6 @@
1
+ import Dropdown, { DropdownPosition } from "../dropdown/Dropdown.js";
1
2
  import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
2
3
  import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
3
- import Dropdown, { DropdownPosition } from "../dropdown/Dropdown.js";
4
4
  import SpreadsheetMenuItem from "./SpreadsheetMenuItem.js";
5
5
  import { ActionColumnCell } from "./SpreadsheetPrimitives.js";
6
6
  import React, { useState } from "react";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@galaxy-io/dls",
3
- "version": "1.5.7",
3
+ "version": "1.5.8",
4
4
  "description": "Galaxy Design Language System",
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",