@strapi/design-system 1.8.2 → 1.10.0-alpha.0

package/dist/Tooltip/utils/positionTooltip.mjs

@@ -0,0 +1,70 @@
+const SPACE_BETWEEN = 8;
+const positionBottom = (tooltipRect, toggleSourceRect) => {
+    const widthDifference = (tooltipRect.width - toggleSourceRect.width) / 2;
+    const left = toggleSourceRect.left - widthDifference;
+    const top = toggleSourceRect.top + toggleSourceRect.height + SPACE_BETWEEN + window.pageYOffset;
+    return {
+        left,
+        top,
+    };
+};
+const positionRight = (tooltipRect, toggleSourceRect) => {
+    const heightDifference = (tooltipRect.height - toggleSourceRect.height) / 2;
+    const left = toggleSourceRect.left + toggleSourceRect.width + SPACE_BETWEEN;
+    const top = toggleSourceRect.top - heightDifference + window.pageYOffset;
+    return { left, top };
+};
+const positionLeft = (tooltipRect, toggleSourceRect) => {
+    const heightDifference = (tooltipRect.height - toggleSourceRect.height) / 2;
+    const left = toggleSourceRect.left - tooltipRect.width - SPACE_BETWEEN;
+    const top = toggleSourceRect.top - heightDifference + window.pageYOffset;
+    return { left, top };
+};
+const positionTop = (tooltipRect, toggleSourceRect) => {
+    const widthDifference = (tooltipRect.width - toggleSourceRect.width) / 2;
+    let left = toggleSourceRect.left - widthDifference;
+    let top = toggleSourceRect.top - tooltipRect.height - SPACE_BETWEEN + window.pageYOffset;
+    // CONDITIONS TO HANDLE TOOLTIP OVERFLOW OUT OF VIEWPORT
+    // calculate the space between rightside viewport to rightside source element
+    // knowing this space will help calculate if tooltip will overflow right side
+    const rightSpaceDifference = window.innerWidth - toggleSourceRect.right;
+    // calculate rightside pos of tooltip to compare later to window.innerWidth
+    const overflowRight = toggleSourceRect.left + tooltipRect.width - rightSpaceDifference;
+    if (overflowRight > window.innerWidth) {
+        // if tooltip overflow right side of viewport
+        // place tooltip left side from source element
+        left = toggleSourceRect.left - tooltipRect.width - SPACE_BETWEEN;
+        top = toggleSourceRect.top + window.scrollY - toggleSourceRect.height / 2;
+    }
+    else if (left < 0) {
+        // if overflow left
+        // place tooltip right side from source element
+        left = toggleSourceRect.width + toggleSourceRect.left + SPACE_BETWEEN;
+        top = toggleSourceRect.top + window.scrollY - tooltipRect.height / 2 + SPACE_BETWEEN;
+    }
+    else if (top < 0 && left > 0) {
+        // if overflow top but not left
+        // place tooltip below source element
+        top = toggleSourceRect.top + toggleSourceRect.height + SPACE_BETWEEN;
+    }
+    return {
+        left,
+        top,
+    };
+};
+const positionTooltip = (tooltipNode, toggleSourceNode, position) => {
+    const tooltipRect = tooltipNode.getBoundingClientRect();
+    const toggleSourceRect = toggleSourceNode.getBoundingClientRect();
+    if (position === 'bottom') {
+        return positionBottom(tooltipRect, toggleSourceRect);
+    }
+    if (position === 'right') {
+        return positionRight(tooltipRect, toggleSourceRect);
+    }
+    if (position === 'left') {
+        return positionLeft(tooltipRect, toggleSourceRect);
+    }
+    return positionTop(tooltipRect, toggleSourceRect);
+};
+
+export { positionTooltip };

package/dist/Typography/Typography.js

@@ -1,25 +1,34 @@
-import r from "styled-components";
-import { variantStyle as i, ellipsisStyle as n } from "./utils.js";
-import { extractStyleFromTheme as o } from "../helpers/theme.js";
-const a = {
-  fontSize: !0,
-  fontWeight: !0
-}, h = r.span.withConfig({
-  shouldForwardProp: (t, e) => !a[t] && e(t)
-})`
-  ${i}
-  ${n}
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const styled = require('styled-components');
+const utils = require('./utils.js');
+const theme = require('../helpers/theme.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const transientProps = {
+    fontSize: true,
+    fontWeight: true,
+};
+const Typography = styled__default.default.span.withConfig({
+    shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
+}) `
+  ${utils.variantStyle}
+  ${utils.ellipsisStyle}
 
   // These properties need to come after {variantStyle}, because they might
   // overwrite a variant attribute
