@strapi/design-system 2.0.0-rc.29 → 2.0.0-rc.30

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.
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,MAAM,wBAAwB,CAAC;AAKjD,OAAO,EAA4B,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACjF,OAAO,EAAc,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE1E,OAAO,EAAc,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAOzE,UAAU,KAAM,SAAQ,MAAM,CAAC,WAAW;CAAG;AAE7C,QAAA,MAAM,IAAI,8BAAc,CAAC;AAMzB,KAAK,cAAc,GAAG,iBAAiB,CAAC;AAExC,UAAU,YAAa,SAAQ,IAAI,CAAC,MAAM,CAAC,kBAAkB,EAAE,SAAS,CAAC;CAAG;AAE5E,QAAA,MAAM,OAAO,wFAEX,CAAC;AAMH,KAAK,cAAc,GAAG,cAAc,CAAC;AAErC,UAAU,YAAa,SAAQ,MAAM,CAAC,kBAAkB;CAAG;AAE3D,QAAA,MAAM,OAAO,qFAQX,CAAC;AA2DH,KAAK,YAAY,GAAG,iBAAiB,CAAC;AAEtC,UAAU,UAAW,SAAQ,IAAI,CAAC,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAAC;CAAG;AAExE,QAAA,MAAM,KAAK,sFAET,CAAC;AAMH,KAAK,aAAa,GAAG,cAAc,CAAC;AAEpC,UAAU,WAAY,SAAQ,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;IAC5D;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,MAAM,iGAsBX,CAAC;AAUF,KAAK,YAAY,GAAG,kBAAkB,CAAC;AAEvC,UAAU,UAAW,SAAQ,eAAe,CAAC,IAAI,CAAC;CAAG;AAErD,QAAA,MAAM,KAAK,uFAMT,CAAC;AAMH,KAAK,WAAW,GAAG,cAAc,CAAC;AAElC,UAAU,SAAU,SAAQ,eAAe;CAAG;AAE9C,QAAA,MAAM,IAAI,kFAMR,CAAC;AAuBH,KAAK,aAAa,GAAG,cAAc,CAAC;AAEpC,UAAU,WAAY,SAAQ,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;CAAG;AAEjE,QAAA,MAAM,MAAM,iGAaV,CAAC;AAOH,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACtE,YAAY,EACV,KAAK,EACL,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,cAAc,EACd,aAAa,EACb,WAAW,EACX,YAAY,EACZ,UAAU,EACV,WAAW,EACX,SAAS,EACT,aAAa,EACb,WAAW,GACZ,CAAC"}
1
+ {"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,MAAM,wBAAwB,CAAC;AAKjD,OAAO,EAA4B,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACjF,OAAO,EAAc,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE1E,OAAO,EAAc,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAOzE,UAAU,KAAM,SAAQ,MAAM,CAAC,WAAW;CAAG;AAE7C,QAAA,MAAM,IAAI,8BAAc,CAAC;AAMzB,KAAK,cAAc,GAAG,iBAAiB,CAAC;AAExC,UAAU,YAAa,SAAQ,IAAI,CAAC,MAAM,CAAC,kBAAkB,EAAE,SAAS,CAAC;CAAG;AAE5E,QAAA,MAAM,OAAO,wFAEX,CAAC;AAMH,KAAK,cAAc,GAAG,cAAc,CAAC;AAErC,UAAU,YAAa,SAAQ,MAAM,CAAC,kBAAkB;CAAG;AAE3D,QAAA,MAAM,OAAO,qFAQX,CAAC;AA8DH,KAAK,YAAY,GAAG,iBAAiB,CAAC;AAEtC,UAAU,UAAW,SAAQ,IAAI,CAAC,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAAC;CAAG;AAExE,QAAA,MAAM,KAAK,sFAET,CAAC;AAMH,KAAK,aAAa,GAAG,cAAc,CAAC;AAEpC,UAAU,WAAY,SAAQ,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;IAC5D;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,MAAM,iGAsBX,CAAC;AAUF,KAAK,YAAY,GAAG,kBAAkB,CAAC;AAEvC,UAAU,UAAW,SAAQ,eAAe,CAAC,IAAI,CAAC;CAAG;AAErD,QAAA,MAAM,KAAK,uFAMT,CAAC;AAMH,KAAK,WAAW,GAAG,cAAc,CAAC;AAElC,UAAU,SAAU,SAAQ,eAAe;CAAG;AAE9C,QAAA,MAAM,IAAI,kFAMR,CAAC;AAuBH,KAAK,aAAa,GAAG,cAAc,CAAC;AAEpC,UAAU,WAAY,SAAQ,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;CAAG;AAEjE,QAAA,MAAM,MAAM,iGAaV,CAAC;AAOH,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACtE,YAAY,EACV,KAAK,EACL,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,cAAc,EACd,aAAa,EACb,WAAW,EACX,YAAY,EACZ,UAAU,EACV,WAAW,EACX,SAAS,EACT,aAAa,EACb,WAAW,GACZ,CAAC"}
@@ -14,7 +14,7 @@ export type MultiSelectProps = MultiSelectPropsWithoutLabel & {
14
14
  'aria-label'?: string;
15
15
  'aria-describedby'?: string;
16
16
  };
