npm - @deephaven/iris-grid - Versions diffs - 1.2.1-plotly-rc.3 → 1.3.0 - Mend

@deephaven/iris-grid 1.2.1-plotly-rc.3 → 1.3.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.

Files changed (147) hide show

package/dist/sidebar/visibility-ordering-builder/VisibilityOrderingGroup.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../../node_modules/@deephaven/components/scss/custom.scss","../../../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss","../../../src/sidebar/visibility-ordering-builder/VisibilityOrderingGroup.scss","../../../../../node_modules/@deephaven/components/scss/new_variables.scss"],"names":[],"mappings":"AAAA;AC6LA;ACzLI;EACE,SCDK;;ADIP;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA,cCZG;;ADgBP;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA","file":"VisibilityOrderingGroup.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore /\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n@import './util.scss';\n","// Styling overrides for bootstrap\n@use 'sass:map';\n\n// Override / set color variables\n$red: var(--dh-color-visual-red);\n$orange: var(--dh-color-visual-orange);\n$yellow: var(--dh-color-visual-yellow);\n$green: var(--dh-color-visual-green);\n$blue: var(--dh-color-visual-blue);\n$purple: var(--dh-color-visual-purple);\n\n// Fallback colors are used if theme isn't loaded\n// this is required for error messages if the API doesn't load\n\n//Define our Gray scale\n$gray-100: var(--dh-color-gray-900, #fcfcfa);\n$gray-200: var(--dh-color-gray-800);\n$gray-300: var(--dh-color-gray-700);\n$gray-400: var(--dh-color-gray-600);\n$gray-500: var(--dh-color-gray-500);\n// intentional duplicate, scale doesn't line up otherwise\n// as we have gray-850 and spectrum doesn't and it is needed\n$gray-600: var(--dh-color-gray-500);\n$gray-700: var(--dh-color-gray-400);\n$gray-800: var(--dh-color-gray-300);\n$gray-850: var(--dh-color-gray-200);\n$gray-900: var(--dh-color-gray-75);\n$black: var(--dh-color-black, #1a171a);\n$white: var(--dh-color-white, #f0f0ee);\n\n//Define some UI colors\n$interfacegray: var(--dh-color-content-bg, #2d2a2e);\n$interfaceblue: var(--dh-color-accent-bg);\n$interfacewhite: $white;\n$interfaceblack: $black;\n$content-bg: var(--dh-color-content-bg, #2d2a2e);\n$background: var(--dh-color-bg, #1a171a);\n$foreground: var(--dh-color-fg, #f0f0ee);\n\n// Extend default Bootstrap $grays map\n$grays-custom: (\n '850': $gray-850,\n);\n$grays: () !default;\n$grays: map-merge($grays, $grays-custom);\n\n// Extend default Bootstrap $colors map\n$colors-custom: (\n 'black': $black,\n);\n$colors: () !default;\n$colors: map-merge($colors, $colors-custom);\n\n// Override default Bootstrap $theme-colors map by mapping each key to itself.\n// These will then be re-mapped inside of `button-outline-variant` and\n// `button-outline-variant` mixins in `bootstrap_override_mixins_buttons.scss`\n$theme-colors-self-map: ();\n@each $key\n in (\n 'primary',\n 'secondary',\n 'success',\n 'info',\n 'warning',\n 'danger',\n 'light',\n 'dark'\n )\n{\n $theme-colors-self-map: map.set($theme-colors-self-map, $key, $key);\n}\n$theme-colors: () !default;\n$theme-colors: map-merge($theme-colors, $theme-colors-self-map);\n\n// Used by bootstrap_override_mixins_buttons.scss to map Bootstrap colors to\n// DH semantic colors\n$bootstrap-dh-semantic-map: (\n 'primary': 'accent',\n 'secondary': 'neutral',\n 'success': 'positive',\n 'info': 'info',\n 'warning': 'notice',\n 'danger': 'negative',\n // We shouldn't be using these, but mapping so they work with our custom\n // `color-yiq` mixin. If we find a way to remove $light + $dark that are\n // defined in Bootstrap _variables.scss, we should remove these\n 'light': 'neutral',\n 'dark': 'neutral',\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: var(--dh-color-accent-bg);\n$primary-hover: var(--dh-color-accent-hover-bg);\n$primary-dark: var(--dh-color-accent-down-bg);\n$secondary: var(--dh-color-neutral-bg);\n$secondary-hover: var(--dh-color-neutral-hover-bg);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: var(--dh-color-negative-bg);\n$danger-hover: var(--dh-color-negative-hover-bg);\n// We really don't want to use $light or $dark variables, but Bootstrap defines\n// them in _variables.scss. Explicitly setting them to ensure we are in control\n// of their values. If we can find a way to remove them, we should\n$light: var(--dh-color-gray-light);\n$dark: var(--dh-color-gray-dark);\n// Bootstrap doesn't define $mid, and we want to move away from this particular\n// semantic. Should be deleted by #1635\n$mid: var(--dh-color-gray-mid);\n\n$semantic-colors: (\n 'primary-hover': $primary-hover,\n 'primary-dark': $primary-dark,\n 'mid': $mid,\n 'content-bg': $interfacegray,\n 'background': $interfaceblack,\n 'foreground': $interfacewhite,\n 'secondary-hover': $secondary-hover,\n 'danger-hover': $danger-hover,\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif:\n 'Fira Sans',\n -apple-system,\n blinkmacsystemfont,\n 'Segoe UI',\n 'Roboto',\n 'Helvetica Neue',\n arial,\n sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n 'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n$text-select-color: var(--dh-color-text-highlight);\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem var(--dh-color-dropshadow);\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition:\n color 0.12s ease-in-out,\n background-color 0.12s ease-in-out,\n border-color 0.12s ease-in-out,\n box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n$btn-font-weight: var(--spectrum-global-font-weight-bold);\n$btn-line-height: 1.3;\n\n//Override Inputs\n$input-bg: var(--dh-color-input-bg);\n$input-disabled-bg: var(--dh-color-input-disabled-bg);\n$input-color: var(--dh-color-input-fg);\n$input-border-color: var(--dh-color-input-border);\n$input-placeholder-color: var(--dh-color-input-placeholder);\n$input-focus-border-color: var(--dh-color-input-focus-border);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: color-mix(\n in srgb,\n var(--dh-color-accent) 35%,\n transparent\n);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n$input-btn-line-height: 1.3;\n// Bootstrap uses a calc expression to determine the input height (calc(line-height + 2padding-y + border)).\n// The padding-y value has to be in rem to match units as it is a SASS calc.\n// Using 0.42145rem with 1.3 line height gets us to spectrum's 32px.\n/* stylelint-disable-next-line number-max-precision */\n$input-btn-padding-y: 0.42145rem;\n\n//checkbox\n$custom-control-indicator-bg: var(--dh-color-input-bg);\n$custom-control-indicator-border-color: var(--dh-color-input-border);\n$custom-checkbox-indicator-border-radius: 2px;\n$custom-control-indicator-border-width: 2px;\n$custom-control-indicator-active-bg: var(--dh-color-input-bg);\n$custom-control-indicator-active-border-color: var(--dh-color-input-fg);\n$custom-control-indicator-checked-bg: var(--dh-color-input-fg);\n$custom-control-indicator-checked-color: black; // used as mask fill color\n$custom-checkbox-indicator-indeterminate-bg: var(--dh-color-input-fg);\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: var(--dh-color-input-disabled-bg);\n$custom-control-indicator-checked-disabled-bg: var(\n --dh-color-input-disabled-bg\n);\n$custom-control-label-disabled-color: var(--dh-color-input-disabled-fg);\n\n// The $custom-select-indicator variable is used by Bootstrap to provide the\n// icon for the select dropdown. Inline svgs can't use CSS variables, so we hard\n// code the color to #929192 (the default value of --dh-color-gray-600). PR #1651\n// overrides this icon altogether for known dropdowns, so technically we may not\n// need this, but it's here in case there are any remaining instances.\n$custom-select-indicator-color: #929192;\n$custom-select-bg: var(--dh-color-selector-bg);\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n '#',\n '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: $gray-500;\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $content-bg;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n$close-color: var(--dh-color-text);\n$close-text-shadow: none;\n\n// Toast notification\n$toast-bg: var(--dh-color-accent-100);\n$toast-color: var(--dh-color-text);\n$toast-error-bg: var(--dh-color-negative-bg);\n$toast-error-color: var(--dh-color-text);\n\n//tooltips\n$tooltip-bg: var(--dh-color-tooltip-bg);\n$tooltip-color: var(--dh-color-tooltip-fg);\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem var(--dh-color-tooltip-box-shadow);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: var(--dh-color-item-list-hover-bg);\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: var(--dh-color-popover-bg);\n$contextmenu-color: var(--dh-color-text);\n$contextmenu-disabled-color: var(--dh-color-input-disabled-fg);\n$contextmenu-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg);\n$contextmenu-selected-bg: var(--dh-color-item-list-hover-bg);\n$contextmenu-selected-color: var(--dh-color-item-list-selected-fg);\n\n//hr\n$hr-border-color: var(--dh-color-hr);\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: $danger;\n$form-feedback-icon-invalid: str-replace(\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n '#',\n '%23'\n);\n\n// This section of variables is not consumed directly by DH, but they need to be\n// defined for sass to compile _variables\n$table-dark-bg: $gray-800;\n$table-dark-accent-bg: var(--dh-color-highlight-hover);\n$table-dark-hover-bg: var(--dh-color-highlight-active);\n$table-dark-border-color: $gray-700;\n$popover-bg: var(--dh-color-tooltip-bg);\n$popover-border-color: var(--dh-color-overlay-modal-bg);\n$popover-header-bg: #000;\n$popover-arrow-outer-color: var(--dh-color-dropshadow);\n$custom-range-thumb-active-bg: var(--dh-color-accent-1100);\n","@import '@deephaven/components/scss/custom.scss';\n\n.visibility-ordering-list {\n .column-group {\n button {\n padding: $spacer-1;\n }\n\n .editing-container {\n padding: $spacer-1 0;\n display: flex;\n align-items: center;\n flex-grow: 1;\n\n input {\n flex-grow: 1;\n margin-right: $spacer-1;\n }\n }\n\n .group-name-wrapper {\n display: flex;\n flex-wrap: nowrap;\n justify-content: flex-start;\n align-items: center;\n\n .column-name {\n flex-grow: 0;\n }\n\n .right-buttons {\n margin-left: auto;\n flex-shrink: 0;\n }\n }\n }\n}\n","@use 'sass:math';\n\n//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents, two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n linear-gradient(to right, $color-2 50%, $color-1 50%),\n linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n background-size:\n $ant-size $ant-thickness,\n $ant-size $ant-thickness,\n $ant-thickness $ant-size,\n $ant-thickness $ant-size;\n background-position:\n 0 top,\n 0 bottom,\n left 0,\n right 0;\n background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n animation: march 0.5s;\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n &::#{$pseudo-element} {\n content: ' ';\n background: $primary;\n box-shadow: $box-shadow;\n border-radius: $border-radius;\n position: absolute;\n height: 100%;\n width: 100%;\n @content;\n }\n}\n\n$focus-bg-transparency: 12%;\n$hover-bg-transparency: 14%;\n$active-bg-transparency: 28%;\n$exception-transparency: 28%;\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../../node_modules/@deephaven/components/scss/custom.scss","../../../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss","../../../src/sidebar/visibility-ordering-builder/VisibilityOrderingGroup.scss","../../../../../node_modules/@deephaven/components/scss/new_variables.scss"],"names":[],"mappings":"AAAA;AC6LA;ACzLI;EACE,SCDK;;ADIP;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA,cCZG;;ADgBP;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA","file":"VisibilityOrderingGroup.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore /\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n@import './util.scss';\n","// Styling overrides for bootstrap\n@use 'sass:map';\n\n// Override / set color variables\n$red: var(--dh-color-visual-red);\n$orange: var(--dh-color-visual-orange);\n$yellow: var(--dh-color-visual-yellow);\n$green: var(--dh-color-visual-green);\n$blue: var(--dh-color-visual-blue);\n$purple: var(--dh-color-visual-purple);\n\n// Fallback colors are used if theme isn't loaded\n// this is required for error messages if the API doesn't load\n\n//Define our Gray scale\n$gray-100: var(--dh-color-gray-900, #fcfcfa);\n$gray-200: var(--dh-color-gray-800);\n$gray-300: var(--dh-color-gray-700);\n$gray-400: var(--dh-color-gray-600);\n$gray-500: var(--dh-color-gray-500);\n// intentional duplicate, scale doesn't line up otherwise\n// as we have gray-850 and spectrum doesn't and it is needed\n$gray-600: var(--dh-color-gray-500);\n$gray-700: var(--dh-color-gray-400);\n$gray-800: var(--dh-color-gray-300);\n$gray-850: var(--dh-color-gray-200);\n$gray-900: var(--dh-color-gray-75);\n$black: var(--dh-color-black, #1a171a);\n$white: var(--dh-color-white, #f0f0ee);\n\n//Define some UI colors\n$interfacegray: var(--dh-color-content-bg, #2d2a2e);\n$interfaceblue: var(--dh-color-accent-bg);\n$interfacewhite: $white;\n$interfaceblack: $black;\n$content-bg: var(--dh-color-content-bg, #2d2a2e);\n$background: var(--dh-color-bg, #1a171a);\n$foreground: var(--dh-color-fg, #f0f0ee);\n\n// Extend default Bootstrap $grays map\n$grays-custom: (\n '850': $gray-850,\n);\n$grays: () !default;\n$grays: map-merge($grays, $grays-custom);\n\n// Extend default Bootstrap $colors map\n$colors-custom: (\n 'black': $black,\n);\n$colors: () !default;\n$colors: map-merge($colors, $colors-custom);\n\n// Override default Bootstrap $theme-colors map by mapping each key to itself.\n// These will then be re-mapped inside of `button-outline-variant` and\n// `button-outline-variant` mixins in `bootstrap_override_mixins_buttons.scss`\n$theme-colors-self-map: ();\n@each $key\n in (\n 'primary',\n 'secondary',\n 'success',\n 'info',\n 'warning',\n 'danger',\n 'light',\n 'dark'\n )\n{\n $theme-colors-self-map: map.set($theme-colors-self-map, $key, $key);\n}\n$theme-colors: () !default;\n$theme-colors: map-merge($theme-colors, $theme-colors-self-map);\n\n// Used by bootstrap_override_mixins_buttons.scss to map Bootstrap colors to\n// DH semantic colors\n$bootstrap-dh-semantic-map: (\n 'primary': 'accent',\n 'secondary': 'neutral',\n 'success': 'positive',\n 'info': 'info',\n 'warning': 'notice',\n 'danger': 'negative',\n // We shouldn't be using these, but mapping so they work with our custom\n // `color-yiq` mixin. If we find a way to remove $light + $dark that are\n // defined in Bootstrap _variables.scss, we should remove these\n 'light': 'neutral',\n 'dark': 'neutral',\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: var(--dh-color-accent-bg);\n$primary-hover: var(--dh-color-accent-hover-bg);\n$primary-dark: var(--dh-color-accent-down-bg);\n$secondary: var(--dh-color-neutral-bg);\n$secondary-hover: var(--dh-color-neutral-hover-bg);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: var(--dh-color-negative-bg);\n$danger-hover: var(--dh-color-negative-hover-bg);\n// We really don't want to use $light or $dark variables, but Bootstrap defines\n// them in _variables.scss. Explicitly setting them to ensure we are in control\n// of their values. If we can find a way to remove them, we should\n$light: var(--dh-color-gray-light);\n$dark: var(--dh-color-gray-dark);\n// Bootstrap doesn't define $mid, and we want to move away from this particular\n// semantic. Should be deleted by #1635\n$mid: var(--dh-color-gray-mid);\n\n$semantic-colors: (\n 'primary-hover': $primary-hover,\n 'primary-dark': $primary-dark,\n 'mid': $mid,\n 'content-bg': $interfacegray,\n 'background': $interfaceblack,\n 'foreground': $interfacewhite,\n 'secondary-hover': $secondary-hover,\n 'danger-hover': $danger-hover,\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif:\n 'Fira Sans',\n -apple-system,\n blinkmacsystemfont,\n 'Segoe UI',\n 'Roboto',\n 'Helvetica Neue',\n arial,\n sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n 'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n$text-select-color: var(--dh-color-text-highlight);\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem var(--dh-color-dropshadow);\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition:\n color 0.12s ease-in-out,\n background-color 0.12s ease-in-out,\n border-color 0.12s ease-in-out,\n box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n$btn-font-weight: var(--spectrum-global-font-weight-bold);\n$btn-line-height: 1.3;\n\n//Override Inputs\n$input-bg: var(--dh-color-input-bg);\n$input-disabled-bg: var(--dh-color-input-disabled-bg);\n$input-color: var(--dh-color-input-fg);\n$input-border-color: var(--dh-color-input-border);\n$input-placeholder-color: var(--dh-color-input-placeholder);\n$input-focus-border-color: var(--dh-color-input-focus-border);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: color-mix(\n in srgb,\n var(--dh-color-accent) 35%,\n transparent\n);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n$input-btn-line-height: 1.3;\n// Bootstrap uses a calc expression to determine the input height (calc(line-height + 2padding-y + border)).\n// The padding-y value has to be in rem to match units as it is a SASS calc.\n// Using 0.42145rem with 1.3 line height gets us to spectrum's 32px.\n/* stylelint-disable-next-line number-max-precision */\n$input-btn-padding-y: 0.42145rem;\n\n//checkbox\n$custom-control-indicator-bg: var(--dh-color-input-bg);\n$custom-control-indicator-border-color: var(--dh-color-input-border);\n$custom-checkbox-indicator-border-radius: 2px;\n$custom-control-indicator-border-width: 2px;\n$custom-control-indicator-active-bg: var(--dh-color-input-bg);\n$custom-control-indicator-active-border-color: var(--dh-color-input-fg);\n$custom-control-indicator-checked-bg: var(--dh-color-input-fg);\n$custom-control-indicator-checked-color: black; // used as mask fill color\n$custom-checkbox-indicator-indeterminate-bg: var(--dh-color-input-fg);\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: var(--dh-color-input-disabled-bg);\n$custom-control-indicator-checked-disabled-bg: var(\n --dh-color-input-disabled-bg\n);\n$custom-control-label-disabled-color: var(--dh-color-input-disabled-fg);\n\n// The $custom-select-indicator variable is used by Bootstrap to provide the\n// icon for the select dropdown. Inline svgs can't use CSS variables, so we hard\n// code the color to #929192 (the default value of --dh-color-gray-600). PR #1651\n// overrides this icon altogether for known dropdowns, so technically we may not\n// need this, but it's here in case there are any remaining instances.\n$custom-select-indicator-color: #929192;\n$custom-select-bg: var(--dh-color-selector-bg);\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n '#',\n '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: $gray-500;\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $content-bg;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n$close-color: var(--dh-color-text);\n$close-text-shadow: none;\n\n// Toast notification\n$toast-bg: var(--dh-color-accent-100);\n$toast-color: var(--dh-color-text);\n$toast-error-bg: var(--dh-color-negative-bg);\n$toast-error-color: var(--dh-color-text);\n\n//tooltips\n$tooltip-bg: var(--dh-color-tooltip-bg);\n$tooltip-color: var(--dh-color-tooltip-fg);\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem var(--dh-color-tooltip-box-shadow);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: var(--dh-color-item-list-hover-bg);\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: var(--dh-color-popover-bg);\n$contextmenu-color: var(--dh-color-text);\n$contextmenu-disabled-color: var(--dh-color-text-disabled);\n$contextmenu-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg);\n$contextmenu-selected-bg: var(--dh-color-item-list-hover-bg);\n$contextmenu-selected-color: var(--dh-color-item-list-selected-fg);\n\n//hr\n$hr-border-color: var(--dh-color-hr);\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: $danger;\n$form-feedback-icon-invalid: str-replace(\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n '#',\n '%23'\n);\n\n// This section of variables is not consumed directly by DH, but they need to be\n// defined for sass to compile _variables\n$table-dark-bg: $gray-800;\n$table-dark-accent-bg: var(--dh-color-highlight-hover);\n$table-dark-hover-bg: var(--dh-color-highlight-active);\n$table-dark-border-color: $gray-700;\n$popover-bg: var(--dh-color-tooltip-bg);\n$popover-border-color: var(--dh-color-overlay-modal-bg);\n$popover-header-bg: #000;\n$popover-arrow-outer-color: var(--dh-color-dropshadow);\n$custom-range-thumb-active-bg: var(--dh-color-accent-1100);\n","@import '@deephaven/components/scss/custom.scss';\n\n.visibility-ordering-list {\n .column-group {\n button {\n padding: $spacer-1;\n }\n\n .editing-container {\n padding: $spacer-1 0;\n display: flex;\n align-items: center;\n flex-grow: 1;\n\n input {\n flex-grow: 1;\n margin-right: $spacer-1;\n }\n }\n\n .group-name-wrapper {\n display: flex;\n flex-wrap: nowrap;\n justify-content: flex-start;\n align-items: center;\n\n .column-name {\n flex-grow: 0;\n }\n\n .right-buttons {\n margin-left: auto;\n flex-shrink: 0;\n }\n }\n }\n}\n","@use 'sass:math';\n\n//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents, two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n linear-gradient(to right, $color-2 50%, $color-1 50%),\n linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n background-size:\n $ant-size $ant-thickness,\n $ant-size $ant-thickness,\n $ant-thickness $ant-size,\n $ant-thickness $ant-size;\n background-position:\n 0 top,\n 0 bottom,\n left 0,\n right 0;\n background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n animation: march 0.5s;\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n &::#{$pseudo-element} {\n content: ' ';\n background: $primary;\n box-shadow: $box-shadow;\n border-radius: $border-radius;\n position: absolute;\n height: 100%;\n width: 100%;\n @content;\n }\n}\n\n$focus-bg-transparency: 12%;\n$hover-bg-transparency: 14%;\n$active-bg-transparency: 28%;\n$exception-transparency: 28%;\n"]}

