carbon-react 104.34.0 → 104.36.0

package/esm/hooks/__internal__/useScrollBlock/scroll-block-manager.d.ts

@@ -0,0 +1,10 @@
+export default ScrollBlockManager;
+declare class ScrollBlockManager {
+    components: any;
+    originalValues: any;
+    registerComponent(id: any): void;
+    unregisterComponent(id: any): void;
+    saveOriginalValues(values: any): void;
+    getOriginalValues(): any;
+    isBlocked(): boolean;
+}

package/esm/hooks/__internal__/useScrollBlock/scroll-block-manager.js

@@ -0,0 +1,55 @@
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+let ScrollBlockManager = /*#__PURE__*/function () {
+  function ScrollBlockManager() {
+    _classCallCheck(this, ScrollBlockManager);
+
+    // Due to possibility of multiple carbon versions using it
+    // it is necessary to maintain same structure in this global variable
+    if (!window.__CARBON_INTERNALS_SCROLL_BLOCKERS) {
+      window.__CARBON_INTERNALS_SCROLL_BLOCKERS = {
+        components: {},
+        originalValues: []
+      };
+    }
+
+    this.components = window.__CARBON_INTERNALS_SCROLL_BLOCKERS.components;
+    this.originalValues = window.__CARBON_INTERNALS_SCROLL_BLOCKERS.originalValues;
+  }
+
+  _createClass(ScrollBlockManager, [{
+    key: "registerComponent",
+    value: function registerComponent(id) {
+      this.components[id] = true;
+    }
+  }, {
+    key: "unregisterComponent",
+    value: function unregisterComponent(id) {
+      delete this.components[id];
+    }
+  }, {
+    key: "saveOriginalValues",
+    value: function saveOriginalValues(values) {
+      this.originalValues.length = 0;
+      this.originalValues.push(...values);
+    }
+  }, {
+    key: "getOriginalValues",
+    value: function getOriginalValues() {
+      return this.originalValues;
+    }
+  }, {
+    key: "isBlocked",
+    value: function isBlocked() {
+      return Object.entries(this.components).length !== 0;
+    }
+  }]);
+
+  return ScrollBlockManager;
+}();
+
+export default ScrollBlockManager;

package/esm/hooks/__internal__/useScrollBlock/useScrollBlock.d.ts

@@ -0,0 +1,5 @@
+export default useScrollBlock;
+declare function useScrollBlock(): {
+    blockScroll: () => void;
+    allowScroll: () => void;
+};

package/esm/hooks/__internal__/useScrollBlock/useScrollBlock.js

@@ -0,0 +1,82 @@
+import { useRef, useCallback, useMemo } from "react";
+import guid from "../../../__internal__/utils/helpers/guid";
+import ScrollBlockManager from "./scroll-block-manager";
+const scrollBlockManager = new ScrollBlockManager();
+/* istanbul ignore next */
+
+const safeDocument = typeof document !== "undefined" ? document : {};
+
+const useScrollBlock = () => {
+  const {
+    current: containerGuid
+  } = useRef(guid());
+  const rules = useMemo(() => {
+    const {
+      documentElement,
+      body
+    } = safeDocument;
+    const scrollBarWidth = window.innerWidth - documentElement.clientWidth;
+    const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue("padding-right")) || 0;
+    return [{
+      element: documentElement,
+      property: "position",
+      blockingValue: "relative"
+    }, {
+      element: documentElement,
+      property: "overflow",
+      blockingValue: "hidden"
+    }, {
+      element: body,
+      property: "position",
+      blockingValue: "relative"
+    }, {
+      element: body,
+      property: "overflow",
+      blockingValue: "hidden"
+    }, {
+      element: body,
+      property: "paddingRight",
+      blockingValue: `${bodyPaddingRight + scrollBarWidth}px`
+    }];
+  }, []);
+  const blockScroll = useCallback(() => {
+    const isBlocked = scrollBlockManager.isBlocked();
+    scrollBlockManager.registerComponent(containerGuid);
+
+    if (isBlocked) {
+      return;
+    }
+
+    const originalValues = rules.map(({
+      element,
+      property
+    }) => element.style[property]);
+    scrollBlockManager.saveOriginalValues(originalValues);
+    rules.forEach(({
+      element,
+      property,
+      blockingValue
+    }) => {
+      element.style[property] = blockingValue;
+    });
+  }, [containerGuid, rules]);
+  const allowScroll = useCallback(() => {
+    scrollBlockManager.unregisterComponent(containerGuid);
+    const isBlocked = scrollBlockManager.isBlocked();
+    if (isBlocked) return;
+    const originalValues = scrollBlockManager.getOriginalValues();
+    rules.forEach(({
+      element,
+      property
+    }, index) => {
+      element.style[property] = originalValues[index];
+    });
+    scrollBlockManager.saveOriginalValues([]);
+  }, [containerGuid, rules]);
+  return {
+    blockScroll,
+    allowScroll
+  };
+};
+
+export default useScrollBlock;