-  font-weight: ${({ theme: t, fontWeight: e }) => o(t.fontWeights, e, void 0)};
-  font-size: ${({ theme: t, fontSize: e }) => o(t.fontSizes, e, void 0)};
-  line-height: ${({ theme: t, lineHeight: e }) => o(t.lineHeights, e, e)};
-  color: ${({ theme: t, textColor: e }) => t.colors[e || "neutral800"]};
-  text-align: ${({ textAlign: t }) => t};
-  text-decoration: ${({ textDecoration: t }) => t};
-  text-transform: ${({ textTransform: t }) => t};
+  font-weight: ${({ theme: theme$1, fontWeight }) => theme.extractStyleFromTheme(theme$1.fontWeights, fontWeight, undefined)};
+  font-size: ${({ theme: theme$1, fontSize }) => theme.extractStyleFromTheme(theme$1.fontSizes, fontSize, undefined)};
+  line-height: ${({ theme: theme$1, lineHeight }) => theme.extractStyleFromTheme(theme$1.lineHeights, lineHeight, lineHeight)};
+  color: ${({ theme, textColor }) => theme.colors[textColor || 'neutral800']};
+  text-align: ${({ textAlign }) => textAlign};
+  text-decoration: ${({ textDecoration }) => textDecoration};
+  text-transform: ${({ textTransform }) => textTransform};
 `;
-export {
-  h as Typography
-};
+
+exports.Typography = Typography;

package/dist/Typography/Typography.mjs

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { variantStyle, ellipsisStyle } from './utils.mjs';
+import { extractStyleFromTheme } from '../helpers/theme.mjs';
+
+const transientProps = {
+    fontSize: true,
+    fontWeight: true,
+};
+const Typography = styled.span.withConfig({
+    shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
+}) `
+  ${variantStyle}
+  ${ellipsisStyle}
+
+  // These properties need to come after {variantStyle}, because they might
+  // overwrite a variant attribute
+  font-weight: ${({ theme, fontWeight }) => extractStyleFromTheme(theme.fontWeights, fontWeight, undefined)};
+  font-size: ${({ theme, fontSize }) => extractStyleFromTheme(theme.fontSizes, fontSize, undefined)};
+  line-height: ${({ theme, lineHeight }) => extractStyleFromTheme(theme.lineHeights, lineHeight, lineHeight)};
+  color: ${({ theme, textColor }) => theme.colors[textColor || 'neutral800']};
+  text-align: ${({ textAlign }) => textAlign};
+  text-decoration: ${({ textDecoration }) => textDecoration};
+  text-transform: ${({ textTransform }) => textTransform};
+`;
+
+export { Typography };

package/dist/Typography/constants.js

@@ -1,11 +1,21 @@
-const o = "alpha", t = "beta", s = "delta", n = "epsilon", c = "omega", A = "pi", a = "sigma", e = [o, t, s, n, c, A, a];
-export {
-  o as ALPHA,
-  t as BETA,
-  s as DELTA,
-  n as EPSILON,
-  c as OMEGA,
-  A as PI,
-  a as SIGMA,
-  e as TEXT_VARIANTS
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const ALPHA = 'alpha';
+const BETA = 'beta';
+const DELTA = 'delta';
+const EPSILON = 'epsilon';
+const OMEGA = 'omega';
+const PI = 'pi';
+const SIGMA = 'sigma';
+const TEXT_VARIANTS = [ALPHA, BETA, DELTA, EPSILON, OMEGA, PI, SIGMA];
+
+exports.ALPHA = ALPHA;
+exports.BETA = BETA;
+exports.DELTA = DELTA;
+exports.EPSILON = EPSILON;
+exports.OMEGA = OMEGA;
+exports.PI = PI;
+exports.SIGMA = SIGMA;
+exports.TEXT_VARIANTS = TEXT_VARIANTS;

package/dist/Typography/constants.mjs

@@ -0,0 +1,10 @@
+const ALPHA = 'alpha';
+const BETA = 'beta';
+const DELTA = 'delta';
+const EPSILON = 'epsilon';
+const OMEGA = 'omega';
+const PI = 'pi';
+const SIGMA = 'sigma';
+const TEXT_VARIANTS = [ALPHA, BETA, DELTA, EPSILON, OMEGA, PI, SIGMA];
+
+export { ALPHA, BETA, DELTA, EPSILON, OMEGA, PI, SIGMA, TEXT_VARIANTS };

package/dist/Typography/index.js

@@ -1,4 +1,9 @@
-import { Typography as r } from "./Typography.js";
-export {
-  r as Typography
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Typography = require('./Typography.js');
+
+
+
+exports.Typography = Typography.Typography;

package/dist/Typography/index.mjs

@@ -0,0 +1 @@
+export { Typography } from './Typography.mjs';

package/dist/Typography/utils.js

@@ -1,58 +1,72 @@
-import { SIGMA as e, PI as s, OMEGA as t, EPSILON as o, DELTA as f, BETA as l, ALPHA as r } from "./constants.js";
-const $ = ({ ellipsis: n = !1 }) => n && `
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const constants = require('./constants.js');
+
+const ellipsisStyle = ({ ellipsis = false }) => ellipsis &&
+    `
     display: block;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-  `, a = ({ variant: n = t, theme: i }) => {
-  switch (n) {
-    case r:
-      return `
-        font-weight: ${i.fontWeights.bold};
-        font-size: ${i.fontSizes[5]};
-        line-height: ${i.lineHeights[2]};
-      `;
-    case l:
-      return `
-        font-weight: ${i.fontWeights.bold};
-        font-size: ${i.fontSizes[4]};
-        line-height: ${i.lineHeights[1]};
-      `;
-    case f:
-      return `
-        font-weight: ${i.fontWeights.semiBold};
-        font-size: ${i.fontSizes[3]};
-        line-height: ${i.lineHeights[2]};
-      `;
-    case o:
-      return `
-        font-size: ${i.fontSizes[3]};
-        line-height: ${i.lineHeights[6]};
-      `;
-    case t:
-      return `
-        font-size: ${i.fontSizes[2]};
-        line-height: ${i.lineHeights[4]};
-      `;
-    case s:
-      return `
-        font-size: ${i.fontSizes[1]};
-        line-height: ${i.lineHeights[3]};
-      `;
-    case e:
-      return `
-        font-weight: ${i.fontWeights.bold};
-        font-size: ${i.fontSizes[0]};
-        line-height: ${i.lineHeights[5]};
+  `;
+const variantStyle = ({ variant = constants.OMEGA, theme, }) => {
+    switch (variant) {
+        case constants.ALPHA: {
+            return `
+        font-weight: ${theme.fontWeights.bold};
+        font-size: ${theme.fontSizes[5]};
+        line-height: ${theme.lineHeights[2]};
+      `;
+        }
+        case constants.BETA: {
+            return `
+        font-weight: ${theme.fontWeights.bold};
+        font-size: ${theme.fontSizes[4]};
+        line-height: ${theme.lineHeights[1]};
+      `;
+        }
+        case constants.DELTA: {
+            return `
+        font-weight: ${theme.fontWeights.semiBold};
+        font-size: ${theme.fontSizes[3]};
+        line-height: ${theme.lineHeights[2]};
+      `;
+        }
+        case constants.EPSILON: {
+            return `
+        font-size: ${theme.fontSizes[3]};
+        line-height: ${theme.lineHeights[6]};
+      `;
+        }
+        case constants.OMEGA: {
+            return `
+        font-size: ${theme.fontSizes[2]};
+        line-height: ${theme.lineHeights[4]};
+      `;
+        }
+        case constants.PI: {
+            return `
+        font-size: ${theme.fontSizes[1]};
+        line-height: ${theme.lineHeights[3]};
+      `;
+        }
+        case constants.SIGMA: {
+            return `
+        font-weight: ${theme.fontWeights.bold};
+        font-size: ${theme.fontSizes[0]};
+        line-height: ${theme.lineHeights[5]};
         text-transform: uppercase;
       `;
-    default:
-      return `
-        font-size: ${i.fontSizes[2]};
+        }
+        default: {
+            return `
+        font-size: ${theme.fontSizes[2]};
       `;
-  }
-};
-export {
-  $ as ellipsisStyle,
-  a as variantStyle
+        }
+    }
 };
+
+exports.ellipsisStyle = ellipsisStyle;
+exports.variantStyle = variantStyle;

package/dist/Typography/utils.mjs

@@ -0,0 +1,67 @@
+import { SIGMA, PI, OMEGA, EPSILON, DELTA, BETA, ALPHA } from './constants.mjs';
+
+const ellipsisStyle = ({ ellipsis = false }) => ellipsis &&
+    `
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `;
+const variantStyle = ({ variant = OMEGA, theme, }) => {
+    switch (variant) {
+        case ALPHA: {
+            return `
+        font-weight: ${theme.fontWeights.bold};
+        font-size: ${theme.fontSizes[5]};
+        line-height: ${theme.lineHeights[2]};
+      `;
+        }
+        case BETA: {
+            return `
+        font-weight: ${theme.fontWeights.bold};
+        font-size: ${theme.fontSizes[4]};
+        line-height: ${theme.lineHeights[1]};
+      `;
+        }
+        case DELTA: {
+            return `
+        font-weight: ${theme.fontWeights.semiBold};
+        font-size: ${theme.fontSizes[3]};
+        line-height: ${theme.lineHeights[2]};
+      `;
+        }
+        case EPSILON: {
+            return `
+        font-size: ${theme.fontSizes[3]};
+        line-height: ${theme.lineHeights[6]};
+      `;
+        }
+        case OMEGA: {
+            return `
+        font-size: ${theme.fontSizes[2]};
+        line-height: ${theme.lineHeights[4]};
+      `;
+        }
+        case PI: {
+            return `
+        font-size: ${theme.fontSizes[1]};
+        line-height: ${theme.lineHeights[3]};
+      `;
+        }
+        case SIGMA: {
+            return `
+        font-weight: ${theme.fontWeights.bold};
+        font-size: ${theme.fontSizes[0]};
+        line-height: ${theme.lineHeights[5]};
+        text-transform: uppercase;
+      `;
+        }
+        default: {
+            return `
+        font-size: ${theme.fontSizes[2]};
+      `;
+        }
+    }
+};
+
+export { ellipsisStyle, variantStyle };

package/dist/VisuallyHidden/VisuallyHidden.js

@@ -1,5 +1,14 @@
-import i from "styled-components";
-const o = i.div`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const styled = require('styled-components');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const VisuallyHidden = styled__default.default.div `
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
@@ -9,6 +18,5 @@ const o = i.div`
   position: absolute;
   width: 1px;
 `;
-export {
-  o as VisuallyHidden
-};
+
+exports.VisuallyHidden = VisuallyHidden;

package/dist/VisuallyHidden/VisuallyHidden.mjs

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+const VisuallyHidden = styled.div `
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+`;
+
+export { VisuallyHidden };

package/dist/VisuallyHidden/index.js

@@ -1,4 +1,9 @@
-import { VisuallyHidden as i } from "./VisuallyHidden.js";
-export {
-  i as VisuallyHidden
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const VisuallyHidden = require('./VisuallyHidden.js');
+
+
+
+exports.VisuallyHidden = VisuallyHidden.VisuallyHidden;

package/dist/VisuallyHidden/index.mjs

@@ -0,0 +1 @@
+export { VisuallyHidden } from './VisuallyHidden.mjs';

package/dist/helpers/context.js

@@ -1,21 +1,50 @@
-import { jsx as x } from "react/jsx-runtime";
-import * as n from "react";
-const v = (o, t) => {
-  const c = n.createContext(t);
-  function i(r) {
-    const { children: e, ...s } = r, d = n.useMemo(() => s, Object.values(s));
-    return x(c.Provider, { value: d, children: e });
-  }
-  function u(r) {
-    const e = n.useContext(c);
-    if (e)
-      return e;
-    if (t !== void 0)
-      return t;
-    throw new Error(`\`${r}\` must be used within \`${o}\``);
-  }
-  return i.displayName = `${o}Provider`, [i, u];
-};
-export {
-  v as createContext
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+    if (e) {
+        for (const k in e) {
+            if (k !== 'default') {
+                const d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: () => e[k]
+                });
+            }
+        }
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const createContext = (rootComponentName, defaultContext) => {
+    const Context = React__namespace.createContext(defaultContext);
+    function Provider(props) {
+        const { children, ...context } = props;
+        // Only re-memoize when prop values change
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        const value = React__namespace.useMemo(() => context, Object.values(context));
+        return jsxRuntime.jsx(Context.Provider, { value: value, children: children });
+    }
+    function useContext(consumerName) {
+        const context = React__namespace.useContext(Context);
+        if (context)
+            return context;
+        if (defaultContext !== undefined)
+            return defaultContext;
+        // if a defaultContext wasn't specified, it's a required context.
+        throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+    }
+    Provider.displayName = `${rootComponentName}Provider`;
+    return [Provider, useContext];
 };
+
+exports.createContext = createContext;

package/dist/helpers/context.mjs

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+
+const createContext = (rootComponentName, defaultContext) => {
+    const Context = React.createContext(defaultContext);
+    function Provider(props) {
+        const { children, ...context } = props;
+        // Only re-memoize when prop values change
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        const value = React.useMemo(() => context, Object.values(context));
+        return jsx(Context.Provider, { value: value, children: children });
+    }
+    function useContext(consumerName) {
+        const context = React.useContext(Context);
+        if (context)
+            return context;
+        if (defaultContext !== undefined)
+            return defaultContext;
+        // if a defaultContext wasn't specified, it's a required context.
+        throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+    }
+    Provider.displayName = `${rootComponentName}Provider`;
+    return [Provider, useContext];
+};
+
+export { createContext };

package/dist/helpers/deprecations.js

@@ -1,13 +1,21 @@
-const o = "[@strapi/design-system]:", c = (n) => {
-  const e = n;
-  let t = !1;
-  if (typeof e != "function")
-    throw new TypeError(`${o} once requires a function parameter`);
-  return (...r) => {
-    t || (e(...r), t = !0);
-  };
-};
-export {
-  o as PREFIX,
-  c as once
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const PREFIX = '[@strapi/design-system]:';
+const once = (fn) => {
+    const func = fn;
+    let called = false;
+    if (typeof func !== 'function') {
+        throw new TypeError(`${PREFIX} once requires a function parameter`);
+    }
+    return (...args) => {
+        if (!called) {
+            func(...args);
+            called = true;
+        }
+    };
 };
+
+exports.PREFIX = PREFIX;
+exports.once = once;

package/dist/helpers/deprecations.mjs

@@ -0,0 +1,16 @@
+const PREFIX = '[@strapi/design-system]:';
+const once = (fn) => {
+    const func = fn;
+    let called = false;
+    if (typeof func !== 'function') {
+        throw new TypeError(`${PREFIX} once requires a function parameter`);
+    }
+    return (...args) => {
+        if (!called) {
+            func(...args);
+            called = true;
+        }
+    };
+};
+
+export { PREFIX, once };

package/dist/helpers/getDefaultLocale.js

@@ -1,9 +1,36 @@
-const e = "en-EN";
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+/**
+ *
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.} operator
+
+   Link to the code: https://github.com/adobe/react-spectrum/blob/1e2b7f280a04ead83e21b27fa580eb189e5f4186/packages/%40react-aria/i18n/src/useDefaultLocale.ts#L28
+ */
+const DEFAULT_LOCALE = 'en-EN';
 /**
  * @preserve
  * @deprecated This will be removed in v2.0.0, you can access the locale from `useDesignSystem` instead.
  */
-const n = () => typeof navigator > "u" ? e : navigator.language ? navigator.language : e;
-export {
-  n as getDefaultLocale
+const getDefaultLocale = () => {
+    if (typeof navigator === 'undefined') {
+        return DEFAULT_LOCALE;
+    }
+    if (navigator.language) {
+        return navigator.language;
+    }
+    return DEFAULT_LOCALE;
 };
+
+exports.getDefaultLocale = getDefaultLocale;