@kentico/xperience-admin-components 14.0.0-109224

package/dist/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export { useHandleClickOutside } from './useHandleClickOutside';
+export { useFocusElementOnMount } from './useFocusElementOnMount';
+export { useScrollToElementOnMount } from './useScrollToElementOnMount';
+export { useWindowDimensions } from './useWindowDimensions';
+export { useOnScreenDetect } from './useOnScreenDetect';
+export { useMediaBreakpoints } from './useMediaBreakpoints';

package/dist/hooks/useComponent.d.ts

@@ -0,0 +1 @@
+export declare function useComponent(component: string): any;

package/dist/hooks/useFocusElementOnMount.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare const useFocusElementOnMount: (ref: RefObject<HTMLElement>) => void;

package/dist/hooks/useHandleClickOutside.d.ts

@@ -0,0 +1 @@
+export declare const useHandleClickOutside: (ref: React.RefObject<HTMLElement>, onClickOutside: (event: MouseEvent) => void) => void;

package/dist/hooks/useMediaBreakpoints.d.ts

@@ -0,0 +1,5 @@
+export declare const useMediaBreakpoints: () => {
+    sm: boolean;
+    md: boolean;
+    lg: boolean;
+};

package/dist/hooks/useOnScreenDetect.d.ts

@@ -0,0 +1 @@
+export declare const useOnScreenDetect: (ref: React.RefObject<HTMLElement>) => boolean;

package/dist/hooks/useScrollToElementOnMount.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare const useScrollToElementOnMount: (ref: RefObject<HTMLElement>, args?: boolean | ScrollIntoViewOptions) => void;

package/dist/hooks/useSliceOverflowingItems.d.ts

@@ -0,0 +1,22 @@
+import { RefObject } from 'react';
+export declare const getLast: <T>(array: readonly T[]) => T;
+export declare type SliceFrom = 'Beginning' | 'End';
+declare type VisibleItemId = number | string;
+export declare const sliceItems: <TItem>(allItems: readonly TItem[], lastVisibleIndex: number | null, sliceFrom: SliceFrom) => [visibleItems: readonly TItem[], hiddenItems: readonly TItem[]];
+export declare function getLastVisibleIndex(thresholdWidth: number, itemsWidthAcc: ReadonlyArray<number>): number | null;
+export declare type AttachVisibleItemRefCallback = (itemId: VisibleItemId) => any;
+interface OverflowingItemsInfo<TItem> {
+    readonly attachVisibleItemRef: AttachVisibleItemRefCallback;
+    readonly visibleItems: ReadonlyArray<TItem>;
+    readonly hiddenItems: ReadonlyArray<TItem>;
+}
+/**
+ * Determines whether list of items can fit into container element, or which items should be hidden because of overflow.
+ *
+ * @param allItems List of all items, which can be hidden.
+ * @param containerRef Ref of container element used for available width computation.
+ * @param sliceFrom Whether hide items from start or end.
+ * @returns OverflowingItemsInfo Object with items which should be visible, hidden, and function for list item refs.
+ */
+export declare const useSliceOverflowingItems: <TItem>(allItems: readonly TItem[], containerRef: RefObject<HTMLElement>, sliceFrom: SliceFrom, hiddenAll?: boolean) => OverflowingItemsInfo<TItem>;
+export {};

package/dist/hooks/useWindowDimensions.d.ts

@@ -0,0 +1,4 @@
+export declare const useWindowDimensions: () => {
+    width: number;
+    height: number;
+};

package/dist/tokens/borderRadius.d.ts

@@ -0,0 +1,6 @@
+export declare enum BorderRadius {
+    RadiusL = "16px",
+    RadiusM = "8px",
+    RadiusS = "4px",
+    RadiusPill = "5000px"
+}

package/dist/tokens/colors.d.ts