package/esm/hooks/useMediaQuery/index.d.ts

@@ -0,0 +1 @@
+export default function useMediaQuery(query: string): boolean;

package/esm/hooks/useMediaQuery/index.js

@@ -0,0 +1,19 @@
+import React from "react";
+export default function useMediaQuery(queryInput) {
+  const query = queryInput.replace(/^@media( ?)/m, "");
+  const [match, setMatch] = React.useState(() => false);
+  React.useEffect(() => {
+    const queryList = window.matchMedia(query);
+
+    const updateMatch = () => {
+      setMatch(queryList.matches);
+    };
+
+    updateMatch();
+    queryList.addListener(updateMatch);
+    return () => {
+      queryList.removeListener(updateMatch);
+    };
+  }, [query]);
+  return match;
+}

package/esm/locales/date-fns-locales/index.d.ts

@@ -0,0 +1 @@
+export * from "date-fns/locale";

package/esm/locales/date-fns-locales/index.js

@@ -0,0 +1 @@
+export * from "date-fns/locale";

package/esm/locales/en-gb.d.ts

@@ -0,0 +1,5 @@
+import Locale from ".";
+
+declare const EnGb: Locale;
+
+export default EnGb;

package/esm/locales/en-gb.js

@@ -0,0 +1,131 @@
+import { enGB } from "./date-fns-locales";
+
+const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
+
+export default {
+  locale: () => "en-GB",
+  actions: {
+    edit: () => "Edit",
+    delete: () => "Delete"
+  },
+  actionPopover: {
+    ariaLabel: () => "actions"
+  },
+  batchSelection: {
+    selected: count => `${count} selected`
+  },
+  confirm: {
+    no: () => "No",
+    yes: () => "Yes"
+  },
+  date: {
+    dateFnsLocale: () => enGB
+  },
+  dialog: {
+    ariaLabels: {
+      close: () => "Close"
+    }
+  },
+  dialogFullScreen: {
+    ariaLabels: {
+      close: () => "Close"
+    }
+  },
+  errors: {
+    messages: {
+      formSummary:
+      /* istanbul ignore next */
+      (errors, warnings, type) => {
+        const errorPlural = isSingular(errors) ? "error" : "errors";
+        const warningPlural = isSingular(warnings) ? "warning" : "warnings";
+        const isErrorPlural = isSingular(errors) && !warnings ? "is" : "are";
+        const isWarningPlural = isSingular(warnings) ? "is" : "are";
+
+        if (errors && warnings && type === "warnings") {
+          return ["and", `${warnings} ${warningPlural}`];
+        }
+
+        if (errors) {
+          return [`There ${isErrorPlural}`, `${errors} ${errorPlural}`];
+        }
+
+        if (warnings) {
+          return [`There ${isWarningPlural}`, `${warnings} ${warningPlural}`];
+        }
+
+        return null;
+      }
+    }
+  },
+  message: {
+    closeButtonAriaLabel: () => "Close"
+  },
+  numeralDate: {
+    validation: {
+      day: () => "Day should be a number within a 1-31 range.",
+      month: () => "Month should be a number within a 1-12 range.",
+      year: () => "Year should be a number within a 1800-2200 range."
+    }
+  },
+  pager: {
+    show: () => "Show",
+    records: (count, showNumber = true) => {
+      const noun = isSingular(count) ? "item" : "items";
+      return showNumber ? `${count} ${noun}` : noun;
+    },
+    first: () => "First",
+    last: () => "Last",
+    next: () => "Next",
+    previous: () => "Previous",
+    pageX: () => "Page",
+    ofY: count => `of ${count}`
+  },
+  select: {
+    actionButtonText: () => "Add New Item",
+    placeholder: () => "Please Select...",
+    noResultsForTerm: term => `No results for "${term}"`
+  },
+  link: {
+    skipLinkLabel: () => "Skip to main content"
+  },
+  sidebar: {
+    ariaLabels: {
+      close: () => "Close"
+    }
+  },
+  switch: {
+    on: () => "ON",
+    off: () => "OFF"
+  },
+  textEditor: {
+    tooltipMessages: {
+      bold: () => "Bold",
+      italic: () => "Italic",
+      bulletList: () => "Bulleted List",
+      numberList: () => "Numbered List"
+    },
+    ariaLabels: {
+      bold: () => "bold",
+      italic: () => "italic",
+      bulletList: () => "bullet-list",
+      numberList: () => "number-list"
+    }
+  },
+  tileSelect: {
+    deselect: () => "Deselect"
+  },
+  toast: {
+    ariaLabels: {
+      close: () => "Close"
+    }
+  },
+  wizards: {
+    multiStep: {
+      buttons: {
+        submit: () => "Submit",
+        next: () => "Next",
+        back: () => "Back"
+      }
+    }
+  }
+};