17
- export declare const MultiSelect: React.ForwardRefExoticComponent<Omit<import("@strapi/ui-primitives/dist/components/Select/Select").MultiSelectProps, "value" | "multi"> & Pick<import("@strapi/ui-primitives/dist/components/Select/Select").SelectContentImplProps, "onCloseAutoFocus"> & Pick<SelectParts.TriggerProps, "id" | "name" | "size" | "startIcon" | "hasError" | "clearLabel" | "onClear"> & Pick<SelectParts.ValueProps, "placeholder"> & {
17
+ export declare const MultiSelect: React.ForwardRefExoticComponent<Omit<import("@strapi/ui-primitives/dist/components/Select/Select").MultiSelectProps, "value" | "multi"> & Pick<import("@strapi/ui-primitives/dist/components/Select/Select").SelectContentImplProps, "onCloseAutoFocus"> & Pick<SelectParts.TriggerProps, "size" | "id" | "name" | "startIcon" | "hasError" | "clearLabel" | "onClear"> & Pick<SelectParts.ValueProps, "placeholder"> & {
18
18
  /**
19
19
  * @default (value) => value.join(',')
20
20
  */
@@ -14,7 +14,7 @@ export type SingleSelectProps = SingleSelectPropsWithoutLabel & {
14
14
  'aria-describedby'?: string;
15
15
  };
16
16
  export type SingleSelectElement = HTMLDivElement;
17
- export declare const SingleSelect: React.ForwardRefExoticComponent<Omit<import("@strapi/ui-primitives/dist/components/Select/Select").SingleSelectProps, "value"> & Pick<import("@strapi/ui-primitives/dist/components/Select/Select").SelectContentImplProps, "onCloseAutoFocus"> & Pick<SelectParts.TriggerProps, "id" | "name" | "size" | "startIcon" | "hasError" | "clearLabel" | "onClear"> & Pick<SelectParts.ValueProps, "placeholder"> & {
17
+ export declare const SingleSelect: React.ForwardRefExoticComponent<Omit<import("@strapi/ui-primitives/dist/components/Select/Select").SingleSelectProps, "value"> & Pick<import("@strapi/ui-primitives/dist/components/Select/Select").SelectContentImplProps, "onCloseAutoFocus"> & Pick<SelectParts.TriggerProps, "size" | "id" | "name" | "startIcon" | "hasError" | "clearLabel" | "onClear"> & Pick<SelectParts.ValueProps, "placeholder"> & {
18
18
  /**
19
19
  * @default (value) => value.toString()
20
20
  */
@@ -4,6 +4,7 @@ import { Field } from '../Field';
4
4
  interface TextareaProps extends Omit<BoxProps<'textarea'>, 'children'>, Pick<Field.InputProps, 'hasError' | 'id' | 'name' | 'required'> {
5
5
  value?: string;
6
6
  'aria-describedby'?: string;
7
+ resizable?: boolean;
7
8
  }
8
9
  declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
9
10
  export { Textarea };
@@ -1 +1 @@
1
- {"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAqB,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEnE,OAAO,EAAE,KAAK,EAAY,MAAM,UAAU,CAAC;AAE3C,UAAU,aACR,SAAQ,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,UAAU,CAAC,EAC5C,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,UAAU,GAAG,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,QAAA,MAAM,QAAQ,wGAsCb,CAAC;AA0BF,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
1
+ {"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAqB,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEnE,OAAO,EAAE,KAAK,EAAY,MAAM,UAAU,CAAC;AAE3C,UAAU,aACR,SAAQ,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,UAAU,CAAC,EAC5C,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,UAAU,GAAG,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,QAAQ,wGAkDb,CAAC;AA2BF,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
package/dist/index.d.ts CHANGED
@@ -1,3 +1,12 @@
1
+ /**
2
+ * Styled Components Module Declaration
3
+ * -----------------------------------------------------------------------------------------------*/
4
+ import 'styled-components';
5
+ import type { StrapiTheme } from './themes';
6
+ declare module 'styled-components' {
7
+ interface DefaultTheme extends StrapiTheme {
8
+ }
9
+ }
1
10
  export * from './components';
2
11
  export * from './primitives';
3
12
  export * from './themes';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AAKzB,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,mCAAmC,CAAC;AAClD,cAAc,oBAAoB,CAAC;AAKnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAK3C,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,MAAM,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;oGAEoG;AACpG,OAAO,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAO,QAAQ,mBAAmB,CAAC;IACjC,UAAiB,YAAa,SAAQ,WAAW;KAAG;CACrD;AAKD,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AAKzB,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,mCAAmC,CAAC;AAClD,cAAc,oBAAoB,CAAC;AAKnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAK3C,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,MAAM,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC"}
package/dist/index.js CHANGED
@@ -1,11 +1,11 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const styled = require("styled-components");
3
4
  const React = require("react");
4
5
  const reactUseCallbackRef = require("@radix-ui/react-use-callback-ref");
5
6
  const date = require("@internationalized/date");
6
7
  const jsxRuntime = require("react/jsx-runtime");
7
8
  const Tooltip = require("@radix-ui/react-tooltip");
8
- const styled = require("styled-components");
9
9
  const DismissibleLayerPrimitive = require("@radix-ui/react-dismissable-layer");
10
10
  const uiPrimitives = require("@strapi/ui-primitives");
11
11
  const RadixAccordion = require("@radix-ui/react-accordion");
@@ -51,9 +51,9 @@ function _interopNamespace(e) {
51
51
  n.default = e;
52
52
  return Object.freeze(n);
53
53
  }
54
+ const styled__default = /* @__PURE__ */ _interopDefault(styled);
54
55
  const React__namespace = /* @__PURE__ */ _interopNamespace(React);
55
56
  const Tooltip__namespace = /* @__PURE__ */ _interopNamespace(Tooltip);
56
- const styled__default = /* @__PURE__ */ _interopDefault(styled);
57
57
  const DismissibleLayerPrimitive__namespace = /* @__PURE__ */ _interopNamespace(DismissibleLayerPrimitive);
58
58
  const RadixAccordion__namespace = /* @__PURE__ */ _interopNamespace(RadixAccordion);
59
59
  const Avatar__namespace = /* @__PURE__ */ _interopNamespace(Avatar$1);
@@ -2338,15 +2338,11 @@ const KeyboardKeys = {
2338
2338
  LEFT: "ArrowLeft",
2339
2339
  ESCAPE: "Escape",
2340
2340
  ENTER: "Enter",
2341
- SPACE: " ",
2342
2341
  TAB: "Tab",
2343
2342
  END: "End",
2344
2343
  HOME: "Home",
2345
- DELETE: "Delete",
2346
2344
  PAGE_UP: "PageUp",
2347
- PAGE_DOWN: "PageDown",
2348
- BACKSPACE: "Backspace",
2349
- CLEAR: "Clear"
2345
+ PAGE_DOWN: "PageDown"
2350
2346
  };
2351
2347
  const CarouselGrid = styled.styled(Box)`
2352
2348
  grid-template-columns: auto 1fr auto;
@@ -3434,7 +3430,7 @@ const Overlay$1 = styled.styled(AlertDialog__namespace.Overlay)`
3434
3430
  const ContentImpl$1 = styled.styled(AlertDialog__namespace.Content)`
3435
3431
  max-width: 42rem;
3436
3432
  height: min-content;
3437
- width: 100%;
3433
+ width: calc(100% - ${({ theme }) => theme.spaces[8]});
3438
3434
  overflow: hidden;
3439
3435
  margin: 0 auto;
3440
3436
  display: flex;
@@ -3733,7 +3729,10 @@ const DesignSystemProvider = ({
3733
3729
  const DismissibleLayer = DismissibleLayerPrimitive__namespace.Root;
3734
3730
  const Portal$1 = React__namespace.forwardRef(
3735
3731
  ({ container = globalThis?.document?.body, ...portalProps }, forwardedRef) => {
3736
- return container ? reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx(Box, { ref: forwardedRef, ...portalProps }), container) : null;
3732
+ if (!container) {
3733
+ return null;
3734
+ }
3735
+ return reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx(Box, { ref: forwardedRef, ...portalProps }), container);
3737
3736
  }
3738
3737
  );
3739
3738
  Portal$1.displayName = "Portal";
@@ -5305,7 +5304,7 @@ const ContentImpl = styled.styled(Dialog__namespace.Content)`
5305
5304
  max-width: 83rem;
5306
5305
  max-height: 90vh;
5307
5306
  height: auto;
5308
- width: 60%;
5307
+ width: calc(100% - ${({ theme }) => theme.spaces[8]});
5309
5308
  overflow: hidden;
5310
5309
  margin: 0 auto;
5311
5310
  display: flex;
@@ -5321,6 +5320,9 @@ const ContentImpl = styled.styled(Dialog__namespace.Content)`
5321
5320
  box-shadow: ${(props) => props.theme.shadows.popupShadow};
5322
5321
  z-index: ${(props) => props.theme.zIndices.modal};
5323
5322
 
5323
+ ${({ theme }) => theme.breakpoints.medium} {
5324
+ width: calc(100% - ${({ theme }) => theme.spaces[9]});
5325
+ }
5324
5326
  > form {
5325
5327
  display: flex;
5326
5328
  flex-direction: column;
@@ -7089,7 +7091,15 @@ const TextInput = React__namespace.forwardRef((props, ref) => {
7089
7091
  });
7090
7092
  TextInput.displayName = "TextInput";
7091
7093
  const Textarea = React__namespace.forwardRef(
7092
- ({ disabled, hasError: hasErrorProp, id: idProp, name: nameProp, required: requiredProp, ...props }, ref) => {
7094
+ ({
7095
+ disabled,
7096
+ hasError: hasErrorProp,
7097
+ id: idProp,
7098
+ name: nameProp,
7099
+ required: requiredProp,
7100
+ resizable = true,
7101
+ ...props
7102
+ }, ref) => {
7093
7103
  const { error, ...field } = useField("Textarea");
7094
7104
  const hasError = Boolean(error) || hasErrorProp;
7095
7105
  const id = field.id ?? idProp;
@@ -7120,18 +7130,20 @@ const Textarea = React__namespace.forwardRef(
7120
7130
  id,
7121
7131
  name,
7122
7132
  "aria-describedby": ariaDescription,
7133
+ $resizable: resizable,
7123
7134
  ...props
7124
7135
  }
7125
7136
  ) });
7126
7137
  }
7127
7138
  );
7128
7139
  const Wrapper$1 = styled.styled(Box)`
7129
- height: 10.5rem;
7130
7140
  ${inputFocusStyle()}
7131
7141
  `;
7132
7142
  const TextareaElement = styled.styled(Box)`
7143
+ display: block;
7133
7144
  border: none;
7134
- resize: none;
7145
+ resize: ${({ $resizable }) => $resizable ? "vertical" : "none"};
7146
+ min-height: ${({ minHeight }) => minHeight || "10.5rem"};
7135
7147
 
7136
7148
  &::placeholder {
7137
7149
  color: ${({ theme }) => theme.colors.neutral600};