@@ -0,0 +1,87 @@
+export declare enum Colors {
+    AlertActive = "var(--color-alert-active)",
+    AlertBackgroundHighEmphasis = "var(--color-alert-background-high-emphasis)",
+    AlertBackgroundLowEmphasis = "var(--color-alert-background-low-emphasis)",
+    AlertFocus = "var(--color-alert-focus)",
+    AlertHover = "var(--color-alert-hover)",
+    AlertIcon = "var(--color-alert-icon)",
+    AlertText = "var(--color-alert-text)",
+    BackgroundDisabled = "var(--color-background-disabled)",
+    BackgroundDragged = "var(--color-background-dragged)",
+    BackgroundHighlighted = "var(--color-background-highlighted)",
+    BackgroundHover = "var(--color-background-hover)",
+    BackgroundSelected = "var(--color-background-selected)",
+    BackgroundSelectedHover = "var(--color-background-selected-hover)",
+    BaritemHeaderBackground = "var(--color-baritem-header-background)",
+    BorderActive = "var(--color-border-active)",
+    BorderAlert = "var(--color-border-alert)",
+    BorderDefault = "var(--color-border-default)",
+    BorderDisabled = "var(--color-border-disabled)",
+    BorderHover = "var(--color-border-hover)",
+    CommentBackgroundHighlighted = "var(--color-comment-background-highlighted)",
+    CommentBackgroundSelected = "var(--color-comment-background-selected)",
+    DividerDefault = "var(--color-divider-default)",
+    Focus = "var(--color-focus)",
+    FocusLight = "var(--color-focus-light)",
+    IconDefault = "var(--color-icon-default)",
+    IconDefaultOnDark = "var(--color-icon-default-on-dark)",
+    IconDisabled = "var(--color-icon-disabled)",
+    IconHighlighted = "var(--color-icon-highlighted)",
+    IconLargeDefault = "var(--color-icon-large-default)",
+    IconLowEmphasis = "var(--color-icon-low-emphasis)",
+    InfoBackgroundHighEmphasis = "var(--color-info-background-high-emphasis)",
+    InfoBackgroundLowEmphasis = "var(--color-info-background-low-emphasis)",
+    InfoIcon = "var(--color-info-icon)",
+    InfoText = "var(--color-info-text)",
+    InputBackground = "var(--color-input-background)",
+    InputBorder = "var(--color-input-border)",
+    Link = "var(--color-link)",
+    LinkHover = "var(--color-link-hover)",
+    OverlayBackground = "var(--color-overlay-background)",
+    PaperBorder = "var(--color-paper-border)",
+    PaperBackground = "var(--color-paper-background)",
+    Product = "var(--color-product)",
+    ProductDisabled = "var(--color-product-disabled)",
+    ProductHover = "var(--color-product-hover)",
+    ProductHoverComplementary = "var(--color-product-hover-complementary)",
+    ProductSelected = "var(--color-product-selected)",
+    ProductSelectedHover = "var(--color-product-selected-hover)",
+    GradientProduct = "var(--gradient-product)",
+    GradientProductHover = "var(--gradient-product-hover)",
+    GradientBackgroundDesk = "var(--gradient-background-desk)",
+    GradientBlueDark = "var(--color-gradient-blue-dark)",
+    ShalfBackground = "var(--color-shelf-background)",
+    SkeletonBackground = "var(--color-skeleton-background)",
+    SkeletonContent = "var(--color-skeleton-content)",
+    SuccessIcon = "var(--color-success-icon)",
+    SuccessText = "var(--color-success-text)",
+    SuggestionBackgroundHighlighted = "var(--color-suggestion-background-highlighted)",
+    SuggestionBackgroundSelected = "var(--color-suggestion-background-selected)",
+    SwitchOffBackground = "var(--color-switch-off-background)",
+    SwitchOnDisabledBackground = "var(--color-switch-on-disabled-background)",
+    SwitchOffBackgroundHovered = "var(--color-switch-off-background-hovered)",
+    DefaultOnDark = "var(--color-default-on-dark)",
+    TextDefaultOnLight = "var(--color-text-default-on-light)",
+    TextDefaultOnDark = "var(--color-text-default-on-dark)",
+    TextDisabled = "var(--color-text-disabled)",
+    TextHint = "var(--color-text-hint)",
+    TextHighEmphasis = "var(--color-text-high-emphasis)",
+    TextLowEmphasis = "var(--color-text-low-emphasis)",
+    ToggleIcon = "var(--color-toggle-icon)",
+    ToggleIconSelected = "var(--color-toggle-icon-selected)",
+    ToggleIconHover = "var(--color-toggle-icon-hover)",
+    ToggleText = "var(--color-toggle-text)",
+    ToggleTextSelected = "var(--color-toggle-text-selected)",
+    ToggleTextHover = "var(--color-toggle-text-hover)",
+    TabIcon = "var(--color-tab-icon)",
+    TabIconHover = "var(--color-tab-icon-hover)",
+    TabIconSelected = "var(--color-tab-icon-selected)",
+    TabText = "var(--color-tab-text)",
+    TabTextHover = "var(--color-tab-text-hover)",
+    TabTextSelected = "var(--color-tab-text-selected)",
+    WarningBackgroundHighEmphasis = "var(--color-warning-background-high-emphasis)",
+    WarningBackgroundLowEmphasis = "var(--color-warning-background-low-emphasis)",
+    WarningIcon = "var(--color-warning-icon)",
+    WarningText = "var(--color-warning-text)",
+    ComposeGuardColor = "var(--compose-guard-color)"
+}

package/dist/tokens/dimensions.d.ts

