npm - @ynput/ayon-frontend-shared - Versions diffs - 0.2.12 → 0.2.13 - Mend

@ynput/ayon-frontend-shared 0.2.12 → 0.2.13

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 (42) hide show

package/dist/shared/src/containers/ProjectTreeTable/ProjectTreeTable.styled.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProjectTreeTable.styled.es.js","sources":["../../../../../src/containers/ProjectTreeTable/ProjectTreeTable.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\n// Create shadow mixins to make combinations work properly\nconst topShadow = `inset 0 1px 0 0 var(--md-sys-color-primary)`\nconst rightShadow = `inset -1px 0 0 0 var(--md-sys-color-primary)`\nconst bottomShadow = `inset 0 -1px 0 0 var(--md-sys-color-primary)`\nconst leftShadow = `inset 1px 0 0 0 var(--md-sys-color-primary)`\n\nconst getDefaultShadow = (isLastPinned: boolean) => {\n const defaultShadow = `inset 1px -1px 0 0 var(--md-sys-color-surface-container)`\n const defaultShadowLastPinned = `inset -2px -1px 0 0 var(--md-sys-color-surface-container), inset 1px 0 0 0 var(--md-sys-color-surface-container)`\n return isLastPinned ? defaultShadowLastPinned : defaultShadow\n}\n\n// Use the known string literal for DRAG_HANDLE_COLUMN_ID to avoid import complexities here\nconst DRAG_HANDLE_CLASS = 'drag-handle'\n\nexport const TR = styled.tr`\n display: flex;\n position: absolute;\n width: 100%;\n\n &:hover {\n // When the row (TR) is hovered...\n // Target the button inside the drag handle cell to make it visible at 50% opacity.\n // This uses a more specific selector by including 'td' to ensure it correctly targets the cell.\n td.${DRAG_HANDLE_CLASS} button {\n opacity: 0.5;\n visibility: visible;\n }\n\n // When the row (TR) is hovered AND the button inside drag handle cell is also hovered...\n // Make the button 100% opacity. This selector is more specific and will override the above.\n td.${DRAG_HANDLE_CLASS} button:hover {\n opacity: 1;\n }\n }\n`\n\nexport const TableCellContent = styled.div`\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n height: 100%;\n width: 100%;\n padding: 0px 8px;\n border-radius: var(--border-radius-m);\n user-select: none;\n padding-right: 0;\n\n &.bold {\n font-weight: 600;\n }\n\n &.loading {\n margin: 0px 5px;\n padding: 0 !important;\n width: calc(100% - 10px);\n height: 28px;\n margin-top: 3px;\n\n &:not(.hierarchy) {\n height: 32px;\n }\n }\n\n &:focus-visible {\n outline: none;\n }\n`\n\nexport const ResizedHandler = styled.div`\n position: absolute;\n right: -1px;\n top: 0;\n bottom: 0;\n width: 6px;\n cursor: col-resize;\n background-color: var(--md-sys-color-surface-container-high);\n\n opacity: 0;\n\n &.resizing {\n background-color: var(--md-sys-color-primary);\n opacity: 1;\n }\n`\n\nexport const ColumnHeader = styled.tr`\n background-color: var(--md-sys-color-surface-container-low);\n`\n\nexport const HeaderCell = styled.th`\n position: relative;\n background-color: var(--md-sys-color-surface-container-lowest);\n box-shadow: inset 1px -1px 0 0 var(--md-sys-color-surface-container);\n display: flex;\n align-items: center;\n min-height: fit-content;\n\n &:hover {\n .resize-handle {\n opacity: 1;\n }\n }\n\n /* show action button /\n &:hover {\n .action {\n display: flex;\n }\n }\n\n / Styling for the last pinned left column /\n &.last-pinned-left {\n box-shadow: inset 1px -1px 0 0 var(--md-sys-color-surface-container),\n inset -2px 0 0 0 var(--md-sys-color-surface-container);\n }\n\n / special styles for the left selection column /\n &.__row_selection__ {\n min-width: unset;\n width: 20px !important;\n\n .actions {\n display: none;\n }\n }\n`\n\nexport const HeaderButtons = styled.div`\n display: flex;\n gap: var(--base-gap-small);\n\n position: absolute;\n z-index: 10;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n`\n\ntype TableCellProps = {\n $isLastPinned?: boolean\n}\n\nexport const TableCell = styled.td<TableCellProps>`\n position: relative;\n box-shadow: ${getDefaultShadow(false)};\n background-color: var(--md-sys-color-surface-container-low);\n\n &.${DRAG_HANDLE_CLASS} {\n // Styles for the button inside the drag handle cell\n button {\n opacity: 0; // Default: hidden\n visibility: hidden;\n transition: opacity 0.2s ease, visibility 0.2s ease;\n // Base appearance styles (cursor, border, background, etc.)\n // are primarily handled by inline styles in RowDragHandleCellContent.tsx.\n // Add any necessary overrides or defaults here if needed.\n // For example, ensuring the button itself doesn't interfere with cell styling:\n background: transparent;\n border: none;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n }\n }\n\n &.task {\n background-color: hsl(216 15% 11.5% / 1);\n }\n\n &.selected-row {\n background-color: var(--md-sys-color-surface-container-high);\n }\n\n &.selected {\n background-color: var(--md-sys-color-secondary-container);\n position: relative;\n z-index: 1;\n }\n\n / remove default focus style /\n &:focus-visible {\n outline: none;\n }\n\n / Styling for the last pinned left column /\n / extra border on the right /\n &.last-pinned-left {\n box-shadow: inset 1px -1px 0 0 var(--md-sys-color-surface-container),\n inset -2px 0 0 0 var(--md-sys-color-surface-container);\n }\n\n / Shadow combinations - single side /\n &.shadow-top:not(.shadow-right):not(.shadow-bottom):not(.shadow-left) {\n box-shadow: ${topShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n &.shadow-right:not(.shadow-top):not(.shadow-bottom):not(.shadow-left) {\n box-shadow: ${rightShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n &.shadow-bottom:not(.shadow-top):not(.shadow-right):not(.shadow-left) {\n box-shadow: ${bottomShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n &.shadow-left:not(.shadow-top):not(.shadow-right):not(.shadow-bottom) {\n box-shadow: ${leftShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n / Two sides /\n &.shadow-top.shadow-right:not(.shadow-bottom):not(.shadow-left) {\n box-shadow: ${topShadow}, ${rightShadow},\n ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n &.shadow-top.shadow-bottom:not(.shadow-right):not(.shadow-left) {\n box-shadow: ${topShadow}, ${bottomShadow},\n ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n &.shadow-top.shadow-left:not(.shadow-right):not(.shadow-bottom) {\n box-shadow: ${topShadow}, ${leftShadow},\n ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n &.shadow-right.shadow-bottom:not(.shadow-top):not(.shadow-left) {\n box-shadow: ${rightShadow}, ${bottomShadow},\n ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n &.shadow-right.shadow-left:not(.shadow-top):not(.shadow-bottom) {\n box-shadow: ${rightShadow}, ${leftShadow},\n ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n &.shadow-bottom.shadow-left:not(.shadow-top):not(.shadow-right) {\n box-shadow: ${bottomShadow}, ${leftShadow},\n ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n / Three sides /\n &.shadow-top.shadow-right.shadow-bottom:not(.shadow-left) {\n box-shadow: ${topShadow}, ${rightShadow}, ${bottomShadow},\n ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n &.shadow-top.shadow-right.shadow-left:not(.shadow-bottom) {\n box-shadow: ${topShadow}, ${rightShadow}, ${leftShadow},\n ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n &.shadow-top.shadow-bottom.shadow-left:not(.shadow-right) {\n box-shadow: ${topShadow}, ${bottomShadow}, ${leftShadow},\n ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n &.shadow-right.shadow-bottom.shadow-left:not(.shadow-top) {\n box-shadow: ${rightShadow}, ${bottomShadow}, ${leftShadow},\n ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n / All four sides /\n &.shadow-top.shadow-right.shadow-bottom.shadow-left {\n box-shadow: ${topShadow}, ${rightShadow}, ${bottomShadow}, ${leftShadow},\n ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n / Focus styling /\n &.focused {\n position: relative;\n z-index: 2;\n }\n\n / Use pseudo-element for focused outline to avoid box-shadow conflicts /\n &.focused::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid var(--md-sys-color-primary);\n pointer-events: none;\n }\n\n &.editing {\n z-index: 10 !important;\n / light border around the outside /\n &::before {\n content: '';\n position: absolute;\n inset: 2px;\n border: 2px solid var(--md-sys-color-surface-container-low);\n }\n }\n\n / special styles for selection bar cells /\n &.__row_selection__ {\n width: 20px !important;\n min-width: unset;\n\n &.selected {\n background-color: var(--md-sys-color-primary-container) !important;\n box-shadow: none !important;\n / reveal the check mark */\n [icon='check'] {\n display: block;\n }\n }\n }\n`\n\nexport const TableHeader = styled.thead`\n display: grid !important;\n position: sticky;\n top: 0;\n min-height: 34px;\n z-index: 10;\n background-color: var(--md-sys-color-surface-container-lowest);\n`\n\nexport const TableWrapper = styled.div`\n overflow: hidden;\n position: absolute;\n inset: 0;\n border-radius: var(--border-radius-m);\n\n background-color: var(--md-sys-color-surface-container-low);\n`\n\nexport const TableContainer = styled.div`\n display: flex;\n\n height: 100%;\n width: 100%;\n overflow: auto;\n padding: 4px;\n padding-top: 0;\n\n &.isLoading {\n overflow: hidden;\n }\n\n table {\n height: fit-content;\n width: 100%;\n display: grid;\n }\n\n thead {\n display: none;\n }\n\n tbody {\n position: relative;\n display: grid;\n }\n\n td {\n height: 34px;\n padding: 1px 0px;\n width: 100%;\n }\n`\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ProjectTreeTable.styled.es.js","sources":["../../../../../src/containers/ProjectTreeTable/ProjectTreeTable.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\n// Create shadow mixins to make combinations work properly\nconst topShadow = `inset 0 1px 0 0 var(--md-sys-color-primary)`\nconst rightShadow = `inset -1px 0 0 0 var(--md-sys-color-primary)`\nconst bottomShadow = `inset 0 -1px 0 0 var(--md-sys-color-primary)`\nconst leftShadow = `inset 1px 0 0 0 var(--md-sys-color-primary)`\n\nconst getDefaultShadow = (isLastPinned: boolean) => {\n const defaultShadow = `inset 1px -1px 0 0 var(--md-sys-color-surface-container)`\n const defaultShadowLastPinned = `inset -2px -1px 0 0 var(--md-sys-color-surface-container), inset 1px 0 0 0 var(--md-sys-color-surface-container)`\n return isLastPinned ? defaultShadowLastPinned : defaultShadow\n}\n\n// Use the known string literal for DRAG_HANDLE_COLUMN_ID to avoid import complexities here\nconst DRAG_HANDLE_CLASS = 'drag-handle'\n\nexport const TR = styled.tr`\n display: flex;\n position: absolute;\n width: 100%;\n\n &:hover {\n // When the row (TR) is hovered...\n // Target the button inside the drag handle cell to make it visible at 50% opacity.\n // This uses a more specific selector by including 'td' to ensure it correctly targets the cell.\n td.${DRAG_HANDLE_CLASS} button {\n opacity: 0.5;\n visibility: visible;\n }\n\n // When the row (TR) is hovered AND the button inside drag handle cell is also hovered...\n // Make the button 100% opacity. This selector is more specific and will override the above.\n td.${DRAG_HANDLE_CLASS} button:hover {\n opacity: 1;\n }\n }\n`\n\nexport const TableCellContent = styled.div`\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n height: 100%;\n width: 100%;\n padding: 0px 8px;\n overflow: hidden;\n white-space: nowrap;\n border-radius: var(--border-radius-m);\n user-select: none;\n padding-right: 0;\n\n &.bold {\n font-weight: 600;\n }\n\n &.loading {\n margin: 0px 5px;\n padding: 0 !important;\n width: calc(100% - 10px);\n height: 28px;\n margin-top: 3px;\n\n &:not(.hierarchy) {\n height: 32px;\n }\n }\n\n &:focus-visible {\n outline: none;\n }\n`\n\nexport const ResizedHandler = styled.div`\n position: absolute;\n right: -1px;\n top: 0;\n bottom: 0;\n width: 6px;\n cursor: col-resize;\n background-color: var(--md-sys-color-surface-container-high);\n\n opacity: 0;\n\n &.resizing {\n background-color: var(--md-sys-color-primary);\n opacity: 1;\n }\n`\n\nexport const ColumnHeader = styled.tr`\n background-color: var(--md-sys-color-surface-container-low);\n`\n\nexport const HeaderCell = styled.th`\n position: relative;\n background-color: var(--md-sys-color-surface-container-lowest);\n box-shadow: inset 1px -1px 0 0 var(--md-sys-color-surface-container);\n display: flex;\n align-items: center;\n min-height: fit-content;\n\n &:hover {\n .resize-handle {\n opacity: 1;\n }\n }\n\n /* show action button /\n &:hover {\n .action {\n display: flex;\n }\n }\n\n / Styling for the last pinned left column /\n &.last-pinned-left {\n box-shadow: inset 1px -1px 0 0 var(--md-sys-color-surface-container),\n inset -2px 0 0 0 var(--md-sys-color-surface-container);\n }\n\n / special styles for the left selection column /\n &.__row_selection__ {\n min-width: unset;\n width: 20px !important;\n\n .actions {\n display: none;\n }\n }\n`\n\nexport const HeaderButtons = styled.div`\n display: flex;\n gap: var(--base-gap-small);\n\n position: absolute;\n z-index: 10;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n`\n\ntype TableCellProps = {\n $isLastPinned?: boolean\n}\n\nexport const TableCell = styled.td<TableCellProps>`\n position: relative;\n box-shadow: ${getDefaultShadow(false)};\n background-color: var(--md-sys-color-surface-container-low);\n\n &.${DRAG_HANDLE_CLASS} {\n // Styles for the button inside the drag handle cell\n button {\n opacity: 0; // Default: hidden\n visibility: hidden;\n transition: opacity 0.2s ease, visibility 0.2s ease;\n // Base appearance styles (cursor, border, background, etc.)\n // are primarily handled by inline styles in RowDragHandleCellContent.tsx.\n // Add any necessary overrides or defaults here if needed.\n // For example, ensuring the button itself doesn't interfere with cell styling:\n background: transparent;\n border: none;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n }\n }\n\n &.task {\n background-color: hsl(216 15% 11.5% / 1);\n }\n\n &.selected-row {\n background-color: var(--md-sys-color-surface-container-high);\n }\n\n &.selected {\n background-color: var(--md-sys-color-secondary-container);\n position: relative;\n z-index: 1;\n }\n\n / remove default focus style /\n &:focus-visible {\n outline: none;\n }\n\n / Styling for the last pinned left column /\n / extra border on the right /\n &.last-pinned-left {\n box-shadow: inset 1px -1px 0 0 var(--md-sys-color-surface-container),\n inset -2px 0 0 0 var(--md-sys-color-surface-container);\n }\n\n / Shadow combinations - single side /\n &.shadow-top:not(.shadow-right):not(.shadow-bottom):not(.shadow-left) {\n box-shadow: ${topShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n &.shadow-right:not(.shadow-top):not(.shadow-bottom):not(.shadow-left) {\n box-shadow: ${rightShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n &.shadow-bottom:not(.shadow-top):not(.shadow-right):not(.shadow-left) {\n box-shadow: ${bottomShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n &.shadow-left:not(.shadow-top):not(.shadow-right):not(.shadow-bottom) {\n box-shadow: ${leftShadow}, ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n / Two sides /\n &.shadow-top.shadow-right:not(.shadow-bottom):not(.shadow-left) {\n box-shadow: ${topShadow}, ${rightShadow},\n ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n &.shadow-top.shadow-bottom:not(.shadow-right):not(.shadow-left) {\n box-shadow: ${topShadow}, ${bottomShadow},\n ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n &.shadow-top.shadow-left:not(.shadow-right):not(.shadow-bottom) {\n box-shadow: ${topShadow}, ${leftShadow},\n ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n &.shadow-right.shadow-bottom:not(.shadow-top):not(.shadow-left) {\n box-shadow: ${rightShadow}, ${bottomShadow},\n ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n &.shadow-right.shadow-left:not(.shadow-top):not(.shadow-bottom) {\n box-shadow: ${rightShadow}, ${leftShadow},\n ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n &.shadow-bottom.shadow-left:not(.shadow-top):not(.shadow-right) {\n box-shadow: ${bottomShadow}, ${leftShadow},\n ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n / Three sides /\n &.shadow-top.shadow-right.shadow-bottom:not(.shadow-left) {\n box-shadow: ${topShadow}, ${rightShadow}, ${bottomShadow},\n ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n &.shadow-top.shadow-right.shadow-left:not(.shadow-bottom) {\n box-shadow: ${topShadow}, ${rightShadow}, ${leftShadow},\n ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n &.shadow-top.shadow-bottom.shadow-left:not(.shadow-right) {\n box-shadow: ${topShadow}, ${bottomShadow}, ${leftShadow},\n ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n &.shadow-right.shadow-bottom.shadow-left:not(.shadow-top) {\n box-shadow: ${rightShadow}, ${bottomShadow}, ${leftShadow},\n ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n / All four sides /\n &.shadow-top.shadow-right.shadow-bottom.shadow-left {\n box-shadow: ${topShadow}, ${rightShadow}, ${bottomShadow}, ${leftShadow},\n ${({ $isLastPinned }) => getDefaultShadow($isLastPinned \|\| false)};\n }\n\n / Focus styling /\n &.focused {\n position: relative;\n z-index: 2;\n }\n\n / Use pseudo-element for focused outline to avoid box-shadow conflicts /\n &.focused::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid var(--md-sys-color-primary);\n pointer-events: none;\n }\n\n &.editing {\n z-index: 10 !important;\n / light border around the outside /\n &::before {\n content: '';\n position: absolute;\n inset: 2px;\n border: 2px solid var(--md-sys-color-surface-container-low);\n }\n }\n\n / special styles for selection bar cells /\n &.__row_selection__ {\n width: 20px !important;\n min-width: unset;\n\n &.selected {\n background-color: var(--md-sys-color-primary-container) !important;\n box-shadow: none !important;\n / reveal the check mark */\n [icon='check'] {\n display: block;\n }\n }\n }\n`\n\nexport const TableHeader = styled.thead`\n display: grid !important;\n position: sticky;\n top: 0;\n min-height: 34px;\n z-index: 10;\n background-color: var(--md-sys-color-surface-container-lowest);\n`\n\nexport const TableWrapper = styled.div`\n overflow: hidden;\n position: absolute;\n inset: 0;\n border-radius: var(--border-radius-m);\n\n background-color: var(--md-sys-color-surface-container-low);\n`\n\nexport const TableContainer = styled.div`\n display: flex;\n\n height: 100%;\n width: 100%;\n overflow: auto;\n padding: 4px;\n padding-top: 0;\n\n &.isLoading {\n overflow: hidden;\n }\n\n table {\n height: fit-content;\n width: 100%;\n display: grid;\n }\n\n thead {\n display: none;\n }\n\n tbody {\n position: relative;\n display: grid;\n }\n\n td {\n height: 34px;\n padding: 1px 0px;\n width: 100%;\n }\n`\n"],"names":[],"mappings":"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"}