package/esm/locales/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./locale";
+export { default as EnGb } from "./en-gb";
+export { default as PlPl } from "./pl-pl";

package/esm/locales/locale.d.ts

@@ -0,0 +1,111 @@
+import { Locale as DateFnsLocale } from "date-fns";
+
+interface Locale {
+  locale: () => string;
+  actions: {
+    edit: () => string;
+    delete: () => string;
+  };
+  actionPopover: {
+    ariaLabel: () => string;
+  };
+  batchSelection: {
+    selected: (count: number | string) => string;
+  };
+  confirm: {
+    no: () => string;
+    yes: () => string;
+  };
+  date: {
+    dateFnsLocale: () => DateFnsLocale;
+  };
+  dialog: {
+    ariaLabels: {
+      close: () => string;
+    };
+  };
+  dialogFullScreen: {
+    ariaLabels: {
+      close: () => string;
+    };
+  };
+  errors: {
+    messages: {
+      formSummary: (
+        errors: number,
+        warnings: number,
+        type: string
+      ) => [string, string] | null;
+    };
+  };
+  message: {
+    closeButtonAriaLabel: () => string;
+  };
+  numeralDate: {
+    validation: {
+      day: () => string;
+      month: () => string;
+      year: () => string;
+    };
+  };
+  pager: {
+    show: () => string;
+    records: (count: number | string, showNumber: boolean) => string;
+    first: () => string;
+    last: () => string;
+    next: () => string;
+    previous: () => string;
+    pageX: () => string;
+    ofY: (count: string | number) => string;
+  };
+  select: {
+    actionButtonText: () => string;
+    placeholder: () => string;
+    noResultsForTerm: (term: string) => string;
+  };
+  link: {
+    skipLinkLabel: () => string;
+  };
+  sidebar: {
+    ariaLabels: {
+      close: () => string;
+    };
+  };
+  switch: {
+    on: () => string;
+    off: () => string;
+  };
+  textEditor: {
+    tooltipMessages: {
+      bold: () => string;
+      italic: () => string;
+      bulletList: () => string;
+      numberList: () => string;
+    };
+    ariaLabels: {
+      bold: () => string;
+      italic: () => string;
+      bulletList: () => string;
+      numberList: () => string;
+    };
+  };
+  tileSelect: {
+    deselect: () => string;
+  };
+  toast: {
+    ariaLabels: {
+      close: () => string;
+    };
+  };
+  wizards: {
+    multiStep: {
+      buttons: {
+        submit: () => string;
+        next: () => string;
+        back: () => string;
+      };
+    };
+  };
+}
+
+export default Locale;

package/esm/locales/pl-pl.d.ts