@@ -0,0 +1,5 @@
+export declare enum Dimensions {
+    GridUnit = "8px",
+    SelectableAssetTileMaxWidth = "218px",
+    PreviewAssetTileMaxWidth = "323px"
+}

package/dist/tokens/gradientUtils.d.ts

@@ -0,0 +1,9 @@
+import { Gradients } from '.';
+export declare abstract class GradientUtils {
+    private static readonly GradientNameByValue;
+    private static GetGradientNameByValue;
+    /**
+     * Returns true if gradient is considered as dark; otherwise false
+     */
+    static GradientIsDark(gradient: Gradients): boolean;
+}

package/dist/tokens/gradients.d.ts

@@ -0,0 +1,26 @@
+export declare enum Gradients {
+    CoolGrayDark = "var(--gradient-cool-gray-dark)",
+    GrayDark = "var(--gradient-gray-dark)",
+    KenticoOrangeDark = "var(--gradient-kentico-orange-dark)",
+    RedDark = "var(--gradient-red-dark)",
+    YellowDark = "var(--gradient-yellow-dark)",
+    NavyBlueDark = "var(--gradient-navy-blue-dark)",
+    NeonGreenDark = "var(--gradient-neon-green-dark)",
+    PersianGreenDark = "var(--gradient-persian-green-dark)",
+    SkyBlueDark = "var(--gradient-sky-blue-dark)",
+    XperienceBlueDark = "var(--gradient-xperience-blue-dark)",
+    PurpleDark = "var(--gradient-purple-dark)",
+    RoseDark = "var(--gradient-rose-dark)",
+    CoolGrayLight = "var(--gradient-cool-gray-light)",
+    GrayLight = "var(--gradient-gray-light)",
+    KenticoOrangeLight = "var(--gradient-kentico-orange-light)",
+    RedLight = "var(--gradient-red-light)",
+    YellowLight = "var(--gradient-yellow-light)",
+    NavyBlueLight = "var(--gradient-navy-blue-light)",
+    NeonGreenLight = "var(--gradient-neon-green-light)",
+    PersianGreenLight = "var(--gradient-persian-green-light)",
+    SkyBlueLight = "var(--gradient-sky-blue-light)",
+    XperienceBlueLight = "var(--gradient-xperience-blue-light)",
+    PurpleLight = "var(--gradient-purple-light)",
+    RoseLight = "var(--gradient-rose-light)"
+}

package/dist/tokens/iconSize.d.ts

@@ -0,0 +1,8 @@
+export declare enum IconSize {
+    XXS = "8px",
+    XS = "12px",
+    S = "16px",
+    M = "20px",
+    L = "24px",
+    XL = "32px"
+}

package/dist/tokens/index.d.ts

@@ -0,0 +1,8 @@
+export * from './colors';
+export * from './dimensions';
+export * from './spacing';
+export * from './borderRadius';
+export * from './iconSize';
+export * from './gradients';
+export * from './zindex';
+export * from './mediaBreakpoints';

package/dist/tokens/mediaBreakpoints.d.ts

@@ -0,0 +1,8 @@
+export declare enum MediaBreakpoints {
+    SmMax = "1365.98px",
+    MdMin = "1366px",
+    MdMax = "1919.98px",
+    LgMin = "1920px",
+    DesktopMin = "600px",
+    MobileMax = "599.98px"
+}

package/dist/tokens/spacing.d.ts

@@ -0,0 +1,11 @@
+export declare enum Spacing {
+    Micro = "1px",
+    XS = "4px",
+    S = "8px",
+    M = "12px",
+    L = "16px",
+    XL = "24px",
+    XXL = "32px",
+    XXXL = "40px",
+    XXXXL = "48px"
+}

package/dist/tokens/zindex.d.ts

@@ -0,0 +1,15 @@
+export declare enum Zindex {
+    Hidden = "-1",
+    Visible = "0",
+    Elevated = "1",
+    Rte = "10",
+    RtePopup = "20",
+    Dropdown = "100",
+    Statusbar = "1000",
+    StickyHeader = "200",
+    Sidepanel = "4000",
+    AppMenu = "2000",
+    Dialog = "3000",
+    Snackbar = "6000",
+    Tooltip = "5000"
+}

package/dist/utils/generateId.d.ts

@@ -0,0 +1 @@
+export declare const generateId: () => string;

package/dist/utils/getDataAndAccessibilityProps.d.ts

@@ -0,0 +1,5 @@
+declare type PropType = {
+    [key: string]: any;
+};
+export declare function getDataAndAccessibilityProps(props: PropType): PropType;
+export {};

package/dist/utils/isTextElementHorizontallyOverflowing.d.ts

@@ -0,0 +1 @@
+export declare const isTextElementHorizontallyOverflowing: (element: HTMLElement | undefined | null) => boolean;

package/dist/utils/isTextElementVerticallyOverflowing.d.ts

