carbon-react 162.10.0 → 162.12.0-beta.1

package/esm/components/select/simple-select/simple-select.component.d.ts

@@ -1,59 +0,0 @@
-import React from "react";
-import { FormInputPropTypes } from "../__internal__/select-textbox";
-import { ListPlacement } from "../__internal__/select-list/select-list.component";
-export interface CustomSelectChangeEvent extends React.ChangeEvent<HTMLInputElement> {
-    selectionConfirmed?: boolean;
-}
-export interface SimpleSelectProps extends Omit<FormInputPropTypes, "defaultValue" | "value"> {
-    /** Prop to specify the aria-describedby property of the component input */
-    "aria-describedby"?: string;
-    /** Prop to specify the aria-label attribute of the component input */
-    "aria-label"?: string;
-    /** Prop to specify the aria-labelledby property of the component input */
-    "aria-labelledby"?: string;
-    /** Child components (such as Option or OptionRow) for the SelectList */
-    children: React.ReactNode;
-    /** If true the loader animation is displayed in the option list */
-    isLoading?: boolean;
-    /** When true component will work in multi column mode.
-     * Children should consist of OptionRow components in this mode
-     */
-    multiColumn?: boolean;
-    /** A callback that is triggered when a user scrolls to the bottom of the list */
-    onListScrollBottom?: () => void;
-    /** A custom callback for when the dropdown menu opens */
-    onOpen?: () => void;
-    /** If true the Component opens on focus */
-    openOnFocus?: boolean;
-    /** SelectList table header, should consist of multiple th elements.
-     * Works only in multiColumn mode
-     */
-    tableHeader?: React.ReactNode;
-    /** If true the component input has no border and is transparent */
-    transparent?: boolean;
-    /** The selected value(s) */
-    value: string | Record<string, unknown>;
-    /** [Legacy] Overrides the default tooltip position */
-    tooltipPosition?: "top" | "bottom" | "left" | "right";
-    /** Maximum list height - defaults to 180 */
-    listMaxHeight?: number;
-    /** Placement of the select list in relation to the input element */
-    listPlacement?: ListPlacement;
-    /** Use the opposite list placement if the set placement does not fit */
-    flipEnabled?: boolean;
-    /** Set this prop to enable a virtualised list of options. If it is not used then all options will be in the
-     * DOM at all times, which may cause performance problems on very large lists */
-    enableVirtualScroll?: boolean;
-    /** The number of options to render into the DOM at once, either side of the currently-visible ones.
-     * Higher values make for smoother scrolling but may impact performance.
-     * Only used if the `enableVirtualScroll` prop is set. */
-    virtualScrollOverscan?: number;
-    /** Flag to configure component as mandatory */
-    isRequired?: boolean;
-    /** Specify a callback triggered on change */
-    onChange: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
-    /** Override the default width of the list element. Number passed is converted into pixel value */
-    listWidth?: number;
-}
-export declare const SimpleSelect: React.ForwardRefExoticComponent<SimpleSelectProps & React.RefAttributes<HTMLInputElement>>;
-export default SimpleSelect;

package/esm/components/select/simple-select/simple-select.component.js

@@ -1 +0,0 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import n,{useRef as r,useState as o,useMemo as l,useCallback as i,useEffect as a}from"react";import"../../../style/utils/filter-styled-system-padding-props.js";import c from"../../../style/utils/filter-styled-system-margin-props.js";import s from"../../../style/utils/filter-out-styled-system-spacing-props.js";import u from"../select.style.js";import d from"../__internal__/select-textbox/select-textbox.component.js";import p from"../__internal__/select-list/select-list.component.js";import m from"../../../__internal__/utils/helpers/guid/index.js";import b from"../__internal__/utils/get-next-child-by-text.js";import f from"../__internal__/utils/is-expected-option.js";import y from"../__internal__/utils/is-navigation-key.js";import O from"../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import v from"../../../hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js";function g(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function w(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){g(e,t,n[t])}))}return e}function _(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const h=n.forwardRef(((g,h)=>{var{"aria-describedby":j,"aria-label":P,"aria-labelledby":S,value:x,id:k,label:C,name:D,disabled:E,readOnly:L,children:T,transparent:I,openOnFocus:F=!1,onOpen:M,onChange:V,onClick:B,onFocus:H,onKeyDown:K,onBlur:A,isLoading:q,listMaxHeight:W,onListScrollBottom:R,tableHeader:z,multiColumn:G,tooltipPosition:J,"data-element":N,"data-role":Q,listPlacement:U="bottom",flipEnabled:X=!0,enableVirtualScroll:Y,virtualScrollOverscan:Z,required:$,listWidth:ee}=g,te=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(g,["aria-describedby","aria-label","aria-labelledby","value","id","label","name","disabled","readOnly","children","transparent","openOnFocus","onOpen","onChange","onClick","onFocus","onKeyDown","onBlur","isLoading","listMaxHeight","onListScrollBottom","tableHeader","multiColumn","tooltipPosition","data-element","data-role","listPlacement","flipEnabled","enableVirtualScroll","virtualScrollOverscan","required","listWidth"]);const ne=r(m()),re=r(null),oe=r(null),le=r(void 0),ie=r(),ae=r(),ce=r(),se=r(),[ue,de]=o(),[pe,me]=o(!1),[be,fe]=o(""),[ye,Oe]=o(""),[ve,ge]=o(x),we=r(k||m()),{labelId:_e}=O({id:we.current,label:C}),he=r(void 0),je=r(!1),Pe=l((()=>n.Children.toArray(T)),[T]),Se=i(((e,t=!1)=>({target:_(w({},D&&{name:D},k&&{id:k}),{value:e}),selectionConfirmed:t})),[D,k]),xe=i((e=>{const t=Pe.findIndex((e=>n.isValidElement(e)&&f(e,ve))),r=b(e,Pe,t);r&&V(Se(r.props.value))}),[Pe,Se,V,ve]),ke=i((e=>{if(ae.current){const t=se.current+e;se.current=t,xe(t),window.clearTimeout(le.current)}else se.current=e,xe(e);ae.current=!0,window.clearTimeout(le.current),le.current=window.setTimeout((()=>{ae.current=!1,se.current=""}),500)}),[xe]),Ce=i((e=>{const{key:t}=e;null==K||K(e),L||(" "===t||y(t)?(e.preventDefault(),me((e=>(e||null==M||M(),!0)))):1!==t.length||e.metaKey||e.ctrlKey||ke(t))}),[ke,K,M,L]),De=i((e=>{const t=re.current&&!re.current.contains(e.target),n=oe.current&&!oe.current.contains(e.target);ie.current=!1,t&&n&&!ce.current&&me(!1),ce.current=!1}),[]);function Ee(e){ie.current=!1,null==B||B(e),me((e=>(je.current=e,!e&&(null==M||M(),!0))))}a((()=>{ge(x)}),[x]),a((()=>{const e=Pe.find((e=>f(e,ve)));let t="";e&&(t=e.props.text),Oe(t)}),[ve,Pe]),a((()=>{const e="click";return window.addEventListener(e,De),function(){window.removeEventListener(e,De)}}),[De]),a((()=>function(){window.clearTimeout(le.current),window.clearTimeout(he.current)}),[]),v((()=>me(!1)));const Le=i((()=>{me(!1)}),[]),Te=i((e=>{e&&(de(e),h&&("function"==typeof h?h(e):h.current=e))}),[h]);let Ie;switch(U){case"top":Ie="top-end";break;case"bottom":Ie="bottom-end";break;default:Ie=U}const Fe=e(p,{ref:oe,id:ne.current,labelId:_e,anchorElement:(null==ue?void 0:ue.parentElement)||void 0,onSelect:e=>{const{text:t,value:n,selectionType:r,id:o,selectionConfirmed:l}=e,i="click"===r;!function(e,t,n){null==V||V(Se(e,n))}(n,0,l),fe(o),"navigationKey"!==r&&me(!1),i&&(ce.current=!0,null==ue||ue.focus())},onMouseDown:function(){ie.current=!0},onSelectListClose:Le,highlightedValue:ve,listMaxHeight:W,isLoading:q,onListScrollBottom:R,tableHeader:z,multiColumn:G,listPlacement:void 0!==ee?Ie:U,flipEnabled:X,isOpen:pe,enableVirtualScroll:Y,virtualScrollOverscan:Z,listWidth:ee,children:T}),Me=c(te);return t(u,_(w({transparent:I,disabled:E,readOnly:L,"data-component":"simple-select","data-role":Q,"data-element":N,isOpen:pe},Me),{children:[e("div",{ref:re,children:e(d,_(w({ref:Te,ariaLabel:P,"aria-controls":ne.current,activeDescendantId:be,ariaLabelledby:S,"aria-describedby":j,isOpen:pe,value:ye,selectType:"simple"},_(w({id:we.current,name:D,disabled:E,readOnly:L,selectedValue:ve,formattedValue:ye,onClick:Ee,iconOnClick:function(e){Ee(e)},label:C,labelId:_e,onMouseDown:function(){ie.current=!0},onFocus:function(e){if(!ce.current)if(null==H||H(e),ie.current)ie.current=!1;else if(F){if(window.clearTimeout(he.current),je.current)return void(je.current=!1);he.current=window.setTimeout((()=>{me((e=>(e||null==M||M(),!0)))}))}},onKeyDown:Ce,onBlur:function(e){ie.current||null==A||A(e)},tooltipPosition:J,required:$,transparent:I},s(te)),{"data-component":void 0})),{onChange:()=>{}}))}),Fe]}))}));export{h as SimpleSelect,h as default};