@@ -0,0 +1,5 @@
+import Locale from ".";
+
+declare const PlPl: Locale;
+
+export default PlPl;

package/esm/locales/pl-pl.js

@@ -0,0 +1,129 @@
+import { pl } from "./date-fns-locales";
+
+const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
+
+export default {
+  locale: () => "pl-PL",
+  actions: {
+    edit: () => "Edytuj",
+    delete: () => "Usuń"
+  },
+  actionPopover: {
+    ariaLabel: () => "akcje"
+  },
+  batchSelection: {
+    selected: count => `${count} wybrano`
+  },
+  confirm: {
+    no: () => "Nie",
+    yes: () => "Tak"
+  },
+  date: {
+    dateFnsLocale: () => pl
+  },
+  dialog: {
+    ariaLabels: {
+      close: () => "Zamknij"
+    }
+  },
+  dialogFullScreen: {
+    ariaLabels: {
+      close: () => "Zamknij"
+    }
+  },
+  errors: {
+    messages: {
+      formSummary:
+      /* istanbul ignore next */
+      (errors, warnings, type) => {
+        const errorPlural = isSingular(errors) ? "błąd" : "błędy";
+        const warningPlural = isSingular(warnings) ? "ostrzerzenie" : "ostrzerzenia";
+
+        if (errors && warnings && type === "warnings") {
+          return [`oraz`, `${warnings} ${warningPlural}`];
+        }
+
+        if (errors) {
+          return ["Znaleziono", `${errors} ${errorPlural}`];
+        }
+
+        if (warnings) {
+          return ["Znaleziono", `${warnings} ${warningPlural}`];
+        }
+
+        return null;
+      }
+    }
+  },
+  message: {
+    closeButtonAriaLabel: () => "Zamknij"
+  },
+  numeralDate: {
+    validation: {
+      day: () => "Dzień musi być liczbą w zakresie 1-31.",
+      month: () => "Miesiąć musi być liczbą w zakresie 1-12.",
+      year: () => "Rok musi być liczbą w zakresie 1800-2200."
+    }
+  },
+  pager: {
+    show: () => "Pokaż",
+    records: (count, showNumber = true) => {
+      const noun = isSingular(count) ? "rzecz" : "rzeczy";
+      return showNumber ? `${count} ${noun}` : noun;
+    },
+    first: () => "Pierwsza",
+    last: () => "Ostatnia",
+    next: () => "Następna",
+    previous: () => "Poprzednia",
+    pageX: () => "Strona",
+    ofY: count => `z ${count}`
+  },
+  select: {
+    actionButtonText: () => "Dodaj nowy element",
+    placeholder: () => "Proszę wybierz...",
+    noResultsForTerm: term => `Brak wyników dla "${term}"`
+  },
+  link: {
+    skipLinkLabel: () => "Przejdź do treści"
+  },
+  sidebar: {
+    ariaLabels: {
+      close: () => "Zamknij"
+    }
+  },
+  switch: {
+    on: () => "WŁ",
+    off: () => "WYŁ"
+  },
+  textEditor: {
+    tooltipMessages: {
+      bold: () => "Pogrubiony",
+      italic: () => "Kursywa",
+      bulletList: () => "Lista Punktowana",
+      numberList: () => "Lista Numerowana"
+    },
+    ariaLabels: {
+      bold: () => "pogrubiony",
+      italic: () => "kursywa",
+      bulletList: () => "lista-punktowana",
+      numberList: () => "lista-numerowana"
+    }
+  },
+  tileSelect: {
+    deselect: () => "Odznacz"
+  },
+  toast: {
+    ariaLabels: {
+      close: () => "Zamknij"
+    }
+  },
+  wizards: {
+    multiStep: {
+      buttons: {
+        submit: () => "Wyślij",
+        next: () => "Następny",
+        back: () => "Wstecz"
+      }
+    }
+  }
+};

package/esm/style/__spec__.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/style/__spec__.js