package/dist/sidebar/visibility-ordering-builder/VisibilityOrderingGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VisibilityOrderingGroup.js","names":["React","useEffect","useRef","useState","useCallback","classNames","FontAwesomeIcon","Button","ThemeExport","dhSquareFilled","vsCheck","vsChromeClose","vsEdit","vsPaintcan","vsTrash","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","VisibilityOrderingGroup","props","_group$color","group","onDelete","onColorChange","onNameChange","validateName","isNew","groupRef","nameInputRef","colorInputRef","isColorInputOpen","setIsColorInputOpen","name","setName","isEditing","setIsEditing","shouldValidate","setShouldValidate","nameValidationError","isValid","colorInputBlurHandler","focusEditInput","current","focus","select","deleteNewOnUnmount","openColorInput","_colorInputRef$curren","_colorInputRef$curren2","click","window","addEventListener","removeEventListener","handleConfirm","handleCancel","handleEditKeyDown","e","key","stopPropagation","children","className","ref","value","placeholder","onChange","target","onKeyDown","onBlur","kind","icon","tooltip","onClick","color","undefined","white","transform","val","type","list","style","visibility","width","height","padding","border","id","primary","foreground","green","yellow","orange","red","purple","blue"],"sources":["../../../src/sidebar/visibility-ordering-builder/VisibilityOrderingGroup.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, useCallback } from 'react';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { Button, ThemeExport } from '@deephaven/components';\nimport {\n dhSquareFilled,\n vsCheck,\n vsChromeClose,\n vsEdit,\n vsPaintcan,\n vsTrash,\n} from '@deephaven/icons';\nimport type ColumnHeaderGroup from '../../ColumnHeaderGroup';\nimport './VisibilityOrderingGroup.scss';\n\ninterface VisibilityOrderingGroupProps {\n group: ColumnHeaderGroup;\n onDelete: (group: ColumnHeaderGroup) => void;\n onColorChange: (group: ColumnHeaderGroup, color: string \| undefined) => void;\n onNameChange: (group: ColumnHeaderGroup, name: string) => void;\n validateName: (name: string) => string;\n}\n\nexport default function VisibilityOrderingGroup(\n props: VisibilityOrderingGroupProps\n): JSX.Element {\n const { group, onDelete, onColorChange, onNameChange, validateName } = props;\n const { isNew } = group;\n const groupRef = useRef(group);\n const nameInputRef = useRef<HTMLInputElement>(null);\n const colorInputRef = useRef<HTMLInputElement>(null);\n const [isColorInputOpen, setIsColorInputOpen] = useState(false);\n const [name, setName] = useState(isNew ? '' : group.name);\n const [isEditing, setIsEditing] = useState(isNew);\n const [shouldValidate, setShouldValidate] = useState(false);\n const nameValidationError = name !== group.name ? validateName(name) : '';\n const isValid = (isNew && !shouldValidate) \|\| nameValidationError === '';\n const colorInputBlurHandler = useCallback(() => {\n setIsColorInputOpen(false);\n }, []);\n\n useEffect(\n function focusEditInput() {\n if (isEditing && nameInputRef.current) {\n // This is solely b/c RTL doesn't count select as focusing the element\n // Might be fixed in v13+ of RTL\n nameInputRef.current.focus();\n nameInputRef.current.select();\n }\n },\n [isEditing]\n );\n\n useEffect(\n function deleteNewOnUnmount() {\n return () => {\n if (groupRef.current.isNew) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n onDelete(groupRef.current);\n }\n };\n },\n [onDelete]\n );\n\n useEffect(\n function openColorInput() {\n if (isColorInputOpen) {\n colorInputRef.current?.click();\n // Mostly for testing. Chrome seems to not give the hidden input focus\n // Really would only affect screen readers\n colorInputRef.current?.focus();\n\n /*\n Adding this event handler is for Firefox on Mac\n * There seems to be buggy behavior when multiple color inputs are on the same page\n * Clicking between the inputs without closing the previous causes a bad state\n * The user gets to a point where they can't open most of the pickers\n * https://bugzilla.mozilla.org/show_bug.cgi?id=1618418\n * https://bugzilla.mozilla.org/show_bug.cgi?id=975468\n * Instead, we remove the color input when any focus is returned to the window\n * This causes Firefox on Mac to mostly operate correctly\n * Firefox seems to ignore the first click back into the window and emit no event\n * So opening a color picker when another is open requires 2 clicks in Firefox\n /\n window.addEventListener('click', colorInputBlurHandler, true);\n }\n\n return () =>\n window.removeEventListener('click', colorInputBlurHandler, true);\n },\n [isColorInputOpen, colorInputBlurHandler]\n );\n\n const handleConfirm = (): void => {\n if (isValid) {\n onNameChange(group, name);\n setIsEditing(false);\n }\n };\n\n const handleCancel = (): void => {\n if (isNew) {\n onDelete(group);\n return;\n }\n setName(group.name);\n setIsEditing(false);\n };\n\n const handleEditKeyDown = (e: React.KeyboardEvent): void => {\n setShouldValidate(true);\n if (e.key === 'Enter') {\n e.stopPropagation();\n handleConfirm();\n }\n\n if (e.key === ' ') {\n e.stopPropagation();\n }\n\n if (e.key === 'Escape') {\n handleCancel();\n }\n };\n\n if (isEditing) {\n return (\n <>\n <div className=\"editing-container\">\n <input\n ref={nameInputRef}\n className={classNames('form-control', {\n 'is-invalid': !isValid,\n })}\n value={name}\n placeholder=\"Group Name\"\n onChange={e => setName(e.target.value)}\n onKeyDown={handleEditKeyDown}\n onBlur={() => setShouldValidate(true)}\n />\n <Button\n kind=\"ghost\"\n icon={vsCheck}\n tooltip=\"Confirm\"\n onClick={handleConfirm}\n />\n <Button\n kind=\"ghost\"\n icon={vsChromeClose}\n tooltip=\"Cancel\"\n onClick={handleCancel}\n />\n </div>\n {!isValid && (\n <p className=\"mb-0 validate-label-error text-danger\">\n {nameValidationError}\n </p>\n )}\n </>\n );\n }\n\n return (\n <div className=\"group-name-wrapper\">\n <span className=\"column-name\">{name}</span>\n <Button\n className=\"p-1 mx-1\"\n kind=\"ghost\"\n icon={vsEdit}\n tooltip=\"Edit\"\n onClick={() => {\n setIsEditing(true);\n }}\n />\n\n <span className=\"right-buttons\">\n <Button\n kind=\"ghost\"\n icon={vsTrash}\n tooltip=\"Delete group\"\n onClick={() => onDelete(group)}\n />\n <Button\n kind=\"ghost\"\n className=\"color-swatch mr-1\"\n icon={\n group.color !== undefined ? (\n <span className=\"fa-layers\">\n <FontAwesomeIcon\n className=\"color-swatch\"\n icon={dhSquareFilled}\n color={ThemeExport.white}\n transform=\"down-1\"\n />\n <FontAwesomeIcon\n className=\"color-swatch\"\n icon={dhSquareFilled}\n color={group.color}\n transform=\"shrink-2 down-1\"\n />\n </span>\n ) : (\n vsPaintcan\n )\n }\n tooltip=\"Set color\"\n /\n Toggle to close the picker on Chrome\n * Prevents Firefox on Mac from getting into a stuck state\n * Does not close on Firefox b/c the picker stays open when the element is removed\n */\n onClick={() => setIsColorInputOpen(val => !val)}\n />\n {isColorInputOpen && (\n <>\n <input\n aria-label=\"Color input\"\n ref={colorInputRef}\n type=\"color\"\n list=\"presetColors\"\n value={group.color ?? ThemeExport['content-bg']}\n style={{\n visibility: 'hidden',\n width: 0,\n height: 0,\n padding: 0,\n border: 0,\n }}\n onChange={e => {\n group.color = e.target.value;\n onColorChange(group, e.target.value);\n }}\n />\n <datalist id=\"presetColors\">\n <option>{ThemeExport['content-bg']}</option>\n <option>{ThemeExport.primary}</option>\n <option>{ThemeExport.foreground}</option>\n <option>{ThemeExport.green}</option>\n <option>{ThemeExport.yellow}</option>\n <option>{ThemeExport.orange}</option>\n <option>{ThemeExport.red}</option>\n <option>{ThemeExport.purple}</option>\n <option>{ThemeExport.blue}</option>\n <option>{ThemeExport['gray-400']}</option>\n </datalist>\n </>\n )}\n </span>\n </div>\n );\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"VisibilityOrderingGroup.js","names":["React","useEffect","useRef","useState","useCallback","classNames","FontAwesomeIcon","Button","ThemeExport","dhSquareFilled","vsCheck","vsChromeClose","vsEdit","vsPaintcan","vsTrash","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","VisibilityOrderingGroup","props","_group$color","group","onDelete","onColorChange","onNameChange","validateName","isNew","groupRef","nameInputRef","colorInputRef","isColorInputOpen","setIsColorInputOpen","name","setName","isEditing","setIsEditing","shouldValidate","setShouldValidate","nameValidationError","isValid","colorInputBlurHandler","focusEditInput","current","focus","select","deleteNewOnUnmount","openColorInput","_colorInputRef$curren","_colorInputRef$curren2","click","window","addEventListener","removeEventListener","handleConfirm","handleCancel","handleEditKeyDown","e","key","stopPropagation","children","className","ref","value","placeholder","onChange","target","onKeyDown","onBlur","kind","icon","tooltip","onClick","color","undefined","white","transform","val","type","list","style","visibility","width","height","padding","border","id","primary","foreground","green","yellow","orange","red","purple","blue"],"sources":["../../../src/sidebar/visibility-ordering-builder/VisibilityOrderingGroup.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, useCallback } from 'react';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { Button, ThemeExport } from '@deephaven/components';\nimport {\n dhSquareFilled,\n vsCheck,\n vsChromeClose,\n vsEdit,\n vsPaintcan,\n vsTrash,\n} from '@deephaven/icons';\nimport type ColumnHeaderGroup from '../../ColumnHeaderGroup';\nimport './VisibilityOrderingGroup.scss';\n\ninterface VisibilityOrderingGroupProps {\n group: ColumnHeaderGroup;\n onDelete: (group: ColumnHeaderGroup) => void;\n onColorChange: (group: ColumnHeaderGroup, color: string \| undefined) => void;\n onNameChange: (group: ColumnHeaderGroup, name: string) => void;\n validateName: (name: string) => string;\n}\n\nexport default function VisibilityOrderingGroup(\n props: VisibilityOrderingGroupProps\n): JSX.Element {\n const { group, onDelete, onColorChange, onNameChange, validateName } = props;\n const { isNew } = group;\n const groupRef = useRef(group);\n const nameInputRef = useRef<HTMLInputElement>(null);\n const colorInputRef = useRef<HTMLInputElement>(null);\n const [isColorInputOpen, setIsColorInputOpen] = useState(false);\n const [name, setName] = useState(isNew ? '' : group.name);\n const [isEditing, setIsEditing] = useState(isNew);\n const [shouldValidate, setShouldValidate] = useState(false);\n const nameValidationError = name !== group.name ? validateName(name) : '';\n const isValid = (isNew && !shouldValidate) \|\| nameValidationError === '';\n const colorInputBlurHandler = useCallback(() => {\n setIsColorInputOpen(false);\n }, []);\n\n useEffect(\n function focusEditInput() {\n if (isEditing && nameInputRef.current) {\n // This is solely b/c RTL doesn't count select as focusing the element\n // Might be fixed in v13+ of RTL\n nameInputRef.current.focus();\n nameInputRef.current.select();\n }\n },\n [isEditing]\n );\n\n useEffect(\n function deleteNewOnUnmount() {\n return () => {\n if (groupRef.current.isNew) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n onDelete(groupRef.current);\n }\n };\n },\n [onDelete]\n );\n\n useEffect(\n function openColorInput() {\n if (isColorInputOpen) {\n colorInputRef.current?.click();\n // Mostly for testing. Chrome seems to not give the hidden input focus\n // Really would only affect screen readers\n colorInputRef.current?.focus();\n\n /*\n Adding this event handler is for Firefox on Mac\n * There seems to be buggy behavior when multiple color inputs are on the same page\n * Clicking between the inputs without closing the previous causes a bad state\n * The user gets to a point where they can't open most of the pickers\n * https://bugzilla.mozilla.org/show_bug.cgi?id=1618418\n * https://bugzilla.mozilla.org/show_bug.cgi?id=975468\n * Instead, we remove the color input when any focus is returned to the window\n * This causes Firefox on Mac to mostly operate correctly\n * Firefox seems to ignore the first click back into the window and emit no event\n * So opening a color picker when another is open requires 2 clicks in Firefox\n /\n window.addEventListener('click', colorInputBlurHandler, true);\n }\n\n return () =>\n window.removeEventListener('click', colorInputBlurHandler, true);\n },\n [isColorInputOpen, colorInputBlurHandler]\n );\n\n const handleConfirm = (): void => {\n if (isValid) {\n onNameChange(group, name);\n setIsEditing(false);\n }\n };\n\n const handleCancel = (): void => {\n if (isNew) {\n onDelete(group);\n return;\n }\n setName(group.name);\n setIsEditing(false);\n };\n\n const handleEditKeyDown = (e: React.KeyboardEvent): void => {\n setShouldValidate(true);\n if (e.key === 'Enter') {\n e.stopPropagation();\n handleConfirm();\n }\n\n if (e.key === ' ') {\n e.stopPropagation();\n }\n\n if (e.key === 'Escape') {\n handleCancel();\n }\n };\n\n if (isEditing) {\n return (\n <>\n <div className=\"editing-container\">\n <input\n ref={nameInputRef}\n className={classNames('form-control', {\n 'is-invalid': !isValid,\n })}\n value={name}\n placeholder=\"Group Name\"\n onChange={e => setName(e.target.value)}\n onKeyDown={handleEditKeyDown}\n onBlur={() => setShouldValidate(true)}\n />\n <Button\n kind=\"ghost\"\n icon={vsCheck}\n tooltip=\"Confirm\"\n onClick={handleConfirm}\n />\n <Button\n kind=\"ghost\"\n icon={vsChromeClose}\n tooltip=\"Cancel\"\n onClick={handleCancel}\n />\n </div>\n {!isValid && (\n <p className=\"mb-0 validate-label-error text-danger\">\n {nameValidationError}\n </p>\n )}\n </>\n );\n }\n\n return (\n <div className=\"group-name-wrapper\">\n <span className=\"column-name\">{name}</span>\n <Button\n className=\"p-1 mx-1\"\n kind=\"ghost\"\n icon={vsEdit}\n tooltip=\"Edit\"\n onClick={() => {\n setIsEditing(true);\n }}\n />\n\n <span className=\"right-buttons\">\n <Button\n kind=\"ghost\"\n icon={vsTrash}\n tooltip=\"Delete group\"\n onClick={() => onDelete(group)}\n />\n <Button\n kind=\"ghost\"\n className=\"color-swatch mr-1\"\n icon={\n group.color !== undefined ? (\n <span className=\"fa-layers\">\n <FontAwesomeIcon\n className=\"color-swatch\"\n icon={dhSquareFilled}\n color={ThemeExport.white}\n transform=\"down-1\"\n />\n <FontAwesomeIcon\n className=\"color-swatch\"\n icon={dhSquareFilled}\n color={group.color}\n transform=\"shrink-2 down-1\"\n />\n </span>\n ) : (\n vsPaintcan\n )\n }\n tooltip=\"Set color\"\n /\n Toggle to close the picker on Chrome\n * Prevents Firefox on Mac from getting into a stuck state\n * Does not close on Firefox b/c the picker stays open when the element is removed\n */\n onClick={() => setIsColorInputOpen(val => !val)}\n />\n {isColorInputOpen && (\n <>\n <input\n aria-label=\"Color input\"\n ref={colorInputRef}\n type=\"color\"\n list=\"presetColors\"\n value={group.color ?? ThemeExport['content-bg']}\n style={{\n visibility: 'hidden',\n width: 0,\n height: 0,\n padding: 0,\n border: 0,\n }}\n onChange={e => {\n group.color = e.target.value;\n onColorChange(group, e.target.value);\n }}\n />\n <datalist id=\"presetColors\">\n <option>{ThemeExport['content-bg']}</option>\n <option>{ThemeExport.primary}</option>\n <option>{ThemeExport.foreground}</option>\n <option>{ThemeExport.green}</option>\n <option>{ThemeExport.yellow}</option>\n <option>{ThemeExport.orange}</option>\n <option>{ThemeExport.red}</option>\n <option>{ThemeExport.purple}</option>\n <option>{ThemeExport.blue}</option>\n <option>{ThemeExport['gray-400']}</option>\n </datalist>\n </>\n )}\n </span>\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/sidebar/visibility-ordering-builder/VisibilityOrderingItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VisibilityOrderingItem.js","names":["React","forwardRef","useCallback","useRef","classNames","FontAwesomeIcon","dhEye","dhEyeSlash","vsGripper","Button","Tooltip","VisibilityOrderingGroup","jsx","_jsx","jsxs","_jsxs","emptyOnClick","VisibilityOrderingItem","props","ref","value","clone","childCount","item","onVisibilityChange","onClick","onGroupDelete","onGroupColorChange","onGroupNameChange","validateGroupName","handleProps","group","modelIndex","isVisible","data","buttonRef","handleVisibilityChange","e","buttons","_buttonRef$current","flat","current","focus","handleClick","event","_objectSpread","className","isSelected","selected","children","kind","onMouseDown","onMouseEnter","icon","tooltip","onDelete","onColorChange","onNameChange","validateName"],"sources":["../../../src/sidebar/visibility-ordering-builder/VisibilityOrderingItem.tsx"],"sourcesContent":["/* eslint-disable react/prop-types /\nimport React, { forwardRef, useCallback, useRef } from 'react';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { dhEye, dhEyeSlash, vsGripper } from '@deephaven/icons';\nimport { Button, Tooltip } from '@deephaven/components';\nimport VisibilityOrderingGroup from './VisibilityOrderingGroup';\nimport { type FlattenedIrisGridTreeItem } from './sortable-tree/utilities';\nimport type ColumnHeaderGroup from '../../ColumnHeaderGroup';\n\ntype VisibilityOrderingItemProps = {\n value: string;\n clone: boolean;\n childCount: number;\n item: FlattenedIrisGridTreeItem;\n onVisibilityChange: (modelIndexes: number[], isVisible: boolean) => void;\n onClick: (name: string, event: React.MouseEvent<HTMLElement>) => void;\n onGroupDelete: (group: ColumnHeaderGroup) => void;\n onGroupColorChange: (\n group: ColumnHeaderGroup,\n color: string \| undefined\n ) => void;\n onGroupNameChange: (group: ColumnHeaderGroup, name: string) => void;\n validateGroupName: (name: string) => string;\n handleProps?: Record<string, unknown>;\n};\n\nfunction emptyOnClick(): void {\n // no-op\n}\n\nconst VisibilityOrderingItem = forwardRef<\n HTMLDivElement,\n VisibilityOrderingItemProps\n>(function VisibilityOrderingItem(props, ref) {\n const {\n value,\n clone,\n childCount,\n item,\n onVisibilityChange,\n onClick,\n onGroupDelete,\n onGroupColorChange,\n onGroupNameChange,\n validateGroupName,\n handleProps,\n } = props;\n const { group, modelIndex, isVisible } = item.data;\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n const handleVisibilityChange = useCallback(\n (e: React.MouseEvent) => {\n if (e.buttons === 1) {\n onVisibilityChange([modelIndex].flat(), !isVisible);\n buttonRef.current?.focus();\n }\n },\n [onVisibilityChange, modelIndex, isVisible]\n );\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLElement>) => {\n onClick(value, event);\n },\n [onClick, value]\n );\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n ref={ref}\n className={classNames('tree-item', {\n isSelected: item.selected,\n 'two-dragged': childCount === 2,\n 'multiple-dragged': childCount > 2,\n })}\n onClick={handleClick}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...handleProps}\n >\n <Button\n ref={buttonRef}\n kind=\"ghost\"\n className=\"px-1\"\n // We PropType validate onClick for Button\n onClick={emptyOnClick}\n onMouseDown={handleVisibilityChange}\n onMouseEnter={handleVisibilityChange}\n icon={isVisible ? dhEye : dhEyeSlash}\n tooltip=\"Toggle visibility\"\n />\n <span className={classNames('column-name', group && 'column-group')}>\n {/ Display a normal item if this is the drag overlay clone, even if it's a group */}\n {group && !clone ? (\n <VisibilityOrderingGroup\n group={group}\n onDelete={onGroupDelete}\n onColorChange={onGroupColorChange}\n onNameChange={onGroupNameChange}\n validateName={validateGroupName}\n />\n ) : (\n value\n )}\n </span>\n <div>\n {clone && childCount > 1 && (\n <span className=\"item-count\">{childCount}</span>\n )}\n <Tooltip>Drag to re-order</Tooltip>\n <FontAwesomeIcon icon={vsGripper} />\n </div>\n </div>\n );\n});\n\nexport default VisibilityOrderingItem;\n"],"mappings":"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"~~,"ignoreList":[]~~}
1	+ {"version":3,"file":"VisibilityOrderingItem.js","names":["React","forwardRef","useCallback","useRef","classNames","FontAwesomeIcon","dhEye","dhEyeSlash","vsGripper","Button","Tooltip","VisibilityOrderingGroup","jsx","_jsx","jsxs","_jsxs","emptyOnClick","VisibilityOrderingItem","props","ref","value","clone","childCount","item","onVisibilityChange","onClick","onGroupDelete","onGroupColorChange","onGroupNameChange","validateGroupName","handleProps","group","modelIndex","isVisible","data","buttonRef","handleVisibilityChange","e","buttons","_buttonRef$current","flat","current","focus","handleClick","event","_objectSpread","className","isSelected","selected","children","kind","onMouseDown","onMouseEnter","icon","tooltip","onDelete","onColorChange","onNameChange","validateName"],"sources":["../../../src/sidebar/visibility-ordering-builder/VisibilityOrderingItem.tsx"],"sourcesContent":["/* eslint-disable react/prop-types /\nimport React, { forwardRef, useCallback, useRef } from 'react';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { dhEye, dhEyeSlash, vsGripper } from '@deephaven/icons';\nimport { Button, Tooltip } from '@deephaven/components';\nimport VisibilityOrderingGroup from './VisibilityOrderingGroup';\nimport { type FlattenedIrisGridTreeItem } from './sortable-tree/utilities';\nimport type ColumnHeaderGroup from '../../ColumnHeaderGroup';\n\ntype VisibilityOrderingItemProps = {\n value: string;\n clone: boolean;\n childCount: number;\n item: FlattenedIrisGridTreeItem;\n onVisibilityChange: (modelIndexes: number[], isVisible: boolean) => void;\n onClick: (name: string, event: React.MouseEvent<HTMLElement>) => void;\n onGroupDelete: (group: ColumnHeaderGroup) => void;\n onGroupColorChange: (\n group: ColumnHeaderGroup,\n color: string \| undefined\n ) => void;\n onGroupNameChange: (group: ColumnHeaderGroup, name: string) => void;\n validateGroupName: (name: string) => string;\n handleProps?: Record<string, unknown>;\n};\n\nfunction emptyOnClick(): void {\n // no-op\n}\n\nconst VisibilityOrderingItem = forwardRef<\n HTMLDivElement,\n VisibilityOrderingItemProps\n>(function VisibilityOrderingItem(props, ref) {\n const {\n value,\n clone,\n childCount,\n item,\n onVisibilityChange,\n onClick,\n onGroupDelete,\n onGroupColorChange,\n onGroupNameChange,\n validateGroupName,\n handleProps,\n } = props;\n const { group, modelIndex, isVisible } = item.data;\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n const handleVisibilityChange = useCallback(\n (e: React.MouseEvent) => {\n if (e.buttons === 1) {\n onVisibilityChange([modelIndex].flat(), !isVisible);\n buttonRef.current?.focus();\n }\n },\n [onVisibilityChange, modelIndex, isVisible]\n );\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLElement>) => {\n onClick(value, event);\n },\n [onClick, value]\n );\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n ref={ref}\n className={classNames('tree-item', {\n isSelected: item.selected,\n 'two-dragged': childCount === 2,\n 'multiple-dragged': childCount > 2,\n })}\n onClick={handleClick}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...handleProps}\n >\n <Button\n ref={buttonRef}\n kind=\"ghost\"\n className=\"px-1\"\n // We PropType validate onClick for Button\n onClick={emptyOnClick}\n onMouseDown={handleVisibilityChange}\n onMouseEnter={handleVisibilityChange}\n icon={isVisible ? dhEye : dhEyeSlash}\n tooltip=\"Toggle visibility\"\n />\n <span className={classNames('column-name', group && 'column-group')}>\n {/ Display a normal item if this is the drag overlay clone, even if it's a group */}\n {group && !clone ? (\n <VisibilityOrderingGroup\n group={group}\n onDelete={onGroupDelete}\n onColorChange={onGroupColorChange}\n onNameChange={onGroupNameChange}\n validateName={validateGroupName}\n />\n ) : (\n value\n )}\n </span>\n <div>\n {clone && childCount > 1 && (\n <span className=\"item-count\">{childCount}</span>\n )}\n <Tooltip>Drag to re-order</Tooltip>\n <FontAwesomeIcon icon={vsGripper} />\n </div>\n </div>\n );\n});\n\nexport default VisibilityOrderingItem;\n"],"mappings":"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"}

package/dist/sidebar/visibility-ordering-builder/sortable-tree/PointerSensorWithInteraction.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PointerSensorWithInteraction.js","names":["PointerSensor","PointerSensorWithInteraction","_defineProperty","eventName","handler","_ref","nativeEvent","event","isPrimary","button","isInteractiveElement","target","INTERACTIVE_ELEMENTS","element","tagName","includes","toLowerCase"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/PointerSensorWithInteraction.ts"],"sourcesContent":["import type { PointerEvent } from 'react';\nimport { PointerSensor } from '@dnd-kit/core';\n\n/*\n An extended \"PointerSensor\" that prevent some\n * interactive html element(button, input, textarea, select, option...) from dragging\n */\nexport default class PointerSensorWithInteraction extends PointerSensor {\n static activators = [\n {\n eventName: 'onPointerDown' as const,\n handler: ({ nativeEvent: event }: PointerEvent): boolean => {\n if (\n !event.isPrimary \|\|\n event.button !== 0 \|\|\n isInteractiveElement(event.target as Element)\n ) {\n return false;\n }\n\n return true;\n },\n },\n ];\n}\n\nconst INTERACTIVE_ELEMENTS = [\n 'button',\n 'input',\n 'textarea',\n 'select',\n 'option',\n];\n\nfunction isInteractiveElement(element: Element \| null): boolean {\n if (\n element?.tagName != null &&\n INTERACTIVE_ELEMENTS.includes(element.tagName.toLowerCase())\n ) {\n return true;\n }\n\n return false;\n}\n"],"mappings":";;;AACA,SAASA,aAAa,QAAQ,eAAe;;AAE7C;AACA;AACA;AACA;AACA,eAAe,MAAMC,4BAA4B,SAASD,aAAa,CAAC;AAiBvEE,eAAA,CAjBoBD,4BAA4B,gBAC3B,CAClB;EACEE,SAAS,EAAE,eAAwB;EACnCC,OAAO,EAAEC,IAAA,IAAmD;IAAA,IAAlD;MAAEC,WAAW,EAAEC;IAAoB,CAAC,GAAAF,IAAA;IAC5C,IACE,CAACE,KAAK,CAACC,SAAS,IAChBD,KAAK,CAACE,MAAM,KAAK,CAAC,IAClBC,oBAAoB,CAACH,KAAK,CAACI,MAAiB,CAAC,EAC7C;MACA,OAAO,KAAK;IACd;IAEA,OAAO,IAAI;EACb;AACF,CAAC,CACF;AAGH,IAAMC,oBAAoB,GAAG,CAC3B,QAAQ,EACR,OAAO,EACP,UAAU,EACV,QAAQ,EACR,QAAQ,CACT;AAED,SAASF,oBAAoBA,CAACG,OAAuB,EAAW;EAC9D,IACE,CAAAA,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEC,OAAO,KAAI,IAAI,IACxBF,oBAAoB,CAACG,QAAQ,CAACF,OAAO,CAACC,OAAO,CAACE,WAAW,CAAC,CAAC,CAAC,EAC5D;IACA,OAAO,IAAI;EACb;EAEA,OAAO,KAAK;AACd"~~,"ignoreList":[]~~}
1	+ {"version":3,"file":"PointerSensorWithInteraction.js","names":["PointerSensor","PointerSensorWithInteraction","_defineProperty","eventName","handler","_ref","nativeEvent","event","isPrimary","button","isInteractiveElement","target","INTERACTIVE_ELEMENTS","element","tagName","includes","toLowerCase"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/PointerSensorWithInteraction.ts"],"sourcesContent":["import type { PointerEvent } from 'react';\nimport { PointerSensor } from '@dnd-kit/core';\n\n/*\n An extended \"PointerSensor\" that prevent some\n * interactive html element(button, input, textarea, select, option...) from dragging\n */\nexport default class PointerSensorWithInteraction extends PointerSensor {\n static activators = [\n {\n eventName: 'onPointerDown' as const,\n handler: ({ nativeEvent: event }: PointerEvent): boolean => {\n if (\n !event.isPrimary \|\|\n event.button !== 0 \|\|\n isInteractiveElement(event.target as Element)\n ) {\n return false;\n }\n\n return true;\n },\n },\n ];\n}\n\nconst INTERACTIVE_ELEMENTS = [\n 'button',\n 'input',\n 'textarea',\n 'select',\n 'option',\n];\n\nfunction isInteractiveElement(element: Element \| null): boolean {\n if (\n element?.tagName != null &&\n INTERACTIVE_ELEMENTS.includes(element.tagName.toLowerCase())\n ) {\n return true;\n }\n\n return false;\n}\n"],"mappings":";;;AACA,SAASA,aAAa,QAAQ,eAAe;;AAE7C;AACA;AACA;AACA;AACA,eAAe,MAAMC,4BAA4B,SAASD,aAAa,CAAC;AAiBvEE,eAAA,CAjBoBD,4BAA4B,gBAC3B,CAClB;EACEE,SAAS,EAAE,eAAwB;EACnCC,OAAO,EAAEC,IAAA,IAAmD;IAAA,IAAlD;MAAEC,WAAW,EAAEC;IAAoB,CAAC,GAAAF,IAAA;IAC5C,IACE,CAACE,KAAK,CAACC,SAAS,IAChBD,KAAK,CAACE,MAAM,KAAK,CAAC,IAClBC,oBAAoB,CAACH,KAAK,CAACI,MAAiB,CAAC,EAC7C;MACA,OAAO,KAAK;IACd;IAEA,OAAO,IAAI;EACb;AACF,CAAC,CACF;AAGH,IAAMC,oBAAoB,GAAG,CAC3B,QAAQ,EACR,OAAO,EACP,UAAU,EACV,QAAQ,EACR,QAAQ,CACT;AAED,SAASF,oBAAoBA,CAACG,OAAuB,EAAW;EAC9D,IACE,CAAAA,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEC,OAAO,KAAI,IAAI,IACxBF,oBAAoB,CAACG,QAAQ,CAACF,OAAO,CAACC,OAAO,CAACE,WAAW,CAAC,CAAC,CAAC,EAC5D;IACA,OAAO,IAAI;EACb;EAEA,OAAO,KAAK;AACd"}

package/dist/sidebar/visibility-ordering-builder/sortable-tree/SortableTree.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SortableTree.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","DndContext","closestCenter","KeyboardSensor","useSensor","useSensors","MeasuringStrategy","SortableContext","verticalListSortingStrategy","flattenTree","getProjection","sortableTreeKeyboardCoordinates","PointerSensorWithInteraction","SortableTreeInner","jsx","_jsx","MEASURING","droppable","strategy","Always","CONSTRAINT","activationConstraint","distance","SortableTree","_ref","items","indicator","indentationWidth","onDragStart","onDragEnd","renderItem","activeId","setActiveId","overId","setOverId","offsetLeft","setOffsetLeft","flattenedItems","flattenedTree","filter","_ref2","id","selected","projected","sensorContext","offset","keyboardOptions","coordinateGetter","sensors","sortedIds","map","_ref3","current","handleDragStart","_ref4","active","newActiveId","document","body","style","setProperty","handleDragMove","_ref5","delta","x","handleDragOver","_ref6","_ref7","over","resetState","handleDragEnd","_ref8","depth","parentId","clonedItems","JSON","parse","stringify","overIndex","findIndex","_ref9","activeIndex","_ref10","activeTreeItem","_objectSpread","handleDragCancel","collisionDetection","measuring","onDragMove","onDragOver","onDragCancel","children"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTree.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport {\n DndContext,\n closestCenter,\n KeyboardSensor,\n useSensor,\n useSensors,\n type DragStartEvent,\n type DragMoveEvent,\n type DragEndEvent,\n type DragOverEvent,\n MeasuringStrategy,\n} from '@dnd-kit/core';\nimport {\n SortableContext,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { flattenTree, getProjection } from './utilities';\nimport type { FlattenedItem, SensorContext, TreeItem } from './types';\nimport { sortableTreeKeyboardCoordinates } from './keyboardCoordinates';\nimport PointerSensorWithInteraction from './PointerSensorWithInteraction';\nimport SortableTreeInner from './SortableTreeInner';\n\nconst MEASURING = {\n droppable: {\n strategy: MeasuringStrategy.Always,\n },\n};\n\nconst CONSTRAINT = {\n activationConstraint: {\n distance: 5,\n },\n};\n\ninterface Props<T> {\n items: TreeItem<T>[];\n indentationWidth?: number;\n indicator?: boolean;\n onDragStart?: (id: string) => void;\n onDragEnd?: (from: FlattenedItem<T>, to: FlattenedItem<T>) => void;\n renderItem: (props: {\n clone: boolean;\n childCount?: number;\n value: string;\n item: FlattenedItem<T>;\n ref: React.Ref<HTMLDivElement>;\n handleProps?: Record<string, unknown>;\n }) => JSX.Element;\n}\n\nexport default function SortableTree<T>({\n items,\n indicator = false,\n indentationWidth = 30,\n onDragStart,\n onDragEnd,\n renderItem,\n}: Props<T>): JSX.Element {\n const [activeId, setActiveId] = useState<string \| null>(null);\n const [overId, setOverId] = useState<string \| null>(null);\n const [offsetLeft, setOffsetLeft] = useState(0);\n\n const flattenedItems = useMemo(() => {\n const flattenedTree = flattenTree(items);\n\n if (activeId != null) {\n return flattenedTree.filter(\n ({ id, selected }) => id === activeId \|\| !selected\n );\n }\n\n return flattenedTree;\n }, [activeId, items]);\n\n const projected =\n activeId != null && overId != null\n ? getProjection(\n flattenedItems,\n activeId,\n overId,\n offsetLeft,\n indentationWidth\n )\n : null;\n const sensorContext: SensorContext = useRef({\n items: flattenedItems,\n offset: offsetLeft,\n });\n const keyboardOptions = useMemo(\n () => ({\n coordinateGetter: sortableTreeKeyboardCoordinates(\n sensorContext,\n indicator,\n indentationWidth\n ),\n }),\n [indentationWidth, indicator]\n );\n\n const sensors = useSensors(\n useSensor(PointerSensorWithInteraction, CONSTRAINT),\n useSensor(KeyboardSensor, keyboardOptions)\n );\n\n const sortedIds = useMemo(\n () => flattenedItems.map(({ id }) => id),\n [flattenedItems]\n );\n\n useEffect(() => {\n sensorContext.current = {\n items: flattenedItems,\n offset: offsetLeft,\n };\n }, [flattenedItems, offsetLeft]);\n\n const handleDragStart = useCallback(\n ({ active: { id: newActiveId } }: DragStartEvent) => {\n setActiveId(newActiveId as string);\n setOverId(newActiveId as string);\n onDragStart?.(newActiveId as string);\n\n document.body.style.setProperty('cursor', 'grabbing');\n },\n [onDragStart]\n );\n\n const handleDragMove = useCallback(({ delta }: DragMoveEvent) => {\n setOffsetLeft(delta.x);\n }, []);\n\n const handleDragOver = useCallback(({ over }: DragOverEvent) => {\n setOverId((over?.id as string) ?? null);\n }, []);\n\n const resetState = useCallback(() => {\n setOverId(null);\n setActiveId(null);\n setOffsetLeft(0);\n\n document.body.style.setProperty('cursor', '');\n }, []);\n\n const handleDragEnd = useCallback(\n ({ active, over }: DragEndEvent) => {\n resetState();\n\n if (projected && over) {\n const { depth, parentId } = projected;\n\n const clonedItems: FlattenedItem<T>[] = JSON.parse(\n JSON.stringify(flattenTree(items))\n );\n const overIndex = clonedItems.findIndex(({ id }) => id === over.id);\n const activeIndex = clonedItems.findIndex(({ id }) => id === active.id);\n const activeTreeItem = clonedItems[activeIndex];\n\n clonedItems[activeIndex] = { ...activeTreeItem, depth, parentId };\n\n onDragEnd?.(activeTreeItem, {\n ...clonedItems[overIndex],\n parentId: projected.parentId,\n });\n }\n },\n [items, onDragEnd, projected, resetState]\n );\n\n const handleDragCancel = useCallback(() => {\n resetState();\n }, [resetState]);\n\n return (\n <DndContext\n sensors={sensors}\n collisionDetection={closestCenter}\n measuring={MEASURING}\n onDragStart={handleDragStart}\n onDragMove={handleDragMove}\n onDragOver={handleDragOver}\n onDragEnd={handleDragEnd}\n onDragCancel={handleDragCancel}\n >\n <SortableContext items={sortedIds} strategy={verticalListSortingStrategy}>\n <SortableTreeInner\n items={flattenedItems}\n renderItem={renderItem}\n indicator={indicator}\n indentationWidth={indentationWidth}\n activeId={activeId}\n overId={overId}\n offsetLeft={offsetLeft}\n />\n </SortableContext>\n </DndContext>\n );\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"SortableTree.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","DndContext","closestCenter","KeyboardSensor","useSensor","useSensors","MeasuringStrategy","SortableContext","verticalListSortingStrategy","flattenTree","getProjection","sortableTreeKeyboardCoordinates","PointerSensorWithInteraction","SortableTreeInner","jsx","_jsx","MEASURING","droppable","strategy","Always","CONSTRAINT","activationConstraint","distance","SortableTree","_ref","items","indicator","indentationWidth","onDragStart","onDragEnd","renderItem","activeId","setActiveId","overId","setOverId","offsetLeft","setOffsetLeft","flattenedItems","flattenedTree","filter","_ref2","id","selected","projected","sensorContext","offset","keyboardOptions","coordinateGetter","sensors","sortedIds","map","_ref3","current","handleDragStart","_ref4","active","newActiveId","document","body","style","setProperty","handleDragMove","_ref5","delta","x","handleDragOver","_ref6","_ref7","over","resetState","handleDragEnd","_ref8","depth","parentId","clonedItems","JSON","parse","stringify","overIndex","findIndex","_ref9","activeIndex","_ref10","activeTreeItem","_objectSpread","handleDragCancel","collisionDetection","measuring","onDragMove","onDragOver","onDragCancel","children"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTree.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport {\n DndContext,\n closestCenter,\n KeyboardSensor,\n useSensor,\n useSensors,\n type DragStartEvent,\n type DragMoveEvent,\n type DragEndEvent,\n type DragOverEvent,\n MeasuringStrategy,\n} from '@dnd-kit/core';\nimport {\n SortableContext,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { flattenTree, getProjection } from './utilities';\nimport type { FlattenedItem, SensorContext, TreeItem } from './types';\nimport { sortableTreeKeyboardCoordinates } from './keyboardCoordinates';\nimport PointerSensorWithInteraction from './PointerSensorWithInteraction';\nimport SortableTreeInner from './SortableTreeInner';\n\nconst MEASURING = {\n droppable: {\n strategy: MeasuringStrategy.Always,\n },\n};\n\nconst CONSTRAINT = {\n activationConstraint: {\n distance: 5,\n },\n};\n\ninterface Props<T> {\n items: TreeItem<T>[];\n indentationWidth?: number;\n indicator?: boolean;\n onDragStart?: (id: string) => void;\n onDragEnd?: (from: FlattenedItem<T>, to: FlattenedItem<T>) => void;\n renderItem: (props: {\n clone: boolean;\n childCount?: number;\n value: string;\n item: FlattenedItem<T>;\n ref: React.Ref<HTMLDivElement>;\n handleProps?: Record<string, unknown>;\n }) => JSX.Element;\n}\n\nexport default function SortableTree<T>({\n items,\n indicator = false,\n indentationWidth = 30,\n onDragStart,\n onDragEnd,\n renderItem,\n}: Props<T>): JSX.Element {\n const [activeId, setActiveId] = useState<string \| null>(null);\n const [overId, setOverId] = useState<string \| null>(null);\n const [offsetLeft, setOffsetLeft] = useState(0);\n\n const flattenedItems = useMemo(() => {\n const flattenedTree = flattenTree(items);\n\n if (activeId != null) {\n return flattenedTree.filter(\n ({ id, selected }) => id === activeId \|\| !selected\n );\n }\n\n return flattenedTree;\n }, [activeId, items]);\n\n const projected =\n activeId != null && overId != null\n ? getProjection(\n flattenedItems,\n activeId,\n overId,\n offsetLeft,\n indentationWidth\n )\n : null;\n const sensorContext: SensorContext = useRef({\n items: flattenedItems,\n offset: offsetLeft,\n });\n const keyboardOptions = useMemo(\n () => ({\n coordinateGetter: sortableTreeKeyboardCoordinates(\n sensorContext,\n indicator,\n indentationWidth\n ),\n }),\n [indentationWidth, indicator]\n );\n\n const sensors = useSensors(\n useSensor(PointerSensorWithInteraction, CONSTRAINT),\n useSensor(KeyboardSensor, keyboardOptions)\n );\n\n const sortedIds = useMemo(\n () => flattenedItems.map(({ id }) => id),\n [flattenedItems]\n );\n\n useEffect(() => {\n sensorContext.current = {\n items: flattenedItems,\n offset: offsetLeft,\n };\n }, [flattenedItems, offsetLeft]);\n\n const handleDragStart = useCallback(\n ({ active: { id: newActiveId } }: DragStartEvent) => {\n setActiveId(newActiveId as string);\n setOverId(newActiveId as string);\n onDragStart?.(newActiveId as string);\n\n document.body.style.setProperty('cursor', 'grabbing');\n },\n [onDragStart]\n );\n\n const handleDragMove = useCallback(({ delta }: DragMoveEvent) => {\n setOffsetLeft(delta.x);\n }, []);\n\n const handleDragOver = useCallback(({ over }: DragOverEvent) => {\n setOverId((over?.id as string) ?? null);\n }, []);\n\n const resetState = useCallback(() => {\n setOverId(null);\n setActiveId(null);\n setOffsetLeft(0);\n\n document.body.style.setProperty('cursor', '');\n }, []);\n\n const handleDragEnd = useCallback(\n ({ active, over }: DragEndEvent) => {\n resetState();\n\n if (projected && over) {\n const { depth, parentId } = projected;\n\n const clonedItems: FlattenedItem<T>[] = JSON.parse(\n JSON.stringify(flattenTree(items))\n );\n const overIndex = clonedItems.findIndex(({ id }) => id === over.id);\n const activeIndex = clonedItems.findIndex(({ id }) => id === active.id);\n const activeTreeItem = clonedItems[activeIndex];\n\n clonedItems[activeIndex] = { ...activeTreeItem, depth, parentId };\n\n onDragEnd?.(activeTreeItem, {\n ...clonedItems[overIndex],\n parentId: projected.parentId,\n });\n }\n },\n [items, onDragEnd, projected, resetState]\n );\n\n const handleDragCancel = useCallback(() => {\n resetState();\n }, [resetState]);\n\n return (\n <DndContext\n sensors={sensors}\n collisionDetection={closestCenter}\n measuring={MEASURING}\n onDragStart={handleDragStart}\n onDragMove={handleDragMove}\n onDragOver={handleDragOver}\n onDragEnd={handleDragEnd}\n onDragCancel={handleDragCancel}\n >\n <SortableContext items={sortedIds} strategy={verticalListSortingStrategy}>\n <SortableTreeInner\n items={flattenedItems}\n renderItem={renderItem}\n indicator={indicator}\n indentationWidth={indentationWidth}\n activeId={activeId}\n overId={overId}\n offsetLeft={offsetLeft}\n />\n </SortableContext>\n </DndContext>\n );\n}\n"],"mappings":"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"}

package/dist/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeInner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SortableTreeInner.js","names":["React","useEffect","useRef","createPortal","classNames","DragOverlay","defaultDropAnimation","useDndContext","CSS","getProjection","getChildCount","SortableTreeItem","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","dropAnimationConfig","keyframes","_ref","transform","opacity","Transform","toString","initial","_objectSpread","final","x","y","easing","sideEffects","_ref2","active","node","animate","duration","offsetY","adjustToCursor","args","_offsetY","activeNodeRect","activatorEvent","PointerEvent","Math","floor","clientY","top","height","SortableTreeInner","_ref3","items","renderItem","indentationWidth","indicator","activeId","overId","offsetLeft","context","contextRef","updateContextRef","current","remeasureContainers","measureDroppableContainers","map","_ref4","id","projected","sensorContext","offset","activeItem","find","_ref5","children","className","item","depth","value","dropAnimation","modifiers","clone","childCount","document","body"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeInner.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport classNames from 'classnames';\nimport {\n DragOverlay,\n type DropAnimation,\n type Modifier,\n defaultDropAnimation,\n useDndContext,\n} from '@dnd-kit/core';\nimport { CSS } from '@dnd-kit/utilities';\nimport { getProjection, getChildCount } from './utilities';\nimport type { FlattenedItem, SensorContext } from './types';\nimport { SortableTreeItem } from './SortableTreeItem';\n\nconst dropAnimationConfig: DropAnimation = {\n keyframes({ transform }) {\n return [\n { opacity: 1, transform: CSS.Transform.toString(transform.initial) },\n {\n opacity: 0,\n transform: CSS.Transform.toString({\n ...transform.final,\n x: transform.final.x + 5,\n y: transform.final.y + 5,\n }),\n },\n ];\n },\n easing: 'ease-out',\n sideEffects({ active }) {\n active.node.animate([{ opacity: 0 }, { opacity: 1 }], {\n duration: defaultDropAnimation.duration,\n easing: defaultDropAnimation.easing,\n });\n },\n};\n\n// Used to track the offset for adjustToCursor\n// Once drag starts, set this. Once it ends, null this\nlet offsetY: number \| null = null;\n\n/*\n This adjusts the transform to move to the cursor if it gets shifted due to multi-select.\n * With multi-select, the selected items (except dragged) are removed on drag.\n * This can cause the overlay item to disconnect from the cursor in some cases.\n * E.g. select first 3 items, start dragging from 3rd item.\n * Without this modifier, the drag overlay will be shifted 60px up from the cursor after the items are removed.\n \n This assumes all items are the same height as the dragged item\n * @param args Modifier args from dnd-kit\n * @returns Transform so that the dragged item stays on the cursor\n /\nfunction adjustToCursor(args: Parameters<Modifier>[0]): {\n y: number;\n x: number;\n scaleX: number;\n scaleY: number;\n} {\n if (\n offsetY == null &&\n args.activeNodeRect &&\n args.activatorEvent instanceof PointerEvent\n ) {\n offsetY =\n Math.floor(\n (args.activatorEvent.clientY - args.activeNodeRect.top) /\n args.activeNodeRect.height\n ) args.activeNodeRect.height;\n }\n\n if (!args.activeNodeRect) {\n offsetY = null;\n }\n\n return { ...args.transform, y: args.transform.y + (offsetY ?? 0) };\n}\n\ninterface Props<T> {\n items: FlattenedItem<T>[];\n indentationWidth?: number;\n indicator?: boolean;\n renderItem: (props: {\n clone: boolean;\n childCount?: number;\n value: string;\n item: FlattenedItem<T>;\n ref: React.Ref<HTMLDivElement>;\n handleProps?: Record<string, unknown>;\n }) => JSX.Element;\n activeId: string \| null;\n overId: string \| null;\n offsetLeft: number;\n}\n\nexport default function SortableTreeInner<T>({\n items,\n renderItem,\n indentationWidth = 30,\n indicator = false,\n activeId,\n overId,\n offsetLeft,\n}: Props<T>): JSX.Element {\n const context = useDndContext();\n const contextRef = useRef(context);\n\n useEffect(\n function updateContextRef() {\n contextRef.current = context;\n },\n [context]\n );\n\n // Without this, animations are funky when using the move/sort buttons\n // dnd-kit only remeasures on drag/drop by default\n // The context object changes while dragging (items don't)\n // Using the context ref allows this to trigger properly on only items changes\n useEffect(\n function remeasureContainers() {\n contextRef.current.measureDroppableContainers(items.map(({ id }) => id));\n },\n [items]\n );\n\n const projected =\n activeId != null && overId != null\n ? getProjection(items, activeId, overId, offsetLeft, indentationWidth)\n : null;\n const sensorContext: SensorContext = useRef({\n items,\n offset: offsetLeft,\n });\n\n const activeItem =\n activeId != null ? items.find(({ id }) => id === activeId) : null;\n\n useEffect(() => {\n sensorContext.current = {\n items,\n offset: offsetLeft,\n };\n }, [items, offsetLeft]);\n\n return (\n <>\n <div\n className={classNames(\n 'tree-container',\n activeId != null && 'marching-ants'\n )}\n >\n {items.map(item => {\n const { id, depth } = item;\n return (\n <SortableTreeItem\n key={id}\n id={id}\n value={id}\n depth={id === activeId && projected ? projected.depth : depth}\n item={item}\n renderItem={renderItem}\n />\n );\n })}\n </div>\n {createPortal(\n <DragOverlay\n dropAnimation={dropAnimationConfig}\n modifiers={[adjustToCursor]}\n className=\"visibility-ordering-list\"\n >\n {activeId != null && activeItem ? (\n <SortableTreeItem\n id={activeId}\n depth={activeItem.depth}\n clone\n childCount={getChildCount(items, activeId) + 1}\n value={activeId.toString()}\n renderItem={renderItem}\n item={activeItem}\n />\n ) : null}\n </DragOverlay>,\n document.body\n )}\n </>\n );\n}\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAChD,SAASC,YAAY,QAAQ,WAAW;AACxC,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,WAAW,EAGXC,oBAAoB,EACpBC,aAAa,QACR,eAAe;AACtB,SAASC,GAAG,QAAQ,oBAAoB;AAAC,SAChCC,aAAa,EAAEC,aAAa;AAAA,SAE5BC,gBAAgB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEzB,IAAMC,mBAAkC,GAAG;EACzCC,SAASA,CAAAC,IAAA,EAAgB;IAAA,IAAf;MAAEC;IAAU,CAAC,GAAAD,IAAA;IACrB,OAAO,CACL;MAAEE,OAAO,EAAE,CAAC;MAAED,SAAS,EAAEb,GAAG,CAACe,SAAS,CAACC,QAAQ,CAACH,SAAS,CAACI,OAAO;IAAE,CAAC,EACpE;MACEH,OAAO,EAAE,CAAC;MACVD,SAAS,EAAEb,GAAG,CAACe,SAAS,CAACC,QAAQ,CAAAE,aAAA,CAAAA,aAAA,KAC5BL,SAAS,CAACM,KAAK;QAClBC,CAAC,EAAEP,SAAS,CAACM,KAAK,CAACC,CAAC,GAAG,CAAC;QACxBC,CAAC,EAAER,SAAS,CAACM,KAAK,CAACE,CAAC,GAAG;MAAC,EACzB;IACH,CAAC,CACF;EACH,CAAC;EACDC,MAAM,EAAE,UAAU;EAClBC,WAAWA,CAAAC,KAAA,EAAa;IAAA,IAAZ;MAAEC;IAAO,CAAC,GAAAD,KAAA;IACpBC,MAAM,CAACC,IAAI,CAACC,OAAO,CAAC,CAAC;MAAEb,OAAO,EAAE;IAAE,CAAC,EAAE;MAAEA,OAAO,EAAE;IAAE,CAAC,CAAC,EAAE;MACpDc,QAAQ,EAAE9B,oBAAoB,CAAC8B,QAAQ;MACvCN,MAAM,EAAExB,oBAAoB,CAACwB;IAC/B,CAAC,CAAC;EACJ;AACF,CAAC;;AAED;AACA;AACA,IAAIO,OAAsB,GAAG,IAAI;;AAEjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,cAAcA,CAACC,IAA6B,EAKnD;EAAA,IAAAC,QAAA;EACA,IACEH,OAAO,IAAI,IAAI,IACfE,IAAI,CAACE,cAAc,IACnBF,IAAI,CAACG,cAAc,YAAYC,YAAY,EAC3C;IACAN,OAAO,GACLO,IAAI,CAACC,KAAK,CACR,CAACN,IAAI,CAACG,cAAc,CAACI,OAAO,GAAGP,IAAI,CAACE,cAAc,CAACM,GAAG,IACpDR,IAAI,CAACE,cAAc,CAACO,MACxB,CAAC,GAAGT,IAAI,CAACE,cAAc,CAACO,MAAM;EAClC;EAEA,IAAI,CAACT,IAAI,CAACE,cAAc,EAAE;IACxBJ,OAAO,GAAG,IAAI;EAChB;EAEA,OAAAX,aAAA,CAAAA,aAAA,KAAYa,IAAI,CAAClB,SAAS;IAAEQ,CAAC,EAAEU,IAAI,CAAClB,SAAS,CAACQ,CAAC,KAAAW,QAAA,GAAIH,OAAO,cAAAG,QAAA,cAAAA,QAAA,GAAI,CAAC;EAAC;AAClE;AAmBA,eAAe,SAASS,iBAAiBA,CAAAC,KAAA,EAQf;EAAA,IARmB;IAC3CC,KAAK;IACLC,UAAU;IACVC,gBAAgB,GAAG,EAAE;IACrBC,SAAS,GAAG,KAAK;IACjBC,QAAQ;IACRC,MAAM;IACNC;EACQ,CAAC,GAAAP,KAAA;EACT,IAAMQ,OAAO,GAAGnD,aAAa,CAAC,CAAC;EAC/B,IAAMoD,UAAU,GAAGzD,MAAM,CAACwD,OAAO,CAAC;EAElCzD,SAAS,CACP,SAAS2D,gBAAgBA,CAAA,EAAG;IAC1BD,UAAU,CAACE,OAAO,GAAGH,OAAO;EAC9B,CAAC,EACD,CAACA,OAAO,CACV,CAAC;;EAED;EACA;EACA;EACA;EACAzD,SAAS,CACP,SAAS6D,mBAAmBA,CAAA,EAAG;IAC7BH,UAAU,CAACE,OAAO,CAACE,0BAA0B,CAACZ,KAAK,CAACa,GAAG,CAACC,KAAA;MAAA,IAAC;QAAEC;MAAG,CAAC,GAAAD,KAAA;MAAA,OAAKC,EAAE;IAAA,EAAC,CAAC;EAC1E,CAAC,EACD,CAACf,KAAK,CACR,CAAC;EAED,IAAMgB,SAAS,GACbZ,QAAQ,IAAI,IAAI,IAAIC,MAAM,IAAI,IAAI,GAC9B/C,aAAa,CAAC0C,KAAK,EAAEI,QAAQ,EAAEC,MAAM,EAAEC,UAAU,EAAEJ,gBAAgB,CAAC,GACpE,IAAI;EACV,IAAMe,aAA4B,GAAGlE,MAAM,CAAC;IAC1CiD,KAAK;IACLkB,MAAM,EAAEZ;EACV,CAAC,CAAC;EAEF,IAAMa,UAAU,GACdf,QAAQ,IAAI,IAAI,GAAGJ,KAAK,CAACoB,IAAI,CAACC,KAAA;IAAA,IAAC;MAAEN;IAAG,CAAC,GAAAM,KAAA;IAAA,OAAKN,EAAE,KAAKX,QAAQ;EAAA,EAAC,GAAG,IAAI;EAEnEtD,SAAS,CAAC,MAAM;IACdmE,aAAa,CAACP,OAAO,GAAG;MACtBV,KAAK;MACLkB,MAAM,EAAEZ;IACV,CAAC;EACH,CAAC,EAAE,CAACN,KAAK,EAAEM,UAAU,CAAC,CAAC;EAEvB,oBACExC,KAAA,CAAAF,SAAA;IAAA0D,QAAA,gBACE5D,IAAA;MACE6D,SAAS,EAAEtE,UAAU,CACnB,gBAAgB,EAChBmD,QAAQ,IAAI,IAAI,IAAI,eACtB,CAAE;MAAAkB,QAAA,EAEDtB,KAAK,CAACa,GAAG,CAACW,IAAI,IAAI;QACjB,IAAM;UAAET,EAAE;UAAEU;QAAM,CAAC,GAAGD,IAAI;QAC1B,oBACE9D,IAAA,CAACF,gBAAgB;UAEfuD,EAAE,EAAEA,EAAG;UACPW,KAAK,EAAEX,EAAG;UACVU,KAAK,EAAEV,EAAE,KAAKX,QAAQ,IAAIY,SAAS,GAAGA,SAAS,CAACS,KAAK,GAAGA,KAAM;UAC9DD,IAAI,EAAEA,IAAK;UACXvB,UAAU,EAAEA;QAAW,GALlBc,EAMN,CAAC;MAEN,CAAC;IAAC,CACC,CAAC,eACL/D,YAAY,eACXU,IAAA,CAACR,WAAW;MACVyE,aAAa,EAAE5D,mBAAoB;MACnC6D,SAAS,EAAE,CAACzC,cAAc,CAAE;MAC5BoC,SAAS,EAAC,0BAA0B;MAAAD,QAAA,EAEnClB,QAAQ,IAAI,IAAI,IAAIe,UAAU,gBAC7BzD,IAAA,CAACF,gBAAgB;QACfuD,EAAE,EAAEX,QAAS;QACbqB,KAAK,EAAEN,UAAU,CAACM,KAAM;QACxBI,KAAK;QACLC,UAAU,EAAEvE,aAAa,CAACyC,KAAK,EAAEI,QAAQ,CAAC,GAAG,CAAE;QAC/CsB,KAAK,EAAEtB,QAAQ,CAAC/B,QAAQ,CAAC,CAAE;QAC3B4B,UAAU,EAAEA,UAAW;QACvBuB,IAAI,EAAEL;MAAW,CAClB,CAAC,GACA;IAAI,CACG,CAAC,EACdY,QAAQ,CAACC,IACX,CAAC;EAAA,CACD,CAAC;AAEP","ignoreList":[]}
1	+ {"version":3,"file":"SortableTreeInner.js","names":["React","useEffect","useRef","createPortal","classNames","DragOverlay","defaultDropAnimation","useDndContext","CSS","getProjection","getChildCount","SortableTreeItem","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","dropAnimationConfig","keyframes","_ref","transform","opacity","Transform","toString","initial","_objectSpread","final","x","y","easing","sideEffects","_ref2","active","node","animate","duration","offsetY","adjustToCursor","args","_offsetY","activeNodeRect","activatorEvent","PointerEvent","Math","floor","clientY","top","height","SortableTreeInner","_ref3","items","renderItem","indentationWidth","indicator","activeId","overId","offsetLeft","context","contextRef","updateContextRef","current","remeasureContainers","measureDroppableContainers","map","_ref4","id","projected","sensorContext","offset","activeItem","find","_ref5","children","className","item","depth","value","dropAnimation","modifiers","clone","childCount","document","body"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeInner.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport classNames from 'classnames';\nimport {\n DragOverlay,\n type DropAnimation,\n type Modifier,\n defaultDropAnimation,\n useDndContext,\n} from '@dnd-kit/core';\nimport { CSS } from '@dnd-kit/utilities';\nimport { getProjection, getChildCount } from './utilities';\nimport type { FlattenedItem, SensorContext } from './types';\nimport { SortableTreeItem } from './SortableTreeItem';\n\nconst dropAnimationConfig: DropAnimation = {\n keyframes({ transform }) {\n return [\n { opacity: 1, transform: CSS.Transform.toString(transform.initial) },\n {\n opacity: 0,\n transform: CSS.Transform.toString({\n ...transform.final,\n x: transform.final.x + 5,\n y: transform.final.y + 5,\n }),\n },\n ];\n },\n easing: 'ease-out',\n sideEffects({ active }) {\n active.node.animate([{ opacity: 0 }, { opacity: 1 }], {\n duration: defaultDropAnimation.duration,\n easing: defaultDropAnimation.easing,\n });\n },\n};\n\n// Used to track the offset for adjustToCursor\n// Once drag starts, set this. Once it ends, null this\nlet offsetY: number \| null = null;\n\n/*\n This adjusts the transform to move to the cursor if it gets shifted due to multi-select.\n * With multi-select, the selected items (except dragged) are removed on drag.\n * This can cause the overlay item to disconnect from the cursor in some cases.\n * E.g. select first 3 items, start dragging from 3rd item.\n * Without this modifier, the drag overlay will be shifted 60px up from the cursor after the items are removed.\n \n This assumes all items are the same height as the dragged item\n * @param args Modifier args from dnd-kit\n * @returns Transform so that the dragged item stays on the cursor\n /\nfunction adjustToCursor(args: Parameters<Modifier>[0]): {\n y: number;\n x: number;\n scaleX: number;\n scaleY: number;\n} {\n if (\n offsetY == null &&\n args.activeNodeRect &&\n args.activatorEvent instanceof PointerEvent\n ) {\n offsetY =\n Math.floor(\n (args.activatorEvent.clientY - args.activeNodeRect.top) /\n args.activeNodeRect.height\n ) args.activeNodeRect.height;\n }\n\n if (!args.activeNodeRect) {\n offsetY = null;\n }\n\n return { ...args.transform, y: args.transform.y + (offsetY ?? 0) };\n}\n\ninterface Props<T> {\n items: FlattenedItem<T>[];\n indentationWidth?: number;\n indicator?: boolean;\n renderItem: (props: {\n clone: boolean;\n childCount?: number;\n value: string;\n item: FlattenedItem<T>;\n ref: React.Ref<HTMLDivElement>;\n handleProps?: Record<string, unknown>;\n }) => JSX.Element;\n activeId: string \| null;\n overId: string \| null;\n offsetLeft: number;\n}\n\nexport default function SortableTreeInner<T>({\n items,\n renderItem,\n indentationWidth = 30,\n indicator = false,\n activeId,\n overId,\n offsetLeft,\n}: Props<T>): JSX.Element {\n const context = useDndContext();\n const contextRef = useRef(context);\n\n useEffect(\n function updateContextRef() {\n contextRef.current = context;\n },\n [context]\n );\n\n // Without this, animations are funky when using the move/sort buttons\n // dnd-kit only remeasures on drag/drop by default\n // The context object changes while dragging (items don't)\n // Using the context ref allows this to trigger properly on only items changes\n useEffect(\n function remeasureContainers() {\n contextRef.current.measureDroppableContainers(items.map(({ id }) => id));\n },\n [items]\n );\n\n const projected =\n activeId != null && overId != null\n ? getProjection(items, activeId, overId, offsetLeft, indentationWidth)\n : null;\n const sensorContext: SensorContext = useRef({\n items,\n offset: offsetLeft,\n });\n\n const activeItem =\n activeId != null ? items.find(({ id }) => id === activeId) : null;\n\n useEffect(() => {\n sensorContext.current = {\n items,\n offset: offsetLeft,\n };\n }, [items, offsetLeft]);\n\n return (\n <>\n <div\n className={classNames(\n 'tree-container',\n activeId != null && 'marching-ants'\n )}\n >\n {items.map(item => {\n const { id, depth } = item;\n return (\n <SortableTreeItem\n key={id}\n id={id}\n value={id}\n depth={id === activeId && projected ? projected.depth : depth}\n item={item}\n renderItem={renderItem}\n />\n );\n })}\n </div>\n {createPortal(\n <DragOverlay\n dropAnimation={dropAnimationConfig}\n modifiers={[adjustToCursor]}\n className=\"visibility-ordering-list\"\n >\n {activeId != null && activeItem ? (\n <SortableTreeItem\n id={activeId}\n depth={activeItem.depth}\n clone\n childCount={getChildCount(items, activeId) + 1}\n value={activeId.toString()}\n renderItem={renderItem}\n item={activeItem}\n />\n ) : null}\n </DragOverlay>,\n document.body\n )}\n </>\n );\n}\n"],"mappings":"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"}

package/dist/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SortableTreeItem.js","names":["React","useMemo","useSortable","CSS","TreeItem","jsx","_jsx","animateLayoutChanges","_ref","isSorting","wasDragging","SortableTreeItem","_ref2","id","depth","props","_objectWithoutProperties","_excluded","attributes","isDragging","listeners","setDraggableNodeRef","setDroppableNodeRef","transform","transition","transformString","Translate","toString","style","handleProps","_objectSpread","dragRef","wrapperRef","ghost","disableInteraction"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeItem.tsx"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\nimport React, { type CSSProperties, useMemo } from 'react';\nimport { type AnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { TreeItem, type Props as TreeItemProps } from './TreeItem';\n\nexport interface Props<T> extends Omit<TreeItemProps<T>, 'style'> {\n id: string;\n}\n\nconst animateLayoutChanges: AnimateLayoutChanges = ({\n isSorting,\n wasDragging,\n}) => !(isSorting \|\| wasDragging);\n\nexport function SortableTreeItem<T>({\n id,\n depth,\n ...props\n}: Props<T>): JSX.Element {\n const {\n attributes,\n isDragging,\n isSorting,\n listeners,\n setDraggableNodeRef,\n setDroppableNodeRef,\n transform,\n transition,\n } = useSortable({\n id,\n animateLayoutChanges,\n });\n\n const transformString = CSS.Translate.toString(transform);\n\n const style: CSSProperties = useMemo(\n () => ({\n transform: transformString,\n transition,\n }),\n [transformString, transition]\n );\n\n const handleProps = useMemo(\n () => ({\n ...attributes,\n ...listeners,\n style,\n }),\n [attributes, listeners, style]\n );\n\n return (\n <TreeItem\n dragRef={setDraggableNodeRef}\n wrapperRef={setDroppableNodeRef}\n depth={depth}\n ghost={isDragging}\n disableInteraction={isSorting}\n handleProps={handleProps}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...props}\n />\n );\n}\n"],"mappings":";;;;;;;;AAAA;AACA,OAAOA,KAAK,IAAwBC,OAAO,QAAQ,OAAO;AAC1D,SAAoCC,WAAW,QAAQ,mBAAmB;AAC1E,SAASC,GAAG,QAAQ,oBAAoB;AAAC,SAChCC,QAAQ;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAMjB,IAAMC,oBAA0C,GAAGC,IAAA;EAAA,IAAC;IAClDC,SAAS;IACTC;EACF,CAAC,GAAAF,IAAA;EAAA,OAAK,EAAEC,SAAS,IAAIC,WAAW,CAAC;AAAA;AAEjC,OAAO,SAASC,gBAAgBA,CAAAC,KAAA,EAIN;EAAA,IAJU;MAClCC,EAAE;MACFC;IAEQ,CAAC,GAAAF,KAAA;IADNG,KAAK,GAAAC,wBAAA,CAAAJ,KAAA,EAAAK,SAAA;EAER,IAAM;IACJC,UAAU;IACVC,UAAU;IACVV,SAAS;IACTW,SAAS;IACTC,mBAAmB;IACnBC,mBAAmB;IACnBC,SAAS;IACTC;EACF,CAAC,GAAGtB,WAAW,CAAC;IACdW,EAAE;IACFN;EACF,CAAC,CAAC;EAEF,IAAMkB,eAAe,GAAGtB,GAAG,CAACuB,SAAS,CAACC,QAAQ,CAACJ,SAAS,CAAC;EAEzD,IAAMK,KAAoB,GAAG3B,OAAO,CAClC,OAAO;IACLsB,SAAS,EAAEE,eAAe;IAC1BD;EACF,CAAC,CAAC,EACF,CAACC,eAAe,EAAED,UAAU,CAC9B,CAAC;EAED,IAAMK,WAAW,GAAG5B,OAAO,CACzB,MAAA6B,aAAA,CAAAA,aAAA,CAAAA,aAAA,KACKZ,UAAU,GACVE,SAAS;IACZQ;EAAK,EACL,EACF,CAACV,UAAU,EAAEE,SAAS,EAAEQ,KAAK,CAC/B,CAAC;EAED,oBACEtB,IAAA,CAACF,QAAQ,EAAA0B,aAAA;IACPC,OAAO,EAAEV,mBAAoB;IAC7BW,UAAU,EAAEV,mBAAoB;IAChCR,KAAK,EAAEA,KAAM;IACbmB,KAAK,EAAEd,UAAW;IAClBe,kBAAkB,EAAEzB,SAAU;IAC9BoB,WAAW,EAAEA;IACb;EAAA,GACId,KAAK,CACV,CAAC;AAEN"~~,"ignoreList":[]~~}
1	+ {"version":3,"file":"SortableTreeItem.js","names":["React","useMemo","useSortable","CSS","TreeItem","jsx","_jsx","animateLayoutChanges","_ref","isSorting","wasDragging","SortableTreeItem","_ref2","id","depth","props","_objectWithoutProperties","_excluded","attributes","isDragging","listeners","setDraggableNodeRef","setDroppableNodeRef","transform","transition","transformString","Translate","toString","style","handleProps","_objectSpread","dragRef","wrapperRef","ghost","disableInteraction"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/SortableTreeItem.tsx"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\nimport React, { type CSSProperties, useMemo } from 'react';\nimport { type AnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { TreeItem, type Props as TreeItemProps } from './TreeItem';\n\nexport interface Props<T> extends Omit<TreeItemProps<T>, 'style'> {\n id: string;\n}\n\nconst animateLayoutChanges: AnimateLayoutChanges = ({\n isSorting,\n wasDragging,\n}) => !(isSorting \|\| wasDragging);\n\nexport function SortableTreeItem<T>({\n id,\n depth,\n ...props\n}: Props<T>): JSX.Element {\n const {\n attributes,\n isDragging,\n isSorting,\n listeners,\n setDraggableNodeRef,\n setDroppableNodeRef,\n transform,\n transition,\n } = useSortable({\n id,\n animateLayoutChanges,\n });\n\n const transformString = CSS.Translate.toString(transform);\n\n const style: CSSProperties = useMemo(\n () => ({\n transform: transformString,\n transition,\n }),\n [transformString, transition]\n );\n\n const handleProps = useMemo(\n () => ({\n ...attributes,\n ...listeners,\n style,\n }),\n [attributes, listeners, style]\n );\n\n return (\n <TreeItem\n dragRef={setDraggableNodeRef}\n wrapperRef={setDroppableNodeRef}\n depth={depth}\n ghost={isDragging}\n disableInteraction={isSorting}\n handleProps={handleProps}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...props}\n />\n );\n}\n"],"mappings":";;;;;;;;AAAA;AACA,OAAOA,KAAK,IAAwBC,OAAO,QAAQ,OAAO;AAC1D,SAAoCC,WAAW,QAAQ,mBAAmB;AAC1E,SAASC,GAAG,QAAQ,oBAAoB;AAAC,SAChCC,QAAQ;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAMjB,IAAMC,oBAA0C,GAAGC,IAAA;EAAA,IAAC;IAClDC,SAAS;IACTC;EACF,CAAC,GAAAF,IAAA;EAAA,OAAK,EAAEC,SAAS,IAAIC,WAAW,CAAC;AAAA;AAEjC,OAAO,SAASC,gBAAgBA,CAAAC,KAAA,EAIN;EAAA,IAJU;MAClCC,EAAE;MACFC;IAEQ,CAAC,GAAAF,KAAA;IADNG,KAAK,GAAAC,wBAAA,CAAAJ,KAAA,EAAAK,SAAA;EAER,IAAM;IACJC,UAAU;IACVC,UAAU;IACVV,SAAS;IACTW,SAAS;IACTC,mBAAmB;IACnBC,mBAAmB;IACnBC,SAAS;IACTC;EACF,CAAC,GAAGtB,WAAW,CAAC;IACdW,EAAE;IACFN;EACF,CAAC,CAAC;EAEF,IAAMkB,eAAe,GAAGtB,GAAG,CAACuB,SAAS,CAACC,QAAQ,CAACJ,SAAS,CAAC;EAEzD,IAAMK,KAAoB,GAAG3B,OAAO,CAClC,OAAO;IACLsB,SAAS,EAAEE,eAAe;IAC1BD;EACF,CAAC,CAAC,EACF,CAACC,eAAe,EAAED,UAAU,CAC9B,CAAC;EAED,IAAMK,WAAW,GAAG5B,OAAO,CACzB,MAAA6B,aAAA,CAAAA,aAAA,CAAAA,aAAA,KACKZ,UAAU,GACVE,SAAS;IACZQ;EAAK,EACL,EACF,CAACV,UAAU,EAAEE,SAAS,EAAEQ,KAAK,CAC/B,CAAC;EAED,oBACEtB,IAAA,CAACF,QAAQ,EAAA0B,aAAA;IACPC,OAAO,EAAEV,mBAAoB;IAC7BW,UAAU,EAAEV,mBAAoB;IAChCR,KAAK,EAAEA,KAAM;IACbmB,KAAK,EAAEd,UAAW;IAClBe,kBAAkB,EAAEzB,SAAU;IAC9BoB,WAAW,EAAEA;IACb;EAAA,GACId,KAAK,CACV,CAAC;AAEN"}

package/dist/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../../../node_modules/@deephaven/components/scss/custom.scss","../../../../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss","../../../../src/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.scss","../../../../../../node_modules/@deephaven/components/scss/new_variables.scss"],"names":[],"mappings":"AAAA;AC6LA;ACrLE;EACE;EACA;EACA,KCPO;EDQP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,eDuIY;ECtIZ;;AAEA;EACE,ODNK;;ACSP;EACE;EACA;;AAGF;EACE;;AAEA;EACE;;AAEA;EACE,ODFG;;ACOT;EACE;EACA;EACA,YDyIuB;;ACtIzB;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,cCzDK;;AD6DT;EC7CA;EAIA,iBACE;EAIF,qBACE;EAIF;EACA;EACA;EACA;;ADgCA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA,kBDWE;ECVF;EACA,YDsEK;;ACpEL;EACE;;AChDR;EACE;EACA,YFoDM;EEnDN,YFgHS;EE/GT,eF8GY;EE7GZ;EACA;EACA;ED8CQ;EACA;EACA;EACA;;ACxDV;EACE;EACA,YFoDM;EEnDN,YFgHS;EE/GT,eF8GY;EE7GZ;EACA;EACA;EDuDQ;EACA;EACA;EACA;;ACjEV;EACE;EACA,YFoDM;EEnDN,YFgHS;EE/GT,eF8GY;EE7GZ;EACA;EACA;ED6DQ;EACA;EACA;EACA;;AAMR;EACE;;AAEA;EACE;EACA;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE,aArIS;EAsIT,cCrIK;EDsIL;EACA","file":"TreeItem.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore /\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n@import './util.scss';\n","// Styling overrides for bootstrap\n@use 'sass:map';\n\n// Override / set color variables\n$red: var(--dh-color-visual-red);\n$orange: var(--dh-color-visual-orange);\n$yellow: var(--dh-color-visual-yellow);\n$green: var(--dh-color-visual-green);\n$blue: var(--dh-color-visual-blue);\n$purple: var(--dh-color-visual-purple);\n\n// Fallback colors are used if theme isn't loaded\n// this is required for error messages if the API doesn't load\n\n//Define our Gray scale\n$gray-100: var(--dh-color-gray-900, #fcfcfa);\n$gray-200: var(--dh-color-gray-800);\n$gray-300: var(--dh-color-gray-700);\n$gray-400: var(--dh-color-gray-600);\n$gray-500: var(--dh-color-gray-500);\n// intentional duplicate, scale doesn't line up otherwise\n// as we have gray-850 and spectrum doesn't and it is needed\n$gray-600: var(--dh-color-gray-500);\n$gray-700: var(--dh-color-gray-400);\n$gray-800: var(--dh-color-gray-300);\n$gray-850: var(--dh-color-gray-200);\n$gray-900: var(--dh-color-gray-75);\n$black: var(--dh-color-black, #1a171a);\n$white: var(--dh-color-white, #f0f0ee);\n\n//Define some UI colors\n$interfacegray: var(--dh-color-content-bg, #2d2a2e);\n$interfaceblue: var(--dh-color-accent-bg);\n$interfacewhite: $white;\n$interfaceblack: $black;\n$content-bg: var(--dh-color-content-bg, #2d2a2e);\n$background: var(--dh-color-bg, #1a171a);\n$foreground: var(--dh-color-fg, #f0f0ee);\n\n// Extend default Bootstrap $grays map\n$grays-custom: (\n '850': $gray-850,\n);\n$grays: () !default;\n$grays: map-merge($grays, $grays-custom);\n\n// Extend default Bootstrap $colors map\n$colors-custom: (\n 'black': $black,\n);\n$colors: () !default;\n$colors: map-merge($colors, $colors-custom);\n\n// Override default Bootstrap $theme-colors map by mapping each key to itself.\n// These will then be re-mapped inside of `button-outline-variant` and\n// `button-outline-variant` mixins in `bootstrap_override_mixins_buttons.scss`\n$theme-colors-self-map: ();\n@each $key\n in (\n 'primary',\n 'secondary',\n 'success',\n 'info',\n 'warning',\n 'danger',\n 'light',\n 'dark'\n )\n{\n $theme-colors-self-map: map.set($theme-colors-self-map, $key, $key);\n}\n$theme-colors: () !default;\n$theme-colors: map-merge($theme-colors, $theme-colors-self-map);\n\n// Used by bootstrap_override_mixins_buttons.scss to map Bootstrap colors to\n// DH semantic colors\n$bootstrap-dh-semantic-map: (\n 'primary': 'accent',\n 'secondary': 'neutral',\n 'success': 'positive',\n 'info': 'info',\n 'warning': 'notice',\n 'danger': 'negative',\n // We shouldn't be using these, but mapping so they work with our custom\n // `color-yiq` mixin. If we find a way to remove $light + $dark that are\n // defined in Bootstrap _variables.scss, we should remove these\n 'light': 'neutral',\n 'dark': 'neutral',\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: var(--dh-color-accent-bg);\n$primary-hover: var(--dh-color-accent-hover-bg);\n$primary-dark: var(--dh-color-accent-down-bg);\n$secondary: var(--dh-color-neutral-bg);\n$secondary-hover: var(--dh-color-neutral-hover-bg);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: var(--dh-color-negative-bg);\n$danger-hover: var(--dh-color-negative-hover-bg);\n// We really don't want to use $light or $dark variables, but Bootstrap defines\n// them in _variables.scss. Explicitly setting them to ensure we are in control\n// of their values. If we can find a way to remove them, we should\n$light: var(--dh-color-gray-light);\n$dark: var(--dh-color-gray-dark);\n// Bootstrap doesn't define $mid, and we want to move away from this particular\n// semantic. Should be deleted by #1635\n$mid: var(--dh-color-gray-mid);\n\n$semantic-colors: (\n 'primary-hover': $primary-hover,\n 'primary-dark': $primary-dark,\n 'mid': $mid,\n 'content-bg': $interfacegray,\n 'background': $interfaceblack,\n 'foreground': $interfacewhite,\n 'secondary-hover': $secondary-hover,\n 'danger-hover': $danger-hover,\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif:\n 'Fira Sans',\n -apple-system,\n blinkmacsystemfont,\n 'Segoe UI',\n 'Roboto',\n 'Helvetica Neue',\n arial,\n sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n 'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n$text-select-color: var(--dh-color-text-highlight);\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem var(--dh-color-dropshadow);\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition:\n color 0.12s ease-in-out,\n background-color 0.12s ease-in-out,\n border-color 0.12s ease-in-out,\n box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n$btn-font-weight: var(--spectrum-global-font-weight-bold);\n$btn-line-height: 1.3;\n\n//Override Inputs\n$input-bg: var(--dh-color-input-bg);\n$input-disabled-bg: var(--dh-color-input-disabled-bg);\n$input-color: var(--dh-color-input-fg);\n$input-border-color: var(--dh-color-input-border);\n$input-placeholder-color: var(--dh-color-input-placeholder);\n$input-focus-border-color: var(--dh-color-input-focus-border);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: color-mix(\n in srgb,\n var(--dh-color-accent) 35%,\n transparent\n);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n$input-btn-line-height: 1.3;\n// Bootstrap uses a calc expression to determine the input height (calc(line-height + 2padding-y + border)).\n// The padding-y value has to be in rem to match units as it is a SASS calc.\n// Using 0.42145rem with 1.3 line height gets us to spectrum's 32px.\n/* stylelint-disable-next-line number-max-precision /\n$input-btn-padding-y: 0.42145rem;\n\n//checkbox\n$custom-control-indicator-bg: var(--dh-color-input-bg);\n$custom-control-indicator-border-color: var(--dh-color-input-border);\n$custom-checkbox-indicator-border-radius: 2px;\n$custom-control-indicator-border-width: 2px;\n$custom-control-indicator-active-bg: var(--dh-color-input-bg);\n$custom-control-indicator-active-border-color: var(--dh-color-input-fg);\n$custom-control-indicator-checked-bg: var(--dh-color-input-fg);\n$custom-control-indicator-checked-color: black; // used as mask fill color\n$custom-checkbox-indicator-indeterminate-bg: var(--dh-color-input-fg);\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: var(--dh-color-input-disabled-bg);\n$custom-control-indicator-checked-disabled-bg: var(\n --dh-color-input-disabled-bg\n);\n$custom-control-label-disabled-color: var(--dh-color-input-disabled-fg);\n\n// The $custom-select-indicator variable is used by Bootstrap to provide the\n// icon for the select dropdown. Inline svgs can't use CSS variables, so we hard\n// code the color to #929192 (the default value of --dh-color-gray-600). PR #1651\n// overrides this icon altogether for known dropdowns, so technically we may not\n// need this, but it's here in case there are any remaining instances.\n$custom-select-indicator-color: #929192;\n$custom-select-bg: var(--dh-color-selector-bg);\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n '#',\n '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: $gray-500;\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $content-bg;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n$close-color: var(--dh-color-text);\n$close-text-shadow: none;\n\n// Toast notification\n$toast-bg: var(--dh-color-accent-100);\n$toast-color: var(--dh-color-text);\n$toast-error-bg: var(--dh-color-negative-bg);\n$toast-error-color: var(--dh-color-text);\n\n//tooltips\n$tooltip-bg: var(--dh-color-tooltip-bg);\n$tooltip-color: var(--dh-color-tooltip-fg);\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem var(--dh-color-tooltip-box-shadow);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: var(--dh-color-item-list-hover-bg);\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: var(--dh-color-popover-bg);\n$contextmenu-color: var(--dh-color-text);\n$contextmenu-disabled-color: var(--dh-color-input-disabled-fg);\n$contextmenu-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg);\n$contextmenu-selected-bg: var(--dh-color-item-list-hover-bg);\n$contextmenu-selected-color: var(--dh-color-item-list-selected-fg);\n\n//hr\n$hr-border-color: var(--dh-color-hr);\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: $danger;\n$form-feedback-icon-invalid: str-replace(\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n '#',\n '%23'\n);\n\n// This section of variables is not consumed directly by DH, but they need to be\n// defined for sass to compile _variables\n$table-dark-bg: $gray-800;\n$table-dark-accent-bg: var(--dh-color-highlight-hover);\n$table-dark-hover-bg: var(--dh-color-highlight-active);\n$table-dark-border-color: $gray-700;\n$popover-bg: var(--dh-color-tooltip-bg);\n$popover-border-color: var(--dh-color-overlay-modal-bg);\n$popover-header-bg: #000;\n$popover-arrow-outer-color: var(--dh-color-dropshadow);\n$custom-range-thumb-active-bg: var(--dh-color-accent-1100);\n","@import '@deephaven/components/scss/custom.scss';\n\n$depth-line-color: $gray-600;\n$depth-margin: calc(\n 0.5rem + 8px + 0.5px\n); // Tree item 0.25rem padding, Icon button 0.25rem, half of icon size, and half pixel to offset 1px border\n\n.visibility-ordering-list {\n .tree-item {\n position: relative;\n display: flex;\n gap: $spacer-1;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: flex-start;\n align-items: center;\n flex-grow: 1;\n min-width: 0; // Needed so column names don't grow past the edge\n border: $input-border-width solid transparent;\n user-select: none;\n border-radius: $border-radius;\n padding: 0 $spacer-1; // space for focus border\n\n svg:not(.color-swatch) {\n color: $text-muted;\n }\n\n &:hover {\n background: var(--dh-color-item-list-hover-bg);\n cursor: grab;\n }\n\n &.isSelected {\n background-color: var(--dh-color-item-list-selected-bg);\n\n &:hover {\n background-color: var(--dh-color-item-list-selected-hover-bg);\n\n svg:not(.color-swatch) {\n color: $foreground;\n }\n }\n }\n\n &:focus {\n outline: 0;\n border: $input-border-width solid $input-focus-border-color;\n box-shadow: $input-focus-box-shadow;\n }\n\n .column-name {\n flex-grow: 1;\n flex-shrink: 1;\n overflow-x: hidden;\n text-overflow: ellipsis;\n }\n\n .item-count {\n padding: 0 $spacer-2;\n border-radius: 1rem;\n background-color: fg-opacity(25);\n margin-right: $spacer-1;\n }\n }\n\n .marching-ants {\n @include ants-base($foreground, $background);\n }\n\n .item-wrapper {\n list-style: none;\n box-sizing: border-box;\n margin-bottom: 1px;\n width: 100%;\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n\n &.clone {\n pointer-events: none;\n padding: 0;\n\n .tree-item {\n opacity: 1;\n background-color: $primary;\n color: var(--dh-color-accent-contrast);\n box-shadow: $box-shadow;\n\n svg:not(.color-swatch) {\n color: var(--dh-color-accent-contrast);\n }\n\n &.two-dragged {\n @include drag-stack(before) {\n top: 4px;\n left: 2px;\n opacity: 0.8;\n z-index: -1;\n }\n }\n\n &.multiple-dragged {\n @include drag-stack(before) {\n top: 4px;\n left: 2px;\n opacity: 0.8;\n z-index: -1;\n }\n @include drag-stack(after) {\n top: 8px;\n left: 4px;\n opacity: 0.6;\n z-index: -2;\n }\n }\n }\n }\n\n &.ghost {\n opacity: 0.5;\n\n .tree-item > {\n box-shadow: none;\n background-color: transparent;\n }\n }\n\n &.disableInteraction {\n pointer-events: none;\n\n &:not(.ghost) .tree-item.isSelected {\n opacity: 0.3;\n }\n }\n\n .depth-line {\n margin-left: $depth-margin;\n margin-right: $spacer-1; // Gives breathing room to the item boxes\n margin-top: -1px; // removes gaps between depth lines caused by item's margin-bottom\n border-left: 1px solid $depth-line-color;\n }\n }\n}\n","@use 'sass:math';\n\n//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents, two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n linear-gradient(to right, $color-2 50%, $color-1 50%),\n linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n background-size:\n $ant-size $ant-thickness,\n $ant-size $ant-thickness,\n $ant-thickness $ant-size,\n $ant-thickness $ant-size;\n background-position:\n 0 top,\n 0 bottom,\n left 0,\n right 0;\n background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n animation: march 0.5s;\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n &::#{$pseudo-element} {\n content: ' ';\n background: $primary;\n box-shadow: $box-shadow;\n border-radius: $border-radius;\n position: absolute;\n height: 100%;\n width: 100%;\n @content;\n }\n}\n\n$focus-bg-transparency: 12%;\n$hover-bg-transparency: 14%;\n$active-bg-transparency: 28%;\n$exception-transparency: 28%;\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../../../node_modules/@deephaven/components/scss/custom.scss","../../../../../../node_modules/@deephaven/components/scss/bootstrap_overrides.scss","../../../../src/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.scss","../../../../../../node_modules/@deephaven/components/scss/new_variables.scss"],"names":[],"mappings":"AAAA;AC6LA;ACrLE;EACE;EACA;EACA,KCPO;EDQP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,eDuIY;ECtIZ;;AAEA;EACE,ODNK;;ACSP;EACE;EACA;;AAGF;EACE;;AAEA;EACE;;AAEA;EACE,ODFG;;ACOT;EACE;EACA;EACA,YDyIuB;;ACtIzB;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,cCzDK;;AD6DT;EC7CA;EAIA,iBACE;EAIF,qBACE;EAIF;EACA;EACA;EACA;;ADgCA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA,kBDWE;ECVF;EACA,YDsEK;;ACpEL;EACE;;AChDR;EACE;EACA,YFoDM;EEnDN,YFgHS;EE/GT,eF8GY;EE7GZ;EACA;EACA;ED8CQ;EACA;EACA;EACA;;ACxDV;EACE;EACA,YFoDM;EEnDN,YFgHS;EE/GT,eF8GY;EE7GZ;EACA;EACA;EDuDQ;EACA;EACA;EACA;;ACjEV;EACE;EACA,YFoDM;EEnDN,YFgHS;EE/GT,eF8GY;EE7GZ;EACA;EACA;ED6DQ;EACA;EACA;EACA;;AAMR;EACE;;AAEA;EACE;EACA;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE,aArIS;EAsIT,cCrIK;EDsIL;EACA","file":"TreeItem.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore /\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n@import './util.scss';\n","// Styling overrides for bootstrap\n@use 'sass:map';\n\n// Override / set color variables\n$red: var(--dh-color-visual-red);\n$orange: var(--dh-color-visual-orange);\n$yellow: var(--dh-color-visual-yellow);\n$green: var(--dh-color-visual-green);\n$blue: var(--dh-color-visual-blue);\n$purple: var(--dh-color-visual-purple);\n\n// Fallback colors are used if theme isn't loaded\n// this is required for error messages if the API doesn't load\n\n//Define our Gray scale\n$gray-100: var(--dh-color-gray-900, #fcfcfa);\n$gray-200: var(--dh-color-gray-800);\n$gray-300: var(--dh-color-gray-700);\n$gray-400: var(--dh-color-gray-600);\n$gray-500: var(--dh-color-gray-500);\n// intentional duplicate, scale doesn't line up otherwise\n// as we have gray-850 and spectrum doesn't and it is needed\n$gray-600: var(--dh-color-gray-500);\n$gray-700: var(--dh-color-gray-400);\n$gray-800: var(--dh-color-gray-300);\n$gray-850: var(--dh-color-gray-200);\n$gray-900: var(--dh-color-gray-75);\n$black: var(--dh-color-black, #1a171a);\n$white: var(--dh-color-white, #f0f0ee);\n\n//Define some UI colors\n$interfacegray: var(--dh-color-content-bg, #2d2a2e);\n$interfaceblue: var(--dh-color-accent-bg);\n$interfacewhite: $white;\n$interfaceblack: $black;\n$content-bg: var(--dh-color-content-bg, #2d2a2e);\n$background: var(--dh-color-bg, #1a171a);\n$foreground: var(--dh-color-fg, #f0f0ee);\n\n// Extend default Bootstrap $grays map\n$grays-custom: (\n '850': $gray-850,\n);\n$grays: () !default;\n$grays: map-merge($grays, $grays-custom);\n\n// Extend default Bootstrap $colors map\n$colors-custom: (\n 'black': $black,\n);\n$colors: () !default;\n$colors: map-merge($colors, $colors-custom);\n\n// Override default Bootstrap $theme-colors map by mapping each key to itself.\n// These will then be re-mapped inside of `button-outline-variant` and\n// `button-outline-variant` mixins in `bootstrap_override_mixins_buttons.scss`\n$theme-colors-self-map: ();\n@each $key\n in (\n 'primary',\n 'secondary',\n 'success',\n 'info',\n 'warning',\n 'danger',\n 'light',\n 'dark'\n )\n{\n $theme-colors-self-map: map.set($theme-colors-self-map, $key, $key);\n}\n$theme-colors: () !default;\n$theme-colors: map-merge($theme-colors, $theme-colors-self-map);\n\n// Used by bootstrap_override_mixins_buttons.scss to map Bootstrap colors to\n// DH semantic colors\n$bootstrap-dh-semantic-map: (\n 'primary': 'accent',\n 'secondary': 'neutral',\n 'success': 'positive',\n 'info': 'info',\n 'warning': 'notice',\n 'danger': 'negative',\n // We shouldn't be using these, but mapping so they work with our custom\n // `color-yiq` mixin. If we find a way to remove $light + $dark that are\n // defined in Bootstrap _variables.scss, we should remove these\n 'light': 'neutral',\n 'dark': 'neutral',\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: var(--dh-color-accent-bg);\n$primary-hover: var(--dh-color-accent-hover-bg);\n$primary-dark: var(--dh-color-accent-down-bg);\n$secondary: var(--dh-color-neutral-bg);\n$secondary-hover: var(--dh-color-neutral-hover-bg);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: var(--dh-color-negative-bg);\n$danger-hover: var(--dh-color-negative-hover-bg);\n// We really don't want to use $light or $dark variables, but Bootstrap defines\n// them in _variables.scss. Explicitly setting them to ensure we are in control\n// of their values. If we can find a way to remove them, we should\n$light: var(--dh-color-gray-light);\n$dark: var(--dh-color-gray-dark);\n// Bootstrap doesn't define $mid, and we want to move away from this particular\n// semantic. Should be deleted by #1635\n$mid: var(--dh-color-gray-mid);\n\n$semantic-colors: (\n 'primary-hover': $primary-hover,\n 'primary-dark': $primary-dark,\n 'mid': $mid,\n 'content-bg': $interfacegray,\n 'background': $interfaceblack,\n 'foreground': $interfacewhite,\n 'secondary-hover': $secondary-hover,\n 'danger-hover': $danger-hover,\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif:\n 'Fira Sans',\n -apple-system,\n blinkmacsystemfont,\n 'Segoe UI',\n 'Roboto',\n 'Helvetica Neue',\n arial,\n sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n 'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n$text-select-color: var(--dh-color-text-highlight);\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem var(--dh-color-dropshadow);\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition:\n color 0.12s ease-in-out,\n background-color 0.12s ease-in-out,\n border-color 0.12s ease-in-out,\n box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n$btn-font-weight: var(--spectrum-global-font-weight-bold);\n$btn-line-height: 1.3;\n\n//Override Inputs\n$input-bg: var(--dh-color-input-bg);\n$input-disabled-bg: var(--dh-color-input-disabled-bg);\n$input-color: var(--dh-color-input-fg);\n$input-border-color: var(--dh-color-input-border);\n$input-placeholder-color: var(--dh-color-input-placeholder);\n$input-focus-border-color: var(--dh-color-input-focus-border);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: color-mix(\n in srgb,\n var(--dh-color-accent) 35%,\n transparent\n);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n$input-btn-line-height: 1.3;\n// Bootstrap uses a calc expression to determine the input height (calc(line-height + 2padding-y + border)).\n// The padding-y value has to be in rem to match units as it is a SASS calc.\n// Using 0.42145rem with 1.3 line height gets us to spectrum's 32px.\n/* stylelint-disable-next-line number-max-precision /\n$input-btn-padding-y: 0.42145rem;\n\n//checkbox\n$custom-control-indicator-bg: var(--dh-color-input-bg);\n$custom-control-indicator-border-color: var(--dh-color-input-border);\n$custom-checkbox-indicator-border-radius: 2px;\n$custom-control-indicator-border-width: 2px;\n$custom-control-indicator-active-bg: var(--dh-color-input-bg);\n$custom-control-indicator-active-border-color: var(--dh-color-input-fg);\n$custom-control-indicator-checked-bg: var(--dh-color-input-fg);\n$custom-control-indicator-checked-color: black; // used as mask fill color\n$custom-checkbox-indicator-indeterminate-bg: var(--dh-color-input-fg);\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: var(--dh-color-input-disabled-bg);\n$custom-control-indicator-checked-disabled-bg: var(\n --dh-color-input-disabled-bg\n);\n$custom-control-label-disabled-color: var(--dh-color-input-disabled-fg);\n\n// The $custom-select-indicator variable is used by Bootstrap to provide the\n// icon for the select dropdown. Inline svgs can't use CSS variables, so we hard\n// code the color to #929192 (the default value of --dh-color-gray-600). PR #1651\n// overrides this icon altogether for known dropdowns, so technically we may not\n// need this, but it's here in case there are any remaining instances.\n$custom-select-indicator-color: #929192;\n$custom-select-bg: var(--dh-color-selector-bg);\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n '#',\n '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: $gray-500;\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $content-bg;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n$close-color: var(--dh-color-text);\n$close-text-shadow: none;\n\n// Toast notification\n$toast-bg: var(--dh-color-accent-100);\n$toast-color: var(--dh-color-text);\n$toast-error-bg: var(--dh-color-negative-bg);\n$toast-error-color: var(--dh-color-text);\n\n//tooltips\n$tooltip-bg: var(--dh-color-tooltip-bg);\n$tooltip-color: var(--dh-color-tooltip-fg);\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem var(--dh-color-tooltip-box-shadow);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: var(--dh-color-item-list-hover-bg);\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: var(--dh-color-popover-bg);\n$contextmenu-color: var(--dh-color-text);\n$contextmenu-disabled-color: var(--dh-color-text-disabled);\n$contextmenu-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg);\n$contextmenu-selected-bg: var(--dh-color-item-list-hover-bg);\n$contextmenu-selected-color: var(--dh-color-item-list-selected-fg);\n\n//hr\n$hr-border-color: var(--dh-color-hr);\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: $danger;\n$form-feedback-icon-invalid: str-replace(\n url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n '#',\n '%23'\n);\n\n// This section of variables is not consumed directly by DH, but they need to be\n// defined for sass to compile _variables\n$table-dark-bg: $gray-800;\n$table-dark-accent-bg: var(--dh-color-highlight-hover);\n$table-dark-hover-bg: var(--dh-color-highlight-active);\n$table-dark-border-color: $gray-700;\n$popover-bg: var(--dh-color-tooltip-bg);\n$popover-border-color: var(--dh-color-overlay-modal-bg);\n$popover-header-bg: #000;\n$popover-arrow-outer-color: var(--dh-color-dropshadow);\n$custom-range-thumb-active-bg: var(--dh-color-accent-1100);\n","@import '@deephaven/components/scss/custom.scss';\n\n$depth-line-color: $gray-600;\n$depth-margin: calc(\n 0.5rem + 8px + 0.5px\n); // Tree item 0.25rem padding, Icon button 0.25rem, half of icon size, and half pixel to offset 1px border\n\n.visibility-ordering-list {\n .tree-item {\n position: relative;\n display: flex;\n gap: $spacer-1;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: flex-start;\n align-items: center;\n flex-grow: 1;\n min-width: 0; // Needed so column names don't grow past the edge\n border: $input-border-width solid transparent;\n user-select: none;\n border-radius: $border-radius;\n padding: 0 $spacer-1; // space for focus border\n\n svg:not(.color-swatch) {\n color: $text-muted;\n }\n\n &:hover {\n background: var(--dh-color-item-list-hover-bg);\n cursor: grab;\n }\n\n &.isSelected {\n background-color: var(--dh-color-item-list-selected-bg);\n\n &:hover {\n background-color: var(--dh-color-item-list-selected-hover-bg);\n\n svg:not(.color-swatch) {\n color: $foreground;\n }\n }\n }\n\n &:focus {\n outline: 0;\n border: $input-border-width solid $input-focus-border-color;\n box-shadow: $input-focus-box-shadow;\n }\n\n .column-name {\n flex-grow: 1;\n flex-shrink: 1;\n overflow-x: hidden;\n text-overflow: ellipsis;\n }\n\n .item-count {\n padding: 0 $spacer-2;\n border-radius: 1rem;\n background-color: fg-opacity(25);\n margin-right: $spacer-1;\n }\n }\n\n .marching-ants {\n @include ants-base($foreground, $background);\n }\n\n .item-wrapper {\n list-style: none;\n box-sizing: border-box;\n margin-bottom: 1px;\n width: 100%;\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n\n &.clone {\n pointer-events: none;\n padding: 0;\n\n .tree-item {\n opacity: 1;\n background-color: $primary;\n color: var(--dh-color-accent-contrast);\n box-shadow: $box-shadow;\n\n svg:not(.color-swatch) {\n color: var(--dh-color-accent-contrast);\n }\n\n &.two-dragged {\n @include drag-stack(before) {\n top: 4px;\n left: 2px;\n opacity: 0.8;\n z-index: -1;\n }\n }\n\n &.multiple-dragged {\n @include drag-stack(before) {\n top: 4px;\n left: 2px;\n opacity: 0.8;\n z-index: -1;\n }\n @include drag-stack(after) {\n top: 8px;\n left: 4px;\n opacity: 0.6;\n z-index: -2;\n }\n }\n }\n }\n\n &.ghost {\n opacity: 0.5;\n\n .tree-item > {\n box-shadow: none;\n background-color: transparent;\n }\n }\n\n &.disableInteraction {\n pointer-events: none;\n\n &:not(.ghost) .tree-item.isSelected {\n opacity: 0.3;\n }\n }\n\n .depth-line {\n margin-left: $depth-margin;\n margin-right: $spacer-1; // Gives breathing room to the item boxes\n margin-top: -1px; // removes gaps between depth lines caused by item's margin-bottom\n border-left: 1px solid $depth-line-color;\n }\n }\n}\n","@use 'sass:math';\n\n//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents, two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n linear-gradient(to right, $color-2 50%, $color-1 50%),\n linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n background-size:\n $ant-size $ant-thickness,\n $ant-size $ant-thickness,\n $ant-thickness $ant-size,\n $ant-thickness $ant-size;\n background-position:\n 0 top,\n 0 bottom,\n left 0,\n right 0;\n background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n animation: march 0.5s;\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n &::#{$pseudo-element} {\n content: ' ';\n background: $primary;\n box-shadow: $box-shadow;\n border-radius: $border-radius;\n position: absolute;\n height: 100%;\n width: 100%;\n @content;\n }\n}\n\n$focus-bg-transparency: 12%;\n$hover-bg-transparency: 14%;\n$active-bg-transparency: 28%;\n$exception-transparency: 28%;\n"]}

package/dist/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TreeItem.js","names":["React","useMemo","classNames","jsx","_jsx","jsxs","_jsxs","TreeItem","props","clone","depth","disableInteraction","ghost","handleProps","value","dragRef","wrapperRef","renderItem","item","childCount","depthMarkers","Array","fill","map","_","i","className","concat","renderItemProps","ref","children","displayName"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\nimport React, { useMemo } from 'react';\nimport classNames from 'classnames';\nimport type { FlattenedItem, TreeItem as TreeItemType } from './types';\nimport './TreeItem.scss';\n\nexport interface Props<T> {\n childCount?: number;\n clone?: boolean;\n depth: number;\n disableInteraction?: boolean;\n ghost?: boolean;\n handleProps?: Record<string, unknown>;\n value: string;\n item: FlattenedItem<T>;\n dragRef?: React.Ref<HTMLDivElement> \| null;\n wrapperRef?: React.Ref<HTMLLIElement> \| null;\n renderItem: (props: {\n ref: React.Ref<HTMLDivElement> \| null;\n clone: boolean;\n childCount?: number;\n value: string;\n item: FlattenedItem<T>;\n handleProps?: Record<string, unknown>;\n }) => JSX.Element;\n}\n\nexport type TreeItemRenderFn<T> = (props: {\n ref: React.Ref<HTMLDivElement> \| null;\n clone: boolean;\n childCount?: number;\n value: string;\n item: T extends TreeItemType<infer D> ? FlattenedItem<D> : FlattenedItem<T>;\n handleProps?: Record<string, unknown>;\n}) => JSX.Element;\n\nexport function TreeItem<T>(props: Props<T>): JSX.Element {\n const {\n clone = false,\n depth,\n disableInteraction = false,\n ghost = false,\n handleProps,\n value,\n dragRef = null,\n wrapperRef = null,\n renderItem,\n item,\n childCount,\n } = props;\n\n const depthMarkers = useMemo(\n () =>\n Array(depth)\n .fill(0)\n // eslint-disable-next-line react/no-array-index-key\n .map((_, i) => <span key={`depth-line-${i}`} className=\"depth-line\" />),\n [depth]\n );\n\n const renderItemProps = useMemo(\n () => ({\n ref: dragRef,\n clone,\n value,\n item,\n childCount,\n handleProps,\n }),\n [dragRef, clone, value, item, childCount, handleProps]\n );\n\n return (\n <li\n key={value}\n className={classNames('item-wrapper', {\n clone,\n ghost,\n disableInteraction,\n })}\n ref={wrapperRef}\n >\n {!clone && depthMarkers}\n {renderItem(renderItemProps)}\n </li>\n );\n}\n\nTreeItem.displayName = 'TreeItem';\n"],"mappings":"AAAA;AACA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,UAAU,MAAM,YAAY;AAAC;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAkCpC,OAAO,SAASC,QAAQA,CAAIC,KAAe,EAAe;EACxD,IAAM;IACJC,KAAK,GAAG,KAAK;IACbC,KAAK;IACLC,kBAAkB,GAAG,KAAK;IAC1BC,KAAK,GAAG,KAAK;IACbC,WAAW;IACXC,KAAK;IACLC,OAAO,GAAG,IAAI;IACdC,UAAU,GAAG,IAAI;IACjBC,UAAU;IACVC,IAAI;IACJC;EACF,CAAC,GAAGX,KAAK;EAET,IAAMY,YAAY,GAAGnB,OAAO,CAC1B,MACEoB,KAAK,CAACX,KAAK,CAAC,CACTY,IAAI,CAAC,CAAC;EACP;EAAA,CACCC,GAAG,CAAC,CAACC,CAAC,EAAEC,CAAC,kBAAKrB,IAAA;IAA8BsB,SAAS,EAAC;EAAY,iBAAAC,MAAA,CAA3BF,CAAC,CAA4B,CAAC,CAAC,EAC3E,CAACf,KAAK,CACR,CAAC;EAED,IAAMkB,eAAe,GAAG3B,OAAO,CAC7B,OAAO;IACL4B,GAAG,EAAEd,OAAO;IACZN,KAAK;IACLK,KAAK;IACLI,IAAI;IACJC,UAAU;IACVN;EACF,CAAC,CAAC,EACF,CAACE,OAAO,EAAEN,KAAK,EAAEK,KAAK,EAAEI,IAAI,EAAEC,UAAU,EAAEN,WAAW,CACvD,CAAC;EAED,oBACEP,KAAA;IAEEoB,SAAS,EAAExB,UAAU,CAAC,cAAc,EAAE;MACpCO,KAAK;MACLG,KAAK;MACLD;IACF,CAAC,CAAE;IACHkB,GAAG,EAAEb,UAAW;IAAAc,QAAA,GAEf,CAACrB,KAAK,IAAIW,YAAY,EACtBH,UAAU,CAACW,eAAe,CAAC;EAAA,GATvBd,KAUH,CAAC;AAET;AAEAP,QAAQ,CAACwB,WAAW,GAAG,UAAU"~~,"ignoreList":[]~~}
1	+ {"version":3,"file":"TreeItem.js","names":["React","useMemo","classNames","jsx","_jsx","jsxs","_jsxs","TreeItem","props","clone","depth","disableInteraction","ghost","handleProps","value","dragRef","wrapperRef","renderItem","item","childCount","depthMarkers","Array","fill","map","_","i","className","concat","renderItemProps","ref","children","displayName"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/TreeItem.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\nimport React, { useMemo } from 'react';\nimport classNames from 'classnames';\nimport type { FlattenedItem, TreeItem as TreeItemType } from './types';\nimport './TreeItem.scss';\n\nexport interface Props<T> {\n childCount?: number;\n clone?: boolean;\n depth: number;\n disableInteraction?: boolean;\n ghost?: boolean;\n handleProps?: Record<string, unknown>;\n value: string;\n item: FlattenedItem<T>;\n dragRef?: React.Ref<HTMLDivElement> \| null;\n wrapperRef?: React.Ref<HTMLLIElement> \| null;\n renderItem: (props: {\n ref: React.Ref<HTMLDivElement> \| null;\n clone: boolean;\n childCount?: number;\n value: string;\n item: FlattenedItem<T>;\n handleProps?: Record<string, unknown>;\n }) => JSX.Element;\n}\n\nexport type TreeItemRenderFn<T> = (props: {\n ref: React.Ref<HTMLDivElement> \| null;\n clone: boolean;\n childCount?: number;\n value: string;\n item: T extends TreeItemType<infer D> ? FlattenedItem<D> : FlattenedItem<T>;\n handleProps?: Record<string, unknown>;\n}) => JSX.Element;\n\nexport function TreeItem<T>(props: Props<T>): JSX.Element {\n const {\n clone = false,\n depth,\n disableInteraction = false,\n ghost = false,\n handleProps,\n value,\n dragRef = null,\n wrapperRef = null,\n renderItem,\n item,\n childCount,\n } = props;\n\n const depthMarkers = useMemo(\n () =>\n Array(depth)\n .fill(0)\n // eslint-disable-next-line react/no-array-index-key\n .map((_, i) => <span key={`depth-line-${i}`} className=\"depth-line\" />),\n [depth]\n );\n\n const renderItemProps = useMemo(\n () => ({\n ref: dragRef,\n clone,\n value,\n item,\n childCount,\n handleProps,\n }),\n [dragRef, clone, value, item, childCount, handleProps]\n );\n\n return (\n <li\n key={value}\n className={classNames('item-wrapper', {\n clone,\n ghost,\n disableInteraction,\n })}\n ref={wrapperRef}\n >\n {!clone && depthMarkers}\n {renderItem(renderItemProps)}\n </li>\n );\n}\n\nTreeItem.displayName = 'TreeItem';\n"],"mappings":"AAAA;AACA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,UAAU,MAAM,YAAY;AAAC;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAkCpC,OAAO,SAASC,QAAQA,CAAIC,KAAe,EAAe;EACxD,IAAM;IACJC,KAAK,GAAG,KAAK;IACbC,KAAK;IACLC,kBAAkB,GAAG,KAAK;IAC1BC,KAAK,GAAG,KAAK;IACbC,WAAW;IACXC,KAAK;IACLC,OAAO,GAAG,IAAI;IACdC,UAAU,GAAG,IAAI;IACjBC,UAAU;IACVC,IAAI;IACJC;EACF,CAAC,GAAGX,KAAK;EAET,IAAMY,YAAY,GAAGnB,OAAO,CAC1B,MACEoB,KAAK,CAACX,KAAK,CAAC,CACTY,IAAI,CAAC,CAAC;EACP;EAAA,CACCC,GAAG,CAAC,CAACC,CAAC,EAAEC,CAAC,kBAAKrB,IAAA;IAA8BsB,SAAS,EAAC;EAAY,iBAAAC,MAAA,CAA3BF,CAAC,CAA4B,CAAC,CAAC,EAC3E,CAACf,KAAK,CACR,CAAC;EAED,IAAMkB,eAAe,GAAG3B,OAAO,CAC7B,OAAO;IACL4B,GAAG,EAAEd,OAAO;IACZN,KAAK;IACLK,KAAK;IACLI,IAAI;IACJC,UAAU;IACVN;EACF,CAAC,CAAC,EACF,CAACE,OAAO,EAAEN,KAAK,EAAEK,KAAK,EAAEI,IAAI,EAAEC,UAAU,EAAEN,WAAW,CACvD,CAAC;EAED,oBACEP,KAAA;IAEEoB,SAAS,EAAExB,UAAU,CAAC,cAAc,EAAE;MACpCO,KAAK;MACLG,KAAK;MACLD;IACF,CAAC,CAAE;IACHkB,GAAG,EAAEb,UAAW;IAAAc,QAAA,GAEf,CAACrB,KAAK,IAAIW,YAAY,EACtBH,UAAU,CAACW,eAAe,CAAC;EAAA,GATvBd,KAUH,CAAC;AAET;AAEAP,QAAQ,CAACwB,WAAW,GAAG,UAAU"}

package/dist/sidebar/visibility-ordering-builder/sortable-tree/keyboardCoordinates.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"keyboardCoordinates.js","names":["closestCorners","getFirstCollision","KeyboardCode","getProjection","DIRECTIONS","Down","Right","Up","Left","HORIZONTAL","sortableTreeKeyboardCoordinates","context","indicator","indentationWidth","event","_ref","currentCoordinates","active","over","collisionRect","droppableRects","droppableContainers","includes","code","preventDefault","current","items","offset","id","depth","maxDepth","minDepth","_objectSpread","x","undefined","containers","forEach","container","disabled","rect","get","top","push","collisions","pointerCoordinates","closestId","length","activeRect","newRect","newDroppable","newIndex","findIndex","_ref2","newItem","activeIndex","_ref3","activeItem","isBelow","modifier","nextOffset","height","newCoordinates","left","y"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/keyboardCoordinates.ts"],"sourcesContent":["/* eslint-disable import/prefer-default-export /\nimport {\n closestCorners,\n getFirstCollision,\n KeyboardCode,\n type KeyboardCoordinateGetter,\n type DroppableContainer,\n} from '@dnd-kit/core';\nimport type { SensorContext } from './types';\nimport { getProjection } from './utilities';\n\nconst DIRECTIONS: string[] = [\n KeyboardCode.Down,\n KeyboardCode.Right,\n KeyboardCode.Up,\n KeyboardCode.Left,\n];\n\nconst HORIZONTAL: string[] = [KeyboardCode.Left, KeyboardCode.Right];\n\nexport function sortableTreeKeyboardCoordinates(\n context: SensorContext,\n indicator: boolean,\n indentationWidth: number\n): KeyboardCoordinateGetter {\n return (\n event,\n {\n currentCoordinates,\n context: {\n active,\n over,\n collisionRect,\n droppableRects,\n droppableContainers,\n },\n }\n ) => {\n if (DIRECTIONS.includes(event.code)) {\n if (!active \|\| !collisionRect) {\n return;\n }\n\n event.preventDefault();\n\n const {\n current: { items, offset },\n } = context;\n\n if (HORIZONTAL.includes(event.code) && over?.id != null) {\n const { depth, maxDepth, minDepth } = getProjection(\n items,\n active.id as string,\n over.id as string,\n offset,\n indentationWidth\n );\n\n switch (event.code) {\n case KeyboardCode.Left:\n if (depth > minDepth) {\n return {\n ...currentCoordinates,\n x: currentCoordinates.x - indentationWidth,\n };\n }\n break;\n case KeyboardCode.Right:\n if (depth < maxDepth) {\n return {\n ...currentCoordinates,\n x: currentCoordinates.x + indentationWidth,\n };\n }\n break;\n }\n\n return undefined;\n }\n\n const containers: DroppableContainer[] = [];\n\n droppableContainers.forEach(container => {\n if (container?.disabled \|\| container.id === over?.id) {\n return;\n }\n\n const rect = droppableRects.get(container.id);\n\n if (!rect) {\n return;\n }\n\n switch (event.code) {\n case KeyboardCode.Down:\n if (collisionRect.top < rect.top) {\n containers.push(container);\n }\n break;\n case KeyboardCode.Up:\n if (collisionRect.top > rect.top) {\n containers.push(container);\n }\n break;\n }\n });\n\n const collisions = closestCorners({\n active,\n collisionRect,\n pointerCoordinates: null,\n droppableRects,\n droppableContainers: containers,\n });\n let closestId = getFirstCollision(collisions, 'id');\n\n if (closestId === over?.id && collisions.length > 1) {\n closestId = collisions[1].id;\n }\n\n if (closestId != null && over?.id != null) {\n const activeRect = droppableRects.get(active.id);\n const newRect = droppableRects.get(closestId);\n const newDroppable = droppableContainers.get(closestId);\n\n if (activeRect && newRect && newDroppable) {\n const newIndex = items.findIndex(({ id }) => id === closestId);\n const newItem = items[newIndex];\n const activeIndex = items.findIndex(({ id }) => id === active.id);\n const activeItem = items[activeIndex];\n\n if (newItem != null && activeItem != null) {\n const { depth } = getProjection(\n items,\n active.id as string,\n closestId as string,\n (newItem.depth - activeItem.depth) indentationWidth,\n indentationWidth\n );\n const isBelow = newIndex > activeIndex;\n const modifier = isBelow ? 1 : -1;\n const nextOffset = indicator\n ? (collisionRect.height - activeRect.height) / 2\n : 0;\n\n const newCoordinates = {\n x: newRect.left + depth * indentationWidth,\n y: newRect.top + modifier * nextOffset,\n };\n\n return newCoordinates;\n }\n }\n }\n }\n\n return undefined;\n };\n}\n"],"mappings":";;;;;AAAA;AACA,SACEA,cAAc,EACdC,iBAAiB,EACjBC,YAAY,QAGP,eAAe;AAAC,SAEdC,aAAa;AAEtB,IAAMC,UAAoB,GAAG,CAC3BF,YAAY,CAACG,IAAI,EACjBH,YAAY,CAACI,KAAK,EAClBJ,YAAY,CAACK,EAAE,EACfL,YAAY,CAACM,IAAI,CAClB;AAED,IAAMC,UAAoB,GAAG,CAACP,YAAY,CAACM,IAAI,EAAEN,YAAY,CAACI,KAAK,CAAC;AAEpE,OAAO,SAASI,+BAA+BA,CAC7CC,OAAsB,EACtBC,SAAkB,EAClBC,gBAAwB,EACE;EAC1B,OAAO,CACLC,KAAK,EAAAC,IAAA,KAWF;IAAA,IAVH;MACEC,kBAAkB;MAClBL,OAAO,EAAE;QACPM,MAAM;QACNC,IAAI;QACJC,aAAa;QACbC,cAAc;QACdC;MACF;IACF,CAAC,GAAAN,IAAA;IAED,IAAIX,UAAU,CAACkB,QAAQ,CAACR,KAAK,CAACS,IAAI,CAAC,EAAE;MACnC,IAAI,CAACN,MAAM,IAAI,CAACE,aAAa,EAAE;QAC7B;MACF;MAEAL,KAAK,CAACU,cAAc,CAAC,CAAC;MAEtB,IAAM;QACJC,OAAO,EAAE;UAAEC,KAAK;UAAEC;QAAO;MAC3B,CAAC,GAAGhB,OAAO;MAEX,IAAIF,UAAU,CAACa,QAAQ,CAACR,KAAK,CAACS,IAAI,CAAC,IAAI,CAAAL,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEU,EAAE,KAAI,IAAI,EAAE;QACvD,IAAM;UAAEC,KAAK;UAAEC,QAAQ;UAAEC;QAAS,CAAC,GAAG5B,aAAa,CACjDuB,KAAK,EACLT,MAAM,CAACW,EAAE,EACTV,IAAI,CAACU,EAAE,EACPD,MAAM,EACNd,gBACF,CAAC;QAED,QAAQC,KAAK,CAACS,IAAI;UAChB,KAAKrB,YAAY,CAACM,IAAI;YACpB,IAAIqB,KAAK,GAAGE,QAAQ,EAAE;cACpB,OAAAC,aAAA,CAAAA,aAAA,KACKhB,kBAAkB;gBACrBiB,CAAC,EAAEjB,kBAAkB,CAACiB,CAAC,GAAGpB;cAAgB;YAE9C;YACA;UACF,KAAKX,YAAY,CAACI,KAAK;YACrB,IAAIuB,KAAK,GAAGC,QAAQ,EAAE;cACpB,OAAAE,aAAA,CAAAA,aAAA,KACKhB,kBAAkB;gBACrBiB,CAAC,EAAEjB,kBAAkB,CAACiB,CAAC,GAAGpB;cAAgB;YAE9C;YACA;QACJ;QAEA,OAAOqB,SAAS;MAClB;MAEA,IAAMC,UAAgC,GAAG,EAAE;MAE3Cd,mBAAmB,CAACe,OAAO,CAACC,SAAS,IAAI;QACvC,IAAIA,SAAS,aAATA,SAAS,eAATA,SAAS,CAAEC,QAAQ,IAAID,SAAS,CAACT,EAAE,MAAKV,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEU,EAAE,GAAE;UACpD;QACF;QAEA,IAAMW,IAAI,GAAGnB,cAAc,CAACoB,GAAG,CAACH,SAAS,CAACT,EAAE,CAAC;QAE7C,IAAI,CAACW,IAAI,EAAE;UACT;QACF;QAEA,QAAQzB,KAAK,CAACS,IAAI;UAChB,KAAKrB,YAAY,CAACG,IAAI;YACpB,IAAIc,aAAa,CAACsB,GAAG,GAAGF,IAAI,CAACE,GAAG,EAAE;cAChCN,UAAU,CAACO,IAAI,CAACL,SAAS,CAAC;YAC5B;YACA;UACF,KAAKnC,YAAY,CAACK,EAAE;YAClB,IAAIY,aAAa,CAACsB,GAAG,GAAGF,IAAI,CAACE,GAAG,EAAE;cAChCN,UAAU,CAACO,IAAI,CAACL,SAAS,CAAC;YAC5B;YACA;QACJ;MACF,CAAC,CAAC;MAEF,IAAMM,UAAU,GAAG3C,cAAc,CAAC;QAChCiB,MAAM;QACNE,aAAa;QACbyB,kBAAkB,EAAE,IAAI;QACxBxB,cAAc;QACdC,mBAAmB,EAAEc;MACvB,CAAC,CAAC;MACF,IAAIU,SAAS,GAAG5C,iBAAiB,CAAC0C,UAAU,EAAE,IAAI,CAAC;MAEnD,IAAIE,SAAS,MAAK3B,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEU,EAAE,KAAIe,UAAU,CAACG,MAAM,GAAG,CAAC,EAAE;QACnDD,SAAS,GAAGF,UAAU,CAAC,CAAC,CAAC,CAACf,EAAE;MAC9B;MAEA,IAAIiB,SAAS,IAAI,IAAI,IAAI,CAAA3B,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEU,EAAE,KAAI,IAAI,EAAE;QACzC,IAAMmB,UAAU,GAAG3B,cAAc,CAACoB,GAAG,CAACvB,MAAM,CAACW,EAAE,CAAC;QAChD,IAAMoB,OAAO,GAAG5B,cAAc,CAACoB,GAAG,CAACK,SAAS,CAAC;QAC7C,IAAMI,YAAY,GAAG5B,mBAAmB,CAACmB,GAAG,CAACK,SAAS,CAAC;QAEvD,IAAIE,UAAU,IAAIC,OAAO,IAAIC,YAAY,EAAE;UACzC,IAAMC,QAAQ,GAAGxB,KAAK,CAACyB,SAAS,CAACC,KAAA;YAAA,IAAC;cAAExB;YAAG,CAAC,GAAAwB,KAAA;YAAA,OAAKxB,EAAE,KAAKiB,SAAS;UAAA,EAAC;UAC9D,IAAMQ,OAAO,GAAG3B,KAAK,CAACwB,QAAQ,CAAC;UAC/B,IAAMI,WAAW,GAAG5B,KAAK,CAACyB,SAAS,CAACI,KAAA;YAAA,IAAC;cAAE3B;YAAG,CAAC,GAAA2B,KAAA;YAAA,OAAK3B,EAAE,KAAKX,MAAM,CAACW,EAAE;UAAA,EAAC;UACjE,IAAM4B,UAAU,GAAG9B,KAAK,CAAC4B,WAAW,CAAC;UAErC,IAAID,OAAO,IAAI,IAAI,IAAIG,UAAU,IAAI,IAAI,EAAE;YACzC,IAAM;cAAE3B,KAAK,EAALA;YAAM,CAAC,GAAG1B,aAAa,CAC7BuB,KAAK,EACLT,MAAM,CAACW,EAAE,EACTiB,SAAS,EACT,CAACQ,OAAO,CAACxB,KAAK,GAAG2B,UAAU,CAAC3B,KAAK,IAAIhB,gBAAgB,EACrDA,gBACF,CAAC;YACD,IAAM4C,OAAO,GAAGP,QAAQ,GAAGI,WAAW;YACtC,IAAMI,QAAQ,GAAGD,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC;YACjC,IAAME,UAAU,GAAG/C,SAAS,GACxB,CAACO,aAAa,CAACyC,MAAM,GAAGb,UAAU,CAACa,MAAM,IAAI,CAAC,GAC9C,CAAC;YAEL,IAAMC,cAAc,GAAG;cACrB5B,CAAC,EAAEe,OAAO,CAACc,IAAI,GAAGjC,MAAK,GAAGhB,gBAAgB;cAC1CkD,CAAC,EAAEf,OAAO,CAACP,GAAG,GAAGiB,QAAQ,GAAGC;YAC9B,CAAC;YAED,OAAOE,cAAc;UACvB;QACF;MACF;IACF;IAEA,OAAO3B,SAAS;EAClB,CAAC;AACH"~~,"ignoreList":[]~~}
1	+ {"version":3,"file":"keyboardCoordinates.js","names":["closestCorners","getFirstCollision","KeyboardCode","getProjection","DIRECTIONS","Down","Right","Up","Left","HORIZONTAL","sortableTreeKeyboardCoordinates","context","indicator","indentationWidth","event","_ref","currentCoordinates","active","over","collisionRect","droppableRects","droppableContainers","includes","code","preventDefault","current","items","offset","id","depth","maxDepth","minDepth","_objectSpread","x","undefined","containers","forEach","container","disabled","rect","get","top","push","collisions","pointerCoordinates","closestId","length","activeRect","newRect","newDroppable","newIndex","findIndex","_ref2","newItem","activeIndex","_ref3","activeItem","isBelow","modifier","nextOffset","height","newCoordinates","left","y"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/keyboardCoordinates.ts"],"sourcesContent":["/* eslint-disable import/prefer-default-export /\nimport {\n closestCorners,\n getFirstCollision,\n KeyboardCode,\n type KeyboardCoordinateGetter,\n type DroppableContainer,\n} from '@dnd-kit/core';\nimport type { SensorContext } from './types';\nimport { getProjection } from './utilities';\n\nconst DIRECTIONS: string[] = [\n KeyboardCode.Down,\n KeyboardCode.Right,\n KeyboardCode.Up,\n KeyboardCode.Left,\n];\n\nconst HORIZONTAL: string[] = [KeyboardCode.Left, KeyboardCode.Right];\n\nexport function sortableTreeKeyboardCoordinates(\n context: SensorContext,\n indicator: boolean,\n indentationWidth: number\n): KeyboardCoordinateGetter {\n return (\n event,\n {\n currentCoordinates,\n context: {\n active,\n over,\n collisionRect,\n droppableRects,\n droppableContainers,\n },\n }\n ) => {\n if (DIRECTIONS.includes(event.code)) {\n if (!active \|\| !collisionRect) {\n return;\n }\n\n event.preventDefault();\n\n const {\n current: { items, offset },\n } = context;\n\n if (HORIZONTAL.includes(event.code) && over?.id != null) {\n const { depth, maxDepth, minDepth } = getProjection(\n items,\n active.id as string,\n over.id as string,\n offset,\n indentationWidth\n );\n\n switch (event.code) {\n case KeyboardCode.Left:\n if (depth > minDepth) {\n return {\n ...currentCoordinates,\n x: currentCoordinates.x - indentationWidth,\n };\n }\n break;\n case KeyboardCode.Right:\n if (depth < maxDepth) {\n return {\n ...currentCoordinates,\n x: currentCoordinates.x + indentationWidth,\n };\n }\n break;\n }\n\n return undefined;\n }\n\n const containers: DroppableContainer[] = [];\n\n droppableContainers.forEach(container => {\n if (container?.disabled \|\| container.id === over?.id) {\n return;\n }\n\n const rect = droppableRects.get(container.id);\n\n if (!rect) {\n return;\n }\n\n switch (event.code) {\n case KeyboardCode.Down:\n if (collisionRect.top < rect.top) {\n containers.push(container);\n }\n break;\n case KeyboardCode.Up:\n if (collisionRect.top > rect.top) {\n containers.push(container);\n }\n break;\n }\n });\n\n const collisions = closestCorners({\n active,\n collisionRect,\n pointerCoordinates: null,\n droppableRects,\n droppableContainers: containers,\n });\n let closestId = getFirstCollision(collisions, 'id');\n\n if (closestId === over?.id && collisions.length > 1) {\n closestId = collisions[1].id;\n }\n\n if (closestId != null && over?.id != null) {\n const activeRect = droppableRects.get(active.id);\n const newRect = droppableRects.get(closestId);\n const newDroppable = droppableContainers.get(closestId);\n\n if (activeRect && newRect && newDroppable) {\n const newIndex = items.findIndex(({ id }) => id === closestId);\n const newItem = items[newIndex];\n const activeIndex = items.findIndex(({ id }) => id === active.id);\n const activeItem = items[activeIndex];\n\n if (newItem != null && activeItem != null) {\n const { depth } = getProjection(\n items,\n active.id as string,\n closestId as string,\n (newItem.depth - activeItem.depth) indentationWidth,\n indentationWidth\n );\n const isBelow = newIndex > activeIndex;\n const modifier = isBelow ? 1 : -1;\n const nextOffset = indicator\n ? (collisionRect.height - activeRect.height) / 2\n : 0;\n\n const newCoordinates = {\n x: newRect.left + depth * indentationWidth,\n y: newRect.top + modifier * nextOffset,\n };\n\n return newCoordinates;\n }\n }\n }\n }\n\n return undefined;\n };\n}\n"],"mappings":"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"}

package/dist/sidebar/visibility-ordering-builder/sortable-tree/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","names":["isFlattenedTreeItem","item","parentId","undefined"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/types.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\n\nexport type TreeItem<T = undefined> = {\n id: string;\n children: TreeItem<T>[];\n selected: boolean;\n} & (T extends undefined\n ? // eslint-disable-next-line @typescript-eslint/ban-types\n {}\n : {\n data: T;\n });\n\nexport type TreeItems<T = undefined> = TreeItem<T>[];\nexport type ReadonlyTreeItems<T = undefined> = readonly TreeItem<T>[];\n\nexport type FlattenedItem<T = undefined> = TreeItem<T> & {\n parentId: string \| null;\n depth: number;\n index: number;\n};\n\nexport function isFlattenedTreeItem<T>(\n item: TreeItem<T>\n): item is FlattenedItem<T> {\n return (item as FlattenedItem<T>).parentId !== undefined;\n}\n\nexport type SensorContext = MutableRefObject<{\n items: FlattenedItem[];\n offset: number;\n}>;\n"],"mappings":"AAsBA,OAAO,SAASA,mBAAmBA,CACjCC,IAAiB,EACS;EAC1B,OAAQA,IAAI,CAAsBC,QAAQ,KAAKC,SAAS;AAC1D"~~,"ignoreList":[]~~}
1	+ {"version":3,"file":"types.js","names":["isFlattenedTreeItem","item","parentId","undefined"],"sources":["../../../../src/sidebar/visibility-ordering-builder/sortable-tree/types.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\n\nexport type TreeItem<T = undefined> = {\n id: string;\n children: TreeItem<T>[];\n selected: boolean;\n} & (T extends undefined\n ? // eslint-disable-next-line @typescript-eslint/ban-types\n {}\n : {\n data: T;\n });\n\nexport type TreeItems<T = undefined> = TreeItem<T>[];\nexport type ReadonlyTreeItems<T = undefined> = readonly TreeItem<T>[];\n\nexport type FlattenedItem<T = undefined> = TreeItem<T> & {\n parentId: string \| null;\n depth: number;\n index: number;\n};\n\nexport function isFlattenedTreeItem<T>(\n item: TreeItem<T>\n): item is FlattenedItem<T> {\n return (item as FlattenedItem<T>).parentId !== undefined;\n}\n\nexport type SensorContext = MutableRefObject<{\n items: FlattenedItem[];\n offset: number;\n}>;\n"],"mappings":"AAsBA,OAAO,SAASA,mBAAmBA,CACjCC,IAAiB,EACS;EAC1B,OAAQA,IAAI,CAAsBC,QAAQ,KAAKC,SAAS;AAC1D"}