package/esm/components/settings-row/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./settings-row.component";
-export type { SettingsRowProps } from "./settings-row.component";

package/esm/components/settings-row/index.js

@@ -1 +0,0 @@
-export{SettingsRow as default}from"./settings-row.component.js";

package/esm/components/settings-row/settings-row.component.d.ts

@@ -1,33 +0,0 @@
-import React from "react";
-import { MarginProps } from "styled-system";
-import { HeadingType } from "../heading";
-import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-/**
- * @deprecated `SettingsRow` has been deprecated. See the Carbon documentation for migration details.
- */
-export interface SettingsRowProps extends MarginProps, TagProps {
-    /**  A title for this group of settings. */
-    title?: string;
-    /** Defines the HTML heading element of the `title` within the component. */
-    headingType?: HeadingType;
-    /** Content to be rendered inside the component. */
-    children?: React.ReactNode;
-    /**  A string or JSX object that provides a short description about the group of settings. */
-    description?: React.ReactNode;
-    /** Shows a divider below the component. */
-    divider?: boolean;
-    /**
-     * @private
-     * @internal
-     * @ignore
-     * Sets className for component. INTERNAL USE ONLY. */
-    className?: string;
-}
-/**
- * @deprecated `SettingsRow` has been deprecated. See the Carbon documentation for migration details.
- */
-export declare const SettingsRow: {
-    ({ title, headingType, children, description, divider, ...rest }: SettingsRowProps): React.JSX.Element;
-    displayName: string;
-};
-export default SettingsRow;

package/esm/components/settings-row/settings-row.component.js