@@ -0,0 +1,76 @@
+import config from "./color-config";
+import mix from "./utils/mix";
+import generatePalette from "./palette";
+
+const assertCorrectColorMix = (config, paletteObject) => {
+  Object.keys(config).forEach(col => {
+    const match = col.match(/([a-z]+)([\d]{0,2})/i);
+    const func = match[1],
+          weight = Number(match[2]);
+    expect(paletteObject[func](weight)).toEqual("#" + config[col]);
+  });
+};
+
+describe("style", () => {
+  let colorConfig = {
+    brilliantGreenShade20: "00B000",
+    brilliantGreenTint50: "80EE80",
+    goldTint50: "FFDA80",
+    errorRedShade20: "9F2D3F",
+    genericGreenTint50: "80CC80",
+    genericGreenTint30: "4DB84D",
+    genericGreenShade15: "008200",
+    genericGreenShade35: "006300",
+    genericGreenShade55: "004500",
+    productGreenTint50: "80D1BB",
+    productGreenTint30: "4DBF9F",
+    productGreenShade21: "00815D",
+    productGreenShade41: "006046",
+    productGreenShade61: "00402E",
+    productBlueTint50: "80BBE4",
+    productBlueTint30: "4DA0D9",
+    productBlueShade3: "0073C2",
+    productBlueShade23: "005C9A",
+    productBlueShade43: "004472",
+    amethystTint50: "AC96C1",
+    amethystTint30: "8A6BA8",
+    amethystTint10: "69418F",
+    amethystShade10: "4F2876",
+    amethystShade30: "3E1F5C",
+    slateTint95: "F2F5F6",
+    slateTint90: "E6EBED",
+    slateTint80: "CCD6DB",
+    slateTint60: "99ADB6",
+    slateTint40: "668592",
+    slateTint20: "335C6D",
+    slateShade60: "00141D"
+  };
+  describe("palette", () => {
+    let palette;
+    beforeEach(() => {
+      palette = generatePalette(config);
+    });
+    it("produces the correct color mix", () => {
+      assertCorrectColorMix(colorConfig, palette);
+    });
+  });
+  describe("mix", () => {
+    it("defaults to a weight of 50", () => {
+      expect(mix(config.genericGreen, "FFFFFF")).toEqual("#" + colorConfig.genericGreenTint50);
+    });
+    it("accepts colors without a hash symbol", () => {
+      expect(mix(config.genericGreen, "FFFFFF")).toEqual("#" + colorConfig.genericGreenTint50);
+    });
+    it("accepts colors with a hash symbol", () => {
+      expect(mix("#" + config.genericGreen, "#FFFFFF")).toEqual("#" + colorConfig.genericGreenTint50);
+    });
+    it("accepts three-digit hashes", () => {
+      expect(mix(config.genericGreen, "FFF")).toEqual("#" + colorConfig.genericGreenTint50);
+      expect(mix("FFF", config.genericGreen)).toEqual("#" + colorConfig.genericGreenTint50);
+    });
+    it("accepts colors with combinations of with and without hash symbols", () => {
+      expect(mix("#" + config.genericGreen, "FFFFFF")).toEqual("#" + colorConfig.genericGreenTint50);
+      expect(mix(config.genericGreen, "#FFFFFF")).toEqual("#" + colorConfig.genericGreenTint50);
+    });
+  });
+});

package/esm/style/color-config/index.d.ts

@@ -0,0 +1,3 @@
+export interface ColorConfig {
+  [key: string]: string;
+}

package/esm/style/color-config/index.js

@@ -0,0 +1,15 @@
+// Base colors
+export default {
+  brilliantGreen: "00DC00",
+  carrotOrange: "E96400",
+  errorRed: "C7384F",
+  genericGreen: "009900",
+  gold: "FFB500",
+  productGreen: "00A376",
+  productBlue: "0077C8",
+  navyBlue: "004B87",
+  amethyst: "582C83",
+  plum: "8246AF",
+  slate: "003349",
+  black: "000000"
+};

package/esm/style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.d.ts

@@ -0,0 +1,8 @@
+export default CarbonScopedTokensProvider;
+/**
+ *
+ * Converts theme properties to css variables form and set them locally for
+ * given scope
+ *
+ */
+declare const CarbonScopedTokensProvider: import("styled-components").StyledComponent<"div", any, {}, never>;