@strapi/design-system 1.19.0-typescript.0 → 2.0.0-beta.0

package/dist/CarouselInput/Carousel.js

@@ -1,81 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const icons = require('@strapi/icons');
-const styled = require('styled-components');
-const keyboardKeys = require('../helpers/keyboardKeys.js');
-const Tooltip = require('../Tooltip/Tooltip.js');
-const Box = require('../Box/Box.js');
-const Flex = require('../Flex/Flex.js');
-const Icon = require('../Icon/Icon.js');
-const Typography = require('../Typography/Typography.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-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 styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const CarouselGrid = styled__default.default(Box.Box) `
-  grid-template-columns: auto 1fr auto;
-  grid-template-areas: 'startAction slides endAction';
-`;
-const CarouselSlides = styled__default.default(Flex.Flex) `
-  grid-area: slides;
-`;
-const CarouselAction = styled__default.default(Box.Box) `
-  grid-area: ${({ area }) => area};
-
-  &:focus svg path,
-  &:hover svg path {
-    fill: ${({ theme }) => theme.colors.neutral900};
-  }
-`;
-const Carousel = React__namespace.forwardRef(({ actions, children, label, nextLabel, onNext, onPrevious, previousLabel, secondaryLabel, selectedSlide, ...props }, forwardedRef) => {
-    const prevActionRef = React__namespace.useRef(null);
-    const nextActionRef = React__namespace.useRef(null);
-    const childrenArray = React__namespace.Children.map(children, (node, index) => React__namespace.cloneElement(node, { selected: index === selectedSlide }));
-    const handleKeyDown = (event) => {
-        switch (event.key) {
-            case keyboardKeys.KeyboardKeys.RIGHT: {
-                event.preventDefault();
-                if (nextActionRef?.current) {
-                    nextActionRef.current.focus();
-                }
-                onNext();
-                break;
-            }
-            case keyboardKeys.KeyboardKeys.LEFT: {
-                event.preventDefault();
-                if (prevActionRef?.current) {
-                    prevActionRef.current.focus();
-                }
-                onPrevious();
-                break;
-            }
-        }
-    };
-    return (jsxRuntime.jsx(Box.Box, { ref: forwardedRef, ...props, onKeyDown: handleKeyDown, children: jsxRuntime.jsxs(Box.Box, { padding: 2, borderColor: "neutral200", hasRadius: true, background: "neutral100", children: [jsxRuntime.jsxs(CarouselGrid, { as: "section", "aria-roledescription": "carousel", "aria-label": label, display: "grid", position: "relative", children: [childrenArray && childrenArray.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CarouselAction, { as: "button", onClick: onPrevious, area: "startAction", ref: prevActionRef, "aria-label": previousLabel, type: "button", children: jsxRuntime.jsx(Icon.Icon, { as: icons.ChevronLeft, "aria-hidden": true, width: "6px", height: "10px", color: "neutral600" }) }), jsxRuntime.jsx(CarouselAction, { as: "button", onClick: onNext, area: "endAction", ref: nextActionRef, "aria-label": nextLabel, type: "button", children: jsxRuntime.jsx(Icon.Icon, { as: icons.ChevronRight, "aria-hidden": true, width: "6px", height: "10px", color: "neutral600" }) })] })), jsxRuntime.jsx(CarouselSlides, { "aria-live": "polite", paddingLeft: 2, paddingRight: 2, width: "100%", overflow: "hidden", children: childrenArray }), actions] }), secondaryLabel && (jsxRuntime.jsx(Box.Box, { paddingTop: 2, paddingLeft: 4, paddingRight: 4, children: jsxRuntime.jsx(Tooltip.Tooltip, { label: secondaryLabel, children: jsxRuntime.jsx(Flex.Flex, { justifyContent: "center", children: jsxRuntime.jsx(Typography.Typography, { variant: "pi", textColor: "neutral600", ellipsis: true, children: secondaryLabel }) }) }) }))] }) }));
-});
-
-exports.Carousel = Carousel;

package/dist/CarouselInput/Carousel.mjs

@@ -1,54 +0,0 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React from 'react';
-import { ChevronLeft, ChevronRight } from '@strapi/icons';
-import styled from 'styled-components';
-import { KeyboardKeys } from '../helpers/keyboardKeys.mjs';
-import { Tooltip } from '../Tooltip/Tooltip.mjs';
-import { Box } from '../Box/Box.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-import { Icon } from '../Icon/Icon.mjs';
-import { Typography } from '../Typography/Typography.mjs';
-
-const CarouselGrid = styled(Box) `
-  grid-template-columns: auto 1fr auto;
-  grid-template-areas: 'startAction slides endAction';
-`;
-const CarouselSlides = styled(Flex) `
-  grid-area: slides;
-`;
-const CarouselAction = styled(Box) `
-  grid-area: ${({ area }) => area};
-
-  &:focus svg path,
-  &:hover svg path {
-    fill: ${({ theme }) => theme.colors.neutral900};
-  }
-`;
-const Carousel = React.forwardRef(({ actions, children, label, nextLabel, onNext, onPrevious, previousLabel, secondaryLabel, selectedSlide, ...props }, forwardedRef) => {
-    const prevActionRef = React.useRef(null);
-    const nextActionRef = React.useRef(null);
-    const childrenArray = React.Children.map(children, (node, index) => React.cloneElement(node, { selected: index === selectedSlide }));
-    const handleKeyDown = (event) => {
-        switch (event.key) {
-            case KeyboardKeys.RIGHT: {
-                event.preventDefault();
-                if (nextActionRef?.current) {
-                    nextActionRef.current.focus();
-                }
-                onNext();
-                break;
-            }
-            case KeyboardKeys.LEFT: {
-                event.preventDefault();
-                if (prevActionRef?.current) {
-                    prevActionRef.current.focus();
-                }
-                onPrevious();
-                break;
-            }
-        }
-    };
-    return (jsx(Box, { ref: forwardedRef, ...props, onKeyDown: handleKeyDown, children: jsxs(Box, { padding: 2, borderColor: "neutral200", hasRadius: true, background: "neutral100", children: [jsxs(CarouselGrid, { as: "section", "aria-roledescription": "carousel", "aria-label": label, display: "grid", position: "relative", children: [childrenArray && childrenArray.length > 1 && (jsxs(Fragment, { children: [jsx(CarouselAction, { as: "button", onClick: onPrevious, area: "startAction", ref: prevActionRef, "aria-label": previousLabel, type: "button", children: jsx(Icon, { as: ChevronLeft, "aria-hidden": true, width: "6px", height: "10px", color: "neutral600" }) }), jsx(CarouselAction, { as: "button", onClick: onNext, area: "endAction", ref: nextActionRef, "aria-label": nextLabel, type: "button", children: jsx(Icon, { as: ChevronRight, "aria-hidden": true, width: "6px", height: "10px", color: "neutral600" }) })] })), jsx(CarouselSlides, { "aria-live": "polite", paddingLeft: 2, paddingRight: 2, width: "100%", overflow: "hidden", children: childrenArray }), actions] }), secondaryLabel && (jsx(Box, { paddingTop: 2, paddingLeft: 4, paddingRight: 4, children: jsx(Tooltip, { label: secondaryLabel, children: jsx(Flex, { justifyContent: "center", children: jsx(Typography, { variant: "pi", textColor: "neutral600", ellipsis: true, children: secondaryLabel }) }) }) }))] }) }));
-});
-
-export { Carousel };

package/dist/CarouselInput/CarouselActions.js

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const Flex = require('../Flex/Flex.js');
-
-const CarouselActions = ({ horizontal = true, spacing = 1, ...props }) => (jsxRuntime.jsx(Flex.Flex, { justifyContent: "center", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', position: "absolute", width: "100%", bottom: 1, ...props }));
-
-exports.CarouselActions = CarouselActions;

package/dist/CarouselInput/CarouselActions.mjs

@@ -1,6 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { Flex } from '../Flex/Flex.mjs';
-
-const CarouselActions = ({ horizontal = true, spacing = 1, ...props }) => (jsx(Flex, { justifyContent: "center", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', position: "absolute", width: "100%", bottom: 1, ...props }));
-
-export { CarouselActions };

package/dist/CarouselInput/CarouselImage.js

@@ -1,30 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const styled = require('styled-components');
-const utils = require('../Typography/utils.js');
-const Box = require('../Box/Box.js');
-const Tooltip = require('../Tooltip/Tooltip.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const StyledImage = styled__default.default(Box.Box) `
-  ${utils.ellipsisStyle({ ellipsis: true })}
-`;
-const CarouselImage = (props) => {
-    const [isError, setIsError] = React.useState(false);
-    const handleImageError = () => {
-        setIsError(true);
-    };
-    if (isError) {
-        return (jsxRuntime.jsx(Tooltip.Tooltip, { description: props.alt ?? '', children: jsxRuntime.jsx(StyledImage, { as: "img", height: "100%", maxWidth: "100%", ...props }) }));
-    }
-    return jsxRuntime.jsx(StyledImage, { as: "img", height: "100%", maxWidth: "100%", ...props, onError: handleImageError });
-};
-
-exports.CarouselImage = CarouselImage;

package/dist/CarouselInput/CarouselImage.mjs

@@ -1,22 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
-import styled from 'styled-components';
-import { ellipsisStyle } from '../Typography/utils.mjs';
-import { Box } from '../Box/Box.mjs';
-import { Tooltip } from '../Tooltip/Tooltip.mjs';
-
-const StyledImage = styled(Box) `
-  ${ellipsisStyle({ ellipsis: true })}
-`;
-const CarouselImage = (props) => {
-    const [isError, setIsError] = useState(false);
-    const handleImageError = () => {
-        setIsError(true);
-    };
-    if (isError) {
-        return (jsx(Tooltip, { description: props.alt ?? '', children: jsx(StyledImage, { as: "img", height: "100%", maxWidth: "100%", ...props }) }));
-    }
-    return jsx(StyledImage, { as: "img", height: "100%", maxWidth: "100%", ...props, onError: handleImageError });
-};
-
-export { CarouselImage };

package/dist/CarouselInput/CarouselInput.js

@@ -1,20 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const Carousel = require('./Carousel.js');
-const useId = require('../hooks/useId.js');
-const Field = require('../Field/Field.js');
-const FieldLabel = require('../Field/FieldLabel.js');
-const FieldHint = require('../Field/FieldHint.js');
-const FieldError = require('../Field/FieldError.js');
-const Flex = require('../Flex/Flex.js');
-
-const CarouselInput = React.forwardRef(({ actions, children, error, hint, label, labelAction, nextLabel, onNext, onPrevious, previousLabel, required, secondaryLabel, selectedSlide, id, ...props }, forwardedRef) => {
-    const generatedId = useId.useId(id);
-    return (jsxRuntime.jsx(Field.Field, { hint: hint, error: error, id: generatedId, required: required, children: jsxRuntime.jsxs(Flex.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [label && jsxRuntime.jsx(FieldLabel.FieldLabel, { action: labelAction, children: label }), jsxRuntime.jsx(Carousel.Carousel, { ref: forwardedRef, actions: actions, label: label, nextLabel: nextLabel, onNext: onNext, onPrevious: onPrevious, previousLabel: previousLabel, secondaryLabel: secondaryLabel, selectedSlide: selectedSlide, id: generatedId, ...props, children: children }), jsxRuntime.jsx(FieldHint.FieldHint, {}), jsxRuntime.jsx(FieldError.FieldError, {})] }) }));
-});
-
-exports.CarouselInput = CarouselInput;

package/dist/CarouselInput/CarouselInput.mjs

@@ -1,16 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Carousel } from './Carousel.mjs';
-import { useId } from '../hooks/useId.mjs';
-import { Field } from '../Field/Field.mjs';
-import { FieldLabel } from '../Field/FieldLabel.mjs';
-import { FieldHint } from '../Field/FieldHint.mjs';
-import { FieldError } from '../Field/FieldError.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-
-const CarouselInput = forwardRef(({ actions, children, error, hint, label, labelAction, nextLabel, onNext, onPrevious, previousLabel, required, secondaryLabel, selectedSlide, id, ...props }, forwardedRef) => {
-    const generatedId = useId(id);
-    return (jsx(Field, { hint: hint, error: error, id: generatedId, required: required, children: jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [label && jsx(FieldLabel, { action: labelAction, children: label }), jsx(Carousel, { ref: forwardedRef, actions: actions, label: label, nextLabel: nextLabel, onNext: onNext, onPrevious: onPrevious, previousLabel: previousLabel, secondaryLabel: secondaryLabel, selectedSlide: selectedSlide, id: generatedId, ...props, children: children }), jsx(FieldHint, {}), jsx(FieldError, {})] }) }));
-});
-
-export { CarouselInput };

package/dist/CarouselInput/CarouselSlide.js

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const Flex = require('../Flex/Flex.js');
-
-const CarouselSlide = ({ label, children, selected = false, ...props }) => (jsxRuntime.jsx(Flex.Flex, { alignItems: "center", display: selected ? 'flex' : 'none', role: "group", "aria-roledescription": "slide", "aria-label": label, justifyContent: "center", height: "124px", width: "100%", ...props, children: children }));
-
-exports.CarouselSlide = CarouselSlide;

package/dist/CarouselInput/CarouselSlide.mjs

@@ -1,6 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { Flex } from '../Flex/Flex.mjs';
-
-const CarouselSlide = ({ label, children, selected = false, ...props }) => (jsx(Flex, { alignItems: "center", display: selected ? 'flex' : 'none', role: "group", "aria-roledescription": "slide", "aria-label": label, justifyContent: "center", height: "124px", width: "100%", ...props, children: children }));
-
-export { CarouselSlide };

package/dist/CarouselInput/index.js

@@ -1,17 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Carousel = require('./Carousel.js');
-const CarouselInput = require('./CarouselInput.js');
-const CarouselActions = require('./CarouselActions.js');
-const CarouselImage = require('./CarouselImage.js');
-const CarouselSlide = require('./CarouselSlide.js');
-
-
-
-exports.Carousel = Carousel.Carousel;
-exports.CarouselInput = CarouselInput.CarouselInput;
-exports.CarouselActions = CarouselActions.CarouselActions;
-exports.CarouselImage = CarouselImage.CarouselImage;
-exports.CarouselSlide = CarouselSlide.CarouselSlide;

package/dist/CarouselInput/index.mjs

@@ -1,5 +0,0 @@
-export { Carousel } from './Carousel.mjs';
-export { CarouselInput } from './CarouselInput.mjs';
-export { CarouselActions } from './CarouselActions.mjs';
-export { CarouselImage } from './CarouselImage.mjs';
-export { CarouselSlide } from './CarouselSlide.mjs';

package/dist/Checkbox/Checkbox.js

@@ -1,64 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const styled = require('styled-components');
-const useId = require('../hooks/useId.js');
-const FieldContext = require('../Field/FieldContext.js');
-const Typography = require('../Typography/Typography.js');
-const BaseCheckbox = require('../BaseCheckbox/BaseCheckbox.js');
-const Field = require('../Field/Field.js');
-const Flex = require('../Flex/Flex.js');
-const Box = require('../Box/Box.js');
-const FieldHint = require('../Field/FieldHint.js');
-const FieldError = require('../Field/FieldError.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-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 styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const CheckboxLabel = styled__default.default(Typography.Typography) `
-  display: flex;
-  align-items: flex-start;
-  * {
-    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  }
-`;
-const CheckboxTick = React__namespace.forwardRef((props, forwardedRef) => {
-    const { id } = FieldContext.useField();
-    return jsxRuntime.jsx(BaseCheckbox.BaseCheckbox, { ref: forwardedRef, id: id, ...props });
-});
-const Checkbox = React__namespace.forwardRef(({ children, disabled = false, id, hint, error, ...props }, forwardedRef) => {
-    const generatedId = useId.useId(id);
-    let ariaDescription;
-    if (error) {
-        ariaDescription = `${generatedId}-error`;
-    }
-    else if (hint) {
-        ariaDescription = `${generatedId}-hint`;
-    }
-    return (jsxRuntime.jsx(Field.Field, { id: generatedId, hint: hint, error: error, children: jsxRuntime.jsxs(Flex.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [jsxRuntime.jsxs(CheckboxLabel, { as: "label", textColor: "neutral800", disabled: disabled, children: [jsxRuntime.jsx(CheckboxTick, { ref: forwardedRef, disabled: disabled, "aria-describedby": ariaDescription, ...props }), jsxRuntime.jsx(Box.Box, { paddingLeft: 2, children: children })] }), jsxRuntime.jsx(FieldHint.FieldHint, {}), jsxRuntime.jsx(FieldError.FieldError, {})] }) }));
-});
-
-exports.Checkbox = Checkbox;

package/dist/Checkbox/Checkbox.mjs

@@ -1,37 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import * as React from 'react';
-import styled from 'styled-components';
-import { useId } from '../hooks/useId.mjs';
-import { useField } from '../Field/FieldContext.mjs';
-import { Typography } from '../Typography/Typography.mjs';
-import { BaseCheckbox } from '../BaseCheckbox/BaseCheckbox.mjs';
-import { Field } from '../Field/Field.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-import { Box } from '../Box/Box.mjs';
-import { FieldHint } from '../Field/FieldHint.mjs';
-import { FieldError } from '../Field/FieldError.mjs';
-
-const CheckboxLabel = styled(Typography) `
-  display: flex;
-  align-items: flex-start;
-  * {
-    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  }
-`;
-const CheckboxTick = React.forwardRef((props, forwardedRef) => {
-    const { id } = useField();
-    return jsx(BaseCheckbox, { ref: forwardedRef, id: id, ...props });
-});
-const Checkbox = React.forwardRef(({ children, disabled = false, id, hint, error, ...props }, forwardedRef) => {
-    const generatedId = useId(id);
-    let ariaDescription;
-    if (error) {
-        ariaDescription = `${generatedId}-error`;
-    }
-    else if (hint) {
-        ariaDescription = `${generatedId}-hint`;
-    }
-    return (jsx(Field, { id: generatedId, hint: hint, error: error, children: jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [jsxs(CheckboxLabel, { as: "label", textColor: "neutral800", disabled: disabled, children: [jsx(CheckboxTick, { ref: forwardedRef, disabled: disabled, "aria-describedby": ariaDescription, ...props }), jsx(Box, { paddingLeft: 2, children: children })] }), jsx(FieldHint, {}), jsx(FieldError, {})] }) }));
-});
-
-export { Checkbox };

package/dist/Checkbox/index.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Checkbox = require('./Checkbox.js');
-
-
-
-exports.Checkbox = Checkbox.Checkbox;

package/dist/Checkbox/index.mjs

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