@@ -1 +0,0 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import"react";import{Heading as r}from"../heading/heading.component.js";import n from"../../__internal__/utils/helpers/tags/tags.js";import"../../style/utils/filter-styled-system-padding-props.js";import i from"../../style/utils/filter-styled-system-margin-props.js";import{StyledSettingsRow as o,StyledSettingsRowHeader as s,StyledSettingsRowInput as l}from"./settings-row.style.js";function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){c(e,t,r[t])}))}return e}function a(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const u=c=>{var{title:u,headingType:y="h3",children:f,description:d,divider:b=!0}=c,O=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(c,["title","headingType","children","description","divider"]);return e(o,a(p(a(p({hasDivider:b,"data-role":"settings-row"},n("settings-row",O)),{m:0}),i(O)),{children:[t(s,{children:u?t(r,{headingType:y,title:u,subheader:d,separator:void 0!==d,divider:!1}):null}),t(l,{children:f})]}))};u.displayName="SettingsRow";export{u as SettingsRow,u as default};

package/esm/components/settings-row/settings-row.style.d.ts

@@ -1,9 +0,0 @@
-interface DividerProps {
-    hasDivider: boolean;
-}
-export declare const StyledSettingsRow: import("styled-components").StyledComponent<"div", any, {
-    theme: object;
-} & DividerProps, "theme">;
-export declare const StyledSettingsRowHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledSettingsRowInput: import("styled-components").StyledComponent<"div", any, {}, never>;
-export {};

package/esm/components/settings-row/settings-row.style.js

@@ -1 +0,0 @@
-import t,{css as o}from"styled-components";import{margin as e}from"styled-system";import i from"../../style/themes/apply-base-theme.js";import{StyledHeader as s,StyledSeparator as n}from"../heading/heading.style.js";const r=t.div.attrs(i).withConfig({displayName:"settings-row.style__StyledSettingsRow",componentId:"carbon_v162_9_1__sc-b1bd4709-0"})([""," clear:both;color:var(--colorsUtilityYin055);display:flex;font-size:14px;justify-content:space-between;padding:0;position:relative;"," ","{margin-bottom:0;}","{margin-bottom:17px;}+ &{padding-top:30px;}"],e,(({hasDivider:t})=>t&&o(["border-bottom:1px solid var(--colorsUtilityMajor050);padding-bottom:30px;"])),s,n),d=t.div.withConfig({displayName:"settings-row.style__StyledSettingsRowHeader",componentId:"carbon_v162_9_1__sc-b1bd4709-1"})(["box-sizing:border-box;clear:both;float:left;max-width:325px;width:35%;"]),a=t.div.withConfig({displayName:"settings-row.style__StyledSettingsRowInput",componentId:"carbon_v162_9_1__sc-b1bd4709-2"})(["box-sizing:border-box;clear:both;float:left;margin-left:50px;width:100%;"]);export{r as StyledSettingsRow,d as StyledSettingsRowHeader,a as StyledSettingsRowInput};

package/esm/components/sidebar/__internal__/sidebar-content/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./sidebar-content.component";

package/esm/components/sidebar/__internal__/sidebar-content/index.js

@@ -1 +0,0 @@
-export{default}from"./sidebar-content.component.js";

package/esm/components/sidebar/__internal__/sidebar-content/sidebar-content.component.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-import { PaddingProps } from "styled-system";
-interface SidebarContentProps extends PaddingProps {
-    children?: React.ReactNode;
-    disableStickyOnSmallScreen: boolean;
-    footer?: React.ReactNode;
-    isSmallScreen: boolean;
-    stickyFooter: boolean;
-}
-declare const SidebarContent: ({ children, disableStickyOnSmallScreen, footer, isSmallScreen, stickyFooter, ...padding }: SidebarContentProps) => React.JSX.Element;
-export default SidebarContent;

package/esm/components/sidebar/__internal__/sidebar-content/sidebar-content.component.js

@@ -1 +0,0 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import r from"react";import n from"../sidebar.context.js";import o from"../sidebar-footer/sidebar-footer.component.js";import{StyledSidebarContent as c,StyledSidebarBody as i}from"./sidebar-content.style.js";function l(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){l(e,t,r[t])}))}return e}function s(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const b=l=>{var{children:b,disableStickyOnSmallScreen:y,footer:f,isSmallScreen:u,stickyFooter:d}=l,O=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},c=Object.keys(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(l,["children","disableStickyOnSmallScreen","footer","isSmallScreen","stickyFooter"]);const p=null!=f&&""!==f&&r.Children.toArray(f).length>0,m=u&&!y,S=e(n.Provider,{value:{isInSidebar:!0,isStickyContentFocusable:m},children:b});return t(c,s(a({"data-element":"sidebar-content","data-role":"sidebar-content",tabIndex:-1,$disableStickyOnSmallScreen:y,$hasCustomFooter:p,$stickyFooter:d},O),{children:[p?e(i,s(a({"data-element":"sidebar-body","data-role":"sidebar-body",tabIndex:d&&m?0:-1,$disableStickyOnSmallScreen:y,$stickyFooter:d},O),{children:S})):S,p?e(o,{disableStickyOnSmallScreen:y,sticky:d,children:f}):null]}))};export{b as default};

package/esm/components/sidebar/__internal__/sidebar-content/sidebar-content.style.d.ts

@@ -1,13 +0,0 @@
-import { PaddingProps } from "styled-system";
-type StyledSidebarContentProps = PaddingProps & {
-    $disableStickyOnSmallScreen?: boolean;
-    $hasCustomFooter?: boolean;
-    $stickyFooter?: boolean;
-};
-type StyledSidebarBodyProps = PaddingProps & {
-    $disableStickyOnSmallScreen?: boolean;
-    $stickyFooter?: boolean;
-};
-declare const StyledSidebarBody: import("styled-components").StyledComponent<"div", any, StyledSidebarBodyProps, never>;
-declare const StyledSidebarContent: import("styled-components").StyledComponent<"div", any, StyledSidebarContentProps, never>;
-export { StyledSidebarBody, StyledSidebarContent };

package/esm/components/sidebar/__internal__/sidebar-content/sidebar-content.style.js

@@ -1 +0,0 @@
-import o,{css as a}from"styled-components";import{padding as e}from"styled-system";import{StyledForm as i,StyledFormContent as l,StyledFormFooter as t,StyledLeftButtons as r,StyledRightButtons as d}from"../../../form/form.style.js";import{smallScreenBreakpoint as n}from"../../sidebar.config.js";const s=o.div.withConfig({displayName:"sidebar-content.style__StyledSidebarBody",componentId:"carbon_v162_9_1__sc-1a52a5d4-0"})(["box-sizing:border-box;flex:1 0 auto;padding:var(--global-space-comp-xl);"," &:has(",".sticky){padding:var(--global-space-comp-none);}"," ",""],e,i,(({$stickyFooter:o})=>o&&a(["flex:1 1 auto;min-height:var(--global-size-none);overflow-y:auto;"])),(({$disableStickyOnSmallScreen:o})=>o&&a(["@media screen and (max-width:","){overflow-y:visible;}"],n))),c=o.div.withConfig({displayName:"sidebar-content.style__StyledSidebarContent",componentId:"carbon_v162_9_1__sc-1a52a5d4-1"})(["box-sizing:border-box;display:block;overflow-y:auto;flex-grow:1;color:var(--container-standard-txt-default);font:var(--global-font-static-body-regular-m);padding:var(--global-space-comp-xl);"," "," &:has(",".sticky){display:flex;flex-direction:column;overflow-y:hidden;padding:0;",".sticky{","{padding:var(--global-space-comp-xl);","}","{background:var(--container-standard-bg-default);border-top:var(--global-borderwidth-xs) solid var(--container-standard-border-default);gap:var(--global-space-comp-m);padding:var(--global-space-comp-l) var(--global-space-comp-xl);",",","{gap:var(--global-space-comp-m);}}}}",""],e,(({$hasCustomFooter:o,$stickyFooter:e})=>o&&a(["display:flex;flex-direction:column;padding:var(--global-space-comp-none);",""],e&&a(["min-height:var(--global-size-none);overflow-y:hidden;"]))),i,i,l,e,t,r,d,(({$disableStickyOnSmallScreen:o})=>o&&a(["@media screen and (max-width:","){flex:0 0 auto;min-height:auto;overflow-y:visible;&:has(",".sticky){overflow-y:visible;",".sticky{height:auto;","{overflow-y:visible;}","{box-shadow:none;position:static;}}}}"],n,i,i,l,t)));export{s as StyledSidebarBody,c as StyledSidebarContent};

package/esm/components/sidebar/__internal__/sidebar-footer/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./sidebar-footer.component";

package/esm/components/sidebar/__internal__/sidebar-footer/index.js

@@ -1 +0,0 @@
-export{default}from"./sidebar-footer.component.js";

package/esm/components/sidebar/__internal__/sidebar-footer/sidebar-footer.component.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-interface SidebarFooterProps {
-    children: React.ReactNode;
-    disableStickyOnSmallScreen: boolean;
-    sticky: boolean;
-}
-declare const SidebarFooter: ({ children, disableStickyOnSmallScreen, sticky, }: SidebarFooterProps) => React.JSX.Element;
-export default SidebarFooter;

package/esm/components/sidebar/__internal__/sidebar-footer/sidebar-footer.component.js

@@ -1 +0,0 @@
-import{jsx as e}from"react/jsx-runtime";import"react";import r from"./sidebar-footer.style.js";const t=({children:t,disableStickyOnSmallScreen:a,sticky:i})=>e(r,{$disableStickyOnSmallScreen:a,$sticky:i,"data-element":"sidebar-footer","data-role":"sidebar-footer",children:t});export{t as default};

package/esm/components/sidebar/__internal__/sidebar-footer/sidebar-footer.style.d.ts

@@ -1,6 +0,0 @@
-interface StyledSidebarFooterProps {
-    $disableStickyOnSmallScreen?: boolean;
-    $sticky?: boolean;
-}
-declare const StyledSidebarFooter: import("styled-components").StyledComponent<"div", any, StyledSidebarFooterProps, never>;
-export default StyledSidebarFooter;

package/esm/components/sidebar/__internal__/sidebar-footer/sidebar-footer.style.js

@@ -1 +0,0 @@
-import a,{css as o}from"styled-components";import{smallScreenBreakpoint as t}from"../../sidebar.config.js";const e=a.div.withConfig({displayName:"sidebar-footer.style__StyledSidebarFooter",componentId:"carbon_v162_9_1__sc-4baa6a8b-0"})(["background:var(--container-standard-bg-default);box-sizing:border-box;display:flex;gap:var(--global-space-layout-2-xs);min-height:var(--global-size-3-xl);padding:var(--global-space-comp-l) var(--global-space-comp-xl);width:100%;"," ",""],(({$sticky:a})=>a&&o(["border-top:var(--global-borderwidth-xs) solid var(--container-standard-border-default);box-shadow:var(--global-depth-sticky-b);position:sticky;bottom:0;"])),(({$disableStickyOnSmallScreen:a})=>a&&o(["@media screen and (max-width:","){box-shadow:none;position:static;}"],t)));export{e as default};

package/esm/components/sidebar/__internal__/sidebar-header/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./sidebar-header.component";
-export { SidebarSubHeader } from "./sidebar-header.component";

package/esm/components/sidebar/__internal__/sidebar-header/index.js

@@ -1 +0,0 @@
-export{SidebarSubHeader,default}from"./sidebar-header.component.js";

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.component.d.ts

@@ -1,30 +0,0 @@
-import React from "react";
-import { PaddingProps } from "styled-system";
-export interface SidebarHeaderProps extends PaddingProps {
-    /** This component supports children. */
-    children?: React.ReactNode;
-    /** A custom id. */
-    id: string;
-    /** Close button to be rendered. */
-    closeButton?: React.ReactNode;
-    /** Header background variant for the sidebar. */
-    headerVariant?: "typical" | "inverse" | "light" | "dark";
-    /** Adds the Carbon AI gradient keyline to the header. */
-    gradientKeyLine?: boolean;
-}
-export interface SidebarSubHeaderProps extends PaddingProps {
-    /** This component supports children. */
-    children?: React.ReactNode;
-    /** A custom id. */
-    id: string;
-}
-declare const SidebarHeader: {
-    ({ children, id, closeButton, headerVariant, gradientKeyLine, ...rest }: SidebarHeaderProps): React.JSX.Element;
-    displayName: string;
-};
-declare const SidebarSubHeader: {
-    ({ children, id, ...rest }: SidebarSubHeaderProps): React.JSX.Element;
-    displayName: string;
-};
-export default SidebarHeader;
-export { SidebarSubHeader };

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.component.js

@@ -1 +0,0 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import"react";import{Typography as t}from"../../../typography/typography.component.js";import n,{StyledSidebarSubHeader as a,StyledSidebarHeaderDivider as i}from"./sidebar-header.style.js";function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function d(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){o(e,r,t[r])}))}return e}function c(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function l(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}const b=a=>{var{children:o,id:b,closeButton:p,headerVariant:s,gradientKeyLine:u}=a,y=l(a,["children","id","closeButton","headerVariant","gradientKeyLine"]);return e(n,c(d({$hasCloseButton:!!p,"data-component":"sidebar-header","data-role":"sidebar-header",$headerVariant:s,$gradientKeyLine:u},y),{children:[r("div",{"data-element":"sidebar-heading",id:b,children:"string"==typeof o?r(t,{as:"h1","data-element":"sidebar-title",variant:"h2",wordBreak:"normal",wordWrap:"break-word",children:o}):o}),p,r(i,{"aria-hidden":"true","data-element":"sidebar-header-divider"})]}))},p=e=>{var{children:t,id:n}=e,i=l(e,["children","id"]);return r(a,c(d({"data-component":"sidebar-subheader",id:n},i),{children:t}))};b.displayName="SidebarHeader",p.displayName="SidebarSubHeader";export{p as SidebarSubHeader,b as default};

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.style.d.ts

@@ -1,15 +0,0 @@
-declare const StyledSidebarHeader: import("styled-components").StyledComponent<"div", any, {
-    theme: object;
-} & {
-    $hasCloseButton?: boolean;
-    $headerVariant?: "typical" | "inverse" | "light" | "dark";
-    $gradientKeyLine?: boolean;
-}, "theme">;
-declare const StyledSidebarHeaderDivider: import("styled-components").StyledComponent<"hr", any, {
-    theme: object;
-}, "theme">;
-declare const StyledSidebarSubHeader: import("styled-components").StyledComponent<"div", any, {
-    theme: object;
-}, "theme">;
-export default StyledSidebarHeader;
-export { StyledSidebarHeaderDivider, StyledSidebarSubHeader };

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.style.js

@@ -1 +0,0 @@
-import a,{css as e}from"styled-components";import{padding as r}from"styled-system";import t from"../../../../style/themes/apply-base-theme.js";import o from"../../../icon/icon.style.js";const d=a.div.attrs(t).withConfig({displayName:"sidebar-header.style__StyledSidebarHeader",componentId:"carbon_v162_9_1__sc-1ddc81ab-0"})([""," box-sizing:border-box;flex:0 0 auto;min-height:calc((2 * var(--global-space-comp-xl)) + var(--global-size-s));width:100%;transition:all 0.2s ease;padding:var(--global-space-comp-xl);"," "," ",' div[data-element="sidebar-heading"]{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--global-space-comp-xs);min-width:0;width:100%;[data-element="sidebar-title"]{color:inherit;}}'],(({$headerVariant:a})=>{const r="inverse"===a||"dark"===a;return e(["background-color:",";color:",";position:relative;"],r?"var(--container-standard-inverse-bg-default)":"var(--container-standard-bg-default)",r?"var(--container-standard-inverse-txt-default)":"var(--container-standard-txt-default)")}),(({$gradientKeyLine:a})=>a&&e(["border-top:var(--global-borderwidth-xxl) solid transparent;border-image:var(--container-standard-border-ai-h) 1;"])),r,(({$hasCloseButton:a,$headerVariant:r})=>a&&e(['display:flex;justify-content:space-between;gap:var(--global-space-comp-l);> [data-component="close"]:first-of-type{'," align-self:flex-start;border-radius:var(--global-radius-action-circle);flex:0 0 auto;height:var(--global-size-s);min-width:var(--global-size-s);width:var(--global-size-s);","{height:var(--global-size-2-xs);width:var(--global-size-2-xs);}}"],("inverse"===r||"dark"===r)&&e(["","{color:var(--container-standard-inverse-txt-default);}&:is(:hover,:active,:focus) ","{color:var(--container-standard-inverse-txt-default);}&:disabled ","{color:var(--container-standard-inverse-txt-alt);}"],o,o,o),o))),i=a.hr.attrs(t).withConfig({displayName:"sidebar-header.style__StyledSidebarHeaderDivider",componentId:"carbon_v162_9_1__sc-1ddc81ab-1"})(["background:var(--container-standard-border-default);border:var(--global-borderwidth-none);bottom:0;height:var(--global-borderwidth-xs);left:0;margin:0;position:absolute;right:0;"]),l=a.div.attrs(t).withConfig({displayName:"sidebar-header.style__StyledSidebarSubHeader",componentId:"carbon_v162_9_1__sc-1ddc81ab-2"})(["box-sizing:border-box;width:100%;color:var(--container-standard-txt-default);background-color:var(--container-standard-bg-alt);border-bottom:var(--global-borderwidth-xs) solid var(--container-standard-border-default);padding:var(--global-space-comp-s) var(--global-space-comp-2-xl);"," transition:all 0.2s ease;"],r);export{i as StyledSidebarHeaderDivider,l as StyledSidebarSubHeader,d as default};

package/esm/components/sidebar/__internal__/sidebar.context.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-export interface SidebarContextProps {
-    isInSidebar?: boolean;
-    isStickyContentFocusable?: boolean;
-}
-declare const _default: React.Context<SidebarContextProps>;
-export default _default;

package/esm/components/sidebar/__internal__/sidebar.context.js

@@ -1 +0,0 @@
-import t from"react";var e=t.createContext({});export{e as default};

package/esm/components/sidebar/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./sidebar.component";
-export type { SidebarProps } from "./sidebar.component";

package/esm/components/sidebar/index.js

@@ -1 +0,0 @@
-export{Sidebar as default}from"./sidebar.component.js";

package/esm/components/sidebar/sidebar.component.d.ts

@@ -1,96 +0,0 @@
-import React, { RefObject } from "react";
-import { PaddingProps, WidthProps } from "styled-system";
-import type { ModalProps } from "../../__internal__/modal";
-import { type TagProps } from "../../__internal__/utils/helpers/tags";
-export interface SidebarProps extends PaddingProps, TagProps, WidthProps, Pick<ModalProps, "topModalOverride" | "restoreFocusOnClose"> {
-    /** Prop to specify the aria-describedby property of the component */
-    "aria-describedby"?: string;
-    /**
-     * Provides an explicit accessible name for the component, overriding the
-     * automatic association with the header.
-     */
-    "aria-label"?: string;
-    /**
-     * Identifies the element that provides an explicit accessible name for the
-     * component, overriding the automatic association with the header.
-     */
-    "aria-labelledby"?: string;
-    /** Modal content */
-    children?: React.ReactNode;
-    /** Data tag prop bag for close Button */
-    closeButtonDataProps?: Pick<TagProps, "data-role" | "data-element">;
-    /** Determines if the Esc Key closes the modal */
-    disableEscKey?: boolean;
-    /** Set this prop to false to hide the translucent background when the dialog is open. */
-    enableBackgroundUI?: boolean;
-    /**
-     * Whether the Sidebar uses its full-screen presentation below the small-screen breakpoint.
-     * @private
-     * @internal
-     * @ignore
-     */
-    fullScreenOnSmallScreen?: boolean;
-    /**
-     * When true, header and footer become non-sticky and scroll with content
-     * for accessibility on small screen devices.
-     */
-    disableStickyOnSmallScreen?: boolean;
-    /** Optional reference to an element meant to be focused on open */
-    focusFirstElement?: React.MutableRefObject<HTMLElement | null>;
-    /** Footer content to be rendered at the bottom of the Sidebar. */
-    footer?: React.ReactNode;
-    disableAutoFocus?: boolean;
-    /**
-     * Function to replace focus trap
-     * @ignore
-     * @private
-     */
-    bespokeFocusTrap?: (ev: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void;
-    /** Node that will be used as sidebar header. */
-    header?: React.ReactNode;
-    /** Node that will be used as sidebar subheader. */
-    subHeader?: React.ReactNode;
-    /**
-     * Header background variant for the sidebar.
-     * `light` and `dark` are deprecated aliases - use `typical` and `inverse` instead.
-     */
-    headerVariant?: "typical" | "inverse" | "light" | "dark";
-    /** Adds the Carbon AI gradient keyline to the header. */
-    gradientKeyLine?: boolean;
-    /** A custom close event handler */
-    onCancel?: (ev: React.KeyboardEvent<HTMLElement> | KeyboardEvent | React.MouseEvent<HTMLElement>) => void;
-    /** Sets the open state of the modal */
-    open: boolean;
-    /** @deprecated This prop will be removed in a future release.
-     * Sidebar will always be positioned on the right.
-     * Update the layout to support a right-positioned Sidebar if it is set to
-     * left, otherwise remove the prop.
-     * */
-    position?: "left" | "right";
-    /** The ARIA role to be applied to the component container */
-    role?: string;
-    /** @deprecated Use `width` to customise the Sidebar width. */
-    size?: "extra-small" | "small" | "medium-small" | "medium" | "medium-large" | "large" | "extra-large";
-    /** Enables width animation when the sidebar width changes. */
-    widthAnimation?: boolean;
-    /** Makes the footer stick to the bottom of the Sidebar when content scrolls. */
-    stickyFooter?: boolean;
-    /** an optional array of refs to containers whose content should also be reachable by tabbing from the sidebar */
-    focusableContainers?: RefObject<HTMLElement>[];
-    /** Optional selector to identify the focusable elements, if not provided a default selector is used */
-    focusableSelectors?: string;
-    /** Padding to be set on the Sidebar header */
-    headerPadding?: PaddingProps;
-    /** Padding to be set on the Sidebar subheader */
-    subHeaderPadding?: PaddingProps;
-    /**
-     * @private
-     * @ignore
-     * @internal
-     * Sets className for component. INTERNAL USE ONLY. */
-    className?: string;
-    /** @private @ignore Whether the `Sidebar` is hidden from view when rendered in an `AdaptiveSidebar`. */
-    hidden?: boolean;
-}
-export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
-export default Sidebar;

package/esm/components/sidebar/sidebar.component.js

@@ -1 +0,0 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import t,{useRef as o,useCallback as n}from"react";import{StyledSidebar as a,StyledSidebarModal as i}from"./sidebar.style.js";import{Button as l}from"../button/__next__/button.component.js";import s from"../../__internal__/focus-trap/focus-trap.component.js";import c,{SidebarSubHeader as d}from"./__internal__/sidebar-header/sidebar-header.component.js";import u from"./__internal__/sidebar-content/sidebar-content.component.js";import b from"../../__internal__/utils/helpers/guid/index.js";import p from"../../hooks/__internal__/useLocale/useLocale.js";import f from"../../style/utils/filter-styled-system-padding-props.js";import m from"../../__internal__/utils/helpers/tags/tags.js";import y from"../../hooks/__internal__/useModalAria/useModalAria.js";import O from"../../hooks/useMediaQuery/useMediaQuery.js";import{smallScreenBreakpoint as h}from"./sidebar.config.js";function S(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function j(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){S(e,r,t[r])}))}return e}function _(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const g=t.forwardRef(((t,S)=>{var{"aria-describedby":g,"aria-label":k,"aria-labelledby":w,"data-element":P="sidebar","data-role":v,open:F,bespokeFocusTrap:B,closeButtonDataProps:C,disableAutoFocus:E=!1,disableEscKey:x=!1,disableStickyOnSmallScreen:A=!1,enableBackgroundUI:M=!1,fullScreenOnSmallScreen:D=!0,header:K,headerVariant:L="typical",gradientKeyLine:T=!1,subHeader:z,position:H="right",size:I,children:N,onCancel:$,role:R="dialog",focusFirstElement:U,focusableContainers:V,focusableSelectors:Q,footer:W,width:q,widthAnimation:G=!1,stickyFooter:J=!1,headerPadding:X={},subHeaderPadding:Y={},topModalOverride:Z,restoreFocusOnClose:ee=!0,className:re,hidden:te}=t,oe=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},a=Object.keys(e);for(o=0;o<a.length;o++)t=a[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)t=a[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(t,["aria-describedby","aria-label","aria-labelledby","data-element","data-role","open","bespokeFocusTrap","closeButtonDataProps","disableAutoFocus","disableEscKey","disableStickyOnSmallScreen","enableBackgroundUI","fullScreenOnSmallScreen","header","headerVariant","gradientKeyLine","subHeader","position","size","children","onCancel","role","focusFirstElement","focusableContainers","focusableSelectors","footer","width","widthAnimation","stickyFooter","headerPadding","subHeaderPadding","topModalOverride","restoreFocusOnClose","className","hidden"]);const ne=p(),ae=O("screen and (prefers-reduced-motion: no-preference)"),ie=Boolean(O(`screen and (max-width: ${h})`)),{current:le}=o(b()),{current:se}=o(b()),ce=o(null),de=n((e=>{ce.current=e,S&&("object"==typeof S&&(S.current=e),"function"==typeof S&&S(e))}),[S]),ue=y(ce,te),be=$?r(l,j({"aria-label":ne.sidebar.ariaLabels.close(),iconType:"close",inverse:"inverse"===L||"dark"===L,onClick:$,size:"small",variantType:"subtle"},m("close",j({"data-element":"close"},C)))):null,pe=Boolean(K),fe=Boolean(z),me=e(a,{"aria-modal":!M&&ue,"aria-describedby":!g&&fe?se:g,"aria-label":k,"aria-labelledby":w||(!k&&pe?le:void 0),"data-component":"sidebar","data-element":P,"data-role":v,ref:de,position:H,size:I,role:R,width:q,widthAnimation:G&&ae,$disableStickyOnSmallScreen:A,$fullScreenOnSmallScreen:D,className:re,children:[pe&&r(c,_(j({headerVariant:L,gradientKeyLine:T,closeButton:be},X),{id:le,children:K})),fe&&r(d,_(j({},Y),{id:se,children:z})),!pe&&be,r(u,_(j({disableStickyOnSmallScreen:A,footer:W,isSmallScreen:ie,stickyFooter:J},f(oe)),{children:N}))]});return r(i,{open:F,onCancel:$,disableEscKey:x,enableBackgroundUI:M,topModalOverride:Z,restoreFocusOnClose:ee,$fullScreenOnSmallScreen:D,children:M?me:r(s,{wrapperRef:ce,isOpen:F,additionalWrapperRefs:V,focusableSelectors:Q,focusFirstElement:U,autoFocus:!E,bespokeTrap:B,children:me})})}));g.displayName="Sidebar";export{g as Sidebar,g as default};

package/esm/components/sidebar/sidebar.config.d.ts

@@ -1,12 +0,0 @@
-export declare const smallScreenBreakpoint = "768px";
-export declare const SIDEBAR_SIZES_CSS: {
-    "extra-small": string;
-    small: string;
-    "medium-small": string;
-    medium: string;
-    "medium-large": string;
-    large: string;
-    "extra-large": string;
-};
-export declare const SIDEBAR_SIZES: string[];
-export declare const SIDEBAR_ALIGNMENTS: string[];

package/esm/components/sidebar/sidebar.config.js

@@ -1 +0,0 @@
-const l="768px",e={"extra-small":"214px",small:"314px","medium-small":"414px",medium:"514px","medium-large":"614px",large:"714px","extra-large":"814px"},m=["extra-small","small","medium-small","medium","medium-large","large","extra-large"],a=["left","right"];export{a as SIDEBAR_ALIGNMENTS,m as SIDEBAR_SIZES,e as SIDEBAR_SIZES_CSS,l as smallScreenBreakpoint};

package/esm/components/sidebar/sidebar.style.d.ts

@@ -1,11 +0,0 @@
-import { SidebarProps } from "./sidebar.component";
-declare const StyledSidebar: import("styled-components").StyledComponent<"div", any, {
-    theme: object;
-} & Pick<SidebarProps, "width" | "size" | "position" | "widthAnimation"> & {
-    $disableStickyOnSmallScreen?: boolean;
-    $fullScreenOnSmallScreen?: boolean;
-}, "theme">;
-declare const StyledSidebarModal: import("styled-components").StyledComponent<(props: import("../../__internal__/modal").ModalProps) => import("react").JSX.Element, any, {
-    $fullScreenOnSmallScreen?: boolean;
-}, never>;
-export { StyledSidebar, StyledSidebarModal };

package/esm/components/sidebar/sidebar.style.js

@@ -1 +0,0 @@
-import a,{css as e}from"styled-components";import o from"../../style/utils/element-sizing.js";import i from"../../style/themes/apply-base-theme.js";import l from"../icon/icon.style.js";import{SIDEBAR_SIZES_CSS as r,smallScreenBreakpoint as n}from"./sidebar.config.js";import t from"../../__internal__/modal/modal.component.js";const d=a.div.attrs(i).withConfig({displayName:"sidebar.style__StyledSidebar",componentId:"carbon_v162_9_1__sc-e483f3b1-0"})([":focus{outline:none;}",""],(({position:a,size:i,theme:t,width:d,widthAnimation:s,$disableStickyOnSmallScreen:m,$fullScreenOnSmallScreen:c})=>e(["background:var(--container-standard-bg-default);border-radius:",";bottom:0;position:fixed;display:flex;flex-direction:column;top:0;z-index:",";max-width:100vw;overflow:hidden;"," "," "," ",' > [data-component="close"]:first-of-type{border-radius:var(--global-radius-action-circle);height:var(--global-size-s);min-width:var(--global-size-s);position:absolute;right:var(--global-space-comp-xl);top:var(--global-space-comp-xl);width:var(--global-size-s);z-index:1;',"{height:var(--global-size-2-xs);width:var(--global-size-2-xs);}}",""],"left"===a?"var(--global-radius-none) var(--global-radius-container-xl) var(--global-radius-container-xl) var(--global-radius-none)":"var(--global-radius-container-xl) var(--global-radius-none) var(--global-radius-none) var(--global-radius-container-xl)",t.zIndex.fullScreenModal,(!i||d)&&e(["min-width:288px;"]),d?o({width:d}):e(["width:",";"],i?r[i]:"30vw"),s&&e(["transition:width 0.3s ease;"]),a&&e(["box-shadow:var(--global-depth-lvl3);",":0;"],a),l,c&&e(["@media screen and (max-width:","){border-radius:var(--global-radius-none);height:100%;min-width:100%;width:100%;","}"],n,m&&e(["overflow-y:auto;"]))))),s=a(t).withConfig({displayName:"sidebar.style__StyledSidebarModal",componentId:"carbon_v162_9_1__sc-e483f3b1-1"})(["",""],(({$fullScreenOnSmallScreen:a})=>a&&e(["@media screen and (max-width:",'){[data-element="modal-background"]{display:none;}}'],n)));export{d as StyledSidebar,s as StyledSidebarModal};

package/esm/components/simple-color-picker/index.d.ts

@@ -1,4 +0,0 @@
-export { default as SimpleColorPicker } from "./simple-color-picker.component";
-export type { SimpleColorPickerProps, SimpleColorPickerRef, } from "./simple-color-picker.component";
-export { default as SimpleColor } from "./simple-color";
-export type { SimpleColorProps } from "./simple-color";

package/esm/components/simple-color-picker/index.js

@@ -1 +0,0 @@
-export{SimpleColorPicker}from"./simple-color-picker.component.js";export{SimpleColor}from"./simple-color/simple-color.component.js";

package/esm/components/simple-color-picker/simple-color/checker-board.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".45"><rect x="200" width="200" height="200" /><rect y="200" width="200" height="200" /></svg>

package/esm/components/simple-color-picker/simple-color/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./simple-color.component";
-export type { SimpleColorProps } from "./simple-color.component";

package/esm/components/simple-color-picker/simple-color/index.js

@@ -1 +0,0 @@
-export{SimpleColor as default}from"./simple-color.component.js";

package/esm/components/simple-color-picker/simple-color/simple-color.component.d.ts

@@ -1,31 +0,0 @@
-import React from "react";
-export interface SimpleColorProps {
-    /** the value of the label to pass to screen reader software */
-    "aria-label"?: string;
-    /** the value of the color that is represented by this SimpleColor */
-    value: string;
-    /** the input name */
-    name?: string;
-    /** the input id */
-    id?: string;
-    /** if true, input will be disabled */
-    disabled?: boolean;
-    /** called when the user selects or deselects this color option */
-    onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-    /** Prop for `onBlur` events */
-    onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-    /** Prop for `onMouseDown` events */
-    onMouseDown?: (ev: React.MouseEvent<HTMLInputElement>) => void;
-    /** determines if this color option is selected or unselected */
-    checked?: boolean;
-    /** determines if this color option is selected or unselected when component is used as uncontrolled */
-    defaultChecked?: boolean;
-    /**
-     * @private
-     * @ignore
-     * @internal
-     * Sets className for component. INTERNAL USE ONLY. */
-    className?: string;
-}
-export declare const SimpleColor: React.ForwardRefExoticComponent<SimpleColorProps & React.RefAttributes<HTMLInputElement>>;
-export default SimpleColor;

package/esm/components/simple-color-picker/simple-color/simple-color.component.js

@@ -1 +0,0 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import t,{useRef as o}from"react";import n from"../../../__internal__/utils/helpers/guid/index.js";import l from"../../../__internal__/utils/helpers/tags/tags.js";import{StyledSimpleColor as c,StyledSimpleColorInput as a,StyledColorSampleBox as i,StyledTickIcon as s}from"./simple-color.style.js";function u(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function p(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){u(e,r,t[r])}))}return e}const f=t.forwardRef(((t,u)=>{const{onChange:f,onBlur:b,onMouseDown:m,value:O,name:y,checked:j=!1,id:d,className:g,"aria-label":h}=t,w=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},l=Object.keys(e);for(o=0;o<l.length;o++)t=l[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o<l.length;o++)t=l[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(t,["onChange","onBlur","onMouseDown","value","name","checked","id","className","aria-label"]),{current:P}=o(d||n());return e(c,(v=p({className:g},l("simple-color",t)),_=null!=(_={children:[r(a,p({onChange:f,onBlur:b,onMouseDown:m,checked:j,name:y,"aria-label":h,type:"radio",role:"radio",value:O,ref:u,id:P},w)),r(i,{color:O,children:j&&r(s,{color:O,type:"tick"})})]})?_:{},Object.getOwnPropertyDescriptors?Object.defineProperties(v,Object.getOwnPropertyDescriptors(_)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(_)).forEach((function(e){Object.defineProperty(v,e,Object.getOwnPropertyDescriptor(_,e))})),v));var v,_}));f.displayName="SimpleColor";export{f as SimpleColor,f as default};