@@ -0,0 +1 @@
+export declare const isTextElementVerticallyOverflowing: (element: HTMLElement | undefined | null) => boolean;

package/dist/utils/loadModule.d.ts

@@ -0,0 +1,10 @@
+declare type ModuleLoaderResultType = Promise<{
+    default: any;
+}>;
+declare type ModuleLoaderType = (packageName: string, importName: string) => ModuleLoaderResultType;
+/**
+ * Loads external module based on fully qualified path in format:
+ * @scope/project/Component (e.g @kentico/xperience-admin-base/Listing)
+ */
+export declare const loadModule: (fileName: string, moduleLoader?: ModuleLoaderType | undefined) => ModuleLoaderResultType;
+export {};

package/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "@kentico/xperience-admin-components",
+  "version": "14.0.0-109224",
+  "main": "dist/entry.js",
+  "types": "dist/entry.d.ts",
+  "files": [
+    "dist"
+  ],
+  "description": "Kentico Xperience administration components library.",
+  "keywords": [
+    "kentico",
+    "xperience",
+    "administration",
+    "admin",
+    "components"
+  ],
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "dependencies": {
+    "@react-aria/focus": "^3.5.0",
+    "@react-aria/interactions": "^3.7.0",
+    "@react-aria/radio": "^3.1.6",
+    "@react-aria/switch": "^3.1.5",
+    "@react-aria/overlays": "^3.7.3",
+    "@react-aria/visually-hidden": "^3.2.3",
+    "@react-stately/radio": "^3.3.2",
+    "@react-stately/toggle": "^3.2.5",
+    "@tippyjs/react": "^4.2.6",
+    "@types/react-datepicker": "^4.3.4",
+    "classnames": "^2.3.1",
+    "froala-editor": "4.0.9",
+    "history": "^5.2.0",
+    "react": "^17.0.2",
+    "react-beautiful-dnd": "^13.1.0",
+    "react-datepicker": "^4.6.0",
+    "react-dom": "^17.0.2",
+    "react-froala-wysiwyg": "4.0.9",
+    "react-modal": "^3.14.4",
+    "react-router-dom": "6.2.1",
+    "react-textarea-autosize": "^8.3.3",
+    "use-resize-observer": "8.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.2",
+    "@babel/eslint-parser": "^7.17.0",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
+    "@babel/runtime": "^7.17.2",
+    "@svgr/cli": "^6.2.1",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@types/jest": "^27.4.0",
+    "@types/react": "^17.0.39",
+    "@types/react-beautiful-dnd": "^13.1.2",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-modal": "^3.13.1",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/systemjs": "^6.1.1",
+    "@types/webpack-env": "^1.16.3",
+    "autoprefixer": "^10.4.2",
+    "babel-loader": "8.2.3",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.6.0",
+    "eslint": "^8.9.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-ts-react-important-stuff": "^3.0.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.28.0",
+    "file-loader": "^6.2.0",
+    "glob": "^7.2.0",
+    "jest": "^27.5.1",
+    "jest-junit": "^13.0.0",
+    "plop": "^3.0.5",
+    "postcss": "^8.4.6",
+    "postcss-loader": "^6.2.1",
+    "prettier": "^2.5.1",
+    "react-test-renderer": "^17.0.2",
+    "resolve-url-loader": "^5.0.0",
+    "sass": "^1.49.7",
+    "style-loader": "^3.3.1",
+    "ts-jest": "^27.1.3",
+    "typescript": "^4.5.5",
+    "typescript-plugin-css-modules": "^3.4.0",
+    "webpack": "^5.68.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4",
+    "webpack-merge": "^5.8.0",
+    "yargs": "^17.3.1"
+  },
+  "scripts": {
+    "start": "webpack serve --mode development",
+    "build-icons": "svgr --out-dir src/components/Icons/components src/components/Icons/svg",
+    "dev:remote": "webpack serve --mode development --env remote",
+    "build": "webpack --mode=production",
+    "declaration": "tsc --project tsconfig.declaration.json",
+    "typecheck": "tsc --noEmit",
+    "analyze": "webpack --mode=production --env.analyze=true",
+    "test": "cross-env BABEL_ENV=test jest --passWithNoTests",
+    "new-component": "plop component",
+    "generate-css-variable-types": "node src/utils/css-var-typing --path src/styles/*.export.scss --result src/tokens",
+    "test-css-variable-types": "node src/utils/css-var-typing --path src/styles/*.export.scss --result src/tokens --test",
+    "generate-token-enums": "node src/utils/enum-generator --configPath ./src/tokens/enumGenerator.cofig.json",
+    "test-token-enums": "node src/utils/enum-generator --configPath ./src/tokens/enumGenerator.cofig.json --test"
+  }
+}