package/esm/components/simple-color-picker/simple-color/simple-color.style.d.ts

@@ -1,8 +0,0 @@
-export declare const StyledSimpleColor: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledColorSampleBox: import("styled-components").StyledComponent<"div", any, {
-    color: string;
-}, never>;
-export declare const StyledSimpleColorInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../__internal__/legacy-input").InputProps & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>, any, {}, never>;
-export declare const StyledTickIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {
-    color: string;
-}, never>;

package/esm/components/simple-color-picker/simple-color/simple-color.style.js

@@ -1 +0,0 @@
-import o,{css as t}from"styled-components";import i from"../../../__internal__/legacy-input/input.component.js";import"react/jsx-runtime";import"react";import"../../../__internal__/legacy-input/input-presentation.style.js";import"../../carbon-provider/__internal__/new-validation.context.js";import e from"./checker-board.svg";import r from"../../icon/icon.component.js";import"../../icon/icon.style.js";import n from"../../../style/utils/get-rgb-values.js";import s from"../../../style/utils/add-focus-styling.js";const l=o.div.withConfig({displayName:"simple-color.style__StyledSimpleColor",componentId:"carbon_v162_9_1__sc-303f1be7-0"})(["width:var(--sizing700);height:var(--sizing700);margin-right:2px;margin-bottom:2px;&:hover{cursor:pointer;}"]),c=o.div.withConfig({displayName:"simple-color.style__StyledColorSampleBox",componentId:"carbon_v162_9_1__sc-303f1be7-1"})(["height:100%;width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;"," ",""],(({color:o})=>"transparent"!==o&&t(["background-color:",";"],o)),(({color:o})=>"transparent"===o&&t(['background-color:#eeeeee;background-image:url("','");background-size:14px 14px;background-position:-2px -2px;'],e))),a=o(i).withConfig({displayName:"simple-color.style__StyledSimpleColorInput",componentId:"carbon_v162_9_1__sc-303f1be7-2"})(["position:absolute;opacity:0;height:var(--sizing700);width:var(--sizing700);margin:0;&:hover{cursor:pointer;}&:disabled:hover{cursor:not-allowed;}&:focus + ","{","}"],c,s(!0)),p=o(r).withConfig({displayName:"simple-color.style__StyledTickIcon",componentId:"carbon_v162_9_1__sc-303f1be7-3"})(["height:20px;width:20px;pointer-events:none;display:block;&::before{font-size:20px;color:",";}"],(({color:o})=>(o=>{const t=n(o),[i,e,r]=t;return(Math.round(299*i)+Math.round(587*e)+Math.round(114*r))/1e3<128?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)"})(o)));export{c as StyledColorSampleBox,l as StyledSimpleColor,a as StyledSimpleColorInput,p as StyledTickIcon};

package/esm/components/simple-color-picker/simple-color-picker.component.d.ts

@@ -1,34 +0,0 @@
-import React from "react";
-import { MarginProps } from "styled-system";
-import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-import { ValidationProps } from "../../__internal__/validations";
-export interface SimpleColorPickerProps extends ValidationProps, MarginProps, TagProps {
-    /** The SimpleColor components to be rendered in the group */
-    children?: React.ReactNode;
-    /** prop that represents childWidth */
-    childWidth?: string | number;
-    /** The content for the Legend */
-    legend: string;
-    /** prop that sets max-width in css */
-    maxWidth?: string | number;
-    /** The name to apply to the input. */
-    name: string;
-    /** Prop for `onChange` events */
-    onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
-    /** Prop for `onKeyDown` events */
-    onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
-    /** Prop for `onBlur` events */
-    onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-    /** Flag to configure component as mandatory */
-    required?: boolean;
-    /** When true, validation icon will be placed on legend instead of being placed by the input */
-    validationOnLegend?: boolean;
-    /** The currently selected color. */
-    value: string;
-}
-export interface SimpleColorPickerRef {
-    /** List of color input HTML refs */
-    gridItemRefs: (HTMLInputElement | null)[];
-}
-export declare const SimpleColorPicker: React.ForwardRefExoticComponent<SimpleColorPickerProps & React.RefAttributes<SimpleColorPickerRef>>;
-export default SimpleColorPicker;

package/esm/components/simple-color-picker/simple-color-picker.component.js

@@ -1 +0,0 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import r,{useMemo as n,useRef as o,useState as i,useImperativeHandle as l,useCallback as a}from"react";import u from"invariant";import s from"../../__internal__/utils/helpers/events/events.js";import p from"../../__internal__/utils/helpers/tags/tags.js";import c from"../../__internal__/fieldset/fieldset.component.js";import{SimpleColor as d}from"./simple-color/simple-color.component.js";import m from"../../__internal__/radio-button-mapper/radio-button-mapper.component.js";import{StyledContent as f,StyledColorOptions as y}from"./simple-color-picker.style.js";import{ValidationIcon as g}from"../../__internal__/validations/validation-icon.component.js";import{InputGroupContext as h}from"../../__internal__/input-behaviour/input-group-behaviour.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import b from"../../style/utils/filter-styled-system-margin-props.js";function v(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function O(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){v(e,t,r[t])}))}return e}function j(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const w=r.forwardRef(((v,w)=>{const{children:_,error:P,warning:D,info:K,name:C,legend:E,onChange:S,onBlur:k,onKeyDown:x,value:A,maxWidth:L=300,childWidth:M=58,validationOnLegend:W,required:R}=v,q=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(v,["children","error","warning","info","name","legend","onChange","onBlur","onKeyDown","value","maxWidth","childWidth","validationOnLegend","required"]),B=n((()=>!r.Children.toArray(_).find((e=>"string"==typeof e||r.isValidElement(e)&&"SimpleColor"!==e.type.displayName))),[_]);u(B,`SimpleColorPicker accepts only children of type \`${d.displayName}\`.`);const I=n((()=>r.Children.toArray(_).filter((e=>r.isValidElement(e)))),[_]),N=o(null),[U,V]=i(null),F=Math.floor(+L/+M),T=Math.ceil((null==I?void 0:I.length)/F);let $=F*T-(null==I?void 0:I.length),z=1,G=1;const H=o([]),J=I.map(((e,t)=>{const n=1!==z;let o,i,l=!1;z+1===T&&$-F<0?(l=!0,$+=1):z+1!==T&&z!==T&&T>1&&(l=!0),G===F&&(G=0,z+=1),n&&(o=t-F),l&&(i=F+t);const a={ref:e=>{H.current[t]=e},"data-up":n,"data-down":l,"data-item-up":o,"data-item-down":i,required:R};return G+=1,r.cloneElement(e,a)}));l(w,(()=>({gridItemRefs:H.current})),[H]);const Q=a((e=>J.findIndex((t=>e.getAttribute("value")===t.props.value))),[J]),X=a((e=>{if(x&&x(e),![s.isLeftKey(e),s.isUpKey(e),s.isRightKey(e),s.isDownKey(e)].includes(!0))return;e.preventDefault();let t=null;const r=e.target;if(s.isUpKey(e)){if("true"!==r.getAttribute("data-up"))return;t=+r.getAttribute("data-item-up")}else if(s.isDownKey(e)){if("true"!==r.getAttribute("data-down"))return;t=+r.getAttribute("data-item-down")}if((s.isLeftKey(e)||s.isRightKey(e))&&(t=s.isLeftKey(e)?Q(r)-1:Q(r)+1,t<0?t=J.length-1:t>J.length-1&&(t=0)),null!==t){const e=H.current[t];null==e||e.focus(),null==e||e.click()}}),[x,J,Q]),Y=e=>{e.preventDefault(),setTimeout((()=>{var t;const r=!(null==H||null===(t=H.current)||void 0===t?void 0:t.find((e=>e===document.activeElement)));k&&r&&k(e)}),5)},Z=e=>{null!==U&&U===e.target?e.preventDefault():null!==U?(e.preventDefault(),V(e.target)):V(e.target)},ee={error:P,warning:D,info:K};return e(c,j(O({role:"radiogroup",legend:E,isRequired:R},W&&ee,p("simple-color-picker",v),b(q)),{children:t(f,{children:[e(h.Consumer,{children:({onMouseEnter:t,onMouseLeave:r})=>e(y,j(O({maxWidth:L,childWidth:M,ref:N,onMouseEnter:t,onMouseLeave:r},ee),{children:e(m,{name:C,value:A,onChange:S,onMouseDown:Z,onKeyDown:X,onBlur:Y,children:J})}))}),!W&&e(g,j(O({},ee),{tooltipFlipOverrides:["top","bottom"]}))]})}))}));w.displayName="SimpleColorPicker";export{w as SimpleColorPicker,w as default};